From c717c3751c328e4a638104c306418622fecc1228 Mon Sep 17 00:00:00 2001
From: doomtube <doomtube@realms.pub>
Date: Mon, 5 Jan 2026 22:54:27 -0500
Subject: [PATCH] Initial commit - realms platform

---
 .env                                          |    11 -
 .env.example                                  |    93 +
 .forgejo/workflows/build.yml                  |   127 +
 .forgejo/workflows/deploy.yml                 |    84 +
 .gitignore                                    |   146 +
 backend/CMakeLists.txt                        |    33 +-
 backend/Dockerfile                            |    11 +-
 backend/{config.json => config.json.example}  |    23 +-
 backend/src/admin_tool.cpp                    |    60 +-
 backend/src/common/AuthHelpers.h              |    82 +
 backend/src/common/FileUtils.h                |   253 +
 backend/src/common/FileValidation.h           |   218 +
 backend/src/common/HttpHelpers.h              |    29 +
 backend/src/common/utils.h                    |   243 -
 backend/src/controllers/AdminController.cpp   |  3152 +++-
 backend/src/controllers/AdminController.h     |   275 +-
 backend/src/controllers/AudioController.cpp   |  1051 ++
 backend/src/controllers/AudioController.h     |    72 +
 backend/src/controllers/EbookController.cpp   |   908 ++
 backend/src/controllers/EbookController.h     |    72 +
 backend/src/controllers/ForumController.cpp   |  1788 +++
 backend/src/controllers/ForumController.h     |   122 +
 backend/src/controllers/RealmController.cpp   |  1284 +-
 backend/src/controllers/RealmController.h     |    43 +-
 .../src/controllers/RestreamController.cpp    |   413 +
 backend/src/controllers/RestreamController.h  |    44 +
 backend/src/controllers/StreamController.cpp  |   321 +-
 backend/src/controllers/StreamController.h    |    22 +-
 backend/src/controllers/UserController.cpp    |  2065 ++-
 backend/src/controllers/UserController.h      |   106 +-
 backend/src/controllers/VideoController.cpp   |   926 ++
 backend/src/controllers/VideoController.h     |    62 +
 backend/src/controllers/WatchController.cpp   |  1305 ++
 backend/src/controllers/WatchController.h     |   118 +
 backend/src/main.cpp                          |    65 +-
 backend/src/models/Realm.h                    |    15 -
 backend/src/models/StreamKey.h                |    12 -
 backend/src/services/AuthService.cpp          |   441 +-
 backend/src/services/AuthService.h            |    35 +-
 backend/src/services/CensorService.cpp        |   164 +
 backend/src/services/CensorService.h          |    37 +
 backend/src/services/CorsMiddleware.h         |    76 -
 backend/src/services/DatabaseService.cpp      |    21 +-
 backend/src/services/RedisHelper.cpp          |    38 +-
 backend/src/services/RedisHelper.h            |     1 +
 backend/src/services/RestreamService.cpp      |   397 +
 backend/src/services/RestreamService.h        |    75 +
 backend/src/services/StatsService.cpp         |    79 +-
 backend/src/services/StatsService.h           |     4 +-
 backend/src/services/TreasuryService.cpp      |   281 +
 backend/src/services/TreasuryService.h        |    40 +
 bot-sdk/examples/echo-bot.js                  |    93 +
 bot-sdk/examples/trivia-bot.js                |   221 +
 bot-sdk/index.js                              |   369 +
 bot-sdk/package.json                          |    21 +
 chat-service/.dockerignore                    |     7 +
 chat-service/CMakeLists.txt                   |    55 +
 chat-service/Dockerfile                       |    87 +
 chat-service/README.md                        |   331 +
 chat-service/conanfile.txt                    |    14 +
 chat-service/config.json                      |    49 +
 .../src/controllers/ChatAdminController.cpp   |   129 +
 .../src/controllers/ChatAdminController.h     |    21 +
 .../src/controllers/ChatController.cpp        |   184 +
 chat-service/src/controllers/ChatController.h |    38 +
 .../controllers/ChatWebSocketController.cpp   |  1340 ++
 .../src/controllers/ChatWebSocketController.h |   103 +
 .../src/controllers/ModerationController.cpp  |   392 +
 .../src/controllers/ModerationController.h    |    46 +
 .../src/controllers/WatchSyncController.cpp   |  1470 ++
 .../src/controllers/WatchSyncController.h     |   152 +
 chat-service/src/main.cpp                     |   134 +
 .../src/middleware/ChatAuthMiddleware.cpp     |    46 +
 .../src/middleware/ChatAuthMiddleware.h       |    11 +
 chat-service/src/models/ChatMessage.h         |   179 +
 chat-service/src/models/ModerationAction.h    |    67 +
 chat-service/src/services/AuthService.cpp     |    73 +
 chat-service/src/services/AuthService.h       |    41 +
 chat-service/src/services/CensorService.cpp   |   279 +
 chat-service/src/services/CensorService.h     |    51 +
 chat-service/src/services/ChatService.cpp     |   294 +
 chat-service/src/services/ChatService.h       |    83 +
 .../src/services/ModerationService.cpp        |   249 +
 chat-service/src/services/ModerationService.h |    67 +
 .../src/services/RedisMessageStore.cpp        |   651 +
 chat-service/src/services/RedisMessageStore.h |   124 +
 chat-service/src/services/StickerService.cpp  |   342 +
 chat-service/src/services/StickerService.h    |    69 +
 database/00-create-nakama-db.sql              |     7 +
 database/00-init-nakama.sh                    |    11 +
 database/init.sql                             |  1096 +-
 devops/forgejo-server/.env.example            |    41 +
 devops/forgejo-server/Caddyfile               |    40 +
 devops/forgejo-server/README.md               |   137 +
 devops/forgejo-server/docker-compose.yml      |   208 +
 devops/terraform/.gitignore                   |    44 +
 devops/terraform/.terraform.lock.hcl          |   106 +
 devops/terraform/main.tf                      |   107 +
 devops/terraform/modules/firewalls/main.tf    |   187 +
 devops/terraform/modules/firewalls/outputs.tf |    13 +
 .../terraform/modules/firewalls/variables.tf  |    39 +
 .../terraform/modules/firewalls/versions.tf   |     8 +
 .../modules/forgejo/cloud-init.yaml.tpl       |   590 +
 devops/terraform/modules/forgejo/main.tf      |    97 +
 devops/terraform/modules/forgejo/outputs.tf   |    34 +
 devops/terraform/modules/forgejo/variables.tf |    99 +
 devops/terraform/modules/forgejo/versions.tf  |    12 +
 .../modules/jump_host/cloud-init.yaml.tpl     |   175 +
 devops/terraform/modules/jump_host/main.tf    |    39 +
 devops/terraform/modules/jump_host/outputs.tf |    19 +
 .../terraform/modules/jump_host/variables.tf  |    65 +
 .../terraform/modules/jump_host/versions.tf   |    12 +
 devops/terraform/modules/ssh_keys/main.tf     |    46 +
 devops/terraform/modules/ssh_keys/outputs.tf  |    54 +
 .../terraform/modules/ssh_keys/variables.tf   |    15 +
 devops/terraform/modules/ssh_keys/versions.tf |    12 +
 devops/terraform/modules/vpc/main.tf          |    10 +
 devops/terraform/modules/vpc/outputs.tf       |    14 +
 devops/terraform/modules/vpc/variables.tf     |    20 +
 devops/terraform/modules/vpc/versions.tf      |     8 +
 devops/terraform/outputs.tf                   |   144 +
 devops/terraform/terraform.tfvars.example     |    76 +
 devops/terraform/variables.tf                 |   150 +
 devops/terraform/versions.tf                  |    34 +
 docker                                        |     0
 docker-compose.prod.yml                       |   231 +
 docker-compose.yml                            |   126 +-
 frontend/Dockerfile                           |    17 +-
 frontend/package.json                         |    11 +-
 frontend/src/app.css                          |    28 +-
 frontend/src/app.html                         |     2 +-
 frontend/src/hooks.server.js                  |    23 +
 frontend/src/lib/chat/chatStore.js            |   326 +
 frontend/src/lib/chat/chatWebSocket.js        |   425 +
 frontend/src/lib/chat/stickerFavorites.js     |    66 +
 frontend/src/lib/chat/ttsStore.js             |   220 +
 .../src/lib/components/AudioPlayer.svelte     |   667 +
 .../lib/components/ChessGameOverlay.svelte    |   919 ++
 .../lib/components/EbookReaderOverlay.svelte  |  1180 ++
 .../lib/components/GlobalAudioPlayer.svelte   |   112 +
 .../src/lib/components/GraffitiEditor.svelte  |   871 +
 .../src/lib/components/StreamPlayer.svelte    |   485 +
 .../lib/components/StreamTileOverlay.svelte   |   535 +
 .../lib/components/UbercoinTipModal.svelte    |   467 +
 .../src/lib/components/chat/ChatInput.svelte  |   711 +
 .../lib/components/chat/ChatMessage.svelte    |  1026 ++
 .../src/lib/components/chat/ChatPanel.svelte  |  1392 ++
 .../lib/components/chat/ChatTerminal.svelte   |   733 +
 .../lib/components/chat/ProfilePreview.svelte |   685 +
 .../lib/components/chat/StickerBrowser.svelte |   515 +
 .../components/terminal/AudioBrowser.svelte   |   628 +
 .../components/terminal/EbookBrowser.svelte   |   391 +
 .../components/terminal/GamesBrowser.svelte   |   495 +
 .../components/terminal/StreamsBrowser.svelte |   448 +
 .../components/terminal/TerminalCore.svelte   |   383 +
 .../components/terminal/TerminalTabBar.svelte |   172 +
 .../terminal/TreasuryBrowser.svelte           |   350 +
 .../terminal/WatchRoomsBrowser.svelte         |   302 +
 .../components/terminal/terminalCommands.js   |   700 +
 .../components/terminal/terminalStyles.css    |   991 ++
 .../components/watch/PlaybackControls.svelte  |   221 +
 .../lib/components/watch/WatchPlaylist.svelte |  1041 ++
 .../lib/components/watch/YouTubePlayer.svelte |   368 +
 frontend/src/lib/fingerprint.js               |    63 +
 frontend/src/lib/pgp.js                       |    61 +-
 frontend/src/lib/stores/audioPlaylist.js      |   515 +
 frontend/src/lib/stores/auth.js               |    68 +-
 frontend/src/lib/stores/chatLayout.js         |   105 +
 frontend/src/lib/stores/ebookReader.js        |   205 +
 frontend/src/lib/stores/gamesOverlay.js       |   158 +
 frontend/src/lib/stores/nakama.js             |   500 +
 frontend/src/lib/stores/siteSettings.js       |     7 +
 frontend/src/lib/stores/stickers.js           |    91 +
 frontend/src/lib/stores/streamTiles.js        |   149 +
 frontend/src/lib/stores/ubercoin.js           |   164 +
 frontend/src/lib/stores/user.js               |    93 -
 frontend/src/lib/stores/watchSync.js          |   394 +
 frontend/src/lib/utils/formatters.js          |   123 +
 frontend/src/lib/websocket.js                 |    40 +-
 frontend/src/routes/+layout.svelte            |   506 +-
 frontend/src/routes/+page.svelte              |  1018 +-
 frontend/src/routes/[realm]/live/+page.svelte |   961 +-
 .../src/routes/[realm]/watch/+page.svelte     |   513 +
 frontend/src/routes/admin/+page.svelte        |  3591 ++++-
 frontend/src/routes/audio/+page.svelte        |   440 +
 frontend/src/routes/audio/[name]/+page.svelte |   492 +
 .../src/routes/audio/realm/[id]/+page.svelte  |   492 +
 .../src/routes/chat/popout/+layout@.svelte    |    28 +
 frontend/src/routes/chat/popout/+page.svelte  |    67 +
 .../src/routes/chat/terminal/+layout@.svelte  |    28 +
 .../src/routes/chat/terminal/+page.svelte     |   564 +
 frontend/src/routes/ebooks/+page.svelte       |   481 +
 .../src/routes/ebooks/realm/[id]/+page.svelte |   428 +
 frontend/src/routes/forums/+page.svelte       |  1030 ++
 .../src/routes/forums/[slug]/+page.svelte     |  1411 ++
 .../[slug]/thread/[threadId]/+page.svelte     |   771 +
 frontend/src/routes/games/+page.svelte        |   205 +
 frontend/src/routes/games/chess/+page.svelte  |   891 ++
 frontend/src/routes/login/+page.svelte        |   192 +-
 frontend/src/routes/my-realms/+page.svelte    |  3761 ++++-
 .../routes/profile/[username]/+page.svelte    |   413 +-
 frontend/src/routes/read/[id]/+page.svelte    |   424 +
 frontend/src/routes/settings/+page.svelte     |  1922 ++-
 frontend/src/routes/stats/+page.svelte        |   225 +
 frontend/src/routes/video/+page.svelte        |   371 +
 .../src/routes/video/realm/[id]/+page.svelte  |   355 +
 frontend/src/routes/videos/+page.svelte       |   377 +
 .../src/routes/videos/realm/[id]/+page.svelte |   329 +
 frontend/src/routes/watch/[id]/+page.svelte   |   298 +
 frontend/static/robots.txt                    |   135 +
 frontend/svelte.config.js                     |    21 +-
 frontend/vite.config.ts                       |    14 +-
 nakama/config.yml                             |    24 +
 nakama/modules/package.json                   |    16 +
 nakama/modules/src/main.ts                    |  1241 ++
 nakama/modules/tsconfig.json                  |    16 +
 openresty/Dockerfile                          |    16 +-
 openresty/conf.d/ssl.conf.template            |    38 +
 openresty/lua/fingerprint.lua                 |    71 +
 openresty/lua/jwt.lua                         |   167 +
 openresty/lua/redis_helper.lua                |    29 +-
 openresty/lua/thumbnail.lua                   |   180 +
 openresty/lua/uberban.lua                     |   118 +
 openresty/nginx.conf                          |   606 +-
 ovenmediaengine/Server.xml                    |    25 +-
 terraform/main.tf                             |    48 +
 .../modules/app_server/cloud-init.yaml.tpl    |   232 +
 terraform/modules/app_server/main.tf          |   196 +
 terraform/modules/app_server/outputs.tf       |    33 +
 terraform/modules/app_server/variables.tf     |    95 +
 terraform/outputs.tf                          |    68 +
 terraform/variables.tf                        |   135 +
 terraform/versions.tf                         |    26 +
 text.txt                                      | 13207 ----------------
 234 files changed, 74103 insertions(+), 15231 deletions(-)
 delete mode 100644 .env
 create mode 100644 .env.example
 create mode 100644 .forgejo/workflows/build.yml
 create mode 100644 .forgejo/workflows/deploy.yml
 create mode 100644 .gitignore
 rename backend/{config.json => config.json.example} (62%)
 create mode 100644 backend/src/common/AuthHelpers.h
 create mode 100644 backend/src/common/FileUtils.h
 create mode 100644 backend/src/common/FileValidation.h
 create mode 100644 backend/src/common/HttpHelpers.h
 delete mode 100644 backend/src/common/utils.h
 create mode 100644 backend/src/controllers/AudioController.cpp
 create mode 100644 backend/src/controllers/AudioController.h
 create mode 100644 backend/src/controllers/EbookController.cpp
 create mode 100644 backend/src/controllers/EbookController.h
 create mode 100644 backend/src/controllers/ForumController.cpp
 create mode 100644 backend/src/controllers/ForumController.h
 create mode 100644 backend/src/controllers/RestreamController.cpp
 create mode 100644 backend/src/controllers/RestreamController.h
 create mode 100644 backend/src/controllers/VideoController.cpp
 create mode 100644 backend/src/controllers/VideoController.h
 create mode 100644 backend/src/controllers/WatchController.cpp
 create mode 100644 backend/src/controllers/WatchController.h
 delete mode 100644 backend/src/models/Realm.h
 delete mode 100644 backend/src/models/StreamKey.h
 create mode 100644 backend/src/services/CensorService.cpp
 create mode 100644 backend/src/services/CensorService.h
 delete mode 100644 backend/src/services/CorsMiddleware.h
 create mode 100644 backend/src/services/RestreamService.cpp
 create mode 100644 backend/src/services/RestreamService.h
 create mode 100644 backend/src/services/TreasuryService.cpp
 create mode 100644 backend/src/services/TreasuryService.h
 create mode 100644 bot-sdk/examples/echo-bot.js
 create mode 100644 bot-sdk/examples/trivia-bot.js
 create mode 100644 bot-sdk/index.js
 create mode 100644 bot-sdk/package.json
 create mode 100644 chat-service/.dockerignore
 create mode 100644 chat-service/CMakeLists.txt
 create mode 100644 chat-service/Dockerfile
 create mode 100644 chat-service/README.md
 create mode 100644 chat-service/conanfile.txt
 create mode 100644 chat-service/config.json
 create mode 100644 chat-service/src/controllers/ChatAdminController.cpp
 create mode 100644 chat-service/src/controllers/ChatAdminController.h
 create mode 100644 chat-service/src/controllers/ChatController.cpp
 create mode 100644 chat-service/src/controllers/ChatController.h
 create mode 100644 chat-service/src/controllers/ChatWebSocketController.cpp
 create mode 100644 chat-service/src/controllers/ChatWebSocketController.h
 create mode 100644 chat-service/src/controllers/ModerationController.cpp
 create mode 100644 chat-service/src/controllers/ModerationController.h
 create mode 100644 chat-service/src/controllers/WatchSyncController.cpp
 create mode 100644 chat-service/src/controllers/WatchSyncController.h
 create mode 100644 chat-service/src/main.cpp
 create mode 100644 chat-service/src/middleware/ChatAuthMiddleware.cpp
 create mode 100644 chat-service/src/middleware/ChatAuthMiddleware.h
 create mode 100644 chat-service/src/models/ChatMessage.h
 create mode 100644 chat-service/src/models/ModerationAction.h
 create mode 100644 chat-service/src/services/AuthService.cpp
 create mode 100644 chat-service/src/services/AuthService.h
 create mode 100644 chat-service/src/services/CensorService.cpp
 create mode 100644 chat-service/src/services/CensorService.h
 create mode 100644 chat-service/src/services/ChatService.cpp
 create mode 100644 chat-service/src/services/ChatService.h
 create mode 100644 chat-service/src/services/ModerationService.cpp
 create mode 100644 chat-service/src/services/ModerationService.h
 create mode 100644 chat-service/src/services/RedisMessageStore.cpp
 create mode 100644 chat-service/src/services/RedisMessageStore.h
 create mode 100644 chat-service/src/services/StickerService.cpp
 create mode 100644 chat-service/src/services/StickerService.h
 create mode 100644 database/00-create-nakama-db.sql
 create mode 100644 database/00-init-nakama.sh
 create mode 100644 devops/forgejo-server/.env.example
 create mode 100644 devops/forgejo-server/Caddyfile
 create mode 100644 devops/forgejo-server/README.md
 create mode 100644 devops/forgejo-server/docker-compose.yml
 create mode 100644 devops/terraform/.gitignore
 create mode 100644 devops/terraform/.terraform.lock.hcl
 create mode 100644 devops/terraform/main.tf
 create mode 100644 devops/terraform/modules/firewalls/main.tf
 create mode 100644 devops/terraform/modules/firewalls/outputs.tf
 create mode 100644 devops/terraform/modules/firewalls/variables.tf
 create mode 100644 devops/terraform/modules/firewalls/versions.tf
 create mode 100644 devops/terraform/modules/forgejo/cloud-init.yaml.tpl
 create mode 100644 devops/terraform/modules/forgejo/main.tf
 create mode 100644 devops/terraform/modules/forgejo/outputs.tf
 create mode 100644 devops/terraform/modules/forgejo/variables.tf
 create mode 100644 devops/terraform/modules/forgejo/versions.tf
 create mode 100644 devops/terraform/modules/jump_host/cloud-init.yaml.tpl
 create mode 100644 devops/terraform/modules/jump_host/main.tf
 create mode 100644 devops/terraform/modules/jump_host/outputs.tf
 create mode 100644 devops/terraform/modules/jump_host/variables.tf
 create mode 100644 devops/terraform/modules/jump_host/versions.tf
 create mode 100644 devops/terraform/modules/ssh_keys/main.tf
 create mode 100644 devops/terraform/modules/ssh_keys/outputs.tf
 create mode 100644 devops/terraform/modules/ssh_keys/variables.tf
 create mode 100644 devops/terraform/modules/ssh_keys/versions.tf
 create mode 100644 devops/terraform/modules/vpc/main.tf
 create mode 100644 devops/terraform/modules/vpc/outputs.tf
 create mode 100644 devops/terraform/modules/vpc/variables.tf
 create mode 100644 devops/terraform/modules/vpc/versions.tf
 create mode 100644 devops/terraform/outputs.tf
 create mode 100644 devops/terraform/terraform.tfvars.example
 create mode 100644 devops/terraform/variables.tf
 create mode 100644 devops/terraform/versions.tf
 delete mode 100644 docker
 create mode 100644 docker-compose.prod.yml
 create mode 100644 frontend/src/hooks.server.js
 create mode 100644 frontend/src/lib/chat/chatStore.js
 create mode 100644 frontend/src/lib/chat/chatWebSocket.js
 create mode 100644 frontend/src/lib/chat/stickerFavorites.js
 create mode 100644 frontend/src/lib/chat/ttsStore.js
 create mode 100644 frontend/src/lib/components/AudioPlayer.svelte
 create mode 100644 frontend/src/lib/components/ChessGameOverlay.svelte
 create mode 100644 frontend/src/lib/components/EbookReaderOverlay.svelte
 create mode 100644 frontend/src/lib/components/GlobalAudioPlayer.svelte
 create mode 100644 frontend/src/lib/components/GraffitiEditor.svelte
 create mode 100644 frontend/src/lib/components/StreamPlayer.svelte
 create mode 100644 frontend/src/lib/components/StreamTileOverlay.svelte
 create mode 100644 frontend/src/lib/components/UbercoinTipModal.svelte
 create mode 100644 frontend/src/lib/components/chat/ChatInput.svelte
 create mode 100644 frontend/src/lib/components/chat/ChatMessage.svelte
 create mode 100644 frontend/src/lib/components/chat/ChatPanel.svelte
 create mode 100644 frontend/src/lib/components/chat/ChatTerminal.svelte
 create mode 100644 frontend/src/lib/components/chat/ProfilePreview.svelte
 create mode 100644 frontend/src/lib/components/chat/StickerBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/AudioBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/EbookBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/GamesBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/StreamsBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/TerminalCore.svelte
 create mode 100644 frontend/src/lib/components/terminal/TerminalTabBar.svelte
 create mode 100644 frontend/src/lib/components/terminal/TreasuryBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
 create mode 100644 frontend/src/lib/components/terminal/terminalCommands.js
 create mode 100644 frontend/src/lib/components/terminal/terminalStyles.css
 create mode 100644 frontend/src/lib/components/watch/PlaybackControls.svelte
 create mode 100644 frontend/src/lib/components/watch/WatchPlaylist.svelte
 create mode 100644 frontend/src/lib/components/watch/YouTubePlayer.svelte
 create mode 100644 frontend/src/lib/fingerprint.js
 create mode 100644 frontend/src/lib/stores/audioPlaylist.js
 create mode 100644 frontend/src/lib/stores/chatLayout.js
 create mode 100644 frontend/src/lib/stores/ebookReader.js
 create mode 100644 frontend/src/lib/stores/gamesOverlay.js
 create mode 100644 frontend/src/lib/stores/nakama.js
 create mode 100644 frontend/src/lib/stores/siteSettings.js
 create mode 100644 frontend/src/lib/stores/stickers.js
 create mode 100644 frontend/src/lib/stores/streamTiles.js
 create mode 100644 frontend/src/lib/stores/ubercoin.js
 delete mode 100644 frontend/src/lib/stores/user.js
 create mode 100644 frontend/src/lib/stores/watchSync.js
 create mode 100644 frontend/src/lib/utils/formatters.js
 create mode 100644 frontend/src/routes/[realm]/watch/+page.svelte
 create mode 100644 frontend/src/routes/audio/+page.svelte
 create mode 100644 frontend/src/routes/audio/[name]/+page.svelte
 create mode 100644 frontend/src/routes/audio/realm/[id]/+page.svelte
 create mode 100644 frontend/src/routes/chat/popout/+layout@.svelte
 create mode 100644 frontend/src/routes/chat/popout/+page.svelte
 create mode 100644 frontend/src/routes/chat/terminal/+layout@.svelte
 create mode 100644 frontend/src/routes/chat/terminal/+page.svelte
 create mode 100644 frontend/src/routes/ebooks/+page.svelte
 create mode 100644 frontend/src/routes/ebooks/realm/[id]/+page.svelte
 create mode 100644 frontend/src/routes/forums/+page.svelte
 create mode 100644 frontend/src/routes/forums/[slug]/+page.svelte
 create mode 100644 frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
 create mode 100644 frontend/src/routes/games/+page.svelte
 create mode 100644 frontend/src/routes/games/chess/+page.svelte
 create mode 100644 frontend/src/routes/read/[id]/+page.svelte
 create mode 100644 frontend/src/routes/stats/+page.svelte
 create mode 100644 frontend/src/routes/video/+page.svelte
 create mode 100644 frontend/src/routes/video/realm/[id]/+page.svelte
 create mode 100644 frontend/src/routes/videos/+page.svelte
 create mode 100644 frontend/src/routes/videos/realm/[id]/+page.svelte
 create mode 100644 frontend/src/routes/watch/[id]/+page.svelte
 create mode 100644 frontend/static/robots.txt
 create mode 100644 nakama/config.yml
 create mode 100644 nakama/modules/package.json
 create mode 100644 nakama/modules/src/main.ts
 create mode 100644 nakama/modules/tsconfig.json
 create mode 100644 openresty/conf.d/ssl.conf.template
 create mode 100644 openresty/lua/fingerprint.lua
 create mode 100644 openresty/lua/jwt.lua
 create mode 100644 openresty/lua/thumbnail.lua
 create mode 100644 openresty/lua/uberban.lua
 create mode 100644 terraform/main.tf
 create mode 100644 terraform/modules/app_server/cloud-init.yaml.tpl
 create mode 100644 terraform/modules/app_server/main.tf
 create mode 100644 terraform/modules/app_server/outputs.tf
 create mode 100644 terraform/modules/app_server/variables.tf
 create mode 100644 terraform/outputs.tf
 create mode 100644 terraform/variables.tf
 create mode 100644 terraform/versions.tf
 delete mode 100644 text.txt

diff --git a/.env b/.env
deleted file mode 100644
index 3200623..0000000
--- a/.env
+++ /dev/null
@@ -1,11 +0,0 @@
-# Database
-DB_PASSWORD=your-secure-password
-
-# JWT
-JWT_SECRET=your-very-long-random-jwt-secret
-
-# OvenMediaEngine API
-OME_API_TOKEN=your-ome-api-token
-
-# Application
-APP_ENV=production
\ No newline at end of file
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..cdc2a19
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,93 @@
+# =============================================================================
+# realms.india Environment Configuration Template
+# =============================================================================
+# Copy this file to .env and fill in your actual values
+# IMPORTANT: Never commit the .env file to version control!
+
+# =============================================================================
+# Database Configuration
+# =============================================================================
+# PostgreSQL password for user 'streamuser'
+# SECURITY: Generate a strong password (16+ characters, mixed case, numbers, symbols)
+DB_PASSWORD=CHANGE_ME_generate_strong_password_here
+
+# =============================================================================
+# JWT Authentication
+# =============================================================================
+# Secret key for signing JWT tokens
+# SECURITY: Must be a cryptographically secure random string (32+ characters)
+# Generate with: openssl rand -base64 32
+JWT_SECRET=CHANGE_ME_generate_with_openssl_rand_base64_32
+
+# =============================================================================
+# OvenMediaEngine API
+# =============================================================================
+# API token for OvenMediaEngine management
+# Generate a random token for authentication
+OME_API_TOKEN=CHANGE_ME_generate_random_token_here
+
+# =============================================================================
+# Application Environment
+# =============================================================================
+# Environment mode: development | production
+APP_ENV=production
+
+# =============================================================================
+# Optional: Advanced Configuration
+# =============================================================================
+# Uncomment and configure if needed
+
+# Database settings (defaults shown)
+# DB_HOST=postgres
+# DB_NAME=streaming
+# DB_USER=streamuser
+# DB_PORT=5432
+
+# Redis settings
+# SECURITY: Generate a strong password for Redis authentication
+REDIS_PASSWORD=CHANGE_ME_generate_strong_password_here
+
+# REDIS_HOST=redis
+# REDIS_PORT=6379
+# REDIS_DB=0
+
+# Chat Redis database (defaults shown)
+# CHAT_REDIS_DB=1
+
+# =============================================================================
+# Nakama Game Server
+# =============================================================================
+# Server key for client authentication
+# Generate with: openssl rand -hex 16
+NAKAMA_SERVER_KEY=CHANGE_ME_generate_with_openssl_rand_hex_16
+
+# Console admin password
+# SECURITY: Use a strong password for the Nakama admin console
+NAKAMA_CONSOLE_PASSWORD=CHANGE_ME_nakama_admin_password
+
+# Frontend Nakama configuration
+# These are passed to the SvelteKit frontend
+VITE_NAKAMA_SERVER_KEY=CHANGE_ME_must_match_NAKAMA_SERVER_KEY
+VITE_NAKAMA_HOST=localhost
+VITE_NAKAMA_PORT=80
+VITE_NAKAMA_USE_SSL=false
+
+# =============================================================================
+# Security Notes:
+# =============================================================================
+# 1. Generate DB_PASSWORD: Use a password manager or:
+#    openssl rand -base64 24
+#
+# 2. Generate JWT_SECRET: MUST be cryptographically secure:
+#    openssl rand -base64 32
+#
+# 3. Generate OME_API_TOKEN:
+#    openssl rand -hex 32
+#
+# 4. Generate NAKAMA_SERVER_KEY:
+#    openssl rand -hex 16
+#
+# 5. Never use default/example values in production
+# 6. Restrict .env file permissions: chmod 600 .env
+# 7. Rotate secrets regularly (every 90 days recommended)
+# =============================================================================
diff --git a/.forgejo/workflows/build.yml b/.forgejo/workflows/build.yml
new file mode 100644
index 0000000..43d6897
--- /dev/null
+++ b/.forgejo/workflows/build.yml
@@ -0,0 +1,127 @@
+# =============================================================================
+# Build and Push Docker Images to Forgejo Registry
+# =============================================================================
+# Triggers on push to main branch and pull requests
+# Builds: backend, frontend, chat-service, openresty
+# =============================================================================
+
+name: Build and Push
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+env:
+  REGISTRY: qbit.realms.pub
+  IMAGE_PREFIX: realms
+
+jobs:
+  # ===========================================================================
+  # Build Backend (C++/Drogon)
+  # ===========================================================================
+  build-backend:
+    runs-on: docker
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Forgejo Registry
+        if: github.event_name == 'push'
+        run: |
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
+
+      - name: Build Backend Image
+        run: |
+          docker build \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/backend:${{ github.sha }} \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/backend:latest \
+            ./backend
+
+      - name: Push Backend Image
+        if: github.event_name == 'push'
+        run: |
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/backend:${{ github.sha }}
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/backend:latest
+
+  # ===========================================================================
+  # Build Frontend (SvelteKit)
+  # ===========================================================================
+  build-frontend:
+    runs-on: docker
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Forgejo Registry
+        if: github.event_name == 'push'
+        run: |
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
+
+      - name: Build Frontend Image
+        run: |
+          docker build \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/frontend:${{ github.sha }} \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/frontend:latest \
+            ./frontend
+
+      - name: Push Frontend Image
+        if: github.event_name == 'push'
+        run: |
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/frontend:${{ github.sha }}
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/frontend:latest
+
+  # ===========================================================================
+  # Build Chat Service
+  # ===========================================================================
+  build-chat:
+    runs-on: docker
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Forgejo Registry
+        if: github.event_name == 'push'
+        run: |
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
+
+      - name: Build Chat Service Image
+        run: |
+          docker build \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/chat-service:${{ github.sha }} \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/chat-service:latest \
+            ./chat-service
+
+      - name: Push Chat Service Image
+        if: github.event_name == 'push'
+        run: |
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/chat-service:${{ github.sha }}
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/chat-service:latest
+
+  # ===========================================================================
+  # Build OpenResty (Nginx + Lua)
+  # ===========================================================================
+  build-openresty:
+    runs-on: docker
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Forgejo Registry
+        if: github.event_name == 'push'
+        run: |
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
+
+      - name: Build OpenResty Image
+        run: |
+          docker build \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/openresty:${{ github.sha }} \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/openresty:latest \
+            ./openresty
+
+      - name: Push OpenResty Image
+        if: github.event_name == 'push'
+        run: |
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/openresty:${{ github.sha }}
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/openresty:latest
diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
new file mode 100644
index 0000000..1000be5
--- /dev/null
+++ b/.forgejo/workflows/deploy.yml
@@ -0,0 +1,84 @@
+# =============================================================================
+# Deploy to Production Server
+# =============================================================================
+# Triggers after successful build on main/master branch
+# SSHs to production server and updates containers
+# =============================================================================
+
+name: Deploy to Production
+
+on:
+  workflow_run:
+    workflows: ["Build and Push"]
+    types: [completed]
+    branches: [main, master]
+
+env:
+  REGISTRY: qbit.realms.pub
+  IMAGE_PREFIX: realms
+
+jobs:
+  deploy:
+    # Only deploy if the build succeeded
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: docker
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          # Add host key (skip strict checking for first connection)
+          ssh-keyscan -p ${{ secrets.DEPLOY_PORT }} ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts 2>/dev/null || true
+
+      - name: Copy docker-compose to server
+        run: |
+          scp -i ~/.ssh/deploy_key -P ${{ secrets.DEPLOY_PORT }} \
+            -o StrictHostKeyChecking=no \
+            docker-compose.prod.yml \
+            root@${{ secrets.DEPLOY_HOST }}:/opt/realms/docker-compose.yml
+
+      - name: Deploy to Production
+        run: |
+          ssh -i ~/.ssh/deploy_key -p ${{ secrets.DEPLOY_PORT }} \
+            -o StrictHostKeyChecking=no \
+            root@${{ secrets.DEPLOY_HOST }} '
+            set -e
+            cd /opt/realms
+
+            # Login to registry
+            echo "${{ secrets.REGISTRY_TOKEN }}" | docker login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
+
+            # Pull latest images
+            docker compose pull
+
+            # Bring up services with zero-downtime restart
+            docker compose up -d --remove-orphans
+
+            # Prune old images
+            docker image prune -f
+
+            # Show running containers
+            docker compose ps
+          '
+
+      - name: Cleanup SSH key
+        if: always()
+        run: rm -f ~/.ssh/deploy_key
+
+      - name: Health Check
+        run: |
+          sleep 10
+          ssh -i ~/.ssh/deploy_key -p ${{ secrets.DEPLOY_PORT }} \
+            -o StrictHostKeyChecking=no \
+            root@${{ secrets.DEPLOY_HOST }} '
+            # Check if services are running
+            docker compose ps --format "table {{.Name}}\t{{.Status}}"
+
+            # Basic health check for frontend
+            curl -sf http://localhost:80/health || echo "Frontend health check pending"
+          ' || true
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3897b19
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,146 @@
+# =============================================================================
+# realms.india - Git Ignore Configuration
+# =============================================================================
+
+# Environment Variables (CRITICAL - Contains Secrets!)
+# ======================================================
+.env
+.env.local
+.env.*.local
+*.env
+!.env.example
+
+# Docker
+# ======================================================
+docker-compose.override.yml
+.docker/
+
+# Database
+# ======================================================
+*.sql.backup
+*.db
+*.sqlite
+*.sqlite3
+postgres_data/
+redis_data/
+
+# Logs
+# ======================================================
+*.log
+logs/
+ome_logs/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Build Artifacts
+# ======================================================
+build/
+dist/
+out/
+.output/
+*.o
+*.so
+*.dylib
+*.dll
+*.exe
+CMakeCache.txt
+CMakeFiles/
+cmake_install.cmake
+Makefile
+*.cmake
+!CMakeLists.txt
+
+# Dependencies
+# ======================================================
+node_modules/
+.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lockb
+bun.lock
+_deps/
+conan_install/
+
+# IDE & Editors
+# ======================================================
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+*.sublime-workspace
+*.sublime-project
+.project
+.classpath
+.settings/
+
+# Frontend
+# ======================================================
+.svelte-kit/
+.vercel/
+.netlify/
+.cache/
+.tmp/
+.temp/
+
+# Testing
+# ======================================================
+coverage/
+.nyc_output/
+*.lcov
+
+# OS
+# ======================================================
+Thumbs.db
+Desktop.ini
+.Spotlight-V100
+.Trashes
+
+# Uploads & User Content
+# ======================================================
+uploads/
+avatars/
+!uploads/.gitkeep
+
+# Security & Credentials
+# ======================================================
+*.pem
+*.key
+*.cert
+*.crt
+*.p12
+*.pfx
+credentials.json
+secrets.json
+.pgp/
+.gnupg/
+backend/config.json
+!backend/config.json.example
+
+# Temporary Files
+# ======================================================
+tmp/
+temp/
+*.tmp
+*.bak
+*.backup
+*~.nib
+*.swp
+*.save
+
+# GPG/PGP
+# ======================================================
+/tmp/pgp_verify/
+*.asc
+*.sig
+!*.asc.example
+
+# Claude Code
+# ======================================================
+.claude/
diff --git a/backend/CMakeLists.txt b/backend/CMakeLists.txt
index c402dfc..c1b8e8c 100644
--- a/backend/CMakeLists.txt
+++ b/backend/CMakeLists.txt
@@ -15,6 +15,15 @@ find_package(PostgreSQL REQUIRED)
 pkg_check_modules(HIREDIS REQUIRED hiredis)
 pkg_check_modules(REDIS_PLUS_PLUS redis++)
 
+# Find libzip for EPUB cover extraction
+pkg_check_modules(LIBZIP REQUIRED libzip)
+
+# Find GPGME for PGP signature verification
+pkg_check_modules(GPGME REQUIRED gpgme)
+
+# Find OpenSSL for cryptographic operations (SECURITY FIX #4)
+find_package(OpenSSL REQUIRED)
+
 # Manual fallback for redis++
 if(NOT REDIS_PLUS_PLUS_FOUND)
     find_path(REDIS_PLUS_PLUS_INCLUDE_DIR sw/redis++/redis++.h
@@ -61,42 +70,58 @@ set(SOURCES
     src/controllers/UserController.cpp
     src/controllers/AdminController.cpp
     src/controllers/RealmController.cpp
+    src/controllers/RestreamController.cpp
+    src/controllers/VideoController.cpp
+    src/controllers/AudioController.cpp
+    src/controllers/EbookController.cpp
+    src/controllers/ForumController.cpp
+    src/controllers/WatchController.cpp
     src/services/DatabaseService.cpp
     src/services/StatsService.cpp
     src/services/RedisHelper.cpp
     src/services/AuthService.cpp
+    src/services/RestreamService.cpp
+    src/services/CensorService.cpp
+    src/services/TreasuryService.cpp
 )
 
 # Create executable
 add_executable(${PROJECT_NAME} ${SOURCES})
 
 # Include directories
-target_include_directories(${PROJECT_NAME} 
-    PRIVATE 
+target_include_directories(${PROJECT_NAME}
+    PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}/src
         ${BCRYPT_INCLUDE_DIR}
         ${JWT_CPP_INCLUDE_DIR}
     SYSTEM PRIVATE
         ${HIREDIS_INCLUDE_DIRS}
         ${REDIS_PLUS_PLUS_INCLUDE_DIRS}
+        ${LIBZIP_INCLUDE_DIRS}
+        ${GPGME_INCLUDE_DIRS}
 )
 
 # Link libraries
-target_link_libraries(${PROJECT_NAME} 
+target_link_libraries(${PROJECT_NAME}
     PRIVATE
         Drogon::Drogon
         PostgreSQL::PostgreSQL
         ${REDIS_PLUS_PLUS_LIBRARIES}
         ${HIREDIS_LIBRARIES}
         ${BCRYPT_LIBRARY}
+        ${LIBZIP_LIBRARIES}
+        ${GPGME_LIBRARIES}
+        OpenSSL::SSL
+        OpenSSL::Crypto
         pthread
 )
 
 # Compile options
-target_compile_options(${PROJECT_NAME} 
+target_compile_options(${PROJECT_NAME}
     PRIVATE
         ${HIREDIS_CFLAGS_OTHER}
         ${REDIS_PLUS_PLUS_CFLAGS_OTHER}
+        ${GPGME_CFLAGS_OTHER}
         -Wall
         -Wextra
         -Wpedantic
diff --git a/backend/Dockerfile b/backend/Dockerfile
index 83bc201..20a9c02 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -2,7 +2,7 @@ FROM drogonframework/drogon:latest
 
 WORKDIR /app
 
-# Install additional dependencies including GPG for PGP verification
+# Install additional dependencies including GPGME for PGP verification, FFmpeg for thumbnails, and libzip for EPUB
 RUN apt-get update && apt-get install -y \
     libpq-dev \
     postgresql-client \
@@ -14,6 +14,9 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     gnupg \
     gnupg2 \
+    libgpgme-dev \
+    ffmpeg \
+    libzip-dev \
     && rm -rf /var/lib/apt/lists/*
 
 # Try to install redis-plus-plus from package manager first
@@ -85,7 +88,7 @@ COPY config.json .
 
 # Create uploads directory with proper permissions
 # Using nobody user's UID/GID (65534) for consistency with nginx
-RUN mkdir -p /app/uploads/avatars && \
+RUN mkdir -p /app/uploads/avatars /app/uploads/stickers /app/uploads/sticker-submissions /app/uploads/videos /app/uploads/logo /app/uploads/ebooks /app/uploads/ebooks/covers /app/uploads/forums && \
     chown -R 65534:65534 /app/uploads && \
     chmod -R 755 /app/uploads
 
@@ -102,8 +105,10 @@ echo "Checking library dependencies..."\n\
 ldd ./build/streaming-backend\n\
 echo "Checking GPG installation..."\n\
 gpg --version\n\
+echo "Checking FFmpeg installation..."\n\
+ffmpeg -version | head -1\n\
 echo "Ensuring upload directories exist with proper permissions..."\n\
-mkdir -p /app/uploads/avatars\n\
+mkdir -p /app/uploads/avatars /app/uploads/stickers /app/uploads/sticker-submissions /app/uploads/videos /app/uploads/logo /app/uploads/ebooks /app/uploads/ebooks/covers /app/uploads/forums\n\
 chown -R 65534:65534 /app/uploads\n\
 chmod -R 755 /app/uploads\n\
 echo "Starting application..."\n\
diff --git a/backend/config.json b/backend/config.json.example
similarity index 62%
rename from backend/config.json
rename to backend/config.json.example
index 3c188ea..145dace 100644
--- a/backend/config.json
+++ b/backend/config.json.example
@@ -14,7 +14,7 @@
             "port": 5432,
             "dbname": "streaming",
             "user": "streamuser",
-            "passwd": "streampass",
+            "passwd": "CHANGE_ME_database_password",
             "is_fast": false,
             "connection_number": 10
         }
@@ -28,16 +28,27 @@
         "client_max_body_size": "100M",
         "enable_brotli": true,
         "enable_gzip": true,
-        "log_level": "DEBUG"
+        "log_level": "INFO"
     },
     "redis": {
         "host": "redis",
-        "port": 6379
+        "port": 6379,
+        "db": 1,
+        "timeout": 5
     },
     "ome": {
         "api_url": "http://ovenmediaengine:8081",
-        "api_token": "your-api-token"
+        "api_token": "CHANGE_ME_ome_api_token"
     },
     "plugins": [],
-    "custom_config": {}
-}
\ No newline at end of file
+    "custom_config": {
+        "chat": {
+            "default_retention_hours": 24,
+            "max_message_length": 500,
+            "max_messages_per_realm": 1000,
+            "guest_prefix": "guest",
+            "guest_id_pattern": "{prefix}{number}",
+            "cleanup_interval_seconds": 300
+        }
+    }
+}
diff --git a/backend/src/admin_tool.cpp b/backend/src/admin_tool.cpp
index 5babfdf..e1d709d 100644
--- a/backend/src/admin_tool.cpp
+++ b/backend/src/admin_tool.cpp
@@ -1,11 +1,54 @@
 #include <drogon/drogon.h>
 #include <drogon/orm/DbClient.h>
 #include <iostream>
+#include <fstream>
 #include <cstdlib>
+#include <ctime>
+#include <iomanip>
+#include <sstream>
 
 using namespace drogon;
 using namespace drogon::orm;
 
+// SECURITY FIX #32: Add audit logging for admin CLI operations
+namespace {
+    void writeAuditLog(const std::string& action, const std::string& target,
+                       const std::string& status, const std::string& details = "") {
+        // Get current timestamp
+        auto now = std::time(nullptr);
+        auto tm = *std::localtime(&now);
+        std::ostringstream timestamp;
+        timestamp << std::put_time(&tm, "%Y-%m-%d %H:%M:%S");
+
+        // Get hostname for audit trail
+        char hostname[256] = "unknown";
+        gethostname(hostname, sizeof(hostname));
+
+        // Build log entry
+        std::ostringstream logEntry;
+        logEntry << "[" << timestamp.str() << "] "
+                 << "HOST=" << hostname << " "
+                 << "ACTION=" << action << " "
+                 << "TARGET=" << target << " "
+                 << "STATUS=" << status;
+        if (!details.empty()) {
+            logEntry << " DETAILS=" << details;
+        }
+        logEntry << std::endl;
+
+        // Write to audit log file
+        std::string logPath = "/var/log/admin_tool_audit.log";
+        std::ofstream logFile(logPath, std::ios::app);
+        if (logFile.is_open()) {
+            logFile << logEntry.str();
+            logFile.close();
+        }
+
+        // Also output to stderr for immediate visibility
+        std::cerr << "[AUDIT] " << logEntry.str();
+    }
+}
+
 int main(int argc, char* argv[]) {
     if (argc < 2) {
         std::cerr << "Usage: " << argv[0] << " -promote-admin <username>" << std::endl;
@@ -34,37 +77,44 @@ int main(int argc, char* argv[]) {
         1  // connection number
     );
     
+    writeAuditLog("PROMOTE_ADMIN_ATTEMPT", username, "STARTED");
+
     try {
         // Check if user exists
         auto result = dbClient->execSqlSync(
             "SELECT id, username, is_admin FROM users WHERE username = $1",
             username
         );
-        
+
         if (result.empty()) {
+            writeAuditLog("PROMOTE_ADMIN", username, "FAILED", "user_not_found");
             std::cerr << "Error: User '" << username << "' not found." << std::endl;
             return 1;
         }
-        
+
         bool isAdmin = result[0]["is_admin"].as<bool>();
         if (isAdmin) {
+            writeAuditLog("PROMOTE_ADMIN", username, "SKIPPED", "already_admin");
             std::cout << "User '" << username << "' is already an admin." << std::endl;
             return 0;
         }
-        
+
         // Promote to admin
         dbClient->execSqlSync(
             "UPDATE users SET is_admin = true WHERE username = $1",
             username
         );
-        
+
+        writeAuditLog("PROMOTE_ADMIN", username, "SUCCESS");
         std::cout << "Successfully promoted '" << username << "' to admin." << std::endl;
         return 0;
-        
+
     } catch (const DrogonDbException& e) {
+        writeAuditLog("PROMOTE_ADMIN", username, "ERROR", e.base().what());
         std::cerr << "Database error: " << e.base().what() << std::endl;
         return 1;
     } catch (const std::exception& e) {
+        writeAuditLog("PROMOTE_ADMIN", username, "ERROR", e.what());
         std::cerr << "Error: " << e.what() << std::endl;
         return 1;
     }
diff --git a/backend/src/common/AuthHelpers.h b/backend/src/common/AuthHelpers.h
new file mode 100644
index 0000000..a9f3e96
--- /dev/null
+++ b/backend/src/common/AuthHelpers.h
@@ -0,0 +1,82 @@
+#pragma once
+#include <drogon/HttpRequest.h>
+#include "../services/AuthService.h"
+#include "HttpHelpers.h"
+#include <optional>
+
+using namespace drogon;
+
+// Extract user from request (cookie or Bearer token)
+inline UserInfo getUserFromRequest(const HttpRequestPtr& req) {
+    UserInfo user;
+    std::string token = req->getCookie("auth_token");
+
+    if (token.empty()) {
+        std::string auth = req->getHeader("Authorization");
+        if (!auth.empty() && auth.substr(0, 7) == "Bearer ") {
+            token = auth.substr(7);
+        }
+    }
+
+    if (!token.empty()) {
+        AuthService::getInstance().validateToken(token, user);
+    }
+    return user;
+}
+
+// Authorization check macro - returns 401 if not authenticated
+// SECURITY FIX #26: Also checks if account is disabled
+#define CHECK_AUTH(user, callback) \
+    if (user.id == 0 || user.isDisabled) { \
+        callback(jsonError("Unauthorized", k401Unauthorized)); \
+        return; \
+    }
+
+// Admin check macro - returns 403 if not admin
+// SECURITY FIX #26: Also checks if account is disabled
+#define CHECK_ADMIN(user, callback) \
+    if (user.id == 0 || !user.isAdmin || user.isDisabled) { \
+        callback(jsonError("Admin access required", k403Forbidden)); \
+        return; \
+    }
+
+// Parse ID from string with error handling
+template<typename T = int64_t>
+std::optional<T> parseId(const std::string& idStr) {
+    try {
+        return static_cast<T>(std::stoll(idStr));
+    } catch (...) {
+        return std::nullopt;
+    }
+}
+
+// ID parsing macro - returns 400 if invalid
+#define PARSE_ID(varName, idStr, callback) \
+    auto varName##_opt = parseId(idStr); \
+    if (!varName##_opt) { \
+        callback(jsonError("Invalid ID")); \
+        return; \
+    } \
+    auto varName = *varName##_opt;
+
+#define PARSE_ID_MSG(varName, idStr, callback, errorMsg) \
+    auto varName##_opt = parseId(idStr); \
+    if (!varName##_opt) { \
+        callback(jsonError(errorMsg)); \
+        return; \
+    } \
+    auto varName = *varName##_opt;
+
+// Database error handler macro
+#define DB_ERROR(callback, operation) \
+    [callback](const DrogonDbException& e) { \
+        LOG_ERROR << "Failed to " operation ": " << e.base().what(); \
+        callback(jsonError("Database error")); \
+    }
+
+// Database error handler with custom error message
+#define DB_ERROR_MSG(callback, operation, errorMsg) \
+    [callback](const DrogonDbException& e) { \
+        LOG_ERROR << "Failed to " operation ": " << e.base().what(); \
+        callback(jsonError(errorMsg)); \
+    }
diff --git a/backend/src/common/FileUtils.h b/backend/src/common/FileUtils.h
new file mode 100644
index 0000000..80c0a1f
--- /dev/null
+++ b/backend/src/common/FileUtils.h
@@ -0,0 +1,253 @@
+#pragma once
+#include <string>
+#include <vector>
+#include <random>
+#include <sstream>
+#include <iomanip>
+#include <filesystem>
+#include <array>
+#include <unistd.h>
+#include <sys/wait.h>
+#include <fcntl.h>
+#include <trantor/utils/Logger.h>
+
+// Generate cryptographically secure random hex filename with extension
+// Uses /dev/urandom for secure randomness instead of std::mt19937
+inline std::string generateRandomFilename(const std::string& ext) {
+    std::array<unsigned char, 16> bytes;
+
+    // Read from /dev/urandom for cryptographically secure randomness
+    int fd = open("/dev/urandom", O_RDONLY);
+    if (fd >= 0) {
+        ssize_t bytesRead = read(fd, bytes.data(), bytes.size());
+        close(fd);
+        if (bytesRead == static_cast<ssize_t>(bytes.size())) {
+            std::stringstream ss;
+            for (unsigned char b : bytes) {
+                ss << std::hex << std::setw(2) << std::setfill('0') << static_cast<int>(b);
+            }
+            return ss.str() + "." + ext;
+        }
+    }
+
+    // Fallback to std::random_device if /dev/urandom fails
+    // (shouldn't happen on Linux, but provides resilience)
+    std::random_device rd;
+    std::stringstream ss;
+    for (int i = 0; i < 16; ++i) {
+        ss << std::hex << std::setw(2) << std::setfill('0') << (rd() & 0xFF);
+    }
+    return ss.str() + "." + ext;
+}
+
+// Atomically create a file with exclusive access (O_CREAT | O_EXCL)
+// Returns the file descriptor on success, or -1 on failure
+// This prevents TOCTOU race conditions
+inline int createFileExclusive(const std::string& path) {
+    return open(path.c_str(), O_WRONLY | O_CREAT | O_EXCL, 0644);
+}
+
+// Write data to file atomically with exclusive creation
+// Returns true on success, false on failure
+inline bool writeFileExclusive(const std::string& path, const char* data, size_t size) {
+    int fd = createFileExclusive(path);
+    if (fd < 0) {
+        return false;
+    }
+
+    ssize_t written = 0;
+    while (written < static_cast<ssize_t>(size)) {
+        ssize_t result = write(fd, data + written, size - written);
+        if (result < 0) {
+            close(fd);
+            unlink(path.c_str());  // Clean up on error
+            return false;
+        }
+        written += result;
+    }
+
+    close(fd);
+    return true;
+}
+
+// ============== INPUT SANITIZATION ==============
+
+// Check if a string is valid UTF-8
+inline bool isValidUtf8(const std::string& str) {
+    const unsigned char* bytes = reinterpret_cast<const unsigned char*>(str.data());
+    size_t len = str.length();
+    size_t i = 0;
+
+    while (i < len) {
+        if (bytes[i] <= 0x7F) {
+            // ASCII
+            i++;
+        } else if ((bytes[i] & 0xE0) == 0xC0) {
+            // 2-byte sequence
+            if (i + 1 >= len || (bytes[i + 1] & 0xC0) != 0x80) return false;
+            i += 2;
+        } else if ((bytes[i] & 0xF0) == 0xE0) {
+            // 3-byte sequence
+            if (i + 2 >= len || (bytes[i + 1] & 0xC0) != 0x80 || (bytes[i + 2] & 0xC0) != 0x80) return false;
+            i += 3;
+        } else if ((bytes[i] & 0xF8) == 0xF0) {
+            // 4-byte sequence
+            if (i + 3 >= len || (bytes[i + 1] & 0xC0) != 0x80 || (bytes[i + 2] & 0xC0) != 0x80 || (bytes[i + 3] & 0xC0) != 0x80) return false;
+            i += 4;
+        } else {
+            return false;
+        }
+    }
+    return true;
+}
+
+// Remove control characters (C0 and C1 control codes) from a string
+// Keeps printable characters, newlines, and tabs
+inline std::string sanitizeText(const std::string& input) {
+    std::string result;
+    result.reserve(input.size());
+
+    for (unsigned char c : input) {
+        // Allow printable ASCII (0x20-0x7E), tab (0x09), newline (0x0A), carriage return (0x0D)
+        // Also allow UTF-8 continuation bytes (0x80-0xFF) which are handled by isValidUtf8
+        if ((c >= 0x20 && c <= 0x7E) || c == 0x09 || c == 0x0A || c == 0x0D || c >= 0x80) {
+            result += c;
+        }
+        // Skip C0 control characters (0x00-0x1F except tab/newline/CR)
+        // Skip DEL (0x7F)
+    }
+
+    return result;
+}
+
+// Sanitize user input text: validate UTF-8 and remove control characters
+inline std::string sanitizeUserInput(const std::string& input, size_t maxLength = 0) {
+    // First validate UTF-8
+    if (!isValidUtf8(input)) {
+        // If not valid UTF-8, try to salvage by keeping only ASCII
+        std::string ascii;
+        for (char c : input) {
+            if (c >= 0x20 && c <= 0x7E) {
+                ascii += c;
+            }
+        }
+        if (maxLength > 0 && ascii.length() > maxLength) {
+            ascii = ascii.substr(0, maxLength);
+        }
+        return ascii;
+    }
+
+    // Remove control characters
+    std::string sanitized = sanitizeText(input);
+
+    // Truncate if needed
+    if (maxLength > 0 && sanitized.length() > maxLength) {
+        // Try to truncate at UTF-8 character boundary
+        size_t truncateAt = maxLength;
+        while (truncateAt > 0 && (sanitized[truncateAt] & 0xC0) == 0x80) {
+            truncateAt--;
+        }
+        sanitized = sanitized.substr(0, truncateAt);
+    }
+
+    return sanitized;
+}
+
+// Ensure directory exists, optionally with permissions
+inline bool ensureDirectoryExists(const std::string& path, bool setPermissions = false) {
+    try {
+        if (!std::filesystem::exists(path)) {
+            std::filesystem::create_directories(path);
+        }
+        if (setPermissions) {
+            std::filesystem::permissions(path,
+                std::filesystem::perms::owner_all |
+                std::filesystem::perms::group_read | std::filesystem::perms::group_exec |
+                std::filesystem::perms::others_read | std::filesystem::perms::others_exec
+            );
+        }
+        return true;
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Failed to create directory " << path << ": " << e.what();
+        return false;
+    }
+}
+
+// Validate path is safe (no shell metacharacters, within allowed directory)
+inline bool isPathSafe(const std::string& path, const std::string& allowedDir) {
+    const std::string dangerous = ";|&$`\\\"'<>(){}[]!#*?~";
+    for (char c : path) {
+        if (dangerous.find(c) != std::string::npos) {
+            LOG_WARN << "Rejected path with dangerous character: " << c;
+            return false;
+        }
+    }
+
+    try {
+        auto canonical = std::filesystem::canonical(path);
+        auto allowedCanonical = std::filesystem::canonical(allowedDir);
+        if (canonical.string().find(allowedCanonical.string()) != 0) {
+            LOG_WARN << "Path traversal attempt: " << path;
+            return false;
+        }
+    } catch (...) {
+        auto parent = std::filesystem::path(path).parent_path();
+        if (!std::filesystem::exists(parent)) return false;
+        try {
+            auto parentCanonical = std::filesystem::canonical(parent);
+            auto allowedCanonical = std::filesystem::canonical(allowedDir);
+            if (parentCanonical.string().find(allowedCanonical.string()) != 0) {
+                LOG_WARN << "Path traversal attempt in parent: " << path;
+                return false;
+            }
+        } catch (...) {
+            return false;
+        }
+    }
+    return true;
+}
+
+// Execute command safely using execv (no shell interpretation)
+inline std::string execCommandSafe(const std::vector<std::string>& args) {
+    if (args.empty()) return "";
+
+    int pipefd[2];
+    if (pipe(pipefd) == -1) return "";
+
+    pid_t pid = fork();
+    if (pid == -1) {
+        close(pipefd[0]);
+        close(pipefd[1]);
+        return "";
+    }
+
+    if (pid == 0) {
+        close(pipefd[0]);
+        dup2(pipefd[1], STDOUT_FILENO);
+        dup2(open("/dev/null", O_WRONLY), STDERR_FILENO);
+        close(pipefd[1]);
+
+        std::vector<char*> argv;
+        for (const auto& arg : args) {
+            argv.push_back(const_cast<char*>(arg.c_str()));
+        }
+        argv.push_back(nullptr);
+
+        execv(args[0].c_str(), argv.data());
+        _exit(1);
+    }
+
+    close(pipefd[1]);
+
+    std::string result;
+    std::array<char, 128> buffer;
+    ssize_t n;
+    while ((n = read(pipefd[0], buffer.data(), buffer.size())) > 0) {
+        result.append(buffer.data(), n);
+    }
+    close(pipefd[0]);
+
+    int status;
+    waitpid(pid, &status, 0);
+    return result;
+}
diff --git a/backend/src/common/FileValidation.h b/backend/src/common/FileValidation.h
new file mode 100644
index 0000000..79d93a7
--- /dev/null
+++ b/backend/src/common/FileValidation.h
@@ -0,0 +1,218 @@
+#pragma once
+#include <string>
+#include <cstddef>
+
+// ============== IMAGE VALIDATION ==============
+
+struct ImageValidation {
+    bool valid;
+    std::string detectedType;  // "jpeg", "png", "gif", "webp", "svg"
+    std::string extension;     // ".jpg", ".png", ".gif", ".webp", ".svg"
+};
+
+inline ImageValidation validateImageMagicBytes(const char* data, size_t size, bool allowSvg = false) {
+    ImageValidation result{false, "", ""};
+    if (!data || size < 3) return result;
+
+    const unsigned char* bytes = reinterpret_cast<const unsigned char*>(data);
+
+    // JPEG: FF D8 FF
+    if (size >= 3 && bytes[0] == 0xFF && bytes[1] == 0xD8 && bytes[2] == 0xFF) {
+        return {true, "jpeg", ".jpg"};
+    }
+
+    // PNG: 89 50 4E 47 0D 0A 1A 0A
+    if (size >= 8 && bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47 &&
+        bytes[4] == 0x0D && bytes[5] == 0x0A && bytes[6] == 0x1A && bytes[7] == 0x0A) {
+        return {true, "png", ".png"};
+    }
+
+    // GIF: 47 49 46 38 (GIF87a or GIF89a)
+    if (size >= 6 && bytes[0] == 0x47 && bytes[1] == 0x49 && bytes[2] == 0x46 && bytes[3] == 0x38 &&
+        (bytes[4] == 0x37 || bytes[4] == 0x39) && bytes[5] == 0x61) {
+        return {true, "gif", ".gif"};
+    }
+
+    // WebP: RIFF....WEBP
+    if (size >= 12 && bytes[0] == 0x52 && bytes[1] == 0x49 && bytes[2] == 0x46 && bytes[3] == 0x46 &&
+        bytes[8] == 0x57 && bytes[9] == 0x45 && bytes[10] == 0x42 && bytes[11] == 0x50) {
+        return {true, "webp", ".webp"};
+    }
+
+    // SVG: Check for <?xml or <svg (with optional BOM/whitespace)
+    if (allowSvg && size >= 4) {
+        std::string content(data, std::min(size, (size_t)256));
+        size_t start = 0;
+        // Skip BOM if present
+        if (size >= 3 && bytes[0] == 0xEF && bytes[1] == 0xBB && bytes[2] == 0xBF) {
+            start = 3;
+        }
+        // Skip whitespace
+        while (start < content.size() && std::isspace(static_cast<unsigned char>(content[start]))) {
+            start++;
+        }
+        std::string trimmed = content.substr(start);
+        if (trimmed.rfind("<?xml", 0) == 0 || trimmed.rfind("<svg", 0) == 0) {
+            return {true, "svg", ".svg"};
+        }
+    }
+
+    return result;
+}
+
+// ============== VIDEO VALIDATION ==============
+
+struct VideoValidation {
+    bool valid;
+    std::string detectedType;  // "mp4", "webm", "mov"
+    std::string extension;     // ".mp4", ".webm", ".mov"
+};
+
+inline VideoValidation validateVideoMagicBytes(const char* data, size_t size) {
+    VideoValidation result{false, "", ""};
+    if (!data || size < 12) return result;
+
+    const unsigned char* bytes = reinterpret_cast<const unsigned char*>(data);
+
+    // MP4/M4V/MOV: Check for ftyp atom
+    if (size >= 12 && bytes[4] == 0x66 && bytes[5] == 0x74 && bytes[6] == 0x79 && bytes[7] == 0x70) {
+        char brand[5] = {(char)bytes[8], (char)bytes[9], (char)bytes[10], (char)bytes[11], 0};
+        std::string brandStr(brand);
+
+        if (brandStr == "qt  " || brandStr.substr(0, 2) == "qt") {
+            return {true, "mov", ".mov"};
+        }
+        return {true, "mp4", ".mp4"};
+    }
+
+    // WebM/MKV: EBML header
+    if (size >= 4 && bytes[0] == 0x1A && bytes[1] == 0x45 && bytes[2] == 0xDF && bytes[3] == 0xA3) {
+        return {true, "webm", ".webm"};
+    }
+
+    return result;
+}
+
+// ============== AUDIO VALIDATION ==============
+
+struct AudioValidation {
+    bool valid;
+    std::string detectedType;  // "mp3", "wav", "flac", "ogg", "aac", "m4a"
+    std::string extension;
+};
+
+inline AudioValidation validateAudioMagicBytes(const char* data, size_t size) {
+    AudioValidation result{false, "", ""};
+    if (!data || size < 4) return result;
+
+    const unsigned char* bytes = reinterpret_cast<const unsigned char*>(data);
+
+    // MP3: ID3 tag or frame sync
+    if (size >= 3 && bytes[0] == 0x49 && bytes[1] == 0x44 && bytes[2] == 0x33) {
+        return {true, "mp3", ".mp3"};
+    }
+    if (size >= 2 && bytes[0] == 0xFF &&
+        (bytes[1] == 0xFB || bytes[1] == 0xFA || bytes[1] == 0xF3 || bytes[1] == 0xF2)) {
+        return {true, "mp3", ".mp3"};
+    }
+
+    // WAV: RIFF....WAVE
+    if (size >= 12 && bytes[0] == 0x52 && bytes[1] == 0x49 && bytes[2] == 0x46 && bytes[3] == 0x46 &&
+        bytes[8] == 0x57 && bytes[9] == 0x41 && bytes[10] == 0x56 && bytes[11] == 0x45) {
+        return {true, "wav", ".wav"};
+    }
+
+    // FLAC: fLaC
+    if (size >= 4 && bytes[0] == 0x66 && bytes[1] == 0x4C && bytes[2] == 0x61 && bytes[3] == 0x43) {
+        return {true, "flac", ".flac"};
+    }
+
+    // OGG: OggS
+    if (size >= 4 && bytes[0] == 0x4F && bytes[1] == 0x67 && bytes[2] == 0x67 && bytes[3] == 0x53) {
+        return {true, "ogg", ".ogg"};
+    }
+
+    // AAC: ADTS frame sync
+    if (size >= 2 && bytes[0] == 0xFF && (bytes[1] == 0xF1 || bytes[1] == 0xF9)) {
+        return {true, "aac", ".aac"};
+    }
+
+    // M4A/AAC in MP4 container
+    if (size >= 12 && bytes[4] == 0x66 && bytes[5] == 0x74 && bytes[6] == 0x79 && bytes[7] == 0x70) {
+        char brand[5] = {(char)bytes[8], (char)bytes[9], (char)bytes[10], (char)bytes[11], 0};
+        std::string brandStr(brand);
+        if (brandStr == "M4A " || brandStr == "mp42" || brandStr == "isom" || brandStr == "M4B ") {
+            return {true, "m4a", ".m4a"};
+        }
+    }
+
+    return result;
+}
+
+// ============== EPUB VALIDATION ==============
+
+// Properly validates EPUB format according to spec:
+// - Must be a valid ZIP file
+// - First entry must be named "mimetype" (uncompressed)
+// - Content must be exactly "application/epub+zip"
+inline bool isValidEpub(const char* data, size_t size) {
+    if (!data || size < 58) return false;
+
+    const unsigned char* bytes = reinterpret_cast<const unsigned char*>(data);
+
+    // Must be ZIP: PK\x03\x04 local file header signature
+    if (bytes[0] != 0x50 || bytes[1] != 0x4B || bytes[2] != 0x03 || bytes[3] != 0x04) {
+        return false;
+    }
+
+    // Parse ZIP local file header
+    // Offset 8: compression method (2 bytes, little-endian)
+    // For EPUB, mimetype must be uncompressed (method 0)
+    uint16_t compressionMethod = bytes[8] | (bytes[9] << 8);
+    if (compressionMethod != 0) {
+        return false;  // mimetype must be stored uncompressed
+    }
+
+    // Offset 18: compressed size (4 bytes, little-endian)
+    uint32_t compressedSize = bytes[18] | (bytes[19] << 8) | (bytes[20] << 16) | (bytes[21] << 24);
+
+    // Offset 22: uncompressed size (4 bytes, little-endian)
+    uint32_t uncompressedSize = bytes[22] | (bytes[23] << 8) | (bytes[24] << 16) | (bytes[25] << 24);
+
+    // For uncompressed files, these should be equal
+    if (compressedSize != uncompressedSize) {
+        return false;
+    }
+
+    // Offset 26: file name length (2 bytes, little-endian)
+    uint16_t fileNameLen = bytes[26] | (bytes[27] << 8);
+
+    // Offset 28: extra field length (2 bytes, little-endian)
+    uint16_t extraFieldLen = bytes[28] | (bytes[29] << 8);
+
+    // File name starts at offset 30
+    if (size < 30 + fileNameLen + extraFieldLen + compressedSize) {
+        return false;  // File too small
+    }
+
+    // Check that first entry is named "mimetype"
+    if (fileNameLen != 8) {
+        return false;
+    }
+    std::string fileName(data + 30, 8);
+    if (fileName != "mimetype") {
+        return false;
+    }
+
+    // Content starts after header + filename + extra field
+    size_t contentOffset = 30 + fileNameLen + extraFieldLen;
+
+    // Check content is exactly "application/epub+zip"
+    const std::string expectedMimetype = "application/epub+zip";
+    if (compressedSize != expectedMimetype.size()) {
+        return false;
+    }
+
+    std::string actualMimetype(data + contentOffset, compressedSize);
+    return actualMimetype == expectedMimetype;
+}
diff --git a/backend/src/common/HttpHelpers.h b/backend/src/common/HttpHelpers.h
new file mode 100644
index 0000000..921e9e7
--- /dev/null
+++ b/backend/src/common/HttpHelpers.h
@@ -0,0 +1,29 @@
+#pragma once
+#include <drogon/HttpResponse.h>
+#include <json/json.h>
+
+using namespace drogon;
+
+inline HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
+    auto r = HttpResponse::newHttpJsonResponse(j);
+    r->setStatusCode(c);
+    return r;
+}
+
+inline HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
+    Json::Value j;
+    j["success"] = false;
+    j["error"] = error;
+    return jsonResp(j, code);
+}
+
+inline HttpResponsePtr jsonSuccess(const Json::Value& data = Json::Value()) {
+    Json::Value j;
+    j["success"] = true;
+    if (!data.isNull()) {
+        for (const auto& key : data.getMemberNames()) {
+            j[key] = data[key];
+        }
+    }
+    return jsonResp(j);
+}
diff --git a/backend/src/common/utils.h b/backend/src/common/utils.h
deleted file mode 100644
index cabfa44..0000000
--- a/backend/src/common/utils.h
+++ /dev/null
@@ -1,243 +0,0 @@
-#pragma once
-
-#include <drogon/drogon.h>
-#include <drogon/orm/DbClient.h>
-#include <variant>
-#include <optional>
-#include <concepts>
-
-namespace utils {
-
-using namespace drogon;
-
-// Result type for better error handling
-template<typename T>
-using Result = std::variant<T, std::string>;
-
-template<typename T>
-inline bool isOk(const Result<T>& r) { return std::holds_alternative<T>(r); }
-
-template<typename T>
-inline T& getValue(Result<T>& r) { return std::get<T>(r); }
-
-template<typename T>
-inline const std::string& getError(const Result<T>& r) { return std::get<std::string>(r); }
-
-// JSON Response helpers
-inline HttpResponsePtr jsonOk(const Json::Value& data) {
-    return HttpResponse::newHttpJsonResponse(data);
-}
-
-inline HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-    Json::Value json;
-    json["error"] = error;
-    json["success"] = false;
-    auto resp = HttpResponse::newHttpJsonResponse(json);
-    resp->setStatusCode(code);
-    return resp;
-}
-
-inline HttpResponsePtr jsonResp(const Json::Value& data, HttpStatusCode code = k200OK) {
-    auto resp = HttpResponse::newHttpJsonResponse(data);
-    resp->setStatusCode(code);
-    return resp;
-}
-
-// Database helper with automatic error handling
-template<typename... Args>
-inline void dbQuery(const std::string& query, 
-                   std::function<void(const drogon::orm::Result&)> onSuccess,
-                   std::function<void(const std::string&)> onError,
-                   Args&&... args) {
-    auto db = app().getDbClient();
-    (*db << query << std::forward<Args>(args)...)
-        >> [onSuccess](const drogon::orm::Result& r) { onSuccess(r); }
-        >> [onError](const drogon::orm::DrogonDbException& e) { 
-            LOG_ERROR << "DB Error: " << e.base().what();
-            onError(e.base().what());
-        };
-}
-
-// Simplified DB query that returns JSON response
-template<typename... Args>
-inline void dbJsonQuery(const std::string& query,
-                       std::function<Json::Value(const drogon::orm::Result&)> transform,
-                       std::function<void(const HttpResponsePtr&)> callback,
-                       Args&&... args) {
-    dbQuery(query,
-        [transform, callback](const drogon::orm::Result& r) {
-            callback(jsonOk(transform(r)));
-        },
-        [callback](const std::string& error) {
-            callback(jsonError(error, k500InternalServerError));
-        },
-        std::forward<Args>(args)...
-    );
-}
-
-// Thread pool executor with type constraints
-template<typename F>
-requires std::invocable<F>
-inline void runAsync(F&& task) {
-    if (auto loop = app().getLoop()) {
-        loop->queueInLoop([task = std::forward<F>(task)]() {
-            std::thread([task]() {
-                try {
-                    task();
-                } catch (const std::exception& e) {
-                    LOG_ERROR << "Async task error: " << e.what();
-                }
-            }).detach();
-        });
-    } else {
-        // Fallback to sync execution
-        task();
-    }
-}
-
-// Config helper
-template<typename T>
-inline std::optional<T> getConfig(const std::string& path) {
-    try {
-        const auto& config = app().getCustomConfig();
-        std::vector<std::string> parts;
-        std::stringstream ss(path);
-        std::string part;
-        while (std::getline(ss, part, '.')) {
-            parts.push_back(part);
-        }
-        
-        Json::Value current = config;
-        for (const auto& p : parts) {
-            if (!current.isMember(p)) return std::nullopt;
-            current = current[p];
-        }
-        
-        if constexpr (std::is_same_v<T, std::string>) {
-            return current.asString();
-        } else if constexpr (std::is_same_v<T, int>) {
-            return current.asInt();
-        } else if constexpr (std::is_same_v<T, bool>) {
-            return current.asBool();
-        } else if constexpr (std::is_same_v<T, double>) {
-            return current.asDouble();
-        }
-    } catch (...) {
-        return std::nullopt;
-    }
-    return std::nullopt;
-}
-
-// Environment variable helper with fallback
-template<typename T = std::string>
-inline T getEnv(const std::string& key, const T& defaultValue = T{}) {
-    const char* val = std::getenv(key.c_str());
-    if (!val) return defaultValue;
-    
-    if constexpr (std::is_same_v<T, std::string>) {
-        return std::string(val);
-    } else if constexpr (std::is_same_v<T, int>) {
-        try { return std::stoi(val); } catch (...) { return defaultValue; }
-    } else if constexpr (std::is_same_v<T, bool>) {
-        std::string s(val);
-        return s == "true" || s == "1" || s == "yes";
-    }
-    return defaultValue;
-}
-
-// Random string generator
-inline std::string randomString(size_t length = 32) {
-    auto bytes = drogon::utils::genRandomString(length);
-    return drogon::utils::base64Encode(
-        reinterpret_cast<const unsigned char*>(bytes.data()), 
-        bytes.length()
-    );
-}
-
-// Timer helper
-class ScopedTimer {
-    std::string name_;
-    std::chrono::steady_clock::time_point start_;
-public:
-    explicit ScopedTimer(const std::string& name) 
-        : name_(name), start_(std::chrono::steady_clock::now()) {}
-    
-    ~ScopedTimer() {
-        auto duration = std::chrono::steady_clock::now() - start_;
-        auto ms = std::chrono::duration_cast<std::chrono::milliseconds>(duration).count();
-        LOG_DEBUG << name_ << " took " << ms << "ms";
-    }
-};
-
-#define TIMED_SCOPE(name) utils::ScopedTimer _timer(name)
-
-// WebSocket broadcast helper
-template<typename Container>
-inline void wsBroadcast(const Container& connections, const Json::Value& message) {
-    auto msg = Json::FastWriter().write(message);
-    for (const auto& conn : connections) {
-        if (conn->connected()) {
-            conn->send(msg);
-        }
-    }
-}
-
-// Rate limiter
-class RateLimiter {
-    std::unordered_map<std::string, std::deque<std::chrono::steady_clock::time_point>> requests_;
-    std::mutex mutex_;
-    size_t maxRequests_;
-    std::chrono::seconds window_;
-    
-public:
-    RateLimiter(size_t maxRequests = 10, std::chrono::seconds window = std::chrono::seconds(60))
-        : maxRequests_(maxRequests), window_(window) {}
-    
-    bool allow(const std::string& key) {
-        std::lock_guard<std::mutex> lock(mutex_);
-        auto now = std::chrono::steady_clock::now();
-        auto& timestamps = requests_[key];
-        
-        // Remove old timestamps
-        while (!timestamps.empty() && now - timestamps.front() > window_) {
-            timestamps.pop_front();
-        }
-        
-        if (timestamps.size() >= maxRequests_) {
-            return false;
-        }
-        
-        timestamps.push_back(now);
-        return true;
-    }
-};
-
-// Global rate limiter instance
-inline RateLimiter& rateLimiter() {
-    static RateLimiter limiter;
-    return limiter;
-}
-
-// Validation helpers
-inline bool isValidStreamKey(const std::string& key) {
-    return key.length() == 32 && 
-           std::all_of(key.begin(), key.end(), [](char c) {
-               return std::isxdigit(c);
-           });
-}
-
-// JSON conversion helper
-template<typename T>
-inline Json::Value toJson(const T& obj);
-
-// Specializations for common types
-template<>
-inline Json::Value toJson(const std::map<std::string, std::string>& m) {
-    Json::Value json;
-    for (const auto& [k, v] : m) {
-        json[k] = v;
-    }
-    return json;
-}
-
-} // namespace utils
\ No newline at end of file
diff --git a/backend/src/controllers/AdminController.cpp b/backend/src/controllers/AdminController.cpp
index 6388e9a..e832463 100644
--- a/backend/src/controllers/AdminController.cpp
+++ b/backend/src/controllers/AdminController.cpp
@@ -1,74 +1,188 @@
 #include "AdminController.h"
 #include "../services/OmeClient.h"
 #include "../services/RedisHelper.h"
+#include "../services/CensorService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include "../common/FileValidation.h"
+#include <filesystem>
+#include <algorithm>
+#include <fstream>
+#include <ctime>
+#include <chrono>
+#include <unordered_map>
+#include <unordered_set>
+#include <mutex>
+#include <random>
+#include <zip.h>
 
 using namespace drogon::orm;
 
 namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-}
+    // Notify chat-service to refresh its sticker cache
+    void notifyChatServiceStickerUpdate() {
+        auto client = HttpClient::newHttpClient("http://chat-service:8081");
+        auto req = HttpRequest::newHttpRequest();
+        req->setMethod(Post);
+        req->setPath("/api/chat/admin/stickers/refresh");
 
-UserInfo AdminController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    std::string auth = req->getHeader("Authorization");
-    
-    if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-        return user;
+        client->sendRequest(req, [](ReqResult result, const HttpResponsePtr& resp) {
+            if (result != ReqResult::Ok) {
+                LOG_WARN << "Failed to notify chat-service of sticker update: " << (int)result;
+            } else {
+                LOG_INFO << "Chat-service sticker cache refresh triggered";
+            }
+        });
+    }
+
+    // Notify chat-service to refresh its censored words cache
+    void notifyChatServiceCensoredWordsUpdate() {
+        auto client = HttpClient::newHttpClient("http://chat-service:8081");
+        auto req = HttpRequest::newHttpRequest();
+        req->setMethod(Post);
+        req->setPath("/api/chat/admin/censored-words/refresh");
+
+        client->sendRequest(req, [](ReqResult result, const HttpResponsePtr& resp) {
+            if (result != ReqResult::Ok) {
+                LOG_WARN << "Failed to notify chat-service of censored words update: " << (int)result;
+            } else {
+                LOG_INFO << "Chat-service censored words cache refresh triggered";
+            }
+        });
+    }
+
+    // Rate limiter for censored words updates (10 per minute per admin)
+    struct CensoredWordsRateLimiter {
+        std::mutex mutex;
+        std::unordered_map<int, std::vector<std::chrono::steady_clock::time_point>> requestTimes;
+        static constexpr int MAX_REQUESTS = 10;
+        static constexpr int WINDOW_SECONDS = 60;
+
+        bool isAllowed(int userId) {
+            std::lock_guard<std::mutex> lock(mutex);
+            auto now = std::chrono::steady_clock::now();
+            auto cutoff = now - std::chrono::seconds(WINDOW_SECONDS);
+
+            auto& times = requestTimes[userId];
+            // Remove old entries
+            times.erase(
+                std::remove_if(times.begin(), times.end(),
+                    [cutoff](const auto& t) { return t < cutoff; }),
+                times.end()
+            );
+
+            if (times.size() >= MAX_REQUESTS) {
+                return false;
+            }
+
+            times.push_back(now);
+            return true;
+        }
+    };
+
+    CensoredWordsRateLimiter censoredWordsRateLimiter;
+
+    // SECURITY FIX #26: Rate limiter for admin role operations (30 per minute per admin)
+    struct AdminRoleRateLimiter {
+        std::mutex mutex;
+        std::unordered_map<int, std::vector<std::chrono::steady_clock::time_point>> requestTimes;
+        static constexpr int MAX_REQUESTS = 30;
+        static constexpr int WINDOW_SECONDS = 60;
+
+        bool isAllowed(int userId) {
+            std::lock_guard<std::mutex> lock(mutex);
+            auto now = std::chrono::steady_clock::now();
+            auto cutoff = now - std::chrono::seconds(WINDOW_SECONDS);
+
+            auto& times = requestTimes[userId];
+            // Remove old entries
+            times.erase(
+                std::remove_if(times.begin(), times.end(),
+                    [cutoff](const auto& t) { return t < cutoff; }),
+                times.end()
+            );
+
+            if (times.size() >= MAX_REQUESTS) {
+                return false;
+            }
+
+            times.push_back(now);
+            return true;
+        }
+    };
+
+    AdminRoleRateLimiter adminRoleRateLimiter;
+
+    // SECURITY FIX #27: HTML entity escaping to prevent XSS in site title
+    std::string htmlEscape(const std::string& input) {
+        std::string output;
+        output.reserve(input.size() * 1.1); // Reserve a bit more space for entities
+        for (char c : input) {
+            switch (c) {
+                case '&':  output += "&amp;";  break;
+                case '<':  output += "&lt;";   break;
+                case '>':  output += "&gt;";   break;
+                case '"':  output += "&quot;"; break;
+                case '\'': output += "&#39;";  break;
+                default:   output += c;        break;
+            }
+        }
+        return output;
     }
-    
-    std::string token = auth.substr(7);
-    AuthService::getInstance().validateToken(token, user);
-    return user;
 }
 
 // Update getUsers in AdminController.cpp:
 void AdminController::getUsers(const HttpRequestPtr &req,
                               std::function<void(const HttpResponsePtr &)> &&callback) {
     UserInfo user = getUserFromRequest(req);
+    LOG_DEBUG << "[getUsers] Auth check - user.id: " << user.id << ", isAdmin: " << user.isAdmin;
+
     if (user.id == 0 || !user.isAdmin) {
+        LOG_WARN << "[getUsers] Unauthorized access attempt";
         callback(jsonError("Unauthorized", k403Forbidden));
         return;
     }
-    
+
+    LOG_DEBUG << "[getUsers] Executing database query for users...";
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT u.id, u.username, u.is_admin, u.is_streamer, u.created_at, u.color_code, "
-                 "(SELECT COUNT(*) FROM realms WHERE user_id = u.id) as realm_count "
+    *dbClient << "SELECT u.id, u.username, u.is_admin, u.is_moderator, u.is_streamer, u.is_restreamer, u.is_bot, u.is_sticker_creator, u.is_uploader, u.is_texter, u.is_watch_creator, u.is_disabled, u.pending_uberban, u.created_at, u.user_color, "
+                 "(SELECT COUNT(*) FROM realms WHERE user_id = u.id) as realm_count, "
+                 "(SELECT COUNT(*) FROM referral_codes WHERE owner_id = u.id) as referral_code_count "
                  "FROM users u ORDER BY u.created_at DESC"
               >> [callback](const Result& r) {
+                  LOG_DEBUG << "[getUsers] Query successful, returned " << r.size() << " users";
                   Json::Value resp;
                   resp["success"] = true;
                   Json::Value users(Json::arrayValue);
-                  
+
                   for (const auto& row : r) {
                       Json::Value user;
                       user["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
                       user["username"] = row["username"].as<std::string>();
                       user["isAdmin"] = row["is_admin"].as<bool>();
+                      user["isModerator"] = row["is_moderator"].isNull() ? false : row["is_moderator"].as<bool>();
                       user["isStreamer"] = row["is_streamer"].as<bool>();
+                      user["isRestreamer"] = row["is_restreamer"].isNull() ? false : row["is_restreamer"].as<bool>();
+                      user["isBot"] = row["is_bot"].isNull() ? false : row["is_bot"].as<bool>();
+                      user["isStickerCreator"] = row["is_sticker_creator"].isNull() ? false : row["is_sticker_creator"].as<bool>();
+                      user["isUploader"] = row["is_uploader"].isNull() ? false : row["is_uploader"].as<bool>();
+                      user["isTexter"] = row["is_texter"].isNull() ? false : row["is_texter"].as<bool>();
+                      user["isWatchCreator"] = row["is_watch_creator"].isNull() ? false : row["is_watch_creator"].as<bool>();
+                      user["isDisabled"] = row["is_disabled"].isNull() ? false : row["is_disabled"].as<bool>();
+                      user["pendingUberban"] = row["pending_uberban"].isNull() ? false : row["pending_uberban"].as<bool>();
                       user["createdAt"] = row["created_at"].as<std::string>();
-                      user["colorCode"] = row["color_code"].isNull() ? "#561D5E" : row["color_code"].as<std::string>();
+                      user["colorCode"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
                       user["realmCount"] = static_cast<Json::Int64>(row["realm_count"].as<int64_t>());
+                      user["referralCodeCount"] = static_cast<Json::Int64>(row["referral_code_count"].as<int64_t>());
                       users.append(user);
+                      LOG_DEBUG << "[getUsers] Added user: " << user["username"].asString();
                   }
-                  
+
                   resp["users"] = users;
+                  LOG_DEBUG << "[getUsers] Sending response with " << users.size() << " users";
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get users: " << e.base().what();
-                  callback(jsonError("Failed to get users"));
-              };
+              >> DB_ERROR_MSG(callback, "get users", "Failed to get users");
 }
 void AdminController::getActiveStreams(const HttpRequestPtr &req,
                                       std::function<void(const HttpResponsePtr &)> &&callback) {
@@ -102,10 +216,7 @@ void AdminController::getActiveStreams(const HttpRequestPtr &req,
                   resp["streams"] = streams;
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get active streams: " << e.base().what();
-                  callback(jsonError("Failed to get active streams"));
-              };
+              >> DB_ERROR_MSG(callback, "get active streams", "Failed to get active streams");
 }
 
 void AdminController::disconnectStream(const HttpRequestPtr &req,
@@ -137,7 +248,13 @@ void AdminController::promoteToStreamer(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k403Forbidden));
         return;
     }
-    
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
     int64_t targetUserId = std::stoll(userId);
     
     auto dbClient = app().getDbClient();
@@ -149,10 +266,7 @@ void AdminController::promoteToStreamer(const HttpRequestPtr &req,
                   resp["message"] = "User promoted to streamer";
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to promote user: " << e.base().what();
-                  callback(jsonError("Failed to promote user"));
-              };
+              >> DB_ERROR_MSG(callback, "promote user", "Failed to promote user");
 }
 
 void AdminController::demoteFromStreamer(const HttpRequestPtr &req,
@@ -163,9 +277,15 @@ void AdminController::demoteFromStreamer(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k403Forbidden));
         return;
     }
-    
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
     int64_t targetUserId = std::stoll(userId);
-    
+
     auto dbClient = app().getDbClient();
     *dbClient << "UPDATE users SET is_streamer = false WHERE id = $1"
               << targetUserId
@@ -175,8 +295,2948 @@ void AdminController::demoteFromStreamer(const HttpRequestPtr &req,
                   resp["message"] = "User demoted from streamer";
                   callback(jsonResp(resp));
               }
+              >> DB_ERROR_MSG(callback, "demote user", "Failed to demote user");
+}
+
+void AdminController::promoteToRestreamer(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_restreamer = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User promoted to restreamer";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "promote user to restreamer", "Failed to promote user to restreamer");
+}
+
+void AdminController::demoteFromRestreamer(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_restreamer = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User demoted from restreamer";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "demote user from restreamer", "Failed to demote user from restreamer");
+}
+
+void AdminController::promoteToBot(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_bot = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted bot role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant bot role", "Failed to grant bot role");
+}
+
+void AdminController::demoteFromBot(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_bot = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User bot role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke bot role", "Failed to revoke bot role");
+}
+
+void AdminController::getAllBotApiKeys(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT b.id, b.user_id, b.name, b.scopes, b.is_active, b.last_used_at, b.expires_at, b.created_at, "
+                 "u.username FROM bot_api_keys b "
+                 "JOIN users u ON b.user_id = u.id "
+                 "ORDER BY b.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value keys(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value key;
+                      key["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      key["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      key["username"] = row["username"].as<std::string>();
+                      key["name"] = row["name"].as<std::string>();
+                      key["scopes"] = row["scopes"].isNull() ? "chat:write" : row["scopes"].as<std::string>();
+                      key["isActive"] = row["is_active"].as<bool>();
+                      key["lastUsedAt"] = row["last_used_at"].isNull() ? "" : row["last_used_at"].as<std::string>();
+                      key["expiresAt"] = row["expires_at"].isNull() ? "" : row["expires_at"].as<std::string>();
+                      key["createdAt"] = row["created_at"].as<std::string>();
+                      keys.append(key);
+                  }
+
+                  resp["keys"] = keys;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get all bot API keys", "Failed to get API keys");
+}
+
+void AdminController::deleteBotApiKey(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback,
+                                      const std::string &keyId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t keyIdInt;
+    try {
+        keyIdInt = std::stoll(keyId);
+    } catch (...) {
+        callback(jsonError("Invalid key ID"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    // Hard delete the key (admin action)
+    *dbClient << "DELETE FROM bot_api_keys WHERE id = $1"
+              << keyIdInt
+              >> [callback](const Result& r) {
+                  if (r.affectedRows() == 0) {
+                      callback(jsonError("API key not found", k404NotFound));
+                      return;
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "API key deleted";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "delete bot API key", "Failed to delete API key");
+}
+
+void AdminController::uploadStickers(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    MultiPartParser fileUpload;
+    if (fileUpload.parse(req) != 0 || fileUpload.getFiles().empty()) {
+        callback(jsonError("No files uploaded"));
+        return;
+    }
+
+    auto files = fileUpload.getFiles();
+    auto dbClient = app().getDbClient();
+
+    // Validate file sizes (4MB limit)
+    const size_t maxFileSize = 4 * 1024 * 1024; // 4MB
+    for (const auto& file : files) {
+        if (file.fileLength() > maxFileSize) {
+            callback(jsonError("File too large: " + file.getFileName() + " (max 4MB)"));
+            return;
+        }
+    }
+
+    Json::Value resp;
+    resp["success"] = true;
+    Json::Value uploaded(Json::arrayValue);
+
+    // Ensure directory exists
+    std::filesystem::create_directories("./uploads/stickers");
+
+    // Process each uploaded file
+    int validCount = 0;
+    for (const auto& file : files) {
+        // Get the sticker name from the parameter (format: sticker_name[filename])
+        std::string paramName = file.getFileName();
+        std::string stickerName = fileUpload.getParameter<std::string>("name_" + paramName);
+
+        if (stickerName.empty()) {
+            // Use filename without extension as default name
+            stickerName = paramName.substr(0, paramName.find_last_of('.'));
+        }
+
+        // Validate file content using magic bytes (not just extension)
+        auto validation = validateImageMagicBytes(file.fileData(), file.fileLength(), true);
+        if (!validation.valid) {
+            LOG_WARN << "Sticker upload rejected for " << paramName << ": invalid image magic bytes";
+            continue; // Skip invalid file types
+        }
+
+        // Use the extension from magic byte validation (ignores client-provided extension)
+        std::string ext = validation.extension;
+        std::string uniqueName = drogon::utils::getUuid() + ext;
+        std::string filePath = "/uploads/stickers/" + uniqueName;
+        std::string fullPath = "./uploads/stickers/" + uniqueName;
+
+        // Save file
+        file.saveAs(fullPath);
+        validCount++;
+
+        // Insert into database
+        *dbClient << "INSERT INTO stickers (name, file_path) VALUES ($1, $2) RETURNING id"
+                  << stickerName << filePath
+                  >> [uploaded, stickerName, filePath](const Result& r) mutable {
+                      if (!r.empty()) {
+                          Json::Value sticker;
+                          sticker["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                          sticker["name"] = stickerName;
+                          sticker["filePath"] = filePath;
+                          uploaded.append(sticker);
+                      }
+                  }
+                  >> [](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to insert sticker: " << e.base().what();
+                  };
+    }
+
+    if (validCount == 0) {
+        callback(jsonError("No valid image files uploaded. Only JPEG, PNG, GIF, and WebP are allowed."));
+        return;
+    }
+
+    resp["stickers"] = uploaded;
+    resp["count"] = validCount;
+
+    // Notify chat-service to refresh sticker cache
+    notifyChatServiceStickerUpdate();
+
+    callback(jsonResp(resp));
+}
+
+void AdminController::getStickers(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, name, file_path, created_at FROM stickers WHERE is_active = true ORDER BY name ASC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value stickers(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value sticker;
+                      sticker["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      sticker["name"] = row["name"].as<std::string>();
+                      sticker["filePath"] = row["file_path"].as<std::string>();
+                      sticker["createdAt"] = row["created_at"].as<std::string>();
+                      stickers.append(sticker);
+                  }
+
+                  resp["stickers"] = stickers;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get stickers", "Failed to get stickers");
+}
+
+void AdminController::deleteSticker(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &stickerId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(stickerId);
+    auto dbClient = app().getDbClient();
+
+    // First get the file path before deleting
+    *dbClient << "SELECT file_path FROM stickers WHERE id = $1"
+              << id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Sticker not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+
+                  // Hard delete from database
+                  *dbClient << "DELETE FROM stickers WHERE id = $1"
+                            << id
+                            >> [callback, filePath](const Result&) {
+                                // Delete file from disk
+                                try {
+                                    // Convert web path to filesystem path
+                                    // file_path is like "/uploads/stickers/uuid.ext"
+                                    std::string fullPath = "." + filePath;
+
+                                    if (std::filesystem::exists(fullPath)) {
+                                        std::filesystem::remove(fullPath);
+                                        LOG_INFO << "Deleted sticker file: " << fullPath;
+                                    } else {
+                                        LOG_WARN << "Sticker file not found for deletion: " << fullPath;
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete sticker file " << filePath << ": " << e.what();
+                                    // Continue anyway - DB record is already deleted
+                                }
+
+                                // Notify chat-service to refresh sticker cache
+                                notifyChatServiceStickerUpdate();
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Sticker permanently deleted";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete sticker", "Failed to delete sticker");
+              }
+              >> DB_ERROR_MSG(callback, "get sticker", "Failed to get sticker");
+}
+
+void AdminController::renameSticker(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &stickerId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    std::string newName = (*jsonPtr).get("name", "").asString();
+    if (newName.empty()) {
+        callback(jsonError("Name is required"));
+        return;
+    }
+
+    // Validate name (alphanumeric and underscores only, 1-50 chars)
+    if (newName.length() > 50) {
+        callback(jsonError("Name must be 50 characters or less"));
+        return;
+    }
+
+    int64_t id = std::stoll(stickerId);
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "UPDATE stickers SET name = $1 WHERE id = $2 RETURNING id, name, file_path"
+              << newName << id
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Sticker not found", k404NotFound));
+                      return;
+                  }
+
+                  // Notify chat-service to refresh sticker cache
+                  notifyChatServiceStickerUpdate();
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["sticker"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                  resp["sticker"]["name"] = r[0]["name"].as<std::string>();
+                  resp["sticker"]["filePath"] = r[0]["file_path"].as<std::string>();
+                  callback(jsonResp(resp));
+              }
               >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to demote user: " << e.base().what();
-                  callback(jsonError("Failed to demote user"));
+                  LOG_ERROR << "Failed to rename sticker: " << e.base().what();
+                  if (std::string(e.base().what()).find("duplicate") != std::string::npos) {
+                      callback(jsonError("A sticker with this name already exists"));
+                  } else {
+                      callback(jsonError("Failed to rename sticker"));
+                  }
+              };
+}
+
+void AdminController::promoteToStickerCreator(const HttpRequestPtr &req,
+                                             std::function<void(const HttpResponsePtr &)> &&callback,
+                                             const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_sticker_creator = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted sticker creator role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant sticker creator role", "Failed to grant sticker creator role");
+}
+
+void AdminController::demoteFromStickerCreator(const HttpRequestPtr &req,
+                                              std::function<void(const HttpResponsePtr &)> &&callback,
+                                              const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_sticker_creator = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User sticker creator role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke sticker creator role", "Failed to revoke sticker creator role");
+}
+
+void AdminController::promoteToUploader(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_uploader = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted uploader role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant uploader role", "Failed to grant uploader role");
+}
+
+void AdminController::demoteFromUploader(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback,
+                                        const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_uploader = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User uploader role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke uploader role", "Failed to revoke uploader role");
+}
+
+void AdminController::promoteToTexter(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback,
+                                      const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_texter = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted texter role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant texter role", "Failed to grant texter role");
+}
+
+void AdminController::demoteFromTexter(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_texter = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User texter role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke texter role", "Failed to revoke texter role");
+}
+
+void AdminController::promoteToWatchCreator(const HttpRequestPtr &req,
+                                            std::function<void(const HttpResponsePtr &)> &&callback,
+                                            const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_watch_creator = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted watch creator role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant watch creator role", "Failed to grant watch creator role");
+}
+
+void AdminController::demoteFromWatchCreator(const HttpRequestPtr &req,
+                                             std::function<void(const HttpResponsePtr &)> &&callback,
+                                             const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_watch_creator = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User watch creator role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke watch creator role", "Failed to revoke watch creator role");
+}
+
+void AdminController::promoteToModerator(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_moderator = true WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User granted site-wide moderator role";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "grant moderator role", "Failed to grant moderator role");
+}
+
+void AdminController::demoteFromModerator(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // SECURITY FIX #26: Rate limit role operations
+    if (!adminRoleRateLimiter.isAllowed(user.id)) {
+        callback(jsonError("Rate limit exceeded. Maximum 30 role changes per minute.", k429TooManyRequests));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE users SET is_moderator = false WHERE id = $1"
+              << targetUserId
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "User site-wide moderator role revoked";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "revoke moderator role", "Failed to revoke moderator role");
+}
+
+void AdminController::getStickerSubmissions(const HttpRequestPtr &req,
+                                           std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT s.id, s.name, s.file_path, s.status, s.denial_reason, s.created_at, "
+                 "u.id as submitter_id, u.username as submitter_username "
+                 "FROM sticker_submissions s "
+                 "JOIN users u ON s.submitted_by = u.id "
+                 "WHERE s.status = 'pending' "
+                 "ORDER BY s.created_at ASC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value submissions(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value sub;
+                      sub["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      sub["name"] = row["name"].as<std::string>();
+                      sub["filePath"] = row["file_path"].as<std::string>();
+                      sub["status"] = row["status"].as<std::string>();
+                      sub["createdAt"] = row["created_at"].as<std::string>();
+                      sub["submitterId"] = static_cast<Json::Int64>(row["submitter_id"].as<int64_t>());
+                      sub["submitterUsername"] = row["submitter_username"].as<std::string>();
+                      submissions.append(sub);
+                  }
+
+                  resp["submissions"] = submissions;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get sticker submissions", "Failed to get sticker submissions");
+}
+
+void AdminController::approveStickerSubmission(const HttpRequestPtr &req,
+                                              std::function<void(const HttpResponsePtr &)> &&callback,
+                                              const std::string &submissionId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    std::string newName = "";
+    if (jsonPtr) {
+        newName = (*jsonPtr).get("name", "").asString();
+    }
+
+    int64_t id = std::stoll(submissionId);
+    int64_t reviewerId = user.id;
+    auto dbClient = app().getDbClient();
+
+    // First get the submission details
+    *dbClient << "SELECT id, name, file_path FROM sticker_submissions WHERE id = $1 AND status = 'pending'"
+              << id
+              >> [callback, dbClient, id, reviewerId, newName](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Submission not found or already processed", k404NotFound));
+                      return;
+                  }
+
+                  std::string stickerName = newName.empty() ? r[0]["name"].as<std::string>() : newName;
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+
+                  // Insert into stickers table
+                  *dbClient << "INSERT INTO stickers (name, file_path) VALUES ($1, $2) RETURNING id"
+                            << stickerName << filePath
+                            >> [callback, dbClient, id, reviewerId, stickerName](const Result& insertResult) {
+                                if (insertResult.empty()) {
+                                    callback(jsonError("Failed to create sticker"));
+                                    return;
+                                }
+
+                                int64_t newStickerId = insertResult[0]["id"].as<int64_t>();
+
+                                // Update submission status
+                                *dbClient << "UPDATE sticker_submissions SET status = 'approved', "
+                                             "reviewed_by = $1, reviewed_at = CURRENT_TIMESTAMP WHERE id = $2"
+                                          << reviewerId << id
+                                          >> [callback, newStickerId, stickerName](const Result&) {
+                                              // Notify chat-service to refresh sticker cache
+                                              notifyChatServiceStickerUpdate();
+
+                                              Json::Value resp;
+                                              resp["success"] = true;
+                                              resp["message"] = "Sticker approved and added";
+                                              resp["sticker"]["id"] = static_cast<Json::Int64>(newStickerId);
+                                              resp["sticker"]["name"] = stickerName;
+                                              callback(jsonResp(resp));
+                                          }
+                                          >> [callback](const DrogonDbException& e) {
+                                              LOG_ERROR << "Failed to update submission status: " << e.base().what();
+                                              callback(jsonError("Failed to update submission status"));
+                                          };
+                            }
+                            >> [callback](const DrogonDbException& e) {
+                                LOG_ERROR << "Failed to create sticker: " << e.base().what();
+                                if (std::string(e.base().what()).find("duplicate") != std::string::npos) {
+                                    callback(jsonError("A sticker with this name already exists"));
+                                } else {
+                                    callback(jsonError("Failed to create sticker"));
+                                }
+                            };
+              }
+              >> DB_ERROR_MSG(callback, "get submission", "Failed to get submission");
+}
+
+void AdminController::denyStickerSubmission(const HttpRequestPtr &req,
+                                           std::function<void(const HttpResponsePtr &)> &&callback,
+                                           const std::string &submissionId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    std::string reason = "";
+    if (jsonPtr) {
+        reason = (*jsonPtr).get("reason", "").asString();
+    }
+
+    int64_t id = std::stoll(submissionId);
+    int64_t reviewerId = user.id;
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "UPDATE sticker_submissions SET status = 'denied', "
+                 "reviewed_by = $1, reviewed_at = CURRENT_TIMESTAMP, denial_reason = $2 "
+                 "WHERE id = $3 AND status = 'pending'"
+              << reviewerId << reason << id
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "Sticker submission denied";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "deny submission", "Failed to deny submission");
+}
+
+void AdminController::uploadHonkSound(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    MultiPartParser fileUpload;
+    if (fileUpload.parse(req) != 0 || fileUpload.getFiles().empty()) {
+        callback(jsonError("No file uploaded"));
+        return;
+    }
+
+    auto files = fileUpload.getFiles();
+    if (files.size() != 1) {
+        callback(jsonError("Please upload exactly one file"));
+        return;
+    }
+
+    auto& file = files[0];
+    std::string paramName = file.getFileName();
+    std::string honkName = fileUpload.getParameter<std::string>("name");
+
+    if (honkName.empty()) {
+        // Use filename without extension as default name
+        honkName = paramName.substr(0, paramName.find_last_of('.'));
+    }
+
+    // Validate file extension
+    std::string ext = paramName.substr(paramName.find_last_of('.'));
+    std::transform(ext.begin(), ext.end(), ext.begin(), ::tolower);
+    if (ext != ".mp3" && ext != ".wav" && ext != ".ogg") {
+        callback(jsonError("Only MP3, WAV, and OGG files are allowed"));
+        return;
+    }
+
+    // Generate unique filename
+    std::string uniqueName = drogon::utils::getUuid() + ext;
+    std::string filePath = "/uploads/honks/" + uniqueName;
+    std::string fullPath = "./uploads/honks/" + uniqueName;
+
+    // Ensure directory exists
+    std::filesystem::create_directories("./uploads/honks");
+
+    // Save file
+    file.saveAs(fullPath);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "INSERT INTO honk_sounds (name, file_path) VALUES ($1, $2) RETURNING id, name, file_path, is_active, created_at"
+              << honkName << filePath
+              >> [callback](const Result& r) {
+                  if (!r.empty()) {
+                      const auto& row = r[0];
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["honk"]["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      resp["honk"]["name"] = row["name"].as<std::string>();
+                      resp["honk"]["filePath"] = row["file_path"].as<std::string>();
+                      resp["honk"]["isActive"] = row["is_active"].as<bool>();
+                      resp["honk"]["createdAt"] = row["created_at"].as<std::string>();
+                      callback(jsonResp(resp));
+                  } else {
+                      callback(jsonError("Failed to save honk sound"));
+                  }
+              }
+              >> DB_ERROR_MSG(callback, "insert honk sound", "Failed to upload honk sound");
+}
+
+void AdminController::getHonkSounds(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, name, file_path, is_active, created_at FROM honk_sounds ORDER BY created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value honks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value honk;
+                      honk["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      honk["name"] = row["name"].as<std::string>();
+                      honk["filePath"] = row["file_path"].as<std::string>();
+                      honk["isActive"] = row["is_active"].as<bool>();
+                      honk["createdAt"] = row["created_at"].as<std::string>();
+                      honks.append(honk);
+                  }
+
+                  resp["honks"] = honks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get honk sounds", "Failed to get honk sounds");
+}
+
+void AdminController::deleteHonkSound(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &honkId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(honkId);
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "DELETE FROM honk_sounds WHERE id = $1"
+              << id
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "Honk sound deleted";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "delete honk sound", "Failed to delete honk sound");
+}
+
+void AdminController::setActiveHonkSound(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback,
+                                        const std::string &honkId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(honkId);
+    auto dbClient = app().getDbClient();
+
+    // The trigger will automatically deactivate other honks
+    *dbClient << "UPDATE honk_sounds SET is_active = true WHERE id = $1"
+              << id
+              >> [callback](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "Honk sound activated";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "activate honk sound", "Failed to activate honk sound");
+}
+
+void AdminController::getActiveHonkSound(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    // This endpoint is public - no auth required
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, name, file_path FROM honk_sounds WHERE is_active = true LIMIT 1"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  if (!r.empty()) {
+                      const auto& row = r[0];
+                      resp["honk"]["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      resp["honk"]["name"] = row["name"].as<std::string>();
+                      resp["honk"]["filePath"] = row["file_path"].as<std::string>();
+                  } else {
+                      resp["honk"] = Json::nullValue;
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get active honk sound", "Failed to get active honk sound");
+}
+
+void AdminController::getChatSettings(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+
+    if (!user.isAdmin) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "SELECT guest_prefix, default_retention_hours, "
+                 "guests_allowed_site_wide, registration_enabled, referral_system_enabled FROM chat_settings WHERE id = 1"
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      Json::Value settings;
+                      settings["guestPrefix"] = "Guest";
+                      settings["defaultRetentionHours"] = 24;
+                      settings["guestsAllowedSiteWide"] = true;
+                      settings["registrationEnabled"] = true;
+                      settings["referralSystemEnabled"] = false;
+                      callback(jsonResp(settings));
+                      return;
+                  }
+
+                  auto row = r[0];
+                  Json::Value settings;
+                  settings["guestPrefix"] = row["guest_prefix"].as<std::string>();
+                  settings["defaultRetentionHours"] = row["default_retention_hours"].as<int>();
+                  settings["guestsAllowedSiteWide"] = row["guests_allowed_site_wide"].as<bool>();
+                  settings["registrationEnabled"] = row["registration_enabled"].as<bool>();
+                  settings["referralSystemEnabled"] = row["referral_system_enabled"].isNull() ? false : row["referral_system_enabled"].as<bool>();
+                  callback(jsonResp(settings));
+              }
+              >> DB_ERROR_MSG(callback, "get chat settings", "Failed to get chat settings");
+}
+
+void AdminController::updateChatSettings(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+
+    if (!user.isAdmin) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    const auto& json = *jsonPtr;
+
+    std::string guestPrefix = json.get("guestPrefix", "Guest").asString();
+    int defaultRetentionHours = json.get("defaultRetentionHours", 24).asInt();
+    bool guestsAllowedSiteWide = json.get("guestsAllowedSiteWide", true).asBool();
+    bool registrationEnabled = json.get("registrationEnabled", true).asBool();
+    bool referralSystemEnabled = json.get("referralSystemEnabled", false).asBool();
+
+    // Validate: referral system can only be enabled if registration is disabled
+    if (referralSystemEnabled && registrationEnabled) {
+        callback(jsonError("Referral system can only be enabled when registration is disabled"));
+        return;
+    }
+
+    // SECURITY FIX #33: Sync-first transactional pattern
+    // Sync to chat-service FIRST, then update PostgreSQL only on success
+    // This prevents configuration drift where database is updated but chat-service is not
+    auto client = HttpClient::newHttpClient("http://chat-service:8081");
+
+    // Build request body with settings
+    Json::Value chatServiceBody;
+    chatServiceBody["guestPrefix"] = guestPrefix;
+    chatServiceBody["defaultRetentionHours"] = defaultRetentionHours;
+    chatServiceBody["guestsAllowedSiteWide"] = guestsAllowedSiteWide;
+    chatServiceBody["registrationEnabled"] = registrationEnabled;
+    chatServiceBody["referralSystemEnabled"] = referralSystemEnabled;
+
+    auto chatReq = HttpRequest::newHttpJsonRequest(chatServiceBody);
+    chatReq->setMethod(Put);
+    chatReq->setPath("/api/chat/admin/settings");
+
+    // Get auth token from original request
+    std::string token = req->getCookie("auth_token");
+    if (token.empty()) {
+        std::string auth = req->getHeader("Authorization");
+        if (!auth.empty() && auth.substr(0, 7) == "Bearer ") {
+            token = auth.substr(7);
+        }
+    }
+    chatReq->addHeader("Authorization", "Bearer " + token);
+
+    // First sync to chat-service
+    client->sendRequest(chatReq, [callback, guestPrefix, defaultRetentionHours,
+                                   guestsAllowedSiteWide, registrationEnabled, referralSystemEnabled]
+                                  (ReqResult result, const HttpResponsePtr& chatResp) {
+        Json::Value resp;
+
+        // SECURITY FIX #28/#33: If chat-service sync fails, abort without updating PostgreSQL
+        if (result != ReqResult::Ok) {
+            LOG_ERROR << "Failed to connect to chat-service: " << (int)result;
+            resp["success"] = false;
+            resp["error"] = "Chat service is unavailable. Settings not updated.";
+            callback(jsonResp(resp));
+            return;
+        }
+
+        // Check HTTP response status
+        if (chatResp && chatResp->getStatusCode() != k200OK) {
+            LOG_ERROR << "Chat-service rejected settings sync: " << chatResp->getStatusCode();
+            resp["success"] = false;
+            resp["error"] = "Chat service rejected the update. Settings not updated.";
+            callback(jsonResp(resp));
+            return;
+        }
+
+        // Chat-service sync successful, now update PostgreSQL
+        LOG_INFO << "Settings synced to chat-service Redis, now updating PostgreSQL";
+        auto dbClient = app().getDbClient();
+        *dbClient << "UPDATE chat_settings SET guest_prefix = $1, "
+                     "default_retention_hours = $2, guests_allowed_site_wide = $3, "
+                     "registration_enabled = $4, referral_system_enabled = $5, "
+                     "updated_at = CURRENT_TIMESTAMP WHERE id = 1"
+                  << guestPrefix << defaultRetentionHours
+                  << guestsAllowedSiteWide << registrationEnabled << referralSystemEnabled
+                  >> [callback, guestPrefix, defaultRetentionHours,
+                      guestsAllowedSiteWide, registrationEnabled, referralSystemEnabled](const Result&) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "Chat settings updated";
+                      resp["settings"]["guestPrefix"] = guestPrefix;
+                      resp["settings"]["defaultRetentionHours"] = defaultRetentionHours;
+                      resp["settings"]["guestsAllowedSiteWide"] = guestsAllowedSiteWide;
+                      resp["settings"]["registrationEnabled"] = registrationEnabled;
+                      resp["settings"]["referralSystemEnabled"] = referralSystemEnabled;
+                      callback(jsonResp(resp));
+
+                      LOG_INFO << "Chat settings updated: guestPrefix=" << guestPrefix
+                               << ", guestsAllowed=" << guestsAllowedSiteWide
+                               << ", regEnabled=" << registrationEnabled
+                               << ", referralEnabled=" << referralSystemEnabled;
+                  }
+                  >> [callback](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update PostgreSQL after chat-service sync: " << e.base().what();
+                      // SECURITY FIX #33: Warn about inconsistent state
+                      Json::Value resp;
+                      resp["success"] = false;
+                      resp["error"] = "Chat service updated but database update failed. Please retry or contact support.";
+                      callback(jsonResp(resp));
+                  };
+    });
+}
+
+void AdminController::getRealms(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.id, r.name, r.description, r.stream_key, r.is_active, r.is_live, "
+                 "r.viewer_count, r.viewer_multiplier, r.realm_type, r.created_at, r.original_creator_username, "
+                 "u.username, u.id as user_id "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "ORDER BY r.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value realms(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value realm;
+                      realm["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      realm["name"] = row["name"].as<std::string>();
+                      realm["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      realm["streamKey"] = row["stream_key"].isNull() ? "" : row["stream_key"].as<std::string>();
+                      realm["isActive"] = row["is_active"].as<bool>();
+                      realm["isLive"] = row["is_live"].as<bool>();
+                      realm["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
+                      realm["viewerMultiplier"] = row["viewer_multiplier"].isNull() ? 1 : row["viewer_multiplier"].as<int>();
+                      realm["realmType"] = row["realm_type"].isNull() ? "stream" : row["realm_type"].as<std::string>();
+                      realm["createdAt"] = row["created_at"].as<std::string>();
+                      realm["username"] = row["username"].as<std::string>();
+                      realm["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      realm["originalCreatorUsername"] = row["original_creator_username"].isNull() ? "" : row["original_creator_username"].as<std::string>();
+                      realms.append(realm);
+                  }
+
+                  resp["realms"] = realms;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get realms", "Failed to get realms");
+}
+
+void AdminController::setViewerMultiplier(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        callback(jsonError("Invalid JSON body"));
+        return;
+    }
+
+    int64_t id = std::stoll(realmId);
+    int multiplier = (*jsonPtr).get("multiplier", 1).asInt();
+
+    // Clamp multiplier to reasonable range (1-1000)
+    if (multiplier < 1) multiplier = 1;
+    if (multiplier > 1000) multiplier = 1000;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE realms SET viewer_multiplier = $1 WHERE id = $2 AND realm_type = 'stream'"
+              << multiplier << id
+              >> [callback, multiplier](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["multiplier"] = multiplier;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "set viewer multiplier", "Failed to update viewer multiplier");
+}
+
+void AdminController::deleteRealm(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(realmId);
+    auto dbClient = app().getDbClient();
+
+    // First, collect all file paths from videos, audio_files, and ebooks for this realm
+    // Then delete files from disk before deleting from database
+
+    // Get video files
+    *dbClient << "SELECT file_path, thumbnail_path, preview_path FROM videos WHERE realm_id = $1"
+              << id
+              >> [callback, dbClient, id](const Result& videos) {
+                  // Collect video file paths
+                  std::vector<std::string> filesToDelete;
+                  for (const auto& row : videos) {
+                      if (!row["file_path"].isNull()) {
+                          filesToDelete.push_back("/app" + row["file_path"].as<std::string>());
+                      }
+                      if (!row["thumbnail_path"].isNull()) {
+                          filesToDelete.push_back("/app" + row["thumbnail_path"].as<std::string>());
+                      }
+                      if (!row["preview_path"].isNull()) {
+                          filesToDelete.push_back("/app" + row["preview_path"].as<std::string>());
+                      }
+                  }
+
+                  // Get audio files
+                  *dbClient << "SELECT file_path, thumbnail_path FROM audio_files WHERE realm_id = $1"
+                            << id
+                            >> [callback, dbClient, id, filesToDelete](const Result& audio) mutable {
+                                // Collect audio file paths
+                                for (const auto& row : audio) {
+                                    if (!row["file_path"].isNull()) {
+                                        filesToDelete.push_back("/app" + row["file_path"].as<std::string>());
+                                    }
+                                    if (!row["thumbnail_path"].isNull()) {
+                                        filesToDelete.push_back("/app" + row["thumbnail_path"].as<std::string>());
+                                    }
+                                }
+
+                                // Get ebook files
+                                *dbClient << "SELECT file_path, cover_path FROM ebooks WHERE realm_id = $1"
+                                          << id
+                                          >> [callback, dbClient, id, filesToDelete](const Result& ebooks) mutable {
+                                              // Collect ebook file paths
+                                              for (const auto& row : ebooks) {
+                                                  if (!row["file_path"].isNull()) {
+                                                      filesToDelete.push_back("/app" + row["file_path"].as<std::string>());
+                                                  }
+                                                  if (!row["cover_path"].isNull()) {
+                                                      filesToDelete.push_back("/app" + row["cover_path"].as<std::string>());
+                                                  }
+                                              }
+
+                                              // Delete all collected files from disk
+                                              int filesDeleted = 0;
+                                              for (const auto& filePath : filesToDelete) {
+                                                  try {
+                                                      if (std::filesystem::exists(filePath)) {
+                                                          std::filesystem::remove(filePath);
+                                                          filesDeleted++;
+                                                      }
+                                                  } catch (const std::exception& e) {
+                                                      LOG_WARN << "Failed to delete file " << filePath << ": " << e.what();
+                                                  }
+                                              }
+
+                                              LOG_INFO << "Deleted " << filesDeleted << " files for realm " << id;
+
+                                              // Now delete the realm (CASCADE will handle DB records)
+                                              *dbClient << "DELETE FROM realms WHERE id = $1"
+                                                        << id
+                                                        >> [callback, filesDeleted](const Result&) {
+                                                            Json::Value resp;
+                                                            resp["success"] = true;
+                                                            resp["message"] = "Realm deleted successfully";
+                                                            resp["filesDeleted"] = filesDeleted;
+                                                            callback(jsonResp(resp));
+                                                        }
+                                                        >> DB_ERROR_MSG(callback, "delete realm", "Failed to delete realm");
+                                          }
+                                          >> DB_ERROR_MSG(callback, "get ebooks for realm", "Failed to get ebooks for realm");
+                            }
+                            >> DB_ERROR_MSG(callback, "get audio files for realm", "Failed to get audio files for realm");
+              }
+              >> DB_ERROR_MSG(callback, "get videos for realm", "Failed to get videos for realm");
+}
+
+void AdminController::deleteUser(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    // Prevent admin from deleting themselves
+    if (targetUserId == user.id) {
+        callback(jsonError("Cannot delete your own account"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // First check if user exists and is not an admin
+    *dbClient << "SELECT id, username, is_admin FROM users WHERE id = $1"
+              << targetUserId
+              >> [callback, dbClient, targetUserId](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found", k404NotFound));
+                      return;
+                  }
+
+                  if (r[0]["is_admin"].as<bool>()) {
+                      callback(jsonError("Cannot delete admin users"));
+                      return;
+                  }
+
+                  std::string deletedUsername = r[0]["username"].as<std::string>();
+
+                  // Get an admin user ID to transfer content to
+                  *dbClient << "SELECT id FROM users WHERE is_admin = true LIMIT 1"
+                            >> [callback, dbClient, targetUserId, deletedUsername](const Result& adminResult) {
+                                if (adminResult.empty()) {
+                                    callback(jsonError("No admin user found to transfer content"));
+                                    return;
+                                }
+
+                                int64_t adminId = adminResult[0]["id"].as<int64_t>();
+
+                                // Transfer realms to admin, preserving original creator username
+                                *dbClient << "UPDATE realms SET user_id = $1, original_creator_username = $2 WHERE user_id = $3"
+                                          << adminId << deletedUsername << targetUserId
+                                          >> [callback, dbClient, targetUserId, deletedUsername, adminId](const Result&) {
+                                              // Transfer videos to admin
+                                              *dbClient << "UPDATE videos SET user_id = $1 WHERE user_id = $2"
+                                                        << adminId << targetUserId
+                                                        >> [callback, dbClient, targetUserId, deletedUsername, adminId](const Result&) {
+                                                            // Transfer audio_files to admin
+                                                            *dbClient << "UPDATE audio_files SET user_id = $1 WHERE user_id = $2"
+                                                                      << adminId << targetUserId
+                                                                      >> [callback, dbClient, targetUserId, deletedUsername, adminId](const Result&) {
+                                                                          // Transfer ebooks to admin
+                                                                          *dbClient << "UPDATE ebooks SET user_id = $1 WHERE user_id = $2"
+                                                                                    << adminId << targetUserId
+                                                                                    >> [callback, dbClient, targetUserId, deletedUsername, adminId](const Result&) {
+                                                                                        // Transfer forums to admin
+                                                                                        *dbClient << "UPDATE forums SET user_id = $1 WHERE user_id = $2"
+                                                                                                  << adminId << targetUserId
+                                                                                                  >> [callback, dbClient, targetUserId, deletedUsername](const Result&) {
+                                                                                                      // Now safe to delete user (all content transferred)
+                                                                                                      *dbClient << "DELETE FROM users WHERE id = $1"
+                                                                                                                << targetUserId
+                                                                                                                >> [callback, deletedUsername](const Result&) {
+                                                                                                                    Json::Value resp;
+                                                                                                                    resp["success"] = true;
+                                                                                                                    resp["message"] = "User '" + deletedUsername + "' deleted. All content transferred to admin.";
+                                                                                                                    callback(jsonResp(resp));
+                                                                                                                }
+                                                                                                                >> DB_ERROR_MSG(callback, "delete user", "Failed to delete user");
+                                                                                                  }
+                                                                                                  >> DB_ERROR_MSG(callback, "transfer forums", "Failed to transfer forums");
+                                                                                    }
+                                                                                    >> DB_ERROR_MSG(callback, "transfer ebooks", "Failed to transfer ebooks");
+                                                                      }
+                                                                      >> DB_ERROR_MSG(callback, "transfer audio files", "Failed to transfer audio files");
+                                                        }
+                                                        >> DB_ERROR_MSG(callback, "transfer videos", "Failed to transfer videos");
+                                          }
+                                          >> DB_ERROR_MSG(callback, "transfer realms", "Failed to transfer realms");
+                            }
+                            >> DB_ERROR_MSG(callback, "get admin user", "Failed to get admin user");
+              }
+              >> DB_ERROR_MSG(callback, "get user", "Failed to get user");
+}
+
+void AdminController::disableUser(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    // Prevent admin from disabling themselves
+    if (targetUserId == user.id) {
+        callback(jsonError("Cannot disable your own account"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Check if user exists and is not an admin
+    *dbClient << "SELECT id, username, is_admin FROM users WHERE id = $1"
+              << targetUserId
+              >> [callback, dbClient, targetUserId](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found", k404NotFound));
+                      return;
+                  }
+
+                  bool isAdmin = r[0]["is_admin"].as<bool>();
+                  std::string username = r[0]["username"].as<std::string>();
+
+                  if (isAdmin) {
+                      callback(jsonError("Cannot disable admin users"));
+                      return;
+                  }
+
+                  // Disable the user
+                  *dbClient << "UPDATE users SET is_disabled = true WHERE id = $1"
+                            << targetUserId
+                            >> [callback, username](const Result&) {
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "User '" + username + "' has been disabled";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "disable user", "Failed to disable user");
+              }
+              >> DB_ERROR_MSG(callback, "get user", "Failed to get user");
+}
+
+void AdminController::enableUser(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    auto dbClient = app().getDbClient();
+
+    // Check if user exists
+    *dbClient << "SELECT id, username FROM users WHERE id = $1"
+              << targetUserId
+              >> [callback, dbClient, targetUserId](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string username = r[0]["username"].as<std::string>();
+
+                  // Enable the user
+                  *dbClient << "UPDATE users SET is_disabled = false WHERE id = $1"
+                            << targetUserId
+                            >> [callback, username](const Result&) {
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "User '" + username + "' has been enabled";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "enable user", "Failed to enable user");
+              }
+              >> DB_ERROR_MSG(callback, "get user", "Failed to get user");
+}
+
+void AdminController::uberbanUser(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t targetUserId = std::stoll(userId);
+
+    // Prevent admin from uberbanning themselves
+    if (targetUserId == user.id) {
+        callback(jsonError("Cannot uberban yourself", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Check if user exists and is not an admin
+    *dbClient << "SELECT id, username, is_admin FROM users WHERE id = $1"
+              << targetUserId
+              >> [callback, dbClient, targetUserId](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found", k404NotFound));
+                      return;
+                  }
+
+                  bool isAdmin = r[0]["is_admin"].as<bool>();
+                  if (isAdmin) {
+                      callback(jsonError("Cannot uberban an admin user", k400BadRequest));
+                      return;
+                  }
+
+                  std::string username = r[0]["username"].as<std::string>();
+
+                  // Try to get fingerprint from chat-service if user is connected
+                  auto httpClient = HttpClient::newHttpClient("http://chat-service:8081");
+                  auto chatReq = HttpRequest::newHttpRequest();
+                  chatReq->setPath("/api/internal/user/" + std::to_string(targetUserId) + "/uberban");
+                  chatReq->setMethod(drogon::Post);
+
+                  httpClient->sendRequest(chatReq, [callback, dbClient, targetUserId, username](ReqResult result, const HttpResponsePtr& resp) {
+                      // Option C: All uberbans are deferred - fingerprint captured on reconnect
+                      // Check if user was connected and disconnected by chat-service
+                      bool userWasDisconnected = false;
+                      if (result == ReqResult::Ok && resp && resp->getStatusCode() == k200OK) {
+                          auto json = resp->getJsonObject();
+                          if (json && (*json)["disconnected"].asBool()) {
+                              userWasDisconnected = true;
+                          }
+                      }
+
+                      // Set pending uberban in database and Redis
+                      // If user was disconnected, chat-service already set Redis key (no TTL)
+                      // We set it here with TTL as backup / consistency
+                      *dbClient << "UPDATE users SET pending_uberban = true, pending_uberban_at = NOW() WHERE id = $1"
+                                << targetUserId
+                                >> [callback, username, targetUserId, userWasDisconnected](const Result&) {
+                                    // Set Redis key for fast lookup by chat-service
+                                    // TTL: 30 days (in case user never comes back)
+                                    services::RedisHelper::instance().setexAsync(
+                                        "pending_uberban:" + std::to_string(targetUserId),
+                                        "1",
+                                        30 * 24 * 60 * 60,  // 30 days
+                                        [](bool) {}  // Fire and forget
+                                    );
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    if (userWasDisconnected) {
+                                        resp["message"] = "User '" + username + "' has been kicked. Fingerprint will be captured on reconnect.";
+                                    } else {
+                                        resp["message"] = "User '" + username + "' marked for uberban (will apply on next activity)";
+                                    }
+                                    resp["immediate"] = false;
+                                    resp["disconnected"] = userWasDisconnected;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "set pending uberban", "Failed to set pending uberban");
+                  });
+              }
+              >> DB_ERROR_MSG(callback, "get user", "Failed to get user");
+}
+
+void AdminController::incrementReferrals(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &userId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t targetId;
+    try {
+        targetId = std::stoll(userId);
+    } catch (...) {
+        callback(jsonError("Invalid user ID", k400BadRequest));
+        return;
+    }
+
+    // Generate a random 12-character code
+    static const char charset[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+    std::string code;
+    code.reserve(12);
+    std::random_device rd;
+    std::mt19937 gen(rd());
+    std::uniform_int_distribution<> dist(0, sizeof(charset) - 2);
+    for (int i = 0; i < 12; ++i) {
+        code += charset[dist(gen)];
+    }
+
+    auto dbClient = app().getDbClient();
+    // Insert a new referral code for the user (this increments their count)
+    *dbClient << "INSERT INTO referral_codes (owner_id, code) VALUES ($1, $2)"
+              << targetId << code
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["message"] = "Referral code added";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "increment referrals", "Failed to add referral code");
+}
+
+void AdminController::getVideos(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, "
+                 "v.duration_seconds, v.file_size_bytes, v.view_count, v.is_public, v.status, v.created_at, "
+                 "u.id as user_id, u.username "
+                 "FROM videos v "
+                 "LEFT JOIN users u ON v.user_id = u.id "
+                 "WHERE v.status != 'deleted' "
+                 "ORDER BY v.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value videos(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value video;
+                      video["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      video["title"] = row["title"].as<std::string>();
+                      video["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      video["filePath"] = row["file_path"].as<std::string>();
+                      video["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      video["durationSeconds"] = row["duration_seconds"].as<int>();
+                      video["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      video["viewCount"] = row["view_count"].as<int>();
+                      video["isPublic"] = row["is_public"].as<bool>();
+                      video["status"] = row["status"].as<std::string>();
+                      video["createdAt"] = row["created_at"].as<std::string>();
+                      video["userId"] = row["user_id"].isNull() ? Json::nullValue : Json::Value(static_cast<Json::Int64>(row["user_id"].as<int64_t>()));
+                      video["username"] = row["username"].isNull() ? "[deleted]" : row["username"].as<std::string>();
+                      videos.append(video);
+                  }
+
+                  resp["videos"] = videos;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get videos", "Failed to get videos");
+}
+
+void AdminController::deleteVideo(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &videoId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(videoId);
+    auto dbClient = app().getDbClient();
+
+    // Get file paths first
+    *dbClient << "SELECT file_path, thumbnail_path FROM videos WHERE id = $1"
+              << id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Video not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string thumbnailPath = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+
+                  // Soft delete by setting status to 'deleted'
+                  *dbClient << "UPDATE videos SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, thumbnailPath](const Result&) {
+                                // Delete files from disk
+                                try {
+                                    std::string fullVideoPath = "/app" + filePath;
+                                    if (std::filesystem::exists(fullVideoPath)) {
+                                        std::filesystem::remove(fullVideoPath);
+                                    }
+                                    if (!thumbnailPath.empty()) {
+                                        std::string fullThumbPath = "/app" + thumbnailPath;
+                                        if (std::filesystem::exists(fullThumbPath)) {
+                                            std::filesystem::remove(fullThumbPath);
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete video files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Video deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete video", "Failed to delete video");
+              }
+              >> DB_ERROR_MSG(callback, "get video", "Failed to get video");
+}
+
+void AdminController::getAudios(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                 "a.duration_seconds, a.file_size_bytes, a.play_count, a.is_public, a.status, a.created_at, "
+                 "u.id as user_id, u.username, r.name as realm_name "
+                 "FROM audio_files a "
+                 "LEFT JOIN users u ON a.user_id = u.id "
+                 "LEFT JOIN realms r ON a.realm_id = r.id "
+                 "WHERE a.status != 'deleted' "
+                 "ORDER BY a.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value audios(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value audio;
+                      audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      audio["title"] = row["title"].as<std::string>();
+                      audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      audio["filePath"] = row["file_path"].as<std::string>();
+                      audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                      audio["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      audio["playCount"] = row["play_count"].as<int>();
+                      audio["isPublic"] = row["is_public"].as<bool>();
+                      audio["status"] = row["status"].as<std::string>();
+                      audio["createdAt"] = row["created_at"].as<std::string>();
+                      audio["userId"] = row["user_id"].isNull() ? Json::nullValue : Json::Value(static_cast<Json::Int64>(row["user_id"].as<int64_t>()));
+                      audio["username"] = row["username"].isNull() ? "[deleted]" : row["username"].as<std::string>();
+                      audio["realmName"] = row["realm_name"].isNull() ? "" : row["realm_name"].as<std::string>();
+                      audios.append(audio);
+                  }
+
+                  resp["audios"] = audios;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get audios", "Failed to get audios");
+}
+
+void AdminController::deleteAudio(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &audioId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(audioId);
+    auto dbClient = app().getDbClient();
+
+    // Get file paths first
+    *dbClient << "SELECT file_path, thumbnail_path FROM audio_files WHERE id = $1"
+              << id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Audio not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string thumbnailPath = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+
+                  // Soft delete by setting status to 'deleted'
+                  *dbClient << "UPDATE audio_files SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, thumbnailPath](const Result&) {
+                                // Delete files from disk
+                                try {
+                                    std::string fullAudioPath = "/app" + filePath;
+                                    if (std::filesystem::exists(fullAudioPath)) {
+                                        std::filesystem::remove(fullAudioPath);
+                                    }
+                                    if (!thumbnailPath.empty()) {
+                                        std::string fullThumbPath = "/app" + thumbnailPath;
+                                        if (std::filesystem::exists(fullThumbPath)) {
+                                            std::filesystem::remove(fullThumbPath);
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete audio files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Audio deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete audio", "Failed to delete audio");
+              }
+              >> DB_ERROR_MSG(callback, "get audio", "Failed to get audio");
+}
+
+void AdminController::getEbooks(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.is_public, e.status, e.created_at, "
+                 "u.id as user_id, u.username, r.name as realm_name "
+                 "FROM ebooks e "
+                 "LEFT JOIN users u ON e.user_id = u.id "
+                 "LEFT JOIN realms r ON e.realm_id = r.id "
+                 "WHERE e.status != 'deleted' "
+                 "ORDER BY e.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value ebooks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value ebook;
+                      ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      ebook["title"] = row["title"].as<std::string>();
+                      ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      ebook["filePath"] = row["file_path"].as<std::string>();
+                      ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                      ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                      ebook["readCount"] = row["read_count"].as<int>();
+                      ebook["isPublic"] = row["is_public"].as<bool>();
+                      ebook["status"] = row["status"].as<std::string>();
+                      ebook["createdAt"] = row["created_at"].as<std::string>();
+                      ebook["userId"] = row["user_id"].isNull() ? Json::nullValue : Json::Value(static_cast<Json::Int64>(row["user_id"].as<int64_t>()));
+                      ebook["username"] = row["username"].isNull() ? "[deleted]" : row["username"].as<std::string>();
+                      ebook["realmName"] = row["realm_name"].isNull() ? "" : row["realm_name"].as<std::string>();
+                      ebooks.append(ebook);
+                  }
+
+                  resp["ebooks"] = ebooks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get ebooks", "Failed to get ebooks");
+}
+
+void AdminController::deleteEbook(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &ebookId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    int64_t id = std::stoll(ebookId);
+    auto dbClient = app().getDbClient();
+
+    // Get file paths first
+    *dbClient << "SELECT file_path, cover_path FROM ebooks WHERE id = $1"
+              << id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string coverPath = r[0]["cover_path"].isNull() ? "" : r[0]["cover_path"].as<std::string>();
+
+                  // Soft delete by setting status to 'deleted'
+                  *dbClient << "UPDATE ebooks SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, coverPath](const Result&) {
+                                // Delete files from disk
+                                try {
+                                    std::string fullEbookPath = "/app" + filePath;
+                                    if (std::filesystem::exists(fullEbookPath)) {
+                                        std::filesystem::remove(fullEbookPath);
+                                    }
+                                    if (!coverPath.empty()) {
+                                        std::string fullCoverPath = "/app" + coverPath;
+                                        if (std::filesystem::exists(fullCoverPath)) {
+                                            std::filesystem::remove(fullCoverPath);
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete ebook files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Ebook deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete ebook", "Failed to delete ebook");
+              }
+              >> DB_ERROR_MSG(callback, "get ebook", "Failed to get ebook");
+}
+
+void AdminController::getSiteSettings(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (!user.isAdmin) {
+        callback(jsonError("Admin access required", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT setting_key, setting_value FROM site_settings"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  for (const auto& row : r) {
+                      std::string key = row["setting_key"].as<std::string>();
+                      std::string value = row["setting_value"].isNull() ? "" : row["setting_value"].as<std::string>();
+                      resp["settings"][key] = value;
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get site settings", "Failed to get site settings");
+}
+
+void AdminController::updateSiteSettings(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (!user.isAdmin) {
+        callback(jsonError("Admin access required", k403Forbidden));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Update site_title if provided (use UPSERT in case row doesn't exist)
+    if (json->isMember("site_title")) {
+        std::string title = (*json)["site_title"].asString();
+        if (title.length() > 100) {
+            title = title.substr(0, 100);
+        }
+        // SECURITY FIX #27: Sanitize site title to prevent XSS attacks
+        title = htmlEscape(title);
+        *dbClient << "INSERT INTO site_settings (setting_key, setting_value) VALUES ('site_title', $1) "
+                     "ON CONFLICT (setting_key) DO UPDATE SET setting_value = $1, updated_at = CURRENT_TIMESTAMP"
+                  << title
+                  >> [](const Result&) {
+                      LOG_INFO << "Site title updated successfully";
+                  }
+                  >> [](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update site_title: " << e.base().what();
+                  };
+    }
+
+    // Update logo_display_mode if provided (use UPSERT in case row doesn't exist)
+    if (json->isMember("logo_display_mode")) {
+        std::string mode = (*json)["logo_display_mode"].asString();
+        if (mode != "text" && mode != "image" && mode != "both") {
+            callback(jsonError("Invalid logo_display_mode. Must be 'text', 'image', or 'both'"));
+            return;
+        }
+        // SECURITY FIX #29: Add proper error handling for async DB operations
+        *dbClient << "INSERT INTO site_settings (setting_key, setting_value) VALUES ('logo_display_mode', $1) "
+                     "ON CONFLICT (setting_key) DO UPDATE SET setting_value = $1, updated_at = CURRENT_TIMESTAMP"
+                  << mode
+                  >> [](const Result&) {
+                      LOG_INFO << "Logo display mode updated successfully";
+                  }
+                  >> [](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update logo_display_mode: " << e.base().what();
+                  };
+    }
+
+    // Update censored_words if provided (comma-separated list)
+    if (json->isMember("censored_words")) {
+        // Rate limit: 10 updates per minute per admin
+        if (!censoredWordsRateLimiter.isAllowed(user.id)) {
+            callback(jsonError("Rate limit exceeded. Maximum 10 censored words updates per minute.", k429TooManyRequests));
+            return;
+        }
+
+        std::string words = (*json)["censored_words"].asString();
+        // Limit to 10KB to prevent abuse
+        if (words.length() > 10240) {
+            callback(jsonError("Censored words list exceeds maximum size of 10KB"));
+            return;
+        }
+        *dbClient << "INSERT INTO site_settings (setting_key, setting_value) VALUES ('censored_words', $1) "
+                     "ON CONFLICT (setting_key) DO UPDATE SET setting_value = $1, updated_at = CURRENT_TIMESTAMP"
+                  << words
+                  >> [](const Result&) {
+                      // Reload censored words in the CensorService
+                      CensorService::getInstance().loadCensoredWords();
+                      // Notify chat service to refresh its cache
+                      notifyChatServiceCensoredWordsUpdate();
+                  }
+                  >> [](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update censored_words: " << e.base().what();
+                  };
+    }
+
+    Json::Value resp;
+    resp["success"] = true;
+    resp["message"] = "Site settings updated";
+    callback(jsonResp(resp));
+}
+
+void AdminController::uploadSiteLogo(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (!user.isAdmin) {
+        callback(jsonError("Admin access required", k403Forbidden));
+        return;
+    }
+
+    MultiPartParser parser;
+    parser.parse(req);
+
+    if (parser.getFiles().empty()) {
+        callback(jsonError("No file uploaded"));
+        return;
+    }
+
+    const auto& file = parser.getFiles()[0];
+
+    // Validate file size (max 2MB for logo)
+    const size_t maxSize = 2 * 1024 * 1024;
+    if (file.fileLength() > maxSize) {
+        callback(jsonError("File too large (max 2MB)"));
+        return;
+    }
+
+    // Validate image magic bytes
+    auto validation = validateImageMagicBytes(file.fileData(), file.fileLength(), true);
+    if (!validation.valid) {
+        callback(jsonError("Invalid image file. Only JPEG, PNG, GIF, WebP, and SVG are allowed."));
+        return;
+    }
+
+    // Create logo directory if it doesn't exist
+    const std::string logoDir = "/app/uploads/logo";
+    try {
+        std::filesystem::create_directories(logoDir);
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Failed to create logo directory: " << e.what();
+        callback(jsonError("Failed to save logo"));
+        return;
+    }
+
+    // Delete old logo if exists
+    try {
+        for (const auto& entry : std::filesystem::directory_iterator(logoDir)) {
+            std::filesystem::remove(entry.path());
+        }
+    } catch (...) {
+        // Ignore errors when deleting old logo
+    }
+
+    // Save new logo with timestamp to bust cache
+    std::string filename = "site_logo_" + std::to_string(std::time(nullptr)) + validation.extension;
+    std::string fullPath = logoDir + "/" + filename;
+    std::string webPath = "/uploads/logo/" + filename;
+
+    try {
+        std::ofstream ofs(fullPath, std::ios::binary);
+        if (!ofs) {
+            callback(jsonError("Failed to save logo file"));
+            return;
+        }
+        ofs.write(file.fileData(), file.fileLength());
+        ofs.close();
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Failed to write logo file: " << e.what();
+        callback(jsonError("Failed to save logo"));
+        return;
+    }
+
+    // Update database with logo path (use UPSERT in case row doesn't exist)
+    auto dbClient = app().getDbClient();
+    *dbClient << "INSERT INTO site_settings (setting_key, setting_value) VALUES ('logo_path', $1) "
+                 "ON CONFLICT (setting_key) DO UPDATE SET setting_value = $1, updated_at = CURRENT_TIMESTAMP"
+              << webPath
+              >> [callback, webPath](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["logoPath"] = webPath;
+                  resp["message"] = "Logo uploaded successfully";
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "update logo path", "Failed to save logo");
+}
+
+void AdminController::getPublicSiteSettings(const HttpRequestPtr &,
+                                            std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Public endpoint - no auth required
+    // SECURITY FIX #30: Only expose safe public settings, filter sensitive ones (e.g., hide censored_words)
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT setting_key, setting_value FROM site_settings"
+              >> [callback](const Result& r) {
+                  // Whitelist of publicly-safe settings
+                  static const std::unordered_set<std::string> publicKeys = {
+                      "site_title", "logo_path", "logo_display_mode"
+                  };
+
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  for (const auto& row : r) {
+                      std::string key = row["setting_key"].as<std::string>();
+                      // Only include whitelisted public keys
+                      if (publicKeys.find(key) != publicKeys.end()) {
+                          std::string value = row["setting_value"].isNull() ? "" : row["setting_value"].as<std::string>();
+                          resp["settings"][key] = value;
+                      }
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get site settings: " << e.base().what();
+                  // Return defaults on error
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["settings"]["site_title"] = "Stream";
+                  resp["settings"]["logo_path"] = "";
+                  resp["settings"]["logo_display_mode"] = "text";
+                  callback(jsonResp(resp));
+              };
+}
+
+void AdminController::getCensoredWords(const HttpRequestPtr &,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Internal endpoint for chat service - no auth required (Docker internal network)
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT setting_value FROM site_settings WHERE setting_key = 'censored_words'"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  if (!r.empty() && !r[0]["setting_value"].isNull()) {
+                      resp["censored_words"] = r[0]["setting_value"].as<std::string>();
+                  } else {
+                      resp["censored_words"] = "";
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get censored words: " << e.base().what();
+                  callback(jsonError("Failed to retrieve censored words", k500InternalServerError));
+              };
+}
+
+void AdminController::uploadDefaultAvatars(const HttpRequestPtr &req,
+                                           std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    MultiPartParser parser;
+    if (parser.parse(req) != 0) {
+        callback(jsonError("Invalid multipart form data"));
+        return;
+    }
+
+    auto files = parser.getFiles();
+    if (files.empty()) {
+        callback(jsonError("No files uploaded"));
+        return;
+    }
+
+    // Create avatars directory if it doesn't exist
+    std::string avatarsDir = "/data/uploads/avatars";
+    std::filesystem::create_directories(avatarsDir);
+
+    Json::Value uploaded(Json::arrayValue);
+    int successCount = 0;
+    auto dbClient = app().getDbClient();
+
+    for (auto& file : files) {
+        const char* fileData = file.fileData();
+        size_t fileLen = file.fileLength();
+
+        // Check file size limit (500KB max for default avatars)
+        if (fileLen > 500 * 1024) {
+            LOG_WARN << "Rejected oversized file: " << file.getFileName() << " (" << fileLen << " bytes)";
+            continue;
+        }
+
+        // Validate magic bytes (SVG disabled for security - prevents XSS)
+        auto validation = validateImageMagicBytes(fileData, fileLen, false);
+        if (!validation.valid) {
+            LOG_WARN << "Rejected file with invalid magic bytes: " << file.getFileName();
+            continue;
+        }
+
+        // Generate unique filename
+        std::string timestamp = std::to_string(std::time(nullptr));
+        std::string randomStr = std::to_string(rand() % 100000);
+        std::string filename = "avatar_" + timestamp + "_" + randomStr + validation.extension;
+        std::string fullPath = avatarsDir + "/" + filename;
+
+        // Write file
+        std::ofstream outFile(fullPath, std::ios::binary);
+        if (!outFile) {
+            LOG_ERROR << "Failed to create file: " << fullPath;
+            continue;
+        }
+        outFile.write(fileData, fileLen);
+        outFile.close();
+
+        std::string dbPath = "/uploads/avatars/" + filename;
+
+        // Insert into database synchronously (blocking for simplicity in loop)
+        try {
+            auto result = dbClient->execSqlSync(
+                "INSERT INTO default_avatars (file_path, is_active) VALUES ($1, true) RETURNING id",
+                dbPath
+            );
+            if (!result.empty()) {
+                Json::Value avatarInfo;
+                avatarInfo["id"] = result[0]["id"].as<int64_t>();
+                avatarInfo["filePath"] = dbPath;
+                uploaded.append(avatarInfo);
+                successCount++;
+            }
+        } catch (const DrogonDbException& e) {
+            LOG_ERROR << "Failed to insert default avatar: " << e.base().what();
+            // Clean up file on db error
+            std::filesystem::remove(fullPath);
+        }
+    }
+
+    Json::Value resp;
+    resp["success"] = successCount > 0;
+    resp["uploaded"] = uploaded;
+    resp["count"] = successCount;
+    callback(jsonResp(resp));
+}
+
+void AdminController::getDefaultAvatars(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, file_path, is_active, created_at FROM default_avatars ORDER BY created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["avatars"] = Json::arrayValue;
+
+                  for (const auto& row : r) {
+                      Json::Value avatar;
+                      avatar["id"] = row["id"].as<int64_t>();
+                      avatar["filePath"] = row["file_path"].as<std::string>();
+                      avatar["isActive"] = row["is_active"].as<bool>();
+                      avatar["createdAt"] = row["created_at"].as<std::string>();
+                      resp["avatars"].append(avatar);
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get default avatars", "Failed to load default avatars");
+}
+
+void AdminController::deleteDefaultAvatar(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &avatarId) {
+    auto user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(avatarId);
+    } catch (...) {
+        callback(jsonError("Invalid avatar ID"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    // First get the file path
+    *dbClient << "SELECT file_path FROM default_avatars WHERE id = $1"
+              << id
+              >> [callback, id, dbClient](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Avatar not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+
+                  // Delete from database
+                  *dbClient << "DELETE FROM default_avatars WHERE id = $1"
+                            << id
+                            >> [callback, filePath](const Result&) {
+                                // Delete file from filesystem
+                                std::string fullPath = "/data" + filePath;
+                                std::filesystem::remove(fullPath);
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Avatar deleted";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete default avatar", "Failed to delete avatar");
+              }
+              >> DB_ERROR_MSG(callback, "find default avatar", "Failed to find avatar");
+}
+
+void AdminController::getRandomDefaultAvatar(const HttpRequestPtr &,
+                                             std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Public endpoint - returns a random active default avatar for guests
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT file_path FROM default_avatars WHERE is_active = true ORDER BY RANDOM() LIMIT 1"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  if (!r.empty()) {
+                      resp["avatarUrl"] = r[0]["file_path"].as<std::string>();
+                  } else {
+                      resp["avatarUrl"] = Json::nullValue;
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get random default avatar: " << e.base().what();
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["avatarUrl"] = Json::nullValue;
+                  callback(jsonResp(resp));
+              };
+}
+
+void AdminController::trackStickerUsage(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Internal endpoint for chat-service - no auth required (Docker internal network)
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr || !(*jsonPtr).isMember("stickers")) {
+        callback(jsonError("Invalid request: missing stickers array"));
+        return;
+    }
+
+    const auto& stickers = (*jsonPtr)["stickers"];
+    if (!stickers.isArray() || stickers.empty()) {
+        Json::Value resp;
+        resp["success"] = true;
+        resp["updated"] = 0;
+        callback(jsonResp(resp));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    int updateCount = 0;
+    static constexpr int MAX_STICKERS_PER_REQUEST = 50;
+
+    // Increment usage_count for each sticker name (limited to prevent abuse)
+    for (const auto& stickerName : stickers) {
+        if (updateCount >= MAX_STICKERS_PER_REQUEST) break;
+        if (!stickerName.isString()) continue;
+        std::string name = stickerName.asString();
+        updateCount++;
+
+        *dbClient << "UPDATE stickers SET usage_count = COALESCE(usage_count, 0) + 1 "
+                     "WHERE LOWER(name) = LOWER($1) AND is_active = true"
+                  << name
+                  >> [name](const Result&) {
+                      LOG_DEBUG << "Incremented usage count for sticker: " << name;
+                  }
+                  >> [name](const DrogonDbException& e) {
+                      LOG_WARN << "Failed to increment sticker usage for " << name
+                               << ": " << e.base().what();
+                  };
+    }
+
+    Json::Value resp;
+    resp["success"] = true;
+    resp["updated"] = updateCount;
+    callback(jsonResp(resp));
+}
+
+void AdminController::getStickerStats(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Public endpoint - returns top stickers by usage count
+    std::string limitParam = req->getParameter("limit");
+    int limit = 50;
+    if (!limitParam.empty()) {
+        try {
+            limit = std::min(100, std::max(1, std::stoi(limitParam)));
+        } catch (...) {
+            limit = 50;
+        }
+    }
+
+    auto dbClient = app().getDbClient();
+    // Build query with limit embedded (already validated to be 1-100)
+    std::string query = "SELECT id, name, file_path, COALESCE(usage_count, 0) as usage_count "
+                        "FROM stickers WHERE is_active = true AND COALESCE(usage_count, 0) > 0 "
+                        "ORDER BY usage_count DESC LIMIT " + std::to_string(limit);
+    *dbClient << query
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["stickers"] = Json::arrayValue;
+
+                  int64_t totalUsage = 0;
+                  for (const auto& row : r) {
+                      Json::Value sticker;
+                      sticker["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      sticker["name"] = row["name"].as<std::string>();
+                      sticker["filePath"] = row["file_path"].as<std::string>();
+                      int64_t count = row["usage_count"].as<int64_t>();
+                      sticker["usageCount"] = static_cast<Json::Int64>(count);
+                      totalUsage += count;
+                      resp["stickers"].append(sticker);
+                  }
+
+                  resp["totalUsage"] = static_cast<Json::Int64>(totalUsage);
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get sticker stats: " << e.base().what();
+                  callback(jsonError("Failed to retrieve sticker statistics", k500InternalServerError));
+              };
+}
+
+void AdminController::downloadAllStickers(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Get all active stickers with their names and file paths
+    *dbClient << "SELECT id, name, file_path FROM stickers WHERE is_active = true ORDER BY name ASC"
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("No stickers to download", k404NotFound));
+                      return;
+                  }
+
+                  // Generate unique temp filename for ZIP
+                  std::string tempZipPath = "/tmp/stickers_" + drogon::utils::getUuid() + ".zip";
+
+                  int zipError = 0;
+                  zip_t* archive = zip_open(tempZipPath.c_str(), ZIP_CREATE | ZIP_TRUNCATE, &zipError);
+
+                  if (!archive) {
+                      LOG_ERROR << "Failed to create ZIP archive: error code " << zipError;
+                      callback(jsonError("Failed to create archive"));
+                      return;
+                  }
+
+                  int addedCount = 0;
+                  std::unordered_set<std::string> usedNames; // Track names to handle duplicates
+
+                  for (const auto& row : r) {
+                      std::string stickerName = row["name"].as<std::string>();
+                      std::string filePath = row["file_path"].as<std::string>();
+
+                      // Convert web path to filesystem path
+                      // file_path is like "/uploads/stickers/uuid.ext"
+                      std::string fullPath = "." + filePath; // becomes "./uploads/stickers/uuid.ext"
+
+                      // Check if file exists
+                      if (!std::filesystem::exists(fullPath)) {
+                          LOG_WARN << "Sticker file not found: " << fullPath;
+                          continue;
+                      }
+
+                      // Get file extension from original file
+                      std::string ext = "";
+                      size_t dotPos = filePath.rfind('.');
+                      if (dotPos != std::string::npos) {
+                          ext = filePath.substr(dotPos); // includes the dot
+                      }
+
+                      // Create sanitized filename: name + extension
+                      // Sanitize name to be filesystem-safe
+                      std::string safeName = stickerName;
+                      for (char& c : safeName) {
+                          if (c == '/' || c == '\\' || c == ':' || c == '*' ||
+                              c == '?' || c == '"' || c == '<' || c == '>' || c == '|') {
+                              c = '_';
+                          }
+                      }
+
+                      std::string zipFilename = safeName + ext;
+
+                      // Handle duplicate names by appending a number
+                      if (usedNames.count(zipFilename)) {
+                          int counter = 2;
+                          while (usedNames.count(safeName + "_" + std::to_string(counter) + ext)) {
+                              counter++;
+                          }
+                          zipFilename = safeName + "_" + std::to_string(counter) + ext;
+                      }
+                      usedNames.insert(zipFilename);
+
+                      // Add file to archive
+                      zip_source_t* source = zip_source_file(archive, fullPath.c_str(), 0, -1);
+                      if (!source) {
+                          LOG_WARN << "Failed to create source for: " << fullPath;
+                          continue;
+                      }
+
+                      if (zip_file_add(archive, zipFilename.c_str(), source, ZIP_FL_OVERWRITE) < 0) {
+                          LOG_WARN << "Failed to add file to ZIP: " << zipFilename;
+                          zip_source_free(source);
+                          continue;
+                      }
+
+                      addedCount++;
+                  }
+
+                  // Close and finalize the archive
+                  if (zip_close(archive) < 0) {
+                      LOG_ERROR << "Failed to close ZIP archive: " << zip_strerror(archive);
+                      std::filesystem::remove(tempZipPath);
+                      callback(jsonError("Failed to finalize archive"));
+                      return;
+                  }
+
+                  if (addedCount == 0) {
+                      std::filesystem::remove(tempZipPath);
+                      callback(jsonError("No sticker files could be added to archive"));
+                      return;
+                  }
+
+                  // Generate timestamp for filename
+                  auto now = std::time(nullptr);
+                  char timestamp[20];
+                  std::strftime(timestamp, sizeof(timestamp), "%Y%m%d_%H%M%S", std::localtime(&now));
+
+                  // Read the file into memory
+                  std::ifstream file(tempZipPath, std::ios::binary);
+                  if (!file) {
+                      std::filesystem::remove(tempZipPath);
+                      callback(jsonError("Failed to read archive"));
+                      return;
+                  }
+
+                  std::vector<char> buffer((std::istreambuf_iterator<char>(file)),
+                                           std::istreambuf_iterator<char>());
+                  file.close();
+
+                  // Delete temp file now that we have it in memory
+                  std::filesystem::remove(tempZipPath);
+
+                  // Create response with binary data
+                  auto resp = HttpResponse::newHttpResponse();
+                  resp->setStatusCode(k200OK);
+                  resp->setContentTypeCode(CT_CUSTOM);
+                  resp->addHeader("Content-Type", "application/zip");
+                  resp->addHeader("Content-Disposition",
+                      "attachment; filename=\"stickers_" + std::string(timestamp) + ".zip\"");
+                  resp->setBody(std::string(buffer.begin(), buffer.end()));
+
+                  LOG_INFO << "Stickers ZIP download: " << addedCount << " stickers";
+                  callback(resp);
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get stickers for download: " << e.base().what();
+                  callback(jsonError("Failed to get stickers", k500InternalServerError));
+              };
+}
+
+// SSL Certificate Management
+
+void AdminController::getSSLSettings(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT domain, acme_email, certificate_status, certificate_expiry, "
+                 "last_renewal_attempt, last_renewal_error, auto_renewal_enabled, updated_at "
+                 "FROM ssl_settings WHERE id = 1"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+
+                  if (r.empty()) {
+                      // Return defaults if no settings exist
+                      resp["domain"] = "";
+                      resp["acmeEmail"] = "";
+                      resp["certificateStatus"] = "none";
+                      resp["certificateExpiry"] = Json::nullValue;
+                      resp["lastRenewalAttempt"] = Json::nullValue;
+                      resp["lastRenewalError"] = Json::nullValue;
+                      resp["autoRenewalEnabled"] = true;
+                  } else {
+                      const auto& row = r[0];
+                      resp["domain"] = row["domain"].isNull() ? "" : row["domain"].as<std::string>();
+                      resp["acmeEmail"] = row["acme_email"].isNull() ? "" : row["acme_email"].as<std::string>();
+                      resp["certificateStatus"] = row["certificate_status"].as<std::string>();
+
+                      if (!row["certificate_expiry"].isNull()) {
+                          resp["certificateExpiry"] = row["certificate_expiry"].as<std::string>();
+                      } else {
+                          resp["certificateExpiry"] = Json::nullValue;
+                      }
+
+                      if (!row["last_renewal_attempt"].isNull()) {
+                          resp["lastRenewalAttempt"] = row["last_renewal_attempt"].as<std::string>();
+                      } else {
+                          resp["lastRenewalAttempt"] = Json::nullValue;
+                      }
+
+                      if (!row["last_renewal_error"].isNull()) {
+                          resp["lastRenewalError"] = row["last_renewal_error"].as<std::string>();
+                      } else {
+                          resp["lastRenewalError"] = Json::nullValue;
+                      }
+
+                      resp["autoRenewalEnabled"] = row["auto_renewal_enabled"].as<bool>();
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get SSL settings: " << e.base().what();
+                  callback(jsonError("Failed to get SSL settings", k500InternalServerError));
+              };
+}
+
+void AdminController::updateSSLSettings(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    std::string domain = (*jsonPtr).get("domain", "").asString();
+    std::string acmeEmail = (*jsonPtr).get("acmeEmail", "").asString();
+    bool autoRenewalEnabled = (*jsonPtr).get("autoRenewalEnabled", true).asBool();
+
+    // Basic domain validation
+    if (!domain.empty()) {
+        // Check for valid domain format (simple check)
+        if (domain.find(' ') != std::string::npos || domain.find('/') != std::string::npos) {
+            callback(jsonError("Invalid domain format"));
+            return;
+        }
+    }
+
+    // Basic email validation
+    if (!acmeEmail.empty()) {
+        if (acmeEmail.find('@') == std::string::npos) {
+            callback(jsonError("Invalid email format"));
+            return;
+        }
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Upsert SSL settings
+    *dbClient << "INSERT INTO ssl_settings (id, domain, acme_email, auto_renewal_enabled, updated_at) "
+                 "VALUES (1, $1, $2, $3, CURRENT_TIMESTAMP) "
+                 "ON CONFLICT (id) DO UPDATE SET "
+                 "domain = EXCLUDED.domain, "
+                 "acme_email = EXCLUDED.acme_email, "
+                 "auto_renewal_enabled = EXCLUDED.auto_renewal_enabled, "
+                 "updated_at = CURRENT_TIMESTAMP"
+              << domain << acmeEmail << autoRenewalEnabled
+              >> [callback, domain, acmeEmail, autoRenewalEnabled](const Result&) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["domain"] = domain;
+                  resp["acmeEmail"] = acmeEmail;
+                  resp["autoRenewalEnabled"] = autoRenewalEnabled;
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to update SSL settings: " << e.base().what();
+                  callback(jsonError("Failed to update SSL settings", k500InternalServerError));
+              };
+}
+
+void AdminController::requestCertificate(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // First get the current settings
+    *dbClient << "SELECT domain, acme_email, certificate_status FROM ssl_settings WHERE id = 1"
+              >> [callback, dbClient](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("SSL settings not configured. Please set domain and email first."));
+                      return;
+                  }
+
+                  const auto& row = r[0];
+                  std::string domain = row["domain"].isNull() ? "" : row["domain"].as<std::string>();
+                  std::string email = row["acme_email"].isNull() ? "" : row["acme_email"].as<std::string>();
+                  std::string status = row["certificate_status"].as<std::string>();
+
+                  if (domain.empty()) {
+                      callback(jsonError("Domain not configured"));
+                      return;
+                  }
+
+                  if (email.empty()) {
+                      callback(jsonError("ACME email not configured"));
+                      return;
+                  }
+
+                  if (status == "pending") {
+                      callback(jsonError("Certificate request already in progress"));
+                      return;
+                  }
+
+                  // Write trigger files for certbot
+                  try {
+                      std::filesystem::create_directories("/etc/letsencrypt");
+
+                      std::ofstream domainFile("/etc/letsencrypt/domain");
+                      domainFile << domain;
+                      domainFile.close();
+
+                      std::ofstream emailFile("/etc/letsencrypt/email");
+                      emailFile << email;
+                      emailFile.close();
+
+                      // Create trigger file
+                      std::ofstream triggerFile("/etc/letsencrypt/request_cert");
+                      triggerFile << "1";
+                      triggerFile.close();
+
+                      LOG_INFO << "Certificate request triggered for domain: " << domain;
+                  } catch (const std::exception& e) {
+                      LOG_ERROR << "Failed to write certbot trigger files: " << e.what();
+                      callback(jsonError("Failed to initiate certificate request"));
+                      return;
+                  }
+
+                  // Update status to pending
+                  *dbClient << "UPDATE ssl_settings SET certificate_status = 'pending', "
+                               "last_renewal_attempt = CURRENT_TIMESTAMP, "
+                               "last_renewal_error = NULL, "
+                               "updated_at = CURRENT_TIMESTAMP WHERE id = 1"
+                            >> [callback, domain](const Result&) {
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Certificate request initiated for " + domain;
+                                resp["status"] = "pending";
+                                callback(jsonResp(resp));
+                            }
+                            >> [callback](const DrogonDbException& e) {
+                                LOG_ERROR << "Failed to update SSL status: " << e.base().what();
+                                callback(jsonError("Certificate request initiated but status update failed"));
+                            };
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get SSL settings: " << e.base().what();
+                  callback(jsonError("Failed to get SSL settings", k500InternalServerError));
+              };
+}
+
+void AdminController::getSSLStatus(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0 || !user.isAdmin) {
+        callback(jsonError("Unauthorized", k403Forbidden));
+        return;
+    }
+
+    // Check status file from certbot container
+    std::string certStatus = "unknown";
+    try {
+        std::ifstream statusFile("/etc/letsencrypt/status");
+        if (statusFile) {
+            std::getline(statusFile, certStatus);
+            statusFile.close();
+        }
+    } catch (...) {
+        // Ignore file read errors
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Update database status if certbot has completed
+    if (certStatus == "active" || certStatus == "error") {
+        std::string newStatus = certStatus;
+        std::string errorMsg = "";
+
+        if (certStatus == "error") {
+            try {
+                std::ifstream errorFile("/etc/letsencrypt/error");
+                if (errorFile) {
+                    std::getline(errorFile, errorMsg);
+                    errorFile.close();
+                }
+            } catch (...) {}
+        }
+
+        // Check certificate expiry if active
+        std::string expiry = "";
+        if (certStatus == "active") {
+            // Try to read certificate expiry from OpenSSL
+            // For now, we'll set a placeholder - actual expiry can be read from cert
+            // In production, use: openssl x509 -enddate -noout -in /etc/letsencrypt/live/domain/cert.pem
+        }
+
+        *dbClient << "UPDATE ssl_settings SET certificate_status = $1, "
+                     "last_renewal_error = CASE WHEN $2 = '' THEN NULL ELSE $2 END, "
+                     "updated_at = CURRENT_TIMESTAMP WHERE id = 1"
+                  << newStatus << errorMsg
+                  >> [](const Result&) {}
+                  >> [](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update SSL status in DB: " << e.base().what();
+                  };
+    }
+
+    // Return current status from database
+    *dbClient << "SELECT domain, certificate_status, certificate_expiry, "
+                 "last_renewal_attempt, last_renewal_error FROM ssl_settings WHERE id = 1"
+              >> [callback, certStatus](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["certbotStatus"] = certStatus;
+
+                  if (r.empty()) {
+                      resp["configured"] = false;
+                  } else {
+                      resp["configured"] = true;
+                      const auto& row = r[0];
+                      resp["domain"] = row["domain"].isNull() ? "" : row["domain"].as<std::string>();
+                      resp["status"] = row["certificate_status"].as<std::string>();
+
+                      if (!row["certificate_expiry"].isNull()) {
+                          resp["expiry"] = row["certificate_expiry"].as<std::string>();
+                      }
+
+                      if (!row["last_renewal_attempt"].isNull()) {
+                          resp["lastAttempt"] = row["last_renewal_attempt"].as<std::string>();
+                      }
+
+                      if (!row["last_renewal_error"].isNull()) {
+                          resp["lastError"] = row["last_renewal_error"].as<std::string>();
+                      }
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get SSL status: " << e.base().what();
+                  callback(jsonError("Failed to get SSL status", k500InternalServerError));
               };
 }
\ No newline at end of file
diff --git a/backend/src/controllers/AdminController.h b/backend/src/controllers/AdminController.h
index 7fb5f42..454d2c9 100644
--- a/backend/src/controllers/AdminController.h
+++ b/backend/src/controllers/AdminController.h
@@ -12,6 +12,67 @@ public:
     ADD_METHOD_TO(AdminController::disconnectStream, "/api/admin/streams/{1}/disconnect", Post);
     ADD_METHOD_TO(AdminController::promoteToStreamer, "/api/admin/users/{1}/promote", Post);
     ADD_METHOD_TO(AdminController::demoteFromStreamer, "/api/admin/users/{1}/demote", Post);
+    ADD_METHOD_TO(AdminController::promoteToRestreamer, "/api/admin/users/{1}/promote-restreamer", Post);
+    ADD_METHOD_TO(AdminController::demoteFromRestreamer, "/api/admin/users/{1}/demote-restreamer", Post);
+    ADD_METHOD_TO(AdminController::promoteToBot, "/api/admin/users/{1}/promote-bot", Post);
+    ADD_METHOD_TO(AdminController::demoteFromBot, "/api/admin/users/{1}/demote-bot", Post);
+    ADD_METHOD_TO(AdminController::getAllBotApiKeys, "/api/admin/bot-keys", Get);
+    ADD_METHOD_TO(AdminController::deleteBotApiKey, "/api/admin/bot-keys/{1}", Delete);
+    ADD_METHOD_TO(AdminController::uploadStickers, "/api/admin/stickers/upload", Post);
+    ADD_METHOD_TO(AdminController::getStickers, "/api/admin/stickers", Get);
+    ADD_METHOD_TO(AdminController::deleteSticker, "/api/admin/stickers/{1}", Delete);
+    ADD_METHOD_TO(AdminController::renameSticker, "/api/admin/stickers/{1}/rename", Put);
+    ADD_METHOD_TO(AdminController::promoteToStickerCreator, "/api/admin/users/{1}/promote-sticker-creator", Post);
+    ADD_METHOD_TO(AdminController::demoteFromStickerCreator, "/api/admin/users/{1}/demote-sticker-creator", Post);
+    ADD_METHOD_TO(AdminController::promoteToUploader, "/api/admin/users/{1}/promote-uploader", Post);
+    ADD_METHOD_TO(AdminController::demoteFromUploader, "/api/admin/users/{1}/demote-uploader", Post);
+    ADD_METHOD_TO(AdminController::promoteToTexter, "/api/admin/users/{1}/promote-texter", Post);
+    ADD_METHOD_TO(AdminController::demoteFromTexter, "/api/admin/users/{1}/demote-texter", Post);
+    ADD_METHOD_TO(AdminController::promoteToWatchCreator, "/api/admin/users/{1}/promote-watch-creator", Post);
+    ADD_METHOD_TO(AdminController::demoteFromWatchCreator, "/api/admin/users/{1}/demote-watch-creator", Post);
+    ADD_METHOD_TO(AdminController::promoteToModerator, "/api/admin/users/{1}/promote-moderator", Post);
+    ADD_METHOD_TO(AdminController::demoteFromModerator, "/api/admin/users/{1}/demote-moderator", Post);
+    ADD_METHOD_TO(AdminController::getStickerSubmissions, "/api/admin/sticker-submissions", Get);
+    ADD_METHOD_TO(AdminController::approveStickerSubmission, "/api/admin/sticker-submissions/{1}/approve", Post);
+    ADD_METHOD_TO(AdminController::denyStickerSubmission, "/api/admin/sticker-submissions/{1}/deny", Post);
+    ADD_METHOD_TO(AdminController::uploadHonkSound, "/api/admin/honks/upload", Post);
+    ADD_METHOD_TO(AdminController::getHonkSounds, "/api/admin/honks", Get);
+    ADD_METHOD_TO(AdminController::deleteHonkSound, "/api/admin/honks/{1}", Delete);
+    ADD_METHOD_TO(AdminController::setActiveHonkSound, "/api/admin/honks/{1}/activate", Post);
+    ADD_METHOD_TO(AdminController::getActiveHonkSound, "/api/honk/active", Get);
+    ADD_METHOD_TO(AdminController::getChatSettings, "/api/admin/settings/chat", Get);
+    ADD_METHOD_TO(AdminController::updateChatSettings, "/api/admin/settings/chat", Put);
+    ADD_METHOD_TO(AdminController::getRealms, "/api/admin/realms", Get);
+    ADD_METHOD_TO(AdminController::deleteRealm, "/api/admin/realms/{1}", Delete);
+    ADD_METHOD_TO(AdminController::setViewerMultiplier, "/api/admin/realms/{1}/viewer-multiplier", Post);
+    ADD_METHOD_TO(AdminController::deleteUser, "/api/admin/users/{1}", Delete);
+    ADD_METHOD_TO(AdminController::disableUser, "/api/admin/users/{1}/disable", Post);
+    ADD_METHOD_TO(AdminController::enableUser, "/api/admin/users/{1}/enable", Post);
+    ADD_METHOD_TO(AdminController::uberbanUser, "/api/admin/users/{1}/uberban", Post);
+    ADD_METHOD_TO(AdminController::incrementReferrals, "/api/admin/users/{1}/increment-referrals", Post);
+    ADD_METHOD_TO(AdminController::getVideos, "/api/admin/videos", Get);
+    ADD_METHOD_TO(AdminController::deleteVideo, "/api/admin/videos/{1}", Delete);
+    ADD_METHOD_TO(AdminController::getAudios, "/api/admin/audios", Get);
+    ADD_METHOD_TO(AdminController::deleteAudio, "/api/admin/audios/{1}", Delete);
+    ADD_METHOD_TO(AdminController::getEbooks, "/api/admin/ebooks", Get);
+    ADD_METHOD_TO(AdminController::deleteEbook, "/api/admin/ebooks/{1}", Delete);
+    ADD_METHOD_TO(AdminController::getSiteSettings, "/api/admin/settings/site", Get);
+    ADD_METHOD_TO(AdminController::updateSiteSettings, "/api/admin/settings/site", Put);
+    ADD_METHOD_TO(AdminController::uploadSiteLogo, "/api/admin/settings/site/logo", Post);
+    ADD_METHOD_TO(AdminController::getPublicSiteSettings, "/api/settings/site", Get);
+    ADD_METHOD_TO(AdminController::getCensoredWords, "/api/internal/censored-words", Get);
+    ADD_METHOD_TO(AdminController::uploadDefaultAvatars, "/api/admin/default-avatars/upload", Post);
+    ADD_METHOD_TO(AdminController::getDefaultAvatars, "/api/admin/default-avatars", Get);
+    ADD_METHOD_TO(AdminController::deleteDefaultAvatar, "/api/admin/default-avatars/{1}", Delete);
+    ADD_METHOD_TO(AdminController::getRandomDefaultAvatar, "/api/default-avatar/random", Get);
+    ADD_METHOD_TO(AdminController::trackStickerUsage, "/api/internal/stickers/track-usage", Post);
+    ADD_METHOD_TO(AdminController::getStickerStats, "/api/stats/stickers", Get);
+    ADD_METHOD_TO(AdminController::downloadAllStickers, "/api/admin/stickers/download-all", Get);
+    // SSL Certificate Management
+    ADD_METHOD_TO(AdminController::getSSLSettings, "/api/admin/settings/ssl", Get);
+    ADD_METHOD_TO(AdminController::updateSSLSettings, "/api/admin/settings/ssl", Put);
+    ADD_METHOD_TO(AdminController::requestCertificate, "/api/admin/ssl/request", Post);
+    ADD_METHOD_TO(AdminController::getSSLStatus, "/api/admin/ssl/status", Get);
     METHOD_LIST_END
     
     void getUsers(const HttpRequestPtr &req,
@@ -32,6 +93,216 @@ public:
                            std::function<void(const HttpResponsePtr &)> &&callback,
                            const std::string &userId);
 
-private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
+    void promoteToRestreamer(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &userId);
+
+    void demoteFromRestreamer(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback,
+                             const std::string &userId);
+
+    void promoteToBot(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &userId);
+
+    void demoteFromBot(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &userId);
+
+    void getAllBotApiKeys(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteBotApiKey(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &keyId);
+
+    void uploadStickers(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getStickers(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteSticker(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &stickerId);
+
+    void renameSticker(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &stickerId);
+
+    void promoteToStickerCreator(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &userId);
+
+    void demoteFromStickerCreator(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &userId);
+
+    void promoteToUploader(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback,
+                          const std::string &userId);
+
+    void demoteFromUploader(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &userId);
+
+    void promoteToTexter(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &userId);
+
+    void demoteFromTexter(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback,
+                         const std::string &userId);
+
+    void promoteToWatchCreator(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback,
+                              const std::string &userId);
+
+    void demoteFromWatchCreator(const HttpRequestPtr &req,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &userId);
+
+    void promoteToModerator(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &userId);
+
+    void demoteFromModerator(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &userId);
+
+    void getStickerSubmissions(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void approveStickerSubmission(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &submissionId);
+
+    void denyStickerSubmission(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback,
+                              const std::string &submissionId);
+
+    void uploadHonkSound(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getHonkSounds(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteHonkSound(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &honkId);
+
+    void setActiveHonkSound(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &honkId);
+
+    void getActiveHonkSound(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getChatSettings(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateChatSettings(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getRealms(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteRealm(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &realmId);
+
+    void setViewerMultiplier(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback,
+                             const std::string &realmId);
+
+    void deleteUser(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &userId);
+
+    void disableUser(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &userId);
+
+    void enableUser(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &userId);
+
+    void uberbanUser(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &userId);
+
+    void incrementReferrals(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &userId);
+
+    void getVideos(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteVideo(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &videoId);
+
+    void getAudios(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteAudio(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &audioId);
+
+    void getEbooks(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteEbook(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &ebookId);
+
+    void getSiteSettings(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateSiteSettings(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadSiteLogo(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getPublicSiteSettings(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getCensoredWords(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadDefaultAvatars(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getDefaultAvatars(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteDefaultAvatar(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &avatarId);
+
+    void getRandomDefaultAvatar(const HttpRequestPtr &req,
+                               std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void trackStickerUsage(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getStickerStats(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void downloadAllStickers(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback);
+
+    // SSL Certificate Management
+    void getSSLSettings(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateSSLSettings(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void requestCertificate(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getSSLStatus(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
 };
\ No newline at end of file
diff --git a/backend/src/controllers/AudioController.cpp b/backend/src/controllers/AudioController.cpp
new file mode 100644
index 0000000..56f6fb0
--- /dev/null
+++ b/backend/src/controllers/AudioController.cpp
@@ -0,0 +1,1051 @@
+#include "AudioController.h"
+#include "../services/DatabaseService.h"
+#include "../services/RedisHelper.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include "../common/FileUtils.h"
+#include "../common/FileValidation.h"
+#include <drogon/utils/Utilities.h>
+#include <drogon/Cookie.h>
+#include <random>
+#include <sstream>
+#include <iomanip>
+#include <fstream>
+#include <filesystem>
+#include <cstdlib>
+#include <array>
+#include <thread>
+#include <unistd.h>
+#include <sys/wait.h>
+#include <fcntl.h>
+
+using namespace drogon::orm;
+
+namespace {
+    // Get audio duration in seconds using ffprobe (safe version)
+    int getAudioDuration(const std::string& audioPath) {
+        if (!isPathSafe(audioPath, "/app/uploads")) {
+            LOG_ERROR << "Unsafe audio path rejected: " << audioPath;
+            return 0;
+        }
+
+        std::vector<std::string> args = {
+            "/usr/bin/ffprobe", "-v", "error",
+            "-show_entries", "format=duration",
+            "-of", "default=noprint_wrappers=1:nokey=1",
+            audioPath
+        };
+
+        std::string output = execCommandSafe(args);
+        try {
+            return static_cast<int>(std::stof(output));
+        } catch (...) {
+            return 0;
+        }
+    }
+
+    // Get audio bitrate in bits per second using ffprobe (safe version)
+    int getAudioBitrate(const std::string& audioPath) {
+        if (!isPathSafe(audioPath, "/app/uploads")) {
+            LOG_ERROR << "Unsafe audio path rejected: " << audioPath;
+            return 0;
+        }
+
+        std::vector<std::string> args = {
+            "/usr/bin/ffprobe", "-v", "error",
+            "-show_entries", "format=bit_rate",
+            "-of", "default=noprint_wrappers=1:nokey=1",
+            audioPath
+        };
+
+        std::string output = execCommandSafe(args);
+        try {
+            return static_cast<int>(std::stoll(output));  // Store in bps (bits per second)
+        } catch (...) {
+            return 0;
+        }
+    }
+
+    // Mark audio as failed in database
+    void markAudioFailed(int64_t audioId) {
+        auto dbClient = app().getDbClient();
+        *dbClient << "UPDATE audio_files SET status = 'failed' WHERE id = $1"
+                  << audioId
+                  >> [audioId](const Result&) {
+                      LOG_WARN << "Audio " << audioId << " marked as failed";
+                  }
+                  >> [audioId](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to mark audio " << audioId << " as failed: " << e.base().what();
+                  };
+    }
+
+    // Process audio metadata asynchronously
+    void processAudioMetadata(int64_t audioId, const std::string& audioFullPath, const std::string& format) {
+        std::thread([audioId, audioFullPath, format]() {
+            try {
+                int duration = getAudioDuration(audioFullPath);
+                int bitrate = getAudioBitrate(audioFullPath);
+
+                // If ffprobe failed to extract metadata, mark as failed
+                if (duration == 0 && bitrate == 0) {
+                    LOG_WARN << "Audio " << audioId << " metadata extraction returned no data";
+                    markAudioFailed(audioId);
+                    return;
+                }
+
+                auto dbClient = app().getDbClient();
+                *dbClient << "UPDATE audio_files SET duration_seconds = $1, bitrate = $2, format = $3, status = 'ready' WHERE id = $4"
+                          << duration << bitrate << format << audioId
+                          >> [audioId](const Result&) {
+                              LOG_INFO << "Audio " << audioId << " metadata processed successfully";
+                          }
+                          >> [audioId](const DrogonDbException& e) {
+                              LOG_ERROR << "Failed to update audio " << audioId << " metadata: " << e.base().what();
+                              markAudioFailed(audioId);
+                          };
+            } catch (const std::exception& e) {
+                LOG_ERROR << "Exception processing metadata for audio " << audioId << ": " << e.what();
+                markAudioFailed(audioId);
+            }
+        }).detach();
+    }
+}
+
+void AudioController::getAllAudio(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    int page = 1;
+    int limit = 20;
+
+    auto pageParam = req->getParameter("page");
+    auto limitParam = req->getParameter("limit");
+
+    if (!pageParam.empty()) {
+        try { page = std::stoi(pageParam); } catch (...) {}
+    }
+    if (!limitParam.empty()) {
+        try { limit = std::min(std::stoi(limitParam), 50); } catch (...) {}
+    }
+
+    int offset = (page - 1) * limit;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                 "a.duration_seconds, a.format, a.bitrate, a.play_count, a.created_at, a.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM audio_files a "
+                 "JOIN users u ON a.user_id = u.id "
+                 "JOIN realms r ON a.realm_id = r.id "
+                 "WHERE a.is_public = true AND a.status = 'ready' "
+                 "ORDER BY a.created_at DESC "
+                 "LIMIT $1 OFFSET $2"
+              << static_cast<int64_t>(limit) << static_cast<int64_t>(offset)
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value audioFiles(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value audio;
+                      audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      audio["title"] = row["title"].as<std::string>();
+                      audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      audio["filePath"] = row["file_path"].as<std::string>();
+                      audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                      audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                      audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                      audio["playCount"] = row["play_count"].as<int>();
+                      audio["createdAt"] = row["created_at"].as<std::string>();
+                      audio["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      audio["username"] = row["username"].as<std::string>();
+                      audio["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      audio["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      audio["realmName"] = row["realm_name"].as<std::string>();
+                      audioFiles.append(audio);
+                  }
+
+                  resp["audio"] = audioFiles;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get audio");
+}
+
+void AudioController::getLatestAudio(const HttpRequestPtr &,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                 "a.duration_seconds, a.format, a.bitrate, a.play_count, a.created_at, a.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM audio_files a "
+                 "JOIN users u ON a.user_id = u.id "
+                 "JOIN realms r ON a.realm_id = r.id "
+                 "WHERE a.is_public = true AND a.status = 'ready' "
+                 "ORDER BY a.created_at DESC "
+                 "LIMIT 5"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value audioFiles(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value audio;
+                      audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      audio["title"] = row["title"].as<std::string>();
+                      audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      audio["filePath"] = row["file_path"].as<std::string>();
+                      audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                      audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                      audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                      audio["playCount"] = row["play_count"].as<int>();
+                      audio["createdAt"] = row["created_at"].as<std::string>();
+                      audio["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      audio["username"] = row["username"].as<std::string>();
+                      audio["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      audio["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      audio["realmName"] = row["realm_name"].as<std::string>();
+                      audioFiles.append(audio);
+                  }
+
+                  resp["audio"] = audioFiles;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get latest audio");
+}
+
+void AudioController::getAudio(const HttpRequestPtr &,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &audioId) {
+    int64_t id;
+    try {
+        id = std::stoll(audioId);
+    } catch (...) {
+        callback(jsonError("Invalid audio ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                 "a.duration_seconds, a.file_size_bytes, a.format, a.bitrate, "
+                 "a.play_count, a.is_public, a.status, a.created_at, a.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM audio_files a "
+                 "JOIN users u ON a.user_id = u.id "
+                 "JOIN realms r ON a.realm_id = r.id "
+                 "WHERE a.id = $1 AND a.status = 'ready'"
+              << id
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Audio not found", k404NotFound));
+                      return;
+                  }
+
+                  const auto& row = r[0];
+
+                  if (!row["is_public"].as<bool>()) {
+                      callback(jsonError("Audio not found", k404NotFound));
+                      return;
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  auto& audio = resp["audio"];
+                  audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                  audio["title"] = row["title"].as<std::string>();
+                  audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                  audio["filePath"] = row["file_path"].as<std::string>();
+                  audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                  audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                  audio["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                  audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                  audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                  audio["playCount"] = row["play_count"].as<int>();
+                  audio["createdAt"] = row["created_at"].as<std::string>();
+                  audio["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                  audio["username"] = row["username"].as<std::string>();
+                  audio["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                  audio["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                  audio["realmName"] = row["realm_name"].as<std::string>();
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get audio");
+}
+
+void AudioController::getRealmAudio(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &realmId) {
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    // Optional pagination (backwards compatible - no params = all results, but capped at 500)
+    int page = 1;
+    int limit = 500;  // Default max to prevent huge responses
+
+    auto pageParam = req->getParameter("page");
+    auto limitParam = req->getParameter("limit");
+
+    if (!pageParam.empty()) {
+        try { page = std::max(1, std::stoi(pageParam)); } catch (...) {}
+    }
+    if (!limitParam.empty()) {
+        try { limit = std::min(std::max(1, std::stoi(limitParam)), 500); } catch (...) {}
+    }
+
+    int offset = (page - 1) * limit;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.id, r.name, r.description, r.realm_type, r.title_color, r.created_at, "
+                 "u.id as user_id, u.username, u.avatar_url "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "WHERE r.id = $1 AND r.is_active = true AND r.realm_type = 'audio'"
+              << id
+              >> [callback, dbClient, id, limit, offset](const Result& realmResult) {
+                  if (realmResult.empty()) {
+                      callback(jsonError("Audio realm not found", k404NotFound));
+                      return;
+                  }
+
+                  *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                               "a.duration_seconds, a.format, a.bitrate, a.play_count, a.created_at "
+                               "FROM audio_files a "
+                               "WHERE a.realm_id = $1 AND a.is_public = true AND a.status = 'ready' "
+                               "ORDER BY a.created_at DESC "
+                               "LIMIT $2 OFFSET $3"
+                            << id << static_cast<int64_t>(limit) << static_cast<int64_t>(offset)
+                            >> [callback, realmResult](const Result& r) {
+                                Json::Value resp;
+                                resp["success"] = true;
+
+                                auto& realm = resp["realm"];
+                                realm["id"] = static_cast<Json::Int64>(realmResult[0]["id"].as<int64_t>());
+                                realm["name"] = realmResult[0]["name"].as<std::string>();
+                                realm["description"] = realmResult[0]["description"].isNull() ? "" : realmResult[0]["description"].as<std::string>();
+                                realm["titleColor"] = realmResult[0]["title_color"].isNull() ? "#ffffff" : realmResult[0]["title_color"].as<std::string>();
+                                realm["createdAt"] = realmResult[0]["created_at"].as<std::string>();
+                                realm["userId"] = static_cast<Json::Int64>(realmResult[0]["user_id"].as<int64_t>());
+                                realm["username"] = realmResult[0]["username"].as<std::string>();
+                                realm["avatarUrl"] = realmResult[0]["avatar_url"].isNull() ? "" : realmResult[0]["avatar_url"].as<std::string>();
+
+                                Json::Value audioFiles(Json::arrayValue);
+                                for (const auto& row : r) {
+                                    Json::Value audio;
+                                    audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                    audio["title"] = row["title"].as<std::string>();
+                                    audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                                    audio["filePath"] = row["file_path"].as<std::string>();
+                                    audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                                    audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                                    audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                                    audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                                    audio["playCount"] = row["play_count"].as<int>();
+                                    audio["createdAt"] = row["created_at"].as<std::string>();
+                                    audioFiles.append(audio);
+                                }
+
+                                resp["audio"] = audioFiles;
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR(callback, "get realm audio");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void AudioController::getRealmAudioByName(const HttpRequestPtr &req,
+                                           std::function<void(const HttpResponsePtr &)> &&callback,
+                                           const std::string &realmName) {
+    if (realmName.empty()) {
+        callback(jsonError("Realm name is required", k400BadRequest));
+        return;
+    }
+
+    // Optional pagination
+    int page = 1;
+    int limit = 500;
+
+    auto pageParam = req->getParameter("page");
+    auto limitParam = req->getParameter("limit");
+
+    if (!pageParam.empty()) {
+        try { page = std::max(1, std::stoi(pageParam)); } catch (...) {}
+    }
+    if (!limitParam.empty()) {
+        try { limit = std::min(std::max(1, std::stoi(limitParam)), 500); } catch (...) {}
+    }
+
+    int offset = (page - 1) * limit;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.id, r.name, r.description, r.realm_type, r.title_color, r.created_at, "
+                 "u.id as user_id, u.username, u.avatar_url "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "WHERE LOWER(r.name) = LOWER($1) AND r.is_active = true AND r.realm_type = 'audio'"
+              << realmName
+              >> [callback, dbClient, limit, offset](const Result& realmResult) {
+                  if (realmResult.empty()) {
+                      callback(jsonError("Audio realm not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t realmId = realmResult[0]["id"].as<int64_t>();
+
+                  *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                               "a.duration_seconds, a.format, a.bitrate, a.play_count, a.created_at "
+                               "FROM audio_files a "
+                               "WHERE a.realm_id = $1 AND a.is_public = true AND a.status = 'ready' "
+                               "ORDER BY a.created_at DESC "
+                               "LIMIT $2 OFFSET $3"
+                            << realmId << static_cast<int64_t>(limit) << static_cast<int64_t>(offset)
+                            >> [callback, realmResult](const Result& r) {
+                                Json::Value resp;
+                                resp["success"] = true;
+
+                                auto& realm = resp["realm"];
+                                realm["id"] = static_cast<Json::Int64>(realmResult[0]["id"].as<int64_t>());
+                                realm["name"] = realmResult[0]["name"].as<std::string>();
+                                realm["description"] = realmResult[0]["description"].isNull() ? "" : realmResult[0]["description"].as<std::string>();
+                                realm["titleColor"] = realmResult[0]["title_color"].isNull() ? "#ffffff" : realmResult[0]["title_color"].as<std::string>();
+                                realm["createdAt"] = realmResult[0]["created_at"].as<std::string>();
+                                realm["userId"] = static_cast<Json::Int64>(realmResult[0]["user_id"].as<int64_t>());
+                                realm["username"] = realmResult[0]["username"].as<std::string>();
+                                realm["avatarUrl"] = realmResult[0]["avatar_url"].isNull() ? "" : realmResult[0]["avatar_url"].as<std::string>();
+
+                                Json::Value audioFiles(Json::arrayValue);
+                                for (const auto& row : r) {
+                                    Json::Value audio;
+                                    audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                    audio["title"] = row["title"].as<std::string>();
+                                    audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                                    audio["filePath"] = row["file_path"].as<std::string>();
+                                    audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                                    audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                                    audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                                    audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                                    audio["playCount"] = row["play_count"].as<int>();
+                                    audio["createdAt"] = row["created_at"].as<std::string>();
+                                    audioFiles.append(audio);
+                                }
+
+                                resp["audio"] = audioFiles;
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR(callback, "get realm audio by name");
+              }
+              >> DB_ERROR(callback, "get realm by name");
+}
+
+void AudioController::incrementPlayCount(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &audioId) {
+    int64_t id;
+    try {
+        id = std::stoll(audioId);
+    } catch (...) {
+        callback(jsonError("Invalid audio ID", k400BadRequest));
+        return;
+    }
+
+    // Rate limit: 1 play count per audio per IP per 30 seconds
+    std::string clientIp = req->getPeerAddr().toIp();
+    std::string rateLimitKey = "playcount:" + audioId + ":" + clientIp;
+
+    services::RedisHelper::instance().getAsync(rateLimitKey,
+        [callback, id, rateLimitKey](sw::redis::OptionalString existing) {
+            if (existing.has_value()) {
+                // Already counted recently - return success but don't increment
+                Json::Value resp;
+                resp["success"] = true;
+                resp["message"] = "Already counted";
+                callback(jsonResp(resp));
+                return;
+            }
+
+            // Set rate limit key with 30s TTL, then increment DB
+            services::RedisHelper::instance().setexAsync(rateLimitKey, "1", 30,
+                [callback, id](bool) {
+                    auto dbClient = app().getDbClient();
+                    *dbClient << "UPDATE audio_files SET play_count = play_count + 1 "
+                                 "WHERE id = $1 AND is_public = true AND status = 'ready' "
+                                 "RETURNING play_count"
+                              << id
+                              >> [callback](const Result& r) {
+                                  if (r.empty()) {
+                                      callback(jsonError("Audio not found", k404NotFound));
+                                      return;
+                                  }
+
+                                  Json::Value resp;
+                                  resp["success"] = true;
+                                  resp["playCount"] = r[0]["play_count"].as<int>();
+                                  callback(jsonResp(resp));
+                              }
+                              >> DB_ERROR(callback, "increment play count");
+                });
+        });
+}
+
+void AudioController::getMyAudio(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT a.id, a.title, a.description, a.file_path, a.thumbnail_path, "
+                 "a.duration_seconds, a.file_size_bytes, a.format, a.bitrate, "
+                 "a.play_count, a.is_public, a.status, a.created_at, "
+                 "a.realm_id, r.name as realm_name "
+                 "FROM audio_files a "
+                 "JOIN realms r ON a.realm_id = r.id "
+                 "WHERE a.user_id = $1 AND a.status != 'deleted' "
+                 "ORDER BY a.created_at DESC"
+              << user.id
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value audioFiles(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value audio;
+                      audio["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      audio["title"] = row["title"].as<std::string>();
+                      audio["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      audio["filePath"] = row["file_path"].as<std::string>();
+                      audio["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      audio["durationSeconds"] = row["duration_seconds"].as<int>();
+                      audio["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      audio["format"] = row["format"].isNull() ? "" : row["format"].as<std::string>();
+                      audio["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+                      audio["playCount"] = row["play_count"].as<int>();
+                      audio["isPublic"] = row["is_public"].as<bool>();
+                      audio["status"] = row["status"].as<std::string>();
+                      audio["createdAt"] = row["created_at"].as<std::string>();
+                      audio["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      audio["realmName"] = row["realm_name"].as<std::string>();
+                      audioFiles.append(audio);
+                  }
+
+                  resp["audio"] = audioFiles;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user audio");
+}
+
+void AudioController::uploadAudio(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        std::string realmIdStr = parser.getParameter<std::string>("realmId");
+        if (realmIdStr.empty()) {
+            callback(jsonError("Realm ID is required"));
+            return;
+        }
+
+        int64_t realmId;
+        try {
+            realmId = std::stoll(realmIdStr);
+        } catch (...) {
+            callback(jsonError("Invalid realm ID"));
+            return;
+        }
+
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        std::string title = parser.getParameter<std::string>("title");
+        if (title.empty()) {
+            title = "Untitled Audio";
+        }
+        if (title.length() > 255) {
+            title = title.substr(0, 255);
+        }
+
+        std::string description = parser.getParameter<std::string>("description");
+        if (description.length() > 5000) {
+            description = description.substr(0, 5000);
+        }
+
+        // Validate file size (500MB max)
+        const size_t maxSize = 500 * 1024 * 1024;
+        size_t fileSize = file.fileLength();
+        if (fileSize > maxSize) {
+            callback(jsonError("File too large (max 500MB)"));
+            return;
+        }
+
+        if (fileSize == 0) {
+            callback(jsonError("Empty file uploaded"));
+            return;
+        }
+
+        // Validate audio magic bytes
+        auto validation = validateAudioMagicBytes(file.fileData(), fileSize);
+        if (!validation.valid) {
+            LOG_WARN << "Audio upload rejected: invalid audio magic bytes";
+            callback(jsonError("Invalid audio file. Supported formats: MP3, WAV, FLAC, OGG, AAC, M4A."));
+            return;
+        }
+
+        std::string fileExt = validation.extension.substr(1);
+        std::string detectedFormat = validation.detectedType;
+
+        // Write file to disk BEFORE async DB call to avoid copying 500MB into lambda
+        const std::string uploadDir = "/app/uploads/audio";
+        if (!ensureDirectoryExists(uploadDir)) {
+            callback(jsonError("Failed to create upload directory"));
+            return;
+        }
+
+        std::string filename = generateRandomFilename(fileExt);
+        std::string fullPath = uploadDir + "/" + filename;
+
+        while (std::filesystem::exists(fullPath)) {
+            filename = generateRandomFilename(fileExt);
+            fullPath = uploadDir + "/" + filename;
+        }
+
+        try {
+            std::ofstream ofs(fullPath, std::ios::binary);
+            if (!ofs) {
+                LOG_ERROR << "Failed to create file: " << fullPath;
+                callback(jsonError("Failed to save file"));
+                return;
+            }
+
+            ofs.write(file.fileData(), fileSize);
+            ofs.close();
+
+            if (!std::filesystem::exists(fullPath)) {
+                LOG_ERROR << "File was not created: " << fullPath;
+                callback(jsonError("Failed to save file"));
+                return;
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception saving audio file: " << e.what();
+            callback(jsonError("Failed to save file"));
+            return;
+        }
+
+        std::string filePath = "/uploads/audio/" + filename;
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT u.is_uploader, r.id as realm_id, r.realm_type "
+                     "FROM users u "
+                     "LEFT JOIN realms r ON r.user_id = u.id AND r.id = $2 "
+                     "WHERE u.id = $1"
+                  << user.id << realmId
+                  >> [callback, user, dbClient, realmId, title, description, fileSize, fullPath, filePath, detectedFormat](const Result& r) {
+                      if (r.empty() || !r[0]["is_uploader"].as<bool>()) {
+                          std::filesystem::remove(fullPath);  // Clean up file on permission failure
+                          callback(jsonError("You don't have permission to upload audio", k403Forbidden));
+                          return;
+                      }
+
+                      if (r[0]["realm_id"].isNull()) {
+                          std::filesystem::remove(fullPath);
+                          callback(jsonError("Audio realm not found or doesn't belong to you", k404NotFound));
+                          return;
+                      }
+
+                      std::string realmType = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
+                      if (realmType != "audio") {
+                          std::filesystem::remove(fullPath);
+                          callback(jsonError("Can only upload audio to audio realms", k400BadRequest));
+                          return;
+                      }
+
+                      *dbClient << "INSERT INTO audio_files (user_id, realm_id, title, description, file_path, "
+                                   "file_size_bytes, format, status, is_public, duration_seconds, bitrate) "
+                                   "VALUES ($1, $2, $3, $4, $5, $6, $7, 'processing', true, 0, 0) RETURNING id, created_at"
+                                << user.id << realmId << title << description << filePath
+                                << static_cast<int64_t>(fileSize) << detectedFormat
+                                >> [callback, title, filePath, fileSize, realmId, fullPath, detectedFormat](const Result& r2) {
+                                    if (r2.empty()) {
+                                        std::filesystem::remove(fullPath);
+                                        callback(jsonError("Failed to save audio record"));
+                                        return;
+                                    }
+
+                                    int64_t audioId = r2[0]["id"].as<int64_t>();
+
+                                    // Start async metadata extraction
+                                    processAudioMetadata(audioId, fullPath, detectedFormat);
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["audio"]["id"] = static_cast<Json::Int64>(audioId);
+                                    resp["audio"]["realmId"] = static_cast<Json::Int64>(realmId);
+                                    resp["audio"]["title"] = title;
+                                    resp["audio"]["filePath"] = filePath;
+                                    resp["audio"]["fileSizeBytes"] = static_cast<Json::Int64>(fileSize);
+                                    resp["audio"]["status"] = "processing";
+                                    resp["audio"]["createdAt"] = r2[0]["created_at"].as<std::string>();
+                                    callback(jsonResp(resp));
+                                }
+                                >> [callback, fullPath](const DrogonDbException& e) {
+                                    LOG_ERROR << "Failed to insert audio: " << e.base().what();
+                                    std::filesystem::remove(fullPath);
+                                    callback(jsonError("Failed to save audio"));
+                                };
+                  }
+                  >> [callback, fullPath](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to check uploader status: " << e.base().what();
+                      std::filesystem::remove(fullPath);
+                      callback(jsonError("Database error"));
+                  };
+
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadAudio: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void AudioController::updateAudio(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &audioId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(audioId);
+    } catch (...) {
+        callback(jsonError("Invalid audio ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "SELECT id FROM audio_files WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, json, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Audio not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string title, description;
+
+                  if (json->isMember("title")) {
+                      title = (*json)["title"].asString();
+                      if (title.length() > 255) title = title.substr(0, 255);
+                  }
+                  if (json->isMember("description")) {
+                      description = (*json)["description"].asString();
+                      if (description.length() > 5000) description = description.substr(0, 5000);
+                  }
+
+                  if (json->isMember("title") && json->isMember("description")) {
+                      *dbClient << "UPDATE audio_files SET title = $1, description = $2 WHERE id = $3"
+                                << title << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Audio updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update audio", "Failed to update audio");
+                  } else if (json->isMember("title")) {
+                      *dbClient << "UPDATE audio_files SET title = $1 WHERE id = $2"
+                                << title << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Audio updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update audio", "Failed to update audio");
+                  } else if (json->isMember("description")) {
+                      *dbClient << "UPDATE audio_files SET description = $1 WHERE id = $2"
+                                << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Audio updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update audio", "Failed to update audio");
+                  } else {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "No changes to apply";
+                      callback(jsonResp(resp));
+                  }
+              }
+              >> DB_ERROR(callback, "verify audio ownership");
+}
+
+void AudioController::deleteAudio(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &audioId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(audioId);
+    } catch (...) {
+        callback(jsonError("Invalid audio ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "SELECT file_path, thumbnail_path FROM audio_files "
+                 "WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Audio not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string thumbnailPath = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+
+                  *dbClient << "UPDATE audio_files SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, thumbnailPath](const Result&) {
+                                try {
+                                    std::string fullAudioPath = "/app" + filePath;
+                                    if (std::filesystem::exists(fullAudioPath)) {
+                                        std::filesystem::remove(fullAudioPath);
+                                    }
+                                    if (!thumbnailPath.empty()) {
+                                        std::string fullThumbPath = "/app" + thumbnailPath;
+                                        if (std::filesystem::exists(fullThumbPath)) {
+                                            std::filesystem::remove(fullThumbPath);
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete audio files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Audio deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete audio", "Failed to delete audio");
+              }
+              >> DB_ERROR(callback, "get audio for deletion");
+}
+
+void AudioController::uploadThumbnail(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &audioId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t id;
+        try {
+            id = std::stoll(audioId);
+        } catch (...) {
+            callback(jsonError("Invalid audio ID", k400BadRequest));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        // Validate file size (5MB max for thumbnail)
+        const size_t maxSize = 5 * 1024 * 1024;
+        size_t fileSize = file.fileLength();
+        if (fileSize > maxSize) {
+            callback(jsonError("Image too large (max 5MB)"));
+            return;
+        }
+
+        if (fileSize == 0) {
+            callback(jsonError("Empty file uploaded"));
+            return;
+        }
+
+        // Validate image magic bytes
+        auto validation = validateImageMagicBytes(file.fileData(), fileSize);
+        if (!validation.valid) {
+            callback(jsonError("Invalid image file. Supported formats: PNG, JPG, GIF, WebP."));
+            return;
+        }
+
+        std::string fileDataStr(file.fileData(), fileSize);
+        std::string fileExt = validation.extension.substr(1);
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT id, thumbnail_path FROM audio_files WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+                  << id << user.id
+                  >> [callback, dbClient, id, fileDataStr, fileSize, fileExt](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Audio not found or access denied", k404NotFound));
+                          return;
+                      }
+
+                      std::string oldThumbnail = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+
+                      const std::string uploadDir = "/app/uploads/audio/thumbnails";
+                      if (!ensureDirectoryExists(uploadDir)) {
+                          callback(jsonError("Failed to create upload directory"));
+                          return;
+                      }
+
+                      std::string filename = generateRandomFilename(fileExt);
+                      std::string fullPath = uploadDir + "/" + filename;
+
+                      while (std::filesystem::exists(fullPath)) {
+                          filename = generateRandomFilename(fileExt);
+                          fullPath = uploadDir + "/" + filename;
+                      }
+
+                      try {
+                          std::ofstream ofs(fullPath, std::ios::binary);
+                          if (!ofs) {
+                              callback(jsonError("Failed to save file"));
+                              return;
+                          }
+
+                          ofs.write(fileDataStr.data(), fileSize);
+                          ofs.close();
+
+                          std::string thumbnailPath = "/uploads/audio/thumbnails/" + filename;
+
+                          *dbClient << "UPDATE audio_files SET thumbnail_path = $1 WHERE id = $2"
+                                    << thumbnailPath << id
+                                    >> [callback, thumbnailPath, oldThumbnail](const Result&) {
+                                        // Delete old thumbnail if exists
+                                        if (!oldThumbnail.empty()) {
+                                            try {
+                                                std::string oldPath = "/app" + oldThumbnail;
+                                                if (std::filesystem::exists(oldPath)) {
+                                                    std::filesystem::remove(oldPath);
+                                                }
+                                            } catch (...) {}
+                                        }
+
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        resp["thumbnailPath"] = thumbnailPath;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> [callback, fullPath](const DrogonDbException& e) {
+                                        LOG_ERROR << "Failed to update thumbnail: " << e.base().what();
+                                        std::filesystem::remove(fullPath);
+                                        callback(jsonError("Failed to save thumbnail"));
+                                    };
+
+                      } catch (const std::exception& e) {
+                          LOG_ERROR << "Exception saving thumbnail: " << e.what();
+                          callback(jsonError("Failed to save file"));
+                      }
+                  }
+                  >> DB_ERROR(callback, "verify audio ownership for thumbnail");
+
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadThumbnail: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void AudioController::deleteThumbnail(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &audioId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(audioId);
+    } catch (...) {
+        callback(jsonError("Invalid audio ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT thumbnail_path FROM audio_files WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Audio not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string thumbnailPath = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+
+                  if (thumbnailPath.empty()) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "No thumbnail to delete";
+                      callback(jsonResp(resp));
+                      return;
+                  }
+
+                  *dbClient << "UPDATE audio_files SET thumbnail_path = NULL WHERE id = $1"
+                            << id
+                            >> [callback, thumbnailPath](const Result&) {
+                                try {
+                                    std::string fullPath = "/app" + thumbnailPath;
+                                    if (std::filesystem::exists(fullPath)) {
+                                        std::filesystem::remove(fullPath);
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete thumbnail file: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Thumbnail deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete thumbnail", "Failed to delete thumbnail");
+              }
+              >> DB_ERROR(callback, "verify audio ownership for thumbnail deletion");
+}
diff --git a/backend/src/controllers/AudioController.h b/backend/src/controllers/AudioController.h
new file mode 100644
index 0000000..550aae3
--- /dev/null
+++ b/backend/src/controllers/AudioController.h
@@ -0,0 +1,72 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+
+class AudioController : public HttpController<AudioController> {
+public:
+    METHOD_LIST_BEGIN
+    // Public endpoints
+    ADD_METHOD_TO(AudioController::getAllAudio, "/api/audio", Get);
+    ADD_METHOD_TO(AudioController::getLatestAudio, "/api/audio/latest", Get);
+    ADD_METHOD_TO(AudioController::getAudio, "/api/audio/{1}", Get);
+    ADD_METHOD_TO(AudioController::getRealmAudio, "/api/audio/realm/{1}", Get);
+    ADD_METHOD_TO(AudioController::getRealmAudioByName, "/api/audio/realm/name/{1}", Get);
+    ADD_METHOD_TO(AudioController::incrementPlayCount, "/api/audio/{1}/play", Post);
+
+    // Authenticated endpoints
+    ADD_METHOD_TO(AudioController::getMyAudio, "/api/user/audio", Get);
+    ADD_METHOD_TO(AudioController::uploadAudio, "/api/user/audio", Post);
+    ADD_METHOD_TO(AudioController::updateAudio, "/api/audio/{1}", Put);
+    ADD_METHOD_TO(AudioController::deleteAudio, "/api/audio/{1}", Delete);
+    ADD_METHOD_TO(AudioController::uploadThumbnail, "/api/audio/{1}/thumbnail", Post);
+    ADD_METHOD_TO(AudioController::deleteThumbnail, "/api/audio/{1}/thumbnail", Delete);
+    METHOD_LIST_END
+
+    // Public audio listing
+    void getAllAudio(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getLatestAudio(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getAudio(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &audioId);
+
+    void getRealmAudio(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+    void getRealmAudioByName(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback,
+                             const std::string &realmName);
+
+    void incrementPlayCount(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &audioId);
+
+    // Authenticated audio management
+    void getMyAudio(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadAudio(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateAudio(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &audioId);
+
+    void deleteAudio(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &audioId);
+
+    void uploadThumbnail(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback,
+                         const std::string &audioId);
+
+    void deleteThumbnail(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback,
+                         const std::string &audioId);
+};
diff --git a/backend/src/controllers/EbookController.cpp b/backend/src/controllers/EbookController.cpp
new file mode 100644
index 0000000..8927a02
--- /dev/null
+++ b/backend/src/controllers/EbookController.cpp
@@ -0,0 +1,908 @@
+#include "EbookController.h"
+#include "../services/DatabaseService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include "../common/FileUtils.h"
+#include "../common/FileValidation.h"
+#include <drogon/utils/Utilities.h>
+#include <drogon/Cookie.h>
+#include <random>
+#include <sstream>
+#include <iomanip>
+#include <fstream>
+#include <filesystem>
+#include <regex>
+#include <cerrno>
+
+// File size limits
+static constexpr size_t MAX_EBOOK_SIZE = 100 * 1024 * 1024;  // 100MB
+static constexpr size_t MAX_COVER_SIZE = 5 * 1024 * 1024;    // 5MB
+
+using namespace drogon::orm;
+
+void EbookController::getAllEbooks(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    int page = 1;
+    int limit = 20;
+
+    auto pageParam = req->getParameter("page");
+    auto limitParam = req->getParameter("limit");
+
+    if (!pageParam.empty()) {
+        try { page = std::stoi(pageParam); } catch (...) {}
+    }
+    if (!limitParam.empty()) {
+        try { limit = std::min(std::stoi(limitParam), 50); } catch (...) {}
+    }
+
+    int offset = (page - 1) * limit;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.created_at, e.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM ebooks e "
+                 "JOIN users u ON e.user_id = u.id "
+                 "JOIN realms r ON e.realm_id = r.id "
+                 "WHERE e.is_public = true AND e.status = 'ready' "
+                 "ORDER BY e.created_at DESC "
+                 "LIMIT $1 OFFSET $2"
+              << static_cast<int64_t>(limit) << static_cast<int64_t>(offset)
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value ebooks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value ebook;
+                      ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      ebook["title"] = row["title"].as<std::string>();
+                      ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      ebook["filePath"] = row["file_path"].as<std::string>();
+                      ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                      ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                      ebook["readCount"] = row["read_count"].as<int>();
+                      ebook["createdAt"] = row["created_at"].as<std::string>();
+                      ebook["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      ebook["username"] = row["username"].as<std::string>();
+                      ebook["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      ebook["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      ebook["realmName"] = row["realm_name"].as<std::string>();
+                      ebooks.append(ebook);
+                  }
+
+                  resp["ebooks"] = ebooks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get ebooks");
+}
+
+void EbookController::getLatestEbooks(const HttpRequestPtr &,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.created_at, e.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM ebooks e "
+                 "JOIN users u ON e.user_id = u.id "
+                 "JOIN realms r ON e.realm_id = r.id "
+                 "WHERE e.is_public = true AND e.status = 'ready' "
+                 "ORDER BY e.created_at DESC "
+                 "LIMIT 5"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value ebooks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value ebook;
+                      ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      ebook["title"] = row["title"].as<std::string>();
+                      ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      ebook["filePath"] = row["file_path"].as<std::string>();
+                      ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                      ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                      ebook["readCount"] = row["read_count"].as<int>();
+                      ebook["createdAt"] = row["created_at"].as<std::string>();
+                      ebook["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      ebook["username"] = row["username"].as<std::string>();
+                      ebook["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      ebook["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      ebook["realmName"] = row["realm_name"].as<std::string>();
+                      ebooks.append(ebook);
+                  }
+
+                  resp["ebooks"] = ebooks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get latest ebooks");
+}
+
+void EbookController::getEbook(const HttpRequestPtr &,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &ebookId) {
+    int64_t id;
+    try {
+        id = std::stoll(ebookId);
+    } catch (...) {
+        callback(jsonError("Invalid ebook ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.is_public, e.status, "
+                 "e.created_at, e.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM ebooks e "
+                 "JOIN users u ON e.user_id = u.id "
+                 "JOIN realms r ON e.realm_id = r.id "
+                 "WHERE e.id = $1 AND e.status = 'ready'"
+              << id
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found", k404NotFound));
+                      return;
+                  }
+
+                  const auto& row = r[0];
+
+                  if (!row["is_public"].as<bool>()) {
+                      callback(jsonError("Ebook not found", k404NotFound));
+                      return;
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  auto& ebook = resp["ebook"];
+                  ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                  ebook["title"] = row["title"].as<std::string>();
+                  ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                  ebook["filePath"] = row["file_path"].as<std::string>();
+                  ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                  ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                  ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                  ebook["readCount"] = row["read_count"].as<int>();
+                  ebook["createdAt"] = row["created_at"].as<std::string>();
+                  ebook["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                  ebook["username"] = row["username"].as<std::string>();
+                  ebook["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                  ebook["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                  ebook["realmName"] = row["realm_name"].as<std::string>();
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get ebook");
+}
+
+void EbookController::getUserEbooks(const HttpRequestPtr &,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &username) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.created_at, e.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM ebooks e "
+                 "JOIN users u ON e.user_id = u.id "
+                 "JOIN realms r ON e.realm_id = r.id "
+                 "WHERE u.username = $1 AND e.is_public = true AND e.status = 'ready' "
+                 "ORDER BY e.created_at DESC"
+              << username
+              >> [callback, username](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["username"] = username;
+                  Json::Value ebooks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value ebook;
+                      ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      ebook["title"] = row["title"].as<std::string>();
+                      ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      ebook["filePath"] = row["file_path"].as<std::string>();
+                      ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                      ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                      ebook["readCount"] = row["read_count"].as<int>();
+                      ebook["createdAt"] = row["created_at"].as<std::string>();
+                      ebook["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      ebook["realmName"] = row["realm_name"].as<std::string>();
+                      ebooks.append(ebook);
+                  }
+
+                  resp["ebooks"] = ebooks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user ebooks");
+}
+
+void EbookController::getRealmEbooks(const HttpRequestPtr &,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &realmId) {
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    // First get realm info
+    *dbClient << "SELECT r.id, r.name, r.description, r.realm_type, r.title_color, r.created_at, "
+                 "u.id as user_id, u.username, u.avatar_url "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "WHERE r.id = $1 AND r.is_active = true AND r.realm_type = 'ebook'"
+              << id
+              >> [callback, dbClient, id](const Result& realmResult) {
+                  if (realmResult.empty()) {
+                      callback(jsonError("Ebook realm not found", k404NotFound));
+                      return;
+                  }
+
+                  // Get ebooks for this realm
+                  *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                               "e.file_size_bytes, e.chapter_count, e.read_count, e.created_at "
+                               "FROM ebooks e "
+                               "WHERE e.realm_id = $1 AND e.is_public = true AND e.status = 'ready' "
+                               "ORDER BY e.created_at DESC LIMIT 100"
+                            << id
+                            >> [callback, realmResult](const Result& r) {
+                                Json::Value resp;
+                                resp["success"] = true;
+
+                                // Realm info
+                                auto& realm = resp["realm"];
+                                realm["id"] = static_cast<Json::Int64>(realmResult[0]["id"].as<int64_t>());
+                                realm["name"] = realmResult[0]["name"].as<std::string>();
+                                realm["description"] = realmResult[0]["description"].isNull() ? "" : realmResult[0]["description"].as<std::string>();
+                                realm["titleColor"] = realmResult[0]["title_color"].isNull() ? "#ffffff" : realmResult[0]["title_color"].as<std::string>();
+                                realm["createdAt"] = realmResult[0]["created_at"].as<std::string>();
+                                realm["userId"] = static_cast<Json::Int64>(realmResult[0]["user_id"].as<int64_t>());
+                                realm["username"] = realmResult[0]["username"].as<std::string>();
+                                realm["avatarUrl"] = realmResult[0]["avatar_url"].isNull() ? "" : realmResult[0]["avatar_url"].as<std::string>();
+
+                                // Ebooks
+                                Json::Value ebooks(Json::arrayValue);
+                                for (const auto& row : r) {
+                                    Json::Value ebook;
+                                    ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                    ebook["title"] = row["title"].as<std::string>();
+                                    ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                                    ebook["filePath"] = row["file_path"].as<std::string>();
+                                    ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                                    ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                                    ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                                    ebook["readCount"] = row["read_count"].as<int>();
+                                    ebook["createdAt"] = row["created_at"].as<std::string>();
+                                    ebooks.append(ebook);
+                                }
+
+                                resp["ebooks"] = ebooks;
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR(callback, "get realm ebooks");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void EbookController::incrementReadCount(const HttpRequestPtr &,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &ebookId) {
+    int64_t id;
+    try {
+        id = std::stoll(ebookId);
+    } catch (...) {
+        callback(jsonError("Invalid ebook ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE ebooks SET read_count = read_count + 1 "
+                 "WHERE id = $1 AND is_public = true AND status = 'ready' "
+                 "RETURNING read_count"
+              << id
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found", k404NotFound));
+                      return;
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["readCount"] = r[0]["read_count"].as<int>();
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "increment read count");
+}
+
+void EbookController::getMyEbooks(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT e.id, e.title, e.description, e.file_path, e.cover_path, "
+                 "e.file_size_bytes, e.chapter_count, e.read_count, e.is_public, e.status, e.created_at, "
+                 "e.realm_id, r.name as realm_name "
+                 "FROM ebooks e "
+                 "JOIN realms r ON e.realm_id = r.id "
+                 "WHERE e.user_id = $1 AND e.status != 'deleted' "
+                 "ORDER BY e.created_at DESC"
+              << user.id
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value ebooks(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value ebook;
+                      ebook["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      ebook["title"] = row["title"].as<std::string>();
+                      ebook["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      ebook["filePath"] = row["file_path"].as<std::string>();
+                      ebook["coverPath"] = row["cover_path"].isNull() ? "" : row["cover_path"].as<std::string>();
+                      ebook["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      ebook["chapterCount"] = row["chapter_count"].isNull() ? 0 : row["chapter_count"].as<int>();
+                      ebook["readCount"] = row["read_count"].as<int>();
+                      ebook["isPublic"] = row["is_public"].as<bool>();
+                      ebook["status"] = row["status"].as<std::string>();
+                      ebook["createdAt"] = row["created_at"].as<std::string>();
+                      ebook["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      ebook["realmName"] = row["realm_name"].as<std::string>();
+                      ebooks.append(ebook);
+                  }
+
+                  resp["ebooks"] = ebooks;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user ebooks");
+}
+
+void EbookController::uploadEbook(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        // Get realm ID from form data - required
+        std::string realmIdStr = parser.getParameter<std::string>("realmId");
+        if (realmIdStr.empty()) {
+            callback(jsonError("Realm ID is required"));
+            return;
+        }
+
+        int64_t realmId;
+        try {
+            realmId = std::stoll(realmIdStr);
+        } catch (...) {
+            callback(jsonError("Invalid realm ID"));
+            return;
+        }
+
+        // Extract file
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        // Get title from form data - sanitize input
+        std::string title = sanitizeUserInput(parser.getParameter<std::string>("title"), 255);
+        if (title.empty()) {
+            title = "Untitled Ebook";
+        }
+
+        // Get optional description - sanitize input
+        std::string description = sanitizeUserInput(parser.getParameter<std::string>("description"), 5000);
+
+        // Validate file size
+        size_t fileSize = file.fileLength();
+        if (fileSize > MAX_EBOOK_SIZE) {
+            callback(jsonError("File too large (max 100MB)"));
+            return;
+        }
+
+        if (fileSize == 0) {
+            callback(jsonError("Empty file uploaded"));
+            return;
+        }
+
+        // Validate EPUB magic bytes
+        if (!isValidEpub(file.fileData(), fileSize)) {
+            LOG_WARN << "Ebook upload rejected: invalid EPUB file";
+            callback(jsonError("Invalid file. Only EPUB format is allowed."));
+            return;
+        }
+
+        // Copy file data before async call
+        std::string fileDataStr(file.fileData(), fileSize);
+
+        // Check if user has uploader role and the realm exists and belongs to them
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT u.is_uploader, r.id as realm_id, r.realm_type "
+                     "FROM users u "
+                     "LEFT JOIN realms r ON r.user_id = u.id AND r.id = $2 "
+                     "WHERE u.id = $1"
+                  << user.id << realmId
+                  >> [callback, user, dbClient, realmId, title, description, fileDataStr, fileSize](const Result& r) {
+                      if (r.empty() || !r[0]["is_uploader"].as<bool>()) {
+                          callback(jsonError("You don't have permission to upload ebooks", k403Forbidden));
+                          return;
+                      }
+
+                      // Check if realm exists and belongs to user
+                      if (r[0]["realm_id"].isNull()) {
+                          callback(jsonError("Ebook realm not found or doesn't belong to you", k404NotFound));
+                          return;
+                      }
+
+                      // Check if it's an ebook realm
+                      std::string realmType = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
+                      if (realmType != "ebook") {
+                          callback(jsonError("Can only upload ebooks to ebook realms", k400BadRequest));
+                          return;
+                      }
+
+                      // Ensure uploads directory exists
+                      const std::string uploadDir = "/app/uploads/ebooks";
+                      if (!ensureDirectoryExists(uploadDir)) {
+                          callback(jsonError("Failed to create upload directory"));
+                          return;
+                      }
+
+                      // Generate unique filename and create file atomically
+                      // This prevents TOCTOU race conditions
+                      std::string filename;
+                      std::string fullPath;
+                      int maxAttempts = 10;
+
+                      for (int attempt = 0; attempt < maxAttempts; ++attempt) {
+                          filename = generateRandomFilename("epub");
+                          fullPath = uploadDir + "/" + filename;
+
+                          // Try to create file atomically with exclusive access
+                          if (writeFileExclusive(fullPath, fileDataStr.data(), fileSize)) {
+                              break;  // Success
+                          }
+
+                          // If file already exists (EEXIST), try again with new name
+                          if (errno == EEXIST) {
+                              continue;
+                          }
+
+                          // Other error - fail
+                          LOG_ERROR << "Failed to create file: " << fullPath << " errno: " << errno;
+                          callback(jsonError("Failed to save file"));
+                          return;
+                      }
+
+                      // Verify file was created
+                      if (!std::filesystem::exists(fullPath)) {
+                          LOG_ERROR << "File was not created after " << maxAttempts << " attempts";
+                          callback(jsonError("Failed to save file"));
+                          return;
+                      }
+
+                      try {
+
+                          std::string filePath = "/uploads/ebooks/" + filename;
+
+                          // Insert ebook record - status is 'ready' (no server-side processing needed)
+                          *dbClient << "INSERT INTO ebooks (user_id, realm_id, title, description, file_path, "
+                                       "file_size_bytes, status, is_public) "
+                                       "VALUES ($1, $2, $3, $4, $5, $6, 'ready', true) RETURNING id, created_at"
+                                    << user.id << realmId << title << description << filePath
+                                    << static_cast<int64_t>(fileSize)
+                                    >> [callback, title, filePath, fileSize, realmId](const Result& r2) {
+                                        if (r2.empty()) {
+                                            callback(jsonError("Failed to save ebook record"));
+                                            return;
+                                        }
+
+                                        int64_t ebookId = r2[0]["id"].as<int64_t>();
+
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        resp["ebook"]["id"] = static_cast<Json::Int64>(ebookId);
+                                        resp["ebook"]["realmId"] = static_cast<Json::Int64>(realmId);
+                                        resp["ebook"]["title"] = title;
+                                        resp["ebook"]["filePath"] = filePath;
+                                        resp["ebook"]["fileSizeBytes"] = static_cast<Json::Int64>(fileSize);
+                                        resp["ebook"]["status"] = "ready";
+                                        resp["ebook"]["createdAt"] = r2[0]["created_at"].as<std::string>();
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> [callback, fullPath](const DrogonDbException& e) {
+                                        LOG_ERROR << "Failed to insert ebook: " << e.base().what();
+                                        // Clean up file on DB error
+                                        std::filesystem::remove(fullPath);
+                                        callback(jsonError("Failed to save ebook"));
+                                    };
+
+                      } catch (const std::exception& e) {
+                          LOG_ERROR << "Exception saving ebook file: " << e.what();
+                          callback(jsonError("Failed to save file"));
+                      }
+                  }
+                  >> DB_ERROR(callback, "check uploader status");
+
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadEbook: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void EbookController::updateEbook(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &ebookId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(ebookId);
+    } catch (...) {
+        callback(jsonError("Invalid ebook ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify ownership
+    *dbClient << "SELECT id FROM ebooks WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, json, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string title, description;
+
+                  if (json->isMember("title")) {
+                      title = sanitizeUserInput((*json)["title"].asString(), 255);
+                  }
+                  if (json->isMember("description")) {
+                      description = sanitizeUserInput((*json)["description"].asString(), 5000);
+                  }
+
+                  if (json->isMember("title") && json->isMember("description")) {
+                      *dbClient << "UPDATE ebooks SET title = $1, description = $2, updated_at = NOW() WHERE id = $3"
+                                << title << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Ebook updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update ebook", "Failed to update ebook");
+                  } else if (json->isMember("title")) {
+                      *dbClient << "UPDATE ebooks SET title = $1, updated_at = NOW() WHERE id = $2"
+                                << title << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Ebook updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update ebook", "Failed to update ebook");
+                  } else if (json->isMember("description")) {
+                      *dbClient << "UPDATE ebooks SET description = $1, updated_at = NOW() WHERE id = $2"
+                                << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Ebook updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update ebook", "Failed to update ebook");
+                  } else {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "No changes to apply";
+                      callback(jsonResp(resp));
+                  }
+              }
+              >> DB_ERROR(callback, "verify ebook ownership");
+}
+
+void EbookController::deleteEbook(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &ebookId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(ebookId);
+    } catch (...) {
+        callback(jsonError("Invalid ebook ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Get file path and verify ownership
+    *dbClient << "SELECT file_path, cover_path FROM ebooks "
+                 "WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string coverPath = r[0]["cover_path"].isNull() ? "" : r[0]["cover_path"].as<std::string>();
+
+                  // Soft delete by setting status to 'deleted'
+                  *dbClient << "UPDATE ebooks SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, coverPath](const Result&) {
+                                // Delete files from disk with path validation
+                                try {
+                                    std::string fullEbookPath = "/app" + filePath;
+                                    // Validate path is within allowed directory before deletion
+                                    if (isPathSafe(fullEbookPath, "/app/uploads/ebooks")) {
+                                        if (std::filesystem::exists(fullEbookPath)) {
+                                            std::filesystem::remove(fullEbookPath);
+                                        }
+                                    } else {
+                                        LOG_WARN << "Blocked deletion of file outside uploads: " << fullEbookPath;
+                                    }
+                                    if (!coverPath.empty()) {
+                                        std::string fullCoverPath = "/app" + coverPath;
+                                        // Validate cover path as well
+                                        if (isPathSafe(fullCoverPath, "/app/uploads/ebooks")) {
+                                            if (std::filesystem::exists(fullCoverPath)) {
+                                                std::filesystem::remove(fullCoverPath);
+                                            }
+                                        } else {
+                                            LOG_WARN << "Blocked deletion of cover outside uploads: " << fullCoverPath;
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete ebook files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Ebook deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete ebook", "Failed to delete ebook");
+              }
+              >> DB_ERROR(callback, "get ebook for deletion");
+}
+
+void EbookController::uploadCover(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &ebookId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t id;
+        try {
+            id = std::stoll(ebookId);
+        } catch (...) {
+            callback(jsonError("Invalid ebook ID", k400BadRequest));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+        size_t fileSize = file.fileLength();
+
+        // Validate cover file size
+        if (fileSize > MAX_COVER_SIZE) {
+            callback(jsonError("Cover image too large (max 5MB)"));
+            return;
+        }
+
+        if (fileSize == 0) {
+            callback(jsonError("Empty file uploaded"));
+            return;
+        }
+
+        // Validate image type
+        auto validation = validateImageMagicBytes(file.fileData(), fileSize);
+        if (!validation.valid) {
+            callback(jsonError("Invalid image file. Only JPG, PNG, and WebP are allowed."));
+            return;
+        }
+
+        std::string fileDataStr(file.fileData(), fileSize);
+        std::string fileExt = validation.extension;
+
+        auto dbClient = app().getDbClient();
+
+        // Verify ownership
+        *dbClient << "SELECT id, cover_path FROM ebooks WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+                  << id << user.id
+                  >> [callback, dbClient, id, fileDataStr, fileSize, fileExt](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Ebook not found or access denied", k404NotFound));
+                          return;
+                      }
+
+                      std::string oldCoverPath = r[0]["cover_path"].isNull() ? "" : r[0]["cover_path"].as<std::string>();
+
+                      // Ensure covers directory exists
+                      const std::string coverDir = "/app/uploads/ebooks/covers";
+                      if (!ensureDirectoryExists(coverDir)) {
+                          callback(jsonError("Failed to create upload directory"));
+                          return;
+                      }
+
+                      // Generate unique filename and create file atomically
+                      std::string filename;
+                      std::string fullPath;
+                      int maxAttempts = 10;
+
+                      for (int attempt = 0; attempt < maxAttempts; ++attempt) {
+                          filename = generateRandomFilename(fileExt);
+                          fullPath = coverDir + "/" + filename;
+
+                          if (writeFileExclusive(fullPath, fileDataStr.data(), fileSize)) {
+                              break;
+                          }
+
+                          if (errno == EEXIST) {
+                              continue;
+                          }
+
+                          callback(jsonError("Failed to save cover"));
+                          return;
+                      }
+
+                      if (!std::filesystem::exists(fullPath)) {
+                          callback(jsonError("Failed to save cover"));
+                          return;
+                      }
+
+                      std::string coverPath = "/uploads/ebooks/covers/" + filename;
+
+                      // Update database
+                      *dbClient << "UPDATE ebooks SET cover_path = $1 WHERE id = $2"
+                                << coverPath << id
+                                >> [callback, coverPath, oldCoverPath](const Result&) {
+                                    // Delete old cover if exists (with path validation)
+                                    if (!oldCoverPath.empty()) {
+                                        try {
+                                            std::string oldFullPath = "/app" + oldCoverPath;
+                                            // Validate path before deletion
+                                            if (isPathSafe(oldFullPath, "/app/uploads/ebooks")) {
+                                                if (std::filesystem::exists(oldFullPath)) {
+                                                    std::filesystem::remove(oldFullPath);
+                                                }
+                                            } else {
+                                                LOG_WARN << "Blocked deletion of old cover outside uploads: " << oldFullPath;
+                                            }
+                                        } catch (...) {}
+                                    }
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["coverPath"] = coverPath;
+                                    callback(jsonResp(resp));
+                                }
+                                >> [callback, fullPath](const DrogonDbException& e) {
+                                    LOG_ERROR << "Failed to update cover path: " << e.base().what();
+                                    std::filesystem::remove(fullPath);
+                                    callback(jsonError("Failed to save cover"));
+                                };
+                  }
+                  >> DB_ERROR(callback, "verify ebook ownership");
+
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadCover: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void EbookController::downloadEbook(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &ebookId) {
+    // Require authentication for downloads
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Please log in to download ebooks", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(ebookId);
+    } catch (...) {
+        callback(jsonError("Invalid ebook ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Get ebook info - only allow download of public, ready ebooks
+    *dbClient << "SELECT title, file_path FROM ebooks WHERE id = $1 AND is_public = true AND status = 'ready'"
+              << id
+              >> [callback, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Ebook not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string title = r[0]["title"].as<std::string>();
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string fullPath = "/app" + filePath;
+
+                  // Validate path is within allowed directory
+                  if (!isPathSafe(fullPath, "/app/uploads/ebooks")) {
+                      LOG_WARN << "Blocked access to file outside uploads: " << fullPath;
+                      callback(jsonError("Ebook file not found", k404NotFound));
+                      return;
+                  }
+
+                  // Check file exists
+                  if (!std::filesystem::exists(fullPath)) {
+                      LOG_ERROR << "Ebook file not found: " << fullPath;
+                      callback(jsonError("Ebook file not found", k404NotFound));
+                      return;
+                  }
+
+                  // Sanitize title for filename (remove special chars)
+                  std::string safeTitle;
+                  for (char c : title) {
+                      if (std::isalnum(c) || c == ' ' || c == '-' || c == '_') {
+                          safeTitle += c;
+                      }
+                  }
+                  if (safeTitle.empty()) safeTitle = "ebook";
+                  if (safeTitle.length() > 100) safeTitle = safeTitle.substr(0, 100);
+
+                  // Use Drogon's file response for efficient streaming
+                  auto resp = HttpResponse::newFileResponse(fullPath, "", CT_CUSTOM);
+                  resp->addHeader("Content-Type", "application/epub+zip");
+                  resp->addHeader("Content-Disposition", "attachment; filename=\"" + safeTitle + ".epub\"");
+                  callback(resp);
+              }
+              >> DB_ERROR(callback, "download ebook");
+}
diff --git a/backend/src/controllers/EbookController.h b/backend/src/controllers/EbookController.h
new file mode 100644
index 0000000..f39c0cb
--- /dev/null
+++ b/backend/src/controllers/EbookController.h
@@ -0,0 +1,72 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+
+class EbookController : public HttpController<EbookController> {
+public:
+    METHOD_LIST_BEGIN
+    // Public endpoints
+    ADD_METHOD_TO(EbookController::getAllEbooks, "/api/ebooks", Get);
+    ADD_METHOD_TO(EbookController::getLatestEbooks, "/api/ebooks/latest", Get);
+    ADD_METHOD_TO(EbookController::getEbook, "/api/ebooks/{1}", Get);
+    ADD_METHOD_TO(EbookController::getUserEbooks, "/api/ebooks/user/{1}", Get);
+    ADD_METHOD_TO(EbookController::getRealmEbooks, "/api/ebooks/realm/{1}", Get);
+    ADD_METHOD_TO(EbookController::incrementReadCount, "/api/ebooks/{1}/read", Post);
+
+    // Authenticated endpoints
+    ADD_METHOD_TO(EbookController::getMyEbooks, "/api/user/ebooks", Get);
+    ADD_METHOD_TO(EbookController::uploadEbook, "/api/user/ebooks", Post);
+    ADD_METHOD_TO(EbookController::updateEbook, "/api/ebooks/{1}", Put);
+    ADD_METHOD_TO(EbookController::deleteEbook, "/api/ebooks/{1}", Delete);
+    ADD_METHOD_TO(EbookController::uploadCover, "/api/ebooks/{1}/cover", Post);
+    ADD_METHOD_TO(EbookController::downloadEbook, "/api/ebooks/{1}/download", Get);
+    METHOD_LIST_END
+
+    // Public ebook listing
+    void getAllEbooks(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getLatestEbooks(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getEbook(const HttpRequestPtr &req,
+                 std::function<void(const HttpResponsePtr &)> &&callback,
+                 const std::string &ebookId);
+
+    void getUserEbooks(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &username);
+
+    void getRealmEbooks(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+    void incrementReadCount(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &ebookId);
+
+    // Authenticated ebook management
+    void getMyEbooks(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadEbook(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateEbook(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &ebookId);
+
+    void deleteEbook(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &ebookId);
+
+    void uploadCover(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &ebookId);
+
+    void downloadEbook(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &ebookId);
+};
diff --git a/backend/src/controllers/ForumController.cpp b/backend/src/controllers/ForumController.cpp
new file mode 100644
index 0000000..f746c8f
--- /dev/null
+++ b/backend/src/controllers/ForumController.cpp
@@ -0,0 +1,1788 @@
+#include "ForumController.h"
+#include "../services/DatabaseService.h"
+#include "../services/CensorService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include <drogon/MultiPart.h>
+#include <regex>
+#include <algorithm>
+#include <cctype>
+#include <filesystem>
+#include <chrono>
+
+using namespace drogon::orm;
+
+namespace {
+    // Generate URL-friendly slug from name
+    std::string generateSlug(const std::string& name) {
+        std::string slug;
+        slug.reserve(name.size());
+        for (char c : name) {
+            if (std::isalnum(static_cast<unsigned char>(c))) {
+                slug += std::tolower(static_cast<unsigned char>(c));
+            } else if (c == ' ' || c == '-' || c == '_') {
+                if (!slug.empty() && slug.back() != '-') {
+                    slug += '-';
+                }
+            }
+        }
+        // Remove trailing dashes
+        while (!slug.empty() && slug.back() == '-') {
+            slug.pop_back();
+        }
+        return slug;
+    }
+}
+
+bool ForumController::isForumModerator(int64_t userId, int64_t forumOwnerId, bool isAdmin) {
+    return isAdmin || userId == forumOwnerId;
+}
+
+// ==================== Forum CRUD ====================
+
+void ForumController::getForums(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT f.id, f.user_id, f.name, f.slug, f.description, f.banner_url, "
+                     "f.banner_position, f.banner_position_x, f.banner_zoom, f.title_color, f.is_active, "
+                     "f.thread_count, f.post_count, f.created_at, f.updated_at, "
+                     "u.username, u.avatar_url, u.user_color, "
+                     "lt.last_post_at, lt.last_thread_title, lt.last_thread_id "
+                     "FROM forums f "
+                     "JOIN users u ON f.user_id = u.id "
+                     "LEFT JOIN LATERAL ("
+                     "  SELECT t.last_post_at, t.title as last_thread_title, t.id as last_thread_id "
+                     "  FROM forum_threads t WHERE t.forum_id = f.id "
+                     "  ORDER BY t.last_post_at DESC NULLS LAST LIMIT 1"
+                     ") lt ON true "
+                     "WHERE f.is_active = true "
+                     "ORDER BY f.created_at DESC"
+                  >> [callback](const Result& r) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["forums"] = Json::Value(Json::arrayValue);
+
+                      for (const auto& row : r) {
+                          Json::Value forum;
+                          forum["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                          forum["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                          forum["name"] = row["name"].as<std::string>();
+                          forum["slug"] = row["slug"].as<std::string>();
+                          forum["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                          forum["bannerUrl"] = row["banner_url"].isNull() ? "" : row["banner_url"].as<std::string>();
+                          forum["bannerPosition"] = row["banner_position"].isNull() ? 50 : row["banner_position"].as<int>();
+                          forum["bannerPositionX"] = row["banner_position_x"].isNull() ? 50 : row["banner_position_x"].as<int>();
+                          forum["bannerZoom"] = row["banner_zoom"].isNull() ? 100 : row["banner_zoom"].as<int>();
+                          forum["titleColor"] = row["title_color"].isNull() ? "#ffffff" : row["title_color"].as<std::string>();
+                          forum["threadCount"] = row["thread_count"].as<int>();
+                          forum["postCount"] = row["post_count"].as<int>();
+                          forum["createdAt"] = row["created_at"].as<std::string>();
+                          forum["lastPostAt"] = row["last_post_at"].isNull() ? "" : row["last_post_at"].as<std::string>();
+                          forum["lastThreadTitle"] = row["last_thread_title"].isNull() ? "" : row["last_thread_title"].as<std::string>();
+                          forum["lastThreadId"] = row["last_thread_id"].isNull() ? 0 : static_cast<Json::Int64>(row["last_thread_id"].as<int64_t>());
+                          forum["username"] = row["username"].as<std::string>();
+                          forum["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                          forum["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                          resp["forums"].append(forum);
+                      }
+
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "get forums");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getForums: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::getForum(const HttpRequestPtr &req,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &forumIdOrSlug) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Try to parse as numeric ID first, otherwise use as slug
+        int64_t fid = 0;
+        bool useNumericId = false;
+        try {
+            fid = std::stoll(forumIdOrSlug);
+            useNumericId = true;
+        } catch (...) {
+            // Not a number, use as slug
+            useNumericId = false;
+        }
+
+        std::string query = "SELECT f.id, f.user_id, f.name, f.slug, f.description, f.banner_url, "
+                           "f.banner_position, f.banner_position_x, f.banner_zoom, f.title_color, f.is_active, "
+                           "f.thread_count, f.post_count, f.created_at, f.updated_at, "
+                           "u.username, u.avatar_url, u.user_color "
+                           "FROM forums f "
+                           "JOIN users u ON f.user_id = u.id "
+                           "WHERE ";
+
+        auto handleForumResult = [callback, user](const Result& r) {
+            if (r.empty()) {
+                callback(jsonError("Forum not found", k404NotFound));
+                return;
+            }
+
+            const auto& row = r[0];
+            Json::Value resp;
+            resp["success"] = true;
+            resp["forum"]["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+            resp["forum"]["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+            resp["forum"]["name"] = row["name"].as<std::string>();
+            resp["forum"]["slug"] = row["slug"].as<std::string>();
+            resp["forum"]["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+            resp["forum"]["bannerUrl"] = row["banner_url"].isNull() ? "" : row["banner_url"].as<std::string>();
+            resp["forum"]["bannerPosition"] = row["banner_position"].isNull() ? 50 : row["banner_position"].as<int>();
+            resp["forum"]["bannerPositionX"] = row["banner_position_x"].isNull() ? 50 : row["banner_position_x"].as<int>();
+            resp["forum"]["bannerZoom"] = row["banner_zoom"].isNull() ? 100 : row["banner_zoom"].as<int>();
+            resp["forum"]["titleColor"] = row["title_color"].isNull() ? "#ffffff" : row["title_color"].as<std::string>();
+            resp["forum"]["threadCount"] = row["thread_count"].as<int>();
+            resp["forum"]["postCount"] = row["post_count"].as<int>();
+            resp["forum"]["createdAt"] = row["created_at"].as<std::string>();
+            resp["forum"]["username"] = row["username"].as<std::string>();
+            resp["forum"]["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+            resp["forum"]["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+            resp["forum"]["isOwner"] = (row["user_id"].as<int64_t>() == user.id);
+            resp["forum"]["canModerate"] = (row["user_id"].as<int64_t>() == user.id || user.isAdmin);
+
+            callback(jsonResp(resp));
+        };
+
+        auto handleError = [callback](const DrogonDbException& e) {
+            LOG_ERROR << "Failed to get forum: " << e.base().what();
+            callback(jsonError("Database error"));
+        };
+
+        if (useNumericId) {
+            *dbClient << query + "f.id = $1"
+                      << fid
+                      >> handleForumResult
+                      >> handleError;
+        } else {
+            *dbClient << query + "f.slug = $1"
+                      << forumIdOrSlug
+                      >> handleForumResult
+                      >> handleError;
+        }
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getForum: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::createForum(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        // Only Texters or Admins can create forums
+        if (!user.isTexter && !user.isAdmin) {
+            callback(jsonError("Only Texters can create forums", k403Forbidden));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("name")) {
+            callback(jsonError("Forum name is required"));
+            return;
+        }
+
+        std::string name = (*json)["name"].asString();
+        std::string description = (*json).isMember("description") ? (*json)["description"].asString() : "";
+        std::string titleColor = (*json).isMember("titleColor") ? (*json)["titleColor"].asString() : "#ffffff";
+
+        // Block forum creation if name contains censored words
+        if (CensorService::getInstance().containsCensoredWords(name)) {
+            callback(jsonError("Forum name contains prohibited content"));
+            return;
+        }
+
+        if (name.empty() || name.length() > 100) {
+            callback(jsonError("Forum name must be between 1 and 100 characters"));
+            return;
+        }
+
+        // Validate title color format (hex color)
+        if (titleColor.length() != 7 || titleColor[0] != '#') {
+            titleColor = "#ffffff";
+        }
+
+        std::string slug = generateSlug(name);
+        if (slug.empty()) {
+            callback(jsonError("Invalid forum name - must contain alphanumeric characters"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "INSERT INTO forums (user_id, name, slug, description, title_color) VALUES ($1, $2, $3, $4, $5) RETURNING id, created_at"
+                  << user.id << name << slug << description << titleColor
+                  >> [callback, name, slug, description, titleColor, user](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Failed to create forum"));
+                          return;
+                      }
+
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["forum"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                      resp["forum"]["userId"] = static_cast<Json::Int64>(user.id);
+                      resp["forum"]["name"] = name;
+                      resp["forum"]["slug"] = slug;
+                      resp["forum"]["description"] = description;
+                      resp["forum"]["titleColor"] = titleColor;
+                      resp["forum"]["threadCount"] = 0;
+                      resp["forum"]["postCount"] = 0;
+                      resp["forum"]["createdAt"] = r[0]["created_at"].as<std::string>();
+                      callback(jsonResp(resp, k201Created));
+                  }
+                  >> [callback](const DrogonDbException& e) {
+                      std::string errMsg = e.base().what();
+                      if (errMsg.find("unique") != std::string::npos || errMsg.find("duplicate") != std::string::npos) {
+                          callback(jsonError("A forum with this name already exists"));
+                      } else {
+                          LOG_ERROR << "Failed to create forum: " << errMsg;
+                          callback(jsonError("Database error"));
+                      }
+                  };
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in createForum: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::updateForum(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        // First check ownership
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, json, fid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to edit this forum", k403Forbidden));
+                          return;
+                      }
+
+                      std::string name = (*json).isMember("name") ? (*json)["name"].asString() : "";
+                      std::string description = (*json).isMember("description") ? (*json)["description"].asString() : "";
+
+                      if (!name.empty()) {
+                          if (name.length() > 100) {
+                              callback(jsonError("Forum name must be 100 characters or less"));
+                              return;
+                          }
+                          std::string slug = generateSlug(name);
+                          *dbClient << "UPDATE forums SET name = $1, slug = $2, description = $3 WHERE id = $4"
+                                    << name << slug << description << fid
+                                    >> [callback](const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR(callback, "update forum");
+                      } else {
+                          *dbClient << "UPDATE forums SET description = $1 WHERE id = $2"
+                                    << description << fid
+                                    >> [callback](const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR(callback, "update forum");
+                      }
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in updateForum: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::deleteForum(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, fid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to delete this forum", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "DELETE FROM forums WHERE id = $1"
+                                << fid
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "delete forum");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deleteForum: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ==================== Thread CRUD ====================
+
+void ForumController::getThreads(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &forumIdOrSlug) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Try to parse as numeric ID first, otherwise use as slug
+        int64_t fid = 0;
+        bool useNumericId = false;
+        try {
+            fid = std::stoll(forumIdOrSlug);
+            useNumericId = true;
+        } catch (...) {
+            useNumericId = false;
+        }
+
+        auto fetchThreads = [callback, dbClient](int64_t forumId) {
+            *dbClient << "SELECT t.id, t.forum_id, t.user_id, t.title, t.content, t.is_pinned, t.is_locked, "
+                         "t.post_count, t.last_post_at, t.created_at, "
+                         "u.username, u.avatar_url, u.user_color, "
+                         "lpu.username as last_post_username "
+                         "FROM forum_threads t "
+                         "JOIN users u ON t.user_id = u.id "
+                         "LEFT JOIN users lpu ON t.last_post_user_id = lpu.id "
+                         "WHERE t.forum_id = $1 "
+                         "ORDER BY t.is_pinned DESC, t.last_post_at DESC"
+                      << forumId
+                      >> [callback](const Result& r) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["threads"] = Json::Value(Json::arrayValue);
+
+                          for (const auto& row : r) {
+                              Json::Value thread;
+                              thread["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                              thread["forumId"] = static_cast<Json::Int64>(row["forum_id"].as<int64_t>());
+                              thread["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                              thread["title"] = row["title"].as<std::string>();
+                              thread["content"] = row["content"].as<std::string>();
+                              thread["isPinned"] = row["is_pinned"].as<bool>();
+                              thread["isLocked"] = row["is_locked"].as<bool>();
+                              thread["postCount"] = row["post_count"].as<int>();
+                              thread["lastPostAt"] = row["last_post_at"].as<std::string>();
+                              thread["createdAt"] = row["created_at"].as<std::string>();
+                              thread["username"] = row["username"].as<std::string>();
+                              thread["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                              thread["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                              thread["lastPostUsername"] = row["last_post_username"].isNull() ? "" : row["last_post_username"].as<std::string>();
+                              resp["threads"].append(thread);
+                          }
+
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR(callback, "get threads");
+        };
+
+        if (useNumericId) {
+            fetchThreads(fid);
+        } else {
+            // Look up forum ID by slug first
+            *dbClient << "SELECT id FROM forums WHERE slug = $1"
+                      << forumIdOrSlug
+                      >> [callback, fetchThreads](const Result& r) {
+                          if (r.empty()) {
+                              callback(jsonError("Forum not found", k404NotFound));
+                              return;
+                          }
+                          fetchThreads(r[0]["id"].as<int64_t>());
+                      }
+                      >> DB_ERROR(callback, "get forum by slug");
+        }
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getThreads: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::getThread(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT t.id, t.forum_id, t.user_id, t.title, t.content, t.is_pinned, t.is_locked, "
+                     "t.post_count, t.last_post_at, t.created_at, "
+                     "u.username, u.avatar_url, u.user_color, "
+                     "f.user_id as forum_owner_id "
+                     "FROM forum_threads t "
+                     "JOIN users u ON t.user_id = u.id "
+                     "JOIN forums f ON t.forum_id = f.id "
+                     "WHERE t.id = $1"
+                  << tid
+                  >> [callback, user](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Thread not found", k404NotFound));
+                          return;
+                      }
+
+                      const auto& row = r[0];
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["thread"]["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      resp["thread"]["forumId"] = static_cast<Json::Int64>(row["forum_id"].as<int64_t>());
+                      resp["thread"]["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      resp["thread"]["title"] = row["title"].as<std::string>();
+                      resp["thread"]["content"] = row["content"].as<std::string>();
+                      resp["thread"]["isPinned"] = row["is_pinned"].as<bool>();
+                      resp["thread"]["isLocked"] = row["is_locked"].as<bool>();
+                      resp["thread"]["postCount"] = row["post_count"].as<int>();
+                      resp["thread"]["lastPostAt"] = row["last_post_at"].as<std::string>();
+                      resp["thread"]["createdAt"] = row["created_at"].as<std::string>();
+                      resp["thread"]["username"] = row["username"].as<std::string>();
+                      resp["thread"]["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      resp["thread"]["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                      resp["thread"]["isOwner"] = (row["user_id"].as<int64_t>() == user.id);
+                      resp["thread"]["canModerate"] = (row["forum_owner_id"].as<int64_t>() == user.id || user.isAdmin);
+
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "get thread");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::createThread(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &forumIdOrSlug) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid = 0;
+        bool useNumericId = false;
+        try {
+            fid = std::stoll(forumIdOrSlug);
+            useNumericId = true;
+        } catch (...) {
+            useNumericId = false;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("title") || !(*json).isMember("content")) {
+            callback(jsonError("Title and content are required"));
+            return;
+        }
+
+        std::string title = (*json)["title"].asString();
+        std::string content = (*json)["content"].asString();
+
+        // Apply censoring to title and content
+        title = CensorService::getInstance().censor(title);
+        content = CensorService::getInstance().censor(content);
+
+        if (title.empty() || title.length() > 255) {
+            callback(jsonError("Title must be between 1 and 255 characters"));
+            return;
+        }
+
+        if (content.empty() || content.length() > 50000) {
+            callback(jsonError("Content must be between 1 and 50000 characters"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        auto createWithForumId = [callback, user, title, content, dbClient](int64_t forumId) {
+            // Check if user is banned from this forum
+            *dbClient << "SELECT id FROM forum_bans WHERE forum_id = $1 AND user_id = $2 AND (expires_at IS NULL OR expires_at > NOW())"
+                      << forumId << user.id
+                      >> [callback, forumId, user, title, content, dbClient](const Result& banResult) {
+                          if (!banResult.empty()) {
+                              callback(jsonError("You are banned from this forum", k403Forbidden));
+                              return;
+                          }
+
+                          // Check forum exists
+                          *dbClient << "SELECT id FROM forums WHERE id = $1 AND is_active = true"
+                                    << forumId
+                                    >> [callback, forumId, user, title, content, dbClient](const Result& forumResult) {
+                                        if (forumResult.empty()) {
+                                            callback(jsonError("Forum not found", k404NotFound));
+                                            return;
+                                        }
+
+                                        // Create thread
+                                        *dbClient << "INSERT INTO forum_threads (forum_id, user_id, title, content, last_post_user_id) "
+                                                     "VALUES ($1, $2, $3, $4, $2) RETURNING id, created_at"
+                                                  << forumId << user.id << title << content
+                                                  >> [callback, forumId, user, title, content, dbClient](const Result& r) {
+                                                      if (r.empty()) {
+                                                          callback(jsonError("Failed to create thread"));
+                                                          return;
+                                                      }
+
+                                                      int64_t threadId = r[0]["id"].as<int64_t>();
+
+                                                      // Update forum thread count
+                                                      *dbClient << "UPDATE forums SET thread_count = thread_count + 1 WHERE id = $1"
+                                                                << forumId
+                                                                >> [](const Result&) {}
+                                                                >> [](const DrogonDbException&) {};
+
+                                                      Json::Value resp;
+                                                      resp["success"] = true;
+                                                      resp["thread"]["id"] = static_cast<Json::Int64>(threadId);
+                                                      resp["thread"]["forumId"] = static_cast<Json::Int64>(forumId);
+                                                      resp["thread"]["userId"] = static_cast<Json::Int64>(user.id);
+                                                      resp["thread"]["title"] = title;
+                                                      resp["thread"]["content"] = content;
+                                                      resp["thread"]["isPinned"] = false;
+                                                      resp["thread"]["isLocked"] = false;
+                                                      resp["thread"]["postCount"] = 0;
+                                                      resp["thread"]["createdAt"] = r[0]["created_at"].as<std::string>();
+                                                      callback(jsonResp(resp, k201Created));
+                                                  }
+                                                  >> DB_ERROR(callback, "create thread");
+                                    }
+                                    >> DB_ERROR(callback, "check forum exists");
+                      }
+                      >> DB_ERROR(callback, "check forum ban");
+        };
+
+        if (useNumericId) {
+            createWithForumId(fid);
+        } else {
+            // Look up forum ID by slug first
+            *dbClient << "SELECT id FROM forums WHERE slug = $1"
+                      << forumIdOrSlug
+                      >> [callback, createWithForumId](const Result& r) {
+                          if (r.empty()) {
+                              callback(jsonError("Forum not found", k404NotFound));
+                              return;
+                          }
+                          createWithForumId(r[0]["id"].as<int64_t>());
+                      }
+                      >> DB_ERROR(callback, "get forum by slug");
+        }
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in createThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::updateThread(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT t.user_id, f.user_id as forum_owner_id FROM forum_threads t "
+                     "JOIN forums f ON t.forum_id = f.id WHERE t.id = $1"
+                  << tid
+                  >> [callback, json, tid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Thread not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t threadOwnerId = r[0]["user_id"].as<int64_t>();
+                      int64_t forumOwnerId = r[0]["forum_owner_id"].as<int64_t>();
+
+                      // Only thread owner can edit content/title
+                      if (threadOwnerId != user.id && forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to edit this thread", k403Forbidden));
+                          return;
+                      }
+
+                      std::string title = (*json).isMember("title") ? (*json)["title"].asString() : "";
+                      std::string content = (*json).isMember("content") ? (*json)["content"].asString() : "";
+
+                      // Apply censoring to title and content
+                      if (!title.empty()) title = CensorService::getInstance().censor(title);
+                      if (!content.empty()) content = CensorService::getInstance().censor(content);
+
+                      if (!title.empty() && title.length() > 255) {
+                          callback(jsonError("Title must be 255 characters or less"));
+                          return;
+                      }
+
+                      if (!content.empty() && content.length() > 50000) {
+                          callback(jsonError("Content must be 50000 characters or less"));
+                          return;
+                      }
+
+                      // Nothing to update
+                      if (title.empty() && content.empty()) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          callback(jsonResp(resp));
+                          return;
+                      }
+
+                      // Use parameterized query for safety
+                      if (!title.empty() && !content.empty()) {
+                          *dbClient << "UPDATE forum_threads SET title = $1, content = $2 WHERE id = $3"
+                                    << title << content << tid
+                                    >> [callback](const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR(callback, "update thread");
+                      } else if (!title.empty()) {
+                          *dbClient << "UPDATE forum_threads SET title = $1 WHERE id = $2"
+                                    << title << tid
+                                    >> [callback](const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR(callback, "update thread");
+                      } else {
+                          *dbClient << "UPDATE forum_threads SET content = $1 WHERE id = $2"
+                                    << content << tid
+                                    >> [callback](const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR(callback, "update thread");
+                      }
+                  }
+                  >> DB_ERROR(callback, "get thread ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in updateThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::deleteThread(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid, tid;
+        try {
+            fid = std::stoll(forumId);
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT t.user_id, t.post_count, f.user_id as forum_owner_id FROM forum_threads t "
+                     "JOIN forums f ON t.forum_id = f.id WHERE t.id = $1"
+                  << tid
+                  >> [callback, fid, tid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Thread not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t threadOwnerId = r[0]["user_id"].as<int64_t>();
+                      int64_t forumOwnerId = r[0]["forum_owner_id"].as<int64_t>();
+                      int postCount = r[0]["post_count"].as<int>();
+
+                      if (threadOwnerId != user.id && forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to delete this thread", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "DELETE FROM forum_threads WHERE id = $1"
+                                << tid
+                                >> [callback, fid, postCount, dbClient](const Result&) {
+                                    // Update forum counts
+                                    *dbClient << "UPDATE forums SET thread_count = thread_count - 1, post_count = post_count - $1 WHERE id = $2"
+                                              << postCount << fid
+                                              >> [](const Result&) {}
+                                              >> [](const DrogonDbException&) {};
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "delete thread");
+                  }
+                  >> DB_ERROR(callback, "get thread ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deleteThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::pinThread(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT t.is_pinned, f.user_id as forum_owner_id FROM forum_threads t "
+                     "JOIN forums f ON t.forum_id = f.id WHERE t.id = $1"
+                  << tid
+                  >> [callback, tid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Thread not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t forumOwnerId = r[0]["forum_owner_id"].as<int64_t>();
+                      if (forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("Only forum owner can pin threads", k403Forbidden));
+                          return;
+                      }
+
+                      bool currentlyPinned = r[0]["is_pinned"].as<bool>();
+                      *dbClient << "UPDATE forum_threads SET is_pinned = $1 WHERE id = $2"
+                                << !currentlyPinned << tid
+                                >> [callback, currentlyPinned](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["isPinned"] = !currentlyPinned;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "pin thread");
+                  }
+                  >> DB_ERROR(callback, "get thread for pin");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in pinThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::lockThread(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT t.is_locked, f.user_id as forum_owner_id FROM forum_threads t "
+                     "JOIN forums f ON t.forum_id = f.id WHERE t.id = $1"
+                  << tid
+                  >> [callback, tid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Thread not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t forumOwnerId = r[0]["forum_owner_id"].as<int64_t>();
+                      if (forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("Only forum owner can lock threads", k403Forbidden));
+                          return;
+                      }
+
+                      bool currentlyLocked = r[0]["is_locked"].as<bool>();
+                      *dbClient << "UPDATE forum_threads SET is_locked = $1 WHERE id = $2"
+                                << !currentlyLocked << tid
+                                >> [callback, currentlyLocked](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["isLocked"] = !currentlyLocked;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "lock thread");
+                  }
+                  >> DB_ERROR(callback, "get thread for lock");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in lockThread: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ==================== Post CRUD ====================
+
+void ForumController::getPosts(const HttpRequestPtr &req,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &forumId, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT p.id, p.thread_id, p.user_id, p.content, p.is_edited, p.edited_at, p.created_at, "
+                     "u.username, u.avatar_url, u.user_color "
+                     "FROM forum_posts p "
+                     "JOIN users u ON p.user_id = u.id "
+                     "WHERE p.thread_id = $1 "
+                     "ORDER BY p.created_at ASC"
+                  << tid
+                  >> [callback](const Result& r) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["posts"] = Json::Value(Json::arrayValue);
+
+                      for (const auto& row : r) {
+                          Json::Value post;
+                          post["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                          post["threadId"] = static_cast<Json::Int64>(row["thread_id"].as<int64_t>());
+                          post["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                          post["content"] = row["content"].as<std::string>();
+                          post["isEdited"] = row["is_edited"].as<bool>();
+                          post["editedAt"] = row["edited_at"].isNull() ? "" : row["edited_at"].as<std::string>();
+                          post["createdAt"] = row["created_at"].as<std::string>();
+                          post["username"] = row["username"].as<std::string>();
+                          post["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                          post["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                          resp["posts"].append(post);
+                      }
+
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "get posts");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getPosts: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::createPost(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &forumIdOrSlug, const std::string &threadId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t tid;
+        try {
+            tid = std::stoll(threadId);
+        } catch (...) {
+            callback(jsonError("Invalid thread ID"));
+            return;
+        }
+
+        // Try to parse forumIdOrSlug as numeric ID
+        int64_t fid = 0;
+        bool useNumericId = false;
+        try {
+            fid = std::stoll(forumIdOrSlug);
+            useNumericId = true;
+        } catch (...) {
+            useNumericId = false;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("content")) {
+            callback(jsonError("Content is required"));
+            return;
+        }
+
+        std::string content = (*json)["content"].asString();
+
+        // Apply censoring to content
+        content = CensorService::getInstance().censor(content);
+
+        if (content.empty() || content.length() > 50000) {
+            callback(jsonError("Content must be between 1 and 50000 characters"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        auto createPostWithForumId = [callback, tid, user, content, dbClient](int64_t forumId) {
+            // Check if user is banned
+            *dbClient << "SELECT id FROM forum_bans WHERE forum_id = $1 AND user_id = $2 AND (expires_at IS NULL OR expires_at > NOW())"
+                      << forumId << user.id
+                      >> [callback, forumId, tid, user, content, dbClient](const Result& banResult) {
+                          if (!banResult.empty()) {
+                              callback(jsonError("You are banned from this forum", k403Forbidden));
+                              return;
+                          }
+
+                          // Check thread exists and not locked
+                          *dbClient << "SELECT t.id, t.is_locked FROM forum_threads t WHERE t.id = $1"
+                                    << tid
+                                    >> [callback, forumId, tid, user, content, dbClient](const Result& threadResult) {
+                                        if (threadResult.empty()) {
+                                            callback(jsonError("Thread not found", k404NotFound));
+                                            return;
+                                        }
+
+                                        if (threadResult[0]["is_locked"].as<bool>()) {
+                                            callback(jsonError("This thread is locked", k403Forbidden));
+                                            return;
+                                        }
+
+                                        // Create post
+                                        *dbClient << "INSERT INTO forum_posts (thread_id, user_id, content) VALUES ($1, $2, $3) RETURNING id, created_at"
+                                                  << tid << user.id << content
+                                                  >> [callback, forumId, tid, user, content, dbClient](const Result& r) {
+                                                      if (r.empty()) {
+                                                          callback(jsonError("Failed to create post"));
+                                                          return;
+                                                      }
+
+                                                      int64_t postId = r[0]["id"].as<int64_t>();
+
+                                                      // Update thread post count and last post info
+                                                      *dbClient << "UPDATE forum_threads SET post_count = post_count + 1, last_post_at = NOW(), last_post_user_id = $1 WHERE id = $2"
+                                                                << user.id << tid
+                                                                >> [](const Result&) {}
+                                                                >> [](const DrogonDbException&) {};
+
+                                                      // Update forum post count
+                                                      *dbClient << "UPDATE forums SET post_count = post_count + 1 WHERE id = $1"
+                                                                << forumId
+                                                                >> [](const Result&) {}
+                                                                >> [](const DrogonDbException&) {};
+
+                                                      Json::Value resp;
+                                                      resp["success"] = true;
+                                                      resp["post"]["id"] = static_cast<Json::Int64>(postId);
+                                                      resp["post"]["threadId"] = static_cast<Json::Int64>(tid);
+                                                      resp["post"]["userId"] = static_cast<Json::Int64>(user.id);
+                                                      resp["post"]["content"] = content;
+                                                      resp["post"]["isEdited"] = false;
+                                                      resp["post"]["createdAt"] = r[0]["created_at"].as<std::string>();
+                                                      callback(jsonResp(resp, k201Created));
+                                                  }
+                                                  >> DB_ERROR(callback, "create post");
+                                    }
+                                    >> DB_ERROR(callback, "check thread exists");
+                      }
+                      >> DB_ERROR(callback, "check forum ban");
+        };
+
+        if (useNumericId) {
+            createPostWithForumId(fid);
+        } else {
+            // Look up forum ID by slug first
+            *dbClient << "SELECT id FROM forums WHERE slug = $1"
+                      << forumIdOrSlug
+                      >> [callback, createPostWithForumId](const Result& r) {
+                          if (r.empty()) {
+                              callback(jsonError("Forum not found", k404NotFound));
+                              return;
+                          }
+                          createPostWithForumId(r[0]["id"].as<int64_t>());
+                      }
+                      >> DB_ERROR(callback, "get forum by slug");
+        }
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in createPost: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::updatePost(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &forumId, const std::string &threadId,
+                                 const std::string &postId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t pid;
+        try {
+            pid = std::stoll(postId);
+        } catch (...) {
+            callback(jsonError("Invalid post ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("content")) {
+            callback(jsonError("Content is required"));
+            return;
+        }
+
+        std::string content = (*json)["content"].asString();
+
+        // Apply censoring to content
+        content = CensorService::getInstance().censor(content);
+
+        if (content.empty() || content.length() > 50000) {
+            callback(jsonError("Content must be between 1 and 50000 characters"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT user_id FROM forum_posts WHERE id = $1"
+                  << pid
+                  >> [callback, pid, user, content, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Post not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t postOwnerId = r[0]["user_id"].as<int64_t>();
+                      if (postOwnerId != user.id) {
+                          callback(jsonError("You can only edit your own posts", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "UPDATE forum_posts SET content = $1, is_edited = true, edited_at = NOW() WHERE id = $2"
+                                << content << pid
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "update post");
+                  }
+                  >> DB_ERROR(callback, "get post ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in updatePost: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::deletePost(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &forumId, const std::string &threadId,
+                                 const std::string &postId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid, tid, pid;
+        try {
+            fid = std::stoll(forumId);
+            tid = std::stoll(threadId);
+            pid = std::stoll(postId);
+        } catch (...) {
+            callback(jsonError("Invalid ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT p.user_id, f.user_id as forum_owner_id FROM forum_posts p "
+                     "JOIN forum_threads t ON p.thread_id = t.id "
+                     "JOIN forums f ON t.forum_id = f.id "
+                     "WHERE p.id = $1"
+                  << pid
+                  >> [callback, fid, tid, pid, user, dbClient](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Post not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t postOwnerId = r[0]["user_id"].as<int64_t>();
+                      int64_t forumOwnerId = r[0]["forum_owner_id"].as<int64_t>();
+
+                      if (postOwnerId != user.id && forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to delete this post", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "DELETE FROM forum_posts WHERE id = $1"
+                                << pid
+                                >> [callback, fid, tid, dbClient](const Result&) {
+                                    // Update thread post count
+                                    *dbClient << "UPDATE forum_threads SET post_count = post_count - 1 WHERE id = $1"
+                                              << tid
+                                              >> [](const Result&) {}
+                                              >> [](const DrogonDbException&) {};
+
+                                    // Update forum post count
+                                    *dbClient << "UPDATE forums SET post_count = post_count - 1 WHERE id = $1"
+                                              << fid
+                                              >> [](const Result&) {}
+                                              >> [](const DrogonDbException&) {};
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "delete post");
+                  }
+                  >> DB_ERROR(callback, "get post ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deletePost: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ==================== Moderation ====================
+
+void ForumController::getBannedUsers(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        // First check if user is forum owner or admin
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, fid, user, dbClient](const Result& forumResult) {
+                      if (forumResult.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t forumOwnerId = forumResult[0]["user_id"].as<int64_t>();
+                      if (forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to view bans", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "SELECT b.id, b.user_id, b.reason, b.expires_at, b.created_at, "
+                                   "u.username, u.avatar_url, u.user_color, "
+                                   "bu.username as banned_by_username "
+                                   "FROM forum_bans b "
+                                   "JOIN users u ON b.user_id = u.id "
+                                   "JOIN users bu ON b.banned_by = bu.id "
+                                   "WHERE b.forum_id = $1 "
+                                   "ORDER BY b.created_at DESC"
+                                << fid
+                                >> [callback](const Result& r) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["bans"] = Json::Value(Json::arrayValue);
+
+                                    for (const auto& row : r) {
+                                        Json::Value ban;
+                                        ban["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                        ban["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                                        ban["username"] = row["username"].as<std::string>();
+                                        ban["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                                        ban["userColor"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                                        ban["reason"] = row["reason"].isNull() ? "" : row["reason"].as<std::string>();
+                                        ban["expiresAt"] = row["expires_at"].isNull() ? "" : row["expires_at"].as<std::string>();
+                                        ban["createdAt"] = row["created_at"].as<std::string>();
+                                        ban["bannedByUsername"] = row["banned_by_username"].as<std::string>();
+                                        resp["bans"].append(ban);
+                                    }
+
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "get bans");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getBannedUsers: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::banUser(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback,
+                              const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("userId")) {
+            callback(jsonError("User ID is required"));
+            return;
+        }
+
+        int64_t targetUserId = (*json)["userId"].asInt64();
+        std::string reason = (*json).isMember("reason") ? (*json)["reason"].asString() : "";
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, fid, targetUserId, reason, user, dbClient](const Result& forumResult) {
+                      if (forumResult.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t forumOwnerId = forumResult[0]["user_id"].as<int64_t>();
+                      if (forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to ban users", k403Forbidden));
+                          return;
+                      }
+
+                      // Can't ban yourself
+                      if (targetUserId == user.id) {
+                          callback(jsonError("You cannot ban yourself"));
+                          return;
+                      }
+
+                      // Can't ban the forum owner
+                      if (targetUserId == forumOwnerId) {
+                          callback(jsonError("Cannot ban the forum owner"));
+                          return;
+                      }
+
+                      *dbClient << "INSERT INTO forum_bans (forum_id, user_id, banned_by, reason) VALUES ($1, $2, $3, $4) "
+                                   "ON CONFLICT (forum_id, user_id) DO UPDATE SET reason = $4, banned_by = $3, created_at = NOW() "
+                                   "RETURNING id"
+                                << fid << targetUserId << user.id << reason
+                                >> [callback](const Result& r) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["banId"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                                    callback(jsonResp(resp, k201Created));
+                                }
+                                >> DB_ERROR(callback, "ban user");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in banUser: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::unbanUser(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &forumId, const std::string &banId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid, bid;
+        try {
+            fid = std::stoll(forumId);
+            bid = std::stoll(banId);
+        } catch (...) {
+            callback(jsonError("Invalid ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, fid, bid, user, dbClient](const Result& forumResult) {
+                      if (forumResult.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t forumOwnerId = forumResult[0]["user_id"].as<int64_t>();
+                      if (forumOwnerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to unban users", k403Forbidden));
+                          return;
+                      }
+
+                      *dbClient << "DELETE FROM forum_bans WHERE id = $1 AND forum_id = $2"
+                                << bid << fid
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "unban user");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in unbanUser: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ==================== Banner Upload ====================
+
+void ForumController::uploadBanner(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        // Parse multipart form data
+        MultiPartParser fileParser;
+        if (fileParser.parse(req) != 0 || fileParser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        auto& file = fileParser.getFiles()[0];
+
+        // Check file extension
+        std::string filename = file.getFileName();
+        std::string ext;
+        auto dotPos = filename.find_last_of('.');
+        if (dotPos != std::string::npos) {
+            ext = filename.substr(dotPos);
+            std::transform(ext.begin(), ext.end(), ext.begin(), ::tolower);
+        }
+        if (ext != ".jpg" && ext != ".jpeg" && ext != ".png" && ext != ".gif" && ext != ".webp") {
+            callback(jsonError("Invalid file type. Only JPEG, PNG, GIF, and WebP are allowed."));
+            return;
+        }
+
+        // Check file size (max 5MB)
+        if (file.fileLength() > 5 * 1024 * 1024) {
+            callback(jsonError("File too large. Maximum size is 5MB."));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Verify forum ownership
+        *dbClient << "SELECT user_id, banner_url FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, dbClient, fid, user, file = std::move(file)](const Result& r) mutable {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to modify this forum", k403Forbidden));
+                          return;
+                      }
+
+                      // Delete old banner if exists
+                      if (!r[0]["banner_url"].isNull()) {
+                          std::string oldPath = r[0]["banner_url"].as<std::string>();
+                          if (!oldPath.empty() && oldPath.find("/uploads/forums/") != std::string::npos) {
+                              std::string fullOldPath = "." + oldPath;
+                              std::remove(fullOldPath.c_str());
+                          }
+                      }
+
+                      // Save new file
+                      std::string uploadDir = "./uploads/forums";
+                      std::filesystem::create_directories(uploadDir);
+
+                      // Generate unique filename
+                      std::string ext = file.getFileName().substr(file.getFileName().find_last_of("."));
+                      std::string newFilename = "forum_" + std::to_string(fid) + "_banner_" +
+                                                std::to_string(std::chrono::system_clock::now().time_since_epoch().count()) + ext;
+                      std::string savePath = uploadDir + "/" + newFilename;
+                      std::string urlPath = "/uploads/forums/" + newFilename;
+
+                      // Save file
+                      file.saveAs(savePath);
+
+                      // Update database
+                      *dbClient << "UPDATE forums SET banner_url = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2"
+                               << urlPath << fid
+                               >> [callback, urlPath](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["bannerUrl"] = urlPath;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR(callback, "update forum banner");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadBanner: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::deleteBanner(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Verify forum ownership and get current banner
+        *dbClient << "SELECT user_id, banner_url FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, dbClient, fid, user](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to modify this forum", k403Forbidden));
+                          return;
+                      }
+
+                      // Delete banner file if exists
+                      if (!r[0]["banner_url"].isNull()) {
+                          std::string oldPath = r[0]["banner_url"].as<std::string>();
+                          if (!oldPath.empty() && oldPath.find("/uploads/forums/") != std::string::npos) {
+                              std::string fullOldPath = "." + oldPath;
+                              std::remove(fullOldPath.c_str());
+                          }
+                      }
+
+                      // Clear banner_url in database
+                      *dbClient << "UPDATE forums SET banner_url = '', updated_at = CURRENT_TIMESTAMP WHERE id = $1"
+                               << fid
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR(callback, "delete forum banner");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deleteBanner: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::updateBannerPosition(const HttpRequestPtr &req,
+                                           std::function<void(const HttpResponsePtr &)> &&callback,
+                                           const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        int bannerPosition = (*json).isMember("bannerPosition") ? (*json)["bannerPosition"].asInt() : 50;
+        int bannerPositionX = (*json).isMember("bannerPositionX") ? (*json)["bannerPositionX"].asInt() : 50;
+        int bannerZoom = (*json).isMember("bannerZoom") ? (*json)["bannerZoom"].asInt() : 100;
+
+        // Clamp values to valid ranges
+        bannerPosition = std::max(0, std::min(100, bannerPosition));
+        bannerPositionX = std::max(0, std::min(100, bannerPositionX));
+        bannerZoom = std::max(100, std::min(200, bannerZoom));
+
+        auto dbClient = app().getDbClient();
+
+        // Verify forum ownership
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, dbClient, fid, user, bannerPosition, bannerPositionX, bannerZoom](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to modify this forum", k403Forbidden));
+                          return;
+                      }
+
+                      // Update banner position
+                      *dbClient << "UPDATE forums SET banner_position = $1, banner_position_x = $2, banner_zoom = $3, updated_at = CURRENT_TIMESTAMP WHERE id = $4"
+                               << bannerPosition << bannerPositionX << bannerZoom << fid
+                               >> [callback, bannerPosition, bannerPositionX, bannerZoom](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["bannerPosition"] = bannerPosition;
+                                   resp["bannerPositionX"] = bannerPositionX;
+                                   resp["bannerZoom"] = bannerZoom;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR(callback, "update banner position");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in updateBannerPosition: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void ForumController::updateTitleColor(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &forumId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t fid;
+        try {
+            fid = std::stoll(forumId);
+        } catch (...) {
+            callback(jsonError("Invalid forum ID"));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("titleColor")) {
+            callback(jsonError("Title color is required"));
+            return;
+        }
+
+        std::string titleColor = (*json)["titleColor"].asString();
+
+        // Validate title color format (hex color)
+        if (titleColor.length() != 7 || titleColor[0] != '#') {
+            callback(jsonError("Invalid color format. Use hex format like #ffffff"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Verify forum ownership
+        *dbClient << "SELECT user_id FROM forums WHERE id = $1"
+                  << fid
+                  >> [callback, dbClient, fid, user, titleColor](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Forum not found", k404NotFound));
+                          return;
+                      }
+
+                      int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                      if (ownerId != user.id && !user.isAdmin) {
+                          callback(jsonError("You don't have permission to modify this forum", k403Forbidden));
+                          return;
+                      }
+
+                      // Update title color
+                      *dbClient << "UPDATE forums SET title_color = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2"
+                               << titleColor << fid
+                               >> [callback, titleColor](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["titleColor"] = titleColor;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR(callback, "update title color");
+                  }
+                  >> DB_ERROR(callback, "check forum ownership");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in updateTitleColor: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
diff --git a/backend/src/controllers/ForumController.h b/backend/src/controllers/ForumController.h
new file mode 100644
index 0000000..057963c
--- /dev/null
+++ b/backend/src/controllers/ForumController.h
@@ -0,0 +1,122 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+
+class ForumController : public HttpController<ForumController> {
+public:
+    METHOD_LIST_BEGIN
+    // Forum CRUD
+    ADD_METHOD_TO(ForumController::getForums, "/api/forums", Get);
+    ADD_METHOD_TO(ForumController::getForum, "/api/forums/{1}", Get);
+    ADD_METHOD_TO(ForumController::createForum, "/api/forums", Post);
+    ADD_METHOD_TO(ForumController::updateForum, "/api/forums/{1}", Put);
+    ADD_METHOD_TO(ForumController::deleteForum, "/api/forums/{1}", Delete);
+    ADD_METHOD_TO(ForumController::uploadBanner, "/api/forums/{1}/banner", Post);
+    ADD_METHOD_TO(ForumController::deleteBanner, "/api/forums/{1}/banner", Delete);
+    ADD_METHOD_TO(ForumController::updateBannerPosition, "/api/forums/{1}/banner/position", Put);
+    ADD_METHOD_TO(ForumController::updateTitleColor, "/api/forums/{1}/title-color", Put);
+
+    // Thread CRUD
+    ADD_METHOD_TO(ForumController::getThreads, "/api/forums/{1}/threads", Get);
+    ADD_METHOD_TO(ForumController::getThread, "/api/forums/{1}/threads/{2}", Get);
+    ADD_METHOD_TO(ForumController::createThread, "/api/forums/{1}/threads", Post);
+    ADD_METHOD_TO(ForumController::updateThread, "/api/forums/{1}/threads/{2}", Put);
+    ADD_METHOD_TO(ForumController::deleteThread, "/api/forums/{1}/threads/{2}", Delete);
+    ADD_METHOD_TO(ForumController::pinThread, "/api/forums/{1}/threads/{2}/pin", Post);
+    ADD_METHOD_TO(ForumController::lockThread, "/api/forums/{1}/threads/{2}/lock", Post);
+
+    // Post CRUD
+    ADD_METHOD_TO(ForumController::getPosts, "/api/forums/{1}/threads/{2}/posts", Get);
+    ADD_METHOD_TO(ForumController::createPost, "/api/forums/{1}/threads/{2}/posts", Post);
+    ADD_METHOD_TO(ForumController::updatePost, "/api/forums/{1}/threads/{2}/posts/{3}", Put);
+    ADD_METHOD_TO(ForumController::deletePost, "/api/forums/{1}/threads/{2}/posts/{3}", Delete);
+
+    // Moderation
+    ADD_METHOD_TO(ForumController::getBannedUsers, "/api/forums/{1}/bans", Get);
+    ADD_METHOD_TO(ForumController::banUser, "/api/forums/{1}/bans", Post);
+    ADD_METHOD_TO(ForumController::unbanUser, "/api/forums/{1}/bans/{2}", Delete);
+    METHOD_LIST_END
+
+    // Forum methods
+    void getForums(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback);
+    void getForum(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &forumId);
+    void createForum(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+    void updateForum(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &forumId);
+    void deleteForum(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &forumId);
+    void uploadBanner(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &forumId);
+    void deleteBanner(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &forumId);
+    void updateBannerPosition(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback,
+                              const std::string &forumId);
+    void updateTitleColor(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback,
+                          const std::string &forumId);
+
+    // Thread methods
+    void getThreads(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &forumId);
+    void getThread(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback,
+                   const std::string &forumId, const std::string &threadId);
+    void createThread(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &forumId);
+    void updateThread(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &forumId, const std::string &threadId);
+    void deleteThread(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &forumId, const std::string &threadId);
+    void pinThread(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback,
+                   const std::string &forumId, const std::string &threadId);
+    void lockThread(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &forumId, const std::string &threadId);
+
+    // Post methods
+    void getPosts(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &forumId, const std::string &threadId);
+    void createPost(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &forumId, const std::string &threadId);
+    void updatePost(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &forumId, const std::string &threadId,
+                    const std::string &postId);
+    void deletePost(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &forumId, const std::string &threadId,
+                    const std::string &postId);
+
+    // Moderation methods
+    void getBannedUsers(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &forumId);
+    void banUser(const HttpRequestPtr &req,
+                 std::function<void(const HttpResponsePtr &)> &&callback,
+                 const std::string &forumId);
+    void unbanUser(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback,
+                   const std::string &forumId, const std::string &banId);
+
+private:
+    bool isForumModerator(int64_t userId, int64_t forumOwnerId, bool isAdmin);
+    bool isUserBanned(int64_t forumId, int64_t userId);
+};
diff --git a/backend/src/controllers/RealmController.cpp b/backend/src/controllers/RealmController.cpp
index 809c1ff..b0aa432 100644
--- a/backend/src/controllers/RealmController.cpp
+++ b/backend/src/controllers/RealmController.cpp
@@ -3,37 +3,35 @@
 #include "../services/StatsService.h"
 #include "../services/RedisHelper.h"
 #include "../services/OmeClient.h"
+#include "../services/CensorService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
 #include <drogon/utils/Utilities.h>
 #include <drogon/Cookie.h>
-#include <random>
+#include <drogon/MultiPart.h>
 #include <sstream>
 #include <iomanip>
 #include <regex>
+#include <filesystem>
+#include <cstdio>
+#include <algorithm>
+#include <openssl/rand.h>  // SECURITY FIX #4: Use cryptographic RNG
 
 using namespace drogon::orm;
 
 namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
+    // SECURITY FIX #4: Use cryptographically secure random number generation
+    // Replaces mt19937 (Mersenne Twister) which is NOT cryptographically secure
     std::string generateStreamKey() {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
+        unsigned char bytes[32];  // 32 bytes = 64 hex characters
+        if (RAND_bytes(bytes, sizeof(bytes)) != 1) {
+            LOG_ERROR << "Failed to generate cryptographically secure random bytes";
+            throw std::runtime_error("Failed to generate secure stream key");
+        }
+
         std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
+        for (size_t i = 0; i < sizeof(bytes); ++i) {
+            ss << std::hex << std::setw(2) << std::setfill('0') << static_cast<int>(bytes[i]);
         }
         return ss.str();
     }
@@ -44,7 +42,93 @@ namespace {
         }
         return std::regex_match(name, std::regex("^[a-z0-9-]+$"));
     }
+
+    // SECURITY FIX #12: Safe file deletion with path traversal protection
+    bool safeDeleteFile(const std::string& urlPath, const std::string& allowedDir) {
+        try {
+            if (urlPath.empty()) return false;
+
+            // Construct full path
+            std::filesystem::path fullPath = std::filesystem::weakly_canonical("." + urlPath);
+            std::filesystem::path basePath = std::filesystem::canonical(allowedDir);
+
+            // Verify path is within allowed directory
+            auto [baseEnd, fullEnd] = std::mismatch(basePath.begin(), basePath.end(), fullPath.begin());
+            if (baseEnd != basePath.end()) {
+                LOG_WARN << "Path traversal attempt blocked: " << urlPath << " is not within " << allowedDir;
+                return false;
+            }
+
+            // Path is safe, delete the file
+            if (std::filesystem::exists(fullPath)) {
+                std::filesystem::remove(fullPath);
+                LOG_DEBUG << "Safely deleted file: " << fullPath.string();
+                return true;
+            }
+            return false;
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Error in safeDeleteFile: " << e.what();
+            return false;
+        }
+    }
     
+    // Sync chat settings to Redis db 1 (chat-service database)
+    void syncChatSettingToRedis(const std::string& realmName, const std::string& field, const std::string& value) {
+        try {
+            sw::redis::ConnectionOptions opts;
+            const char* envHost = std::getenv("REDIS_HOST");
+            opts.host = envHost ? std::string(envHost) : "redis";
+            const char* envPort = std::getenv("REDIS_PORT");
+            opts.port = envPort ? std::stoi(envPort) : 6379;
+            opts.db = 1;  // Chat-service uses db 1
+            opts.socket_timeout = std::chrono::milliseconds(1000);
+
+            auto redis = sw::redis::Redis(opts);
+            std::string key = "chat:settings:realm:" + realmName;
+            redis.hset(key, field, value);
+            LOG_DEBUG << "Synced chat setting " << field << "=" << value << " for realm " << realmName;
+        } catch (const sw::redis::Error& e) {
+            LOG_ERROR << "Failed to sync chat setting to Redis: " << e.what();
+        }
+    }
+
+    // Helper to create a new viewer token
+    void createNewViewerToken(std::function<void(const HttpResponsePtr &)> callback, const std::string& streamKey) {
+        auto bytes = drogon::utils::genRandomString(32);
+        std::string token = drogon::utils::base64Encode(
+            (const unsigned char*)bytes.data(), bytes.length()
+        );
+
+        RedisHelper::storeKeyAsync("viewer_token:" + token, streamKey, 300,
+            [callback, token](bool stored) {
+                if (!stored) {
+                    auto resp = HttpResponse::newHttpResponse();
+                    resp->setStatusCode(k500InternalServerError);
+                    callback(resp);
+                    return;
+                }
+
+                auto resp = HttpResponse::newHttpResponse();
+
+                Cookie cookie("viewer_token", token);
+                cookie.setPath("/");
+                cookie.setHttpOnly(true);
+                cookie.setSecure(false);
+                cookie.setMaxAge(300);
+                resp->addCookie(cookie);
+
+                Json::Value body;
+                body["success"] = true;
+                body["viewer_token"] = token;
+                body["expires_in"] = 300;
+
+                resp->setContentTypeCode(CT_APPLICATION_JSON);
+                resp->setBody(Json::FastWriter().write(body));
+                callback(resp);
+            }
+        );
+    }
+
     void invalidateKeyInRedis(const std::string& oldKey) {
         RedisHelper::addToSet("streams_to_disconnect", oldKey);
         RedisHelper::deleteKey("stream_key:" + oldKey);
@@ -65,19 +149,6 @@ namespace {
     }
 }
 
-UserInfo RealmController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    std::string auth = req->getHeader("Authorization");
-    
-    if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-        return user;
-    }
-    
-    std::string token = auth.substr(7);
-    AuthService::getInstance().validateToken(token, user);
-    return user;
-}
-
 void RealmController::getUserRealms(const HttpRequestPtr &req,
                                    std::function<void(const HttpResponsePtr &)> &&callback) {
     UserInfo user = getUserFromRequest(req);
@@ -85,35 +156,48 @@ void RealmController::getUserRealms(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k401Unauthorized));
         return;
     }
-    
+
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT id, name, stream_key, is_active, is_live, viewer_count, created_at "
-                 "FROM realms WHERE user_id = $1 ORDER BY created_at DESC"
+    *dbClient << "SELECT r.id, r.name, r.description, r.stream_key, r.realm_type, r.is_active, r.is_live, "
+                 "r.viewer_count, r.chat_enabled, r.chat_guests_allowed, r.chat_slow_mode_seconds, "
+                 "r.chat_retention_hours, r.offline_image_url, r.title_color, r.created_at, "
+                 "(SELECT COUNT(*) FROM videos v WHERE v.realm_id = r.id AND v.status = 'ready') as video_count, "
+                 "(SELECT COUNT(*) FROM audio_files a WHERE a.realm_id = r.id AND a.status = 'ready') as audio_count, "
+                 "(SELECT COUNT(*) FROM ebooks e WHERE e.realm_id = r.id AND e.status = 'ready') as ebook_count "
+                 "FROM realms r WHERE r.user_id = $1 ORDER BY r.created_at DESC"
               << user.id
               >> [callback](const Result& r) {
                   Json::Value resp;
                   resp["success"] = true;
                   Json::Value realms(Json::arrayValue);
-                  
+
                   for (const auto& row : r) {
                       Json::Value realm;
                       realm["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
                       realm["name"] = row["name"].as<std::string>();
-                      realm["streamKey"] = row["stream_key"].as<std::string>();
+                      realm["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      realm["type"] = row["realm_type"].isNull() ? "stream" : row["realm_type"].as<std::string>();
+                      realm["streamKey"] = row["stream_key"].isNull() ? "" : row["stream_key"].as<std::string>();
                       realm["isActive"] = row["is_active"].as<bool>();
                       realm["isLive"] = row["is_live"].as<bool>();
                       realm["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
+                      realm["videoCount"] = static_cast<Json::Int64>(row["video_count"].as<int64_t>());
+                      realm["audioCount"] = static_cast<Json::Int64>(row["audio_count"].as<int64_t>());
+                      realm["ebookCount"] = static_cast<Json::Int64>(row["ebook_count"].as<int64_t>());
+                      realm["chatEnabled"] = row["chat_enabled"].as<bool>();
+                      realm["chatGuestsAllowed"] = row["chat_guests_allowed"].as<bool>();
+                      realm["chatSlowModeSeconds"] = row["chat_slow_mode_seconds"].as<int>();
+                      realm["chatRetentionHours"] = row["chat_retention_hours"].as<int>();
+                      realm["offlineImageUrl"] = row["offline_image_url"].isNull() ? "" : row["offline_image_url"].as<std::string>();
+                      realm["titleColor"] = row["title_color"].isNull() ? "#ffffff" : row["title_color"].as<std::string>();
                       realm["createdAt"] = row["created_at"].as<std::string>();
                       realms.append(realm);
                   }
-                  
+
                   resp["realms"] = realms;
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realms: " << e.base().what();
-                  callback(jsonError("Failed to get realms"));
-              };
+              >> DB_ERROR_MSG(callback, "get realms", "Failed to get realms");
 }
 
 void RealmController::createRealm(const HttpRequestPtr &req,
@@ -123,141 +207,231 @@ void RealmController::createRealm(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k401Unauthorized));
         return;
     }
-    
-    // Check if user is a streamer
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    std::string name = (*json)["name"].asString();
+    std::string realmType = (*json).isMember("type") ? (*json)["type"].asString() : "stream";
+
+    // Check for censored words in realm name
+    if (CensorService::getInstance().containsCensoredWords(name)) {
+        callback(jsonError("Realm name contains prohibited content"));
+        return;
+    }
+
+    // Validate realm type
+    if (realmType != "stream" && realmType != "video" && realmType != "audio" && realmType != "ebook" && realmType != "watch") {
+        callback(jsonError("Invalid realm type. Must be 'stream', 'video', 'audio', 'ebook', or 'watch'"));
+        return;
+    }
+
+    if (!validateRealmName(name)) {
+        callback(jsonError("Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only"));
+        return;
+    }
+
+    // Check permission based on realm type
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT is_streamer FROM users WHERE id = $1"
+    *dbClient << "SELECT is_streamer, is_uploader, is_watch_creator FROM users WHERE id = $1"
               << user.id
-              >> [req, callback, user, dbClient](const Result& r) {
-                  if (r.empty() || !r[0]["is_streamer"].as<bool>()) {
-                      callback(jsonError("You must be a streamer to create realms", k403Forbidden));
+              >> [req, callback, user, dbClient, name, realmType](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found", k404NotFound));
                       return;
                   }
-                  
-                  auto json = req->getJsonObject();
-                  if (!json) {
-                      callback(jsonError("Invalid JSON"));
+
+                  bool isStreamer = r[0]["is_streamer"].as<bool>();
+                  bool isUploader = r[0]["is_uploader"].as<bool>();
+                  bool isWatchCreator = r[0]["is_watch_creator"].isNull() ? false : r[0]["is_watch_creator"].as<bool>();
+
+                  // Check permission based on realm type
+                  if (realmType == "stream" && !isStreamer) {
+                      callback(jsonError("You must be a streamer to create stream realms", k403Forbidden));
                       return;
                   }
-                  
-                  std::string name = (*json)["name"].asString();
-                  
-                  if (!validateRealmName(name)) {
-                      callback(jsonError("Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only"));
+                  if (realmType == "video" && !isUploader) {
+                      callback(jsonError("You must be an uploader to create video realms", k403Forbidden));
                       return;
                   }
-                  
+                  if (realmType == "audio" && !isUploader) {
+                      callback(jsonError("You must be an uploader to create audio realms", k403Forbidden));
+                      return;
+                  }
+                  if (realmType == "ebook" && !isUploader) {
+                      callback(jsonError("You must be an uploader to create ebook realms", k403Forbidden));
+                      return;
+                  }
+                  if (realmType == "watch" && !isWatchCreator) {
+                      callback(jsonError("You must be a watch creator to create watch rooms", k403Forbidden));
+                      return;
+                  }
+
                   // Check if realm name already exists
                   *dbClient << "SELECT id FROM realms WHERE name = $1"
                            << name
-                           >> [dbClient, user, name, callback](const Result& r2) {
+                           >> [dbClient, user, name, realmType, callback](const Result& r2) {
                                if (!r2.empty()) {
                                    callback(jsonError("Realm name already taken"));
                                    return;
                                }
-                               
+
                                // Check user's realm limit (e.g., 5 realms per user)
                                *dbClient << "SELECT COUNT(*) as count FROM realms WHERE user_id = $1"
                                         << user.id
-                                        >> [dbClient, user, name, callback](const Result& r3) {
+                                        >> [dbClient, user, name, realmType, callback](const Result& r3) {
                                             if (!r3.empty() && r3[0]["count"].as<int64_t>() >= 5) {
                                                 callback(jsonError("You have reached the maximum number of realms (5)"));
                                                 return;
                                             }
-                                            
-                                            std::string streamKey = generateStreamKey();
-                                            
-                                            *dbClient << "INSERT INTO realms (user_id, name, stream_key) "
-                                                         "VALUES ($1, $2, $3) RETURNING id"
-                                                      << user.id << name << streamKey
-                                                      >> [callback, name, streamKey](const Result& r4) {
-                                                          if (r4.empty()) {
-                                                              callback(jsonError("Failed to create realm"));
-                                                              return;
+
+                                            if (realmType == "stream") {
+                                                // Stream realm - generate stream key
+                                                std::string streamKey = generateStreamKey();
+
+                                                *dbClient << "INSERT INTO realms (user_id, name, stream_key, realm_type) "
+                                                             "VALUES ($1, $2, $3, 'stream') RETURNING id"
+                                                          << user.id << name << streamKey
+                                                          >> [callback, name, streamKey](const Result& r4) {
+                                                              if (r4.empty()) {
+                                                                  callback(jsonError("Failed to create realm"));
+                                                                  return;
+                                                              }
+
+                                                              // Store stream key in Redis
+                                                              RedisHelper::storeKey("stream_key:" + streamKey, "1", 86400);
+
+                                                              Json::Value resp;
+                                                              resp["success"] = true;
+                                                              resp["realm"]["id"] = static_cast<Json::Int64>(r4[0]["id"].as<int64_t>());
+                                                              resp["realm"]["name"] = name;
+                                                              resp["realm"]["streamKey"] = streamKey;
+                                                              resp["realm"]["type"] = "stream";
+                                                              callback(jsonResp(resp));
                                                           }
-                                                          
-                                                          // Store stream key in Redis
-                                                          RedisHelper::storeKey("stream_key:" + streamKey, "1", 86400);
-                                                          
-                                                          Json::Value resp;
-                                                          resp["success"] = true;
-                                                          resp["realm"]["id"] = static_cast<Json::Int64>(r4[0]["id"].as<int64_t>());
-                                                          resp["realm"]["name"] = name;
-                                                          resp["realm"]["streamKey"] = streamKey;
-                                                          callback(jsonResp(resp));
-                                                      }
-                                                      >> [callback](const DrogonDbException& e) {
-                                                          LOG_ERROR << "Failed to create realm: " << e.base().what();
-                                                          callback(jsonError("Failed to create realm"));
-                                                      };
+                                                          >> DB_ERROR_MSG(callback, "create realm", "Failed to create realm");
+                                            } else if (realmType == "watch") {
+                                                // Watch room - no stream key, initialize watch_room_state
+                                                *dbClient << "INSERT INTO realms (user_id, name, realm_type) "
+                                                             "VALUES ($1, $2, 'watch') RETURNING id"
+                                                          << user.id << name
+                                                          >> [callback, dbClient, name](const Result& r4) {
+                                                              if (r4.empty()) {
+                                                                  callback(jsonError("Failed to create realm"));
+                                                                  return;
+                                                              }
+
+                                                              int64_t realmId = r4[0]["id"].as<int64_t>();
+
+                                                              // Initialize watch_room_state
+                                                              *dbClient << "INSERT INTO watch_room_state (realm_id) VALUES ($1)"
+                                                                       << realmId
+                                                                       >> [callback, name, realmId](const Result&) {
+                                                                           Json::Value resp;
+                                                                           resp["success"] = true;
+                                                                           resp["realm"]["id"] = static_cast<Json::Int64>(realmId);
+                                                                           resp["realm"]["name"] = name;
+                                                                           resp["realm"]["type"] = "watch";
+                                                                           callback(jsonResp(resp));
+                                                                       }
+                                                                       >> DB_ERROR_MSG(callback, "init watch state", "Failed to create watch room");
+                                                          }
+                                                          >> DB_ERROR_MSG(callback, "create realm", "Failed to create realm");
+                                            } else {
+                                                // Video, Audio, or Ebook realm - no stream key needed
+                                                *dbClient << "INSERT INTO realms (user_id, name, realm_type) "
+                                                             "VALUES ($1, $2, $3) RETURNING id"
+                                                          << user.id << name << realmType
+                                                          >> [callback, name, realmType](const Result& r4) {
+                                                              if (r4.empty()) {
+                                                                  callback(jsonError("Failed to create realm"));
+                                                                  return;
+                                                              }
+
+                                                              Json::Value resp;
+                                                              resp["success"] = true;
+                                                              resp["realm"]["id"] = static_cast<Json::Int64>(r4[0]["id"].as<int64_t>());
+                                                              resp["realm"]["name"] = name;
+                                                              resp["realm"]["type"] = realmType;
+                                                              callback(jsonResp(resp));
+                                                          }
+                                                          >> DB_ERROR_MSG(callback, "create realm", "Failed to create realm");
+                                            }
                                         }
-                                        >> [callback](const DrogonDbException& e) {
-                                            LOG_ERROR << "Failed to count realms: " << e.base().what();
-                                            callback(jsonError("Database error"));
-                                        };
+                                        >> DB_ERROR(callback, "count realms");
                            }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to check realm name: " << e.base().what();
-                               callback(jsonError("Database error"));
-                           };
+                           >> DB_ERROR(callback, "check realm name");
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to check streamer status: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "check user permissions");
 }
 
-void RealmController::issueRealmViewerToken(const HttpRequestPtr &,
+void RealmController::issueRealmViewerToken(const HttpRequestPtr &req,
                                            std::function<void(const HttpResponsePtr &)> &&callback,
                                            const std::string &realmId) {
     int64_t id = std::stoll(realmId);
-    
+
+    // Check for existing viewer token to avoid creating duplicates on page refresh
+    auto existingToken = req->getCookie("viewer_token");
+
     auto dbClient = app().getDbClient();
     *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND is_active = true"
               << id
-              >> [callback](const Result& r) {
+              >> [callback, existingToken](const Result& r) {
                   if (r.empty()) {
                       callback(jsonResp({}, k404NotFound));
                       return;
                   }
-                  
+
                   std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  auto bytes = drogon::utils::genRandomString(32);
-                  std::string token = drogon::utils::base64Encode(
-                      (const unsigned char*)bytes.data(), bytes.length()
-                  );
-                  
-                  RedisHelper::storeKeyAsync("viewer_token:" + token, streamKey, 30,
-                      [callback, token](bool stored) {
-                          if (!stored) {
-                              callback(jsonResp({}, k500InternalServerError));
-                              return;
+
+                  // If user has existing token, check if it's still valid for this stream
+                  if (!existingToken.empty()) {
+                      RedisHelper::getKeyAsync("viewer_token:" + existingToken,
+                          [callback, existingToken, streamKey](const std::string& storedKey) {
+                              if (storedKey == streamKey) {
+                                  // Token is still valid for this stream - just refresh TTL and return it
+                                  RedisHelper::storeKeyAsync("viewer_token:" + existingToken, streamKey, 300,
+                                      [callback, existingToken](bool stored) {
+                                          auto resp = HttpResponse::newHttpResponse();
+
+                                          // Refresh cookie
+                                          Cookie cookie("viewer_token", existingToken);
+                                          cookie.setPath("/");
+                                          cookie.setHttpOnly(true);
+                                          cookie.setSecure(false);
+                                          cookie.setMaxAge(300);
+                                          resp->addCookie(cookie);
+
+                                          Json::Value body;
+                                          body["success"] = true;
+                                          body["viewer_token"] = existingToken;
+                                          body["expires_in"] = 300;
+                                          body["reused"] = true;  // Indicate token was reused
+
+                                          resp->setContentTypeCode(CT_APPLICATION_JSON);
+                                          resp->setBody(Json::FastWriter().write(body));
+                                          callback(resp);
+                                      }
+                                  );
+                              } else {
+                                  // Token invalid or for different stream - delete old and create new
+                                  if (!storedKey.empty()) {
+                                      RedisHelper::deleteKeyAsync("viewer_token:" + existingToken, [](bool){});
+                                  }
+                                  createNewViewerToken(callback, streamKey);
+                              }
                           }
-                          
-                          auto resp = HttpResponse::newHttpResponse();
-                          
-                          Cookie cookie("viewer_token", token);
-                          cookie.setPath("/");
-                          cookie.setHttpOnly(true);
-                          cookie.setSecure(false);
-                          cookie.setMaxAge(300);
-                          resp->addCookie(cookie);
-                          
-                          Json::Value body;
-                          body["success"] = true;
-                          body["viewer_token"] = token;
-                          body["expires_in"] = 30;
-                          
-                          resp->setContentTypeCode(CT_APPLICATION_JSON);
-                          resp->setBody(Json::FastWriter().write(body));
-                          
-                          callback(resp);
-                      }
-                  );
+                      );
+                  } else {
+                      // No existing token, create new one
+                      createNewViewerToken(callback, streamKey);
+                  }
               }
               >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
+                  LOG_ERROR << "Failed to issue viewer token: " << e.base().what();
                   callback(jsonResp({}, k500InternalServerError));
               };
 }
@@ -302,10 +476,7 @@ void RealmController::getRealmStreamKey(const HttpRequestPtr &req,
                       }
                   );
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm stream key");
 }
 
 void RealmController::getRealm(const HttpRequestPtr &, // Remove parameter name since it's unused
@@ -313,7 +484,7 @@ void RealmController::getRealm(const HttpRequestPtr &, // Remove parameter name
                               const std::string &realmId) {
     // Remove authentication requirement for public viewing
     int64_t id = std::stoll(realmId);
-    
+
     auto dbClient = app().getDbClient();
     *dbClient << "SELECT r.*, u.username FROM realms r "
                  "JOIN users u ON r.user_id = u.id "
@@ -324,12 +495,13 @@ void RealmController::getRealm(const HttpRequestPtr &, // Remove parameter name
                       callback(jsonError("Realm not found", k404NotFound));
                       return;
                   }
-                  
+
                   Json::Value resp;
                   resp["success"] = true;
                   auto& realm = resp["realm"];
                   realm["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
                   realm["name"] = r[0]["name"].as<std::string>();
+                  realm["type"] = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
                   // Don't expose stream key in public endpoint
                   // realm["streamKey"] = r[0]["stream_key"].as<std::string>();
                   realm["isActive"] = r[0]["is_active"].as<bool>();
@@ -337,13 +509,10 @@ void RealmController::getRealm(const HttpRequestPtr &, // Remove parameter name
                   realm["viewerCount"] = static_cast<Json::Int64>(r[0]["viewer_count"].as<int64_t>());
                   realm["createdAt"] = r[0]["created_at"].as<std::string>();
                   realm["username"] = r[0]["username"].as<std::string>();
-                  
+
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm");
 }
 
 void RealmController::updateRealm(const HttpRequestPtr &req,
@@ -364,28 +533,139 @@ void RealmController::updateRealm(const HttpRequestPtr &req,
         return;
     }
     
+    // Parse JSON body
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
     // Verify the realm exists and belongs to the user
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT id FROM realms WHERE id = $1 AND user_id = $2"
+    *dbClient << "SELECT id, name FROM realms WHERE id = $1 AND user_id = $2"
               << id << user.id
-              >> [callback](const Result& r) {
+              >> [callback, json, dbClient, id, user](const Result& r) {
                   if (r.empty()) {
                       callback(jsonError("Realm not found or access denied", k404NotFound));
                       return;
                   }
-                  
-                  // Currently no fields to update since we removed display_name and description
-                  // This endpoint is kept for potential future updates
-                  // For now, just return success
-                  Json::Value resp;
-                  resp["success"] = true;
-                  resp["message"] = "Realm updated successfully";
-                  callback(jsonResp(resp));
+
+                  std::string realmName = r[0]["name"].as<std::string>();
+
+                  // Update chat_enabled if provided
+                  if (json->isMember("chatEnabled")) {
+                      bool chatEnabled = (*json)["chatEnabled"].asBool();
+                      *dbClient << "UPDATE realms SET chat_enabled = $1 WHERE id = $2 AND user_id = $3"
+                               << chatEnabled << id << user.id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["message"] = "Realm updated successfully";
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update realm", "Failed to update realm");
+                  } else if (json->isMember("chatGuestsAllowed")) {
+                      // Update chat_guests_allowed if provided
+                      bool chatGuestsAllowed = (*json)["chatGuestsAllowed"].asBool();
+                      *dbClient << "UPDATE realms SET chat_guests_allowed = $1 WHERE id = $2 AND user_id = $3"
+                               << chatGuestsAllowed << id << user.id
+                               >> [callback, realmName, chatGuestsAllowed](const Result&) {
+                                   // Sync to Redis (chat-service database)
+                                   syncChatSettingToRedis(realmName, "chatGuestsAllowed", chatGuestsAllowed ? "1" : "0");
+
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["message"] = "Realm updated successfully";
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update realm", "Failed to update realm");
+                  } else if (json->isMember("chatSlowModeSeconds")) {
+                      // Update chat slow mode seconds
+                      int slowModeSeconds = (*json)["chatSlowModeSeconds"].asInt();
+                      // Clamp to valid range (0-300)
+                      if (slowModeSeconds < 0) slowModeSeconds = 0;
+                      if (slowModeSeconds > 300) slowModeSeconds = 300;
+                      *dbClient << "UPDATE realms SET chat_slow_mode_seconds = $1 WHERE id = $2 AND user_id = $3"
+                               << slowModeSeconds << id << user.id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["message"] = "Slow mode updated successfully";
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update slow mode", "Failed to update slow mode");
+                  } else if (json->isMember("chatRetentionHours")) {
+                      // Update chat retention hours
+                      int retentionHours = (*json)["chatRetentionHours"].asInt();
+                      // Clamp to valid range (1-168)
+                      if (retentionHours < 1) retentionHours = 1;
+                      if (retentionHours > 168) retentionHours = 168;
+                      *dbClient << "UPDATE realms SET chat_retention_hours = $1 WHERE id = $2 AND user_id = $3"
+                               << retentionHours << id << user.id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["message"] = "Message retention updated successfully";
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update retention", "Failed to update retention");
+                  } else if (json->isMember("name")) {
+                      // Update realm name
+                      std::string newName = (*json)["name"].asString();
+
+                      // Validate name format
+                      if (!validateRealmName(newName)) {
+                          callback(jsonError("Invalid realm name. Use 3-30 lowercase letters, numbers, and hyphens only."));
+                          return;
+                      }
+
+                      // Check if name is already taken by another realm
+                      *dbClient << "SELECT id FROM realms WHERE name = $1 AND id != $2"
+                               << newName << id
+                               >> [callback, dbClient, id, user, newName](const Result& nameCheck) {
+                                   if (!nameCheck.empty()) {
+                                       callback(jsonError("Realm name is already taken"));
+                                       return;
+                                   }
+
+                                   *dbClient << "UPDATE realms SET name = $1 WHERE id = $2 AND user_id = $3"
+                                            << newName << id << user.id
+                                            >> [callback, newName](const Result&) {
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["message"] = "Realm renamed successfully";
+                                                resp["name"] = newName;
+                                                callback(jsonResp(resp));
+                                            }
+                                            >> DB_ERROR_MSG(callback, "rename realm", "Failed to rename realm");
+                               }
+                               >> DB_ERROR(callback, "check realm name");
+                  } else if (json->isMember("description")) {
+                      // Update realm description
+                      std::string description = (*json)["description"].asString();
+
+                      // Limit description length
+                      if (description.length() > 500) {
+                          description = description.substr(0, 500);
+                      }
+
+                      *dbClient << "UPDATE realms SET description = $1 WHERE id = $2 AND user_id = $3"
+                               << description << id << user.id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   resp["message"] = "Description updated successfully";
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update description", "Failed to update description");
+                  } else {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "No changes to apply";
+                      callback(jsonResp(resp));
+                  }
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "verify realm ownership");
 }
 
 void RealmController::deleteRealm(const HttpRequestPtr &req,
@@ -396,26 +676,27 @@ void RealmController::deleteRealm(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k401Unauthorized));
         return;
     }
-    
+
     int64_t id = std::stoll(realmId);
-    
+
     auto dbClient = app().getDbClient();
-    
-    // First get the stream key to invalidate it
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND user_id = $2"
+
+    // First get the stream key to invalidate it (if it's a stream realm)
+    *dbClient << "SELECT stream_key, realm_type FROM realms WHERE id = $1 AND user_id = $2"
               << id << user.id
               >> [dbClient, id, user, callback](const Result& r) {
                   if (r.empty()) {
                       callback(jsonError("Realm not found", k404NotFound));
                       return;
                   }
-                  
-                  std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  // Invalidate the key
-                  invalidateKeyInRedis(streamKey);
-                  
-                  // Delete the realm
+
+                  // Only invalidate stream key for stream realms
+                  if (!r[0]["stream_key"].isNull()) {
+                      std::string streamKey = r[0]["stream_key"].as<std::string>();
+                      invalidateKeyInRedis(streamKey);
+                  }
+
+                  // Delete the realm (videos will be cascade deleted due to FK)
                   *dbClient << "DELETE FROM realms WHERE id = $1 AND user_id = $2"
                            << id << user.id
                            >> [callback](const Result&) {
@@ -423,15 +704,9 @@ void RealmController::deleteRealm(const HttpRequestPtr &req,
                                resp["success"] = true;
                                callback(jsonResp(resp));
                            }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to delete realm: " << e.base().what();
-                               callback(jsonError("Failed to delete realm"));
-                           };
+                           >> DB_ERROR_MSG(callback, "delete realm", "Failed to delete realm");
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm for delete");
 }
 
 void RealmController::regenerateRealmKey(const HttpRequestPtr &req,
@@ -442,53 +717,57 @@ void RealmController::regenerateRealmKey(const HttpRequestPtr &req,
         callback(jsonError("Unauthorized", k401Unauthorized));
         return;
     }
-    
+
     int64_t id = std::stoll(realmId);
-    
+
     auto dbClient = app().getDbClient();
-    
+
     // Get old key
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND user_id = $2"
+    *dbClient << "SELECT stream_key, realm_type FROM realms WHERE id = $1 AND user_id = $2"
               << id << user.id
               >> [dbClient, id, user, callback](const Result& r) {
                   if (r.empty()) {
                       callback(jsonError("Realm not found", k404NotFound));
                       return;
                   }
-                  
+
+                  // Check if this is a stream realm
+                  std::string realmType = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
+                  if (realmType != "stream") {
+                      callback(jsonError("Cannot regenerate key for video realms", k400BadRequest));
+                      return;
+                  }
+
                   std::string oldKey = r[0]["stream_key"].as<std::string>();
                   invalidateKeyInRedis(oldKey);
-                  
+
                   std::string newKey = generateStreamKey();
-                  
+
                   *dbClient << "UPDATE realms SET stream_key = $1 WHERE id = $2 AND user_id = $3"
                            << newKey << id << user.id
                            >> [callback, newKey](const Result&) {
                                // Store new key in Redis
                                RedisHelper::storeKey("stream_key:" + newKey, "1", 86400);
-                               
+
                                Json::Value resp;
                                resp["success"] = true;
                                resp["streamKey"] = newKey;
                                callback(jsonResp(resp));
                            }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to update stream key: " << e.base().what();
-                               callback(jsonError("Failed to regenerate key"));
-                           };
+                           >> DB_ERROR_MSG(callback, "update stream key", "Failed to regenerate key");
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm for key regen");
 }
 
 void RealmController::getRealmByName(const HttpRequestPtr &,
                                     std::function<void(const HttpResponsePtr &)> &&callback,
                                     const std::string &realmName) {
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.id, r.name, r.is_live, r.viewer_count, "
-                 "u.username, u.avatar_url FROM realms r "
+    *dbClient << "SELECT r.id, r.name, r.realm_type, r.is_live, r.viewer_count, r.viewer_multiplier, "
+                 "r.chat_enabled, r.chat_guests_allowed, "
+                 "r.chat_slow_mode_seconds, r.chat_retention_hours, "
+                 "r.offline_image_url, r.description, r.user_id, r.playlist_control_mode, r.playlist_whitelist, r.title_color, "
+                 "u.username, u.avatar_url, u.user_color FROM realms r "
                  "JOIN users u ON r.user_id = u.id "
                  "WHERE r.name = $1 AND r.is_active = true"
               << realmName
@@ -497,50 +776,128 @@ void RealmController::getRealmByName(const HttpRequestPtr &,
                       callback(jsonError("Realm not found", k404NotFound));
                       return;
                   }
-                  
+
                   Json::Value resp;
                   resp["success"] = true;
                   auto& realm = resp["realm"];
                   realm["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
                   realm["name"] = r[0]["name"].as<std::string>();
+                  realm["type"] = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
                   realm["isLive"] = r[0]["is_live"].as<bool>();
-                  realm["viewerCount"] = static_cast<Json::Int64>(r[0]["viewer_count"].as<int64_t>());
+                  // Apply viewer multiplier for visual "viewbotting" effect
+                  int64_t viewerCount = r[0]["viewer_count"].as<int64_t>();
+                  int multiplier = r[0]["viewer_multiplier"].isNull() ? 1 : r[0]["viewer_multiplier"].as<int>();
+                  int64_t displayCount = viewerCount * multiplier;
+                  // Add random 0-99 bonus when multiplier is active
+                  if (multiplier > 1) {
+                      static thread_local std::mt19937 rng(std::random_device{}());
+                      std::uniform_int_distribution<int> dist(0, 99);
+                      displayCount += dist(rng);
+                  }
+                  realm["viewerCount"] = static_cast<Json::Int64>(displayCount);
+                  realm["chatEnabled"] = r[0]["chat_enabled"].as<bool>();
+                  realm["chatGuestsAllowed"] = r[0]["chat_guests_allowed"].as<bool>();
+                  realm["chatSlowModeSeconds"] = r[0]["chat_slow_mode_seconds"].as<int>();
+                  realm["chatRetentionHours"] = r[0]["chat_retention_hours"].as<int>();
+                  realm["offlineImageUrl"] = r[0]["offline_image_url"].isNull() ? "" : r[0]["offline_image_url"].as<std::string>();
+                  realm["description"] = r[0]["description"].isNull() ? "" : r[0]["description"].as<std::string>();
+                  realm["ownerId"] = static_cast<Json::Int64>(r[0]["user_id"].as<int64_t>());
+                  realm["playlistControlMode"] = r[0]["playlist_control_mode"].isNull() ? "owner" : r[0]["playlist_control_mode"].as<std::string>();
+                  realm["playlistWhitelist"] = r[0]["playlist_whitelist"].isNull() ? "[]" : r[0]["playlist_whitelist"].as<std::string>();
                   realm["username"] = r[0]["username"].as<std::string>();
                   realm["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                  
+                  realm["colorCode"] = r[0]["user_color"].isNull() ? "" : r[0]["user_color"].as<std::string>();
+                  realm["titleColor"] = r[0]["title_color"].isNull() ? "#ffffff" : r[0]["title_color"].as<std::string>();
+
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm by name: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm by name");
 }
 
 void RealmController::getLiveRealms(const HttpRequestPtr &,
                                    std::function<void(const HttpResponsePtr &)> &&callback) {
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.name, r.viewer_count, u.username, u.avatar_url "
+    // SECURITY: Do NOT expose stream_key in public API - it allows stream hijacking
+    *dbClient << "SELECT r.name, r.viewer_count, r.viewer_multiplier, u.username, u.avatar_url "
                  "FROM realms r JOIN users u ON r.user_id = u.id "
                  "WHERE r.is_live = true AND r.is_active = true "
-                 "ORDER BY r.viewer_count DESC"
+                 "ORDER BY (r.viewer_count * COALESCE(r.viewer_multiplier, 1)) DESC"
               >> [callback](const Result& r) {
                   Json::Value resp(Json::arrayValue);
-                  
+
                   for (const auto& row : r) {
                       Json::Value realm;
                       realm["name"] = row["name"].as<std::string>();
-                      realm["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
+                      // stream_key intentionally omitted - security fix
+                      // Apply viewer multiplier for visual "viewbotting" effect
+                      int64_t viewerCount = row["viewer_count"].as<int64_t>();
+                      int multiplier = row["viewer_multiplier"].isNull() ? 1 : row["viewer_multiplier"].as<int>();
+                      int64_t displayCount = viewerCount * multiplier;
+                      // Add random 0-99 bonus when multiplier is active
+                      if (multiplier > 1) {
+                          static thread_local std::mt19937 rng(std::random_device{}());
+                          std::uniform_int_distribution<int> dist(0, 99);
+                          displayCount += dist(rng);
+                      }
+                      realm["viewerCount"] = static_cast<Json::Int64>(displayCount);
                       realm["username"] = row["username"].as<std::string>();
                       realm["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
                       resp.append(realm);
                   }
-                  
+
                   callback(jsonResp(resp));
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get live realms: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get live realms");
+}
+
+void RealmController::getAllRealms(const HttpRequestPtr &,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    // Only show stream realms in the public list (video realms are accessed via /videos)
+    // SECURITY: Do NOT expose stream_key in public API - it allows stream hijacking
+    *dbClient << "SELECT r.id, r.name, r.realm_type, r.is_live, r.viewer_count, r.viewer_multiplier, "
+                 "r.chat_enabled, r.chat_guests_allowed, "
+                 "r.offline_image_url, r.title_color, u.username, u.avatar_url, u.user_color "
+                 "FROM realms r JOIN users u ON r.user_id = u.id "
+                 "WHERE r.is_active = true AND (r.realm_type = 'stream' OR r.realm_type IS NULL) "
+                 "ORDER BY r.is_live DESC, (r.viewer_count * COALESCE(r.viewer_multiplier, 1)) DESC, r.name ASC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  Json::Value realms(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value realm;
+                      realm["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      realm["name"] = row["name"].as<std::string>();
+                      realm["type"] = row["realm_type"].isNull() ? "stream" : row["realm_type"].as<std::string>();
+                      // stream_key intentionally omitted - security fix
+                      realm["isLive"] = row["is_live"].as<bool>();
+                      // Apply viewer multiplier for visual "viewbotting" effect
+                      int64_t viewerCount = row["viewer_count"].as<int64_t>();
+                      int multiplier = row["viewer_multiplier"].isNull() ? 1 : row["viewer_multiplier"].as<int>();
+                      int64_t displayCount = viewerCount * multiplier;
+                      // Add random 0-99 bonus when multiplier is active
+                      if (multiplier > 1) {
+                          static thread_local std::mt19937 rng(std::random_device{}());
+                          std::uniform_int_distribution<int> dist(0, 99);
+                          displayCount += dist(rng);
+                      }
+                      realm["viewerCount"] = static_cast<Json::Int64>(displayCount);
+                      realm["chatEnabled"] = row["chat_enabled"].as<bool>();
+                      realm["chatGuestsAllowed"] = row["chat_guests_allowed"].as<bool>();
+                      realm["offlineImageUrl"] = row["offline_image_url"].isNull() ? "" : row["offline_image_url"].as<std::string>();
+                      realm["titleColor"] = row["title_color"].isNull() ? "#ffffff" : row["title_color"].as<std::string>();
+                      realm["username"] = row["username"].as<std::string>();
+                      realm["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      realm["colorCode"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                      realms.append(realm);
+                  }
+
+                  resp["success"] = true;
+                  resp["realms"] = realms;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get all realms");
 }
 
 void RealmController::validateRealmKey(const HttpRequestPtr &,
@@ -573,27 +930,37 @@ void RealmController::getRealmStats(const HttpRequestPtr &,
                                    const std::string &realmId) {
     // Public endpoint - no authentication required
     int64_t id = std::stoll(realmId);
-    
+
     auto dbClient = app().getDbClient();
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1"
+    *dbClient << "SELECT stream_key, viewer_multiplier FROM realms WHERE id = $1"
               << id
               >> [callback](const Result& r) {
                   if (r.empty()) {
                       callback(jsonError("Realm not found", k404NotFound));
                       return;
                   }
-                  
+
                   std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
+                  int multiplier = r[0]["viewer_multiplier"].isNull() ? 1 : r[0]["viewer_multiplier"].as<int>();
+
                   StatsService::getInstance().getStreamStats(streamKey,
-                      [callback](bool success, const StreamStats& stats) {
+                      [callback, multiplier](bool success, const StreamStats& stats) {
                           if (success) {
                               Json::Value json;
                               json["success"] = true;
-                              
+
+                              // Calculate random bonus when multiplier is active
+                              int randomBonus = 0;
+                              if (multiplier > 1) {
+                                  static thread_local std::mt19937 rng(std::random_device{}());
+                                  std::uniform_int_distribution<int> dist(0, 99);
+                                  randomBonus = dist(rng);
+                              }
+
                               auto& s = json["stats"];
-                              s["connections"] = static_cast<Json::Int64>(stats.uniqueViewers);
-                              s["total_connections"] = static_cast<Json::Int64>(stats.totalConnections);
+                              // Apply viewer multiplier for visual "viewbotting" effect
+                              s["connections"] = static_cast<Json::Int64>(stats.uniqueViewers * multiplier + randomBonus);
+                              s["total_connections"] = static_cast<Json::Int64>(stats.totalConnections * multiplier + randomBonus);
                               s["bytes_in"] = static_cast<Json::Int64>(stats.totalBytesIn);
                               s["bytes_out"] = static_cast<Json::Int64>(stats.totalBytesOut);
                               s["bitrate"] = stats.bitrate;
@@ -601,22 +968,471 @@ void RealmController::getRealmStats(const HttpRequestPtr &,
                               s["resolution"] = stats.resolution;
                               s["fps"] = stats.fps;
                               s["is_live"] = stats.isLive;
-                              
-                              // Protocol breakdown
+
+                              // Protocol breakdown (also multiplied for consistency)
                               auto& pc = s["protocol_connections"];
-                              pc["webrtc"] = static_cast<Json::Int64>(stats.protocolConnections.webrtc);
-                              pc["hls"] = static_cast<Json::Int64>(stats.protocolConnections.hls);
-                              pc["llhls"] = static_cast<Json::Int64>(stats.protocolConnections.llhls);
-                              pc["dash"] = static_cast<Json::Int64>(stats.protocolConnections.dash);
-                              
+                              pc["webrtc"] = static_cast<Json::Int64>(stats.protocolConnections.webrtc * multiplier);
+                              pc["hls"] = static_cast<Json::Int64>(stats.protocolConnections.hls * multiplier);
+                              pc["llhls"] = static_cast<Json::Int64>(stats.protocolConnections.llhls * multiplier);
+                              pc["dash"] = static_cast<Json::Int64>(stats.protocolConnections.dash * multiplier);
+
                               callback(jsonResp(json));
                           } else {
                               callback(jsonError("Failed to retrieve stats"));
                           }
                       });
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "get realm stats");
+}
+
+void RealmController::getPublicUserRealms(const HttpRequestPtr &,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &username) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.id, r.name, r.realm_type, r.is_live, r.viewer_count, r.viewer_multiplier, "
+                 "r.title_color, r.created_at, "
+                 "(SELECT COUNT(*) FROM videos v WHERE v.realm_id = r.id AND v.status = 'ready') as video_count "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "WHERE u.username = $1 AND r.is_active = true "
+                 "ORDER BY r.realm_type ASC, r.is_live DESC, r.created_at DESC"
+              << username
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value realms(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value realm;
+                      realm["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      realm["name"] = row["name"].as<std::string>();
+                      realm["type"] = row["realm_type"].isNull() ? "stream" : row["realm_type"].as<std::string>();
+                      realm["isLive"] = row["is_live"].as<bool>();
+                      // Apply viewer multiplier for visual "viewbotting" effect
+                      int64_t viewerCount = row["viewer_count"].as<int64_t>();
+                      int multiplier = row["viewer_multiplier"].isNull() ? 1 : row["viewer_multiplier"].as<int>();
+                      int64_t displayCount = viewerCount * multiplier;
+                      // Add random 0-99 bonus when multiplier is active
+                      if (multiplier > 1) {
+                          static thread_local std::mt19937 rng(std::random_device{}());
+                          std::uniform_int_distribution<int> dist(0, 99);
+                          displayCount += dist(rng);
+                      }
+                      realm["viewerCount"] = static_cast<Json::Int64>(displayCount);
+                      realm["titleColor"] = row["title_color"].isNull() ? "#ffffff" : row["title_color"].as<std::string>();
+                      realm["videoCount"] = static_cast<Json::Int64>(row["video_count"].as<int64_t>());
+                      realm["createdAt"] = row["created_at"].as<std::string>();
+                      realms.append(realm);
+                  }
+
+                  resp["realms"] = realms;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user realms");
+}
+
+void RealmController::uploadOfflineImage(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback,
+                                        const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    // Get file from multipart form
+    MultiPartParser fileParser;
+    if (fileParser.parse(req) != 0 || fileParser.getFiles().empty()) {
+        callback(jsonError("No file uploaded"));
+        return;
+    }
+
+    auto& file = fileParser.getFiles()[0];
+
+    // Check file extension for allowed formats (supports animated GIF/WebP)
+    std::string filename = file.getFileName();
+    std::string ext;
+    auto dotPos = filename.find_last_of('.');
+    if (dotPos != std::string::npos) {
+        ext = filename.substr(dotPos);
+        std::transform(ext.begin(), ext.end(), ext.begin(), ::tolower);
+    }
+    if (ext != ".jpg" && ext != ".jpeg" && ext != ".png" && ext != ".gif" && ext != ".webp") {
+        callback(jsonError("Invalid file type. Only JPEG, PNG, GIF, and WebP are allowed."));
+        return;
+    }
+
+    // Check file size (max 5MB)
+    if (file.fileLength() > 5 * 1024 * 1024) {
+        callback(jsonError("File too large. Maximum size is 5MB."));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify realm ownership and get old image path
+    *dbClient << "SELECT offline_image_url, realm_type FROM realms WHERE id = $1 AND user_id = $2"
+              << id << user.id
+              >> [callback, dbClient, id, user, file = std::move(file)](const Result& r) mutable {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  // Only allow for stream and watch realms
+                  std::string realmType = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
+                  if (realmType != "stream" && realmType != "watch") {
+                      callback(jsonError("Offline images are only supported for stream and watch realms", k400BadRequest));
+                      return;
+                  }
+
+                  // Delete old image if exists (SECURITY FIX #12: Use safe delete with path validation)
+                  if (!r[0]["offline_image_url"].isNull()) {
+                      std::string oldPath = r[0]["offline_image_url"].as<std::string>();
+                      safeDeleteFile(oldPath, "./uploads/offline");
+                  }
+
+                  // Save new file
+                  std::string uploadDir = "./uploads/offline";
+                  std::filesystem::create_directories(uploadDir);
+
+                  // Generate unique filename
+                  std::string ext = file.getFileName().substr(file.getFileName().find_last_of("."));
+                  std::string filename = "realm_" + std::to_string(id) + "_" +
+                                        std::to_string(std::chrono::system_clock::now().time_since_epoch().count()) + ext;
+                  std::string savePath = uploadDir + "/" + filename;
+                  std::string urlPath = "/uploads/offline/" + filename;
+
+                  // Save file
+                  file.saveAs(savePath);
+
+                  // Update database
+                  *dbClient << "UPDATE realms SET offline_image_url = $1 WHERE id = $2 AND user_id = $3"
+                           << urlPath << id << user.id
+                           >> [callback, urlPath](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["offlineImageUrl"] = urlPath;
+                               resp["message"] = "Offline image uploaded successfully";
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "update offline image", "Failed to update offline image");
+              }
+              >> DB_ERROR(callback, "verify realm ownership");
+}
+
+void RealmController::deleteOfflineImage(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback,
+                                        const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Get old image path and verify ownership
+    *dbClient << "SELECT offline_image_url FROM realms WHERE id = $1 AND user_id = $2"
+              << id << user.id
+              >> [callback, dbClient, id, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  // Delete file if exists (SECURITY FIX #12: Use safe delete with path validation)
+                  if (!r[0]["offline_image_url"].isNull()) {
+                      std::string oldPath = r[0]["offline_image_url"].as<std::string>();
+                      safeDeleteFile(oldPath, "./uploads/offline");
+                  }
+
+                  // Clear database field
+                  *dbClient << "UPDATE realms SET offline_image_url = NULL WHERE id = $1 AND user_id = $2"
+                           << id << user.id
+                           >> [callback](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["message"] = "Offline image deleted successfully";
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "delete offline image", "Failed to delete offline image");
+              }
+              >> DB_ERROR(callback, "get realm for delete image");
+}
+
+void RealmController::getRealmModerators(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback,
+                                        const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify user is realm owner or admin
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1"
+              << id
+              >> [callback, dbClient, id, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (ownerId != user.id && !user.isAdmin) {
+                      callback(jsonError("Access denied", k403Forbidden));
+                      return;
+                  }
+
+                  // Get moderators for this realm
+                  *dbClient << "SELECT u.id, u.username, u.avatar_url, u.user_color, cm.granted_at "
+                               "FROM chat_moderators cm "
+                               "JOIN users u ON cm.user_id = u.id "
+                               "WHERE cm.realm_id = $1 "
+                               "ORDER BY cm.granted_at DESC"
+                            << id
+                            >> [callback](const Result& r2) {
+                                Json::Value resp;
+                                resp["success"] = true;
+                                Json::Value moderators(Json::arrayValue);
+
+                                for (const auto& row : r2) {
+                                    Json::Value mod;
+                                    mod["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                    mod["username"] = row["username"].as<std::string>();
+                                    mod["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                                    mod["colorCode"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                                    mod["grantedAt"] = row["granted_at"].as<std::string>();
+                                    moderators.append(mod);
+                                }
+
+                                resp["moderators"] = moderators;
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "get moderators", "Failed to get moderators");
+              }
+              >> DB_ERROR(callback, "check realm ownership");
+}
+
+void RealmController::addRealmModerator(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json || !(*json)["userId"].isInt64()) {
+        callback(jsonError("userId is required", k400BadRequest));
+        return;
+    }
+
+    int64_t targetUserId = (*json)["userId"].asInt64();
+
+    auto dbClient = app().getDbClient();
+
+    // Verify user is realm owner or admin
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1"
+              << id
+              >> [callback, dbClient, id, user, targetUserId](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (ownerId != user.id && !user.isAdmin) {
+                      callback(jsonError("Only realm owner can add moderators", k403Forbidden));
+                      return;
+                  }
+
+                  // Check if target user exists
+                  *dbClient << "SELECT id, username FROM users WHERE id = $1"
+                            << targetUserId
+                            >> [callback, dbClient, id, targetUserId](const Result& r2) {
+                                if (r2.empty()) {
+                                    callback(jsonError("User not found", k404NotFound));
+                                    return;
+                                }
+
+                                std::string username = r2[0]["username"].as<std::string>();
+
+                                // Insert moderator (ignore if already exists)
+                                *dbClient << "INSERT INTO chat_moderators (realm_id, user_id) VALUES ($1, $2) "
+                                             "ON CONFLICT (realm_id, user_id) DO NOTHING"
+                                          << id << targetUserId
+                                          >> [callback, username](const Result&) {
+                                              Json::Value resp;
+                                              resp["success"] = true;
+                                              resp["message"] = username + " added as moderator";
+                                              callback(jsonResp(resp));
+                                          }
+                                          >> DB_ERROR_MSG(callback, "add moderator", "Failed to add moderator");
+                            }
+                            >> DB_ERROR(callback, "check user exists");
+              }
+              >> DB_ERROR(callback, "check realm ownership");
+}
+
+void RealmController::removeRealmModerator(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &realmId,
+                                          const std::string &moderatorId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id, modId;
+    try {
+        id = std::stoll(realmId);
+        modId = std::stoll(moderatorId);
+    } catch (...) {
+        callback(jsonError("Invalid ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify user is realm owner or admin
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1"
+              << id
+              >> [callback, dbClient, id, modId, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (ownerId != user.id && !user.isAdmin) {
+                      callback(jsonError("Only realm owner can remove moderators", k403Forbidden));
+                      return;
+                  }
+
+                  // Remove moderator
+                  *dbClient << "DELETE FROM chat_moderators WHERE realm_id = $1 AND user_id = $2"
+                            << id << modId
+                            >> [callback](const Result&) {
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Moderator removed";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "remove moderator", "Failed to remove moderator");
+              }
+              >> DB_ERROR(callback, "check realm ownership");
+}
+
+void RealmController::updateTitleColor(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback,
+                                       const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    if (!(*json).isMember("titleColor")) {
+        callback(jsonError("Title color is required"));
+        return;
+    }
+
+    std::string titleColor = (*json)["titleColor"].asString();
+
+    // Validate title color format (hex color)
+    if (titleColor.length() != 7 || titleColor[0] != '#') {
+        callback(jsonError("Invalid color format. Use hex format like #ffffff"));
+        return;
+    }
+
+    // Validate hex characters
+    for (size_t i = 1; i < titleColor.length(); ++i) {
+        char c = titleColor[i];
+        if (!((c >= '0' && c <= '9') || (c >= 'a' && c <= 'f') || (c >= 'A' && c <= 'F'))) {
+            callback(jsonError("Invalid color format. Use hex format like #ffffff"));
+            return;
+        }
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify realm ownership
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1"
+              << id
+              >> [callback, dbClient, id, user, titleColor](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (ownerId != user.id && !user.isAdmin) {
+                      callback(jsonError("You don't have permission to modify this realm", k403Forbidden));
+                      return;
+                  }
+
+                  // Update title color
+                  *dbClient << "UPDATE realms SET title_color = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2"
+                           << titleColor << id
+                           >> [callback, titleColor](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["titleColor"] = titleColor;
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR(callback, "update title color");
+              }
+              >> DB_ERROR(callback, "check realm ownership");
 }
\ No newline at end of file
diff --git a/backend/src/controllers/RealmController.h b/backend/src/controllers/RealmController.h
index 2477dcc..b3107cf 100644
--- a/backend/src/controllers/RealmController.h
+++ b/backend/src/controllers/RealmController.h
@@ -15,10 +15,18 @@ public:
     ADD_METHOD_TO(RealmController::regenerateRealmKey, "/api/realms/{1}/regenerate-key", Post);
     ADD_METHOD_TO(RealmController::getRealmByName, "/api/realms/by-name/{1}", Get);
     ADD_METHOD_TO(RealmController::getLiveRealms, "/api/realms/live", Get);
+    ADD_METHOD_TO(RealmController::getAllRealms, "/api/realms/all", Get);
     ADD_METHOD_TO(RealmController::validateRealmKey, "/api/realms/validate/{1}", Get);
     ADD_METHOD_TO(RealmController::issueRealmViewerToken, "/api/realms/{1}/viewer-token", Get);
     ADD_METHOD_TO(RealmController::getRealmStreamKey, "/api/realms/{1}/stream-key", Get);
     ADD_METHOD_TO(RealmController::getRealmStats, "/api/realms/{1}/stats", Get);
+    ADD_METHOD_TO(RealmController::getPublicUserRealms, "/api/realms/user/{1}", Get);
+    ADD_METHOD_TO(RealmController::uploadOfflineImage, "/api/realms/{1}/offline-image", Post);
+    ADD_METHOD_TO(RealmController::deleteOfflineImage, "/api/realms/{1}/offline-image", Delete);
+    ADD_METHOD_TO(RealmController::getRealmModerators, "/api/realms/{1}/moderators", Get);
+    ADD_METHOD_TO(RealmController::addRealmModerator, "/api/realms/{1}/moderators", Post);
+    ADD_METHOD_TO(RealmController::removeRealmModerator, "/api/realms/{1}/moderators/{2}", Delete);
+    ADD_METHOD_TO(RealmController::updateTitleColor, "/api/realms/{1}/title-color", Put);
     METHOD_LIST_END
 
     void getUserRealms(const HttpRequestPtr &req,
@@ -49,7 +57,10 @@ public:
     
     void getLiveRealms(const HttpRequestPtr &req,
                       std::function<void(const HttpResponsePtr &)> &&callback);
-    
+
+    void getAllRealms(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
     void validateRealmKey(const HttpRequestPtr &req,
                          std::function<void(const HttpResponsePtr &)> &&callback,
                          const std::string &key);
@@ -66,6 +77,32 @@ public:
                           std::function<void(const HttpResponsePtr &)> &&callback,
                           const std::string &realmId);
 
-private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
+    void getPublicUserRealms(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback,
+                            const std::string &username);
+
+    void uploadOfflineImage(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &realmId);
+
+    void deleteOfflineImage(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &realmId);
+
+    void getRealmModerators(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &realmId);
+
+    void addRealmModerator(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback,
+                          const std::string &realmId);
+
+    void removeRealmModerator(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback,
+                             const std::string &realmId,
+                             const std::string &moderatorId);
+
+    void updateTitleColor(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback,
+                         const std::string &realmId);
 };
\ No newline at end of file
diff --git a/backend/src/controllers/RestreamController.cpp b/backend/src/controllers/RestreamController.cpp
new file mode 100644
index 0000000..630bdab
--- /dev/null
+++ b/backend/src/controllers/RestreamController.cpp
@@ -0,0 +1,413 @@
+#include "RestreamController.h"
+#include "../services/RestreamService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+
+using namespace drogon::orm;
+
+void RestreamController::verifyRestreamPermission(const HttpRequestPtr &req, int64_t realmId,
+                                                   std::function<void(bool authorized, const UserInfo& user)> callback) {
+    UserInfo user = getUserFromRequest(req);
+
+    if (user.id == 0) {
+        callback(false, user);
+        return;
+    }
+
+    // Admin can always manage restreams
+    if (user.isAdmin) {
+        callback(true, user);
+        return;
+    }
+
+    // Must have restreamer role
+    if (!user.isRestreamer) {
+        callback(false, user);
+        return;
+    }
+
+    // Check if user owns the realm
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1"
+              << realmId
+              >> [callback, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(false, user);
+                      return;
+                  }
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  callback(ownerId == user.id, user);
+              }
+              >> [callback, user](const DrogonDbException& e) {
+                  LOG_ERROR << "Database error: " << e.base().what();
+                  callback(false, user);
+              };
+}
+
+void RestreamController::getDestinations(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &realmId) {
+    int64_t id = std::stoll(realmId);
+
+    verifyRestreamPermission(req, id, [callback, id](bool authorized, const UserInfo& user) {
+        if (!authorized) {
+            callback(jsonError("Unauthorized - requires restreamer role and realm ownership", k403Forbidden));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT id, name, rtmp_url, stream_key, enabled, is_connected, last_error, "
+                     "last_connected_at, created_at FROM restream_destinations WHERE realm_id = $1 "
+                     "ORDER BY created_at ASC"
+                  << id
+                  >> [callback](const Result& r) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      Json::Value destinations(Json::arrayValue);
+
+                      for (const auto& row : r) {
+                          Json::Value dest;
+                          dest["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                          dest["name"] = row["name"].as<std::string>();
+                          dest["rtmpUrl"] = row["rtmp_url"].as<std::string>();
+                          dest["streamKey"] = row["stream_key"].as<std::string>();
+                          dest["enabled"] = row["enabled"].as<bool>();
+                          dest["isConnected"] = row["is_connected"].as<bool>();
+                          dest["lastError"] = row["last_error"].isNull() ? "" : row["last_error"].as<std::string>();
+                          dest["lastConnectedAt"] = row["last_connected_at"].isNull() ? "" : row["last_connected_at"].as<std::string>();
+                          dest["createdAt"] = row["created_at"].as<std::string>();
+                          destinations.append(dest);
+                      }
+
+                      resp["destinations"] = destinations;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR_MSG(callback, "get restream destinations", "Failed to get restream destinations");
+    });
+}
+
+void RestreamController::addDestination(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &realmId) {
+    int64_t id = std::stoll(realmId);
+
+    verifyRestreamPermission(req, id, [this, callback, id, req](bool authorized, const UserInfo& user) {
+        if (!authorized) {
+            callback(jsonError("Unauthorized - requires restreamer role and realm ownership", k403Forbidden));
+            return;
+        }
+
+        auto jsonPtr = req->getJsonObject();
+        if (!jsonPtr) {
+            callback(jsonError("Invalid JSON body"));
+            return;
+        }
+
+        const auto& json = *jsonPtr;
+        std::string name = json.get("name", "").asString();
+        std::string rtmpUrl = json.get("rtmpUrl", "").asString();
+        std::string streamKey = json.get("streamKey", "").asString();
+        bool enabled = json.get("enabled", true).asBool();
+
+        // Validate inputs
+        if (name.empty() || name.length() > 100) {
+            callback(jsonError("Name is required and must be less than 100 characters"));
+            return;
+        }
+
+        if (rtmpUrl.empty() || rtmpUrl.length() > 500) {
+            callback(jsonError("RTMP URL is required and must be less than 500 characters"));
+            return;
+        }
+
+        // Validate RTMP URL format
+        if (rtmpUrl.substr(0, 7) != "rtmp://" && rtmpUrl.substr(0, 8) != "rtmps://") {
+            callback(jsonError("RTMP URL must start with rtmp:// or rtmps://"));
+            return;
+        }
+
+        if (streamKey.empty() || streamKey.length() > 500) {
+            callback(jsonError("Stream key is required and must be less than 500 characters"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Check current count (max 2 destinations per realm)
+        *dbClient << "SELECT COUNT(*) as count FROM restream_destinations WHERE realm_id = $1"
+                  << id
+                  >> [dbClient, callback, id, name, rtmpUrl, streamKey, enabled](const Result& r) {
+                      int64_t count = r[0]["count"].as<int64_t>();
+                      if (count >= 2) {
+                          callback(jsonError("Maximum of 2 restream destinations per realm"));
+                          return;
+                      }
+
+                      // Insert new destination
+                      *dbClient << "INSERT INTO restream_destinations (realm_id, name, rtmp_url, stream_key, enabled) "
+                                   "VALUES ($1, $2, $3, $4, $5) RETURNING id, created_at"
+                                << id << name << rtmpUrl << streamKey << enabled
+                                >> [callback, name, rtmpUrl, streamKey, enabled](const Result& r) {
+                                    if (r.empty()) {
+                                        callback(jsonError("Failed to create destination"));
+                                        return;
+                                    }
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Restream destination created";
+                                    resp["destination"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                                    resp["destination"]["name"] = name;
+                                    resp["destination"]["rtmpUrl"] = rtmpUrl;
+                                    resp["destination"]["streamKey"] = streamKey;
+                                    resp["destination"]["enabled"] = enabled;
+                                    resp["destination"]["isConnected"] = false;
+                                    resp["destination"]["createdAt"] = r[0]["created_at"].as<std::string>();
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "create restream destination", "Failed to create destination");
+                  }
+                  >> DB_ERROR(callback, "check destination count");
+    });
+}
+
+void RestreamController::updateDestination(const HttpRequestPtr &req,
+                                            std::function<void(const HttpResponsePtr &)> &&callback,
+                                            const std::string &realmId,
+                                            const std::string &destinationId) {
+    int64_t rid = std::stoll(realmId);
+    int64_t did = std::stoll(destinationId);
+
+    verifyRestreamPermission(req, rid, [callback, rid, did, req](bool authorized, const UserInfo& user) {
+        if (!authorized) {
+            callback(jsonError("Unauthorized", k403Forbidden));
+            return;
+        }
+
+        auto jsonPtr = req->getJsonObject();
+        if (!jsonPtr) {
+            callback(jsonError("Invalid JSON body"));
+            return;
+        }
+
+        const auto& json = *jsonPtr;
+        auto dbClient = app().getDbClient();
+
+        // Validate fields if provided
+        if (json.isMember("name")) {
+            std::string name = json["name"].asString();
+            if (name.empty() || name.length() > 100) {
+                callback(jsonError("Name must be 1-100 characters"));
+                return;
+            }
+        }
+
+        if (json.isMember("rtmpUrl")) {
+            std::string rtmpUrl = json["rtmpUrl"].asString();
+            if (rtmpUrl.empty() || rtmpUrl.length() > 500) {
+                callback(jsonError("RTMP URL must be 1-500 characters"));
+                return;
+            }
+            if (rtmpUrl.substr(0, 7) != "rtmp://" && rtmpUrl.substr(0, 8) != "rtmps://") {
+                callback(jsonError("RTMP URL must start with rtmp:// or rtmps://"));
+                return;
+            }
+        }
+
+        if (json.isMember("streamKey")) {
+            std::string streamKey = json["streamKey"].asString();
+            if (streamKey.empty() || streamKey.length() > 500) {
+                callback(jsonError("Stream key must be 1-500 characters"));
+                return;
+            }
+        }
+
+        bool hasAnyField = json.isMember("name") || json.isMember("rtmpUrl") ||
+                           json.isMember("streamKey") || json.isMember("enabled");
+        if (!hasAnyField) {
+            callback(jsonError("No fields to update"));
+            return;
+        }
+
+        // Only update enabled (most common case)
+        if (json.isMember("enabled") && !json.isMember("name") &&
+            !json.isMember("rtmpUrl") && !json.isMember("streamKey")) {
+            bool newEnabled = json["enabled"].asBool();
+
+            // If disabling, stop the push first
+            if (!newEnabled) {
+                // Get the realm's stream key to stop the push
+                *dbClient << "SELECT stream_key FROM realms WHERE id = $1"
+                          << rid
+                          >> [dbClient, callback, did, rid, newEnabled](const Result& r) {
+                              if (!r.empty()) {
+                                  std::string streamKey = r[0]["stream_key"].as<std::string>();
+                                  // Stop the push
+                                  RestreamService::getInstance().stopPush(streamKey, did, [](bool) {});
+                              }
+
+                              // Update the database
+                              *dbClient << "UPDATE restream_destinations SET enabled = $1 WHERE id = $2 AND realm_id = $3"
+                                        << newEnabled << did << rid
+                                        >> [callback](const Result&) {
+                                            Json::Value resp;
+                                            resp["success"] = true;
+                                            resp["message"] = "Destination updated";
+                                            callback(jsonResp(resp));
+                                        }
+                                        >> DB_ERROR_MSG(callback, "update restream destination", "Failed to update destination");
+                          }
+                          >> DB_ERROR(callback, "get realm");
+            } else {
+                // Just enable it
+                *dbClient << "UPDATE restream_destinations SET enabled = $1 WHERE id = $2 AND realm_id = $3"
+                          << newEnabled << did << rid
+                          >> [callback](const Result&) {
+                              Json::Value resp;
+                              resp["success"] = true;
+                              resp["message"] = "Destination updated";
+                              callback(jsonResp(resp));
+                          }
+                          >> DB_ERROR_MSG(callback, "update restream destination", "Failed to update destination");
+            }
+        }
+        // Update name only
+        else if (json.isMember("name") && !json.isMember("enabled") &&
+                 !json.isMember("rtmpUrl") && !json.isMember("streamKey")) {
+            *dbClient << "UPDATE restream_destinations SET name = $1 WHERE id = $2 AND realm_id = $3"
+                      << json["name"].asString() << did << rid
+                      >> [callback](const Result&) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["message"] = "Destination updated";
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR_MSG(callback, "update restream destination", "Failed to update destination");
+        }
+        // Full update with all fields
+        else {
+            std::string name = json.get("name", "").asString();
+            std::string rtmpUrl = json.get("rtmpUrl", "").asString();
+            std::string streamKey = json.get("streamKey", "").asString();
+            bool enabled = json.get("enabled", true).asBool();
+
+            *dbClient << "UPDATE restream_destinations SET "
+                         "name = $1, rtmp_url = $2, stream_key = $3, enabled = $4 "
+                         "WHERE id = $5 AND realm_id = $6"
+                      << name << rtmpUrl << streamKey << enabled << did << rid
+                      >> [callback](const Result&) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["message"] = "Destination updated";
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR_MSG(callback, "update restream destination", "Failed to update destination");
+        }
+    });
+}
+
+void RestreamController::deleteDestination(const HttpRequestPtr &req,
+                                            std::function<void(const HttpResponsePtr &)> &&callback,
+                                            const std::string &realmId,
+                                            const std::string &destinationId) {
+    int64_t rid = std::stoll(realmId);
+    int64_t did = std::stoll(destinationId);
+
+    verifyRestreamPermission(req, rid, [callback, rid, did](bool authorized, const UserInfo& user) {
+        if (!authorized) {
+            callback(jsonError("Unauthorized", k403Forbidden));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // First get the realm's stream key to stop any active push
+        *dbClient << "SELECT r.stream_key FROM realms r "
+                     "JOIN restream_destinations rd ON rd.realm_id = r.id "
+                     "WHERE rd.id = $1 AND rd.realm_id = $2"
+                  << did << rid
+                  >> [dbClient, callback, did, rid](const Result& r) {
+                      if (!r.empty()) {
+                          std::string streamKey = r[0]["stream_key"].as<std::string>();
+
+                          // Stop the push if active
+                          RestreamService::getInstance().stopPush(streamKey, did, [](bool) {});
+                      }
+
+                      // Delete the destination
+                      *dbClient << "DELETE FROM restream_destinations WHERE id = $1 AND realm_id = $2"
+                                << did << rid
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Destination deleted";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "delete restream destination", "Failed to delete destination");
+                  }
+                  >> DB_ERROR(callback, "get stream key for delete");
+    });
+}
+
+void RestreamController::testDestination(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback,
+                                          const std::string &realmId,
+                                          const std::string &destinationId) {
+    int64_t rid = std::stoll(realmId);
+    int64_t did = std::stoll(destinationId);
+
+    verifyRestreamPermission(req, rid, [callback, rid, did](bool authorized, const UserInfo& user) {
+        if (!authorized) {
+            callback(jsonError("Unauthorized", k403Forbidden));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Get the destination and realm info
+        *dbClient << "SELECT rd.id, rd.name, rd.rtmp_url, rd.stream_key, rd.enabled, "
+                     "r.stream_key as realm_stream_key, r.is_live "
+                     "FROM restream_destinations rd "
+                     "JOIN realms r ON rd.realm_id = r.id "
+                     "WHERE rd.id = $1 AND rd.realm_id = $2"
+                  << did << rid
+                  >> [callback, did](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Destination not found", k404NotFound));
+                          return;
+                      }
+
+                      bool isLive = r[0]["is_live"].as<bool>();
+                      if (!isLive) {
+                          callback(jsonError("Stream must be live to test restream connection"));
+                          return;
+                      }
+
+                      RestreamDestination dest;
+                      dest.id = r[0]["id"].as<int64_t>();
+                      dest.name = r[0]["name"].as<std::string>();
+                      dest.rtmpUrl = r[0]["rtmp_url"].as<std::string>();
+                      dest.streamKey = r[0]["stream_key"].as<std::string>();
+                      dest.enabled = r[0]["enabled"].as<bool>();
+
+                      std::string realmStreamKey = r[0]["realm_stream_key"].as<std::string>();
+
+                      // Try to start the push
+                      RestreamService::getInstance().startPush(realmStreamKey, dest,
+                          [callback, dest](bool success, const std::string& error) {
+                              Json::Value resp;
+                              resp["success"] = success;
+                              if (success) {
+                                  resp["message"] = "Restream connection successful";
+                                  resp["isConnected"] = true;
+                              } else {
+                                  resp["message"] = "Restream connection failed";
+                                  resp["error"] = error;
+                                  resp["isConnected"] = false;
+                              }
+                              callback(jsonResp(resp, success ? k200OK : k400BadRequest));
+                          });
+                  }
+                  >> DB_ERROR(callback, "test restream destination");
+    });
+}
diff --git a/backend/src/controllers/RestreamController.h b/backend/src/controllers/RestreamController.h
new file mode 100644
index 0000000..1902028
--- /dev/null
+++ b/backend/src/controllers/RestreamController.h
@@ -0,0 +1,44 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+
+class RestreamController : public HttpController<RestreamController> {
+public:
+    METHOD_LIST_BEGIN
+    ADD_METHOD_TO(RestreamController::getDestinations, "/api/realms/{1}/restream", Get);
+    ADD_METHOD_TO(RestreamController::addDestination, "/api/realms/{1}/restream", Post);
+    ADD_METHOD_TO(RestreamController::updateDestination, "/api/realms/{1}/restream/{2}", Put);
+    ADD_METHOD_TO(RestreamController::deleteDestination, "/api/realms/{1}/restream/{2}", Delete);
+    ADD_METHOD_TO(RestreamController::testDestination, "/api/realms/{1}/restream/{2}/test", Post);
+    METHOD_LIST_END
+
+    void getDestinations(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &realmId);
+
+    void addDestination(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+    void updateDestination(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback,
+                          const std::string &realmId,
+                          const std::string &destinationId);
+
+    void deleteDestination(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback,
+                          const std::string &realmId,
+                          const std::string &destinationId);
+
+    void testDestination(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &realmId,
+                        const std::string &destinationId);
+
+private:
+    // Verify user has restream permission for a realm (owner + restreamer role)
+    void verifyRestreamPermission(const HttpRequestPtr &req, int64_t realmId,
+                                  std::function<void(bool authorized, const UserInfo& user)> callback);
+};
diff --git a/backend/src/controllers/StreamController.cpp b/backend/src/controllers/StreamController.cpp
index fb7b3cd..a8ad05b 100644
--- a/backend/src/controllers/StreamController.cpp
+++ b/backend/src/controllers/StreamController.cpp
@@ -4,6 +4,9 @@
 #include "../services/RedisHelper.h"
 #include "../services/OmeClient.h"
 #include "../services/AuthService.h"
+#include "../services/RestreamService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
 #include <drogon/utils/Utilities.h>
 #include <drogon/Cookie.h>
 #include <random>
@@ -15,24 +18,10 @@ using namespace drogon::orm;
 
 // Helper functions at the top
 namespace {
-    // JSON response helper - saves 6-8 lines per endpoint
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
     HttpResponsePtr jsonOk(const Json::Value& data) {
         return jsonResp(data);
     }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
+
     // Quick JSON builder for common patterns
     Json::Value json(std::initializer_list<std::pair<const char*, Json::Value>> items) {
         Json::Value j;
@@ -41,19 +30,6 @@ namespace {
         }
         return j;
     }
-    
-    UserInfo getUserFromRequest(const HttpRequestPtr &req) {
-        UserInfo user;
-        std::string auth = req->getHeader("Authorization");
-        
-        if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-            return user;
-        }
-        
-        std::string token = auth.substr(7);
-        AuthService::getInstance().validateToken(token, user);
-        return user;
-    }
 }
 
 // Static member definitions
@@ -122,10 +98,7 @@ void StreamController::disconnectStream(const HttpRequestPtr &req,
                       }
                   });
               }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
+              >> DB_ERROR(callback, "disconnect stream");
 }
 
 void StreamController::getStreamStats(const HttpRequestPtr &,
@@ -252,7 +225,8 @@ void StreamController::heartbeat(const HttpRequestPtr &req,
                 return;
             }
             
-            services::RedisHelper::instance().expireAsync("viewer_token:" + token, 30,
+            // Refresh token TTL to 5 minutes on heartbeat
+            services::RedisHelper::instance().expireAsync("viewer_token:" + token, 300,
                 [callback](bool success) {
                     if (!success) {
                         callback(jsonResp({}, k500InternalServerError));
@@ -285,29 +259,29 @@ void StreamWebSocketController::handleNewMessage(const WebSocketConnectionPtr&,
 void StreamWebSocketController::handleNewConnection(const HttpRequestPtr &req,
                                                    const WebSocketConnectionPtr& wsConnPtr) {
     LOG_INFO << "New WebSocket connection established";
-    
+
+    // Allow anonymous connections for receiving public broadcasts (stream_live/stream_offline)
+    // These are used by the home page to get instant updates
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+    connections_.insert(wsConnPtr);
+
     auto token = req->getCookie("viewer_token");
-    if (token.empty()) {
-        LOG_WARN << "WebSocket connection without viewer token";
-        wsConnPtr->shutdown();
-        return;
-    }
-    
-    RedisHelper::getKeyAsync("viewer_token:" + token,
-        [wsConnPtr, token](const std::string& streamKey) {
-            if (streamKey.empty()) {
-                LOG_WARN << "Invalid viewer token";
-                wsConnPtr->shutdown();
-                return;
+    if (!token.empty()) {
+        // If viewer token is provided, validate and track it
+        RedisHelper::getKeyAsync("viewer_token:" + token,
+            [wsConnPtr, token](const std::string& streamKey) {
+                if (!streamKey.empty()) {
+                    std::lock_guard<std::mutex> lock(connectionsMutex_);
+                    tokenConnections_[token].insert(wsConnPtr);
+                    LOG_INFO << "WebSocket authenticated for stream: " << streamKey;
+                } else {
+                    LOG_DEBUG << "WebSocket with invalid/expired viewer token - treating as anonymous";
+                }
             }
-            
-            std::lock_guard<std::mutex> lock(connectionsMutex_);
-            tokenConnections_[token].insert(wsConnPtr);
-            connections_.insert(wsConnPtr);
-            
-            LOG_INFO << "WebSocket authenticated for stream: " << streamKey;
-        }
-    );
+        );
+    } else {
+        LOG_DEBUG << "Anonymous WebSocket connection (no viewer token)";
+    }
 }
 
 void StreamWebSocketController::handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) {
@@ -360,11 +334,248 @@ void StreamWebSocketController::broadcastKeyUpdate(const std::string& userId, co
 
 void StreamWebSocketController::broadcastStatsUpdate(const Json::Value& stats) {
     std::string jsonStr = Json::FastWriter().write(stats);
-    
+
     std::lock_guard<std::mutex> lock(connectionsMutex_);
     for (const auto& conn : connections_) {
         if (conn->connected()) {
             conn->send(jsonStr);
         }
     }
+}
+
+// OvenMediaEngine Webhook Handlers
+void StreamController::handleOmeWebhook(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        LOG_WARN << "OME webhook received with invalid JSON";
+        callback(jsonError("Invalid JSON", k400BadRequest));
+        return;
+    }
+
+    const auto& payload = *jsonPtr;
+    std::string eventType = payload.get("eventType", "").asString();
+
+    LOG_INFO << "OME Webhook received: " << eventType;
+    LOG_DEBUG << "OME Webhook payload: " << payload.toStyledString();
+
+    // Extract stream information
+    std::string streamName;
+    if (payload.isMember("stream") && payload["stream"].isMember("name")) {
+        streamName = payload["stream"]["name"].asString();
+    } else if (payload.isMember("streamName")) {
+        streamName = payload["streamName"].asString();
+    }
+
+    if (streamName.empty()) {
+        LOG_WARN << "OME webhook missing stream name";
+        callback(jsonOk(json({{"success", true}, {"message", "Acknowledged"}})));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    if (eventType == "streamCreated" || eventType == "stream.created" || eventType == "publish") {
+        // Stream started - mark realm as live immediately
+        LOG_INFO << "Stream started via webhook: " << streamName;
+
+        *dbClient << "UPDATE realms SET is_live = true, viewer_count = 0, "
+                    "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1 RETURNING id"
+                  << streamName
+                  >> [streamName](const Result& r) {
+                      LOG_INFO << "Realm marked as live via webhook: " << streamName;
+
+                      // Broadcast to WebSocket clients
+                      Json::Value msg;
+                      msg["type"] = "stream_live";
+                      msg["stream_key"] = streamName;
+                      msg["is_live"] = true;
+                      StreamWebSocketController::broadcastStatsUpdate(msg);
+
+                      // Trigger immediate stats fetch
+                      StatsService::getInstance().updateStreamStats(streamName);
+
+                      // Pre-warm thumbnail cache so it's ready when users see the stream
+                      // This makes an async request to generate the thumbnail in the background
+                      auto client = HttpClient::newHttpClient("http://localhost:8088");
+                      auto req = HttpRequest::newHttpRequest();
+                      req->setPath("/thumb/" + streamName + ".webp");
+                      req->setMethod(drogon::Get);
+                      client->sendRequest(req, [streamName](ReqResult result, const HttpResponsePtr& response) {
+                          if (result == ReqResult::Ok && response && response->statusCode() == k200OK) {
+                              LOG_INFO << "Thumbnail pre-warmed for stream: " << streamName;
+                          } else {
+                              LOG_DEBUG << "Thumbnail pre-warm pending for: " << streamName << " (stream may still be initializing)";
+                          }
+                      }, 10.0);  // 10 second timeout for thumbnail generation
+
+                      // Start restream destinations if realm has any
+                      if (!r.empty()) {
+                          int64_t realmId = r[0]["id"].as<int64_t>();
+                          RestreamService::getInstance().startAllDestinations(streamName, realmId);
+                      }
+                  }
+                  >> [streamName](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to mark realm live via webhook: " << e.base().what();
+                  };
+    }
+    else if (eventType == "streamDeleted" || eventType == "stream.deleted" || eventType == "unpublish") {
+        // Stream ended - mark realm as offline immediately
+        LOG_INFO << "Stream ended via webhook: " << streamName;
+
+        *dbClient << "UPDATE realms SET is_live = false, viewer_count = 0, "
+                    "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1 RETURNING id"
+                  << streamName
+                  >> [streamName](const Result& r) {
+                      LOG_INFO << "Realm marked as offline via webhook: " << streamName;
+
+                      // Broadcast to WebSocket clients
+                      Json::Value msg;
+                      msg["type"] = "stream_offline";
+                      msg["stream_key"] = streamName;
+                      msg["is_live"] = false;
+                      StreamWebSocketController::broadcastStatsUpdate(msg);
+
+                      // Stop all restream destinations
+                      if (!r.empty()) {
+                          int64_t realmId = r[0]["id"].as<int64_t>();
+                          RestreamService::getInstance().stopAllDestinations(streamName, realmId);
+                      }
+                  }
+                  >> [streamName](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to mark realm offline via webhook: " << e.base().what();
+                  };
+    }
+    else if (eventType == "sessionCreated" || eventType == "viewer.connected") {
+        // Viewer connected
+        LOG_INFO << "Viewer connected to stream: " << streamName;
+        StatsService::getInstance().updateStreamStats(streamName);
+    }
+    else if (eventType == "sessionDeleted" || eventType == "viewer.disconnected") {
+        // Viewer disconnected
+        LOG_INFO << "Viewer disconnected from stream: " << streamName;
+        StatsService::getInstance().updateStreamStats(streamName);
+    }
+
+    // Always respond with success to acknowledge the webhook
+    callback(jsonOk(json({{"success", true}, {"message", "Webhook processed"}})));
+}
+
+void StreamController::handleOmeAdmission(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Admission webhook - validates if a stream is allowed to publish/play
+    // OME sends: { "client": {...}, "request": { "direction", "protocol", "status", "url", ... } }
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        LOG_WARN << "OME admission webhook received with invalid JSON";
+        callback(jsonError("Invalid JSON", k400BadRequest));
+        return;
+    }
+
+    const auto& payload = *jsonPtr;
+    LOG_INFO << "OME Admission webhook: " << payload.toStyledString();
+
+    // Check if this is a "closing" status - just acknowledge it
+    if (payload.isMember("request") && payload["request"].isMember("status")) {
+        std::string status = payload["request"]["status"].asString();
+        if (status == "closing") {
+            LOG_INFO << "OME admission closing notification";
+            Json::Value response;
+            callback(jsonOk(response));  // Empty response for closing
+            return;
+        }
+    }
+
+    // Extract stream key from URL: rtmp://host:port/app/STREAM_KEY or similar
+    std::string streamKey;
+    if (payload.isMember("request") && payload["request"].isMember("url")) {
+        std::string url = payload["request"]["url"].asString();
+        // URL format: scheme://host[:port]/app/stream_key[/file][?query]
+        // Find the stream key after /app/
+        size_t appPos = url.find("/app/");
+        if (appPos != std::string::npos) {
+            std::string afterApp = url.substr(appPos + 5);  // Skip "/app/"
+            // Remove any trailing path or query string
+            size_t endPos = afterApp.find_first_of("/?");
+            if (endPos != std::string::npos) {
+                streamKey = afterApp.substr(0, endPos);
+            } else {
+                streamKey = afterApp;
+            }
+        }
+        LOG_INFO << "Extracted stream key from URL: " << streamKey << " (URL: " << url << ")";
+    }
+
+    if (streamKey.empty()) {
+        LOG_WARN << "OME admission webhook: could not extract stream key, allowing by default";
+        Json::Value response;
+        response["allowed"] = true;
+        callback(jsonOk(response));
+        return;
+    }
+
+    // Check direction - only validate "incoming" (publish) requests
+    std::string direction;
+    if (payload.isMember("request") && payload["request"].isMember("direction")) {
+        direction = payload["request"]["direction"].asString();
+    }
+
+    if (direction == "outgoing") {
+        // Playback request - allow all for now (could add viewer auth later)
+        LOG_INFO << "Allowing outgoing (playback) request for: " << streamKey;
+        Json::Value response;
+        response["allowed"] = true;
+        callback(jsonOk(response));
+        return;
+    }
+
+    // Validate stream key against database for incoming (publish) requests
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id FROM realms WHERE stream_key = $1 AND is_active = true"
+              << streamKey
+              >> [callback, streamKey](const Result& r) {
+                  Json::Value response;
+                  if (!r.empty()) {
+                      LOG_INFO << "Stream key validated for admission: " << streamKey;
+                      response["allowed"] = true;
+
+                      // Mark stream as live immediately when publishing is approved
+                      int64_t realmId = r[0]["id"].as<int64_t>();
+                      auto db = app().getDbClient();
+                      *db << "UPDATE realms SET is_live = true, viewer_count = 0, "
+                            "updated_at = CURRENT_TIMESTAMP WHERE id = $1"
+                          << realmId
+                          >> [streamKey, realmId](const Result&) {
+                              LOG_INFO << "Realm marked live on admission: " << streamKey;
+
+                              // Broadcast to WebSocket clients
+                              Json::Value msg;
+                              msg["type"] = "stream_live";
+                              msg["stream_key"] = streamKey;
+                              msg["is_live"] = true;
+                              StreamWebSocketController::broadcastStatsUpdate(msg);
+
+                              // Trigger stats fetch
+                              StatsService::getInstance().updateStreamStats(streamKey);
+
+                              // Start restream destinations
+                              RestreamService::getInstance().startAllDestinations(streamKey, realmId);
+                          }
+                          >> [streamKey](const DrogonDbException& e) {
+                              LOG_ERROR << "Failed to mark realm live on admission: " << e.base().what();
+                          };
+                  } else {
+                      LOG_WARN << "Invalid stream key rejected: " << streamKey;
+                      response["allowed"] = false;
+                      response["reason"] = "Invalid or inactive stream key";
+                  }
+                  callback(jsonOk(response));
+              }
+              >> [callback, streamKey](const DrogonDbException& e) {
+                  LOG_ERROR << "Database error during admission check: " << e.base().what();
+                  // Allow on DB error to prevent blocking legitimate streams
+                  Json::Value response;
+                  response["allowed"] = true;
+                  callback(jsonOk(response));
+              };
 }
\ No newline at end of file
diff --git a/backend/src/controllers/StreamController.h b/backend/src/controllers/StreamController.h
index 6ce77be..068cd60 100644
--- a/backend/src/controllers/StreamController.h
+++ b/backend/src/controllers/StreamController.h
@@ -18,33 +18,43 @@ public:
     ADD_METHOD_TO(StreamController::getActiveStreams, "/api/stream/active", Get);
     ADD_METHOD_TO(StreamController::issueViewerToken, "/api/stream/token/{1}", Get);
     ADD_METHOD_TO(StreamController::heartbeat, "/api/stream/heartbeat/{1}", Post);
+    // OvenMediaEngine webhook endpoints
+    ADD_METHOD_TO(StreamController::handleOmeWebhook, "/api/webhook/ome", Post);
+    ADD_METHOD_TO(StreamController::handleOmeAdmission, "/api/webhook/ome/admission", Post);
     METHOD_LIST_END
 
     void health(const HttpRequestPtr &req,
                 std::function<void(const HttpResponsePtr &)> &&callback);
-    
+
     void validateStreamKey(const HttpRequestPtr &req,
                           std::function<void(const HttpResponsePtr &)> &&callback,
                           const std::string &key);
-    
+
     void disconnectStream(const HttpRequestPtr &req,
                          std::function<void(const HttpResponsePtr &)> &&callback,
                          const std::string &streamId);
-    
+
     void getStreamStats(const HttpRequestPtr &req,
                        std::function<void(const HttpResponsePtr &)> &&callback,
                        const std::string &streamKey);
-    
+
     void getActiveStreams(const HttpRequestPtr &req,
                          std::function<void(const HttpResponsePtr &)> &&callback);
-    
+
     void issueViewerToken(const HttpRequestPtr &req,
                          std::function<void(const HttpResponsePtr &)> &&callback,
                          const std::string &streamKey);
-    
+
     void heartbeat(const HttpRequestPtr &req,
                   std::function<void(const HttpResponsePtr &)> &&callback,
                   const std::string &streamKey);
+
+    // OvenMediaEngine webhook handlers
+    void handleOmeWebhook(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void handleOmeAdmission(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
 };
 
 class StreamWebSocketController : public WebSocketController<StreamWebSocketController> {
diff --git a/backend/src/controllers/UserController.cpp b/backend/src/controllers/UserController.cpp
index b0d19c4..9d4c6d9 100644
--- a/backend/src/controllers/UserController.cpp
+++ b/backend/src/controllers/UserController.cpp
@@ -1,5 +1,10 @@
 #include "UserController.h"
 #include "../services/DatabaseService.h"
+#include "../services/CensorService.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include "../common/FileUtils.h"
+#include "../common/FileValidation.h"
 #include <drogon/MultiPart.h>
 #include <drogon/Cookie.h>
 #include <fstream>
@@ -7,52 +12,25 @@
 #include <sstream>
 #include <iomanip>
 #include <filesystem>
+#include <openssl/rand.h>
+#include <openssl/sha.h>
+#include <regex>
 
 using namespace drogon::orm;
 
 namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
-    std::string generateRandomFilename(const std::string& extension) {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
+    // SECURITY FIX: Hash API key with SHA-256 for storage
+    std::string hashApiKey(const std::string& apiKey) {
+        unsigned char hash[SHA256_DIGEST_LENGTH];
+        SHA256(reinterpret_cast<const unsigned char*>(apiKey.c_str()), apiKey.length(), hash);
+
         std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
+        for (int i = 0; i < SHA256_DIGEST_LENGTH; i++) {
+            ss << std::hex << std::setfill('0') << std::setw(2) << static_cast<int>(hash[i]);
         }
-        
-        return ss.str() + "." + extension;
+        return ss.str();
     }
-    
-    bool ensureDirectoryExists(const std::string& path) {
-        try {
-            std::filesystem::create_directories(path);
-            // Set permissions to 755
-            std::filesystem::permissions(path,
-                std::filesystem::perms::owner_all |
-                std::filesystem::perms::group_read | std::filesystem::perms::group_exec |
-                std::filesystem::perms::others_read | std::filesystem::perms::others_exec
-            );
-            return true;
-        } catch (const std::exception& e) {
-            LOG_ERROR << "Failed to create directory " << path << ": " << e.what();
-            return false;
-        }
-    }
-    
+
     // Helper to set httpOnly auth cookie
     void setAuthCookie(const HttpResponsePtr& resp, const std::string& token) {
         Cookie authCookie("auth_token", token);
@@ -74,89 +52,92 @@ namespace {
     }
 }
 
-UserInfo UserController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    
-    // First try to get from cookie
-    std::string token = req->getCookie("auth_token");
-    
-    // Fallback to Authorization header for API clients
-    if (token.empty()) {
-        std::string auth = req->getHeader("Authorization");
-        if (!auth.empty() && auth.substr(0, 7) == "Bearer ") {
-            token = auth.substr(7);
-        }
-    }
-    
-    if (!token.empty()) {
-        AuthService::getInstance().validateToken(token, user);
-    }
-    
-    return user;
-}
-
 void UserController::register_(const HttpRequestPtr &req,
                               std::function<void(const HttpResponsePtr &)> &&callback) {
     try {
         LOG_DEBUG << "Registration request received";
         
-        auto json = req->getJsonObject();
-        if (!json) {
-            LOG_WARN << "Invalid JSON in registration request";
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        // Check if all required fields exist before accessing them
-        if (!(*json).isMember("username") || 
-            !(*json).isMember("password") || 
-            !(*json).isMember("publicKey") || 
-            !(*json).isMember("fingerprint")) {
-            LOG_WARN << "Missing required fields in registration request";
-            callback(jsonError("Missing required fields"));
-            return;
-        }
-        
-        // Safely extract the values
-        std::string username = (*json)["username"].asString();
-        std::string password = (*json)["password"].asString();
-        std::string publicKey = (*json)["publicKey"].asString();
-        std::string fingerprint = (*json)["fingerprint"].asString();
-        
-        // Validate that none of the strings are empty
-        if (username.empty() || password.empty() || publicKey.empty() || fingerprint.empty()) {
-            LOG_WARN << "Empty required fields in registration request";
-            callback(jsonError("All fields are required"));
-            return;
-        }
-        
-        // Additional validation
-        if (username.length() > 30) {
-            callback(jsonError("Username too long (max 30 characters)"));
-            return;
-        }
-        
-        if (password.length() < 8) {
-            callback(jsonError("Password must be at least 8 characters"));
-            return;
-        }
-        
-        LOG_INFO << "Processing registration for user: " << username;
-        
-        AuthService::getInstance().registerUser(username, password, publicKey, fingerprint,
-            [callback, username](bool success, const std::string& error, int64_t userId) {
-                if (success) {
-                    LOG_INFO << "User registered successfully: " << username << " (ID: " << userId << ")";
-                    Json::Value resp;
-                    resp["success"] = true;
-                    resp["userId"] = static_cast<Json::Int64>(userId);
-                    callback(jsonResp(resp));
-                } else {
-                    LOG_WARN << "Registration failed for " << username << ": " << error;
-                    callback(jsonError(error));
-                }
-            });
-            
+        // First check if registration is enabled
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT registration_enabled FROM chat_settings WHERE id = 1"
+                  >> [req, callback](const Result& r) {
+                      bool registrationEnabled = true;
+                      if (!r.empty()) {
+                          registrationEnabled = r[0]["registration_enabled"].as<bool>();
+                      }
+
+                      if (!registrationEnabled) {
+                          LOG_WARN << "Registration attempt blocked - registration is disabled";
+                          callback(jsonError("Registration is currently disabled"));
+                          return;
+                      }
+
+                      // Continue with registration
+                      auto json = req->getJsonObject();
+                      if (!json) {
+                          LOG_WARN << "Invalid JSON in registration request";
+                          callback(jsonError("Invalid JSON"));
+                          return;
+                      }
+
+                      // Check if all required fields exist before accessing them
+                      if (!(*json).isMember("username") ||
+                          !(*json).isMember("password") ||
+                          !(*json).isMember("publicKey") ||
+                          !(*json).isMember("fingerprint")) {
+                          LOG_WARN << "Missing required fields in registration request";
+                          callback(jsonError("Missing required fields"));
+                          return;
+                      }
+
+                      // Safely extract the values
+                      std::string username = (*json)["username"].asString();
+                      std::string password = (*json)["password"].asString();
+                      std::string publicKey = (*json)["publicKey"].asString();
+                      std::string fingerprint = (*json)["fingerprint"].asString();
+
+                      // Block registration if username contains censored words
+                      if (CensorService::getInstance().containsCensoredWords(username)) {
+                          callback(jsonError("Username contains prohibited content"));
+                          return;
+                      }
+
+                      // Validate that none of the strings are empty
+                      if (username.empty() || password.empty() || publicKey.empty() || fingerprint.empty()) {
+                          LOG_WARN << "Empty required fields in registration request";
+                          callback(jsonError("All fields are required"));
+                          return;
+                      }
+
+                      // Additional validation
+                      if (username.length() > 30) {
+                          callback(jsonError("Username too long (max 30 characters)"));
+                          return;
+                      }
+
+                      if (password.length() < 8) {
+                          callback(jsonError("Password must be at least 8 characters"));
+                          return;
+                      }
+
+                      LOG_INFO << "Processing registration for user: " << username;
+
+                      AuthService::getInstance().registerUser(username, password, publicKey, fingerprint,
+                          [callback, username](bool success, const std::string& error, int64_t userId) {
+                              if (success) {
+                                  LOG_INFO << "User registered successfully: " << username << " (ID: " << userId << ")";
+                                  Json::Value resp;
+                                  resp["success"] = true;
+                                  resp["userId"] = static_cast<Json::Int64>(userId);
+                                  callback(jsonResp(resp));
+                              } else {
+                                  LOG_WARN << "Registration failed for " << username << ": " << error;
+                                  callback(jsonError(error));
+                              }
+                          });
+                  }
+                  >> DB_ERROR_MSG(callback, "check registration status", "Failed to check registration status");
+
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in register_: " << e.what();
         callback(jsonError("Internal server error"));
@@ -197,20 +178,29 @@ void UserController::login(const HttpRequestPtr &req,
             [callback, username](bool success, const std::string& token, const UserInfo& user) {
                 if (success) {
                     LOG_INFO << "Login successful for user: " << username;
-                    
+
                     Json::Value resp;
                     resp["success"] = true;
-                    // Don't send token in body for cookie-based auth
+                    // Send token in body for WebSocket auth (cookie still used for HTTP requests)
+                    resp["token"] = token;
                     resp["user"]["id"] = static_cast<Json::Int64>(user.id);
                     resp["user"]["username"] = user.username;
                     resp["user"]["isAdmin"] = user.isAdmin;
                     resp["user"]["isStreamer"] = user.isStreamer;
+                    resp["user"]["isRestreamer"] = user.isRestreamer;
+                    resp["user"]["isBot"] = user.isBot;
+                    resp["user"]["isTexter"] = user.isTexter;
                     resp["user"]["isPgpOnly"] = user.isPgpOnly;
                     resp["user"]["bio"] = user.bio;
                     resp["user"]["avatarUrl"] = user.avatarUrl;
+                    resp["user"]["bannerUrl"] = user.bannerUrl;
+                    resp["user"]["bannerPosition"] = user.bannerPosition;
+                    resp["user"]["bannerZoom"] = user.bannerZoom;
+                    resp["user"]["bannerPositionX"] = user.bannerPositionX;
+                    resp["user"]["graffitiUrl"] = user.graffitiUrl;
                     resp["user"]["pgpOnlyEnabledAt"] = user.pgpOnlyEnabledAt;
                     resp["user"]["colorCode"] = user.colorCode;
-                    
+
                     auto response = jsonResp(resp);
                     setAuthCookie(response, token);
                     callback(response);
@@ -313,17 +303,26 @@ void UserController::pgpVerify(const HttpRequestPtr &req,
                 if (success) {
                     Json::Value resp;
                     resp["success"] = true;
-                    // Don't send token in body for cookie-based auth
+                    // Send token in body for WebSocket auth (cookie still used for HTTP requests)
+                    resp["token"] = token;
                     resp["user"]["id"] = static_cast<Json::Int64>(user.id);
                     resp["user"]["username"] = user.username;
                     resp["user"]["isAdmin"] = user.isAdmin;
                     resp["user"]["isStreamer"] = user.isStreamer;
+                    resp["user"]["isRestreamer"] = user.isRestreamer;
+                    resp["user"]["isBot"] = user.isBot;
+                    resp["user"]["isTexter"] = user.isTexter;
                     resp["user"]["isPgpOnly"] = user.isPgpOnly;
                     resp["user"]["bio"] = user.bio;
                     resp["user"]["avatarUrl"] = user.avatarUrl;
+                    resp["user"]["bannerUrl"] = user.bannerUrl;
+                    resp["user"]["bannerPosition"] = user.bannerPosition;
+                    resp["user"]["bannerZoom"] = user.bannerZoom;
+                    resp["user"]["bannerPositionX"] = user.bannerPositionX;
+                    resp["user"]["graffitiUrl"] = user.graffitiUrl;
                     resp["user"]["pgpOnlyEnabledAt"] = user.pgpOnlyEnabledAt;
                     resp["user"]["colorCode"] = user.colorCode;
-                    
+
                     auto response = jsonResp(resp);
                     setAuthCookie(response, token);
                     callback(response);
@@ -347,7 +346,7 @@ void UserController::getCurrentUser(const HttpRequestPtr &req,
         }
         
         auto dbClient = app().getDbClient();
-        *dbClient << "SELECT id, username, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
+        *dbClient << "SELECT id, username, is_admin, is_streamer, is_restreamer, is_bot, is_texter, is_sticker_creator, is_uploader, is_watch_creator, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, ubercoin_balance, created_at "
                      "FROM users WHERE id = $1"
                   << user.id
                   >> [callback](const Result& r) {
@@ -355,30 +354,61 @@ void UserController::getCurrentUser(const HttpRequestPtr &req,
                           callback(jsonError("User not found", k404NotFound));
                           return;
                       }
-                      
+
                       Json::Value resp;
                       resp["success"] = true;
                       resp["user"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
                       resp["user"]["username"] = r[0]["username"].as<std::string>();
                       resp["user"]["isAdmin"] = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
                       resp["user"]["isStreamer"] = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
+                      resp["user"]["isRestreamer"] = r[0]["is_restreamer"].isNull() ? false : r[0]["is_restreamer"].as<bool>();
+                      resp["user"]["isBot"] = r[0]["is_bot"].isNull() ? false : r[0]["is_bot"].as<bool>();
+                      resp["user"]["isTexter"] = r[0]["is_texter"].isNull() ? false : r[0]["is_texter"].as<bool>();
+                      resp["user"]["isStickerCreator"] = r[0]["is_sticker_creator"].isNull() ? false : r[0]["is_sticker_creator"].as<bool>();
+                      resp["user"]["isUploader"] = r[0]["is_uploader"].isNull() ? false : r[0]["is_uploader"].as<bool>();
+                      resp["user"]["isWatchCreator"] = r[0]["is_watch_creator"].isNull() ? false : r[0]["is_watch_creator"].as<bool>();
                       resp["user"]["isPgpOnly"] = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
                       resp["user"]["bio"] = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
                       resp["user"]["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
+                      resp["user"]["bannerUrl"] = r[0]["banner_url"].isNull() ? "" : r[0]["banner_url"].as<std::string>();
+                      resp["user"]["bannerPosition"] = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                      resp["user"]["bannerZoom"] = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                      resp["user"]["bannerPositionX"] = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                      resp["user"]["graffitiUrl"] = r[0]["graffiti_url"].isNull() ? "" : r[0]["graffiti_url"].as<std::string>();
                       resp["user"]["pgpOnlyEnabledAt"] = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
                       resp["user"]["colorCode"] = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
+                      resp["user"]["ubercoinBalance"] = r[0]["ubercoin_balance"].isNull() ? 0.0 : r[0]["ubercoin_balance"].as<double>();
+                      resp["user"]["createdAt"] = r[0]["created_at"].isNull() ? "" : r[0]["created_at"].as<std::string>();
                       callback(jsonResp(resp));
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get user data: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
+                  >> DB_ERROR(callback, "get user data");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in getCurrentUser: " << e.what();
         callback(jsonError("Internal server error"));
     }
 }
 
+void UserController::getToken(const HttpRequestPtr &req,
+                              std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Return the JWT token for Nakama authentication
+    // This endpoint allows the frontend to fetch the token without storing it in localStorage
+    try {
+        std::string token = req->getCookie("auth_token");
+        if (token.empty()) {
+            callback(jsonError("No auth token", k401Unauthorized));
+            return;
+        }
+
+        Json::Value resp;
+        resp["success"] = true;
+        resp["token"] = token;
+        callback(jsonResp(resp));
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getToken: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
 void UserController::updateProfile(const HttpRequestPtr &req,
                                   std::function<void(const HttpResponsePtr &)> &&callback) {
     try {
@@ -387,28 +417,76 @@ void UserController::updateProfile(const HttpRequestPtr &req,
             callback(jsonError("Unauthorized", k401Unauthorized));
             return;
         }
-        
+
         auto json = req->getJsonObject();
         if (!json) {
             callback(jsonError("Invalid JSON"));
             return;
         }
-        
+
         std::string bio = (*json).isMember("bio") ? (*json)["bio"].asString() : "";
-        
+        int bannerPosition = (*json).isMember("bannerPosition") ? (*json)["bannerPosition"].asInt() : -1;
+        int bannerZoom = (*json).isMember("bannerZoom") ? (*json)["bannerZoom"].asInt() : -1;
+        int bannerPositionX = (*json).isMember("bannerPositionX") ? (*json)["bannerPositionX"].asInt() : -1;
+
+        // Apply censoring to bio
+        bio = CensorService::getInstance().censor(bio);
+
+        // Validate banner position (Y)
+        if (bannerPosition != -1 && (bannerPosition < 0 || bannerPosition > 100)) {
+            callback(jsonError("Banner position must be between 0 and 100"));
+            return;
+        }
+
+        // Validate banner zoom (100-200)
+        if (bannerZoom != -1 && (bannerZoom < 100 || bannerZoom > 200)) {
+            callback(jsonError("Banner zoom must be between 100 and 200"));
+            return;
+        }
+
+        // Validate banner position X (0-100)
+        if (bannerPositionX != -1 && (bannerPositionX < 0 || bannerPositionX > 100)) {
+            callback(jsonError("Banner position X must be between 0 and 100"));
+            return;
+        }
+
         auto dbClient = app().getDbClient();
-        *dbClient << "UPDATE users SET bio = $1 WHERE id = $2"
-                  << bio << user.id
-                  >> [callback](const Result&) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["message"] = "Profile updated successfully";
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update profile: " << e.base().what();
-                      callback(jsonError("Failed to update profile"));
-                  };
+
+        // Build query based on what's being updated
+        bool hasBannerUpdates = (bannerPosition != -1 || bannerZoom != -1 || bannerPositionX != -1);
+
+        if (hasBannerUpdates) {
+            // Update all banner fields along with bio
+            *dbClient << "UPDATE users SET bio = $1, "
+                         "banner_position = COALESCE(NULLIF($2, -1), banner_position), "
+                         "banner_zoom = COALESCE(NULLIF($3, -1), banner_zoom), "
+                         "banner_position_x = COALESCE(NULLIF($4, -1), banner_position_x) "
+                         "WHERE id = $5 "
+                         "RETURNING banner_position, banner_zoom, banner_position_x"
+                      << bio << bannerPosition << bannerZoom << bannerPositionX << user.id
+                      >> [callback](const Result& r) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["message"] = "Profile updated successfully";
+                          if (!r.empty()) {
+                              resp["bannerPosition"] = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                              resp["bannerZoom"] = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                              resp["bannerPositionX"] = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                          }
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR_MSG(callback, "update profile", "Failed to update profile");
+        } else {
+            *dbClient << "UPDATE users SET bio = $1 WHERE id = $2"
+                      << bio << user.id
+                      >> [callback](const Result&) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["message"] = "Profile updated successfully";
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR_MSG(callback, "update profile", "Failed to update profile");
+        }
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in updateProfile: " << e.what();
         callback(jsonError("Internal server error"));
@@ -491,10 +569,7 @@ void UserController::togglePgpOnly(const HttpRequestPtr &req,
                       
                       callback(jsonResp(resp));
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update PGP setting: " << e.base().what();
-                      callback(jsonError("Failed to update setting"));
-                  };
+                  >> DB_ERROR_MSG(callback, "update PGP setting", "Failed to update setting");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in togglePgpOnly: " << e.what();
         callback(jsonError("Internal server error"));
@@ -547,15 +622,9 @@ void UserController::addPgpKey(const HttpRequestPtr &req,
                                    resp["success"] = true;
                                    callback(jsonResp(resp));
                                }
-                               >> [callback](const DrogonDbException& e) {
-                                   LOG_ERROR << "Failed to add PGP key: " << e.base().what();
-                                   callback(jsonError("Failed to add PGP key"));
-                               };
+                               >> DB_ERROR_MSG(callback, "add PGP key", "Failed to add PGP key");
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
+                  >> DB_ERROR(callback, "check PGP key");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in addPgpKey: " << e.what();
         callback(jsonError("Internal server error"));
@@ -591,10 +660,7 @@ void UserController::getPgpKeys(const HttpRequestPtr &req,
                       resp["keys"] = keys;
                       callback(jsonResp(resp));
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get PGP keys: " << e.base().what();
-                      callback(jsonError("Failed to get PGP keys"));
-                  };
+                  >> DB_ERROR_MSG(callback, "get PGP keys", "Failed to get PGP keys");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in getPgpKeys: " << e.what();
         callback(jsonError("Internal server error"));
@@ -619,23 +685,33 @@ void UserController::uploadAvatar(const HttpRequestPtr &req,
         }
         
         const auto& file = parser.getFiles()[0];
-        
+
         // Validate file size (250KB max)
         if (file.fileLength() > 250 * 1024) {
             callback(jsonError("File too large (max 250KB)"));
             return;
         }
-        
-        // Validate file type
-        std::string ext = std::string(file.getFileExtension());
-        if (ext != "jpg" && ext != "jpeg" && ext != "png" && ext != "gif") {
+
+        // Validate file content using magic bytes (not just extension)
+        auto validation = validateImageMagicBytes(file.fileData(), file.fileLength());
+        if (!validation.valid) {
+            LOG_WARN << "Avatar upload rejected: invalid image magic bytes";
+            callback(jsonError("Invalid image file. Only JPEG, PNG, and GIF are allowed."));
+            return;
+        }
+
+        // Only allow jpg, png, gif for avatars (no webp)
+        if (validation.detectedType != "jpeg" && validation.detectedType != "png" && validation.detectedType != "gif") {
             callback(jsonError("Invalid file type (jpg, png, gif only)"));
             return;
         }
-        
+
+        // Use the extension from magic byte validation (ignores client-provided extension)
+        std::string ext = validation.extension.substr(1); // Remove leading dot
+
         // Ensure uploads directory exists
         const std::string uploadDir = "/app/uploads/avatars";
-        if (!ensureDirectoryExists(uploadDir)) {
+        if (!ensureDirectoryExists(uploadDir, true)) {
             callback(jsonError("Failed to create upload directory"));
             return;
         }
@@ -710,34 +786,219 @@ void UserController::uploadAvatar(const HttpRequestPtr &req,
         
         // Store as proper URL path
         std::string avatarUrl = "/uploads/avatars/" + filename;
-        
-        // Update database with the URL
+
+        // First get old avatar path, then update and clean up
         auto dbClient = app().getDbClient();
-        *dbClient << "UPDATE users SET avatar_url = $1 WHERE id = $2"
-                  << avatarUrl << user.id
-                  >> [callback, avatarUrl](const Result&) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["avatarUrl"] = avatarUrl;
-                      callback(jsonResp(resp));
+        *dbClient << "SELECT avatar_url FROM users WHERE id = $1"
+                  << user.id
+                  >> [callback, avatarUrl, userId = user.id, dbClient](const Result& r) {
+                      std::string oldAvatarUrl = "";
+                      if (!r.empty() && !r[0]["avatar_url"].isNull()) {
+                          oldAvatarUrl = r[0]["avatar_url"].as<std::string>();
+                      }
+
+                      // Update database with new avatar URL
+                      *dbClient << "UPDATE users SET avatar_url = $1 WHERE id = $2"
+                                << avatarUrl << userId
+                                >> [callback, avatarUrl, userId, oldAvatarUrl](const Result&) {
+                                    // Delete old avatar file if it exists
+                                    if (!oldAvatarUrl.empty() && oldAvatarUrl.find("/uploads/avatars/") != std::string::npos) {
+                                        std::string oldPath = "/app" + oldAvatarUrl;
+                                        if (std::filesystem::exists(oldPath)) {
+                                            std::filesystem::remove(oldPath);
+                                            LOG_INFO << "Deleted old avatar: " << oldPath;
+                                        }
+                                    }
+
+                                    // Fetch updated user info and generate new token
+                                    AuthService::getInstance().fetchUserInfo(userId,
+                                        [callback, avatarUrl](bool success, const UserInfo& updatedUser) {
+                                            if (success) {
+                                                std::string newToken = AuthService::getInstance().generateToken(updatedUser);
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["avatarUrl"] = avatarUrl;
+                                                resp["token"] = newToken;
+                                                auto response = jsonResp(resp);
+                                                setAuthCookie(response, newToken);
+                                                callback(response);
+                                            } else {
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["avatarUrl"] = avatarUrl;
+                                                callback(jsonResp(resp));
+                                            }
+                                        });
+                                }
+                                >> DB_ERROR_MSG(callback, "update avatar", "Failed to update avatar");
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update avatar: " << e.base().what();
-                      callback(jsonError("Failed to update avatar"));
-                  };
+                  >> DB_ERROR(callback, "get old avatar");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in uploadAvatar: " << e.what();
         callback(jsonError("Internal server error"));
     }
 }
 
+void UserController::uploadBanner(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        // Validate file size (500KB max for banners)
+        if (file.fileLength() > 500 * 1024) {
+            callback(jsonError("File too large (max 500KB)"));
+            return;
+        }
+
+        // Validate file content using magic bytes (not just extension)
+        auto validation = validateImageMagicBytes(file.fileData(), file.fileLength());
+        if (!validation.valid) {
+            LOG_WARN << "Banner upload rejected: invalid image magic bytes";
+            callback(jsonError("Invalid image file. Only JPEG, PNG, and GIF are allowed."));
+            return;
+        }
+
+        // Only allow jpg, png, gif for banners (no webp)
+        if (validation.detectedType != "jpeg" && validation.detectedType != "png" && validation.detectedType != "gif") {
+            callback(jsonError("Invalid file type (jpg, png, gif only)"));
+            return;
+        }
+
+        // Use the extension from magic byte validation (ignores client-provided extension)
+        std::string ext = validation.extension.substr(1); // Remove leading dot
+
+        // Ensure uploads directory exists
+        const std::string uploadDir = "/app/uploads/banners";
+        if (!ensureDirectoryExists(uploadDir, true)) {
+            callback(jsonError("Failed to create upload directory"));
+            return;
+        }
+
+        // Generate unique filename using hex string
+        std::string filename = generateRandomFilename(ext);
+
+        // Build the full file path
+        std::string fullPath = uploadDir + "/" + filename;
+
+        // Ensure the file doesn't already exist (extremely unlikely with random names)
+        if (std::filesystem::exists(fullPath)) {
+            LOG_WARN << "File already exists, regenerating name";
+            filename = generateRandomFilename(ext);
+            fullPath = uploadDir + "/" + filename;
+        }
+
+        try {
+            // Get the uploaded file data and size
+            const char* fileData = file.fileData();
+            size_t fileSize = file.fileLength();
+
+            if (!fileData || fileSize == 0) {
+                LOG_ERROR << "Empty file data";
+                callback(jsonError("Empty file uploaded"));
+                return;
+            }
+
+            // Write file data directly to avoid directory creation issues
+            std::ofstream ofs(fullPath, std::ios::binary);
+            if (!ofs) {
+                LOG_ERROR << "Failed to open file for writing: " << fullPath;
+                callback(jsonError("Failed to create file"));
+                return;
+            }
+
+            ofs.write(fileData, fileSize);
+            ofs.close();
+
+            if (!ofs) {
+                LOG_ERROR << "Failed to write file data";
+                callback(jsonError("Failed to write file"));
+                return;
+            }
+
+            // Verify it's actually a file
+            if (!std::filesystem::is_regular_file(fullPath)) {
+                LOG_ERROR << "Created path is not a regular file: " << fullPath;
+                std::filesystem::remove_all(fullPath); // Clean up
+                callback(jsonError("Failed to save banner correctly"));
+                return;
+            }
+
+            // Set file permissions to 644
+            std::filesystem::permissions(fullPath,
+                std::filesystem::perms::owner_read | std::filesystem::perms::owner_write |
+                std::filesystem::perms::group_read |
+                std::filesystem::perms::others_read
+            );
+
+            LOG_INFO << "Banner saved successfully to: " << fullPath;
+            LOG_INFO << "File size: " << std::filesystem::file_size(fullPath) << " bytes";
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception while saving banner: " << e.what();
+            // Clean up any partial files/directories
+            if (std::filesystem::exists(fullPath)) {
+                std::filesystem::remove_all(fullPath);
+            }
+            callback(jsonError("Failed to save banner"));
+            return;
+        }
+
+        // Store as proper URL path
+        std::string bannerUrl = "/uploads/banners/" + filename;
+
+        // Update database with the URL and get new token
+        auto dbClient = app().getDbClient();
+        *dbClient << "UPDATE users SET banner_url = $1 WHERE id = $2"
+                  << bannerUrl << user.id
+                  >> [callback, bannerUrl, userId = user.id](const Result&) {
+                      // Fetch updated user info and generate new token
+                      AuthService::getInstance().fetchUserInfo(userId,
+                          [callback, bannerUrl](bool success, const UserInfo& updatedUser) {
+                              if (success) {
+                                  std::string newToken = AuthService::getInstance().generateToken(updatedUser);
+                                  Json::Value resp;
+                                  resp["success"] = true;
+                                  resp["bannerUrl"] = bannerUrl;
+                                  resp["token"] = newToken;
+                                  auto response = jsonResp(resp);
+                                  setAuthCookie(response, newToken);
+                                  callback(response);
+                              } else {
+                                  Json::Value resp;
+                                  resp["success"] = true;
+                                  resp["bannerUrl"] = bannerUrl;
+                                  callback(jsonResp(resp));
+                              }
+                          });
+                  }
+                  >> DB_ERROR_MSG(callback, "update banner", "Failed to update banner");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadBanner: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
 void UserController::getProfile(const HttpRequestPtr &,
                                std::function<void(const HttpResponsePtr &)> &&callback,
                                const std::string &username) {
     try {
         auto dbClient = app().getDbClient();
-        *dbClient << "SELECT u.username, u.bio, u.avatar_url, u.created_at, "
-                     "u.is_pgp_only, u.pgp_only_enabled_at, u.user_color "
+        *dbClient << "SELECT u.username, u.bio, u.avatar_url, u.banner_url, u.banner_position, "
+                     "u.banner_zoom, u.banner_position_x, u.graffiti_url, u.created_at, "
+                     "u.is_pgp_only, u.pgp_only_enabled_at, u.user_color, u.ubercoin_balance "
                      "FROM users u WHERE u.username = $1"
                   << username
                   >> [callback](const Result& r) {
@@ -745,23 +1006,26 @@ void UserController::getProfile(const HttpRequestPtr &,
                           callback(jsonError("User not found", k404NotFound));
                           return;
                       }
-                      
+
                       Json::Value resp;
                       resp["success"] = true;
                       resp["profile"]["username"] = r[0]["username"].as<std::string>();
                       resp["profile"]["bio"] = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
                       resp["profile"]["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
+                      resp["profile"]["bannerUrl"] = r[0]["banner_url"].isNull() ? "" : r[0]["banner_url"].as<std::string>();
+                      resp["profile"]["bannerPosition"] = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                      resp["profile"]["bannerZoom"] = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                      resp["profile"]["bannerPositionX"] = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                      resp["profile"]["graffitiUrl"] = r[0]["graffiti_url"].isNull() ? "" : r[0]["graffiti_url"].as<std::string>();
                       resp["profile"]["createdAt"] = r[0]["created_at"].as<std::string>();
                       resp["profile"]["isPgpOnly"] = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
                       resp["profile"]["pgpOnlyEnabledAt"] = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
                       resp["profile"]["colorCode"] = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                      
+                      resp["profile"]["ubercoinBalance"] = r[0]["ubercoin_balance"].isNull() ? 0.0 : r[0]["ubercoin_balance"].as<double>();
+
                       callback(jsonResp(resp));
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
+                  >> DB_ERROR(callback, "get profile");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in getProfile: " << e.what();
         callback(jsonError("Internal server error"));
@@ -794,10 +1058,7 @@ void UserController::getUserPgpKeys(const HttpRequestPtr &,
                       resp["keys"] = keys;
                       callback(jsonResp(resp));
                   }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get user PGP keys: " << e.base().what();
-                      callback(jsonError("Failed to get PGP keys"));
-                  };
+                  >> DB_ERROR_MSG(callback, "get user PGP keys", "Failed to get PGP keys");
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in getUserPgpKeys: " << e.what();
         callback(jsonError("Internal server error"));
@@ -879,9 +1140,9 @@ void UserController::getAvailableColors(const HttpRequestPtr &,
         // Define available colors for user profiles
         Json::Value resp;
         resp["success"] = true;
-        
+
         Json::Value colors(Json::arrayValue);
-        
+
         // Add predefined color options
         colors.append("#561D5E");  // Default purple
         colors.append("#1E88E5");  // Blue
@@ -893,11 +1154,1427 @@ void UserController::getAvailableColors(const HttpRequestPtr &,
         colors.append("#FFB300");  // Amber
         colors.append("#546E7A");  // Blue Grey
         colors.append("#D81B60");  // Pink
-        
+
         resp["colors"] = colors;
         callback(jsonResp(resp));
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception in getAvailableColors: " << e.what();
         callback(jsonError("Internal server error"));
     }
+}
+
+void UserController::getBotApiKeys(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // First check if user has bot role
+        *dbClient << "SELECT is_bot FROM users WHERE id = $1"
+                  << user.id
+                  >> [dbClient, user, callback](const Result& r) {
+                      if (r.empty() || !r[0]["is_bot"].as<bool>()) {
+                          callback(jsonError("Bot role required", k403Forbidden));
+                          return;
+                      }
+
+                      // Get user's API keys (including expiration and scopes)
+                      // Note: is_active filter kept for backwards compatibility with any old soft-deleted keys
+                      *dbClient << "SELECT id, name, scopes, created_at, last_used_at, expires_at FROM bot_api_keys "
+                                   "WHERE user_id = $1 AND is_active = true ORDER BY created_at DESC"
+                                << user.id
+                                >> [callback](const Result& r2) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    Json::Value keys(Json::arrayValue);
+
+                                    for (const auto& row : r2) {
+                                        Json::Value key;
+                                        key["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                        key["name"] = row["name"].as<std::string>();
+                                        key["scopes"] = row["scopes"].isNull() ? "chat:write" : row["scopes"].as<std::string>();
+                                        key["createdAt"] = row["created_at"].as<std::string>();
+                                        key["lastUsedAt"] = row["last_used_at"].isNull() ? "" : row["last_used_at"].as<std::string>();
+                                        key["expiresAt"] = row["expires_at"].isNull() ? "" : row["expires_at"].as<std::string>();
+                                        keys.append(key);
+                                    }
+
+                                    resp["keys"] = keys;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "get bot API keys", "Failed to get API keys");
+                  }
+                  >> DB_ERROR(callback, "check bot role");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getBotApiKeys: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::createBotApiKey(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("name") || (*json)["name"].asString().empty()) {
+            callback(jsonError("API key name is required"));
+            return;
+        }
+
+        std::string keyName = (*json)["name"].asString();
+
+        // Validate name length
+        if (keyName.length() > 100) {
+            callback(jsonError("API key name too long (max 100 characters)"));
+            return;
+        }
+
+        // SECURITY FIX: Validate key name format (alphanumeric, underscore, hyphen only)
+        std::regex namePattern("^[a-zA-Z0-9_-]+$");
+        if (!std::regex_match(keyName, namePattern)) {
+            callback(jsonError("API key name can only contain letters, numbers, underscores, and hyphens"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // First check if user has bot role AND count existing keys
+        *dbClient << "SELECT u.is_bot, (SELECT COUNT(*) FROM bot_api_keys WHERE user_id = $1) as key_count "
+                     "FROM users u WHERE u.id = $1"
+                  << user.id
+                  >> [dbClient, user, keyName, callback](const Result& r) {
+                      if (r.empty() || !r[0]["is_bot"].as<bool>()) {
+                          callback(jsonError("Bot role required", k403Forbidden));
+                          return;
+                      }
+
+                      // SECURITY FIX: Enforce max 2 API keys per user
+                      int64_t keyCount = r[0]["key_count"].as<int64_t>();
+                      if (keyCount >= 2) {
+                          callback(jsonError("Maximum of 2 API keys allowed per user. Delete an existing key first.", k403Forbidden));
+                          return;
+                      }
+
+                      // SECURITY FIX: Generate cryptographically secure API key using OpenSSL RAND_bytes
+                      unsigned char bytes[32];
+                      if (RAND_bytes(bytes, sizeof(bytes)) != 1) {
+                          callback(jsonError("Failed to generate secure API key", k500InternalServerError));
+                          return;
+                      }
+                      std::stringstream ss;
+                      ss << "key_";
+                      for (int i = 0; i < 32; i++) {
+                          ss << std::hex << std::setfill('0') << std::setw(2) << static_cast<int>(bytes[i]);
+                      }
+                      std::string apiKey = ss.str();
+
+                      // SECURITY FIX: Hash the API key before storing (plaintext never stored)
+                      std::string apiKeyHash = hashApiKey(apiKey);
+
+                      // Insert the HASHED API key with 1 year expiration
+                      *dbClient << "INSERT INTO bot_api_keys (user_id, api_key, name, expires_at) "
+                                   "VALUES ($1, $2, $3, CURRENT_TIMESTAMP + INTERVAL '1 year') RETURNING id, expires_at"
+                                << user.id << apiKeyHash << keyName
+                                >> [callback, apiKey, keyName](const Result& r2) {
+                                    if (r2.empty()) {
+                                        callback(jsonError("Failed to create API key"));
+                                        return;
+                                    }
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["key"]["id"] = static_cast<Json::Int64>(r2[0]["id"].as<int64_t>());
+                                    resp["key"]["name"] = keyName;
+                                    resp["key"]["apiKey"] = apiKey;  // Only shown once!
+                                    resp["key"]["expiresAt"] = r2[0]["expires_at"].as<std::string>();
+                                    resp["message"] = "API key created. Save it now - it won't be shown again!";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "create bot API key", "Failed to create API key");
+                  }
+                  >> DB_ERROR(callback, "check bot role");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in createBotApiKey: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::deleteBotApiKey(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &keyId) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        int64_t keyIdInt;
+        try {
+            keyIdInt = std::stoll(keyId);
+        } catch (...) {
+            callback(jsonError("Invalid key ID"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Hard delete the key (only if it belongs to the user)
+        *dbClient << "DELETE FROM bot_api_keys WHERE id = $1 AND user_id = $2"
+                  << keyIdInt << user.id
+                  >> [callback](const Result& r) {
+                      if (r.affectedRows() == 0) {
+                          callback(jsonError("API key not found", k404NotFound));
+                          return;
+                      }
+
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "API key deleted";
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR_MSG(callback, "delete bot API key", "Failed to delete API key");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deleteBotApiKey: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::validateBotApiKey(const HttpRequestPtr &req,
+                                       std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        auto json = req->getJsonObject();
+        if (!json || !json->isMember("apiKey")) {
+            callback(jsonError("API key is required"));
+            return;
+        }
+
+        std::string apiKey = (*json)["apiKey"].asString();
+
+        // SECURITY FIX: Hash the incoming key to compare with stored hash
+        std::string apiKeyHash = hashApiKey(apiKey);
+
+        auto dbClient = app().getDbClient();
+
+        // Validate API key and get user info
+        // SECURITY FIX: Compare hashed key, check user not disabled, key not expired
+        *dbClient << "SELECT b.id as key_id, b.user_id, b.scopes, u.username, u.user_color, u.avatar_url "
+                     "FROM bot_api_keys b "
+                     "JOIN users u ON b.user_id = u.id "
+                     "WHERE b.api_key = $1 AND b.is_active = true AND u.is_disabled = false "
+                     "AND (b.expires_at IS NULL OR b.expires_at > CURRENT_TIMESTAMP)"
+                  << apiKeyHash
+                  >> [callback, apiKey](const Result& r) {
+                      if (r.empty()) {
+                          Json::Value resp;
+                          resp["success"] = false;
+                          resp["valid"] = false;
+                          resp["error"] = "Invalid API key";
+                          callback(jsonResp(resp));
+                          return;
+                      }
+
+                      const auto& row = r[0];
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["valid"] = true;
+                      resp["keyId"] = static_cast<Json::Int64>(row["key_id"].as<int64_t>());
+                      resp["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+                      resp["username"] = row["username"].as<std::string>();
+                      resp["userColor"] = row["user_color"].isNull() ? "#808080" : row["user_color"].as<std::string>();
+                      resp["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      resp["scopes"] = row["scopes"].isNull() ? "chat:rw" : row["scopes"].as<std::string>();
+                      callback(jsonResp(resp));
+
+                      // Update last_used_at asynchronously
+                      int64_t keyId = row["key_id"].as<int64_t>();
+                      app().getDbClient()->execSqlAsync(
+                          "UPDATE bot_api_keys SET last_used_at = CURRENT_TIMESTAMP WHERE id = $1",
+                          [](const Result&) {},
+                          [](const DrogonDbException& e) {
+                              LOG_ERROR << "Failed to update API key last_used_at: " << e.base().what();
+                          },
+                          keyId
+                      );
+                  }
+                  >> DB_ERROR_MSG(callback, "validate bot API key", "Failed to validate API key");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in validateBotApiKey: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// Internal API: Process pending uberban for a user
+// Called by chat-service when an authenticated user connects
+// If user has pending_uberban=true, disables account and clears the flag
+// Chat-service handles adding fingerprint to banned set separately
+void UserController::processPendingUberban(const HttpRequestPtr &req,
+                                            std::function<void(const HttpResponsePtr &)> &&callback,
+                                            const std::string &userId) {
+    try {
+        int64_t targetUserId = std::stoll(userId);
+
+        auto dbClient = app().getDbClient();
+
+        // Check if user has pending_uberban
+        *dbClient << "SELECT pending_uberban FROM users WHERE id = $1"
+                  << targetUserId
+                  >> [callback, dbClient, targetUserId](const Result& r) {
+                      if (r.empty()) {
+                          Json::Value resp;
+                          resp["processed"] = false;
+                          resp["reason"] = "User not found";
+                          callback(jsonResp(resp));
+                          return;
+                      }
+
+                      bool pendingUberban = r[0]["pending_uberban"].isNull() ? false : r[0]["pending_uberban"].as<bool>();
+                      if (!pendingUberban) {
+                          Json::Value resp;
+                          resp["processed"] = false;
+                          resp["reason"] = "No pending uberban";
+                          callback(jsonResp(resp));
+                          return;
+                      }
+
+                      // User has pending uberban - disable account and clear flag
+                      *dbClient << "UPDATE users SET is_disabled = true, pending_uberban = false WHERE id = $1"
+                                << targetUserId
+                                >> [callback, targetUserId](const Result&) {
+                                    LOG_INFO << "Processed pending uberban for user " << targetUserId;
+                                    Json::Value resp;
+                                    resp["processed"] = true;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "process pending uberban", "Failed to process pending uberban");
+                  }
+                  >> DB_ERROR_MSG(callback, "check pending uberban", "Failed to check pending uberban");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in processPendingUberban: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::submitSticker(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Check if user has sticker creator role
+        *dbClient << "SELECT is_sticker_creator FROM users WHERE id = $1"
+                  << user.id
+                  >> [req, user, callback](const Result& r) {
+                      if (r.empty() || !r[0]["is_sticker_creator"].as<bool>()) {
+                          callback(jsonError("Sticker creator role required", k403Forbidden));
+                          return;
+                      }
+
+                      // Parse multipart form
+                      MultiPartParser fileUpload;
+                      if (fileUpload.parse(req) != 0 || fileUpload.getFiles().empty()) {
+                          callback(jsonError("No files uploaded"));
+                          return;
+                      }
+
+                      auto files = fileUpload.getFiles();
+                      auto dbClient = app().getDbClient();
+
+                      // Validate all file sizes (4MB limit each)
+                      const size_t maxFileSize = 4 * 1024 * 1024;
+                      for (const auto& file : files) {
+                          if (file.fileLength() > maxFileSize) {
+                              callback(jsonError("File too large: " + file.getFileName() + " (max 4MB)"));
+                              return;
+                          }
+                      }
+
+                      // Ensure directory exists
+                      std::filesystem::create_directories("./uploads/sticker-submissions");
+
+                      Json::Value resp;
+                      resp["success"] = true;
+                      Json::Value submissions(Json::arrayValue);
+
+                      // Process each uploaded file
+                      int validCount = 0;
+                      for (const auto& file : files) {
+                          std::string paramName = file.getFileName();
+                          std::string stickerName = fileUpload.getParameter<std::string>("name_" + paramName);
+
+                          if (stickerName.empty()) {
+                              stickerName = paramName.substr(0, paramName.find_last_of('.'));
+                          }
+
+                          // Validate name
+                          if (stickerName.length() > 50) {
+                              stickerName = stickerName.substr(0, 50);
+                          }
+
+                          // Validate file content using magic bytes (not just extension)
+                          auto validation = validateImageMagicBytes(file.fileData(), file.fileLength());
+                          if (!validation.valid) {
+                              LOG_WARN << "Sticker submission rejected for " << paramName << ": invalid image magic bytes";
+                              continue; // Skip invalid file types
+                          }
+
+                          // Use the extension from magic byte validation (ignores client-provided extension)
+                          std::string ext = validation.extension;
+
+                          // Generate unique filename and save to submissions folder
+                          std::string uniqueName = drogon::utils::getUuid() + ext;
+                          std::string filePath = "/uploads/sticker-submissions/" + uniqueName;
+                          std::string fullPath = "./uploads/sticker-submissions/" + uniqueName;
+
+                          // Save file
+                          file.saveAs(fullPath);
+                          validCount++;
+
+                          // Insert into sticker_submissions table
+                          *dbClient << "INSERT INTO sticker_submissions (name, file_path, submitted_by) "
+                                       "VALUES ($1, $2, $3) RETURNING id, name, file_path, created_at"
+                                    << stickerName << filePath << user.id
+                                    >> [submissions, stickerName, filePath](const Result& r) mutable {
+                                        if (!r.empty()) {
+                                            const auto& row = r[0];
+                                            Json::Value sub;
+                                            sub["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                            sub["name"] = row["name"].as<std::string>();
+                                            sub["filePath"] = row["file_path"].as<std::string>();
+                                            sub["createdAt"] = row["created_at"].as<std::string>();
+                                            submissions.append(sub);
+                                        }
+                                    }
+                                    >> [](const DrogonDbException& e) {
+                                        LOG_ERROR << "Failed to submit sticker: " << e.base().what();
+                                    };
+                      }
+
+                      if (validCount == 0) {
+                          callback(jsonError("No valid image files uploaded. Only JPEG, PNG, GIF, and WebP are allowed."));
+                          return;
+                      }
+
+                      resp["message"] = "Sticker(s) submitted for review";
+                      resp["submissions"] = submissions;
+                      resp["count"] = validCount;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "check sticker creator role");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in submitSticker: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::getMySubmissions(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Check if user has sticker creator role
+        *dbClient << "SELECT is_sticker_creator FROM users WHERE id = $1"
+                  << user.id
+                  >> [user, callback](const Result& r) {
+                      if (r.empty() || !r[0]["is_sticker_creator"].as<bool>()) {
+                          callback(jsonError("Sticker creator role required", k403Forbidden));
+                          return;
+                      }
+
+                      // Get user's submissions
+                      auto dbClient = app().getDbClient();
+                      *dbClient << "SELECT id, name, file_path, status, denial_reason, created_at "
+                                   "FROM sticker_submissions WHERE submitted_by = $1 "
+                                   "ORDER BY created_at DESC"
+                                << user.id
+                                >> [callback](const Result& r) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    Json::Value submissions(Json::arrayValue);
+
+                                    for (const auto& row : r) {
+                                        Json::Value sub;
+                                        sub["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                                        sub["name"] = row["name"].as<std::string>();
+                                        sub["filePath"] = row["file_path"].as<std::string>();
+                                        sub["status"] = row["status"].as<std::string>();
+                                        sub["denialReason"] = row["denial_reason"].isNull() ? "" : row["denial_reason"].as<std::string>();
+                                        sub["createdAt"] = row["created_at"].as<std::string>();
+                                        submissions.append(sub);
+                                    }
+
+                                    resp["submissions"] = submissions;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "get submissions", "Failed to get submissions");
+                  }
+                  >> DB_ERROR(callback, "check sticker creator role");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getMySubmissions: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::uploadGraffiti(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        // Graffiti files are small (88x33 PNG), limit to 50KB
+        if (file.fileLength() > 50 * 1024) {
+            callback(jsonError("File too large (max 50KB)"));
+            return;
+        }
+
+        // Validate file content using magic bytes
+        auto validation = validateImageMagicBytes(file.fileData(), file.fileLength());
+        if (!validation.valid) {
+            LOG_WARN << "Graffiti upload rejected: invalid image magic bytes";
+            callback(jsonError("Invalid image file. Only PNG images are allowed."));
+            return;
+        }
+
+        // Only allow PNG for graffiti (transparency support)
+        if (validation.detectedType != "png") {
+            callback(jsonError("Invalid file type (PNG only)"));
+            return;
+        }
+
+        // Ensure uploads directory exists
+        const std::string uploadDir = "/app/uploads/graffiti";
+        if (!ensureDirectoryExists(uploadDir, true)) {
+            callback(jsonError("Failed to create upload directory"));
+            return;
+        }
+
+        // Generate unique filename
+        std::string filename = generateRandomFilename("png");
+        std::string fullPath = uploadDir + "/" + filename;
+
+        // Ensure the file doesn't already exist
+        if (std::filesystem::exists(fullPath)) {
+            filename = generateRandomFilename("png");
+            fullPath = uploadDir + "/" + filename;
+        }
+
+        try {
+            const char* fileData = file.fileData();
+            size_t fileSize = file.fileLength();
+
+            if (!fileData || fileSize == 0) {
+                callback(jsonError("Empty file uploaded"));
+                return;
+            }
+
+            std::ofstream ofs(fullPath, std::ios::binary);
+            if (!ofs) {
+                LOG_ERROR << "Failed to open file for writing: " << fullPath;
+                callback(jsonError("Failed to create file"));
+                return;
+            }
+
+            ofs.write(fileData, fileSize);
+            ofs.close();
+
+            if (!ofs) {
+                LOG_ERROR << "Failed to write graffiti file";
+                callback(jsonError("Failed to write file"));
+                return;
+            }
+
+            // Set file permissions to 644
+            std::filesystem::permissions(fullPath,
+                std::filesystem::perms::owner_read | std::filesystem::perms::owner_write |
+                std::filesystem::perms::group_read |
+                std::filesystem::perms::others_read
+            );
+
+            LOG_INFO << "Graffiti saved successfully to: " << fullPath;
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception while saving graffiti: " << e.what();
+            if (std::filesystem::exists(fullPath)) {
+                std::filesystem::remove_all(fullPath);
+            }
+            callback(jsonError("Failed to save graffiti"));
+            return;
+        }
+
+        std::string graffitiUrl = "/uploads/graffiti/" + filename;
+
+        // Delete old graffiti file if exists
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT graffiti_url FROM users WHERE id = $1"
+                  << user.id
+                  >> [callback, graffitiUrl, userId = user.id](const Result& r) {
+                      if (!r.empty() && !r[0]["graffiti_url"].isNull()) {
+                          std::string oldUrl = r[0]["graffiti_url"].as<std::string>();
+                          if (!oldUrl.empty()) {
+                              std::string oldPath = "/app" + oldUrl;
+                              if (std::filesystem::exists(oldPath)) {
+                                  std::filesystem::remove(oldPath);
+                                  LOG_INFO << "Deleted old graffiti: " << oldPath;
+                              }
+                          }
+                      }
+
+                      // Update database
+                      auto dbClient = app().getDbClient();
+                      *dbClient << "UPDATE users SET graffiti_url = $1 WHERE id = $2"
+                                << graffitiUrl << userId
+                                >> [callback, graffitiUrl, userId](const Result&) {
+                                    AuthService::getInstance().fetchUserInfo(userId,
+                                        [callback, graffitiUrl](bool success, const UserInfo& updatedUser) {
+                                            if (success) {
+                                                std::string newToken = AuthService::getInstance().generateToken(updatedUser);
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["graffitiUrl"] = graffitiUrl;
+                                                resp["token"] = newToken;
+                                                auto response = jsonResp(resp);
+                                                setAuthCookie(response, newToken);
+                                                callback(response);
+                                            } else {
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["graffitiUrl"] = graffitiUrl;
+                                                callback(jsonResp(resp));
+                                            }
+                                        });
+                                }
+                                >> DB_ERROR_MSG(callback, "update graffiti", "Failed to update graffiti");
+                  }
+                  >> DB_ERROR(callback, "get old graffiti");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadGraffiti: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::deleteGraffiti(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Get current graffiti URL to delete the file
+        *dbClient << "SELECT graffiti_url FROM users WHERE id = $1"
+                  << user.id
+                  >> [callback, userId = user.id](const Result& r) {
+                      if (!r.empty() && !r[0]["graffiti_url"].isNull()) {
+                          std::string oldUrl = r[0]["graffiti_url"].as<std::string>();
+                          if (!oldUrl.empty()) {
+                              std::string oldPath = "/app" + oldUrl;
+                              if (std::filesystem::exists(oldPath)) {
+                                  std::filesystem::remove(oldPath);
+                                  LOG_INFO << "Deleted graffiti file: " << oldPath;
+                              }
+                          }
+                      }
+
+                      // Clear graffiti URL in database
+                      auto dbClient = app().getDbClient();
+                      *dbClient << "UPDATE users SET graffiti_url = NULL WHERE id = $1"
+                                << userId
+                                >> [callback, userId](const Result&) {
+                                    AuthService::getInstance().fetchUserInfo(userId,
+                                        [callback](bool success, const UserInfo& updatedUser) {
+                                            if (success) {
+                                                std::string newToken = AuthService::getInstance().generateToken(updatedUser);
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                resp["token"] = newToken;
+                                                auto response = jsonResp(resp);
+                                                setAuthCookie(response, newToken);
+                                                callback(response);
+                                            } else {
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                callback(jsonResp(resp));
+                                            }
+                                        });
+                                }
+                                >> DB_ERROR_MSG(callback, "delete graffiti", "Failed to delete graffiti");
+                  }
+                  >> DB_ERROR(callback, "get graffiti for delete");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in deleteGraffiti: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ============================================
+// ÜBERCOIN VIRTUAL CURRENCY ENDPOINTS
+// ============================================
+
+// Calculate burn rate based on account age in days
+// Formula: max(1, 99 * e^(-account_age_days / 180))
+// Minimum burn rate is 1% (never goes to 0)
+double UserController::calculateBurnRate(int accountAgeDays) {
+    double burnRate = 99.0 * std::exp(-static_cast<double>(accountAgeDays) / 180.0);
+    return std::max(1.0, burnRate);
+}
+
+// Calculate account age in days from created_at timestamp
+int UserController::calculateAccountAgeDays(const std::string& createdAt) {
+    try {
+        // Parse ISO 8601 timestamp (e.g., "2025-01-15T10:30:00+00:00")
+        std::tm tm = {};
+        std::istringstream ss(createdAt);
+        ss >> std::get_time(&tm, "%Y-%m-%dT%H:%M:%S");
+
+        if (ss.fail()) {
+            LOG_WARN << "Failed to parse created_at timestamp: " << createdAt;
+            return 0;
+        }
+
+        std::time_t createdTime = std::mktime(&tm);
+        std::time_t now = std::time(nullptr);
+
+        // Calculate difference in days
+        double diffSeconds = std::difftime(now, createdTime);
+        int diffDays = static_cast<int>(diffSeconds / (60 * 60 * 24));
+
+        return std::max(0, diffDays);
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in calculateAccountAgeDays: " << e.what();
+        return 0;
+    }
+}
+
+void UserController::sendUbercoin(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo sender = getUserFromRequest(req);
+        if (sender.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("recipient") || !(*json).isMember("amount")) {
+            callback(jsonError("Missing recipient or amount"));
+            return;
+        }
+
+        std::string recipientUsername = (*json)["recipient"].asString();
+        double amount = (*json)["amount"].asDouble();
+
+        // Validate amount (positive, max 3 decimal places)
+        if (amount <= 0) {
+            callback(jsonError("Amount must be positive"));
+            return;
+        }
+
+        // Round to 3 decimal places (ceiling)
+        amount = std::ceil(amount * 1000.0) / 1000.0;
+
+        if (amount > 1000000000.0) {
+            callback(jsonError("Amount exceeds maximum allowed"));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Get sender's balance
+        *dbClient << "SELECT ubercoin_balance FROM users WHERE id = $1"
+                  << sender.id
+                  >> [dbClient, sender, recipientUsername, amount, callback](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Sender not found"));
+                          return;
+                      }
+
+                      double senderBalance = r[0]["ubercoin_balance"].isNull() ? 0.0 : r[0]["ubercoin_balance"].as<double>();
+
+                      if (senderBalance < amount) {
+                          callback(jsonError("Insufficient balance"));
+                          return;
+                      }
+
+                      // Get recipient info
+                      *dbClient << "SELECT id, username, created_at, ubercoin_balance FROM users WHERE username = $1"
+                                << recipientUsername
+                                >> [dbClient, sender, amount, senderBalance, callback](const Result& r2) {
+                                    if (r2.empty()) {
+                                        callback(jsonError("Recipient not found", k404NotFound));
+                                        return;
+                                    }
+
+                                    int64_t recipientId = r2[0]["id"].as<int64_t>();
+
+                                    // Prevent self-tipping
+                                    if (recipientId == sender.id) {
+                                        callback(jsonError("Cannot send übercoin to yourself"));
+                                        return;
+                                    }
+
+                                    std::string createdAt = r2[0]["created_at"].as<std::string>();
+                                    double recipientBalance = r2[0]["ubercoin_balance"].isNull() ? 0.0 : r2[0]["ubercoin_balance"].as<double>();
+
+                                    // Calculate account age and burn rate
+                                    UserController ctrl;
+                                    int accountAgeDays = ctrl.calculateAccountAgeDays(createdAt);
+                                    double burnRate = ctrl.calculateBurnRate(accountAgeDays);
+
+                                    // Calculate amounts (ceiling for received amount)
+                                    double burnedAmount = amount * burnRate / 100.0;
+                                    double receivedAmount = amount - burnedAmount;
+
+                                    // Round to 3 decimal places (ceiling for received)
+                                    receivedAmount = std::ceil(receivedAmount * 1000.0) / 1000.0;
+                                    burnedAmount = amount - receivedAmount;
+
+                                    double newSenderBalance = senderBalance - amount;
+                                    double newRecipientBalance = recipientBalance + receivedAmount;
+
+                                    // Begin transaction: deduct from sender, add to recipient, add burned to treasury
+                                    *dbClient << "UPDATE users SET ubercoin_balance = $1 WHERE id = $2"
+                                              << newSenderBalance << sender.id
+                                              >> [dbClient, recipientId, newRecipientBalance, burnedAmount, amount, receivedAmount, burnRate, newSenderBalance, callback](const Result&) {
+                                                  *dbClient << "UPDATE users SET ubercoin_balance = $1 WHERE id = $2"
+                                                            << newRecipientBalance << recipientId
+                                                            >> [dbClient, burnedAmount, amount, receivedAmount, burnRate, newSenderBalance, callback](const Result&) {
+                                                                // Add burned amount to treasury
+                                                                *dbClient << "UPDATE ubercoin_treasury SET balance = balance + $1 WHERE id = 1 RETURNING balance"
+                                                                          << burnedAmount
+                                                                          >> [amount, receivedAmount, burnedAmount, burnRate, newSenderBalance, callback](const Result& r3) {
+                                                                              double treasuryBalance = 0.0;
+                                                                              if (!r3.empty()) {
+                                                                                  treasuryBalance = r3[0]["balance"].as<double>();
+                                                                              }
+
+                                                                              Json::Value resp;
+                                                                              resp["success"] = true;
+                                                                              resp["sent"] = amount;
+                                                                              resp["burned"] = burnedAmount;
+                                                                              resp["received"] = receivedAmount;
+                                                                              resp["burnRatePercent"] = burnRate;
+                                                                              resp["newBalance"] = newSenderBalance;
+                                                                              resp["treasuryBalance"] = treasuryBalance;
+                                                                              callback(jsonResp(resp));
+                                                                          }
+                                                                          >> DB_ERROR_MSG(callback, "update treasury", "Failed to complete transaction");
+                                                            }
+                                                            >> DB_ERROR_MSG(callback, "update recipient balance", "Failed to complete transaction");
+                                              }
+                                              >> DB_ERROR_MSG(callback, "update sender balance", "Failed to complete transaction");
+                                }
+                                >> DB_ERROR(callback, "get recipient");
+                  }
+                  >> DB_ERROR(callback, "get sender balance");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in sendUbercoin: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::previewUbercoin(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo sender = getUserFromRequest(req);
+        if (sender.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        auto json = req->getJsonObject();
+        if (!json) {
+            callback(jsonError("Invalid JSON"));
+            return;
+        }
+
+        if (!(*json).isMember("recipient") || !(*json).isMember("amount")) {
+            callback(jsonError("Missing recipient or amount"));
+            return;
+        }
+
+        std::string recipientUsername = (*json)["recipient"].asString();
+        double amount = (*json)["amount"].asDouble();
+
+        if (amount <= 0) {
+            callback(jsonError("Amount must be positive"));
+            return;
+        }
+
+        // Round to 3 decimal places (ceiling)
+        amount = std::ceil(amount * 1000.0) / 1000.0;
+
+        auto dbClient = app().getDbClient();
+
+        *dbClient << "SELECT created_at FROM users WHERE username = $1"
+                  << recipientUsername
+                  >> [amount, callback](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("User not found", k404NotFound));
+                          return;
+                      }
+
+                      std::string createdAt = r[0]["created_at"].as<std::string>();
+
+                      UserController ctrl;
+                      int accountAgeDays = ctrl.calculateAccountAgeDays(createdAt);
+                      double burnRate = ctrl.calculateBurnRate(accountAgeDays);
+
+                      double burnedAmount = amount * burnRate / 100.0;
+                      double receivedAmount = amount - burnedAmount;
+
+                      // Round to 3 decimal places (ceiling for received)
+                      receivedAmount = std::ceil(receivedAmount * 1000.0) / 1000.0;
+                      burnedAmount = amount - receivedAmount;
+
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["amount"] = amount;
+                      resp["burnRatePercent"] = burnRate;
+                      resp["burnedAmount"] = burnedAmount;
+                      resp["receivedAmount"] = receivedAmount;
+                      resp["recipientAccountAgeDays"] = accountAgeDays;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "get user for preview");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in previewUbercoin: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void UserController::getTreasury(const HttpRequestPtr &,
+                                 std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        auto dbClient = app().getDbClient();
+
+        // Get treasury info and user count
+        *dbClient << "SELECT balance, total_destroyed, last_growth_at, last_distribution_at FROM ubercoin_treasury WHERE id = 1"
+                  >> [dbClient, callback](const Result& r) {
+                      double balance = 0.0;
+                      double totalDestroyed = 0.0;
+                      std::string lastGrowthAt;
+                      std::string lastDistributionAt;
+
+                      if (!r.empty()) {
+                          balance = r[0]["balance"].isNull() ? 0.0 : r[0]["balance"].as<double>();
+                          totalDestroyed = r[0]["total_destroyed"].isNull() ? 0.0 : r[0]["total_destroyed"].as<double>();
+                          lastGrowthAt = r[0]["last_growth_at"].isNull() ? "" : r[0]["last_growth_at"].as<std::string>();
+                          lastDistributionAt = r[0]["last_distribution_at"].isNull() ? "" : r[0]["last_distribution_at"].as<std::string>();
+                      }
+
+                      // Get total user count
+                      *dbClient << "SELECT COUNT(*) as user_count FROM users"
+                                >> [balance, totalDestroyed, lastGrowthAt, lastDistributionAt, callback](const Result& r2) {
+                                    int64_t totalUsers = 0;
+                                    if (!r2.empty()) {
+                                        totalUsers = r2[0]["user_count"].as<int64_t>();
+                                    }
+
+                                    // Calculate estimated share per user
+                                    double estimatedShare = totalUsers > 0 ? balance / static_cast<double>(totalUsers) : 0.0;
+                                    estimatedShare = std::ceil(estimatedShare * 1000.0) / 1000.0;
+
+                                    // Calculate next Sunday (next distribution) in UTC
+                                    std::time_t now = std::time(nullptr);
+                                    std::tm nowUtc;
+                                    #ifdef _WIN32
+                                    gmtime_s(&nowUtc, &now);
+                                    #else
+                                    gmtime_r(&now, &nowUtc);
+                                    #endif
+
+                                    // Days until Sunday (0 = Sunday)
+                                    // If today is Sunday, next distribution is next Sunday (7 days)
+                                    int daysUntilSunday = (7 - nowUtc.tm_wday) % 7;
+                                    if (daysUntilSunday == 0) daysUntilSunday = 7;
+
+                                    // Calculate next Sunday at midnight UTC
+                                    std::tm nextSundayTm = nowUtc;
+                                    nextSundayTm.tm_mday += daysUntilSunday;
+                                    nextSundayTm.tm_hour = 0;
+                                    nextSundayTm.tm_min = 0;
+                                    nextSundayTm.tm_sec = 0;
+
+                                    // Normalize the tm struct (handles month overflow etc)
+                                    // Note: timegm is the UTC version of mktime
+                                    #ifdef _WIN32
+                                    std::time_t nextSunday = _mkgmtime(&nextSundayTm);
+                                    #else
+                                    std::time_t nextSunday = timegm(&nextSundayTm);
+                                    #endif
+
+                                    // Format as ISO 8601 UTC
+                                    char nextDistBuffer[32];
+                                    std::tm nextSundayUtc;
+                                    #ifdef _WIN32
+                                    gmtime_s(&nextSundayUtc, &nextSunday);
+                                    #else
+                                    gmtime_r(&nextSunday, &nextSundayUtc);
+                                    #endif
+                                    std::strftime(nextDistBuffer, sizeof(nextDistBuffer), "%Y-%m-%dT%H:%M:%SZ", &nextSundayUtc);
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["balance"] = balance;
+                                    resp["totalDestroyed"] = totalDestroyed;
+                                    resp["totalUsers"] = static_cast<Json::Int64>(totalUsers);
+                                    resp["estimatedShare"] = estimatedShare;
+                                    resp["nextDistribution"] = std::string(nextDistBuffer);
+                                    resp["lastGrowthAt"] = lastGrowthAt;
+                                    resp["lastDistributionAt"] = lastDistributionAt;
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR(callback, "get user count");
+                  }
+                  >> DB_ERROR(callback, "get treasury");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in getTreasury: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// Treasury cron: Apply 3.3% daily growth (should be called by cron at midnight Mon-Sat)
+void UserController::treasuryApplyGrowth(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        // Verify admin access
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0 || !user.isAdmin) {
+            callback(jsonError("Unauthorized - Admin only", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Apply 3.3% growth to treasury balance
+        *dbClient << "UPDATE ubercoin_treasury SET balance = balance * 1.033, last_growth_at = NOW() WHERE id = 1 RETURNING balance"
+                  >> [callback](const Result& r) {
+                      double newBalance = 0.0;
+                      if (!r.empty()) {
+                          newBalance = r[0]["balance"].as<double>();
+                      }
+
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "Treasury growth applied (3.3%)";
+                      resp["newBalance"] = newBalance;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR(callback, "apply treasury growth");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in treasuryApplyGrowth: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// Treasury cron: Distribute to all users (should be called by cron on Sunday at midnight)
+void UserController::treasuryDistribute(const HttpRequestPtr &req,
+                                        std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        // Verify admin access
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0 || !user.isAdmin) {
+            callback(jsonError("Unauthorized - Admin only", k401Unauthorized));
+            return;
+        }
+
+        auto dbClient = app().getDbClient();
+
+        // Get treasury balance and user count
+        *dbClient << "SELECT balance FROM ubercoin_treasury WHERE id = 1"
+                  >> [dbClient, callback](const Result& r) {
+                      if (r.empty()) {
+                          callback(jsonError("Treasury not found"));
+                          return;
+                      }
+
+                      double treasuryBalance = r[0]["balance"].as<double>();
+
+                      if (treasuryBalance <= 0) {
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["message"] = "Treasury empty, nothing to distribute";
+                          resp["distributed"] = 0;
+                          resp["destroyed"] = 0;
+                          callback(jsonResp(resp));
+                          return;
+                      }
+
+                      // Get all users with their created_at for burn rate calculation
+                      *dbClient << "SELECT id, created_at, ubercoin_balance FROM users"
+                                >> [dbClient, treasuryBalance, callback](const Result& users) {
+                                    if (users.empty()) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        resp["message"] = "No users to distribute to";
+                                        resp["distributed"] = 0;
+                                        resp["destroyed"] = 0;
+                                        callback(jsonResp(resp));
+                                        return;
+                                    }
+
+                                    int64_t userCount = users.size();
+                                    double sharePerUser = treasuryBalance / static_cast<double>(userCount);
+
+                                    double totalDistributed = 0.0;
+                                    double totalDestroyed = 0.0;
+
+                                    UserController ctrl;
+
+                                    // Calculate distributions for each user
+                                    for (const auto& row : users) {
+                                        int64_t userId = row["id"].as<int64_t>();
+                                        std::string createdAt = row["created_at"].as<std::string>();
+                                        double currentBalance = row["ubercoin_balance"].isNull() ? 0.0 : row["ubercoin_balance"].as<double>();
+
+                                        int accountAgeDays = ctrl.calculateAccountAgeDays(createdAt);
+                                        double burnRate = ctrl.calculateBurnRate(accountAgeDays);
+
+                                        // Calculate received amount (after burn) - ceiling for user benefit
+                                        double receivedAmount = sharePerUser * (100.0 - burnRate) / 100.0;
+                                        receivedAmount = std::ceil(receivedAmount * 1000.0) / 1000.0;
+
+                                        double destroyedAmount = sharePerUser - receivedAmount;
+
+                                        double newBalance = currentBalance + receivedAmount;
+
+                                        // Update user balance
+                                        *dbClient << "UPDATE users SET ubercoin_balance = $1 WHERE id = $2"
+                                                  << newBalance << userId
+                                                  >> [](const Result&) {}
+                                                  >> [](const DrogonDbException& e) {
+                                                      LOG_ERROR << "Failed to update user balance in distribution: " << e.base().what();
+                                                  };
+
+                                        totalDistributed += receivedAmount;
+                                        totalDestroyed += destroyedAmount;
+                                    }
+
+                                    // Reset treasury balance to 0 and update total_destroyed
+                                    *dbClient << "UPDATE ubercoin_treasury SET balance = 0, total_destroyed = total_destroyed + $1, last_distribution_at = NOW() WHERE id = 1"
+                                              << totalDestroyed
+                                              >> [totalDistributed, totalDestroyed, userCount, callback](const Result&) {
+                                                  Json::Value resp;
+                                                  resp["success"] = true;
+                                                  resp["message"] = "Treasury distributed successfully";
+                                                  resp["userCount"] = static_cast<Json::Int64>(userCount);
+                                                  resp["distributed"] = totalDistributed;
+                                                  resp["destroyed"] = totalDestroyed;
+                                                  callback(jsonResp(resp));
+                                              }
+                                              >> DB_ERROR(callback, "reset treasury");
+                                }
+                                >> DB_ERROR(callback, "get users for distribution");
+                  }
+                  >> DB_ERROR(callback, "get treasury balance");
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in treasuryDistribute: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+// ============================================
+// REFERRAL CODE SYSTEM
+// ============================================
+
+namespace {
+    const double REFERRAL_CODE_COST = 500.0; // Ubercoin cost for purchasing a referral code
+}
+
+std::string UserController::generateReferralCode(int length) {
+    // Charset excludes confusing chars: 0/O, 1/I
+    static const char charset[] = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+    static const size_t charsetLen = sizeof(charset) - 1;
+
+    std::random_device rd;
+    std::mt19937 gen(rd());
+    std::uniform_int_distribution<> dist(0, charsetLen - 1);
+
+    std::string code;
+    code.reserve(length);
+    for (int i = 0; i < length; ++i) {
+        code += charset[dist(gen)];
+    }
+    return code;
+}
+
+void UserController::getReferralCodes(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT rc.id, rc.code, rc.is_used, rc.created_at, rc.used_at, "
+                 "u.username as used_by_username "
+                 "FROM referral_codes rc "
+                 "LEFT JOIN users u ON rc.used_by = u.id "
+                 "WHERE rc.owner_id = $1 "
+                 "ORDER BY rc.created_at DESC"
+              << user.id
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value codes(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value code;
+                      code["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      code["code"] = row["code"].as<std::string>();
+                      code["isUsed"] = row["is_used"].as<bool>();
+                      code["createdAt"] = row["created_at"].as<std::string>();
+                      if (!row["used_at"].isNull()) {
+                          code["usedAt"] = row["used_at"].as<std::string>();
+                      }
+                      if (!row["used_by_username"].isNull()) {
+                          code["usedByUsername"] = row["used_by_username"].as<std::string>();
+                      }
+                      codes.append(code);
+                  }
+
+                  resp["codes"] = codes;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get referral codes", "Failed to get referral codes");
+}
+
+void UserController::purchaseReferralCode(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Check user balance first
+    *dbClient << "SELECT ubercoin_balance FROM users WHERE id = $1"
+              << user.id
+              >> [this, callback, dbClient, userId = user.id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("User not found"));
+                      return;
+                  }
+
+                  double balance = r[0]["ubercoin_balance"].isNull() ? 0.0 : r[0]["ubercoin_balance"].as<double>();
+                  if (balance < REFERRAL_CODE_COST) {
+                      callback(jsonError("Insufficient ubercoin balance. You need 500 ubercoin."));
+                      return;
+                  }
+
+                  // Deduct balance
+                  *dbClient << "UPDATE users SET ubercoin_balance = ubercoin_balance - $1 WHERE id = $2"
+                            << REFERRAL_CODE_COST << userId
+                            >> [this, callback, dbClient, userId](const Result&) {
+                                // Generate unique code with retry
+                                std::string code = generateReferralCode();
+
+                                // Insert code
+                                *dbClient << "INSERT INTO referral_codes (owner_id, code) "
+                                             "VALUES ($1, $2) RETURNING id, code, created_at"
+                                          << userId << code
+                                          >> [callback](const Result& r) {
+                                              Json::Value resp;
+                                              resp["success"] = true;
+                                              resp["code"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
+                                              resp["code"]["code"] = r[0]["code"].as<std::string>();
+                                              resp["code"]["createdAt"] = r[0]["created_at"].as<std::string>();
+                                              resp["code"]["isUsed"] = false;
+                                              resp["cost"] = REFERRAL_CODE_COST;
+                                              callback(jsonResp(resp));
+                                          }
+                                          >> [callback, dbClient, userId](const DrogonDbException& e) {
+                                              // Refund on failure
+                                              LOG_ERROR << "Failed to create referral code: " << e.base().what();
+                                              *dbClient << "UPDATE users SET ubercoin_balance = ubercoin_balance + $1 WHERE id = $2"
+                                                        << REFERRAL_CODE_COST << userId
+                                                        >> [](const Result&) {}
+                                                        >> [](const DrogonDbException&) {};
+                                              callback(jsonError("Failed to create referral code. Ubercoin refunded."));
+                                          };
+                            }
+                            >> DB_ERROR_MSG(callback, "deduct balance", "Failed to deduct balance");
+              }
+              >> DB_ERROR_MSG(callback, "check balance", "Failed to check balance");
+}
+
+void UserController::validateReferralCode(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr || !(*jsonPtr).isMember("code")) {
+        callback(jsonError("Code required"));
+        return;
+    }
+
+    std::string code = (*jsonPtr)["code"].asString();
+    // Normalize code to uppercase
+    std::transform(code.begin(), code.end(), code.begin(), ::toupper);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id FROM referral_codes WHERE code = $1 AND is_used = false"
+              << code
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["valid"] = !r.empty();
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "validate code", "Failed to validate code");
+}
+
+void UserController::registerWithReferral(const HttpRequestPtr &req,
+                                          std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+
+    // Check referral system is enabled and registration is disabled
+    *dbClient << "SELECT registration_enabled, referral_system_enabled FROM chat_settings WHERE id = 1"
+              >> [req, callback, dbClient](const Result& r) {
+                  bool regEnabled = r.empty() ? true : r[0]["registration_enabled"].as<bool>();
+                  bool refEnabled = r.empty() ? false :
+                      (r[0]["referral_system_enabled"].isNull() ? false : r[0]["referral_system_enabled"].as<bool>());
+
+                  if (regEnabled) {
+                      callback(jsonError("Standard registration is available"));
+                      return;
+                  }
+                  if (!refEnabled) {
+                      callback(jsonError("Referral registration is not enabled"));
+                      return;
+                  }
+
+                  // Parse request
+                  auto jsonPtr = req->getJsonObject();
+                  if (!jsonPtr) {
+                      callback(jsonError("Invalid JSON"));
+                      return;
+                  }
+
+                  const auto& json = *jsonPtr;
+                  std::string code = json.get("code", "").asString();
+                  std::string username = json.get("username", "").asString();
+                  std::string password = json.get("password", "").asString();
+                  std::string publicKey = json.get("publicKey", "").asString();
+                  std::string fingerprint = json.get("fingerprint", "").asString();
+
+                  if (code.empty() || username.empty() || password.empty() || publicKey.empty() || fingerprint.empty()) {
+                      callback(jsonError("Missing required fields"));
+                      return;
+                  }
+
+                  // Normalize code
+                  std::transform(code.begin(), code.end(), code.begin(), ::toupper);
+
+                  // Validate code exists and is unused
+                  *dbClient << "SELECT id FROM referral_codes WHERE code = $1 AND is_used = false"
+                            << code
+                            >> [callback, dbClient, code, username, password, publicKey, fingerprint](const Result& codeResult) {
+                                if (codeResult.empty()) {
+                                    callback(jsonError("Invalid or already used referral code"));
+                                    return;
+                                }
+
+                                int64_t codeId = codeResult[0]["id"].as<int64_t>();
+
+                                // Perform registration using AuthService
+                                AuthService::getInstance().registerUser(username, password, publicKey, fingerprint,
+                                    [callback, dbClient, codeId](bool success, const std::string& error, int64_t userId) {
+                                        if (!success) {
+                                            callback(jsonError(error));
+                                            return;
+                                        }
+
+                                        // Mark code as used
+                                        *dbClient << "UPDATE referral_codes SET is_used = true, used_by = $1, "
+                                                     "used_at = CURRENT_TIMESTAMP WHERE id = $2"
+                                                  << userId << codeId
+                                                  >> [callback, userId](const Result&) {
+                                                      Json::Value resp;
+                                                      resp["success"] = true;
+                                                      resp["userId"] = static_cast<Json::Int64>(userId);
+                                                      resp["message"] = "Registration successful. Please login.";
+                                                      callback(jsonResp(resp));
+                                                  }
+                                                  >> [callback](const DrogonDbException& e) {
+                                                      LOG_ERROR << "Failed to mark referral code as used: " << e.base().what();
+                                                      // Registration succeeded but marking failed - still return success
+                                                      Json::Value resp;
+                                                      resp["success"] = true;
+                                                      resp["message"] = "Registration successful. Please login.";
+                                                      callback(jsonResp(resp));
+                                                  };
+                                    });
+                            }
+                            >> DB_ERROR_MSG(callback, "validate code", "Failed to validate referral code");
+              }
+              >> DB_ERROR_MSG(callback, "check settings", "Failed to check registration settings");
+}
+
+void UserController::getReferralSettings(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Public endpoint - no auth required
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT registration_enabled, referral_system_enabled FROM chat_settings WHERE id = 1"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  if (r.empty()) {
+                      resp["registrationEnabled"] = true;
+                      resp["referralSystemEnabled"] = false;
+                  } else {
+                      resp["registrationEnabled"] = r[0]["registration_enabled"].as<bool>();
+                      resp["referralSystemEnabled"] = r[0]["referral_system_enabled"].isNull()
+                          ? false : r[0]["referral_system_enabled"].as<bool>();
+                  }
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get settings", "Failed to get settings");
 }
\ No newline at end of file
diff --git a/backend/src/controllers/UserController.h b/backend/src/controllers/UserController.h
index cf23349..de7fa8a 100644
--- a/backend/src/controllers/UserController.h
+++ b/backend/src/controllers/UserController.h
@@ -13,16 +13,40 @@ public:
     ADD_METHOD_TO(UserController::pgpChallenge, "/api/auth/pgp-challenge", Post);
     ADD_METHOD_TO(UserController::pgpVerify, "/api/auth/pgp-verify", Post);
     ADD_METHOD_TO(UserController::getCurrentUser, "/api/user/me", Get);
+    ADD_METHOD_TO(UserController::getToken, "/api/user/token", Get);
     ADD_METHOD_TO(UserController::updateProfile, "/api/user/profile", Put);
     ADD_METHOD_TO(UserController::updatePassword, "/api/user/password", Put);
     ADD_METHOD_TO(UserController::togglePgpOnly, "/api/user/pgp-only", Put);
     ADD_METHOD_TO(UserController::addPgpKey, "/api/user/pgp-key", Post);
     ADD_METHOD_TO(UserController::getPgpKeys, "/api/user/pgp-keys", Get);
     ADD_METHOD_TO(UserController::uploadAvatar, "/api/user/avatar", Post);
+    ADD_METHOD_TO(UserController::uploadBanner, "/api/user/banner", Post);
     ADD_METHOD_TO(UserController::getProfile, "/api/users/{1}", Get);
     ADD_METHOD_TO(UserController::getUserPgpKeys, "/api/users/{1}/pgp-keys", Get);
     ADD_METHOD_TO(UserController::updateColor, "/api/user/color", Put);
     ADD_METHOD_TO(UserController::getAvailableColors, "/api/colors/available", Get);
+    ADD_METHOD_TO(UserController::getBotApiKeys, "/api/user/bot-keys", Get);
+    ADD_METHOD_TO(UserController::createBotApiKey, "/api/user/bot-keys", Post);
+    ADD_METHOD_TO(UserController::deleteBotApiKey, "/api/user/bot-keys/{1}", Delete);
+    ADD_METHOD_TO(UserController::validateBotApiKey, "/api/internal/validate-bot-key", Post);
+    ADD_METHOD_TO(UserController::processPendingUberban, "/api/internal/user/{1}/process-pending-uberban", Post);
+    ADD_METHOD_TO(UserController::submitSticker, "/api/stickers/submit", Post);
+    ADD_METHOD_TO(UserController::getMySubmissions, "/api/stickers/my-submissions", Get);
+    ADD_METHOD_TO(UserController::uploadGraffiti, "/api/user/graffiti", Post);
+    ADD_METHOD_TO(UserController::deleteGraffiti, "/api/user/graffiti", Delete);
+    // Übercoin endpoints
+    ADD_METHOD_TO(UserController::sendUbercoin, "/api/ubercoin/send", Post);
+    ADD_METHOD_TO(UserController::previewUbercoin, "/api/ubercoin/preview", Post);
+    ADD_METHOD_TO(UserController::getTreasury, "/api/ubercoin/treasury", Get);
+    // Treasury cron endpoints (admin-only, called by scheduled tasks)
+    ADD_METHOD_TO(UserController::treasuryApplyGrowth, "/api/ubercoin/cron/growth", Post);
+    ADD_METHOD_TO(UserController::treasuryDistribute, "/api/ubercoin/cron/distribute", Post);
+    // Referral code endpoints
+    ADD_METHOD_TO(UserController::getReferralCodes, "/api/user/referral-codes", Get);
+    ADD_METHOD_TO(UserController::purchaseReferralCode, "/api/user/referral-codes/purchase", Post);
+    ADD_METHOD_TO(UserController::validateReferralCode, "/api/auth/validate-referral", Post);
+    ADD_METHOD_TO(UserController::registerWithReferral, "/api/auth/register-referral", Post);
+    ADD_METHOD_TO(UserController::getReferralSettings, "/api/settings/referral", Get);
     METHOD_LIST_END
 
     void register_(const HttpRequestPtr &req,
@@ -42,7 +66,10 @@ public:
     
     void getCurrentUser(const HttpRequestPtr &req,
                        std::function<void(const HttpResponsePtr &)> &&callback);
-    
+
+    void getToken(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback);
+
     void updateProfile(const HttpRequestPtr &req,
                       std::function<void(const HttpResponsePtr &)> &&callback);
     
@@ -60,7 +87,10 @@ public:
     
     void uploadAvatar(const HttpRequestPtr &req,
                      std::function<void(const HttpResponsePtr &)> &&callback);
-    
+
+    void uploadBanner(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
     void getProfile(const HttpRequestPtr &req,
                    std::function<void(const HttpResponsePtr &)> &&callback,
                    const std::string &username);
@@ -75,6 +105,76 @@ public:
     void getAvailableColors(const HttpRequestPtr &req,
                            std::function<void(const HttpResponsePtr &)> &&callback);
 
+    void getBotApiKeys(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void createBotApiKey(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteBotApiKey(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &keyId);
+
+    void validateBotApiKey(const HttpRequestPtr &req,
+                          std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void processPendingUberban(const HttpRequestPtr &req,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &userId);
+
+    void submitSticker(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getMySubmissions(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadGraffiti(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void deleteGraffiti(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback);
+
+    // Übercoin methods
+    void sendUbercoin(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void previewUbercoin(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getTreasury(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    // Treasury cron methods (admin-only)
+    void treasuryApplyGrowth(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void treasuryDistribute(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback);
+
+    // Referral code methods
+    void getReferralCodes(const HttpRequestPtr &req,
+                         std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void purchaseReferralCode(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void validateReferralCode(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void registerWithReferral(const HttpRequestPtr &req,
+                             std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getReferralSettings(const HttpRequestPtr &req,
+                            std::function<void(const HttpResponsePtr &)> &&callback);
+
 private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
+    // Übercoin helper: Calculate burn rate based on account age
+    // Formula: max(1, 99 * e^(-account_age_days / 180))
+    double calculateBurnRate(int accountAgeDays);
+
+    // Referral code helper: Generate random alphanumeric code
+    std::string generateReferralCode(int length = 12);
+
+    // Übercoin helper: Calculate account age in days from created_at timestamp
+    int calculateAccountAgeDays(const std::string& createdAt);
 };
\ No newline at end of file
diff --git a/backend/src/controllers/VideoController.cpp b/backend/src/controllers/VideoController.cpp
new file mode 100644
index 0000000..623bff6
--- /dev/null
+++ b/backend/src/controllers/VideoController.cpp
@@ -0,0 +1,926 @@
+#include "VideoController.h"
+#include "../services/DatabaseService.h"
+#include "../services/RedisHelper.h"  // SECURITY FIX #13: Redis for view rate limiting
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include "../common/FileUtils.h"
+#include "../common/FileValidation.h"
+#include <drogon/utils/Utilities.h>
+#include <drogon/Cookie.h>
+#include <random>
+#include <sstream>
+#include <iomanip>
+#include <fstream>
+#include <filesystem>
+#include <cstdlib>
+#include <array>
+#include <thread>
+#include <unistd.h>
+#include <sys/wait.h>
+#include <fcntl.h>
+
+using namespace drogon::orm;
+
+namespace {
+    // Video metadata extracted from a single ffprobe call
+    struct VideoMetadata {
+        int duration = 0;
+        int width = 0;
+        int height = 0;
+        int bitrate = 0;
+        std::string videoCodec;
+        std::string audioCodec;
+    };
+
+    // Get all video metadata with a single ffprobe call (5x faster than separate calls)
+    VideoMetadata getVideoMetadata(const std::string& videoPath) {
+        VideoMetadata meta;
+
+        if (!isPathSafe(videoPath, "/app/uploads")) {
+            LOG_ERROR << "Unsafe video path rejected: " << videoPath;
+            return meta;
+        }
+
+        std::vector<std::string> args = {
+            "/usr/bin/ffprobe", "-v", "error",
+            "-show_format", "-show_streams",
+            "-of", "json",
+            videoPath
+        };
+
+        std::string output = execCommandSafe(args);
+        if (output.empty()) {
+            return meta;
+        }
+
+        try {
+            Json::Value root;
+            Json::CharReaderBuilder builder;
+            std::string errors;
+            std::istringstream stream(output);
+
+            if (!Json::parseFromStream(builder, stream, &root, &errors)) {
+                LOG_ERROR << "Failed to parse ffprobe JSON: " << errors;
+                return meta;
+            }
+
+            // Extract format info (duration, bitrate)
+            if (root.isMember("format")) {
+                const auto& format = root["format"];
+                if (format.isMember("duration")) {
+                    meta.duration = static_cast<int>(std::stof(format["duration"].asString()));
+                }
+                if (format.isMember("bit_rate")) {
+                    try {
+                        meta.bitrate = std::stoi(format["bit_rate"].asString());
+                    } catch (...) {}
+                }
+            }
+
+            // Extract stream info (video/audio codecs, dimensions)
+            if (root.isMember("streams") && root["streams"].isArray()) {
+                for (const auto& stream : root["streams"]) {
+                    std::string codecType = stream.get("codec_type", "").asString();
+
+                    if (codecType == "video" && meta.videoCodec.empty()) {
+                        meta.videoCodec = stream.get("codec_name", "").asString();
+                        meta.width = stream.get("width", 0).asInt();
+                        meta.height = stream.get("height", 0).asInt();
+                    } else if (codecType == "audio" && meta.audioCodec.empty()) {
+                        meta.audioCodec = stream.get("codec_name", "").asString();
+                    }
+                }
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception parsing video metadata: " << e.what();
+        }
+
+        return meta;
+    }
+
+    // Video JSON detail levels for API responses
+    enum class VideoJsonLevel {
+        Minimal,    // 9 fields - for realm video lists
+        Basic,      // 11 fields - for user video lists (+ realmId, realmName)
+        Standard,   // 14 fields - for public lists (+ userId, username, avatarUrl)
+        Extended    // 20 fields - for single video detail (+ technical metadata)
+    };
+
+    // Build video JSON object from database row (reduces code duplication)
+    Json::Value buildVideoJson(const drogon::orm::Row& row, VideoJsonLevel level) {
+        Json::Value video;
+
+        // Core fields (all levels)
+        video["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+        video["title"] = row["title"].as<std::string>();
+        video["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+        video["filePath"] = row["file_path"].as<std::string>();
+        video["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+        video["previewPath"] = row["preview_path"].isNull() ? "" : row["preview_path"].as<std::string>();
+        video["durationSeconds"] = row["duration_seconds"].as<int>();
+        video["viewCount"] = row["view_count"].as<int>();
+        video["createdAt"] = row["created_at"].as<std::string>();
+
+        if (level == VideoJsonLevel::Minimal) return video;
+
+        // Basic+ fields (realm info)
+        video["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+        video["realmName"] = row["realm_name"].as<std::string>();
+
+        if (level == VideoJsonLevel::Basic) return video;
+
+        // Standard+ fields (user info)
+        video["userId"] = static_cast<Json::Int64>(row["user_id"].as<int64_t>());
+        video["username"] = row["username"].as<std::string>();
+        video["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+
+        if (level == VideoJsonLevel::Standard) return video;
+
+        // Extended fields (technical metadata)
+        video["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+        video["width"] = row["width"].isNull() ? 0 : row["width"].as<int>();
+        video["height"] = row["height"].isNull() ? 0 : row["height"].as<int>();
+        video["bitrate"] = row["bitrate"].isNull() ? 0 : row["bitrate"].as<int>();
+        video["videoCodec"] = row["video_codec"].isNull() ? "" : row["video_codec"].as<std::string>();
+        video["audioCodec"] = row["audio_codec"].isNull() ? "" : row["audio_codec"].as<std::string>();
+
+        return video;
+    }
+
+    // Generate static WebP thumbnail (safe version - no shell)
+    bool generateThumbnail(const std::string& videoPath, const std::string& thumbnailPath, int seekSeconds = 2) {
+        if (!isPathSafe(videoPath, "/app/uploads") || !isPathSafe(thumbnailPath, "/app/uploads")) {
+            LOG_ERROR << "Unsafe path rejected for thumbnail generation";
+            return false;
+        }
+
+        pid_t pid = fork();
+        if (pid == -1) return false;
+
+        if (pid == 0) {
+            // Child process - redirect stderr to /dev/null
+            int devnull = open("/dev/null", O_WRONLY);
+            dup2(devnull, STDERR_FILENO);
+            dup2(devnull, STDOUT_FILENO);
+            close(devnull);
+
+            std::string seekStr = std::to_string(seekSeconds);
+
+            execl("/usr/bin/ffmpeg", "ffmpeg",
+                  "-y", "-ss", seekStr.c_str(),
+                  "-i", videoPath.c_str(),
+                  "-vframes", "1",
+                  "-vf", "scale=320:-1",
+                  "-c:v", "libwebp",
+                  "-quality", "80",
+                  thumbnailPath.c_str(),
+                  nullptr);
+            _exit(1);
+        }
+
+        int status;
+        waitpid(pid, &status, 0);
+        return WIFEXITED(status) && WEXITSTATUS(status) == 0 && std::filesystem::exists(thumbnailPath);
+    }
+
+    // Generate animated WebP preview (safe version - no shell)
+    bool generateAnimatedPreview(const std::string& videoPath, const std::string& previewPath, int seekSeconds = 2, int duration = 3) {
+        if (!isPathSafe(videoPath, "/app/uploads") || !isPathSafe(previewPath, "/app/uploads")) {
+            LOG_ERROR << "Unsafe path rejected for preview generation";
+            return false;
+        }
+
+        pid_t pid = fork();
+        if (pid == -1) return false;
+
+        if (pid == 0) {
+            // Child process
+            int devnull = open("/dev/null", O_WRONLY);
+            dup2(devnull, STDERR_FILENO);
+            dup2(devnull, STDOUT_FILENO);
+            close(devnull);
+
+            std::string seekStr = std::to_string(seekSeconds);
+            std::string durationStr = std::to_string(duration);
+
+            execl("/usr/bin/ffmpeg", "ffmpeg",
+                  "-y", "-ss", seekStr.c_str(),
+                  "-t", durationStr.c_str(),
+                  "-i", videoPath.c_str(),
+                  "-vf", "scale=320:-1,fps=10",
+                  "-loop", "0",
+                  "-c:v", "libwebp",
+                  "-quality", "60",
+                  previewPath.c_str(),
+                  nullptr);
+            _exit(1);
+        }
+
+        int status;
+        waitpid(pid, &status, 0);
+        return WIFEXITED(status) && WEXITSTATUS(status) == 0 && std::filesystem::exists(previewPath);
+    }
+
+    // Process video thumbnails asynchronously
+    void processVideoThumbnails(int64_t videoId, const std::string& videoFullPath, const std::string& uploadsDir) {
+        // Run thumbnail generation in a separate thread
+        std::thread([videoId, videoFullPath, uploadsDir]() {
+            try {
+                // Get all video metadata with a single ffprobe call (5x faster)
+                VideoMetadata meta = getVideoMetadata(videoFullPath);
+
+                // Calculate seek position (10% into video, min 1s, max 30s)
+                int seekPos = std::max(1, std::min(30, meta.duration / 10));
+
+                // Generate filenames
+                std::string baseName = std::filesystem::path(videoFullPath).stem().string();
+                std::string thumbnailFilename = baseName + "_thumb.webp";
+                std::string previewFilename = baseName + "_preview.webp";
+                std::string thumbnailFullPath = uploadsDir + "/" + thumbnailFilename;
+                std::string previewFullPath = uploadsDir + "/" + previewFilename;
+
+                // Generate thumbnails
+                bool thumbOk = generateThumbnail(videoFullPath, thumbnailFullPath, seekPos);
+                bool previewOk = generateAnimatedPreview(videoFullPath, previewFullPath, seekPos, 3);
+
+                // Update database
+                std::string thumbnailPath = thumbOk ? "/uploads/videos/" + thumbnailFilename : "";
+                std::string previewPath = previewOk ? "/uploads/videos/" + previewFilename : "";
+
+                auto dbClient = app().getDbClient();
+                *dbClient << "UPDATE videos SET thumbnail_path = $1, preview_path = $2, "
+                             "duration_seconds = $3, width = $4, height = $5, "
+                             "bitrate = $6, video_codec = $7, audio_codec = $8 "
+                             "WHERE id = $9"
+                          << thumbnailPath << previewPath << meta.duration << meta.width << meta.height
+                          << meta.bitrate << meta.videoCodec << meta.audioCodec << videoId
+                          >> [videoId](const Result&) {
+                              LOG_INFO << "Video " << videoId << " thumbnails and metadata generated successfully";
+                          }
+                          >> [videoId](const DrogonDbException& e) {
+                              LOG_ERROR << "Failed to update video " << videoId << " metadata: " << e.base().what();
+                          };
+            } catch (const std::exception& e) {
+                LOG_ERROR << "Exception processing thumbnails for video " << videoId << ": " << e.what();
+            }
+        }).detach();
+    }
+}
+
+void VideoController::getAllVideos(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback) {
+    // Get pagination parameters
+    int page = 1;
+    int limit = 20;
+
+    auto pageParam = req->getParameter("page");
+    auto limitParam = req->getParameter("limit");
+
+    if (!pageParam.empty()) {
+        try { page = std::stoi(pageParam); } catch (...) {}
+    }
+    if (!limitParam.empty()) {
+        try { limit = std::min(std::stoi(limitParam), 50); } catch (...) {}
+    }
+
+    int offset = (page - 1) * limit;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                 "v.duration_seconds, v.view_count, v.created_at, v.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM videos v "
+                 "JOIN users u ON v.user_id = u.id "
+                 "JOIN realms r ON v.realm_id = r.id "
+                 "WHERE v.is_public = true AND v.status = 'ready' "
+                 "ORDER BY v.created_at DESC "
+                 "LIMIT $1 OFFSET $2"
+              << static_cast<int64_t>(limit) << static_cast<int64_t>(offset)
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value videos(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      videos.append(buildVideoJson(row, VideoJsonLevel::Standard));
+                  }
+
+                  resp["videos"] = videos;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get videos");
+}
+
+void VideoController::getLatestVideos(const HttpRequestPtr &,
+                                      std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                 "v.duration_seconds, v.view_count, v.created_at, v.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM videos v "
+                 "JOIN users u ON v.user_id = u.id "
+                 "JOIN realms r ON v.realm_id = r.id "
+                 "WHERE v.is_public = true AND v.status = 'ready' "
+                 "ORDER BY v.created_at DESC "
+                 "LIMIT 5"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value videos(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      videos.append(buildVideoJson(row, VideoJsonLevel::Standard));
+                  }
+
+                  resp["videos"] = videos;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get latest videos");
+}
+
+void VideoController::getVideo(const HttpRequestPtr &,
+                               std::function<void(const HttpResponsePtr &)> &&callback,
+                               const std::string &videoId) {
+    int64_t id;
+    try {
+        id = std::stoll(videoId);
+    } catch (...) {
+        callback(jsonError("Invalid video ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                 "v.duration_seconds, v.file_size_bytes, v.width, v.height, "
+                 "v.bitrate, v.video_codec, v.audio_codec, "
+                 "v.view_count, v.is_public, v.status, v.created_at, v.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM videos v "
+                 "JOIN users u ON v.user_id = u.id "
+                 "JOIN realms r ON v.realm_id = r.id "
+                 "WHERE v.id = $1 AND v.status = 'ready'"
+              << id
+              >> [callback](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Video not found", k404NotFound));
+                      return;
+                  }
+
+                  const auto& row = r[0];
+
+                  // Check if video is public
+                  if (!row["is_public"].as<bool>()) {
+                      callback(jsonError("Video not found", k404NotFound));
+                      return;
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["video"] = buildVideoJson(row, VideoJsonLevel::Extended);
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get video");
+}
+
+void VideoController::getUserVideos(const HttpRequestPtr &,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &username) {
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                 "v.duration_seconds, v.view_count, v.created_at, v.realm_id, "
+                 "u.id as user_id, u.username, u.avatar_url, "
+                 "r.name as realm_name "
+                 "FROM videos v "
+                 "JOIN users u ON v.user_id = u.id "
+                 "JOIN realms r ON v.realm_id = r.id "
+                 "WHERE u.username = $1 AND v.is_public = true AND v.status = 'ready' "
+                 "ORDER BY v.created_at DESC"
+              << username
+              >> [callback, username](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["username"] = username;
+                  Json::Value videos(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      videos.append(buildVideoJson(row, VideoJsonLevel::Standard));
+                  }
+
+                  resp["videos"] = videos;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user videos");
+}
+
+void VideoController::getRealmVideos(const HttpRequestPtr &,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &realmId) {
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    // First get realm info
+    *dbClient << "SELECT r.id, r.name, r.description, r.realm_type, r.title_color, r.created_at, "
+                 "u.id as user_id, u.username, u.avatar_url "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "WHERE r.id = $1 AND r.is_active = true AND r.realm_type = 'video'"
+              << id
+              >> [callback, dbClient, id](const Result& realmResult) {
+                  if (realmResult.empty()) {
+                      callback(jsonError("Video realm not found", k404NotFound));
+                      return;
+                  }
+
+                  // Get videos for this realm
+                  *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                               "v.duration_seconds, v.view_count, v.created_at "
+                               "FROM videos v "
+                               "WHERE v.realm_id = $1 AND v.is_public = true AND v.status = 'ready' "
+                               "ORDER BY v.created_at DESC"
+                            << id
+                            >> [callback, realmResult](const Result& r) {
+                                Json::Value resp;
+                                resp["success"] = true;
+
+                                // Realm info
+                                auto& realm = resp["realm"];
+                                realm["id"] = static_cast<Json::Int64>(realmResult[0]["id"].as<int64_t>());
+                                realm["name"] = realmResult[0]["name"].as<std::string>();
+                                realm["description"] = realmResult[0]["description"].isNull() ? "" : realmResult[0]["description"].as<std::string>();
+                                realm["titleColor"] = realmResult[0]["title_color"].isNull() ? "#ffffff" : realmResult[0]["title_color"].as<std::string>();
+                                realm["createdAt"] = realmResult[0]["created_at"].as<std::string>();
+                                realm["userId"] = static_cast<Json::Int64>(realmResult[0]["user_id"].as<int64_t>());
+                                realm["username"] = realmResult[0]["username"].as<std::string>();
+                                realm["avatarUrl"] = realmResult[0]["avatar_url"].isNull() ? "" : realmResult[0]["avatar_url"].as<std::string>();
+
+                                // Videos (Minimal level - no realm/user info since it's implied)
+                                Json::Value videos(Json::arrayValue);
+                                for (const auto& row : r) {
+                                    videos.append(buildVideoJson(row, VideoJsonLevel::Minimal));
+                                }
+
+                                resp["videos"] = videos;
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR(callback, "get realm videos");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void VideoController::incrementViewCount(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &videoId) {
+    int64_t id;
+    try {
+        id = std::stoll(videoId);
+    } catch (...) {
+        callback(jsonError("Invalid video ID", k400BadRequest));
+        return;
+    }
+
+    // SECURITY FIX #13: Rate limit view count increments per IP per video
+    // Prevents artificial view count inflation
+    std::string clientIp = req->getPeerAddr().toIp();
+    std::string rateKey = "view_limit:" + std::to_string(id) + ":" + clientIp;
+
+    // Check if this IP has already viewed this video recently (5 minute window)
+    RedisHelper::getKeyAsync(rateKey, [callback, id, rateKey, clientIp](const std::string& exists) {
+        if (!exists.empty()) {
+            // Already counted recently - return success but don't increment
+            Json::Value resp;
+            resp["success"] = true;
+            resp["message"] = "View already counted";
+            callback(jsonResp(resp));
+            return;
+        }
+
+        // Set rate limit key first (TTL 300 seconds = 5 minutes)
+        RedisHelper::storeKeyAsync(rateKey, "1", 300, [callback, id](bool stored) {
+            if (!stored) {
+                LOG_WARN << "Failed to set view rate limit key, allowing view anyway";
+            }
+
+            // Increment view count in database
+            auto dbClient = app().getDbClient();
+            *dbClient << "UPDATE videos SET view_count = view_count + 1 "
+                         "WHERE id = $1 AND is_public = true AND status = 'ready' "
+                         "RETURNING view_count"
+                      << id
+                      >> [callback](const Result& r) {
+                          if (r.empty()) {
+                              callback(jsonError("Video not found", k404NotFound));
+                              return;
+                          }
+
+                          Json::Value resp;
+                          resp["success"] = true;
+                          resp["viewCount"] = r[0]["view_count"].as<int>();
+                          callback(jsonResp(resp));
+                      }
+                      >> DB_ERROR(callback, "increment view count");
+        });
+    });
+}
+
+void VideoController::getMyVideos(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT v.id, v.title, v.description, v.file_path, v.thumbnail_path, v.preview_path, "
+                 "v.duration_seconds, v.file_size_bytes, v.view_count, v.is_public, v.status, v.created_at, "
+                 "v.realm_id, r.name as realm_name "
+                 "FROM videos v "
+                 "JOIN realms r ON v.realm_id = r.id "
+                 "WHERE v.user_id = $1 AND v.status != 'deleted' "
+                 "ORDER BY v.created_at DESC"
+              << user.id
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  Json::Value videos(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value video;
+                      video["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      video["title"] = row["title"].as<std::string>();
+                      video["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      video["filePath"] = row["file_path"].as<std::string>();
+                      video["thumbnailPath"] = row["thumbnail_path"].isNull() ? "" : row["thumbnail_path"].as<std::string>();
+                      video["previewPath"] = row["preview_path"].isNull() ? "" : row["preview_path"].as<std::string>();
+                      video["durationSeconds"] = row["duration_seconds"].as<int>();
+                      video["fileSizeBytes"] = static_cast<Json::Int64>(row["file_size_bytes"].as<int64_t>());
+                      video["viewCount"] = row["view_count"].as<int>();
+                      video["isPublic"] = row["is_public"].as<bool>();
+                      video["status"] = row["status"].as<std::string>();
+                      video["createdAt"] = row["created_at"].as<std::string>();
+                      video["realmId"] = static_cast<Json::Int64>(row["realm_id"].as<int64_t>());
+                      video["realmName"] = row["realm_name"].as<std::string>();
+                      videos.append(video);
+                  }
+
+                  resp["videos"] = videos;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get user videos");
+}
+
+void VideoController::uploadVideo(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback) {
+    try {
+        UserInfo user = getUserFromRequest(req);
+        if (user.id == 0) {
+            callback(jsonError("Unauthorized", k401Unauthorized));
+            return;
+        }
+
+        MultiPartParser parser;
+        parser.parse(req);
+
+        // Get realm ID from form data - required
+        std::string realmIdStr = parser.getParameter<std::string>("realmId");
+        if (realmIdStr.empty()) {
+            callback(jsonError("Realm ID is required"));
+            return;
+        }
+
+        int64_t realmId;
+        try {
+            realmId = std::stoll(realmIdStr);
+        } catch (...) {
+            callback(jsonError("Invalid realm ID"));
+            return;
+        }
+
+        // Extract all data from parser before async call
+        if (parser.getFiles().empty()) {
+            callback(jsonError("No file uploaded"));
+            return;
+        }
+
+        const auto& file = parser.getFiles()[0];
+
+        // Get title from form data
+        std::string title = parser.getParameter<std::string>("title");
+        if (title.empty()) {
+            title = "Untitled Video";
+        }
+        if (title.length() > 255) {
+            title = title.substr(0, 255);
+        }
+
+        // Get optional description
+        std::string description = parser.getParameter<std::string>("description");
+        if (description.length() > 5000) {
+            description = description.substr(0, 5000);
+        }
+
+        // Validate file size (500MB max)
+        const size_t maxSize = 500 * 1024 * 1024;
+        size_t fileSize = file.fileLength();
+        if (fileSize > maxSize) {
+            callback(jsonError("File too large (max 500MB)"));
+            return;
+        }
+
+        if (fileSize == 0) {
+            callback(jsonError("Empty file uploaded"));
+            return;
+        }
+
+        // Validate video magic bytes
+        auto validation = validateVideoMagicBytes(file.fileData(), fileSize);
+        if (!validation.valid) {
+            LOG_WARN << "Video upload rejected: invalid video magic bytes";
+            callback(jsonError("Invalid video file. Only MP4, WebM, and MOV are allowed."));
+            return;
+        }
+
+        std::string fileExt = validation.extension.substr(1);
+
+        // Write file to disk IMMEDIATELY (before async DB calls) to avoid holding 500MB in memory
+        const std::string uploadDir = "/app/uploads/videos";
+        if (!ensureDirectoryExists(uploadDir)) {
+            callback(jsonError("Failed to create upload directory"));
+            return;
+        }
+
+        // Generate unique filename
+        std::string filename = generateRandomFilename(fileExt);
+        std::string fullPath = uploadDir + "/" + filename;
+
+        // Ensure file doesn't exist
+        while (std::filesystem::exists(fullPath)) {
+            filename = generateRandomFilename(fileExt);
+            fullPath = uploadDir + "/" + filename;
+        }
+
+        // Write directly from Drogon buffer (no memory copy)
+        try {
+            std::ofstream ofs(fullPath, std::ios::binary);
+            if (!ofs) {
+                LOG_ERROR << "Failed to create file: " << fullPath;
+                callback(jsonError("Failed to save file"));
+                return;
+            }
+
+            ofs.write(file.fileData(), fileSize);
+            ofs.close();
+
+            if (!std::filesystem::exists(fullPath)) {
+                LOG_ERROR << "File was not created: " << fullPath;
+                callback(jsonError("Failed to save file"));
+                return;
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception saving video file: " << e.what();
+            callback(jsonError("Failed to save file"));
+            return;
+        }
+
+        std::string filePath = "/uploads/videos/" + filename;
+
+        // Check if user has uploader role and the realm exists and belongs to them
+        auto dbClient = app().getDbClient();
+        *dbClient << "SELECT u.is_uploader, r.id as realm_id, r.realm_type "
+                     "FROM users u "
+                     "LEFT JOIN realms r ON r.user_id = u.id AND r.id = $2 "
+                     "WHERE u.id = $1"
+                  << user.id << realmId
+                  >> [callback, user, dbClient, realmId, title, description, fullPath, filePath, fileSize, uploadDir](const Result& r) {
+                      if (r.empty() || !r[0]["is_uploader"].as<bool>()) {
+                          std::filesystem::remove(fullPath);  // Clean up file on permission failure
+                          callback(jsonError("You don't have permission to upload videos", k403Forbidden));
+                          return;
+                      }
+
+                      // Check if realm exists and belongs to user
+                      if (r[0]["realm_id"].isNull()) {
+                          std::filesystem::remove(fullPath);  // Clean up file
+                          callback(jsonError("Video realm not found or doesn't belong to you", k404NotFound));
+                          return;
+                      }
+
+                      // Check if it's a video realm
+                      std::string realmType = r[0]["realm_type"].isNull() ? "stream" : r[0]["realm_type"].as<std::string>();
+                      if (realmType != "video") {
+                          std::filesystem::remove(fullPath);  // Clean up file
+                          callback(jsonError("Can only upload videos to video realms", k400BadRequest));
+                          return;
+                      }
+
+                      // Insert video record - status is 'ready' for now (no processing)
+                      *dbClient << "INSERT INTO videos (user_id, realm_id, title, description, file_path, "
+                                   "file_size_bytes, status, is_public, duration_seconds) "
+                                   "VALUES ($1, $2, $3, $4, $5, $6, 'ready', true, 0) RETURNING id, created_at"
+                                << user.id << realmId << title << description << filePath
+                                << static_cast<int64_t>(fileSize)
+                                >> [callback, title, filePath, fileSize, realmId, fullPath, uploadDir](const Result& r2) {
+                                    if (r2.empty()) {
+                                        std::filesystem::remove(fullPath);  // Clean up file
+                                        callback(jsonError("Failed to save video record"));
+                                        return;
+                                    }
+
+                                    int64_t videoId = r2[0]["id"].as<int64_t>();
+
+                                    // Start async thumbnail generation
+                                    processVideoThumbnails(videoId, fullPath, uploadDir);
+
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["video"]["id"] = static_cast<Json::Int64>(videoId);
+                                    resp["video"]["realmId"] = static_cast<Json::Int64>(realmId);
+                                    resp["video"]["title"] = title;
+                                    resp["video"]["filePath"] = filePath;
+                                    resp["video"]["fileSizeBytes"] = static_cast<Json::Int64>(fileSize);
+                                    resp["video"]["status"] = "ready";
+                                    resp["video"]["createdAt"] = r2[0]["created_at"].as<std::string>();
+                                    callback(jsonResp(resp));
+                                }
+                                >> [callback, fullPath](const DrogonDbException& e) {
+                                    LOG_ERROR << "Failed to insert video: " << e.base().what();
+                                    // Clean up file on DB error
+                                    std::filesystem::remove(fullPath);
+                                    callback(jsonError("Failed to save video"));
+                                };
+                  }
+                  >> [callback, fullPath](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to check uploader status: " << e.base().what();
+                      std::filesystem::remove(fullPath);  // Clean up file on DB error
+                      callback(jsonError("Database error"));
+                  };
+
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Exception in uploadVideo: " << e.what();
+        callback(jsonError("Internal server error"));
+    }
+}
+
+void VideoController::updateVideo(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &videoId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(videoId);
+    } catch (...) {
+        callback(jsonError("Invalid video ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Verify ownership
+    *dbClient << "SELECT id FROM videos WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, json, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Video not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string title, description;
+
+                  if (json->isMember("title")) {
+                      title = (*json)["title"].asString();
+                      if (title.length() > 255) title = title.substr(0, 255);
+                  }
+                  if (json->isMember("description")) {
+                      description = (*json)["description"].asString();
+                      if (description.length() > 5000) description = description.substr(0, 5000);
+                  }
+
+                  if (json->isMember("title") && json->isMember("description")) {
+                      *dbClient << "UPDATE videos SET title = $1, description = $2 WHERE id = $3"
+                                << title << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Video updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update video", "Failed to update video");
+                  } else if (json->isMember("title")) {
+                      *dbClient << "UPDATE videos SET title = $1 WHERE id = $2"
+                                << title << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Video updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update video", "Failed to update video");
+                  } else if (json->isMember("description")) {
+                      *dbClient << "UPDATE videos SET description = $1 WHERE id = $2"
+                                << description << id
+                                >> [callback](const Result&) {
+                                    Json::Value resp;
+                                    resp["success"] = true;
+                                    resp["message"] = "Video updated successfully";
+                                    callback(jsonResp(resp));
+                                }
+                                >> DB_ERROR_MSG(callback, "update video", "Failed to update video");
+                  } else {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      resp["message"] = "No changes to apply";
+                      callback(jsonResp(resp));
+                  }
+              }
+              >> DB_ERROR(callback, "verify video ownership");
+}
+
+void VideoController::deleteVideo(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &videoId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(videoId);
+    } catch (...) {
+        callback(jsonError("Invalid video ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Get file paths and verify ownership
+    *dbClient << "SELECT file_path, thumbnail_path, preview_path FROM videos "
+                 "WHERE id = $1 AND user_id = $2 AND status != 'deleted'"
+              << id << user.id
+              >> [callback, dbClient, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Video not found or access denied", k404NotFound));
+                      return;
+                  }
+
+                  std::string filePath = r[0]["file_path"].as<std::string>();
+                  std::string thumbnailPath = r[0]["thumbnail_path"].isNull() ? "" : r[0]["thumbnail_path"].as<std::string>();
+                  std::string previewPath = r[0]["preview_path"].isNull() ? "" : r[0]["preview_path"].as<std::string>();
+
+                  // Soft delete by setting status to 'deleted'
+                  *dbClient << "UPDATE videos SET status = 'deleted' WHERE id = $1"
+                            << id
+                            >> [callback, filePath, thumbnailPath, previewPath](const Result&) {
+                                // Delete files from disk
+                                try {
+                                    std::string fullVideoPath = "/app" + filePath;
+                                    if (std::filesystem::exists(fullVideoPath)) {
+                                        std::filesystem::remove(fullVideoPath);
+                                    }
+                                    if (!thumbnailPath.empty()) {
+                                        std::string fullThumbPath = "/app" + thumbnailPath;
+                                        if (std::filesystem::exists(fullThumbPath)) {
+                                            std::filesystem::remove(fullThumbPath);
+                                        }
+                                    }
+                                    if (!previewPath.empty()) {
+                                        std::string fullPreviewPath = "/app" + previewPath;
+                                        if (std::filesystem::exists(fullPreviewPath)) {
+                                            std::filesystem::remove(fullPreviewPath);
+                                        }
+                                    }
+                                } catch (const std::exception& e) {
+                                    LOG_WARN << "Failed to delete video files: " << e.what();
+                                }
+
+                                Json::Value resp;
+                                resp["success"] = true;
+                                resp["message"] = "Video deleted successfully";
+                                callback(jsonResp(resp));
+                            }
+                            >> DB_ERROR_MSG(callback, "delete video", "Failed to delete video");
+              }
+              >> DB_ERROR(callback, "get video for deletion");
+}
diff --git a/backend/src/controllers/VideoController.h b/backend/src/controllers/VideoController.h
new file mode 100644
index 0000000..9fca207
--- /dev/null
+++ b/backend/src/controllers/VideoController.h
@@ -0,0 +1,62 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+
+class VideoController : public HttpController<VideoController> {
+public:
+    METHOD_LIST_BEGIN
+    // Public endpoints
+    ADD_METHOD_TO(VideoController::getAllVideos, "/api/videos", Get);
+    ADD_METHOD_TO(VideoController::getLatestVideos, "/api/videos/latest", Get);
+    ADD_METHOD_TO(VideoController::getVideo, "/api/videos/{1}", Get);
+    ADD_METHOD_TO(VideoController::getUserVideos, "/api/videos/user/{1}", Get);
+    ADD_METHOD_TO(VideoController::getRealmVideos, "/api/videos/realm/{1}", Get);
+    ADD_METHOD_TO(VideoController::incrementViewCount, "/api/videos/{1}/view", Post);
+
+    // Authenticated endpoints
+    ADD_METHOD_TO(VideoController::getMyVideos, "/api/user/videos", Get);
+    ADD_METHOD_TO(VideoController::uploadVideo, "/api/user/videos", Post);
+    ADD_METHOD_TO(VideoController::updateVideo, "/api/videos/{1}", Put);
+    ADD_METHOD_TO(VideoController::deleteVideo, "/api/videos/{1}", Delete);
+    METHOD_LIST_END
+
+    // Public video listing
+    void getAllVideos(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getLatestVideos(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void getVideo(const HttpRequestPtr &req,
+                 std::function<void(const HttpResponsePtr &)> &&callback,
+                 const std::string &videoId);
+
+    void getUserVideos(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &username);
+
+    void getRealmVideos(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+    void incrementViewCount(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &videoId);
+
+    // Authenticated video management
+    void getMyVideos(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void uploadVideo(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback);
+
+    void updateVideo(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &videoId);
+
+    void deleteVideo(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &videoId);
+};
diff --git a/backend/src/controllers/WatchController.cpp b/backend/src/controllers/WatchController.cpp
new file mode 100644
index 0000000..107afc3
--- /dev/null
+++ b/backend/src/controllers/WatchController.cpp
@@ -0,0 +1,1305 @@
+#include "WatchController.h"
+#include "../common/HttpHelpers.h"
+#include "../common/AuthHelpers.h"
+#include <drogon/drogon.h>
+#include <regex>
+#include <chrono>
+#include <sstream>
+#include <iomanip>
+
+using namespace drogon::orm;
+
+namespace {
+    int64_t getCurrentTimestampMs() {
+        auto now = std::chrono::system_clock::now();
+        return std::chrono::duration_cast<std::chrono::milliseconds>(
+            now.time_since_epoch()
+        ).count();
+    }
+}
+
+bool WatchController::canControlPlaylist(const UserInfo& user, int64_t realmId, int64_t ownerId,
+                                         const std::string& mode, const std::string& whitelist) {
+    // Owner and admin always have control
+    if (user.id == ownerId || user.isAdmin) return true;
+
+    if (mode == "owner") return false;
+    if (mode == "anyone" || mode == "guests") return true;  // guests mode allows everyone including guests
+    if (mode == "registered") return user.id != 0;
+    if (mode == "whitelist") {
+        // Parse JSON whitelist array
+        Json::Value whitelistJson;
+        Json::Reader reader;
+        if (reader.parse(whitelist, whitelistJson) && whitelistJson.isArray()) {
+            for (const auto& name : whitelistJson) {
+                if (name.asString() == user.username) return true;
+            }
+        }
+        return false;
+    }
+
+    return false;
+}
+
+bool WatchController::canControlPlayback(const UserInfo& user, int64_t ownerId) {
+    // Only owner and admin can control playback (play, pause, seek, skip)
+    return user.id == ownerId || user.isAdmin;
+}
+
+std::string WatchController::extractYouTubeVideoId(const std::string& url) {
+    // Support various YouTube URL formats
+    std::vector<std::regex> patterns = {
+        std::regex(R"((?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11}))"),
+        std::regex(R"(^([a-zA-Z0-9_-]{11})$)")  // Just the video ID
+    };
+
+    for (const auto& pattern : patterns) {
+        std::smatch match;
+        if (std::regex_search(url, match, pattern) && match.size() > 1) {
+            return match[1].str();
+        }
+    }
+
+    return "";
+}
+
+void WatchController::getWatchRooms(const HttpRequestPtr &,
+                                    std::function<void(const HttpResponsePtr &)> &&callback) {
+    auto dbClient = app().getDbClient();
+    // Efficiency: Use JOINs instead of correlated subqueries
+    *dbClient << "SELECT r.id, r.name, r.description, u.username, u.avatar_url, u.user_color, "
+                 "COALESCE(wrs.viewer_count, 0) as viewer_count, "
+                 "COALESCE(wrs.playback_state, 'paused') as playback_state, "
+                 "COALESCE(queue_count.cnt, 0) as queued_count, "
+                 "current_video.title as current_video_title, "
+                 "current_video.thumbnail_url as current_thumbnail "
+                 "FROM realms r "
+                 "JOIN users u ON r.user_id = u.id "
+                 "LEFT JOIN watch_room_state wrs ON wrs.realm_id = r.id "
+                 "LEFT JOIN watch_playlist current_video ON current_video.id = wrs.current_video_id "
+                 "LEFT JOIN LATERAL ("
+                 "  SELECT COUNT(*) as cnt FROM watch_playlist wp "
+                 "  WHERE wp.realm_id = r.id AND wp.status IN ('queued', 'playing')"
+                 ") queue_count ON true "
+                 "WHERE r.is_active = true AND r.realm_type = 'watch' "
+                 "ORDER BY viewer_count DESC NULLS LAST, r.created_at DESC"
+              >> [callback](const Result& r) {
+                  Json::Value resp;
+                  Json::Value rooms(Json::arrayValue);
+
+                  for (const auto& row : r) {
+                      Json::Value room;
+                      room["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                      room["name"] = row["name"].as<std::string>();
+                      room["description"] = row["description"].isNull() ? "" : row["description"].as<std::string>();
+                      room["username"] = row["username"].as<std::string>();
+                      room["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
+                      room["colorCode"] = row["user_color"].isNull() ? "#561D5E" : row["user_color"].as<std::string>();
+                      room["viewerCount"] = row["viewer_count"].isNull() ? 0 : row["viewer_count"].as<int>();
+                      room["playbackState"] = row["playback_state"].isNull() ? "paused" : row["playback_state"].as<std::string>();
+                      room["queuedCount"] = row["queued_count"].isNull() ? 0 : row["queued_count"].as<int>();
+                      room["currentVideoTitle"] = row["current_video_title"].isNull() ? "" : row["current_video_title"].as<std::string>();
+                      room["currentThumbnail"] = row["current_thumbnail"].isNull() ? "" : row["current_thumbnail"].as<std::string>();
+                      rooms.append(room);
+                  }
+
+                  resp["success"] = true;
+                  resp["rooms"] = rooms;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR(callback, "get watch rooms");
+}
+
+void WatchController::getPlaylist(const HttpRequestPtr &req,
+                                  std::function<void(const HttpResponsePtr &)> &&callback,
+                                  const std::string &realmId) {
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    // Check if requesting history
+    bool wantHistory = req->getParameter("history") == "true";
+
+    auto dbClient = app().getDbClient();
+
+    if (wantHistory) {
+        // Return played videos from the last 24 hours
+        *dbClient << "SELECT wp.id, wp.youtube_video_id, wp.title, wp.duration_seconds, "
+                     "wp.thumbnail_url, wp.added_by_username, wp.started_at "
+                     "FROM watch_playlist wp "
+                     "WHERE wp.realm_id = $1 AND wp.status = 'played' "
+                     "AND wp.started_at > NOW() - INTERVAL '24 hours' "
+                     "ORDER BY wp.started_at DESC"
+                  << id
+                  >> [callback](const Result& r) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      Json::Value history(Json::arrayValue);
+
+                      for (const auto& row : r) {
+                          Json::Value item;
+                          item["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                          item["youtubeVideoId"] = row["youtube_video_id"].as<std::string>();
+                          item["title"] = row["title"].as<std::string>();
+                          item["durationSeconds"] = row["duration_seconds"].as<int>();
+                          item["thumbnailUrl"] = row["thumbnail_url"].isNull() ? "" : row["thumbnail_url"].as<std::string>();
+                          item["addedBy"] = row["added_by_username"].as<std::string>();
+                          item["playedAt"] = row["started_at"].isNull() ? "" : row["started_at"].as<std::string>();
+                          history.append(item);
+                      }
+
+                      resp["history"] = history;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR_MSG(callback, "get history", "Failed to get history");
+    } else {
+        // Return current playlist (queued and playing only, not played)
+        *dbClient << "SELECT wp.id, wp.youtube_video_id, wp.title, wp.duration_seconds, "
+                     "wp.thumbnail_url, wp.added_by_username, wp.position, wp.status, "
+                     "wp.started_at, wp.created_at, wp.is_locked "
+                     "FROM watch_playlist wp "
+                     "WHERE wp.realm_id = $1 AND wp.status IN ('queued', 'playing') "
+                     "ORDER BY wp.created_at ASC"
+                  << id
+                  >> [callback](const Result& r) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      Json::Value playlist(Json::arrayValue);
+
+                      for (const auto& row : r) {
+                          Json::Value item;
+                          item["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
+                          item["youtubeVideoId"] = row["youtube_video_id"].as<std::string>();
+                          item["title"] = row["title"].as<std::string>();
+                          item["durationSeconds"] = row["duration_seconds"].as<int>();
+                          item["thumbnailUrl"] = row["thumbnail_url"].isNull() ? "" : row["thumbnail_url"].as<std::string>();
+                          item["addedBy"] = row["added_by_username"].as<std::string>();
+                          item["position"] = row["position"].as<int>();
+                          item["status"] = row["status"].as<std::string>();
+                          item["startedAt"] = row["started_at"].isNull() ? "" : row["started_at"].as<std::string>();
+                          item["createdAt"] = row["created_at"].as<std::string>();
+                          item["isLocked"] = row["is_locked"].isNull() ? false : row["is_locked"].as<bool>();
+                          playlist.append(item);
+                      }
+
+                      resp["playlist"] = playlist;
+                      callback(jsonResp(resp));
+                  }
+                  >> DB_ERROR_MSG(callback, "get playlist", "Failed to get playlist");
+    }
+}
+
+void WatchController::addToPlaylist(const HttpRequestPtr &req,
+                                    std::function<void(const HttpResponsePtr &)> &&callback,
+                                    const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    std::string youtubeUrl = (*json)["youtubeUrl"].asString();
+    std::string videoId = extractYouTubeVideoId(youtubeUrl);
+    if (videoId.empty()) {
+        videoId = (*json)["videoId"].asString();
+    }
+
+    if (videoId.empty() || videoId.length() != 11) {
+        callback(jsonError("Invalid YouTube video ID or URL"));
+        return;
+    }
+
+    // SECURITY: Ignore client-provided title to prevent XSS attacks
+    // Frontend fetches titles directly from YouTube oEmbed API when displaying
+    // Store only the video ID as a reference (safe, validated value)
+    std::string title = videoId;  // Use validated video ID as title placeholder
+    int durationSeconds = (*json)["duration"].asInt();
+    std::string fingerprint = (*json)["fingerprint"].asString();
+    // Always generate thumbnail URL from validated video ID (never trust user-provided URLs)
+    std::string thumbnailUrl = "https://img.youtube.com/vi/" + videoId + "/mqdefault.jpg";
+
+    std::string username = user.id > 0 ? user.username : "Guest";
+
+    auto dbClient = app().getDbClient();
+    // Check realm exists and is a watch type, get permissions
+    *dbClient << "SELECT r.id, r.user_id, r.realm_type, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1"
+              << id
+              >> [this, callback, dbClient, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint]
+                 (const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Realm not found", k404NotFound));
+                      return;
+                  }
+
+                  std::string realmType = r[0]["realm_type"].as<std::string>();
+                  if (realmType != "watch") {
+                      callback(jsonError("This realm is not a watch room", k400BadRequest));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  std::string mode = r[0]["playlist_control_mode"].isNull() ? "owner" : r[0]["playlist_control_mode"].as<std::string>();
+                  std::string whitelist = r[0]["playlist_whitelist"].isNull() ? "[]" : r[0]["playlist_whitelist"].as<std::string>();
+
+                  if (!canControlPlaylist(user, id, ownerId, mode, whitelist)) {
+                      callback(jsonError("You don't have permission to add to the playlist", k403Forbidden));
+                      return;
+                  }
+
+                  // Rate limiting: Check video counts before adding
+                  // - Guests: 1 queued video max
+                  // - Registered users: 10 queued videos max (owner exempt)
+                  // - Owner/Admin: No limit
+
+                  bool isOwnerOrAdmin = (user.id == ownerId || user.isAdmin);
+
+                  // For guests in "guests" mode, check if they already have a queued video
+                  // Use transaction with FOR UPDATE lock to prevent race condition bypass
+                  if (mode == "guests" && user.id == 0 && !fingerprint.empty()) {
+                      dbClient->newTransactionAsync([this, callback, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId]
+                                                    (const std::shared_ptr<Transaction>& trans) {
+                          if (!trans) {
+                              callback(jsonError("Failed to start transaction", k500InternalServerError));
+                              return;
+                          }
+
+                          // Lock any existing queued entries for this guest with FOR UPDATE
+                          // This prevents concurrent requests from bypassing the limit
+                          *trans << "SELECT id FROM watch_playlist "
+                                    "WHERE realm_id = $1 AND guest_fingerprint = $2 AND status = 'queued' "
+                                    "FOR UPDATE"
+                                 << id << fingerprint
+                                 >> [this, callback, trans, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId]
+                                    (const Result& lockResult) {
+                                     if (!lockResult.empty()) {
+                                         // Guest already has a queued video
+                                         callback(jsonError("Guests can only have one video in the queue at a time. Wait for your video to play or remove it first."));
+                                         return;
+                                     }
+
+                                     // No queued video found, proceed with adding within the same transaction
+                                     // Pass the transaction's DbClientPtr to addVideoToPlaylist
+                                     this->addVideoToPlaylist(callback, trans, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId);
+                                 }
+                                 >> DB_ERROR(callback, "check guest video count");
+                      });
+                  } else if (!isOwnerOrAdmin && user.id > 0) {
+                      // Rate limit for registered users (not owner/admin): max 10 queued videos
+                      *dbClient << "SELECT COUNT(*) as cnt FROM watch_playlist "
+                                   "WHERE realm_id = $1 AND added_by = $2 AND status = 'queued'"
+                                << id << user.id
+                                >> [this, callback, dbClient, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId]
+                                   (const Result& countResult) {
+                                    int count = countResult[0]["cnt"].as<int>();
+                                    if (count >= 10) {
+                                        callback(jsonError("You can only have 10 videos queued at a time. Wait for some to play or remove them first."));
+                                        return;
+                                    }
+                                    this->addVideoToPlaylist(callback, dbClient, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId);
+                                }
+                                >> DB_ERROR(callback, "check user video count");
+                  } else {
+                      // Owner/Admin - no limit, proceed normally
+                      this->addVideoToPlaylist(callback, dbClient, id, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint, ownerId);
+                  }
+              }
+              >> DB_ERROR(callback, "check realm");
+}
+
+// Helper function to actually add video to playlist
+// Uses transaction with FOR UPDATE lock to prevent race conditions
+void WatchController::addVideoToPlaylist(
+    std::function<void(const HttpResponsePtr &)> callback,
+    const DbClientPtr& dbClient,
+    int64_t realmId,
+    const UserInfo& user,
+    const std::string& videoId,
+    const std::string& title,
+    int durationSeconds,
+    const std::string& thumbnailUrl,
+    const std::string& username,
+    const std::string& fingerprint,
+    int64_t ownerId) {
+
+    // Use a transaction to prevent race conditions when multiple users add videos simultaneously
+    auto transCallback = [callback, realmId, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint]
+                         (const std::shared_ptr<Transaction>& trans) {
+        // Lock the room state row with FOR UPDATE to prevent concurrent modifications
+        // This ensures only one request can check and update the current_video_id at a time
+        *trans << "SELECT current_video_id FROM watch_room_state WHERE realm_id = $1 FOR UPDATE"
+               << realmId
+               >> [callback, trans, realmId, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint]
+                  (const Result& r2) {
+                   bool hasCurrentVideo = !r2.empty() && !r2[0]["current_video_id"].isNull();
+
+                   // Determine initial status - if no current video, this one starts playing
+                   std::string initialStatus = hasCurrentVideo ? "queued" : "playing";
+
+                   // Store fingerprint for guests, null for registered users
+                   std::optional<std::string> guestFingerprint = (user.id == 0 && !fingerprint.empty())
+                       ? std::optional<std::string>(fingerprint)
+                       : std::nullopt;
+
+                   // Insert video into playlist
+                   *trans << "INSERT INTO watch_playlist "
+                             "(realm_id, youtube_video_id, title, duration_seconds, thumbnail_url, "
+                             "added_by, added_by_username, status, guest_fingerprint) "
+                             "VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING id"
+                          << realmId << videoId << title << durationSeconds << thumbnailUrl
+                          << (user.id > 0 ? std::optional<int64_t>(user.id) : std::nullopt)
+                          << username << initialStatus << guestFingerprint
+                          >> [callback, trans, realmId, videoId, title, durationSeconds, thumbnailUrl, username, hasCurrentVideo]
+                             (const Result& r3) {
+                              int64_t newVideoId = r3[0]["id"].as<int64_t>();
+
+                              // If this is the first video, set it as current and start playing
+                              if (!hasCurrentVideo) {
+                                  // Set started_at on the playlist item
+                                  *trans << "UPDATE watch_playlist SET started_at = CURRENT_TIMESTAMP "
+                                            "WHERE id = $1"
+                                         << newVideoId
+                                         >> [callback, trans, realmId, newVideoId, videoId, title, durationSeconds, thumbnailUrl, username]
+                                            (const Result&) {
+                                             // Update or create room state (UPSERT) - still within transaction
+                                             *trans << "INSERT INTO watch_room_state (realm_id, current_video_id, "
+                                                       "playback_state, current_time_seconds, last_sync_at) "
+                                                       "VALUES ($1, $2, 'playing', 0, CURRENT_TIMESTAMP) "
+                                                       "ON CONFLICT (realm_id) DO UPDATE SET "
+                                                       "current_video_id = $2, playback_state = 'playing', "
+                                                       "current_time_seconds = 0, last_sync_at = CURRENT_TIMESTAMP"
+                                                   << realmId << newVideoId
+                                                   >> [callback, newVideoId, videoId, title, durationSeconds, thumbnailUrl, username]
+                                                      (const Result&) {
+                                                       Json::Value resp;
+                                                       resp["success"] = true;
+                                                       resp["item"]["id"] = static_cast<Json::Int64>(newVideoId);
+                                                       resp["item"]["youtubeVideoId"] = videoId;
+                                                       resp["item"]["title"] = title;
+                                                       resp["item"]["durationSeconds"] = durationSeconds;
+                                                       resp["item"]["thumbnailUrl"] = thumbnailUrl;
+                                                       resp["item"]["addedBy"] = username;
+                                                       resp["item"]["status"] = "playing";
+                                                       resp["item"]["isLocked"] = false;
+                                                       resp["autoStarted"] = true;
+                                                       callback(jsonResp(resp));
+                                                   }
+                                                   >> DB_ERROR_MSG(callback, "set current video", "Failed to start video");
+                                         }
+                                         >> DB_ERROR_MSG(callback, "set started_at", "Failed to start video");
+                              } else {
+                                  Json::Value resp;
+                                  resp["success"] = true;
+                                  resp["item"]["id"] = static_cast<Json::Int64>(newVideoId);
+                                  resp["item"]["youtubeVideoId"] = videoId;
+                                  resp["item"]["title"] = title;
+                                  resp["item"]["durationSeconds"] = durationSeconds;
+                                  resp["item"]["thumbnailUrl"] = thumbnailUrl;
+                                  resp["item"]["addedBy"] = username;
+                                  resp["item"]["status"] = "queued";
+                                  resp["item"]["isLocked"] = false;
+                                  callback(jsonResp(resp));
+                              }
+                          }
+                          >> DB_ERROR_MSG(callback, "add to playlist", "Failed to add to playlist");
+               }
+               >> [callback, trans, realmId, user, videoId, title, durationSeconds, thumbnailUrl, username, fingerprint]
+                  (const DrogonDbException& e) {
+                   // If no room state exists yet, create it (first video for this room)
+                   std::optional<std::string> guestFingerprint = (user.id == 0 && !fingerprint.empty())
+                       ? std::optional<std::string>(fingerprint)
+                       : std::nullopt;
+
+                   // Insert video as playing (first video)
+                   *trans << "INSERT INTO watch_playlist "
+                             "(realm_id, youtube_video_id, title, duration_seconds, thumbnail_url, "
+                             "added_by, added_by_username, status, guest_fingerprint, started_at) "
+                             "VALUES ($1, $2, $3, $4, $5, $6, $7, 'playing', $8, CURRENT_TIMESTAMP) RETURNING id"
+                          << realmId << videoId << title << durationSeconds << thumbnailUrl
+                          << (user.id > 0 ? std::optional<int64_t>(user.id) : std::nullopt)
+                          << username << guestFingerprint
+                          >> [callback, trans, realmId, videoId, title, durationSeconds, thumbnailUrl, username]
+                             (const Result& r3) {
+                              int64_t newVideoId = r3[0]["id"].as<int64_t>();
+
+                              // Create room state
+                              *trans << "INSERT INTO watch_room_state (realm_id, current_video_id, "
+                                        "playback_state, current_time_seconds, last_sync_at) "
+                                        "VALUES ($1, $2, 'playing', 0, CURRENT_TIMESTAMP) "
+                                        "ON CONFLICT (realm_id) DO UPDATE SET "
+                                        "current_video_id = $2, playback_state = 'playing', "
+                                        "current_time_seconds = 0, last_sync_at = CURRENT_TIMESTAMP"
+                                    << realmId << newVideoId
+                                    >> [callback, newVideoId, videoId, title, durationSeconds, thumbnailUrl, username]
+                                       (const Result&) {
+                                        Json::Value resp;
+                                        resp["success"] = true;
+                                        resp["item"]["id"] = static_cast<Json::Int64>(newVideoId);
+                                        resp["item"]["youtubeVideoId"] = videoId;
+                                        resp["item"]["title"] = title;
+                                        resp["item"]["durationSeconds"] = durationSeconds;
+                                        resp["item"]["thumbnailUrl"] = thumbnailUrl;
+                                        resp["item"]["addedBy"] = username;
+                                        resp["item"]["status"] = "playing";
+                                        resp["item"]["isLocked"] = false;
+                                        resp["autoStarted"] = true;
+                                        callback(jsonResp(resp));
+                                    }
+                                    >> DB_ERROR_MSG(callback, "create room state", "Failed to start video");
+                          }
+                          >> DB_ERROR_MSG(callback, "add first video", "Failed to add to playlist");
+               };
+    };
+
+    dbClient->newTransactionAsync([callback, transCallback](const std::shared_ptr<Transaction>& trans) {
+        if (!trans) {
+            callback(jsonError("Failed to start transaction", k500InternalServerError));
+            return;
+        }
+        transCallback(trans);
+    });
+}
+
+void WatchController::removeFromPlaylist(const HttpRequestPtr &req,
+                                         std::function<void(const HttpResponsePtr &)> &&callback,
+                                         const std::string &realmId,
+                                         const std::string &itemId) {
+    UserInfo user = getUserFromRequest(req);
+
+    // Get fingerprint from header for guest deletion check
+    std::string requestFingerprint = req->getHeader("X-Fingerprint");
+
+    int64_t rId, iId;
+    try {
+        rId = std::stoll(realmId);
+        iId = std::stoll(itemId);
+    } catch (...) {
+        callback(jsonError("Invalid ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << rId
+              >> [this, callback, dbClient, rId, iId, user, requestFingerprint](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  std::string mode = r[0]["playlist_control_mode"].isNull() ? "owner" : r[0]["playlist_control_mode"].as<std::string>();
+                  std::string whitelist = r[0]["playlist_whitelist"].isNull() ? "[]" : r[0]["playlist_whitelist"].as<std::string>();
+
+                  // For removing: owner/admin always can, otherwise check if user owns the item
+                  bool isOwnerOrAdmin = (user.id == ownerId || user.isAdmin);
+
+                  if (!isOwnerOrAdmin && !canControlPlaylist(user, rId, ownerId, mode, whitelist)) {
+                      // Check if user is trying to delete their own submission
+                      // Will verify ownership when fetching the item
+                  }
+
+                  // Get the playlist item details to check ownership
+                  *dbClient << "SELECT added_by, guest_fingerprint FROM watch_playlist WHERE id = $1 AND realm_id = $2"
+                           << iId << rId
+                           >> [this, callback, dbClient, rId, iId, user, isOwnerOrAdmin, mode, requestFingerprint](const Result& itemResult) {
+                               if (itemResult.empty()) {
+                                   callback(jsonError("Playlist item not found", k404NotFound));
+                                   return;
+                               }
+
+                               // Check if user can delete this item
+                               bool canDelete = isOwnerOrAdmin;
+
+                               if (!canDelete) {
+                                   // Check if user owns this item (for registered users)
+                                   if (user.id > 0 && !itemResult[0]["added_by"].isNull()) {
+                                       int64_t addedBy = itemResult[0]["added_by"].as<int64_t>();
+                                       if (addedBy == user.id) {
+                                           canDelete = true;
+                                       }
+                                   }
+
+                                   // Check if guest owns this item (via fingerprint match)
+                                   if (!canDelete && !requestFingerprint.empty() && !itemResult[0]["guest_fingerprint"].isNull()) {
+                                       std::string storedFingerprint = itemResult[0]["guest_fingerprint"].as<std::string>();
+                                       if (storedFingerprint == requestFingerprint) {
+                                           canDelete = true;
+                                       }
+                                   }
+                               }
+
+                               if (!canDelete) {
+                                   callback(jsonError("You can only remove videos you added", k403Forbidden));
+                                   return;
+                               }
+
+                               // Check if we're deleting the currently playing video
+                               *dbClient << "SELECT current_video_id FROM watch_room_state WHERE realm_id = $1"
+                           << rId
+                           >> [callback, dbClient, rId, iId](const Result& stateResult) {
+                               bool isDeletingCurrentVideo = !stateResult.empty() &&
+                                   !stateResult[0]["current_video_id"].isNull() &&
+                                   stateResult[0]["current_video_id"].as<int64_t>() == iId;
+
+                               // Delete the video from playlist
+                               *dbClient << "DELETE FROM watch_playlist WHERE id = $1 AND realm_id = $2"
+                                        << iId << rId
+                                        >> [callback, dbClient, rId, isDeletingCurrentVideo](const Result&) {
+                                            if (isDeletingCurrentVideo) {
+                                                // Clear the current video state
+                                                *dbClient << "UPDATE watch_room_state SET current_video_id = NULL, "
+                                                             "playback_state = 'paused', current_time_seconds = 0, "
+                                                             "last_sync_at = CURRENT_TIMESTAMP WHERE realm_id = $1"
+                                                         << rId
+                                                         >> [callback](const Result&) {
+                                                             Json::Value resp;
+                                                             resp["success"] = true;
+                                                             resp["clearedCurrentVideo"] = true;
+                                                             callback(jsonResp(resp));
+                                                         }
+                                                         >> [callback](const DrogonDbException& e) {
+                                                             LOG_ERROR << "Failed to clear room state: " << e.base().what();
+                                                             // Still return success since video was deleted
+                                                             Json::Value resp;
+                                                             resp["success"] = true;
+                                                             callback(jsonResp(resp));
+                                                         };
+                                            } else {
+                                                Json::Value resp;
+                                                resp["success"] = true;
+                                                callback(jsonResp(resp));
+                                            }
+                                        }
+                                        >> DB_ERROR_MSG(callback, "remove from playlist", "Failed to remove from playlist");
+                               }
+                               >> DB_ERROR(callback, "check room state");
+                           }
+                           >> DB_ERROR(callback, "get playlist item");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::reorderPlaylist(const HttpRequestPtr &req,
+                                      std::function<void(const HttpResponsePtr &)> &&callback,
+                                      const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t rId;
+    try {
+        rId = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json || !(*json).isMember("order") || !(*json)["order"].isArray()) {
+        callback(jsonError("Invalid JSON - 'order' array required"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << rId
+              >> [this, callback, dbClient, rId, user, json](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  std::string mode = r[0]["playlist_control_mode"].isNull() ? "owner" : r[0]["playlist_control_mode"].as<std::string>();
+                  std::string whitelist = r[0]["playlist_whitelist"].isNull() ? "[]" : r[0]["playlist_whitelist"].as<std::string>();
+
+                  if (!canControlPlaylist(user, rId, ownerId, mode, whitelist)) {
+                      callback(jsonError("You don't have permission to reorder the playlist", k403Forbidden));
+                      return;
+                  }
+
+                  // Efficiency: Use single UPDATE with unnest to batch all position changes
+                  const Json::Value& order = (*json)["order"];
+                  if (order.empty()) {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      callback(jsonResp(resp));
+                      return;
+                  }
+
+                  // Build arrays for batch update
+                  std::vector<int64_t> itemIds;
+                  std::vector<int> positions;
+                  for (size_t i = 0; i < order.size(); i++) {
+                      itemIds.push_back(order[static_cast<Json::ArrayIndex>(i)].asInt64());
+                      positions.push_back(static_cast<int>(i));
+                  }
+
+                  // Use a single UPDATE with array parameters
+                  // This updates created_at based on position in a single query
+                  auto baseTime = std::chrono::system_clock::now() - std::chrono::hours(24);
+                  auto timeT = std::chrono::system_clock::to_time_t(baseTime);
+                  std::stringstream ss;
+                  ss << std::put_time(std::gmtime(&timeT), "%Y-%m-%d %H:%M:%S");
+                  std::string baseTimestamp = ss.str();
+
+                  // Build a single batch update query using CASE WHEN
+                  std::stringstream query;
+                  query << "UPDATE watch_playlist SET created_at = CASE id ";
+                  for (size_t i = 0; i < itemIds.size(); i++) {
+                      auto itemTime = baseTime + std::chrono::seconds(i);
+                      auto itemTimeT = std::chrono::system_clock::to_time_t(itemTime);
+                      std::stringstream itemSs;
+                      itemSs << std::put_time(std::gmtime(&itemTimeT), "%Y-%m-%d %H:%M:%S");
+                      query << "WHEN " << itemIds[i] << " THEN '" << itemSs.str() << "'::timestamp ";
+                  }
+                  query << "ELSE created_at END WHERE realm_id = " << rId << " AND id IN (";
+                  for (size_t i = 0; i < itemIds.size(); i++) {
+                      if (i > 0) query << ",";
+                      query << itemIds[i];
+                  }
+                  query << ")";
+
+                  *dbClient << query.str()
+                           >> [callback](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "reorder playlist", "Failed to reorder playlist");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::toggleLock(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &realmId,
+                                 const std::string &itemId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t rId, iId;
+    try {
+        rId = std::stoll(realmId);
+        iId = std::stoll(itemId);
+    } catch (...) {
+        callback(jsonError("Invalid ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json || !(*json).isMember("locked")) {
+        callback(jsonError("Invalid JSON - 'locked' boolean required"));
+        return;
+    }
+    bool locked = (*json)["locked"].asBool();
+
+    auto dbClient = app().getDbClient();
+    // Check realm ownership - only owner can lock/unlock videos
+    *dbClient << "SELECT r.user_id FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << rId
+              >> [callback, dbClient, rId, iId, user, locked](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (user.id != ownerId && !user.isAdmin) {
+                      callback(jsonError("Only the room owner can lock/unlock videos", k403Forbidden));
+                      return;
+                  }
+
+                  // Update the lock status
+                  *dbClient << "UPDATE watch_playlist SET is_locked = $1 "
+                               "WHERE id = $2 AND realm_id = $3 AND status IN ('queued', 'playing') "
+                               "RETURNING id, youtube_video_id, title, is_locked"
+                           << locked << iId << rId
+                           >> [callback, locked](const Result& r2) {
+                               if (r2.empty()) {
+                                   callback(jsonError("Playlist item not found or already played", k404NotFound));
+                                   return;
+                               }
+
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["item"]["id"] = static_cast<Json::Int64>(r2[0]["id"].as<int64_t>());
+                               resp["item"]["youtubeVideoId"] = r2[0]["youtube_video_id"].as<std::string>();
+                               resp["item"]["title"] = r2[0]["title"].as<std::string>();
+                               resp["item"]["isLocked"] = r2[0]["is_locked"].as<bool>();
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "toggle lock", "Failed to update lock status");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::getRoomState(const HttpRequestPtr &req,
+                                   std::function<void(const HttpResponsePtr &)> &&callback,
+                                   const std::string &realmId) {
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    UserInfo user = getUserFromRequest(req);
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.id, r.name, r.user_id, r.playlist_control_mode, r.playlist_whitelist, "
+                 "wrs.current_video_id, wrs.playback_state, wrs.current_time_seconds, "
+                 "wrs.last_sync_at, wrs.viewer_count, "
+                 "wp.youtube_video_id, wp.title, wp.duration_seconds, wp.thumbnail_url, wp.is_locked "
+                 "FROM realms r "
+                 "LEFT JOIN watch_room_state wrs ON wrs.realm_id = r.id "
+                 "LEFT JOIN watch_playlist wp ON wp.id = wrs.current_video_id "
+                 "WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << id
+              >> [this, callback, user, id](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  const auto& row = r[0];
+                  int64_t ownerId = row["user_id"].as<int64_t>();
+                  std::string mode = row["playlist_control_mode"].isNull() ? "owner" : row["playlist_control_mode"].as<std::string>();
+                  std::string whitelist = row["playlist_whitelist"].isNull() ? "[]" : row["playlist_whitelist"].as<std::string>();
+
+                  std::string playbackState = row["playback_state"].isNull() ? "paused" : row["playback_state"].as<std::string>();
+                  double storedTime = row["current_time_seconds"].isNull() ? 0.0 : row["current_time_seconds"].as<double>();
+                  int durationSeconds = row["duration_seconds"].isNull() ? 0 : row["duration_seconds"].as<int>();
+
+                  // Calculate actual current time if playing
+                  double actualCurrentTime = storedTime;
+                  if (playbackState == "playing" && !row["last_sync_at"].isNull()) {
+                      // Parse last_sync_at timestamp and calculate elapsed time
+                      try {
+                          auto lastSyncStr = row["last_sync_at"].as<std::string>();
+                          // last_sync_at is a PostgreSQL timestamp, parse it
+                          std::tm tm = {};
+                          std::istringstream ss(lastSyncStr);
+                          ss >> std::get_time(&tm, "%Y-%m-%d %H:%M:%S");
+                          if (!ss.fail()) {
+                              auto lastSyncTime = std::chrono::system_clock::from_time_t(std::mktime(&tm));
+                              auto now = std::chrono::system_clock::now();
+                              auto elapsedSeconds = std::chrono::duration_cast<std::chrono::seconds>(now - lastSyncTime).count();
+                              actualCurrentTime = storedTime + static_cast<double>(elapsedSeconds);
+                              // Cap at video duration if known (to prevent seeking past the end)
+                              if (durationSeconds > 0 && actualCurrentTime > static_cast<double>(durationSeconds)) {
+                                  actualCurrentTime = static_cast<double>(durationSeconds);
+                              }
+                          }
+                      } catch (...) {
+                          // If parsing fails, just use stored time
+                      }
+                  }
+
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["realmId"] = static_cast<Json::Int64>(id);
+                  resp["realmName"] = row["name"].as<std::string>();
+                  resp["canAddToPlaylist"] = canControlPlaylist(user, id, ownerId, mode, whitelist);
+                  resp["canControlPlayback"] = canControlPlayback(user, ownerId);
+                  resp["playbackState"] = playbackState;
+                  resp["currentTime"] = actualCurrentTime;
+                  resp["lastSyncAt"] = row["last_sync_at"].isNull() ? "" : row["last_sync_at"].as<std::string>();
+                  resp["viewerCount"] = row["viewer_count"].isNull() ? 0 : row["viewer_count"].as<int>();
+                  resp["serverTime"] = getCurrentTimestampMs();
+
+                  if (!row["current_video_id"].isNull()) {
+                      Json::Value video;
+                      video["id"] = static_cast<Json::Int64>(row["current_video_id"].as<int64_t>());
+                      video["youtubeVideoId"] = row["youtube_video_id"].as<std::string>();
+                      video["title"] = row["title"].as<std::string>();
+                      video["durationSeconds"] = row["duration_seconds"].as<int>();
+                      video["thumbnailUrl"] = row["thumbnail_url"].isNull() ? "" : row["thumbnail_url"].as<std::string>();
+                      video["isLocked"] = row["is_locked"].isNull() ? false : row["is_locked"].as<bool>();
+                      resp["currentVideo"] = video;
+                  } else {
+                      resp["currentVideo"] = Json::nullValue;
+                  }
+
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "get room state", "Failed to get room state");
+}
+
+void WatchController::playVideo(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << id
+              >> [this, callback, dbClient, id, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+
+                  if (!canControlPlayback(user, ownerId)) {
+                      callback(jsonError("Only the room owner can control playback", k403Forbidden));
+                      return;
+                  }
+
+                  *dbClient << "UPDATE watch_room_state SET playback_state = 'playing', "
+                               "last_sync_at = CURRENT_TIMESTAMP WHERE realm_id = $1"
+                           << id
+                           >> [callback](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["playbackState"] = "playing";
+                               resp["serverTime"] = getCurrentTimestampMs();
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "play", "Failed to update playback state");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::pauseVideo(const HttpRequestPtr &req,
+                                 std::function<void(const HttpResponsePtr &)> &&callback,
+                                 const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    double currentTime = 0;
+    if (json && (*json).isMember("currentTime")) {
+        currentTime = (*json)["currentTime"].asDouble();
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << id
+              >> [this, callback, dbClient, id, user, currentTime](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+
+                  if (!canControlPlayback(user, ownerId)) {
+                      callback(jsonError("Only the room owner can control playback", k403Forbidden));
+                      return;
+                  }
+
+                  *dbClient << "UPDATE watch_room_state SET playback_state = 'paused', "
+                               "current_time_seconds = $1, last_sync_at = CURRENT_TIMESTAMP WHERE realm_id = $2"
+                           << currentTime << id
+                           >> [callback, currentTime](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["playbackState"] = "paused";
+                               resp["currentTime"] = currentTime;
+                               resp["serverTime"] = getCurrentTimestampMs();
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "pause", "Failed to update playback state");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::seekVideo(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json || !(*json).isMember("time")) {
+        callback(jsonError("Invalid JSON - 'time' required"));
+        return;
+    }
+    double seekTime = (*json)["time"].asDouble();
+
+    // Security: Clamp seek time to valid range (0 to reasonable max)
+    if (seekTime < 0) seekTime = 0;
+    if (seekTime > 86400) seekTime = 86400;  // Max 24 hours
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << id
+              >> [this, callback, dbClient, id, user, seekTime](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+
+                  if (!canControlPlayback(user, ownerId)) {
+                      callback(jsonError("Only the room owner can control playback", k403Forbidden));
+                      return;
+                  }
+
+                  *dbClient << "UPDATE watch_room_state SET current_time_seconds = $1, "
+                               "last_sync_at = CURRENT_TIMESTAMP WHERE realm_id = $2"
+                           << seekTime << id
+                           >> [callback, seekTime](const Result&) {
+                               Json::Value resp;
+                               resp["success"] = true;
+                               resp["currentTime"] = seekTime;
+                               resp["serverTime"] = getCurrentTimestampMs();
+                               callback(jsonResp(resp));
+                           }
+                           >> DB_ERROR_MSG(callback, "seek", "Failed to update playback position");
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::skipVideo(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &realmId) {
+    // Skip calls nextVideo internally
+    nextVideo(req, std::move(callback), realmId);
+}
+
+void WatchController::nextVideo(const HttpRequestPtr &req,
+                                std::function<void(const HttpResponsePtr &)> &&callback,
+                                const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT r.user_id, r.playlist_control_mode, r.playlist_whitelist "
+                 "FROM realms r WHERE r.id = $1 AND r.realm_type = 'watch'"
+              << id
+              >> [this, callback, dbClient, id, user](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+
+                  if (!canControlPlayback(user, ownerId)) {
+                      callback(jsonError("Only the room owner can control playback", k403Forbidden));
+                      return;
+                  }
+
+                  // Use transaction with FOR UPDATE to prevent race conditions
+                  dbClient->newTransactionAsync([callback, id](const std::shared_ptr<Transaction>& trans) {
+                      if (!trans) {
+                          callback(jsonError("Failed to start transaction", k500InternalServerError));
+                          return;
+                      }
+
+                      // Lock the room state row to prevent concurrent modifications
+                      *trans << "SELECT current_video_id FROM watch_room_state WHERE realm_id = $1 FOR UPDATE"
+                             << id
+                             >> [callback, trans, id](const Result&) {
+                                 // Mark current video as played
+                                 *trans << "UPDATE watch_playlist SET status = 'played' "
+                                           "WHERE realm_id = $1 AND status = 'playing'"
+                                        << id
+                                        >> [callback, trans, id](const Result&) {
+                                            // Get next queued video (prioritize locked, then by created_at)
+                                            *trans << "SELECT id, youtube_video_id, title, duration_seconds, thumbnail_url, is_locked "
+                                                      "FROM watch_playlist "
+                                                      "WHERE realm_id = $1 AND status = 'queued' "
+                                                      "ORDER BY is_locked DESC NULLS LAST, created_at ASC LIMIT 1 FOR UPDATE"
+                                                   << id
+                                                   >> [callback, trans, id](const Result& r2) {
+                                                       if (r2.empty()) {
+                                                           // No more videos - end playlist
+                                                           *trans << "UPDATE watch_room_state SET current_video_id = NULL, "
+                                                                     "playback_state = 'ended', current_time_seconds = 0, "
+                                                                     "last_sync_at = CURRENT_TIMESTAMP WHERE realm_id = $1"
+                                                                  << id
+                                                                  >> [callback](const Result&) {
+                                                                      Json::Value resp;
+                                                                      resp["success"] = true;
+                                                                      resp["currentVideo"] = Json::nullValue;
+                                                                      resp["playbackState"] = "ended";
+                                                                      resp["serverTime"] = getCurrentTimestampMs();
+                                                                      callback(jsonResp(resp));
+                                                                  }
+                                                                  >> DB_ERROR(callback, "clear state");
+                                                           return;
+                                                       }
+
+                                                       int64_t nextVideoId = r2[0]["id"].as<int64_t>();
+                                                       std::string youtubeVideoId = r2[0]["youtube_video_id"].as<std::string>();
+                                                       std::string title = r2[0]["title"].as<std::string>();
+                                                       int durationSeconds = r2[0]["duration_seconds"].as<int>();
+                                                       std::string thumbnailUrl = r2[0]["thumbnail_url"].isNull() ? "" : r2[0]["thumbnail_url"].as<std::string>();
+                                                       bool isLocked = r2[0]["is_locked"].isNull() ? false : r2[0]["is_locked"].as<bool>();
+
+                                                       // Update next video to playing
+                                                       *trans << "UPDATE watch_playlist SET status = 'playing', "
+                                                                 "started_at = CURRENT_TIMESTAMP WHERE id = $1"
+                                                              << nextVideoId
+                                                              >> [callback, trans, id, nextVideoId, youtubeVideoId, title, durationSeconds, thumbnailUrl, isLocked](const Result&) {
+                                                                  // Update room state
+                                                                  *trans << "INSERT INTO watch_room_state (realm_id, current_video_id, "
+                                                                            "playback_state, current_time_seconds, last_sync_at) "
+                                                                            "VALUES ($1, $2, 'playing', 0, CURRENT_TIMESTAMP) "
+                                                                            "ON CONFLICT (realm_id) DO UPDATE SET "
+                                                                            "current_video_id = $2, playback_state = 'playing', "
+                                                                            "current_time_seconds = 0, last_sync_at = CURRENT_TIMESTAMP"
+                                                                         << id << nextVideoId
+                                                                         >> [callback, nextVideoId, youtubeVideoId, title, durationSeconds, thumbnailUrl, isLocked](const Result&) {
+                                                                             Json::Value resp;
+                                                                             resp["success"] = true;
+                                                                             resp["playbackState"] = "playing";
+                                                                             resp["currentTime"] = 0.0;
+                                                                             resp["serverTime"] = getCurrentTimestampMs();
+
+                                                                             Json::Value video;
+                                                                             video["id"] = static_cast<Json::Int64>(nextVideoId);
+                                                                             video["youtubeVideoId"] = youtubeVideoId;
+                                                                             video["title"] = title;
+                                                                             video["durationSeconds"] = durationSeconds;
+                                                                             video["thumbnailUrl"] = thumbnailUrl;
+                                                                             video["isLocked"] = isLocked;
+                                                                             resp["currentVideo"] = video;
+                                                                             callback(jsonResp(resp));
+                                                                         }
+                                                                         >> DB_ERROR(callback, "update state");
+                                                              }
+                                                              >> DB_ERROR(callback, "update video");
+                                                   }
+                                                   >> DB_ERROR(callback, "get next video");
+                                        }
+                                        >> DB_ERROR(callback, "mark video played");
+                             }
+                             >> [callback, trans, id](const DrogonDbException&) {
+                                 // No room state exists, try to create one after marking videos
+                                 *trans << "UPDATE watch_playlist SET status = 'played' "
+                                           "WHERE realm_id = $1 AND status = 'playing'"
+                                        << id
+                                        >> [callback, trans, id](const Result&) {
+                                            *trans << "SELECT id, youtube_video_id, title, duration_seconds, thumbnail_url, is_locked "
+                                                      "FROM watch_playlist "
+                                                      "WHERE realm_id = $1 AND status = 'queued' "
+                                                      "ORDER BY is_locked DESC NULLS LAST, created_at ASC LIMIT 1"
+                                                   << id
+                                                   >> [callback](const Result& r2) {
+                                                       if (r2.empty()) {
+                                                           Json::Value resp;
+                                                           resp["success"] = true;
+                                                           resp["currentVideo"] = Json::nullValue;
+                                                           resp["playbackState"] = "ended";
+                                                           resp["serverTime"] = getCurrentTimestampMs();
+                                                           callback(jsonResp(resp));
+                                                       } else {
+                                                           callback(jsonError("Unexpected state - videos exist but no room state"));
+                                                       }
+                                                   }
+                                                   >> DB_ERROR(callback, "check videos");
+                                        }
+                                        >> DB_ERROR(callback, "mark played");
+                             };
+                  });
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::updateSettings(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &realmId) {
+    UserInfo user = getUserFromRequest(req);
+    if (user.id == 0) {
+        callback(jsonError("Unauthorized", k401Unauthorized));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json) {
+        callback(jsonError("Invalid JSON"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT user_id FROM realms WHERE id = $1 AND realm_type = 'watch'"
+              << id
+              >> [callback, dbClient, id, user, json](const Result& r) {
+                  if (r.empty()) {
+                      callback(jsonError("Watch room not found", k404NotFound));
+                      return;
+                  }
+
+                  int64_t ownerId = r[0]["user_id"].as<int64_t>();
+                  if (user.id != ownerId && !user.isAdmin) {
+                      callback(jsonError("Only the owner can update settings", k403Forbidden));
+                      return;
+                  }
+
+                  std::string mode = (*json).isMember("playlistControlMode") ?
+                      (*json)["playlistControlMode"].asString() : "";
+                  std::string whitelist = (*json).isMember("playlistWhitelist") ?
+                      Json::FastWriter().write((*json)["playlistWhitelist"]) : "";
+
+                  // Validate mode
+                  if (!mode.empty() && mode != "owner" && mode != "anyone" &&
+                      mode != "guests" && mode != "registered" && mode != "whitelist") {
+                      callback(jsonError("Invalid playlist control mode"));
+                      return;
+                  }
+
+                  // Trim newline from FastWriter if present
+                  if (!whitelist.empty() && whitelist.back() == '\n') {
+                      whitelist.pop_back();
+                  }
+
+                  // Use parameterized queries to prevent SQL injection
+                  if (!mode.empty() && !whitelist.empty()) {
+                      *dbClient << "UPDATE realms SET playlist_control_mode = $1, playlist_whitelist = $2 WHERE id = $3"
+                               << mode << whitelist << id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update settings", "Failed to update settings");
+                  } else if (!mode.empty()) {
+                      *dbClient << "UPDATE realms SET playlist_control_mode = $1 WHERE id = $2"
+                               << mode << id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update settings", "Failed to update settings");
+                  } else if (!whitelist.empty()) {
+                      *dbClient << "UPDATE realms SET playlist_whitelist = $1 WHERE id = $2"
+                               << whitelist << id
+                               >> [callback](const Result&) {
+                                   Json::Value resp;
+                                   resp["success"] = true;
+                                   callback(jsonResp(resp));
+                               }
+                               >> DB_ERROR_MSG(callback, "update settings", "Failed to update settings");
+                  } else {
+                      Json::Value resp;
+                      resp["success"] = true;
+                      callback(jsonResp(resp));
+                  }
+              }
+              >> DB_ERROR(callback, "get realm");
+}
+
+void WatchController::updateDuration(const HttpRequestPtr &req,
+                                     std::function<void(const HttpResponsePtr &)> &&callback,
+                                     const std::string &realmId) {
+    // Security: Only allow internal service calls (from chat-service)
+    // Check for internal header or that request comes from Docker network
+    std::string internalHeader = req->getHeader("X-Internal-Service");
+    std::string peerAddr = req->peerAddr().toIp();
+
+    // Allow if from localhost, Docker network (172.x.x.x, 10.x.x.x), or has internal header
+    bool isInternal = (peerAddr == "127.0.0.1" ||
+                       peerAddr.substr(0, 4) == "172." ||
+                       peerAddr.substr(0, 3) == "10." ||
+                       internalHeader == "chat-service");
+
+    if (!isInternal) {
+        callback(jsonError("Forbidden - internal API only", k403Forbidden));
+        return;
+    }
+
+    int64_t id;
+    try {
+        id = std::stoll(realmId);
+    } catch (...) {
+        callback(jsonError("Invalid realm ID", k400BadRequest));
+        return;
+    }
+
+    auto json = req->getJsonObject();
+    if (!json || !(*json).isMember("playlistItemId") || !(*json).isMember("duration")) {
+        callback(jsonError("Invalid JSON - 'playlistItemId' and 'duration' required"));
+        return;
+    }
+
+    int64_t playlistItemId = (*json)["playlistItemId"].asInt64();
+    int durationSeconds = (*json)["duration"].asInt();
+
+    // Validate duration is reasonable (1 second to 24 hours)
+    if (durationSeconds < 1 || durationSeconds > 86400) {
+        callback(jsonError("Invalid duration"));
+        return;
+    }
+
+    auto dbClient = app().getDbClient();
+
+    // Only update duration if it's currently 0 (unknown) - first reporter wins
+    *dbClient << "UPDATE watch_playlist SET duration_seconds = $1 "
+                 "WHERE id = $2 AND realm_id = $3 AND duration_seconds = 0"
+              << durationSeconds << playlistItemId << id
+              >> [callback, durationSeconds, playlistItemId](const Result& r) {
+                  Json::Value resp;
+                  resp["success"] = true;
+                  resp["updated"] = r.affectedRows() > 0;
+                  resp["playlistItemId"] = static_cast<Json::Int64>(playlistItemId);
+                  resp["duration"] = durationSeconds;
+                  callback(jsonResp(resp));
+              }
+              >> DB_ERROR_MSG(callback, "update duration", "Failed to update duration");
+}
diff --git a/backend/src/controllers/WatchController.h b/backend/src/controllers/WatchController.h
new file mode 100644
index 0000000..8a66166
--- /dev/null
+++ b/backend/src/controllers/WatchController.h
@@ -0,0 +1,118 @@
+#pragma once
+#include <drogon/HttpController.h>
+#include <drogon/orm/DbClient.h>
+#include "../services/AuthService.h"
+
+using namespace drogon;
+using namespace drogon::orm;
+
+class WatchController : public HttpController<WatchController> {
+public:
+    METHOD_LIST_BEGIN
+    // List watch rooms
+    ADD_METHOD_TO(WatchController::getWatchRooms, "/api/watch/rooms", Get);
+
+    // Playlist management
+    ADD_METHOD_TO(WatchController::getPlaylist, "/api/watch/{1}/playlist", Get);
+    ADD_METHOD_TO(WatchController::addToPlaylist, "/api/watch/{1}/playlist", Post);
+    ADD_METHOD_TO(WatchController::removeFromPlaylist, "/api/watch/{1}/playlist/{2}", Delete);
+    ADD_METHOD_TO(WatchController::reorderPlaylist, "/api/watch/{1}/playlist/reorder", Put);
+    ADD_METHOD_TO(WatchController::toggleLock, "/api/watch/{1}/playlist/{2}/lock", Put);
+
+    // Playback control
+    ADD_METHOD_TO(WatchController::getRoomState, "/api/watch/{1}/state", Get);
+    ADD_METHOD_TO(WatchController::playVideo, "/api/watch/{1}/play", Post);
+    ADD_METHOD_TO(WatchController::pauseVideo, "/api/watch/{1}/pause", Post);
+    ADD_METHOD_TO(WatchController::seekVideo, "/api/watch/{1}/seek", Post);
+    ADD_METHOD_TO(WatchController::skipVideo, "/api/watch/{1}/skip", Post);
+    ADD_METHOD_TO(WatchController::nextVideo, "/api/watch/{1}/next", Post);
+
+    // Settings
+    ADD_METHOD_TO(WatchController::updateSettings, "/api/watch/{1}/settings", Put);
+
+    // Duration update (called by chat-service when player reports duration)
+    ADD_METHOD_TO(WatchController::updateDuration, "/api/watch/{1}/duration", Post);
+    METHOD_LIST_END
+
+    // List watch rooms
+    void getWatchRooms(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback);
+
+    // Playlist management
+    void getPlaylist(const HttpRequestPtr &req,
+                    std::function<void(const HttpResponsePtr &)> &&callback,
+                    const std::string &realmId);
+
+    void addToPlaylist(const HttpRequestPtr &req,
+                      std::function<void(const HttpResponsePtr &)> &&callback,
+                      const std::string &realmId);
+
+    void removeFromPlaylist(const HttpRequestPtr &req,
+                           std::function<void(const HttpResponsePtr &)> &&callback,
+                           const std::string &realmId,
+                           const std::string &itemId);
+
+    void reorderPlaylist(const HttpRequestPtr &req,
+                        std::function<void(const HttpResponsePtr &)> &&callback,
+                        const std::string &realmId);
+
+    void toggleLock(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback,
+                   const std::string &realmId,
+                   const std::string &itemId);
+
+    // Playback control
+    void getRoomState(const HttpRequestPtr &req,
+                     std::function<void(const HttpResponsePtr &)> &&callback,
+                     const std::string &realmId);
+
+    void playVideo(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &realmId);
+
+    void pauseVideo(const HttpRequestPtr &req,
+                   std::function<void(const HttpResponsePtr &)> &&callback,
+                   const std::string &realmId);
+
+    void seekVideo(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &realmId);
+
+    void skipVideo(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &realmId);
+
+    void nextVideo(const HttpRequestPtr &req,
+                  std::function<void(const HttpResponsePtr &)> &&callback,
+                  const std::string &realmId);
+
+    // Settings
+    void updateSettings(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+    // Duration update (called by chat-service when player reports duration)
+    void updateDuration(const HttpRequestPtr &req,
+                       std::function<void(const HttpResponsePtr &)> &&callback,
+                       const std::string &realmId);
+
+private:
+    bool canControlPlaylist(const UserInfo& user, int64_t realmId, int64_t ownerId,
+                           const std::string& mode, const std::string& whitelist);
+    bool canControlPlayback(const UserInfo& user, int64_t ownerId);
+    std::string extractYouTubeVideoId(const std::string& url);
+
+    // Helper to add video to playlist (reduces callback nesting)
+    void addVideoToPlaylist(
+        std::function<void(const HttpResponsePtr &)> callback,
+        const DbClientPtr& dbClient,
+        int64_t realmId,
+        const UserInfo& user,
+        const std::string& videoId,
+        const std::string& title,
+        int durationSeconds,
+        const std::string& thumbnailUrl,
+        const std::string& username,
+        const std::string& fingerprint,
+        int64_t ownerId);
+};
diff --git a/backend/src/main.cpp b/backend/src/main.cpp
index 40cb867..ca62e7f 100644
--- a/backend/src/main.cpp
+++ b/backend/src/main.cpp
@@ -7,6 +7,8 @@
 #include "services/DatabaseService.h"
 #include "services/StatsService.h"
 #include "services/AuthService.h"
+#include "services/CensorService.h"
+#include "services/TreasuryService.h"
 #include <exception>
 #include <csignal>
 #include <sys/stat.h>
@@ -36,8 +38,8 @@ int main() {
         // Initialize StatsService BEFORE registering callbacks
         LOG_INFO << "Initializing StatsService...";
         StatsService::getInstance().initialize();
-        
-        // Register a pre-routing advice to handle CORS
+
+        // Register a pre-routing advice to handle CORS and CSRF protection
         app().registerPreRoutingAdvice([](const HttpRequestPtr &req,
                                          AdviceCallback &&acb,
                                          AdviceChainCallback &&accb) {
@@ -45,13 +47,13 @@ int main() {
             if (req->getMethod() == Options) {
                 auto resp = HttpResponse::newHttpResponse();
                 resp->setStatusCode(k204NoContent);
-                
+
                 // Get origin from request
                 std::string origin = req->getHeader("Origin");
                 if (origin.empty()) {
                     origin = "*";
                 }
-                
+
                 resp->addHeader("Access-Control-Allow-Origin", origin);
                 resp->addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                 resp->addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
@@ -60,6 +62,35 @@ int main() {
                 acb(resp);
                 return;
             }
+
+            // SECURITY FIX #18: CSRF protection for state-changing requests
+            // Require Origin or Referer header for POST/PUT/DELETE requests
+            if (req->getMethod() == Post || req->getMethod() == Put || req->getMethod() == Delete) {
+                std::string origin = req->getHeader("Origin");
+                std::string referer = req->getHeader("Referer");
+                std::string path = req->getPath();
+
+                // Skip CSRF check for API endpoints that use Bearer token auth
+                // (Bearer tokens are not automatically sent by browsers, so CSRF is not a concern)
+                std::string authHeader = req->getHeader("Authorization");
+                bool hasBearerToken = !authHeader.empty() && authHeader.substr(0, 7) == "Bearer ";
+
+                // Skip CSRF check for internal endpoints (server-to-server calls)
+                bool isInternalEndpoint = path.find("/api/webhook/") == 0 ||
+                                          path.find("/api/internal/") == 0;
+
+                // If not using Bearer auth and not an internal endpoint, require Origin or Referer header
+                if (!hasBearerToken && !isInternalEndpoint && origin.empty() && referer.empty()) {
+                    LOG_WARN << "CSRF protection: Blocked request without Origin/Referer to "
+                             << req->getPath() << " from " << req->getPeerAddr().toIpPort();
+                    auto resp = HttpResponse::newHttpResponse();
+                    resp->setStatusCode(k403Forbidden);
+                    resp->setBody("Missing Origin or Referer header");
+                    acb(resp);
+                    return;
+                }
+            }
+
             accb();
         });
         
@@ -81,15 +112,39 @@ int main() {
         // Register beginning advice to start the stats timer
         app().registerBeginningAdvice([]() {
             LOG_INFO << "Application started successfully";
-            
+
+            // Clean up stuck audio processing jobs on startup
+            LOG_INFO << "Cleaning up stuck audio processing jobs...";
+            auto dbClient = app().getDbClient();
+            *dbClient << "UPDATE audio_files SET status = 'failed' "
+                         "WHERE status = 'processing' AND created_at < NOW() - INTERVAL '5 minutes'"
+                      >> [](const drogon::orm::Result& r) {
+                          if (r.affectedRows() > 0) {
+                              LOG_INFO << "Marked " << r.affectedRows() << " stuck audio jobs as failed";
+                          }
+                      }
+                      >> [](const drogon::orm::DrogonDbException& e) {
+                          LOG_WARN << "Failed to clean up stuck audio jobs: " << e.base().what();
+                      };
+
             // Start the stats polling timer
             LOG_INFO << "Starting stats polling...";
             StatsService::getInstance().startPolling();
+
+            // Load censored words from database
+            LOG_INFO << "Loading censored words...";
+            CensorService::getInstance().loadCensoredWords();
+
+            // Start treasury scheduler (hourly check for growth/distribution)
+            LOG_INFO << "Starting treasury scheduler...";
+            TreasuryService::getInstance().initialize();
+            TreasuryService::getInstance().startScheduler();
         });
         
         app().setTermSignalHandler([]() {
             LOG_INFO << "Received termination signal, shutting down...";
             StatsService::getInstance().shutdown();
+            TreasuryService::getInstance().shutdown();
             app().quit();
         });
         
diff --git a/backend/src/models/Realm.h b/backend/src/models/Realm.h
deleted file mode 100644
index c3b861b..0000000
--- a/backend/src/models/Realm.h
+++ /dev/null
@@ -1,15 +0,0 @@
-#pragma once
-#include <string>
-#include <chrono>
-
-struct Realm {
-    int64_t id;
-    int64_t userId;
-    std::string name;
-    std::string streamKey;
-    bool isActive;
-    bool isLive;
-    int64_t viewerCount;
-    std::chrono::system_clock::time_point createdAt;
-    std::chrono::system_clock::time_point updatedAt;
-};
\ No newline at end of file
diff --git a/backend/src/models/StreamKey.h b/backend/src/models/StreamKey.h
deleted file mode 100644
index d20d10b..0000000
--- a/backend/src/models/StreamKey.h
+++ /dev/null
@@ -1,12 +0,0 @@
-#pragma once
-#include <string>
-#include <chrono>
-
-struct StreamKey {
-    int64_t id;
-    int64_t user_id;
-    std::string key;
-    bool is_active;
-    std::chrono::system_clock::time_point created_at;
-    std::chrono::system_clock::time_point updated_at;
-};
\ No newline at end of file
diff --git a/backend/src/services/AuthService.cpp b/backend/src/services/AuthService.cpp
index 9933ca8..3947ecd 100644
--- a/backend/src/services/AuthService.cpp
+++ b/backend/src/services/AuthService.cpp
@@ -9,6 +9,8 @@
 #include <fstream>
 #include <sstream>
 #include <cstdlib>
+#include <gpgme.h>
+#include <filesystem>
 
 using namespace drogon;
 using namespace drogon::orm;
@@ -32,153 +34,140 @@ bool AuthService::validatePassword(const std::string& password, std::string& err
     return true;
 }
 
-// Helper function to execute GPG commands
-std::string executeGpgCommand(const std::string& command) {
-    std::array<char, 128> buffer;
-    std::string result;
-    
-    FILE* pipe = popen(command.c_str(), "r");
-    if (!pipe) {
-        LOG_ERROR << "Failed to execute GPG command: " << command;
-        return "";
-    }
-    
-    while (fgets(buffer.data(), buffer.size(), pipe) != nullptr) {
-        result += buffer.data();
-    }
-    
-    int exitCode = pclose(pipe);
-    
-    // Exit code is returned as status << 8, so we need to extract the actual exit code
-    int actualExitCode = WEXITSTATUS(exitCode);
-    
-    if (actualExitCode != 0) {
-        LOG_ERROR << "GPG command failed with exit code: " << actualExitCode 
-                  << " for command: " << command
-                  << " output: " << result;
-        // Don't return empty string immediately - sometimes GPG returns non-zero but still works
-    }
-    
-    return result;
+// GPGME-based PGP signature verification (no shell commands for security)
+namespace {
+    // RAII wrapper for gpgme_data_t (named to avoid conflict with deprecated GpgmeData typedef)
+    class GpgmeDataWrapper {
+    public:
+        GpgmeDataWrapper() : data_(nullptr) {}
+        ~GpgmeDataWrapper() { if (data_) gpgme_data_release(data_); }
+        gpgme_data_t* ptr() { return &data_; }
+        gpgme_data_t get() { return data_; }
+        bool valid() const { return data_ != nullptr; }
+    private:
+        gpgme_data_t data_;
+    };
+
+    // RAII wrapper for gpgme_ctx_t
+    class GpgmeContextWrapper {
+    public:
+        GpgmeContextWrapper() : ctx_(nullptr) {}
+        ~GpgmeContextWrapper() { if (ctx_) gpgme_release(ctx_); }
+        gpgme_ctx_t* ptr() { return &ctx_; }
+        gpgme_ctx_t get() { return ctx_; }
+        bool valid() const { return ctx_ != nullptr; }
+    private:
+        gpgme_ctx_t ctx_;
+    };
 }
 
-// Server-side PGP signature verification
 bool verifyPgpSignature(const std::string& message, const std::string& signature, const std::string& publicKey) {
     try {
-        // Create temporary directory for GPG operations
-        std::string tmpDir = "/tmp/pgp_verify_" + drogon::utils::genRandomString(8);
-        std::string mkdirCmd = "mkdir -p " + tmpDir;
-        if (system(mkdirCmd.c_str()) != 0) {
-            LOG_ERROR << "Failed to create temporary directory: " << tmpDir;
+        // Initialize GPGME
+        gpgme_check_version(nullptr);
+
+        // Create temporary directory for isolated keyring using filesystem
+        std::string tmpDir = "/tmp/pgp_verify_" + drogon::utils::genRandomString(16);
+        std::filesystem::create_directories(tmpDir);
+        std::filesystem::permissions(tmpDir, std::filesystem::perms::owner_all);
+
+        // Set GNUPGHOME environment for this context
+        std::string gnupgHome = tmpDir;
+
+        // Create GPGME context
+        GpgmeContextWrapper ctx;
+        gpgme_error_t err = gpgme_new(ctx.ptr());
+        if (err) {
+            LOG_ERROR << "Failed to create GPGME context: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        
-        // Create GPG home directory
-        std::string keyringDir = tmpDir + "/gnupg";
-        std::string mkdirGpgCmd = "mkdir -p " + keyringDir + " && chmod 700 " + keyringDir;
-        if (system(mkdirGpgCmd.c_str()) != 0) {
-            LOG_ERROR << "Failed to create GPG home directory: " << keyringDir;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
+
+        // Set the engine info to use our temporary directory
+        err = gpgme_ctx_set_engine_info(ctx.get(), GPGME_PROTOCOL_OpenPGP, nullptr, gnupgHome.c_str());
+        if (err) {
+            LOG_ERROR << "Failed to set GPGME engine info: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        
-        // Write files
-        std::string messageFile = tmpDir + "/message.txt";
-        std::string sigFile = tmpDir + "/signature.asc";
-        std::string pubkeyFile = tmpDir + "/pubkey.asc";
-        
-        // Write message file
-        std::ofstream msgOut(messageFile);
-        if (!msgOut) {
-            LOG_ERROR << "Failed to create message file: " << messageFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
+
+        // Set protocol
+        gpgme_set_protocol(ctx.get(), GPGME_PROTOCOL_OpenPGP);
+
+        // Import the public key
+        GpgmeDataWrapper keyData;
+        err = gpgme_data_new_from_mem(keyData.ptr(), publicKey.c_str(), publicKey.size(), 1);
+        if (err) {
+            LOG_ERROR << "Failed to create key data: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        msgOut << message;
-        msgOut.close();
-        
-        // Write signature file
-        std::ofstream sigOut(sigFile);
-        if (!sigOut) {
-            LOG_ERROR << "Failed to create signature file: " << sigFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
+
+        err = gpgme_op_import(ctx.get(), keyData.get());
+        if (err) {
+            LOG_ERROR << "Failed to import public key: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        sigOut << signature;
-        sigOut.close();
-        
-        // Write public key file
-        std::ofstream keyOut(pubkeyFile);
-        if (!keyOut) {
-            LOG_ERROR << "Failed to create public key file: " << pubkeyFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
+
+        gpgme_import_result_t importResult = gpgme_op_import_result(ctx.get());
+        if (!importResult || (importResult->imported == 0 && importResult->unchanged == 0)) {
+            LOG_ERROR << "No keys were imported";
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        keyOut << publicKey;
-        keyOut.close();
-        
-        // Initialize GPG (create trustdb if needed)
-        std::string initCmd = "GNUPGHOME=" + keyringDir + " gpg --batch --yes --list-keys 2>&1";
-        executeGpgCommand(initCmd); // This will create the trustdb if it doesn't exist
-        
-        // Import the public key to the temporary keyring
-        // Use --trust-model always to avoid trust issues
-        std::string importCmd = "GNUPGHOME=" + keyringDir + 
-                               " gpg --batch --yes --trust-model always --import " + pubkeyFile + " 2>&1";
-        std::string importResult = executeGpgCommand(importCmd);
-        
-        LOG_DEBUG << "GPG import result: " << importResult;
-        
-        // Check if import was successful (be more lenient with the check)
-        bool importSuccess = (importResult.find("imported") != std::string::npos) ||
-                           (importResult.find("unchanged") != std::string::npos) ||
-                           (importResult.find("processed: 1") != std::string::npos) ||
-                           (importResult.find("public key") != std::string::npos);
-        
-        if (!importSuccess) {
-            LOG_ERROR << "Failed to import public key. Import output: " << importResult;
-            // Try to get more information about what went wrong
-            std::string debugCmd = "GNUPGHOME=" + keyringDir + " gpg --list-keys 2>&1";
-            std::string debugResult = executeGpgCommand(debugCmd);
-            LOG_ERROR << "GPG keyring state: " << debugResult;
-            
-            // Cleanup
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
+
+        LOG_DEBUG << "GPGME imported " << importResult->imported << " keys, "
+                  << importResult->unchanged << " unchanged";
+
+        // Create data objects for signature and message
+        GpgmeDataWrapper sigData;
+        err = gpgme_data_new_from_mem(sigData.ptr(), signature.c_str(), signature.size(), 1);
+        if (err) {
+            LOG_ERROR << "Failed to create signature data: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
             return false;
         }
-        
+
+        GpgmeDataWrapper msgData;
+        err = gpgme_data_new_from_mem(msgData.ptr(), message.c_str(), message.size(), 1);
+        if (err) {
+            LOG_ERROR << "Failed to create message data: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
+            return false;
+        }
+
         // Verify the signature
-        // Use --trust-model always to avoid trust issues
-        std::string verifyCmd = "GNUPGHOME=" + keyringDir + 
-                                " gpg --batch --yes --trust-model always --verify " + 
-                                sigFile + " " + messageFile + " 2>&1";
-        std::string verifyResult = executeGpgCommand(verifyCmd);
-        
-        LOG_DEBUG << "GPG verify result: " << verifyResult;
-        
-        // Check if verification succeeded (check both English and potential localized messages)
-        bool verified = (verifyResult.find("Good signature") != std::string::npos) ||
-                       (verifyResult.find("gpg: Good signature") != std::string::npos) ||
-                       (verifyResult.find("Signature made") != std::string::npos && 
-                        verifyResult.find("BAD signature") == std::string::npos);
-        
-        if (!verified) {
-            LOG_WARN << "Signature verification failed. Verify output: " << verifyResult;
-        } else {
-            LOG_INFO << "Signature verification successful for challenge";
+        err = gpgme_op_verify(ctx.get(), sigData.get(), msgData.get(), nullptr);
+        if (err) {
+            LOG_WARN << "Signature verification failed: " << gpgme_strerror(err);
+            std::filesystem::remove_all(tmpDir);
+            return false;
         }
-        
-        // Cleanup temporary files
-        std::string cleanupCmd = "rm -rf " + tmpDir;
-        system(cleanupCmd.c_str());
-        
+
+        // Check verification result
+        gpgme_verify_result_t verifyResult = gpgme_op_verify_result(ctx.get());
+        if (!verifyResult || !verifyResult->signatures) {
+            LOG_WARN << "No signatures found in verification result";
+            std::filesystem::remove_all(tmpDir);
+            return false;
+        }
+
+        // Check if signature is valid
+        gpgme_signature_t sig = verifyResult->signatures;
+        bool verified = (sig->status == GPG_ERR_NO_ERROR);
+
+        if (verified) {
+            LOG_INFO << "Signature verification successful for challenge";
+        } else {
+            LOG_WARN << "Signature verification failed: " << gpgme_strerror(sig->status);
+        }
+
+        // Cleanup temporary directory
+        std::filesystem::remove_all(tmpDir);
+
         return verified;
-        
+
     } catch (const std::exception& e) {
         LOG_ERROR << "Exception during signature verification: " << e.what();
         return false;
@@ -314,8 +303,8 @@ void AuthService::registerUser(const std::string& username, const std::string& p
             return;
         }
         
-        if (!std::regex_match(username, std::regex("^[a-zA-Z0-9_]+$"))) {
-            callback(false, "Username can only contain letters, numbers, and underscores", 0);
+        if (!std::regex_match(username, std::regex("^[a-zA-Z][a-zA-Z0-9_]*$"))) {
+            callback(false, "Username must start with a letter and contain only letters, numbers, and underscores", 0);
             return;
         }
         
@@ -454,7 +443,7 @@ void AuthService::loginUser(const std::string& username, const std::string& pass
             return;
         }
         
-        *dbClient << "SELECT id, username, password_hash, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
+        *dbClient << "SELECT id, username, password_hash, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, is_disabled, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color "
                      "FROM users WHERE username = $1 LIMIT 1"
                   << username
                   >> [password, callback, this](const Result& r) {
@@ -463,18 +452,25 @@ void AuthService::loginUser(const std::string& username, const std::string& pass
                               callback(false, "", UserInfo{});
                               return;
                           }
-                          
+
+                          // Check if account is disabled
+                          bool isDisabled = r[0]["is_disabled"].isNull() ? false : r[0]["is_disabled"].as<bool>();
+                          if (isDisabled) {
+                              callback(false, "Account disabled", UserInfo{});
+                              return;
+                          }
+
                           // Check if PGP-only is enabled BEFORE password validation
                           bool isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                          
+
                           if (isPgpOnly) {
                               // Return a specific error for PGP-only accounts
                               callback(false, "PGP-only login enabled for this account", UserInfo{});
                               return;
                           }
-                          
+
                           std::string hash = r[0]["password_hash"].as<std::string>();
-                          
+
                           bool valid = false;
                           try {
                               valid = BCrypt::validatePassword(password, hash);
@@ -483,23 +479,32 @@ void AuthService::loginUser(const std::string& username, const std::string& pass
                               callback(false, "", UserInfo{});
                               return;
                           }
-                          
+
                           if (!valid) {
                               callback(false, "", UserInfo{});
                               return;
                           }
-                          
+
                           UserInfo user;
                           user.id = r[0]["id"].as<int64_t>();
                           user.username = r[0]["username"].as<std::string>();
                           user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
+                          user.isModerator = r[0]["is_moderator"].isNull() ? false : r[0]["is_moderator"].as<bool>();
                           user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
+                          user.isRestreamer = r[0]["is_restreamer"].isNull() ? false : r[0]["is_restreamer"].as<bool>();
+                          user.isBot = r[0]["is_bot"].isNull() ? false : r[0]["is_bot"].as<bool>();
+                          user.isTexter = r[0]["is_texter"].isNull() ? false : r[0]["is_texter"].as<bool>();
                           user.isPgpOnly = isPgpOnly;
                           user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
                           user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
+                          user.bannerUrl = r[0]["banner_url"].isNull() ? "" : r[0]["banner_url"].as<std::string>();
+                          user.bannerPosition = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                          user.bannerZoom = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                          user.bannerPositionX = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                          user.graffitiUrl = r[0]["graffiti_url"].isNull() ? "" : r[0]["graffiti_url"].as<std::string>();
                           user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
                           user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                          
+
                           std::string token = generateToken(user);
                           callback(true, token, user);
                       } catch (const std::exception& e) {
@@ -593,8 +598,8 @@ void AuthService::verifyPgpLogin(const std::string& username, const std::string&
                         return;
                     }
                     
-                    *dbClient << "SELECT pk.public_key, u.id, u.username, u.is_admin, u.is_streamer, "
-                                "u.is_pgp_only, u.bio, u.avatar_url, u.pgp_only_enabled_at, u.user_color "
+                    *dbClient << "SELECT pk.public_key, u.id, u.username, u.is_admin, u.is_moderator, u.is_streamer, u.is_restreamer, u.is_bot, u.is_texter, "
+                                "u.is_pgp_only, u.is_disabled, u.bio, u.avatar_url, u.banner_url, u.banner_position, u.banner_zoom, u.banner_position_x, u.graffiti_url, u.pgp_only_enabled_at, u.user_color "
                                 "FROM pgp_keys pk JOIN users u ON pk.user_id = u.id "
                                 "WHERE u.username = $1 ORDER BY pk.created_at DESC LIMIT 1"
                               << username
@@ -605,31 +610,47 @@ void AuthService::verifyPgpLogin(const std::string& username, const std::string&
                                           callback(false, "", UserInfo{});
                                           return;
                                       }
-                                      
+
+                                      // Check if account is disabled
+                                      bool isDisabled = r[0]["is_disabled"].isNull() ? false : r[0]["is_disabled"].as<bool>();
+                                      if (isDisabled) {
+                                          callback(false, "Account disabled", UserInfo{});
+                                          return;
+                                      }
+
                                       std::string publicKey = r[0]["public_key"].as<std::string>();
-                                      
+
                                       // CRITICAL: Server-side signature verification
                                       bool signatureValid = verifyPgpSignature(challenge, signature, publicKey);
-                                      
+
                                       if (!signatureValid) {
                                           LOG_WARN << "Invalid PGP signature for user";
                                           callback(false, "Invalid signature", UserInfo{});
                                           return;
                                       }
-                                      
+
                                       LOG_INFO << "PGP signature verified successfully for user";
-                                      
+
                                       UserInfo user;
                                       user.id = r[0]["id"].as<int64_t>();
                                       user.username = r[0]["username"].as<std::string>();
                                       user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
+                                      user.isModerator = r[0]["is_moderator"].isNull() ? false : r[0]["is_moderator"].as<bool>();
                                       user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
+                                      user.isRestreamer = r[0]["is_restreamer"].isNull() ? false : r[0]["is_restreamer"].as<bool>();
+                                      user.isBot = r[0]["is_bot"].isNull() ? false : r[0]["is_bot"].as<bool>();
+                                      user.isTexter = r[0]["is_texter"].isNull() ? false : r[0]["is_texter"].as<bool>();
                                       user.isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
                                       user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
                                       user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
+                                      user.bannerUrl = r[0]["banner_url"].isNull() ? "" : r[0]["banner_url"].as<std::string>();
+                                      user.bannerPosition = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                                      user.bannerZoom = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                                      user.bannerPositionX = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                                      user.graffitiUrl = r[0]["graffiti_url"].isNull() ? "" : r[0]["graffiti_url"].as<std::string>();
                                       user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
                                       user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                                      
+
                                       std::string token = generateToken(user);
                                       callback(true, token, user);
                                   } catch (const std::exception& e) {
@@ -653,25 +674,70 @@ void AuthService::verifyPgpLogin(const std::string& username, const std::string&
     }
 }
 
+// SECURITY FIX #5: Validate JWT secret has minimum length and entropy
+void AuthService::validateAndLoadJwtSecret() {
+    if (!jwtSecret_.empty()) {
+        return;  // Already loaded and validated
+    }
+
+    const char* envSecret = std::getenv("JWT_SECRET");
+    if (!envSecret || strlen(envSecret) == 0) {
+        throw std::runtime_error("JWT_SECRET environment variable is not set");
+    }
+
+    size_t secretLen = strlen(envSecret);
+
+    // Require at least 32 characters (256 bits) for HS256
+    if (secretLen < 32) {
+        throw std::runtime_error("JWT_SECRET must be at least 32 characters (256 bits) for security");
+    }
+
+    // Basic entropy check - ensure not all same character
+    bool hasVariety = false;
+    for (size_t i = 1; i < secretLen && !hasVariety; ++i) {
+        if (envSecret[i] != envSecret[0]) {
+            hasVariety = true;
+        }
+    }
+    if (!hasVariety) {
+        throw std::runtime_error("JWT_SECRET has insufficient entropy - all characters are the same");
+    }
+
+    // Check for common weak secrets
+    std::string secretLower = envSecret;
+    std::transform(secretLower.begin(), secretLower.end(), secretLower.begin(), ::tolower);
+    if (secretLower.find("secret") != std::string::npos ||
+        secretLower.find("password") != std::string::npos ||
+        secretLower.find("123456") != std::string::npos) {
+        LOG_WARN << "JWT_SECRET appears to contain common weak patterns - consider using a stronger secret";
+    }
+
+    jwtSecret_ = std::string(envSecret);
+    LOG_INFO << "JWT secret loaded and validated (" << secretLen << " characters)";
+}
+
 std::string AuthService::generateToken(const UserInfo& user) {
     try {
-        if (jwtSecret_.empty()) {
-            const char* envSecret = std::getenv("JWT_SECRET");
-            jwtSecret_ = envSecret ? std::string(envSecret) : "your-jwt-secret";
-        }
-        
+        validateAndLoadJwtSecret();
+
+        // SECURITY FIX: Reduced JWT expiry from 24h to 1h to limit token exposure window
         auto token = jwt::create()
             .set_issuer("streaming-app")
-            .set_type("JWS")
+            .set_type("JWT")
             .set_issued_at(std::chrono::system_clock::now())
-            .set_expires_at(std::chrono::system_clock::now() + std::chrono::hours(24))
+            .set_expires_at(std::chrono::system_clock::now() + std::chrono::hours(1))
             .set_payload_claim("user_id", jwt::claim(std::to_string(user.id)))
             .set_payload_claim("username", jwt::claim(user.username))
             .set_payload_claim("is_admin", jwt::claim(std::to_string(user.isAdmin)))
+            .set_payload_claim("is_moderator", jwt::claim(std::to_string(user.isModerator)))
             .set_payload_claim("is_streamer", jwt::claim(std::to_string(user.isStreamer)))
+            .set_payload_claim("is_restreamer", jwt::claim(std::to_string(user.isRestreamer)))
+            .set_payload_claim("is_disabled", jwt::claim(std::to_string(user.isDisabled)))  // SECURITY FIX #26
+            .set_payload_claim("token_version", jwt::claim(std::to_string(user.tokenVersion)))  // SECURITY FIX #10
             .set_payload_claim("color_code", jwt::claim(
                 user.colorCode.empty() ? "#561D5E" : user.colorCode
             ))  // Ensure color is never empty
+            .set_payload_claim("avatar_url", jwt::claim(user.avatarUrl))
             .sign(jwt::algorithm::hs256{jwtSecret_});
         
         return token;
@@ -683,11 +749,8 @@ std::string AuthService::generateToken(const UserInfo& user) {
 
 bool AuthService::validateToken(const std::string& token, UserInfo& userInfo) {
     try {
-        if (jwtSecret_.empty()) {
-            const char* envSecret = std::getenv("JWT_SECRET");
-            jwtSecret_ = envSecret ? std::string(envSecret) : "your-jwt-secret";
-        }
-        
+        validateAndLoadJwtSecret();
+
         auto decoded = jwt::decode(token);
         
         auto verifier = jwt::verify()
@@ -699,9 +762,21 @@ bool AuthService::validateToken(const std::string& token, UserInfo& userInfo) {
         userInfo.id = std::stoll(decoded.get_payload_claim("user_id").as_string());
         userInfo.username = decoded.get_payload_claim("username").as_string();
         userInfo.isAdmin = decoded.get_payload_claim("is_admin").as_string() == "1";
-        userInfo.isStreamer = decoded.has_payload_claim("is_streamer") ? 
+        userInfo.isModerator = decoded.has_payload_claim("is_moderator") ?
+            decoded.get_payload_claim("is_moderator").as_string() == "1" : false;
+        userInfo.isStreamer = decoded.has_payload_claim("is_streamer") ?
             decoded.get_payload_claim("is_streamer").as_string() == "1" : false;
-        
+        userInfo.isRestreamer = decoded.has_payload_claim("is_restreamer") ?
+            decoded.get_payload_claim("is_restreamer").as_string() == "1" : false;
+
+        // SECURITY FIX #26: Extract disabled status
+        userInfo.isDisabled = decoded.has_payload_claim("is_disabled") ?
+            decoded.get_payload_claim("is_disabled").as_string() == "1" : false;
+
+        // SECURITY FIX #10: Extract token version for revocation check
+        userInfo.tokenVersion = decoded.has_payload_claim("token_version") ?
+            std::stoi(decoded.get_payload_claim("token_version").as_string()) : 1;
+
         // Get color from token if available, otherwise will need to fetch from DB
         if (decoded.has_payload_claim("color_code")) {
             userInfo.colorCode = decoded.get_payload_claim("color_code").as_string();
@@ -709,7 +784,13 @@ bool AuthService::validateToken(const std::string& token, UserInfo& userInfo) {
             // For older tokens without color, default value
             userInfo.colorCode = "#561D5E";
         }
-        
+
+        // SECURITY FIX #26: Reject tokens from disabled accounts
+        if (userInfo.isDisabled) {
+            LOG_DEBUG << "Token rejected - user account is disabled: " << userInfo.username;
+            return false;
+        }
+
         return true;
     } catch (const std::exception& e) {
         LOG_DEBUG << "Token validation failed: " << e.what();
@@ -717,6 +798,23 @@ bool AuthService::validateToken(const std::string& token, UserInfo& userInfo) {
     }
 }
 
+// Chat service compatibility method
+std::optional<UserClaims> AuthService::verifyToken(const std::string& token) {
+    UserInfo userInfo;
+    if (validateToken(token, userInfo)) {
+        UserClaims claims;
+        claims.userId = std::to_string(userInfo.id);
+        claims.username = userInfo.username;
+        claims.userColor = userInfo.colorCode;
+        claims.isAdmin = userInfo.isAdmin;
+        claims.isModerator = userInfo.isModerator;
+        claims.isStreamer = userInfo.isStreamer;
+        claims.isRestreamer = userInfo.isRestreamer;
+        return claims;
+    }
+    return std::nullopt;
+}
+
 void AuthService::updatePassword(int64_t userId, const std::string& oldPassword, 
                                 const std::string& newPassword,
                                 std::function<void(bool, const std::string&)> callback) {
@@ -771,9 +869,11 @@ void AuthService::updatePassword(int64_t userId, const std::string& oldPassword,
                               return;
                           }
                           
-                          *dbClient << "UPDATE users SET password_hash = $1 WHERE id = $2"
+                          // SECURITY FIX #10: Increment token_version to invalidate all existing tokens
+                          *dbClient << "UPDATE users SET password_hash = $1, token_version = COALESCE(token_version, 0) + 1 WHERE id = $2"
                                    << newHash << userId
-                                   >> [callback](const Result&) {
+                                   >> [callback, userId](const Result&) {
+                                       LOG_INFO << "Password updated and token_version incremented for user " << userId;
                                        callback(true, "");
                                    }
                                    >> [callback](const DrogonDbException& e) {
@@ -804,7 +904,7 @@ void AuthService::fetchUserInfo(int64_t userId, std::function<void(bool, const U
             return;
         }
         
-        *dbClient << "SELECT id, username, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
+        *dbClient << "SELECT id, username, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color "
                      "FROM users WHERE id = $1 LIMIT 1"
                   << userId
                   >> [callback](const Result& r) {
@@ -813,18 +913,27 @@ void AuthService::fetchUserInfo(int64_t userId, std::function<void(bool, const U
                               callback(false, UserInfo{});
                               return;
                           }
-                          
+
                           UserInfo user;
                           user.id = r[0]["id"].as<int64_t>();
                           user.username = r[0]["username"].as<std::string>();
                           user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
+                          user.isModerator = r[0]["is_moderator"].isNull() ? false : r[0]["is_moderator"].as<bool>();
                           user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
+                          user.isRestreamer = r[0]["is_restreamer"].isNull() ? false : r[0]["is_restreamer"].as<bool>();
+                          user.isBot = r[0]["is_bot"].isNull() ? false : r[0]["is_bot"].as<bool>();
+                          user.isTexter = r[0]["is_texter"].isNull() ? false : r[0]["is_texter"].as<bool>();
                           user.isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
                           user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
                           user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
+                          user.bannerUrl = r[0]["banner_url"].isNull() ? "" : r[0]["banner_url"].as<std::string>();
+                          user.bannerPosition = r[0]["banner_position"].isNull() ? 50 : r[0]["banner_position"].as<int>();
+                          user.bannerZoom = r[0]["banner_zoom"].isNull() ? 100 : r[0]["banner_zoom"].as<int>();
+                          user.bannerPositionX = r[0]["banner_position_x"].isNull() ? 50 : r[0]["banner_position_x"].as<int>();
+                          user.graffitiUrl = r[0]["graffiti_url"].isNull() ? "" : r[0]["graffiti_url"].as<std::string>();
                           user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
                           user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                          
+
                           callback(true, user);
                       } catch (const std::exception& e) {
                           LOG_ERROR << "Exception processing user data: " << e.what();
diff --git a/backend/src/services/AuthService.h b/backend/src/services/AuthService.h
index 10b5c74..65510fe 100644
--- a/backend/src/services/AuthService.h
+++ b/backend/src/services/AuthService.h
@@ -2,6 +2,7 @@
 #include <string>
 #include <functional>
 #include <memory>
+#include <optional>
 #include <jwt-cpp/jwt.h>
 #include <bcrypt/BCrypt.hpp>
 
@@ -9,12 +10,38 @@ struct UserInfo {
     int64_t id = 0;
     std::string username;
     bool isAdmin = false;
+    bool isModerator = false;  // Site-wide moderator role
     bool isStreamer = false;
+    bool isRestreamer = false;
+    bool isBot = false;
+    bool isTexter = false;
     bool isPgpOnly = false;
+    bool isDisabled = false;   // SECURITY FIX #26: Track disabled status
     std::string bio;
     std::string avatarUrl;
+    std::string bannerUrl;
+    int bannerPosition = 50;   // Y position percentage (0-100) for object-position
+    int bannerZoom = 100;      // Zoom percentage (100-200)
+    int bannerPositionX = 50;  // X position percentage (0-100) for object-position
+    std::string graffitiUrl;
     std::string pgpOnlyEnabledAt;
     std::string colorCode;
+    double ubercoinBalance = 0.0;  // Übercoin balance (3 decimal places)
+    std::string createdAt;         // Account creation date (for burn rate calculation)
+    int tokenVersion = 1;          // SECURITY FIX #10: Token version for revocation
+};
+
+// Chat service compatibility struct
+struct UserClaims {
+    std::string userId;
+    std::string username;
+    std::string userColor;
+    bool isAdmin;
+    bool isModerator;  // Site-wide moderator role
+    bool isStreamer;
+    bool isRestreamer;
+
+    UserClaims() : isAdmin(false), isModerator(false), isStreamer(false), isRestreamer(false) {}
 };
 
 class AuthService {
@@ -40,7 +67,10 @@ public:
     
     std::string generateToken(const UserInfo& user);
     bool validateToken(const std::string& token, UserInfo& userInfo);
-    
+
+    // Chat service compatibility method
+    std::optional<UserClaims> verifyToken(const std::string& token);
+
     // New method to fetch complete user info including color
     void fetchUserInfo(int64_t userId, std::function<void(bool, const UserInfo&)> callback);
     
@@ -56,6 +86,7 @@ public:
 private:
     AuthService() = default;
     std::string jwtSecret_;
-    
+
     bool validatePassword(const std::string& password, std::string& error);
+    void validateAndLoadJwtSecret();  // SECURITY FIX #5
 };
\ No newline at end of file
diff --git a/backend/src/services/CensorService.cpp b/backend/src/services/CensorService.cpp
new file mode 100644
index 0000000..d568bc1
--- /dev/null
+++ b/backend/src/services/CensorService.cpp
@@ -0,0 +1,164 @@
+#include "CensorService.h"
+#include <drogon/drogon.h>
+#include <sstream>
+#include <algorithm>
+#include <cctype>
+
+using namespace drogon;
+using namespace drogon::orm;
+
+// Maximum length for a single censored word (ReDoS prevention)
+static constexpr size_t MAX_WORD_LENGTH = 100;
+// Maximum number of censored words
+static constexpr size_t MAX_WORD_COUNT = 500;
+
+void CensorService::loadCensoredWords(std::function<void(bool)> callback) {
+    auto dbClient = app().getDbClient();
+
+    *dbClient << "SELECT setting_value FROM site_settings WHERE setting_key = 'censored_words'"
+              >> [this, callback](const Result& r) {
+                  // Build new patterns in temporary variables
+                  std::vector<std::string> newWords;
+                  std::optional<std::regex> newPattern;
+
+                  if (!r.empty() && !r[0]["setting_value"].isNull()) {
+                      std::string wordsStr = r[0]["setting_value"].as<std::string>();
+
+                      // Parse comma-separated words
+                      std::stringstream ss(wordsStr);
+                      std::string word;
+                      while (std::getline(ss, word, ',') && newWords.size() < MAX_WORD_COUNT) {
+                          // Trim whitespace
+                          size_t start = word.find_first_not_of(" \t\r\n");
+                          size_t end = word.find_last_not_of(" \t\r\n");
+                          if (start != std::string::npos && end != std::string::npos) {
+                              word = word.substr(start, end - start + 1);
+                              // Skip empty words and words exceeding max length (ReDoS prevention)
+                              if (!word.empty() && word.length() <= MAX_WORD_LENGTH) {
+                                  newWords.push_back(word);
+                              } else if (word.length() > MAX_WORD_LENGTH) {
+                                  LOG_WARN << "Skipping censored word exceeding " << MAX_WORD_LENGTH << " chars";
+                              }
+                          }
+                      }
+
+                      // Build combined pattern
+                      newPattern = buildCombinedPattern(newWords);
+                  }
+
+                  // Atomic swap under lock
+                  {
+                      std::unique_lock<std::shared_mutex> lock(mutex_);
+                      censoredWords_ = std::move(newWords);
+                      combinedPattern_ = std::move(newPattern);
+                  }
+
+                  LOG_INFO << "Loaded " << censoredWords_.size() << " censored words";
+
+                  if (callback) {
+                      callback(true);
+                  }
+              }
+              >> [callback](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to load censored words: " << e.base().what();
+                  if (callback) {
+                      callback(false);
+                  }
+              };
+}
+
+std::optional<std::regex> CensorService::buildCombinedPattern(const std::vector<std::string>& words) {
+    if (words.empty()) {
+        return std::nullopt;
+    }
+
+    try {
+        // Build combined pattern: \b(word1|word2|word3)\b
+        std::string pattern = "\\b(";
+        bool first = true;
+
+        for (const auto& word : words) {
+            if (!first) {
+                pattern += "|";
+            }
+            first = false;
+
+            // Escape special regex characters
+            for (char c : word) {
+                if (c == '.' || c == '^' || c == '$' || c == '*' || c == '+' ||
+                    c == '?' || c == '(' || c == ')' || c == '[' || c == ']' ||
+                    c == '{' || c == '}' || c == '|' || c == '\\') {
+                    pattern += '\\';
+                }
+                pattern += c;
+            }
+        }
+
+        pattern += ")\\b";
+
+        return std::regex(pattern, std::regex_constants::icase);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Failed to build combined censored pattern: " << e.what();
+        return std::nullopt;
+    }
+}
+
+std::string CensorService::censor(const std::string& text) const {
+    if (text.empty()) {
+        return text;
+    }
+
+    std::shared_lock<std::shared_mutex> lock(mutex_);
+
+    if (!combinedPattern_) {
+        return text;
+    }
+
+    std::string result;
+    try {
+        // Replace censored words with asterisks
+        std::sregex_iterator begin(text.begin(), text.end(), *combinedPattern_);
+        std::sregex_iterator end;
+
+        size_t lastPos = 0;
+        for (std::sregex_iterator it = begin; it != end; ++it) {
+            const std::smatch& match = *it;
+            // Append text before match
+            result += text.substr(lastPos, match.position() - lastPos);
+            // Replace match with asterisks of same length
+            result += std::string(match.length(), '*');
+            lastPos = match.position() + match.length();
+        }
+        // Append remaining text
+        result += text.substr(lastPos);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Regex replace error: " << e.what();
+        return text;
+    }
+
+    return result;
+}
+
+bool CensorService::containsCensoredWords(const std::string& text) const {
+    if (text.empty()) {
+        return false;
+    }
+
+    std::shared_lock<std::shared_mutex> lock(mutex_);
+
+    if (!combinedPattern_) {
+        return false;
+    }
+
+    try {
+        return std::regex_search(text, *combinedPattern_);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Regex search error: " << e.what();
+        return false;
+    }
+}
+
+std::vector<std::string> CensorService::getCensoredWords() const {
+    std::shared_lock<std::shared_mutex> lock(mutex_);
+    return censoredWords_;
+}
diff --git a/backend/src/services/CensorService.h b/backend/src/services/CensorService.h
new file mode 100644
index 0000000..9e10360
--- /dev/null
+++ b/backend/src/services/CensorService.h
@@ -0,0 +1,37 @@
+#pragma once
+#include <string>
+#include <vector>
+#include <shared_mutex>
+#include <regex>
+#include <functional>
+#include <optional>
+
+class CensorService {
+public:
+    static CensorService& getInstance() {
+        static CensorService instance;
+        return instance;
+    }
+
+    // Load censored words from database
+    void loadCensoredWords(std::function<void(bool)> callback = nullptr);
+
+    // Censor text by replacing censored words with asterisks (case-insensitive)
+    std::string censor(const std::string& text) const;
+
+    // Check if text contains any censored words
+    bool containsCensoredWords(const std::string& text) const;
+
+    // Get the list of censored words (for debugging/admin)
+    std::vector<std::string> getCensoredWords() const;
+
+private:
+    CensorService() = default;
+
+    mutable std::shared_mutex mutex_;
+    std::vector<std::string> censoredWords_;
+    std::optional<std::regex> combinedPattern_;  // Single combined pattern for efficiency
+
+    // Build a single combined regex pattern from all words
+    std::optional<std::regex> buildCombinedPattern(const std::vector<std::string>& words);
+};
diff --git a/backend/src/services/CorsMiddleware.h b/backend/src/services/CorsMiddleware.h
deleted file mode 100644
index 365c762..0000000
--- a/backend/src/services/CorsMiddleware.h
+++ /dev/null
@@ -1,76 +0,0 @@
-#pragma once
-#include <drogon/drogon.h>
-
-namespace middleware {
-
-class CorsMiddleware {
-public:
-    struct Config {
-        std::vector<std::string> allowOrigins = {"*"};
-        std::vector<std::string> allowMethods = {"GET", "POST", "PUT", "DELETE", "OPTIONS"};
-        std::vector<std::string> allowHeaders = {"Content-Type", "Authorization"};
-        bool allowCredentials = true;
-        int maxAge = 86400;
-    };
-
-    static void enable(const Config& config = {}) {
-        using namespace drogon;
-        
-        auto cfg = std::make_shared<Config>(config);
-        
-        auto addHeaders = [cfg](const HttpResponsePtr &resp, const HttpRequestPtr &req) {
-            std::string origin = req->getHeader("Origin");
-            
-            // Check if origin is allowed
-            bool allowed = false;
-            for (const auto& allowedOrigin : cfg->allowOrigins) {
-                if (allowedOrigin == "*" || allowedOrigin == origin) {
-                    allowed = true;
-                    break;
-                }
-            }
-            
-            if (allowed) {
-                resp->addHeader("Access-Control-Allow-Origin", origin.empty() ? "*" : origin);
-                resp->addHeader("Access-Control-Allow-Methods", joinStrings(cfg->allowMethods, ", "));
-                resp->addHeader("Access-Control-Allow-Headers", joinStrings(cfg->allowHeaders, ", "));
-                if (cfg->allowCredentials) {
-                    resp->addHeader("Access-Control-Allow-Credentials", "true");
-                }
-            }
-        };
-        
-        // Handle preflight requests
-        app().registerPreRoutingAdvice([cfg, addHeaders](const HttpRequestPtr &req,
-                                                        AdviceCallback &&acb,
-                                                        AdviceChainCallback &&accb) {
-            if (req->getMethod() == Options) {
-                auto resp = HttpResponse::newHttpResponse();
-                resp->setStatusCode(k204NoContent);
-                addHeaders(resp, req);
-                resp->addHeader("Access-Control-Max-Age", std::to_string(cfg->maxAge));
-                acb(resp);
-                return;
-            }
-            accb();
-        });
-        
-        // Add CORS headers to all responses
-        app().registerPostHandlingAdvice([addHeaders](const HttpRequestPtr &req,
-                                                     const HttpResponsePtr &resp) {
-            addHeaders(resp, req);
-        });
-    }
-
-private:
-    static std::string joinStrings(const std::vector<std::string>& strings, const std::string& delimiter) {
-        std::string result;
-        for (size_t i = 0; i < strings.size(); ++i) {
-            result += strings[i];
-            if (i < strings.size() - 1) result += delimiter;
-        }
-        return result;
-    }
-};
-
-} // namespace middleware
\ No newline at end of file
diff --git a/backend/src/services/DatabaseService.cpp b/backend/src/services/DatabaseService.cpp
index 844f413..c2f7ec4 100644
--- a/backend/src/services/DatabaseService.cpp
+++ b/backend/src/services/DatabaseService.cpp
@@ -1,9 +1,9 @@
 #include "DatabaseService.h"
 #include "../services/RedisHelper.h"
 #include <drogon/orm/DbClient.h>
-#include <random>
 #include <sstream>
 #include <iomanip>
+#include <openssl/rand.h>
 
 using namespace drogon;
 using namespace drogon::orm;
@@ -12,22 +12,25 @@ namespace {
     void storeKeyInRedis(const std::string& streamKey) {
         // Store the stream key in Redis for validation (24 hour TTL)
         bool stored = RedisHelper::storeKey("stream_key:" + streamKey, "1", 86400);
-        
+
         if (stored) {
             LOG_INFO << "Stored stream key in Redis: " << streamKey;
         } else {
             LOG_ERROR << "Failed to store key in Redis: " << streamKey;
         }
     }
-    
+
+    // SECURITY FIX: Use cryptographically secure random bytes instead of mt19937
     std::string generateStreamKey() {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
+        unsigned char bytes[32];  // 32 bytes = 64 hex characters
+        if (RAND_bytes(bytes, sizeof(bytes)) != 1) {
+            LOG_ERROR << "Failed to generate cryptographically secure random bytes";
+            throw std::runtime_error("Failed to generate secure stream key");
+        }
+
         std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
+        for (size_t i = 0; i < sizeof(bytes); ++i) {
+            ss << std::hex << std::setw(2) << std::setfill('0') << static_cast<int>(bytes[i]);
         }
         return ss.str();
     }
diff --git a/backend/src/services/RedisHelper.cpp b/backend/src/services/RedisHelper.cpp
index 7470732..5ea83f8 100644
--- a/backend/src/services/RedisHelper.cpp
+++ b/backend/src/services/RedisHelper.cpp
@@ -28,16 +28,17 @@ void RedisHelper::ensureConnected() {
         sw::redis::ConnectionOptions opts;
         opts.host = getRedisHost();
         opts.port = getRedisPort();
-        
+        opts.db = getRedisDb();
+
         const char* envPass = std::getenv("REDIS_PASS");
         if (envPass && strlen(envPass) > 0) {
             opts.password = envPass;
         }
-        
+
         opts.socket_timeout = std::chrono::milliseconds(1000);
         opts.connect_timeout = std::chrono::milliseconds(1000);
 
-        LOG_INFO << "Connecting to Redis at " << opts.host << ":" << opts.port;
+        LOG_INFO << "Connecting to Redis at " << opts.host << ":" << opts.port << " db=" << opts.db;
 
         _redis = std::make_unique<sw::redis::Redis>(opts);
         _redis->ping();
@@ -71,17 +72,35 @@ int RedisHelper::getRedisPort() const {
             return std::stoi(envPort);
         } catch (...) {}
     }
-    
+
     try {
         const auto& config = drogon::app().getCustomConfig();
         if (config.isMember("redis") && config["redis"].isMember("port")) {
             return config["redis"]["port"].asInt();
         }
     } catch (...) {}
-    
+
     return 6379;
 }
 
+int RedisHelper::getRedisDb() const {
+    const char* envDb = std::getenv("REDIS_DB");
+    if (envDb) {
+        try {
+            return std::stoi(envDb);
+        } catch (...) {}
+    }
+
+    try {
+        const auto& config = drogon::app().getCustomConfig();
+        if (config.isMember("redis") && config["redis"].isMember("db")) {
+            return config["redis"]["db"].asInt();
+        }
+    } catch (...) {}
+
+    return 0;  // Default to db 0
+}
+
 void RedisHelper::executeInThreadPool(std::function<void()> task) {
     auto loop = drogon::app().getLoop();
     if (!loop) {
@@ -212,19 +231,20 @@ void RedisHelper::expireAsync(const std::string &key,
 // Sync versions for compatibility
 std::unique_ptr<sw::redis::Redis> RedisHelper::getConnection() {
     ensureConnected();
-    
+
     sw::redis::ConnectionOptions opts;
     opts.host = getRedisHost();
     opts.port = getRedisPort();
-    
+    opts.db = getRedisDb();
+
     const char* envPass = std::getenv("REDIS_PASS");
     if (envPass && strlen(envPass) > 0) {
         opts.password = envPass;
     }
-    
+
     opts.socket_timeout = std::chrono::milliseconds(200);
     opts.connect_timeout = std::chrono::milliseconds(200);
-    
+
     return std::make_unique<sw::redis::Redis>(opts);
 }
 
diff --git a/backend/src/services/RedisHelper.h b/backend/src/services/RedisHelper.h
index f483e9d..bace3f3 100644
--- a/backend/src/services/RedisHelper.h
+++ b/backend/src/services/RedisHelper.h
@@ -121,6 +121,7 @@ private:
     void executeInThreadPool(std::function<void()> task);
     std::string getRedisHost() const;
     int getRedisPort() const;
+    int getRedisDb() const;
 
     std::unique_ptr<sw::redis::Redis> _redis;
     bool _initialized;
diff --git a/backend/src/services/RestreamService.cpp b/backend/src/services/RestreamService.cpp
new file mode 100644
index 0000000..64b8901
--- /dev/null
+++ b/backend/src/services/RestreamService.cpp
@@ -0,0 +1,397 @@
+#include "RestreamService.h"
+#include <drogon/drogon.h>
+#include <drogon/orm/DbClient.h>
+#include <memory>
+
+using namespace drogon;
+using namespace drogon::orm;
+
+// execCurl removed - using Drogon HttpClient instead for security
+
+std::string RestreamService::getBaseUrl() {
+    const char* envUrl = std::getenv("OME_API_URL");
+    if (envUrl) {
+        return std::string(envUrl);
+    }
+    return "http://ovenmediaengine:8081";
+}
+
+std::string RestreamService::getApiToken() {
+    const char* envToken = std::getenv("OME_API_TOKEN");
+    if (!envToken || strlen(envToken) == 0) {
+        throw std::runtime_error("OME_API_TOKEN environment variable is not set");
+    }
+    return std::string(envToken);
+}
+
+HttpClientPtr RestreamService::getClient() {
+    return HttpClient::newHttpClient(getBaseUrl());
+}
+
+HttpRequestPtr RestreamService::createRequest(HttpMethod method, const std::string& path) {
+    auto request = HttpRequest::newHttpRequest();
+    request->setMethod(method);
+    request->setPath(path);
+
+    const auto token = getApiToken();
+    const auto b64 = drogon::utils::base64Encode(token);
+    request->addHeader("Authorization", std::string("Basic ") + b64);
+
+    return request;
+}
+
+HttpRequestPtr RestreamService::createJsonRequest(HttpMethod method, const std::string& path,
+                                                   const Json::Value& body) {
+    auto request = HttpRequest::newHttpJsonRequest(body);
+    request->setMethod(method);
+    request->setPath(path);
+
+    const auto token = getApiToken();
+    const auto b64 = drogon::utils::base64Encode(token);
+    request->addHeader("Authorization", std::string("Basic ") + b64);
+
+    return request;
+}
+
+std::string RestreamService::generatePushId(const std::string& streamKey, int64_t destinationId) {
+    return "restream_" + streamKey + "_" + std::to_string(destinationId);
+}
+
+void RestreamService::updateDestinationStatus(int64_t destinationId, bool isConnected, const std::string& error) {
+    auto dbClient = app().getDbClient();
+
+    if (isConnected) {
+        *dbClient << "UPDATE restream_destinations SET is_connected = true, last_error = NULL, "
+                     "last_connected_at = CURRENT_TIMESTAMP WHERE id = $1"
+                  << destinationId
+                  >> [destinationId](const Result&) {
+                      LOG_INFO << "Restream destination " << destinationId << " connected";
+                  }
+                  >> [destinationId](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update restream destination " << destinationId
+                                << ": " << e.base().what();
+                  };
+    } else {
+        *dbClient << "UPDATE restream_destinations SET is_connected = false, last_error = $1 WHERE id = $2"
+                  << error << destinationId
+                  >> [destinationId](const Result&) {
+                      LOG_INFO << "Restream destination " << destinationId << " disconnected";
+                  }
+                  >> [destinationId](const DrogonDbException& e) {
+                      LOG_ERROR << "Failed to update restream destination " << destinationId
+                                << ": " << e.base().what();
+                  };
+    }
+}
+
+void RestreamService::startPush(const std::string& sourceStreamKey, const RestreamDestination& dest,
+                                 std::function<void(bool, const std::string&)> callback) {
+    // Build the full destination URL with stream key
+    std::string fullUrl = dest.rtmpUrl;
+    if (!fullUrl.empty() && fullUrl.back() != '/') {
+        fullUrl += '/';
+    }
+    fullUrl += dest.streamKey;
+
+    std::string pushId = generatePushId(sourceStreamKey, dest.id);
+    auto destId = dest.id;
+
+    LOG_INFO << "Starting RTMP push for stream " << sourceStreamKey
+             << " to " << dest.name << " (" << dest.rtmpUrl << ")";
+
+    // Build JSON body
+    Json::Value body;
+    body["id"] = pushId;
+    body["stream"]["name"] = sourceStreamKey;
+    body["protocol"] = "rtmp";
+    body["url"] = fullUrl;
+
+    // Use Drogon HttpClient instead of curl for security
+    auto request = createJsonRequest(drogon::Post, "/v1/vhosts/default/apps/app:startPush", body);
+
+    LOG_INFO << "Sending HTTP request for push start";
+
+    getClient()->sendRequest(request,
+        [this, callback, pushId, sourceStreamKey, destId](ReqResult result, const HttpResponsePtr& response) {
+            if (result != ReqResult::Ok || !response) {
+                std::string error = "Failed to connect to OME API";
+                updateDestinationStatus(destId, false, error);
+                callback(false, error);
+                LOG_ERROR << "Failed to start RTMP push: " << error;
+                return;
+            }
+
+            auto json = response->getJsonObject();
+            if (json) {
+                int statusCode = (*json).get("statusCode", 0).asInt();
+                std::string message = (*json).get("message", "").asString();
+
+                // 200 = success, 400 with "Duplicate ID" = already running (treat as success)
+                bool isSuccess = (statusCode == 200);
+                bool isDuplicate = (statusCode == 400 && message.find("Duplicate") != std::string::npos);
+
+                if (isSuccess || isDuplicate) {
+                    // Track the active push
+                    {
+                        std::lock_guard<std::mutex> lock(pushMutex_);
+                        activePushes_[sourceStreamKey][destId] = pushId;
+                    }
+                    updateDestinationStatus(destId, true, "");
+                    callback(true, "");
+                    if (isDuplicate) {
+                        LOG_INFO << "RTMP push already active (duplicate ID): " << pushId;
+                    } else {
+                        LOG_INFO << "RTMP push started successfully: " << pushId;
+                    }
+                    return;
+                } else {
+                    std::string error = (*json).get("message", "Unknown error").asString();
+                    updateDestinationStatus(destId, false, error);
+                    callback(false, error);
+                    LOG_ERROR << "Failed to start RTMP push: " << error;
+                    return;
+                }
+            }
+
+            std::string error = "Invalid response from OME API";
+            updateDestinationStatus(destId, false, error);
+            callback(false, error);
+            LOG_ERROR << "Failed to start RTMP push: " << error;
+        });
+}
+
+void RestreamService::stopPush(const std::string& sourceStreamKey, int64_t destinationId,
+                                std::function<void(bool)> callback) {
+    std::string pushId;
+
+    {
+        std::lock_guard<std::mutex> lock(pushMutex_);
+        auto streamIt = activePushes_.find(sourceStreamKey);
+        if (streamIt != activePushes_.end()) {
+            auto destIt = streamIt->second.find(destinationId);
+            if (destIt != streamIt->second.end()) {
+                pushId = destIt->second;
+            }
+        }
+    }
+
+    // If not tracked in memory, generate the push ID anyway and try to stop it
+    // This handles cases where server restarted but push is still active on OME
+    if (pushId.empty()) {
+        pushId = generatePushId(sourceStreamKey, destinationId);
+    }
+
+    LOG_INFO << "Stopping RTMP push: " << pushId;
+
+    // Build JSON body
+    Json::Value body;
+    body["id"] = pushId;
+
+    // Use Drogon HttpClient instead of curl for security
+    auto request = createJsonRequest(drogon::Post, "/v1/vhosts/default/apps/app:stopPush", body);
+
+    LOG_INFO << "Sending HTTP request for push stop";
+
+    getClient()->sendRequest(request,
+        [this, callback, pushId, sourceStreamKey, destinationId](ReqResult result, const HttpResponsePtr& response) {
+            // Remove from tracking regardless of result
+            {
+                std::lock_guard<std::mutex> lock(pushMutex_);
+                auto streamIt = activePushes_.find(sourceStreamKey);
+                if (streamIt != activePushes_.end()) {
+                    streamIt->second.erase(destinationId);
+                    if (streamIt->second.empty()) {
+                        activePushes_.erase(streamIt);
+                    }
+                }
+            }
+
+            updateDestinationStatus(destinationId, false, "");
+
+            if (result == ReqResult::Ok && response) {
+                auto json = response->getJsonObject();
+                if (json) {
+                    int statusCode = (*json).get("statusCode", 0).asInt();
+                    if (statusCode == 200 || statusCode == 404) {
+                        callback(true);
+                        LOG_INFO << "RTMP push stopped: " << pushId;
+                        return;
+                    }
+                }
+            }
+
+            // Even if API call failed, we've removed from tracking
+            callback(true);
+            LOG_WARN << "RTMP push stop may have failed, but removed from tracking: " << pushId;
+        });
+}
+
+void RestreamService::stopAllPushes(const std::string& sourceStreamKey,
+                                     std::function<void(bool)> callback) {
+    std::vector<int64_t> destinationIds;
+
+    {
+        std::lock_guard<std::mutex> lock(pushMutex_);
+        auto streamIt = activePushes_.find(sourceStreamKey);
+        if (streamIt != activePushes_.end()) {
+            for (const auto& [destId, pushId] : streamIt->second) {
+                destinationIds.push_back(destId);
+            }
+        }
+    }
+
+    if (destinationIds.empty()) {
+        callback(true);
+        return;
+    }
+
+    // Stop each push
+    auto remaining = std::make_shared<std::atomic<int>>(destinationIds.size());
+    auto allSuccess = std::make_shared<std::atomic<bool>>(true);
+
+    for (int64_t destId : destinationIds) {
+        stopPush(sourceStreamKey, destId, [remaining, allSuccess, callback](bool success) {
+            if (!success) {
+                allSuccess->store(false);
+            }
+            if (--(*remaining) == 0) {
+                callback(allSuccess->load());
+            }
+        });
+    }
+}
+
+void RestreamService::getPushStatus(const std::string& sourceStreamKey, int64_t destinationId,
+                                     std::function<void(bool, bool isConnected, const std::string& error)> callback) {
+    std::string pushId;
+
+    {
+        std::lock_guard<std::mutex> lock(pushMutex_);
+        auto streamIt = activePushes_.find(sourceStreamKey);
+        if (streamIt != activePushes_.end()) {
+            auto destIt = streamIt->second.find(destinationId);
+            if (destIt != streamIt->second.end()) {
+                pushId = destIt->second;
+            }
+        }
+    }
+
+    if (pushId.empty()) {
+        callback(true, false, "Not connected");
+        return;
+    }
+
+    // OME API: GET /v1/vhosts/{vhost}/apps/{app}/push
+    std::string path = "/v1/vhosts/default/apps/app/push";
+    auto request = createRequest(Get, path);
+
+    getClient()->sendRequest(request,
+        [callback, pushId](ReqResult result, const HttpResponsePtr& response) {
+            if (result == ReqResult::Ok && response && response->getStatusCode() == k200OK) {
+                try {
+                    auto json = *response->getJsonObject();
+                    // Look for our push in the response
+                    if (json.isMember("response") && json["response"].isArray()) {
+                        for (const auto& push : json["response"]) {
+                            if (push["id"].asString() == pushId) {
+                                std::string state = push.get("state", "unknown").asString();
+                                bool connected = (state == "started" || state == "connected");
+                                std::string error = push.get("error", "").asString();
+                                callback(true, connected, error);
+                                return;
+                            }
+                        }
+                    }
+                    callback(true, false, "Push not found");
+                } catch (const std::exception& e) {
+                    callback(false, false, e.what());
+                }
+            } else {
+                callback(false, false, "Failed to get push status");
+            }
+        });
+}
+
+void RestreamService::startAllDestinations(const std::string& streamKey, int64_t realmId) {
+    LOG_INFO << "Starting all restream destinations for realm " << realmId;
+
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, realm_id, name, rtmp_url, stream_key, enabled "
+                 "FROM restream_destinations WHERE realm_id = $1 AND enabled = true"
+              << realmId
+              >> [this, streamKey](const Result& r) {
+                  for (const auto& row : r) {
+                      RestreamDestination dest;
+                      dest.id = row["id"].as<int64_t>();
+                      dest.realmId = row["realm_id"].as<int64_t>();
+                      dest.name = row["name"].as<std::string>();
+                      dest.rtmpUrl = row["rtmp_url"].as<std::string>();
+                      dest.streamKey = row["stream_key"].as<std::string>();
+                      dest.enabled = row["enabled"].as<bool>();
+
+                      startPush(streamKey, dest, [dest](bool success, const std::string& error) {
+                          if (!success) {
+                              LOG_ERROR << "Failed to start restream to " << dest.name << ": " << error;
+                          }
+                      });
+                  }
+              }
+              >> [realmId](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to fetch restream destinations for realm " << realmId
+                            << ": " << e.base().what();
+              };
+}
+
+void RestreamService::stopAllDestinations(const std::string& streamKey, int64_t realmId) {
+    LOG_INFO << "Stopping all restream destinations for realm " << realmId;
+
+    stopAllPushes(streamKey, [realmId](bool success) {
+        if (!success) {
+            LOG_WARN << "Some restream pushes may not have stopped cleanly for realm " << realmId;
+        }
+    });
+
+    // Also update all destinations in DB as disconnected
+    auto dbClient = app().getDbClient();
+    *dbClient << "UPDATE restream_destinations SET is_connected = false WHERE realm_id = $1"
+              << realmId
+              >> [](const Result&) {}
+              >> [realmId](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to update restream destinations for realm " << realmId
+                            << ": " << e.base().what();
+              };
+}
+
+void RestreamService::attemptReconnections(const std::string& streamKey, int64_t realmId) {
+    // Get all enabled but disconnected destinations and try to reconnect
+    auto dbClient = app().getDbClient();
+    *dbClient << "SELECT id, realm_id, name, rtmp_url, stream_key, enabled, is_connected "
+                 "FROM restream_destinations "
+                 "WHERE realm_id = $1 AND enabled = true AND is_connected = false"
+              << realmId
+              >> [this, streamKey](const Result& r) {
+                  for (const auto& row : r) {
+                      RestreamDestination dest;
+                      dest.id = row["id"].as<int64_t>();
+                      dest.realmId = row["realm_id"].as<int64_t>();
+                      dest.name = row["name"].as<std::string>();
+                      dest.rtmpUrl = row["rtmp_url"].as<std::string>();
+                      dest.streamKey = row["stream_key"].as<std::string>();
+                      dest.enabled = row["enabled"].as<bool>();
+
+                      LOG_INFO << "Attempting to reconnect restream destination: " << dest.name;
+
+                      startPush(streamKey, dest, [dest](bool success, const std::string& error) {
+                          if (success) {
+                              LOG_INFO << "Reconnected restream to " << dest.name;
+                          } else {
+                              LOG_WARN << "Reconnection failed for " << dest.name << ": " << error;
+                          }
+                      });
+                  }
+              }
+              >> [realmId](const DrogonDbException& e) {
+                  LOG_ERROR << "Failed to fetch disconnected restream destinations for realm " << realmId
+                            << ": " << e.base().what();
+              };
+}
diff --git a/backend/src/services/RestreamService.h b/backend/src/services/RestreamService.h
new file mode 100644
index 0000000..1d13695
--- /dev/null
+++ b/backend/src/services/RestreamService.h
@@ -0,0 +1,75 @@
+#pragma once
+#include <drogon/HttpClient.h>
+#include <drogon/utils/Utilities.h>
+#include <functional>
+#include <string>
+#include <unordered_map>
+#include <mutex>
+#include <memory>
+
+struct RestreamDestination {
+    int64_t id;
+    int64_t realmId;
+    std::string name;
+    std::string rtmpUrl;
+    std::string streamKey;
+    bool enabled;
+    bool isConnected;
+    std::string lastError;
+};
+
+class RestreamService {
+public:
+    static RestreamService& getInstance() {
+        static RestreamService instance;
+        return instance;
+    }
+
+    // Start pushing stream to a destination
+    void startPush(const std::string& sourceStreamKey, const RestreamDestination& dest,
+                   std::function<void(bool, const std::string&)> callback);
+
+    // Stop pushing stream to a destination
+    void stopPush(const std::string& sourceStreamKey, int64_t destinationId,
+                  std::function<void(bool)> callback);
+
+    // Stop all pushes for a stream
+    void stopAllPushes(const std::string& sourceStreamKey,
+                       std::function<void(bool)> callback);
+
+    // Get push status for a destination
+    void getPushStatus(const std::string& sourceStreamKey, int64_t destinationId,
+                       std::function<void(bool, bool isConnected, const std::string& error)> callback);
+
+    // Start all enabled destinations for a realm when stream goes live
+    void startAllDestinations(const std::string& streamKey, int64_t realmId);
+
+    // Stop all destinations for a realm when stream goes offline
+    void stopAllDestinations(const std::string& streamKey, int64_t realmId);
+
+    // Attempt reconnection for failed destinations (called periodically)
+    void attemptReconnections(const std::string& streamKey, int64_t realmId);
+
+private:
+    RestreamService() = default;
+    ~RestreamService() = default;
+    RestreamService(const RestreamService&) = delete;
+    RestreamService& operator=(const RestreamService&) = delete;
+
+    std::string getBaseUrl();
+    std::string getApiToken();
+    drogon::HttpClientPtr getClient();
+    drogon::HttpRequestPtr createRequest(drogon::HttpMethod method, const std::string& path);
+    drogon::HttpRequestPtr createJsonRequest(drogon::HttpMethod method, const std::string& path,
+                                              const Json::Value& body);
+
+    // Generate a unique push ID for tracking
+    std::string generatePushId(const std::string& streamKey, int64_t destinationId);
+
+    // Update destination status in database
+    void updateDestinationStatus(int64_t destinationId, bool isConnected, const std::string& error);
+
+    // Track active pushes: streamKey -> (destinationId -> pushId)
+    std::unordered_map<std::string, std::unordered_map<int64_t, std::string>> activePushes_;
+    std::mutex pushMutex_;
+};
diff --git a/backend/src/services/StatsService.cpp b/backend/src/services/StatsService.cpp
index f602a3e..c3647e1 100644
--- a/backend/src/services/StatsService.cpp
+++ b/backend/src/services/StatsService.cpp
@@ -2,6 +2,7 @@
 #include "../controllers/StreamController.h"
 #include "../services/RedisHelper.h"
 #include "../services/OmeClient.h"
+#include "../services/RestreamService.h"
 #include <drogon/HttpClient.h>
 #include <drogon/utils/Utilities.h>
 #include <set>
@@ -116,19 +117,25 @@ void StatsService::pollOmeStats() {
             // Update each active stream
             for (const auto& streamKey : activeStreamKeys) {
                 LOG_INFO << "Processing active stream: " << streamKey;
-                
-                // IMMEDIATELY update database to mark as live
+
+                // IMMEDIATELY update database to mark as live and get realm ID
                 auto dbClient = app().getDbClient();
                 *dbClient << "UPDATE realms SET is_live = true, viewer_count = 0, "
-                            "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1"
+                            "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1 RETURNING id"
                           << streamKey
-                          >> [streamKey](const orm::Result&) {
+                          >> [streamKey](const orm::Result& r) {
                               LOG_INFO << "Successfully marked realm as live: " << streamKey;
+
+                              // Attempt reconnection for any disconnected restream destinations
+                              if (!r.empty()) {
+                                  int64_t realmId = r[0]["id"].as<int64_t>();
+                                  RestreamService::getInstance().attemptReconnections(streamKey, realmId);
+                              }
                           }
                           >> [streamKey](const orm::DrogonDbException& e) {
                               LOG_ERROR << "Failed to update realm live status: " << e.base().what();
                           };
-                
+
                 // Then update detailed stats
                 updateStreamStats(streamKey);
             }
@@ -167,10 +174,12 @@ void StatsService::updateStreamStats(const std::string& streamKey) {
     fetchStatsFromOme(streamKey, [this, streamKey](bool success, const StreamStats& stats) {
         if (success) {
             StreamStats updatedStats = stats;
-            updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
-            
+            // Only count viewer tokens when stream is actually live
+            // Offline streams should show 0 viewers (tokens may linger for 5 min after disconnect)
+            updatedStats.uniqueViewers = stats.isLive ? getUniqueViewerCount(streamKey) : 0;
+
             storeStatsInRedis(streamKey, updatedStats);
-            
+
             // Update realm in database
             updateRealmLiveStatus(streamKey, updatedStats);
             
@@ -267,31 +276,31 @@ void StatsService::fetchStatsFromOme(const std::string& streamKey,
                     hasInput = true;
                     const auto& input = data["input"];
                     
-                    // Get bitrate from input tracks
+                    // Get bitrate from input tracks (OME returns bytes/sec, convert to bits/sec)
                     if (input.isMember("tracks") && input["tracks"].isArray()) {
                         for (const auto& track : input["tracks"]) {
                             if (track["type"].asString() == "video" && track.isMember("bitrate")) {
-                                stats.bitrate = track["bitrate"].asDouble();
+                                stats.bitrate = track["bitrate"].asDouble() * 8;  // Convert bytes/sec to bits/sec
                             }
                         }
                     }
                 }
                 
-                // Alternative: Check lastThroughputIn
+                // Alternative: Check lastThroughputIn (OME returns bytes/sec, convert to bits/sec)
                 if (!hasInput && data.isMember("lastThroughputIn")) {
                     double throughput = data["lastThroughputIn"].asDouble();
                     if (throughput > 0) {
                         hasInput = true;
-                        stats.bitrate = throughput;
+                        stats.bitrate = throughput * 8;  // Convert bytes/sec to bits/sec
                     }
                 }
-                
-                // Alternative: Check avgThroughputIn
+
+                // Alternative: Check avgThroughputIn (OME returns bytes/sec, convert to bits/sec)
                 if (!hasInput && data.isMember("avgThroughputIn")) {
                     double avgThroughput = data["avgThroughputIn"].asDouble();
                     if (avgThroughput > 0) {
                         hasInput = true;
-                        stats.bitrate = avgThroughput;
+                        stats.bitrate = avgThroughput * 8;  // Convert bytes/sec to bits/sec
                     }
                 }
                 
@@ -479,8 +488,8 @@ void StatsService::getStreamStats(const std::string& streamKey,
         fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
             if (success) {
                 StreamStats updatedStats = stats;
-                // Set uniqueViewers on cache miss
-                updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
+                // Only count viewer tokens when stream is actually live
+                updatedStats.uniqueViewers = stats.isLive ? getUniqueViewerCount(streamKey) : 0;
                 callback(true, updatedStats);
             } else {
                 callback(false, stats);
@@ -504,7 +513,7 @@ void StatsService::getStreamStats(const std::string& streamKey,
             stats.resolution = json["resolution"].asString();
             stats.fps = json["fps"].asDouble();
             stats.isLive = json["is_live"].asBool();
-            
+
             // Parse protocol connections
             if (json.isMember("protocol_connections")) {
                 const auto& pc = json["protocol_connections"];
@@ -513,19 +522,42 @@ void StatsService::getStreamStats(const std::string& streamKey,
                 stats.protocolConnections.llhls = pc["llhls"].asInt64();
                 stats.protocolConnections.dash = pc["dash"].asInt64();
             }
-            
+
             stats.lastUpdated = std::chrono::system_clock::time_point(
                 std::chrono::seconds(json["last_updated"].asInt64())
             );
-            
-            callback(true, stats);
+
+            // Verify is_live from database (source of truth from webhooks)
+            // This prevents stale cache from overriding the webhook-updated DB state
+            auto dbClient = app().getDbClient();
+            *dbClient << "SELECT is_live FROM realms WHERE stream_key = $1"
+                      << streamKey
+                      >> [callback, stats](const orm::Result& r) mutable {
+                          if (!r.empty()) {
+                              bool dbIsLive = r[0]["is_live"].as<bool>();
+                              // If database says live but cache says offline, trust database
+                              // (webhooks update DB immediately, cache may be stale)
+                              if (dbIsLive && !stats.isLive) {
+                                  LOG_DEBUG << "Overriding stale cache: DB says live, cache says offline";
+                                  stats.isLive = true;
+                              }
+                          }
+                          callback(true, stats);
+                      }
+                      >> [callback, stats](const orm::DrogonDbException& e) {
+                          LOG_ERROR << "Failed to verify is_live from DB: " << e.base().what();
+                          // Fall back to cached value on DB error
+                          callback(true, stats);
+                      };
             LOG_DEBUG << "Retrieved cached stats for " << streamKey;
+            return;  // Callback handled async
         } else {
             // Fallback to fresh fetch if cached data is corrupted
             fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
                 if (success) {
                     StreamStats updatedStats = stats;
-                    updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
+                    // Only count viewer tokens when stream is actually live
+                    updatedStats.uniqueViewers = stats.isLive ? getUniqueViewerCount(streamKey) : 0;
                     callback(true, updatedStats);
                 } else {
                     callback(false, stats);
@@ -538,7 +570,8 @@ void StatsService::getStreamStats(const std::string& streamKey,
         fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
             if (success) {
                 StreamStats updatedStats = stats;
-                updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
+                // Only count viewer tokens when stream is actually live
+                updatedStats.uniqueViewers = stats.isLive ? getUniqueViewerCount(streamKey) : 0;
                 callback(true, updatedStats);
             } else {
                 callback(false, stats);
diff --git a/backend/src/services/StatsService.h b/backend/src/services/StatsService.h
index 4ce5422..06d1c30 100644
--- a/backend/src/services/StatsService.h
+++ b/backend/src/services/StatsService.h
@@ -69,5 +69,7 @@ private:
 
     std::atomic<bool> running_{false};
     std::optional<trantor::TimerId> timerId_;
-    std::chrono::seconds pollInterval_{2}; // Poll every 2 seconds
+    // Poll every 5 seconds for near-instant stats updates
+    // Real-time updates also come via OME webhooks (see StreamController::handleOmeWebhook)
+    std::chrono::seconds pollInterval_{5};
 };
\ No newline at end of file
diff --git a/backend/src/services/TreasuryService.cpp b/backend/src/services/TreasuryService.cpp
new file mode 100644
index 0000000..e7a9531
--- /dev/null
+++ b/backend/src/services/TreasuryService.cpp
@@ -0,0 +1,281 @@
+#include "TreasuryService.h"
+#include <ctime>
+#include <cmath>
+#include <iomanip>
+#include <sstream>
+
+using namespace drogon;
+
+TreasuryService::~TreasuryService() {
+    shutdown();
+}
+
+void TreasuryService::initialize() {
+    LOG_INFO << "Initializing Treasury Service...";
+    running_ = true;
+}
+
+void TreasuryService::startScheduler() {
+    if (!running_) {
+        LOG_WARN << "Treasury service not initialized, cannot start scheduler";
+        return;
+    }
+
+    LOG_INFO << "Starting treasury scheduler...";
+
+    if (auto loop = drogon::app().getLoop()) {
+        try {
+            // Do an immediate check on startup (catches up on missed tasks)
+            checkAndRunTasks();
+
+            // Then set up the hourly timer
+            timerId_ = loop->runEvery(
+                checkInterval_.count(),
+                [this]() {
+                    if (!running_) return;
+                    try {
+                        checkAndRunTasks();
+                    } catch (const std::exception& e) {
+                        LOG_ERROR << "Error in treasury scheduler: " << e.what();
+                    }
+                }
+            );
+            LOG_INFO << "Treasury scheduler started with " << checkInterval_.count() << "s interval";
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Failed to create treasury timer: " << e.what();
+        }
+    } else {
+        LOG_ERROR << "Event loop not available for treasury scheduler";
+    }
+}
+
+void TreasuryService::shutdown() {
+    LOG_INFO << "Shutting down Treasury Service...";
+    running_ = false;
+
+    if (timerId_.has_value()) {
+        if (auto loop = drogon::app().getLoop()) {
+            loop->invalidateTimer(timerId_.value());
+        }
+        timerId_.reset();
+    }
+}
+
+void TreasuryService::checkAndRunTasks() {
+    LOG_INFO << "Treasury scheduler: checking for pending tasks...";
+
+    auto dbClient = app().getDbClient();
+
+    // Get current time info
+    std::time_t now = std::time(nullptr);
+    std::tm* localTime = std::localtime(&now);
+    int dayOfWeek = localTime->tm_wday;  // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+
+    // Get treasury timestamps
+    *dbClient << "SELECT last_growth_at, last_distribution_at FROM ubercoin_treasury WHERE id = 1"
+              >> [this, dayOfWeek, localTime](const orm::Result& r) {
+                  if (r.empty()) {
+                      LOG_WARN << "Treasury record not found";
+                      return;
+                  }
+
+                  bool needsGrowth = false;
+                  bool needsDistribution = false;
+
+                  std::time_t now = std::time(nullptr);
+                  std::tm* todayStart = std::localtime(&now);
+                  todayStart->tm_hour = 0;
+                  todayStart->tm_min = 0;
+                  todayStart->tm_sec = 0;
+                  std::time_t todayStartTime = std::mktime(todayStart);
+
+                  // Check if growth is needed (Mon-Sat, once per day)
+                  if (dayOfWeek >= 1 && dayOfWeek <= 6) {  // Monday to Saturday
+                      if (r[0]["last_growth_at"].isNull()) {
+                          needsGrowth = true;
+                      } else {
+                          std::string lastGrowthStr = r[0]["last_growth_at"].as<std::string>();
+                          std::tm lastGrowthTm = {};
+                          std::istringstream ss(lastGrowthStr);
+                          ss >> std::get_time(&lastGrowthTm, "%Y-%m-%d %H:%M:%S");
+                          std::time_t lastGrowthTime = std::mktime(&lastGrowthTm);
+
+                          // If last growth was before today, we need to apply growth
+                          if (lastGrowthTime < todayStartTime) {
+                              needsGrowth = true;
+                          }
+                      }
+                  }
+
+                  // Check if distribution is needed (Sunday, once per week)
+                  if (dayOfWeek == 0) {  // Sunday
+                      if (r[0]["last_distribution_at"].isNull()) {
+                          needsDistribution = true;
+                      } else {
+                          std::string lastDistStr = r[0]["last_distribution_at"].as<std::string>();
+                          std::tm lastDistTm = {};
+                          std::istringstream ss(lastDistStr);
+                          ss >> std::get_time(&lastDistTm, "%Y-%m-%d %H:%M:%S");
+                          std::time_t lastDistTime = std::mktime(&lastDistTm);
+
+                          // If last distribution was before today, we need to distribute
+                          if (lastDistTime < todayStartTime) {
+                              needsDistribution = true;
+                          }
+                      }
+                  }
+
+                  if (needsGrowth) {
+                      LOG_INFO << "Treasury scheduler: applying daily growth";
+                      this->applyDailyGrowth();
+                  }
+
+                  if (needsDistribution) {
+                      LOG_INFO << "Treasury scheduler: distributing to users";
+                      this->distributeToUsers();
+                  }
+
+                  if (!needsGrowth && !needsDistribution) {
+                      LOG_INFO << "Treasury scheduler: no tasks needed at this time";
+                  }
+              }
+              >> [](const orm::DrogonDbException& e) {
+                  LOG_ERROR << "Treasury scheduler: failed to check timestamps: " << e.base().what();
+              };
+}
+
+void TreasuryService::applyDailyGrowth() {
+    auto dbClient = app().getDbClient();
+
+    // Apply 3.3% growth to treasury balance
+    *dbClient << "UPDATE ubercoin_treasury SET balance = balance * 1.033, last_growth_at = NOW() WHERE id = 1 RETURNING balance"
+              >> [](const orm::Result& r) {
+                  double newBalance = 0.0;
+                  if (!r.empty()) {
+                      newBalance = r[0]["balance"].as<double>();
+                  }
+                  LOG_INFO << "Treasury growth applied (3.3%). New balance: " << newBalance;
+              }
+              >> [](const orm::DrogonDbException& e) {
+                  LOG_ERROR << "Failed to apply treasury growth: " << e.base().what();
+              };
+}
+
+void TreasuryService::distributeToUsers() {
+    auto dbClient = app().getDbClient();
+
+    // Get treasury balance
+    *dbClient << "SELECT balance FROM ubercoin_treasury WHERE id = 1"
+              >> [this, dbClient](const orm::Result& r) {
+                  if (r.empty()) {
+                      LOG_ERROR << "Treasury not found for distribution";
+                      return;
+                  }
+
+                  double treasuryBalance = r[0]["balance"].as<double>();
+
+                  if (treasuryBalance <= 0) {
+                      LOG_INFO << "Treasury empty, nothing to distribute";
+                      return;
+                  }
+
+                  // Get all users with their created_at for burn rate calculation
+                  *dbClient << "SELECT id, created_at, ubercoin_balance FROM users"
+                            >> [this, dbClient, treasuryBalance](const orm::Result& users) {
+                                if (users.empty()) {
+                                    LOG_INFO << "No users to distribute to";
+                                    return;
+                                }
+
+                                int64_t userCount = users.size();
+                                double sharePerUser = treasuryBalance / static_cast<double>(userCount);
+
+                                double totalDistributed = 0.0;
+                                double totalDestroyed = 0.0;
+
+                                // Calculate distributions for each user
+                                for (const auto& row : users) {
+                                    int64_t userId = row["id"].as<int64_t>();
+                                    std::string createdAt = row["created_at"].as<std::string>();
+                                    double currentBalance = row["ubercoin_balance"].isNull() ? 0.0 : row["ubercoin_balance"].as<double>();
+
+                                    int accountAgeDays = this->calculateAccountAgeDays(createdAt);
+                                    double burnRate = this->calculateBurnRate(accountAgeDays);
+
+                                    // Calculate received amount (after burn) - ceiling for user benefit
+                                    double receivedAmount = sharePerUser * (100.0 - burnRate) / 100.0;
+                                    receivedAmount = std::ceil(receivedAmount * 1000.0) / 1000.0;
+
+                                    double destroyedAmount = sharePerUser - receivedAmount;
+
+                                    double newBalance = currentBalance + receivedAmount;
+
+                                    // Update user balance
+                                    *dbClient << "UPDATE users SET ubercoin_balance = $1 WHERE id = $2"
+                                              << newBalance << userId
+                                              >> [](const orm::Result&) {}
+                                              >> [userId](const orm::DrogonDbException& e) {
+                                                  LOG_ERROR << "Failed to update user " << userId << " balance in distribution: " << e.base().what();
+                                              };
+
+                                    totalDistributed += receivedAmount;
+                                    totalDestroyed += destroyedAmount;
+                                }
+
+                                // Reset treasury balance to 0 and update total_destroyed
+                                *dbClient << "UPDATE ubercoin_treasury SET balance = 0, total_destroyed = total_destroyed + $1, last_distribution_at = NOW() WHERE id = 1"
+                                          << totalDestroyed
+                                          >> [totalDistributed, totalDestroyed, userCount](const orm::Result&) {
+                                              LOG_INFO << "Treasury distributed successfully. Users: " << userCount
+                                                       << ", Distributed: " << totalDistributed
+                                                       << ", Destroyed: " << totalDestroyed;
+                                          }
+                                          >> [](const orm::DrogonDbException& e) {
+                                              LOG_ERROR << "Failed to reset treasury: " << e.base().what();
+                                          };
+                            }
+                            >> [](const orm::DrogonDbException& e) {
+                                LOG_ERROR << "Failed to get users for distribution: " << e.base().what();
+                            };
+              }
+              >> [](const orm::DrogonDbException& e) {
+                  LOG_ERROR << "Failed to get treasury balance: " << e.base().what();
+              };
+}
+
+double TreasuryService::calculateBurnRate(int accountAgeDays) {
+    double burnRate = 99.0 * std::exp(-static_cast<double>(accountAgeDays) / 180.0);
+    return std::max(1.0, burnRate);
+}
+
+int TreasuryService::calculateAccountAgeDays(const std::string& createdAt) {
+    try {
+        // Parse ISO 8601 timestamp (e.g., "2025-01-15T10:30:00+00:00" or "2025-01-15 10:30:00")
+        std::tm tm = {};
+        std::istringstream ss(createdAt);
+
+        // Try ISO 8601 format first
+        ss >> std::get_time(&tm, "%Y-%m-%dT%H:%M:%S");
+        if (ss.fail()) {
+            // Try space-separated format
+            ss.clear();
+            ss.str(createdAt);
+            ss >> std::get_time(&tm, "%Y-%m-%d %H:%M:%S");
+        }
+
+        if (ss.fail()) {
+            LOG_WARN << "Failed to parse created_at timestamp: " << createdAt;
+            return 0;
+        }
+
+        std::time_t createdTime = std::mktime(&tm);
+        std::time_t now = std::time(nullptr);
+
+        // Calculate difference in days
+        double diffSeconds = std::difftime(now, createdTime);
+        return static_cast<int>(diffSeconds / (60 * 60 * 24));
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Error calculating account age: " << e.what();
+        return 0;
+    }
+}
diff --git a/backend/src/services/TreasuryService.h b/backend/src/services/TreasuryService.h
new file mode 100644
index 0000000..521fd63
--- /dev/null
+++ b/backend/src/services/TreasuryService.h
@@ -0,0 +1,40 @@
+#pragma once
+#include <drogon/drogon.h>
+#include <trantor/net/EventLoop.h>
+#include <atomic>
+#include <optional>
+#include <chrono>
+
+class TreasuryService {
+public:
+    static TreasuryService& getInstance() {
+        static TreasuryService instance;
+        return instance;
+    }
+
+    void initialize();
+    void startScheduler();
+    void shutdown();
+
+    // Manual triggers (for testing/admin)
+    void applyDailyGrowth();
+    void distributeToUsers();
+
+private:
+    TreasuryService() = default;
+    ~TreasuryService();
+    TreasuryService(const TreasuryService&) = delete;
+    TreasuryService& operator=(const TreasuryService&) = delete;
+
+    void checkAndRunTasks();
+
+    // Burn rate calculation helpers
+    double calculateBurnRate(int accountAgeDays);
+    int calculateAccountAgeDays(const std::string& createdAt);
+
+    std::atomic<bool> running_{false};
+    std::optional<trantor::TimerId> timerId_;
+
+    // Check every hour (3600 seconds)
+    std::chrono::seconds checkInterval_{3600};
+};
diff --git a/bot-sdk/examples/echo-bot.js b/bot-sdk/examples/echo-bot.js
new file mode 100644
index 0000000..4121b26
--- /dev/null
+++ b/bot-sdk/examples/echo-bot.js
@@ -0,0 +1,93 @@
+/**
+ * Echo Bot Example
+ *
+ * A simple bot that echoes back messages that start with "!echo"
+ *
+ * Usage:
+ *   node echo-bot.js <api-key> <server-url> <realm-id>
+ *
+ * Example:
+ *   node echo-bot.js abc123 wss://example.com/chat/ws my-realm
+ */
+
+import ChatBot from '../index.js';
+
+// Get arguments
+const [,, apiKey, serverUrl, realmId] = process.argv;
+
+if (!apiKey || !serverUrl || !realmId) {
+  console.log('Usage: node echo-bot.js <api-key> <server-url> <realm-id>');
+  console.log('Example: node echo-bot.js abc123 wss://example.com/chat/ws my-realm');
+  process.exit(1);
+}
+
+// Create the bot
+const bot = new ChatBot('EchoBot');
+
+// Set up message handler
+bot.messageHandler = (message) => {
+  console.log(`[${message.username}]: ${message.content}`);
+
+  // Echo back messages that start with !echo
+  if (message.content.startsWith('!echo ')) {
+    const echoText = message.content.slice(6);
+    bot.print(echoText);
+  }
+
+  // Respond to !hello
+  if (message.content === '!hello') {
+    bot.print(`Hello, ${message.username}!`);
+  }
+
+  // Show help
+  if (message.content === '!help') {
+    bot.print('Commands: !echo <text>, !hello, !help');
+  }
+};
+
+// Set up event handlers
+bot.onConnect = () => {
+  console.log('Bot connected!');
+};
+
+bot.onJoin = (room) => {
+  console.log(`Bot joined room: ${room}`);
+  bot.print('EchoBot is online! Type !help for commands.');
+};
+
+bot.onParticipantJoin = (participant) => {
+  console.log(`${participant.username} joined the chat`);
+};
+
+bot.onParticipantLeave = (participant) => {
+  console.log(`${participant.username} left the chat`);
+};
+
+bot.onError = (error) => {
+  console.error('Bot error:', error.message);
+};
+
+// Connect and join
+async function main() {
+  try {
+    console.log(`Connecting to ${serverUrl}...`);
+    await bot.connect(apiKey, serverUrl);
+
+    console.log(`Joining room: ${realmId}...`);
+    await bot.joinRoom(realmId);
+
+    console.log('Bot is running. Press Ctrl+C to stop.');
+  } catch (error) {
+    console.error('Failed to start bot:', error.message);
+    process.exit(1);
+  }
+}
+
+// Handle shutdown
+process.on('SIGINT', () => {
+  console.log('\nShutting down bot...');
+  bot.disconnect();
+  process.exit(0);
+});
+
+main();
diff --git a/bot-sdk/examples/trivia-bot.js b/bot-sdk/examples/trivia-bot.js
new file mode 100644
index 0000000..1256c54
--- /dev/null
+++ b/bot-sdk/examples/trivia-bot.js
@@ -0,0 +1,221 @@
+/**
+ * Trivia Bot Example
+ *
+ * A bot that runs trivia games in chat
+ *
+ * Usage:
+ *   node trivia-bot.js <api-key> <server-url> <realm-id>
+ *
+ * Commands:
+ *   !trivia start - Start a new trivia game
+ *   !trivia stop - Stop the current game
+ *   !trivia score - Show current scores
+ *   !answer <answer> - Submit an answer
+ */
+
+import ChatBot from '../index.js';
+
+// Get arguments
+const [,, apiKey, serverUrl, realmId] = process.argv;
+
+if (!apiKey || !serverUrl || !realmId) {
+  console.log('Usage: node trivia-bot.js <api-key> <server-url> <realm-id>');
+  process.exit(1);
+}
+
+// Trivia questions
+const questions = [
+  { question: "What planet is known as the Red Planet?", answer: "mars" },
+  { question: "What is the largest mammal in the world?", answer: "blue whale" },
+  { question: "In what year did the Titanic sink?", answer: "1912" },
+  { question: "What is the chemical symbol for gold?", answer: "au" },
+  { question: "Who painted the Mona Lisa?", answer: "leonardo da vinci" },
+  { question: "What is the capital of Japan?", answer: "tokyo" },
+  { question: "How many sides does a hexagon have?", answer: "6" },
+  { question: "What is the smallest prime number?", answer: "2" },
+  { question: "What element does 'O' represent on the periodic table?", answer: "oxygen" },
+  { question: "In what year did World War II end?", answer: "1945" },
+  { question: "What is the largest organ in the human body?", answer: "skin" },
+  { question: "Who wrote Romeo and Juliet?", answer: "shakespeare" },
+  { question: "What is the speed of light in km/s (approximately)?", answer: "300000" },
+  { question: "What is the tallest mountain in the world?", answer: "everest" },
+  { question: "What gas do plants absorb from the atmosphere?", answer: "carbon dioxide" }
+];
+
+// Game state
+let gameActive = false;
+let currentQuestion = null;
+let questionIndex = 0;
+let scores = {};
+let questionTimeout = null;
+let usedQuestions = [];
+
+// Create the bot
+const bot = new ChatBot('TriviaBot');
+
+function shuffleArray(array) {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
+
+function getNextQuestion() {
+  if (usedQuestions.length === questions.length) {
+    usedQuestions = [];
+  }
+
+  const available = questions.filter((_, i) => !usedQuestions.includes(i));
+  const randomIndex = Math.floor(Math.random() * available.length);
+  const originalIndex = questions.indexOf(available[randomIndex]);
+  usedQuestions.push(originalIndex);
+
+  return available[randomIndex];
+}
+
+function askQuestion() {
+  if (!gameActive) return;
+
+  currentQuestion = getNextQuestion();
+  questionIndex++;
+
+  bot.print(`Question #${questionIndex}: ${currentQuestion.question}`);
+
+  // Set timeout for unanswered question
+  questionTimeout = setTimeout(() => {
+    if (currentQuestion) {
+      bot.print(`Time's up! The answer was: ${currentQuestion.answer}`);
+      currentQuestion = null;
+
+      // Ask next question after delay
+      setTimeout(() => {
+        if (gameActive) askQuestion();
+      }, 3000);
+    }
+  }, 30000); // 30 seconds to answer
+}
+
+function checkAnswer(username, answer) {
+  if (!currentQuestion) return;
+
+  const normalizedAnswer = answer.toLowerCase().trim();
+  const correctAnswer = currentQuestion.answer.toLowerCase().trim();
+
+  if (normalizedAnswer === correctAnswer || normalizedAnswer.includes(correctAnswer) || correctAnswer.includes(normalizedAnswer)) {
+    clearTimeout(questionTimeout);
+
+    // Award points
+    if (!scores[username]) scores[username] = 0;
+    scores[username]++;
+
+    bot.print(`Correct! ${username} got it right! (+1 point, total: ${scores[username]})`);
+    currentQuestion = null;
+
+    // Ask next question after delay
+    setTimeout(() => {
+      if (gameActive) askQuestion();
+    }, 3000);
+  }
+}
+
+function showScores() {
+  const sortedScores = Object.entries(scores)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 10);
+
+  if (sortedScores.length === 0) {
+    bot.print('No scores yet!');
+    return;
+  }
+
+  let scoreText = 'Leaderboard: ';
+  sortedScores.forEach(([user, score], i) => {
+    scoreText += `${i + 1}. ${user}: ${score} pts | `;
+  });
+
+  bot.print(scoreText.slice(0, -3));
+}
+
+function startGame() {
+  if (gameActive) {
+    bot.print('A game is already in progress!');
+    return;
+  }
+
+  gameActive = true;
+  questionIndex = 0;
+  bot.print('Trivia game starting! Answer with "!answer <your answer>". You have 30 seconds per question.');
+
+  setTimeout(() => {
+    askQuestion();
+  }, 2000);
+}
+
+function stopGame() {
+  if (!gameActive) {
+    bot.print('No game is currently running.');
+    return;
+  }
+
+  gameActive = false;
+  currentQuestion = null;
+  clearTimeout(questionTimeout);
+
+  bot.print('Trivia game stopped!');
+  showScores();
+}
+
+// Set up message handler
+bot.messageHandler = (message) => {
+  const content = message.content.trim().toLowerCase();
+
+  if (content === '!trivia start') {
+    startGame();
+  } else if (content === '!trivia stop') {
+    stopGame();
+  } else if (content === '!trivia score' || content === '!trivia scores') {
+    showScores();
+  } else if (content === '!trivia help') {
+    bot.print('Commands: !trivia start, !trivia stop, !trivia score, !answer <answer>');
+  } else if (content.startsWith('!answer ')) {
+    const answer = message.content.slice(8);
+    checkAnswer(message.username, answer);
+  }
+};
+
+// Set up event handlers
+bot.onJoin = () => {
+  bot.print('TriviaBot is online! Type "!trivia start" to begin a game.');
+};
+
+bot.onError = (error) => {
+  console.error('Bot error:', error.message);
+};
+
+// Connect and join
+async function main() {
+  try {
+    console.log(`Connecting to ${serverUrl}...`);
+    await bot.connect(apiKey, serverUrl);
+
+    console.log(`Joining room: ${realmId}...`);
+    await bot.joinRoom(realmId);
+
+    console.log('TriviaBot is running. Press Ctrl+C to stop.');
+  } catch (error) {
+    console.error('Failed to start bot:', error.message);
+    process.exit(1);
+  }
+}
+
+// Handle shutdown
+process.on('SIGINT', () => {
+  console.log('\nShutting down bot...');
+  if (gameActive) stopGame();
+  bot.disconnect();
+  process.exit(0);
+});
+
+main();
diff --git a/bot-sdk/index.js b/bot-sdk/index.js
new file mode 100644
index 0000000..9181b40
--- /dev/null
+++ b/bot-sdk/index.js
@@ -0,0 +1,369 @@
+import WebSocket from 'ws';
+
+/**
+ * ChatBot - A simple bot SDK for Realms chat
+ *
+ * Mirrors the existing XMPP bot API for easy migration.
+ *
+ * @example
+ * const bot = new ChatBot('MyBot');
+ *
+ * bot.messageHandler = (message) => {
+ *   console.log(`${message.username}: ${message.content}`);
+ *   if (message.content === '!hello') {
+ *     bot.print('Hello there!');
+ *   }
+ * };
+ *
+ * bot.connect('your-api-key', 'wss://example.com/chat/ws')
+ *   .then(() => bot.joinRoom('realm-id'))
+ *   .catch(console.error);
+ */
+class ChatBot {
+  /**
+   * Create a new ChatBot instance
+   * @param {string} name - Display name for the bot (informational only, actual name comes from API key owner)
+   */
+  constructor(name) {
+    this.name = name;
+    this.ws = null;
+    this.apiKey = null;
+    this.serverUrl = null;
+    this.realmId = null;
+    this.connected = false;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectDelay = 1000;
+    this.shouldReconnect = true;
+
+    // Event handlers
+    this.messageHandler = null;
+    this.onConnect = null;
+    this.onDisconnect = null;
+    this.onError = null;
+    this.onJoin = null;
+    this.onParticipantJoin = null;
+    this.onParticipantLeave = null;
+  }
+
+  /**
+   * Connect to the chat server
+   * @param {string} apiKey - Your bot API key from the Settings page
+   * @param {string} serverUrl - WebSocket server URL (e.g., 'wss://example.com/chat/ws')
+   * @returns {Promise<void>}
+   */
+  connect(apiKey, serverUrl) {
+    return new Promise((resolve, reject) => {
+      this.apiKey = apiKey;
+      this.serverUrl = serverUrl;
+      this.shouldReconnect = true;
+
+      // SECURITY FIX: Don't put API key in URL (it gets logged by servers/proxies)
+      // Instead, send auth message after connection opens
+      this.ws = new WebSocket(serverUrl);
+
+      // Store resolve/reject for when we get the welcome message
+      this._connectResolve = resolve;
+      this._connectReject = reject;
+
+      this.ws.on('open', () => {
+        console.log(`[${this.name}] Connected to server, authenticating...`);
+        // SECURITY FIX: Send API key via message instead of URL
+        this._send({ type: 'auth', apiKey: apiKey });
+        // Don't resolve yet - wait for welcome message after API key validation
+      });
+
+      this.ws.on('message', (data) => {
+        try {
+          const message = JSON.parse(data.toString());
+          this._handleMessage(message);
+        } catch (e) {
+          console.error(`[${this.name}] Failed to parse message:`, e);
+        }
+      });
+
+      this.ws.on('close', () => {
+        console.log(`[${this.name}] Connection closed`);
+        this.connected = false;
+
+        if (this.onDisconnect) {
+          this.onDisconnect();
+        }
+
+        if (this.shouldReconnect && this.reconnectAttempts < this.maxReconnectAttempts) {
+          this._attemptReconnect();
+        }
+      });
+
+      this.ws.on('error', (error) => {
+        console.error(`[${this.name}] WebSocket error:`, error.message);
+
+        if (this.onError) {
+          this.onError(error);
+        }
+
+        if (this._connectReject) {
+          this._connectReject(error);
+          this._connectResolve = null;
+          this._connectReject = null;
+        }
+      });
+
+      // Timeout for connection/authentication
+      setTimeout(() => {
+        if (this._connectResolve) {
+          this._connectReject(new Error('Connection timeout - no welcome message received'));
+          this._connectResolve = null;
+          this._connectReject = null;
+        }
+      }, 15000);
+    });
+  }
+
+  /**
+   * Disconnect from the chat server
+   */
+  disconnect() {
+    this.shouldReconnect = false;
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    this.connected = false;
+    console.log(`[${this.name}] Disconnected`);
+  }
+
+  /**
+   * Join a chat room (realm)
+   * @param {string} realmId - The realm ID to join
+   * @returns {Promise<void>}
+   */
+  joinRoom(realmId) {
+    return new Promise((resolve, reject) => {
+      if (!this.connected) {
+        reject(new Error('Not connected to server'));
+        return;
+      }
+
+      this.realmId = realmId;
+
+      // Store resolve/reject for when we get the join response
+      this._joinResolve = resolve;
+      this._joinReject = reject;
+
+      this._send({
+        type: 'join',
+        realmId: realmId
+      });
+
+      // Timeout after 10 seconds
+      setTimeout(() => {
+        if (this._joinResolve) {
+          this._joinReject(new Error('Join timeout'));
+          this._joinResolve = null;
+          this._joinReject = null;
+        }
+      }, 10000);
+    });
+  }
+
+  /**
+   * Send a message to the current room
+   * @param {string} message - The message to send
+   */
+  print(message) {
+    if (!this.connected || !this.realmId) {
+      console.error(`[${this.name}] Cannot send message: not connected or not in a room`);
+      return;
+    }
+
+    this._send({
+      type: 'message',
+      content: message
+    });
+  }
+
+  /**
+   * Get the list of participants in the current room
+   * @returns {Promise<Array>}
+   */
+  getParticipants() {
+    return new Promise((resolve, reject) => {
+      if (!this.connected || !this.realmId) {
+        reject(new Error('Not connected or not in a room'));
+        return;
+      }
+
+      this._participantsResolve = resolve;
+      this._participantsReject = reject;
+
+      this._send({
+        type: 'get_participants'
+      });
+
+      setTimeout(() => {
+        if (this._participantsResolve) {
+          this._participantsReject(new Error('Get participants timeout'));
+          this._participantsResolve = null;
+          this._participantsReject = null;
+        }
+      }, 10000);
+    });
+  }
+
+  /**
+   * Internal: Send a message over WebSocket
+   * @private
+   */
+  _send(data) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data));
+    }
+  }
+
+  /**
+   * Internal: Handle incoming messages
+   * @private
+   */
+  _handleMessage(msg) {
+    switch (msg.type) {
+      case 'welcome':
+        // Authentication successful - connection is ready
+        console.log(`[${this.name}] Authenticated as: ${msg.username}`);
+        this.connected = true;
+        this.reconnectAttempts = 0;
+        this.username = msg.username;
+        this.userId = msg.userId;
+
+        if (this._connectResolve) {
+          this._connectResolve();
+          this._connectResolve = null;
+          this._connectReject = null;
+        }
+
+        if (this.onConnect) {
+          this.onConnect();
+        }
+        break;
+
+      case 'message':
+      case 'new_message':
+        // Chat message from a user
+        if (this.messageHandler && msg.content) {
+          this.messageHandler({
+            userId: msg.userId,
+            username: msg.username,
+            content: msg.content,
+            timestamp: msg.timestamp,
+            userColor: msg.userColor,
+            avatarUrl: msg.avatarUrl,
+            isGuest: msg.isGuest,
+            isModerator: msg.isModerator,
+            isStreamer: msg.isStreamer
+          });
+        }
+        break;
+
+      case 'message_deleted':
+        // Message was deleted by a moderator - bots can ignore this
+        break;
+
+      case 'history':
+        // Chat history - bots can ignore this
+        break;
+
+      case 'join_success':
+        console.log(`[${this.name}] Joined room: ${this.realmId}`);
+        if (this._joinResolve) {
+          this._joinResolve();
+          this._joinResolve = null;
+          this._joinReject = null;
+        }
+        if (this.onJoin) {
+          this.onJoin(this.realmId);
+        }
+        break;
+
+      case 'error':
+        console.error(`[${this.name}] Server error:`, msg.error);
+
+        // If we're still connecting and get an error, reject the connect promise
+        if (this._connectReject) {
+          this._connectReject(new Error(msg.error));
+          this._connectResolve = null;
+          this._connectReject = null;
+        }
+
+        if (this._joinReject && msg.error.includes('join')) {
+          this._joinReject(new Error(msg.error));
+          this._joinResolve = null;
+          this._joinReject = null;
+        }
+        if (this.onError) {
+          this.onError(new Error(msg.error));
+        }
+        break;
+
+      case 'participant_joined':
+        if (this.onParticipantJoin) {
+          this.onParticipantJoin({
+            userId: msg.userId,
+            username: msg.username,
+            isGuest: msg.isGuest
+          });
+        }
+        break;
+
+      case 'participant_left':
+        if (this.onParticipantLeave) {
+          this.onParticipantLeave({
+            userId: msg.userId,
+            username: msg.username
+          });
+        }
+        break;
+
+      case 'participants':
+        if (this._participantsResolve) {
+          this._participantsResolve(msg.participants || []);
+          this._participantsResolve = null;
+          this._participantsReject = null;
+        }
+        break;
+
+      case 'system':
+        // System messages (user joined, left, etc.)
+        console.log(`[${this.name}] System: ${msg.content}`);
+        break;
+
+      default:
+        // Unknown message type, ignore
+        break;
+    }
+  }
+
+  /**
+   * Internal: Attempt to reconnect
+   * @private
+   */
+  _attemptReconnect() {
+    this.reconnectAttempts++;
+    const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+
+    console.log(`[${this.name}] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+
+    setTimeout(async () => {
+      try {
+        await this.connect(this.apiKey, this.serverUrl);
+        if (this.realmId) {
+          await this.joinRoom(this.realmId);
+        }
+      } catch (e) {
+        console.error(`[${this.name}] Reconnect failed:`, e.message);
+      }
+    }, delay);
+  }
+}
+
+export default ChatBot;
+export { ChatBot };
diff --git a/bot-sdk/package.json b/bot-sdk/package.json
new file mode 100644
index 0000000..18c45d4
--- /dev/null
+++ b/bot-sdk/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "realms-bot-sdk",
+  "version": "1.0.0",
+  "description": "Bot SDK for Realms chat",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "node examples/echo-bot.js"
+  },
+  "keywords": [
+    "realms",
+    "chat",
+    "bot",
+    "websocket"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "ws": "^8.18.0"
+  }
+}
diff --git a/chat-service/.dockerignore b/chat-service/.dockerignore
new file mode 100644
index 0000000..039e38b
--- /dev/null
+++ b/chat-service/.dockerignore
@@ -0,0 +1,7 @@
+build/
+.git/
+.gitignore
+*.md
+.vscode/
+.idea/
+*.log
diff --git a/chat-service/CMakeLists.txt b/chat-service/CMakeLists.txt
new file mode 100644
index 0000000..57da79f
--- /dev/null
+++ b/chat-service/CMakeLists.txt
@@ -0,0 +1,55 @@
+cmake_minimum_required(VERSION 3.15)
+project(chat_service CXX)
+
+set(CMAKE_CXX_STANDARD 20)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_CXX_EXTENSIONS OFF)
+
+# Find required packages
+find_package(Drogon CONFIG REQUIRED)
+find_package(PkgConfig REQUIRED)
+pkg_check_modules(JSONCPP REQUIRED jsoncpp)
+
+# Source files
+set(SOURCES
+    src/main.cpp
+    src/controllers/ChatController.cpp
+    src/controllers/ChatWebSocketController.cpp
+    src/controllers/ModerationController.cpp
+    src/controllers/ChatAdminController.cpp
+    src/controllers/WatchSyncController.cpp
+    src/services/ChatService.cpp
+    src/services/RedisMessageStore.cpp
+    src/services/AuthService.cpp
+    src/services/ModerationService.cpp
+    src/services/StickerService.cpp
+    src/services/CensorService.cpp
+    src/middleware/ChatAuthMiddleware.cpp
+)
+
+# Create executable
+add_executable(${PROJECT_NAME} ${SOURCES})
+
+# Link libraries
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Drogon::Drogon
+    hiredis
+    redis++
+    ${JSONCPP_LIBRARIES}
+    ssl
+    crypto
+    z
+    uuid
+    pthread
+)
+
+# Include directories
+target_include_directories(${PROJECT_NAME} PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/src
+    ${JSONCPP_INCLUDE_DIRS}
+)
+
+# Set output directory
+set_target_properties(${PROJECT_NAME} PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin
+)
diff --git a/chat-service/Dockerfile b/chat-service/Dockerfile
new file mode 100644
index 0000000..ded300e
--- /dev/null
+++ b/chat-service/Dockerfile
@@ -0,0 +1,87 @@
+FROM drogonframework/drogon:latest
+
+WORKDIR /app
+
+# Install additional dependencies
+RUN apt-get update && apt-get install -y \
+    pkg-config \
+    git \
+    cmake \
+    libhiredis-dev \
+    curl \
+    libssl-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Try to install redis-plus-plus from package manager first
+RUN apt-get update && \
+    (apt-get install -y libredis++-dev || echo "Package not available") && \
+    rm -rf /var/lib/apt/lists/*
+
+# If redis-plus-plus wasn't available from package manager, build from source
+RUN if ! pkg-config --exists redis++; then \
+        echo "Building redis-plus-plus from source..." && \
+        git clone --depth 1 https://github.com/sewenew/redis-plus-plus.git && \
+        cd redis-plus-plus && \
+        mkdir build && \
+        cd build && \
+        cmake -DCMAKE_BUILD_TYPE=Release \
+              -DREDIS_PLUS_PLUS_CXX_STANDARD=17 \
+              -DREDIS_PLUS_PLUS_BUILD_TEST=OFF \
+              -DREDIS_PLUS_PLUS_BUILD_STATIC=OFF \
+              -DCMAKE_INSTALL_PREFIX=/usr/local .. && \
+        make -j$(nproc) && \
+        make install && \
+        cd ../.. && \
+        rm -rf redis-plus-plus; \
+    fi
+
+# Install jwt-cpp (header-only library)
+RUN git clone --depth 1 https://github.com/Thalhammer/jwt-cpp.git && \
+    cd jwt-cpp && \
+    mkdir build && \
+    cd build && \
+    cmake .. && \
+    make install && \
+    cd ../.. && \
+    rm -rf jwt-cpp
+
+# Update library cache
+RUN ldconfig
+
+# Copy source code
+COPY CMakeLists.txt ./
+COPY src/ src/
+
+# Clean any previous build
+RUN rm -rf build CMakeCache.txt
+
+# Create build directory
+RUN mkdir -p build
+
+# Build the chat service
+RUN cd build && \
+    cmake .. -DCMAKE_BUILD_TYPE=Release \
+             -DCMAKE_INSTALL_RPATH="/usr/local/lib" \
+             -DCMAKE_BUILD_WITH_INSTALL_RPATH=TRUE && \
+    cmake --build . -j$(nproc)
+
+# Copy configuration
+COPY config.json .
+
+# Expose port
+EXPOSE 8081
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=40s \
+    CMD curl -f http://localhost:8081/api/chat/health 2>/dev/null || exit 1
+
+# Create startup script
+RUN echo '#!/bin/bash\n\
+echo "Checking library dependencies..."\n\
+ldd ./build/bin/chat_service\n\
+echo "Starting chat service..."\n\
+exec ./build/bin/chat_service' > start.sh && \
+    chmod +x start.sh
+
+# Run the service
+CMD ["./start.sh"]
diff --git a/chat-service/README.md b/chat-service/README.md
new file mode 100644
index 0000000..f246feb
--- /dev/null
+++ b/chat-service/README.md
@@ -0,0 +1,331 @@
+# Chat Service for realms.india
+
+A scalable, real-time chat service built with Drogon C++ framework and Redis for the realms.india streaming platform.
+
+## Features
+
+- **Real-time WebSocket Communication** - Instant message delivery
+- **Guest Chat Support** - Anonymous users with configurable naming patterns
+- **Redis-Based Storage** - Fast, in-memory message storage with configurable retention
+- **Moderation Tools** - Ban, mute, timeout, and message deletion
+- **Slow Mode** - Per-realm rate limiting
+- **Links Filtering** - Configurable link permission per realm
+- **Global/Local Channels** - Multi-channel support
+- **User Color Preservation** - Registered users maintain their platform colors
+- **Auto-cleanup** - Periodic message cleanup based on retention settings
+
+## Architecture
+
+### Components
+
+1. **Chat Service (Port 8081)** - Drogon-based C++ backend
+   - WebSocket server for real-time communication
+   - REST API for settings and moderation
+   - Redis integration for message storage
+
+2. **Redis Database 1** - Message and moderation data
+   - Messages (sorted sets per realm)
+   - Ban/mute lists
+   - Chat settings
+   - Slow mode tracking
+
+3. **PostgreSQL** - Persistent settings
+   - Realm chat configurations
+   - Chat moderators
+   - Global chat settings
+
+### Data Flow
+
+```
+Frontend (SvelteKit)
+    ↓ WebSocket
+OpenResty (Proxy)
+    ↓ /chat/*
+Chat Service (Drogon)
+    ↓
+Redis (Messages) + PostgreSQL (Settings)
+```
+
+## API Endpoints
+
+### WebSocket
+
+**Connect:** `ws://host/chat/stream/{realmId}?token=<jwt>`
+
+**Client → Server Messages:**
+```json
+{
+  "type": "message",
+  "content": "Hello world!",
+  "userColor": "#FF5733"
+}
+
+{
+  "type": "join",
+  "realmId": "realm-uuid"
+}
+
+{
+  "type": "mod_action",
+  "action": "ban|mute|timeout|delete",
+  "targetUserId": "user-uuid",
+  "messageId": "message-uuid",
+  "duration": 300,
+  "reason": "Spam"
+}
+```
+
+**Server → Client Messages:**
+```json
+{
+  "type": "welcome",
+  "username": "guest1234",
+  "userId": "guest:guest1234",
+  "isGuest": true,
+  "isModerator": false,
+  "realmId": "realm-uuid"
+}
+
+{
+  "type": "history",
+  "messages": [...]
+}
+
+{
+  "type": "new_message",
+  "messageId": "uuid",
+  "username": "user",
+  "content": "Hello!",
+  ...
+}
+
+{
+  "type": "message_deleted",
+  "messageId": "uuid"
+}
+
+{
+  "type": "error",
+  "error": "You are muted"
+}
+```
+
+### REST API
+
+#### Messages
+- `GET /api/chat/messages/:realmId?limit=100&before=<timestamp>` - Get messages
+- `POST /api/chat/send` - Send message (alternative to WebSocket)
+- `DELETE /api/chat/message/:messageId?realmId=<id>` - Delete message
+
+#### Settings
+- `GET /api/chat/settings/:realmId` - Get realm chat settings
+- `PUT /api/chat/settings/:realmId` - Update realm settings (moderator only)
+
+#### Moderation
+- `POST /api/chat/ban` - Ban user from realm
+- `POST /api/chat/unban` - Unban user
+- `POST /api/chat/mute` - Mute user (temporary)
+- `POST /api/chat/unmute` - Unmute user
+- `POST /api/chat/timeout` - Timeout user (short-term mute)
+- `GET /api/chat/banned/:realmId` - List banned users
+
+#### Admin
+- `GET /api/chat/admin/settings` - Get global settings
+- `PUT /api/chat/admin/settings` - Update global settings
+- `GET /api/chat/admin/stats` - Get chat statistics
+
+## Configuration
+
+### chat-service/config.json
+
+```json
+{
+  "redis": {
+    "host": "redis",
+    "port": 6379,
+    "db": 1
+  },
+  "chat": {
+    "default_retention_hours": 24,
+    "max_message_length": 500,
+    "max_messages_per_realm": 1000,
+    "guest_prefix": "guest",
+    "guest_id_pattern": "{prefix}{number}",
+    "cleanup_interval_seconds": 300
+  }
+}
+```
+
+### Guest ID Patterns
+
+Customize guest usernames with placeholders:
+- `{prefix}` - Guest prefix (configurable)
+- `{number}` - Auto-incrementing number
+- `{random}` - Random 4-digit hex
+
+Examples:
+- `{prefix}{number}` → guest1, guest2, guest3...
+- `anon{random}` → anon4a7f, anonb2c9...
+- `friend_{number}` → friend_1, friend_2...
+
+## Realm Settings
+
+Customize chat behavior per realm (stored in PostgreSQL `realms` table):
+
+- `chat_retention_hours` (default: 24) - How long to keep messages
+- `chat_slow_mode_seconds` (default: 0) - Minimum seconds between messages
+- `chat_links_allowed` (default: true) - Allow URLs in messages
+- `chat_subscribers_only` (default: false) - Restrict chat to subscribers
+
+## Moderation
+
+### Moderators
+
+- Realm creators are auto-moderators
+- Admins are moderators everywhere
+- Additional moderators stored in `chat_moderators` table
+
+### Actions
+
+1. **Ban** - Permanent, prevents all messages
+2. **Mute** - Temporary silence (duration in seconds)
+3. **Timeout** - Short-term mute (typically 60s)
+4. **Delete Message** - Remove specific message
+
+## Redis Schema
+
+```
+# Messages (sorted set, score = timestamp)
+chat:messages:{realmId} → [{message JSON}, ...]
+
+# Global settings
+chat:settings:global → {guestPrefix, guestIdPattern, defaultRetentionHours}
+
+# Realm settings
+chat:settings:realm:{realmId} → {retentionHours, slowModeSeconds, ...}
+
+# Bans (set)
+chat:banned:{realmId} → {userId1, userId2, ...}
+
+# Mutes (string with TTL)
+chat:muted:{realmId}:{userId} → "1"
+
+# Slow mode tracking (string with TTL)
+chat:slowmode:{realmId}:{userId} → "1"
+
+# Active users (sorted set, score = last seen)
+chat:active:{realmId} → {userId: timestamp}
+
+# Guest counter
+chat:guest:counter → integer
+```
+
+## Building
+
+### Prerequisites
+- CMake 3.15+
+- C++20 compiler (GCC 10+ or Clang 12+)
+- Conan package manager
+- Docker (for containerized build)
+
+### Local Build
+
+```bash
+cd chat-service
+
+# Install dependencies
+conan install . --output-folder=build --build=missing -s compiler.cppstd=20
+
+# Build
+cd build
+cmake .. -DCMAKE_TOOLCHAIN_FILE=conan_toolchain.cmake -DCMAKE_BUILD_TYPE=Release
+cmake --build . -j$(nproc)
+
+# Run
+./bin/chat_service
+```
+
+### Docker Build
+
+```bash
+cd chat-service
+docker build -t chat-service .
+docker run -p 8081:8081 \
+  -e JWT_SECRET=your-secret \
+  -e REDIS_HOST=redis \
+  chat-service
+```
+
+## Deployment
+
+The chat service is automatically included in the main docker-compose.yml:
+
+```bash
+docker-compose up -d chat-service
+```
+
+## Frontend Integration
+
+### Basic Chat Panel
+
+```svelte
+<script>
+  import ChatPanel from '$lib/components/chat/ChatPanel.svelte';
+  export let realmId;
+  export let userColor = '#FFFFFF';
+</script>
+
+<ChatPanel {realmId} {userColor} />
+```
+
+### Pseudo-Terminal (~ key activation)
+
+```svelte
+<script>
+  import ChatTerminal from '$lib/components/chat/ChatTerminal.svelte';
+</script>
+
+<ChatTerminal defaultRealmId="realm-uuid" />
+```
+
+Add to your root layout to make it globally available.
+
+## Security
+
+- **JWT Authentication** - Required for registered users
+- **Rate Limiting** - 20 messages/second per IP at proxy level
+- **Content Validation** - Length limits, XSS prevention
+- **Moderator Checks** - Permission validation for all mod actions
+- **CORS** - Restricted to localhost origins in development
+
+## Performance
+
+- **WebSocket** - Persistent connections, minimal overhead
+- **Redis** - Sub-millisecond message retrieval
+- **Auto-cleanup** - Configurable retention to manage memory
+- **Message Cap** - Max 1000 messages per realm (configurable)
+
+## Monitoring
+
+Check service health:
+```bash
+curl http://localhost:8081/api/chat/admin/settings
+```
+
+View logs:
+```bash
+docker logs realms-chat-service
+```
+
+## Future Enhancements
+
+- [ ] Emoji support
+- [ ] Message reactions
+- [ ] Thread/reply support
+- [ ] User mentions (@username)
+- [ ] Rich media embeds
+- [ ] Chat commands (/me, /shrug, etc.)
+- [ ] Message search
+- [ ] Whispers/DMs
+- [ ] Channel creation (beyond realms)
+- [ ] Chatbot integration hooks
diff --git a/chat-service/conanfile.txt b/chat-service/conanfile.txt
new file mode 100644
index 0000000..f68a8d7
--- /dev/null
+++ b/chat-service/conanfile.txt
@@ -0,0 +1,14 @@
+[requires]
+drogon/1.9.3
+hiredis/1.2.0
+redis-plus-plus/1.3.12
+jwt-cpp/0.7.0
+
+[generators]
+CMakeDeps
+CMakeToolchain
+
+[options]
+drogon/*:shared=False
+drogon/*:with_postgres=False
+drogon/*:with_redis=False
diff --git a/chat-service/config.json b/chat-service/config.json
new file mode 100644
index 0000000..4c366f7
--- /dev/null
+++ b/chat-service/config.json
@@ -0,0 +1,49 @@
+{
+  "app": {
+    "threads_num": 4,
+    "enable_session": false,
+    "session_timeout": 0,
+    "document_root": "./",
+    "max_connections": 10000,
+    "max_connections_per_ip": 100,
+    "load_config_file": true,
+    "run_as_daemon": false,
+    "log_path": "",
+    "log_level": "INFO",
+    "log_size_limit": 100000000,
+    "load_libs": [],
+    "use_sendfile": true,
+    "use_gzip": true,
+    "static_files_cache_time": 0,
+    "load_config_in_advance": true,
+    "log_access": true
+  },
+  "listeners": [
+    {
+      "address": "0.0.0.0",
+      "port": 8081,
+      "https": false
+    }
+  ],
+  "redis": {
+    "host": "${REDIS_HOST}",
+    "port": 6379,
+    "db": 1,
+    "timeout": 5
+  },
+  "jwt": {
+    "secret": "${JWT_SECRET}"
+  },
+  "chat": {
+    "default_retention_hours": 24,
+    "max_message_length": 500,
+    "max_messages_per_realm": 1000,
+    "guest_prefix": "guest",
+    "guest_id_pattern": "{prefix}{number}",
+    "cleanup_interval_seconds": 300
+  },
+  "backend_api": {
+    "host": "drogon-backend",
+    "port": 8080
+  }
+}
diff --git a/chat-service/src/controllers/ChatAdminController.cpp b/chat-service/src/controllers/ChatAdminController.cpp
new file mode 100644
index 0000000..106d8ca
--- /dev/null
+++ b/chat-service/src/controllers/ChatAdminController.cpp
@@ -0,0 +1,129 @@
+#include "ChatAdminController.h"
+#include "../services/ChatService.h"
+#include "../services/AuthService.h"
+#include "../services/RedisMessageStore.h"
+#include "../services/StickerService.h"
+#include "../services/CensorService.h"
+#include <json/json.h>
+
+void ChatAdminController::getGlobalSettings(const HttpRequestPtr& req,
+                                              std::function<void(const HttpResponsePtr&)>&& callback) {
+    // Verify admin
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !claims->isAdmin) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& chatService = services::ChatService::getInstance();
+    auto settings = chatService.getGlobalSettings();
+
+    auto resp = HttpResponse::newHttpJsonResponse(settings.toJson());
+    callback(resp);
+}
+
+void ChatAdminController::updateGlobalSettings(const HttpRequestPtr& req,
+                                                 std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    // Verify admin
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !claims->isAdmin) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto settings = models::GlobalChatSettings::fromJson(*jsonPtr);
+
+    auto& chatService = services::ChatService::getInstance();
+    bool success = chatService.updateGlobalSettings(settings);
+
+    Json::Value response;
+    response["success"] = success;
+    response["settings"] = settings.toJson();
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ChatAdminController::getStats(const HttpRequestPtr& req,
+                                     std::function<void(const HttpResponsePtr&)>&& callback) {
+    // Verify admin
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !claims->isAdmin) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    // TODO: Collect comprehensive chat statistics
+    Json::Value stats;
+    stats["totalMessages"] = 0;
+    stats["activeConnections"] = 0;
+    stats["totalRealms"] = 0;
+
+    auto resp = HttpResponse::newHttpJsonResponse(stats);
+    callback(resp);
+}
+
+void ChatAdminController::refreshStickers(const HttpRequestPtr& req,
+                                          std::function<void(const HttpResponsePtr&)>&& callback) {
+    // Internal endpoint called by backend after sticker modifications
+    // No auth required - only accessible within Docker network
+    LOG_INFO << "Sticker cache refresh requested";
+
+    auto& stickerService = services::StickerService::getInstance();
+    stickerService.refreshCache();
+
+    Json::Value response;
+    response["success"] = true;
+    response["message"] = "Sticker cache refresh initiated";
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ChatAdminController::refreshCensoredWords(const HttpRequestPtr& req,
+                                               std::function<void(const HttpResponsePtr&)>&& callback) {
+    // Internal endpoint called by backend after censored words modifications
+    // No auth required - only accessible within Docker network
+    LOG_INFO << "Censored words cache refresh requested";
+
+    auto& censorService = services::CensorService::getInstance();
+    censorService.invalidateCache();
+
+    Json::Value response;
+    response["success"] = true;
+    response["message"] = "Censored words cache refresh initiated";
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
diff --git a/chat-service/src/controllers/ChatAdminController.h b/chat-service/src/controllers/ChatAdminController.h
new file mode 100644
index 0000000..f8786fc
--- /dev/null
+++ b/chat-service/src/controllers/ChatAdminController.h
@@ -0,0 +1,21 @@
+#pragma once
+#include <drogon/HttpController.h>
+
+using namespace drogon;
+
+class ChatAdminController : public drogon::HttpController<ChatAdminController> {
+public:
+    METHOD_LIST_BEGIN
+    ADD_METHOD_TO(ChatAdminController::getGlobalSettings, "/api/chat/admin/settings", Get);
+    ADD_METHOD_TO(ChatAdminController::updateGlobalSettings, "/api/chat/admin/settings", Put);
+    ADD_METHOD_TO(ChatAdminController::getStats, "/api/chat/admin/stats", Get);
+    ADD_METHOD_TO(ChatAdminController::refreshStickers, "/api/chat/admin/stickers/refresh", Post);
+    ADD_METHOD_TO(ChatAdminController::refreshCensoredWords, "/api/chat/admin/censored-words/refresh", Post);
+    METHOD_LIST_END
+
+    void getGlobalSettings(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void updateGlobalSettings(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void getStats(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void refreshStickers(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void refreshCensoredWords(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+};
diff --git a/chat-service/src/controllers/ChatController.cpp b/chat-service/src/controllers/ChatController.cpp
new file mode 100644
index 0000000..9ab05f2
--- /dev/null
+++ b/chat-service/src/controllers/ChatController.cpp
@@ -0,0 +1,184 @@
+#include "ChatController.h"
+#include "ChatWebSocketController.h"
+#include "../services/ChatService.h"
+#include "../services/AuthService.h"
+#include <json/json.h>
+
+void ChatController::getMessages(const HttpRequestPtr& req,
+                                  std::function<void(const HttpResponsePtr&)>&& callback,
+                                  const std::string& realmId) {
+    auto& chatService = services::ChatService::getInstance();
+
+    auto limitParam = req->getParameter("limit");
+    int limit = limitParam.empty() ? 100 : std::stoi(limitParam);
+
+    auto beforeParam = req->getParameter("before");
+    int64_t before = beforeParam.empty() ? 0 : std::stoll(beforeParam);
+
+    auto messages = chatService.getRealmMessages(realmId, limit, before);
+
+    Json::Value response;
+    response["messages"] = Json::arrayValue;
+    for (const auto& msg : messages) {
+        response["messages"].append(msg.toJson());
+    }
+
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ChatController::sendMessage(const HttpRequestPtr& req,
+                                  std::function<void(const HttpResponsePtr&)>&& callback) {
+    // This endpoint is mainly for testing; WebSocket is preferred
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string content = json.get("content", "").asString();
+
+    if (realmId.empty() || content.empty()) {
+        Json::Value error;
+        error["error"] = "Missing required fields";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    // Get user from token
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) {
+        token = token.substr(7);
+    }
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value()) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& chatService = services::ChatService::getInstance();
+    models::ChatMessage message;
+
+    auto result = chatService.sendMessage(
+        realmId, claims->userId, claims->username, claims->userColor, claims->avatarUrl, content,
+        false, false, false, message
+    );
+
+    if (result == services::SendMessageResult::SUCCESS) {
+        auto resp = HttpResponse::newHttpJsonResponse(message.toJson());
+        callback(resp);
+    } else {
+        Json::Value error;
+        error["error"] = "Failed to send message";
+        error["reason"] = static_cast<int>(result);
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+    }
+}
+
+void ChatController::deleteMessage(const HttpRequestPtr& req,
+                                    std::function<void(const HttpResponsePtr&)>&& callback,
+                                    const std::string& messageId) {
+    // Verify user is moderator
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) {
+        token = token.substr(7);
+    }
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value()) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    std::string realmId = req->getParameter("realmId");
+    auto& chatService = services::ChatService::getInstance();
+
+    bool success = chatService.deleteMessage(realmId, messageId, claims->userId);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ChatController::getSettings(const HttpRequestPtr& req,
+                                  std::function<void(const HttpResponsePtr&)>&& callback,
+                                  const std::string& realmId) {
+    auto& chatService = services::ChatService::getInstance();
+    auto settings = chatService.getRealmSettings(realmId);
+
+    auto resp = HttpResponse::newHttpJsonResponse(settings.toJson());
+    callback(resp);
+}
+
+void ChatController::updateSettings(const HttpRequestPtr& req,
+                                     std::function<void(const HttpResponsePtr&)>&& callback,
+                                     const std::string& realmId) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    // Verify user is realm owner or moderator
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) {
+        token = token.substr(7);
+    }
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value()) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto settings = models::ChatSettings::fromJson(*jsonPtr);
+    settings.realmId = realmId;
+
+    auto& chatService = services::ChatService::getInstance();
+    bool success = chatService.updateRealmSettings(realmId, settings);
+
+    Json::Value response;
+    response["success"] = success;
+    response["settings"] = settings.toJson();
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ChatController::getRealmStats(const HttpRequestPtr& req,
+                                    std::function<void(const HttpResponsePtr&)>&& callback) {
+    // Get realm stats from WebSocket controller (active connections per realm)
+    auto stats = ChatWebSocketController::getRealmStats();
+    auto resp = HttpResponse::newHttpJsonResponse(stats);
+    callback(resp);
+}
diff --git a/chat-service/src/controllers/ChatController.h b/chat-service/src/controllers/ChatController.h
new file mode 100644
index 0000000..e26ad19
--- /dev/null
+++ b/chat-service/src/controllers/ChatController.h
@@ -0,0 +1,38 @@
+#pragma once
+#include <drogon/HttpController.h>
+
+using namespace drogon;
+
+class ChatController : public drogon::HttpController<ChatController> {
+public:
+    METHOD_LIST_BEGIN
+    ADD_METHOD_TO(ChatController::getMessages, "/api/chat/messages/{realmId}", Get);
+    ADD_METHOD_TO(ChatController::sendMessage, "/api/chat/send", Post);
+    ADD_METHOD_TO(ChatController::deleteMessage, "/api/chat/message/{messageId}", Delete);
+    ADD_METHOD_TO(ChatController::getSettings, "/api/chat/settings/{realmId}", Get);
+    ADD_METHOD_TO(ChatController::updateSettings, "/api/chat/settings/{realmId}", Put);
+    ADD_METHOD_TO(ChatController::getRealmStats, "/api/chat/realms/stats", Get);
+    METHOD_LIST_END
+
+    void getMessages(const HttpRequestPtr& req,
+                     std::function<void(const HttpResponsePtr&)>&& callback,
+                     const std::string& realmId);
+
+    void sendMessage(const HttpRequestPtr& req,
+                     std::function<void(const HttpResponsePtr&)>&& callback);
+
+    void deleteMessage(const HttpRequestPtr& req,
+                       std::function<void(const HttpResponsePtr&)>&& callback,
+                       const std::string& messageId);
+
+    void getSettings(const HttpRequestPtr& req,
+                     std::function<void(const HttpResponsePtr&)>&& callback,
+                     const std::string& realmId);
+
+    void updateSettings(const HttpRequestPtr& req,
+                        std::function<void(const HttpResponsePtr&)>&& callback,
+                        const std::string& realmId);
+
+    void getRealmStats(const HttpRequestPtr& req,
+                       std::function<void(const HttpResponsePtr&)>&& callback);
+};
diff --git a/chat-service/src/controllers/ChatWebSocketController.cpp b/chat-service/src/controllers/ChatWebSocketController.cpp
new file mode 100644
index 0000000..dbea6ca
--- /dev/null
+++ b/chat-service/src/controllers/ChatWebSocketController.cpp
@@ -0,0 +1,1340 @@
+#include "ChatWebSocketController.h"
+#include "../services/ChatService.h"
+#include "../services/AuthService.h"
+#include "../services/ModerationService.h"
+#include "../services/RedisMessageStore.h"
+#include <drogon/HttpClient.h>
+#include <json/json.h>
+#include <iostream>
+#include <regex>
+#include <map>
+#include <random>
+#include <algorithm>
+#include <openssl/sha.h>
+#include <iomanip>
+#include <sstream>
+
+std::unordered_map<WebSocketConnectionPtr, ChatWebSocketController::ConnectionInfo>
+    ChatWebSocketController::connections_;
+std::unordered_map<WebSocketConnectionPtr, std::chrono::steady_clock::time_point>
+    ChatWebSocketController::pendingConnections_;  // SECURITY FIX: Track pending API key validations
+std::unordered_map<int64_t, WebSocketConnectionPtr>
+    ChatWebSocketController::apiKeyConnections_;  // SECURITY FIX: Track 1 connection per API key
+std::unordered_map<WebSocketConnectionPtr, std::chrono::steady_clock::time_point>
+    ChatWebSocketController::lastRenameTime_;  // SECURITY FIX #24: Rate limit guest renames
+std::unordered_map<std::string, WebSocketConnectionPtr>
+    ChatWebSocketController::usernameToConnection_;  // SECURITY FIX #25: O(1) username collision lookup
+std::mutex ChatWebSocketController::connectionsMutex_;
+
+// Helper to broadcast participant joined event to realm
+void ChatWebSocketController::broadcastParticipantJoined(const std::string& realmId, const ConnectionInfo& joinedUser) {
+    Json::Value broadcast;
+    broadcast["type"] = "participant_joined";
+    broadcast["realmId"] = realmId;
+
+    Json::Value participant;
+    participant["userId"] = joinedUser.userId;
+    participant["username"] = joinedUser.username;
+    participant["isGuest"] = joinedUser.isGuest;
+    participant["isModerator"] = joinedUser.isModerator;
+    participant["isStreamer"] = joinedUser.isStreamer;
+    broadcast["participant"] = participant;
+
+    // Count participants in realm
+    int count = 0;
+    for (const auto& [conn, info] : connections_) {
+        if (info.realmId == realmId) count++;
+    }
+    broadcast["participantCount"] = count;
+
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), broadcast);
+
+    for (const auto& [conn, info] : connections_) {
+        if (info.realmId == realmId) {
+            conn->send(messageStr);
+        }
+    }
+}
+
+// Helper to broadcast participant left event to realm
+void ChatWebSocketController::broadcastParticipantLeft(const std::string& realmId, const std::string& userId, const std::string& username) {
+    Json::Value broadcast;
+    broadcast["type"] = "participant_left";
+    broadcast["realmId"] = realmId;
+    broadcast["userId"] = userId;
+    broadcast["username"] = username;
+
+    // Count remaining participants in realm
+    int count = 0;
+    for (const auto& [conn, info] : connections_) {
+        if (info.realmId == realmId) count++;
+    }
+    broadcast["participantCount"] = count;
+
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), broadcast);
+
+    for (const auto& [conn, info] : connections_) {
+        if (info.realmId == realmId) {
+            conn->send(messageStr);
+        }
+    }
+}
+
+void ChatWebSocketController::handleNewConnection(const HttpRequestPtr& req,
+                                                   const WebSocketConnectionPtr& wsConnPtr) {
+    LOG_INFO << "New WebSocket connection from " << wsConnPtr->peerAddr().toIpPort();
+
+    // Extract realmId from query parameter (frontend now uses /chat/ws?realmId=xxx)
+    auto realmId = req->getParameter("realmId");
+
+    LOG_INFO << "WebSocket connection for realmId: " << (realmId.empty() ? "(none - will wait for join message)" : realmId);
+
+    ConnectionInfo info;
+    info.realmId = realmId;
+    info.isGuest = true; // Default to guest until authenticated
+    info.connectionTime = std::chrono::system_clock::now();
+
+    // SECURITY FIX: API keys are no longer accepted in URL query parameters
+    // Bots must send { type: "auth", apiKey: "..." } message after connecting
+    // This prevents API keys from being logged in server access logs
+    {
+        // Check for token in query params or headers
+        auto token = req->getParameter("token");
+        LOG_DEBUG << "Token from query param: " << (token.empty() ? "(empty)" : "present");
+
+        if (token.empty()) {
+            token = req->getHeader("Authorization");
+            LOG_DEBUG << "Token from Authorization header: " << (token.empty() ? "(empty)" : "present");
+            if (!token.empty() && token.find("Bearer ") == 0) {
+                token = token.substr(7);
+            }
+        }
+
+        if (!token.empty()) {
+            LOG_INFO << "Attempting to verify JWT token";
+            auto& authService = services::AuthService::getInstance();
+            auto claims = authService.verifyToken(token);
+
+            if (claims.has_value()) {
+                info.userId = claims->userId;
+                info.username = claims->username;
+                info.userColor = claims->userColor;
+                info.avatarUrl = claims->avatarUrl;
+                info.isGuest = false;
+                info.isAdmin = claims->isAdmin;
+                info.isSiteModerator = claims->isModerator;
+                // Admins and site moderators have mod powers everywhere
+                info.isModerator = claims->isAdmin || claims->isModerator;
+                info.isStreamer = claims->isStreamer;
+                LOG_INFO << "User authenticated: " << info.username << " (userId: " << info.userId
+                         << ", admin=" << info.isAdmin << ", siteMod=" << info.isSiteModerator << ")";
+            } else {
+                LOG_WARN << "Token verification failed - treating as guest";
+            }
+        } else {
+            LOG_INFO << "No token provided - treating as guest";
+        }
+    }
+
+    // Check pending uberban for authenticated users FIRST
+    // This handles the deferred uberban case (admin marked user for ban while they were offline)
+    // Fingerprint is generated here ONLY for users with pending_uberban (not all authenticated users)
+    if (!info.isGuest) {
+        auto& redis = services::RedisMessageStore::getInstance();
+        if (redis.hasPendingUberban(info.userId)) {
+            LOG_WARN << "User " << info.username << " has pending uberban - capturing fingerprint and applying ban";
+
+            // Generate fingerprint NOW (only for pending_uberban users)
+            std::string fingerprint = req->getHeader("X-Server-Fingerprint");
+            if (fingerprint.empty()) {
+                std::string clientIp = req->getHeader("X-Real-IP");
+                if (clientIp.empty()) {
+                    clientIp = wsConnPtr->peerAddr().toIp();
+                }
+                std::string userAgent = req->getHeader("User-Agent");
+                std::string acceptLang = req->getHeader("Accept-Language");
+
+                std::string toHash = clientIp + "|" + userAgent + "|" + acceptLang;
+
+                unsigned char hash[SHA256_DIGEST_LENGTH];
+                SHA256(reinterpret_cast<const unsigned char*>(toHash.c_str()), toHash.length(), hash);
+
+                std::stringstream ss;
+                for (int i = 0; i < SHA256_DIGEST_LENGTH; i++) {
+                    ss << std::hex << std::setw(2) << std::setfill('0') << static_cast<int>(hash[i]);
+                }
+                fingerprint = ss.str();
+            }
+
+            // Add fingerprint to banned set
+            redis.addFingerprintBan(fingerprint);
+            redis.clearPendingUberban(info.userId);
+
+            // Call backend to disable account (async, fire-and-forget)
+            auto httpClient = HttpClient::newHttpClient("http://drogon-backend:8080");
+            auto backendReq = HttpRequest::newHttpRequest();
+            backendReq->setPath("/api/internal/user/" + info.userId + "/process-pending-uberban");
+            backendReq->setMethod(drogon::Post);
+            httpClient->sendRequest(backendReq, [](ReqResult, const HttpResponsePtr&) {
+                // Fire and forget - we already banned the fingerprint
+            });
+
+            // Reject the connection
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "You have been permanently banned from the site.";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            wsConnPtr->shutdown();
+            return;
+        }
+    }
+
+    // If still guest, check if guests are allowed site-wide
+    if (info.isGuest) {
+        auto& chatService = services::ChatService::getInstance();
+        auto globalSettings = chatService.getGlobalSettings();
+
+        if (!globalSettings.guestsAllowedSiteWide) {
+            LOG_WARN << "Guest connection rejected - guests disabled site-wide";
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "Guest chat is currently disabled site-wide. Please log in to chat.";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            wsConnPtr->shutdown();
+            return;
+        }
+
+        // Generate fingerprint for guests (always needed for guest moderation)
+        std::string fingerprint = req->getHeader("X-Server-Fingerprint");
+        if (fingerprint.empty()) {
+            std::string clientIp = req->getHeader("X-Real-IP");
+            if (clientIp.empty()) {
+                clientIp = wsConnPtr->peerAddr().toIp();
+            }
+            std::string userAgent = req->getHeader("User-Agent");
+            std::string acceptLang = req->getHeader("Accept-Language");
+
+            std::string toHash = clientIp + "|" + userAgent + "|" + acceptLang;
+
+            unsigned char hash[SHA256_DIGEST_LENGTH];
+            SHA256(reinterpret_cast<const unsigned char*>(toHash.c_str()), toHash.length(), hash);
+
+            std::stringstream ss;
+            for (int i = 0; i < SHA256_DIGEST_LENGTH; i++) {
+                ss << std::hex << std::setw(2) << std::setfill('0') << static_cast<int>(hash[i]);
+            }
+            fingerprint = ss.str();
+        }
+        info.fingerprint = fingerprint;
+
+        // Check fingerprint ban for guests
+        auto& redis = services::RedisMessageStore::getInstance();
+        if (redis.isFingerprintBanned(fingerprint)) {
+            LOG_WARN << "Guest connection rejected - fingerprint banned: " << fingerprint.substr(0, 8) << "...";
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "You have been banned from chat.";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            wsConnPtr->shutdown();
+            return;
+        }
+
+        // SECURITY FIX #31: Check for server-side stored guest name first
+        auto storedName = redis.getGuestName(info.fingerprint);
+        if (storedName.has_value()) {
+            info.username = storedName.value();
+            LOG_INFO << "Restored server-side guest name: " << info.username;
+        } else {
+            info.username = chatService.generateGuestUsername();
+        }
+        info.userId = "guest:" + info.username;
+        // Assign random default avatar if available
+        info.avatarUrl = chatService.getRandomDefaultAvatar();
+        // Random session timeout between 45-123 minutes to disrupt logging
+        // Using cryptographically secure random
+        std::random_device rd;
+        std::mt19937 gen(rd());
+        std::uniform_int_distribution<> dis(45, 123);
+        info.sessionTimeoutMinutes = dis(gen);
+    }
+
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        connections_[wsConnPtr] = info;
+        // SECURITY FIX #25: Maintain O(1) username lookup map
+        std::string lowerUsername = info.username;
+        std::transform(lowerUsername.begin(), lowerUsername.end(), lowerUsername.begin(), ::tolower);
+        usernameToConnection_[lowerUsername] = wsConnPtr;
+    }
+
+    // Check if user is banned or kicked from the realm
+    if (!realmId.empty()) {
+        auto& modService = services::ModerationService::getInstance();
+
+        // Check realm-specific ban
+        if (modService.isUserBannedFromRealm(realmId, info.userId, info.fingerprint)) {
+            LOG_WARN << "User " << info.username << " rejected - banned from realm " << realmId;
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "You are banned from this realm.";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            wsConnPtr->shutdown();
+            // Clean up from connections_ since we just added it
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                connections_.erase(wsConnPtr);
+            }
+            return;
+        }
+
+        // Check kick (temporary block)
+        if (modService.isUserKicked(realmId, info.userId)) {
+            LOG_WARN << "User " << info.username << " rejected - kicked from realm " << realmId;
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "You have been kicked from this realm. Please try again later.";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            wsConnPtr->shutdown();
+            // Clean up from connections_ since we just added it
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                connections_.erase(wsConnPtr);
+            }
+            return;
+        }
+    }
+
+    // Send welcome message
+    Json::Value welcome;
+    welcome["type"] = "welcome";
+    welcome["username"] = info.username;
+    welcome["userId"] = info.userId;
+    welcome["isGuest"] = info.isGuest;
+    welcome["isAdmin"] = info.isAdmin;
+    welcome["isSiteModerator"] = info.isSiteModerator;
+    welcome["isModerator"] = info.isModerator;
+    welcome["isStreamer"] = info.isStreamer;
+    welcome["realmId"] = info.realmId;
+    if (!info.avatarUrl.empty()) {
+        welcome["avatarUrl"] = info.avatarUrl;
+    }
+
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), welcome));
+
+    // Send recent messages
+    auto& chatService = services::ChatService::getInstance();
+    auto messages = chatService.getRealmMessages(realmId, 50);
+
+    Json::Value history;
+    history["type"] = "history";
+    history["messages"] = Json::arrayValue;
+    for (const auto& msg : messages) {
+        history["messages"].append(msg.toJson());
+    }
+
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), history));
+
+    // Broadcast participant joined to other users in the realm
+    if (!realmId.empty()) {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        broadcastParticipantJoined(realmId, info);
+    }
+
+    LOG_INFO << "User connected: " << info.username << " (guest=" << info.isGuest
+             << ") to realm " << realmId;
+}
+
+void ChatWebSocketController::handleNewMessage(const WebSocketConnectionPtr& wsConnPtr,
+                                                std::string&& message,
+                                                const WebSocketMessageType& type) {
+    if (type != WebSocketMessageType::Text) {
+        return;
+    }
+
+    ConnectionInfo info;
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+
+        // SECURITY FIX: Reject messages from pending connections (awaiting API key validation)
+        if (pendingConnections_.find(wsConnPtr) != pendingConnections_.end()) {
+            Json::Value error;
+            error["type"] = "error";
+            error["error"] = "Connection pending authentication";
+            wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), error));
+            return;
+        }
+
+        auto it = connections_.find(wsConnPtr);
+        if (it == connections_.end()) {
+            return;
+        }
+        info = it->second;
+    }
+
+    // Parse JSON message
+    Json::CharReaderBuilder builder;
+    Json::Value data;
+    std::istringstream s(message);
+    std::string errs;
+
+    if (!Json::parseFromStream(builder, s, &data, &errs)) {
+        sendError(wsConnPtr, "Invalid JSON");
+        return;
+    }
+
+    std::string msgType = data.get("type", "").asString();
+
+    if (msgType == "message") {
+        handleChatMessage(wsConnPtr, info, data);
+    } else if (msgType == "join") {
+        handleJoinRealm(wsConnPtr, info, data);
+    } else if (msgType == "mod_action") {
+        handleModAction(wsConnPtr, info, data);
+    } else if (msgType == "get_participants") {
+        handleGetParticipants(wsConnPtr, info);
+    } else if (msgType == "rename") {
+        handleRename(wsConnPtr, info, data);
+    } else if (msgType == "auth") {
+        // SECURITY FIX #9: Handle auth token sent as message (not in URL)
+        handleAuthMessage(wsConnPtr, data);
+    } else {
+        sendError(wsConnPtr, "Unknown message type");
+    }
+}
+
+void ChatWebSocketController::handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) {
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+
+    // SECURITY FIX: Also clean up pending connections
+    pendingConnections_.erase(wsConnPtr);
+
+    // SECURITY FIX #24: Clean up rename rate limit tracking
+    lastRenameTime_.erase(wsConnPtr);
+
+    auto it = connections_.find(wsConnPtr);
+    if (it != connections_.end()) {
+        LOG_INFO << "User disconnected: " << it->second.username;
+
+        // Store info before erasing
+        std::string realmId = it->second.realmId;
+        std::string userId = it->second.userId;
+        std::string username = it->second.username;
+
+        // SECURITY FIX: Clean up API key connection tracking
+        if (it->second.isApiKeyConnection && it->second.apiKeyId > 0) {
+            apiKeyConnections_.erase(it->second.apiKeyId);
+            LOG_INFO << "Bot disconnected, freed API key slot: " << it->second.apiKeyId;
+        }
+
+        // SECURITY FIX #25: Clean up username lookup map
+        std::string lowerUsername = username;
+        std::transform(lowerUsername.begin(), lowerUsername.end(), lowerUsername.begin(), ::tolower);
+        usernameToConnection_.erase(lowerUsername);
+
+        // Erase the connection
+        connections_.erase(it);
+
+        // Broadcast participant left to others in the realm
+        if (!realmId.empty()) {
+            broadcastParticipantLeft(realmId, userId, username);
+        }
+    }
+}
+
+void ChatWebSocketController::handleChatMessage(const WebSocketConnectionPtr& wsConnPtr,
+                                                 const ConnectionInfo& info,
+                                                 const Json::Value& data) {
+    std::string content = data.get("content", "").asString();
+
+    if (content.empty()) {
+        sendError(wsConnPtr, "Empty message");
+        return;
+    }
+
+    // Get optional self-destruct timer (in seconds, 0 = permanent)
+    int selfDestructSeconds = data.get("selfDestructSeconds", 0).asInt();
+    // Cap at 5 minutes max for safety
+    if (selfDestructSeconds > 300) {
+        selfDestructSeconds = 300;
+    }
+
+    // Re-fetch current connection info to prevent TOCTOU race conditions
+    // (user could have been banned/disconnected since the initial copy)
+    ConnectionInfo currentInfo;
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto it = connections_.find(wsConnPtr);
+        if (it == connections_.end()) {
+            // Connection was closed - don't send error, just return
+            return;
+        }
+        currentInfo = it->second;
+    }
+
+    // SECURITY FIX: Check bot scopes before allowing message send
+    if (currentInfo.isApiKeyConnection) {
+        // Require 'rw' or 'write' scope to send messages
+        if (currentInfo.botScopes.find("rw") == std::string::npos &&
+            currentInfo.botScopes.find("write") == std::string::npos) {
+            sendError(wsConnPtr, "Insufficient scope: chat:rw or chat:write required to send messages");
+            return;
+        }
+    }
+
+    auto& chatService = services::ChatService::getInstance();
+    models::ChatMessage message;
+
+    // Get user color and avatar from connection info (set during authentication)
+    // Guests use gray color but can have a default avatar assigned
+    std::string userColor = currentInfo.isGuest ? "#808080" : currentInfo.userColor;
+    std::string avatarUrl = currentInfo.avatarUrl; // Use avatar from connection (may be default avatar for guests)
+
+    auto result = chatService.sendMessage(
+        currentInfo.realmId, currentInfo.userId, currentInfo.username, userColor, avatarUrl, content,
+        currentInfo.isGuest, currentInfo.isModerator, currentInfo.isStreamer, message, selfDestructSeconds,
+        currentInfo.isApiKeyConnection  // SECURITY FIX: Pass bot flag for rate limiting
+    );
+
+    if (result == services::SendMessageResult::SUCCESS) {
+        // Broadcast to all users in realm
+        broadcastMessage(currentInfo.realmId, message.toJson());
+
+        // Send confirmation to sender
+        Json::Value response;
+        response["type"] = "message_sent";
+        response["messageId"] = message.messageId;
+        sendSuccess(wsConnPtr, response);
+
+    } else {
+        std::string error;
+        switch (result) {
+            case services::SendMessageResult::BANNED:
+                error = "You are banned from this chat";
+                break;
+            case services::SendMessageResult::MUTED:
+                error = "You are muted";
+                break;
+            case services::SendMessageResult::SLOW_MODE:
+                error = "Slow mode is active. Please wait before sending another message";
+                break;
+            case services::SendMessageResult::BOT_RATE_LIMITED:
+                error = "Bot rate limit exceeded. Please wait 1 second between messages";
+                break;
+            case services::SendMessageResult::LINKS_NOT_ALLOWED:
+                error = "Links are not allowed in this chat";
+                break;
+            case services::SendMessageResult::MESSAGE_TOO_LONG:
+                error = "Message is too long";
+                break;
+            case services::SendMessageResult::INVALID_CONTENT:
+                error = "Invalid message content";
+                break;
+            case services::SendMessageResult::GUESTS_NOT_ALLOWED:
+                error = "Guest chat is disabled in this realm. Please log in to chat.";
+                break;
+            default:
+                error = "Failed to send message";
+        }
+        sendError(wsConnPtr, error);
+    }
+}
+
+void ChatWebSocketController::handleJoinRealm(const WebSocketConnectionPtr& wsConnPtr,
+                                               ConnectionInfo& info,
+                                               const Json::Value& data) {
+    std::string newRealmId = data.get("realmId", "").asString();
+
+    if (newRealmId.empty()) {
+        sendError(wsConnPtr, "Invalid realm ID");
+        return;
+    }
+
+    // Check if user is banned or kicked from the new realm
+    auto& modService = services::ModerationService::getInstance();
+
+    if (modService.isUserBannedFromRealm(newRealmId, info.userId, info.fingerprint)) {
+        sendError(wsConnPtr, "You are banned from this realm");
+        return;
+    }
+
+    if (modService.isUserKicked(newRealmId, info.userId)) {
+        sendError(wsConnPtr, "You have been kicked from this realm. Please try again later.");
+        return;
+    }
+
+    // Update connection info
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto it = connections_.find(wsConnPtr);
+        if (it != connections_.end()) {
+            it->second.realmId = newRealmId;
+            info.realmId = newRealmId;
+        }
+    }
+
+    LOG_INFO << "User " << info.username << " joined realm: " << newRealmId;
+
+    // Send join success message
+    Json::Value joinSuccess;
+    joinSuccess["type"] = "join_success";
+    joinSuccess["realmId"] = newRealmId;
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), joinSuccess));
+
+    // Send recent messages from new realm
+    auto& chatService = services::ChatService::getInstance();
+    auto messages = chatService.getRealmMessages(newRealmId, 50);
+
+    Json::Value history;
+    history["type"] = "history";
+    history["realmId"] = newRealmId;
+    history["messages"] = Json::arrayValue;
+    for (const auto& msg : messages) {
+        history["messages"].append(msg.toJson());
+    }
+
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), history));
+}
+
+void ChatWebSocketController::handleModAction(const WebSocketConnectionPtr& wsConnPtr,
+                                               const ConnectionInfo& info,
+                                               const Json::Value& data) {
+    // Re-fetch current connection info to prevent TOCTOU race conditions
+    // (permissions could have changed since the initial copy)
+    ConnectionInfo currentInfo;
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto it = connections_.find(wsConnPtr);
+        if (it == connections_.end()) {
+            sendError(wsConnPtr, "Connection no longer valid");
+            return;
+        }
+        currentInfo = it->second;
+    }
+
+    // API key connections (bots) cannot perform moderation actions
+    if (currentInfo.isApiKeyConnection) {
+        sendError(wsConnPtr, "Bots cannot perform moderation actions");
+        return;
+    }
+
+    std::string action = data.get("action", "").asString();
+    std::string targetUserId = data.get("targetUserId", "").asString();
+    std::string realmId = data.get("realmId", currentInfo.realmId).asString();
+
+    // Determine permissions based on tiered moderation system
+    // - canUberban: Admin or site-wide moderator only
+    // - canModerate: Admin, site mod, realm owner (streamer), or realm moderator
+    bool canUberban = currentInfo.isAdmin || currentInfo.isSiteModerator;
+    bool canModerate = currentInfo.isAdmin || currentInfo.isSiteModerator || currentInfo.isModerator || currentInfo.isStreamer;
+    // TODO: Add realm owner and per-realm moderator checks via backend API
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = false;
+
+    if (action == "uberban") {
+        // Site-wide fingerprint ban - only admins and site moderators
+        if (!canUberban) {
+            sendError(wsConnPtr, "Permission denied - only admins and site moderators can uberban");
+            return;
+        }
+
+        std::string reason = data.get("reason", "").asString();
+        std::string fingerprint = data.get("fingerprint", "").asString();
+
+        // If no fingerprint provided, try to get it from the target's connection
+        if (fingerprint.empty()) {
+            std::lock_guard<std::mutex> lock(connectionsMutex_);
+            for (auto& [conn, connInfo] : connections_) {
+                if (connInfo.userId == targetUserId) {
+                    fingerprint = connInfo.fingerprint;
+                    break;
+                }
+            }
+        }
+
+        if (fingerprint.empty()) {
+            sendError(wsConnPtr, "Cannot uberban - no fingerprint available for this user");
+            return;
+        }
+
+        success = modService.uberbanUser(fingerprint, currentInfo.userId, reason);
+
+        if (success) {
+            // Disconnect all connections with this fingerprint
+            std::vector<WebSocketConnectionPtr> toDisconnect;
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                for (auto& [conn, connInfo] : connections_) {
+                    if (connInfo.fingerprint == fingerprint) {
+                        toDisconnect.push_back(conn);
+                    }
+                }
+            }
+            for (auto& conn : toDisconnect) {
+                Json::Value error;
+                error["type"] = "error";
+                error["error"] = "You have been permanently banned from the site.";
+                conn->send(Json::writeString(Json::StreamWriterBuilder(), error));
+                conn->shutdown();
+            }
+            LOG_INFO << "Uberbanned fingerprint: " << fingerprint.substr(0, 8) << "... by " << currentInfo.username;
+        }
+
+    } else if (action == "ununberban") {
+        // Remove site-wide fingerprint ban
+        if (!canUberban) {
+            sendError(wsConnPtr, "Permission denied - only admins and site moderators can remove uberbans");
+            return;
+        }
+
+        std::string fingerprint = data.get("fingerprint", "").asString();
+        if (fingerprint.empty()) {
+            sendError(wsConnPtr, "Fingerprint required for ununberban");
+            return;
+        }
+
+        success = modService.unUberbanUser(fingerprint, currentInfo.userId);
+
+    } else if (action == "ban") {
+        // Per-realm ban - realm owners, realm mods, site mods, and admins
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+
+        std::string reason = data.get("reason", "").asString();
+
+        // Get target's fingerprint if they're a guest
+        std::string guestFingerprint;
+        WebSocketConnectionPtr targetConn = nullptr;
+        {
+            std::lock_guard<std::mutex> lock(connectionsMutex_);
+            for (auto& [conn, connInfo] : connections_) {
+                if (connInfo.userId == targetUserId) {
+                    guestFingerprint = connInfo.fingerprint;
+                    targetConn = conn;
+                    break;
+                }
+            }
+        }
+
+        // Use new realm-specific ban
+        success = modService.banUserFromRealm(realmId, targetUserId, currentInfo.userId, reason, guestFingerprint);
+
+        if (success && targetConn) {
+            // Notify and disconnect the banned user from this realm
+            Json::Value error;
+            error["type"] = "realm_banned";
+            error["realmId"] = realmId;
+            error["message"] = "You have been banned from this realm.";
+            targetConn->send(Json::writeString(Json::StreamWriterBuilder(), error));
+
+            // If they're in the banned realm, disconnect them
+            std::lock_guard<std::mutex> lock(connectionsMutex_);
+            auto it = connections_.find(targetConn);
+            if (it != connections_.end() && it->second.realmId == realmId) {
+                targetConn->shutdown();
+            }
+        }
+
+    } else if (action == "unban") {
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+
+        std::string guestFingerprint = data.get("fingerprint", "").asString();
+        success = modService.unbanUserFromRealm(realmId, targetUserId, currentInfo.userId, guestFingerprint);
+
+    } else if (action == "kick") {
+        // Kick = disconnect + 1 minute rejoin block
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+
+        std::string reason = data.get("reason", "").asString();
+        int duration = data.get("duration", 60).asInt(); // Default 1 minute
+
+        success = modService.kickUser(realmId, targetUserId, currentInfo.userId, reason, duration);
+
+        if (success) {
+            // Find and disconnect the kicked user
+            WebSocketConnectionPtr targetConn = nullptr;
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                for (auto& [conn, connInfo] : connections_) {
+                    if (connInfo.userId == targetUserId && connInfo.realmId == realmId) {
+                        targetConn = conn;
+                        break;
+                    }
+                }
+            }
+            if (targetConn) {
+                Json::Value kickMsg;
+                kickMsg["type"] = "kicked";
+                kickMsg["realmId"] = realmId;
+                kickMsg["duration"] = duration;
+                kickMsg["message"] = "You have been kicked from this realm. You can rejoin in " + std::to_string(duration) + " seconds.";
+                targetConn->send(Json::writeString(Json::StreamWriterBuilder(), kickMsg));
+                targetConn->shutdown();
+            }
+        }
+
+    } else if (action == "mute") {
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+        int duration = data.get("duration", 0).asInt(); // Default permanent (0), optional custom duration
+        std::string reason = data.get("reason", "").asString();
+        success = modService.muteUser(realmId, targetUserId, currentInfo.userId, duration, reason);
+
+    } else if (action == "unmute") {
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+        success = modService.unmuteUser(realmId, targetUserId, currentInfo.userId);
+
+    } else if (action == "delete") {
+        if (!canModerate) {
+            sendError(wsConnPtr, "Permission denied");
+            return;
+        }
+        std::string messageId = data.get("messageId", "").asString();
+        success = modService.deleteMessage(realmId, messageId, currentInfo.userId);
+
+        if (success) {
+            // Broadcast deletion to all users
+            Json::Value broadcast;
+            broadcast["type"] = "message_deleted";
+            broadcast["messageId"] = messageId;
+            broadcastToRealm(realmId, broadcast);
+        }
+    } else {
+        sendError(wsConnPtr, "Unknown moderation action");
+        return;
+    }
+
+    if (success) {
+        Json::Value response;
+        response["type"] = "mod_action_success";
+        response["action"] = action;
+        sendSuccess(wsConnPtr, response);
+    } else {
+        sendError(wsConnPtr, "Moderation action failed");
+    }
+}
+
+void ChatWebSocketController::handleGetParticipants(const WebSocketConnectionPtr& wsConnPtr,
+                                                     const ConnectionInfo& info) {
+    Json::Value response;
+    response["type"] = "participants_list";
+    response["realmId"] = info.realmId;
+    response["participants"] = Json::arrayValue;
+
+    // Get all participants in the same realm
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+    for (const auto& [conn, connInfo] : connections_) {
+        if (connInfo.realmId == info.realmId) {
+            Json::Value participant;
+            participant["userId"] = connInfo.userId;
+            participant["username"] = connInfo.username;
+            participant["userColor"] = connInfo.userColor;
+            participant["avatarUrl"] = connInfo.avatarUrl;
+            participant["isGuest"] = connInfo.isGuest;
+            participant["isModerator"] = connInfo.isModerator;
+            participant["isStreamer"] = connInfo.isStreamer;
+            response["participants"].append(participant);
+        }
+    }
+
+    response["count"] = response["participants"].size();
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), response));
+}
+
+void ChatWebSocketController::handleRename(const WebSocketConnectionPtr& wsConnPtr,
+                                            ConnectionInfo& info,
+                                            const Json::Value& data) {
+    // Only guests can rename themselves
+    if (!info.isGuest) {
+        sendError(wsConnPtr, "Only guests can rename");
+        return;
+    }
+
+    // SECURITY FIX #24: Rate limit guest renames (1 per 10 seconds)
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto now = std::chrono::steady_clock::now();
+        auto it = lastRenameTime_.find(wsConnPtr);
+        if (it != lastRenameTime_.end()) {
+            auto elapsed = std::chrono::duration_cast<std::chrono::seconds>(now - it->second).count();
+            if (elapsed < 10) {
+                sendError(wsConnPtr, "Please wait " + std::to_string(10 - elapsed) + " seconds before renaming again");
+                return;
+            }
+        }
+    }
+
+    std::string newName = data.get("newName", "").asString();
+
+    // Validate new name
+    if (newName.empty() || newName.length() > 30) {
+        sendError(wsConnPtr, "Invalid name (must be 1-30 characters)");
+        return;
+    }
+
+    // SECURITY FIX #23: Enforce ASCII-only names to prevent Unicode homograph attacks
+    // This prevents attackers from using look-alike characters (e.g., Cyrillic 'а' vs ASCII 'a')
+    // to impersonate other users or bypass name restrictions
+    for (unsigned char c : newName) {
+        if (c > 127) {
+            sendError(wsConnPtr, "Name must contain only ASCII characters (no special Unicode)");
+            return;
+        }
+    }
+
+    // Check if name contains only allowed characters (letters, numbers, underscore, hyphen)
+    std::regex namePattern("^[a-zA-Z0-9_-]+$");
+    if (!std::regex_match(newName, namePattern)) {
+        sendError(wsConnPtr, "Name can only contain letters, numbers, underscores, and hyphens");
+        return;
+    }
+
+    // Check against reserved names (case-insensitive)
+    static const std::vector<std::string> reservedNames = {
+        "admin", "administrator", "moderator", "mod", "system", "bot",
+        "staff", "support", "help", "official", "owner", "streamer",
+        "vip", "verified", "guest", "anonymous", "server", "root"
+    };
+    std::string lowerName = newName;
+    std::transform(lowerName.begin(), lowerName.end(), lowerName.begin(), ::tolower);
+    for (const auto& reserved : reservedNames) {
+        if (lowerName == reserved || lowerName.find(reserved) == 0) {
+            sendError(wsConnPtr, "This name is reserved and cannot be used");
+            return;
+        }
+    }
+
+    // SECURITY FIX #25: O(1) collision check using HashMap instead of O(n) iteration
+    std::string oldName = info.username;
+    std::string oldLowerName = oldName;
+    std::transform(oldLowerName.begin(), oldLowerName.end(), oldLowerName.begin(), ::tolower);
+
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+
+        // Check if name is already taken (O(1) lookup)
+        auto existingIt = usernameToConnection_.find(lowerName);
+        if (existingIt != usernameToConnection_.end() && existingIt->second != wsConnPtr) {
+            sendError(wsConnPtr, "This name is already taken by another user");
+            return;
+        }
+
+        // Update connection info
+        auto it = connections_.find(wsConnPtr);
+        if (it != connections_.end()) {
+            it->second.username = newName;
+            info.username = newName;
+
+            // Update username lookup map: remove old, add new
+            usernameToConnection_.erase(oldLowerName);
+            usernameToConnection_[lowerName] = wsConnPtr;
+
+            // Update rate limit timestamp
+            lastRenameTime_[wsConnPtr] = std::chrono::steady_clock::now();
+
+            // SECURITY FIX #31: Store guest name server-side for persistence
+            if (!info.fingerprint.empty()) {
+                services::RedisMessageStore::getInstance().setGuestName(info.fingerprint, newName);
+            }
+        }
+    }
+
+    // Send success response
+    Json::Value response;
+    response["type"] = "rename_success";
+    response["newName"] = newName;
+    response["oldName"] = oldName;
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), response));
+
+    LOG_INFO << "Guest renamed from " << oldName << " to " << newName;
+}
+
+// SECURITY FIX #9: Handle auth token/apiKey sent as WebSocket message (not in URL)
+// This prevents credentials from being logged in server access logs
+void ChatWebSocketController::handleAuthMessage(const WebSocketConnectionPtr& wsConnPtr,
+                                                 const Json::Value& data) {
+    // Check for bot API key first (SECURITY FIX: moved from URL params to message)
+    std::string apiKey = data.get("apiKey", "").asString();
+    if (!apiKey.empty()) {
+        handleBotApiKeyAuth(wsConnPtr, apiKey);
+        return;
+    }
+
+    // Otherwise, handle JWT token auth for regular users
+    std::string token = data.get("token", "").asString();
+    if (token.empty()) {
+        sendError(wsConnPtr, "Missing token or apiKey in auth message");
+        return;
+    }
+
+    // Validate token with auth service
+    auto claims = services::AuthService::getInstance().verifyToken(token);
+    if (!claims) {
+        sendError(wsConnPtr, "Invalid or expired token");
+        return;
+    }
+
+    // Build welcome message outside the lock to avoid holding mutex during send()
+    Json::Value welcome;
+    welcome["type"] = "auth_success";
+    welcome["username"] = claims->username;
+    welcome["userId"] = claims->userId;
+    welcome["userColor"] = claims->userColor;
+    welcome["isGuest"] = false;
+    welcome["isModerator"] = claims->isModerator;
+    welcome["isStreamer"] = claims->isStreamer;
+    welcome["isAdmin"] = claims->isAdmin;
+    welcome["isSiteModerator"] = claims->isModerator;  // isModerator in claims is site-wide
+    if (!claims->avatarUrl.empty()) {
+        welcome["avatarUrl"] = claims->avatarUrl;
+    }
+
+    bool connectionFound = false;
+    std::string oldUsername;
+
+    // Update connection info with authenticated user details
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto it = connections_.find(wsConnPtr);
+        if (it != connections_.end()) {
+            // Save old username to update usernameToConnection_ map
+            oldUsername = it->second.username;
+
+            // Upgrade from guest to authenticated user
+            it->second.userId = claims->userId;
+            it->second.username = claims->username;
+            it->second.userColor = claims->userColor;
+            it->second.isGuest = false;
+            it->second.isModerator = claims->isModerator;
+            it->second.isStreamer = claims->isStreamer;
+            it->second.isAdmin = claims->isAdmin;
+            it->second.isSiteModerator = claims->isModerator;  // isModerator in claims is site-wide
+            it->second.avatarUrl = claims->avatarUrl;
+
+            // Update usernameToConnection_ map: remove old guest name, add new authenticated name
+            if (!oldUsername.empty()) {
+                std::string lowerOld = oldUsername;
+                std::transform(lowerOld.begin(), lowerOld.end(), lowerOld.begin(), ::tolower);
+                usernameToConnection_.erase(lowerOld);
+            }
+            std::string lowerNew = claims->username;
+            std::transform(lowerNew.begin(), lowerNew.end(), lowerNew.begin(), ::tolower);
+            usernameToConnection_[lowerNew] = wsConnPtr;
+
+            connectionFound = true;
+        }
+    }
+
+    // Send welcome message and log outside the lock
+    if (connectionFound) {
+        LOG_INFO << "User authenticated via message: " << claims->username;
+        wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), welcome));
+    }
+}
+
+// SECURITY FIX: Handle bot API key authentication via message (not URL)
+void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr& wsConnPtr,
+                                                   const std::string& apiKey) {
+    LOG_INFO << "Bot attempting to authenticate via message-based API key";
+
+    // Get connection info to extract realmId if provided
+    std::string realmId;
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        auto it = connections_.find(wsConnPtr);
+        if (it != connections_.end()) {
+            realmId = it->second.realmId;
+        }
+    }
+
+    // Make HTTP request to backend to validate API key
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+
+    Json::Value jsonBody;
+    jsonBody["apiKey"] = apiKey;
+
+    auto httpReq = HttpRequest::newHttpJsonRequest(jsonBody);
+    httpReq->setPath("/api/internal/validate-bot-key");
+    httpReq->setMethod(drogon::Post);
+
+    LOG_DEBUG << "Sending API key validation request to backend";
+
+    client->sendRequest(httpReq, [wsConnPtr, realmId, this](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            // Check connection validity early (before the lock, for early exit)
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                if (connections_.find(wsConnPtr) == connections_.end()) {
+                    LOG_DEBUG << "handleBotApiKeyAuth: Connection closed before callback";
+                    return;
+                }
+            }
+
+            if (result != ReqResult::Ok || !resp) {
+                LOG_ERROR << "Failed to validate API key - backend request failed";
+                sendError(wsConnPtr, "API key validation failed - service unavailable");
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["valid"].asBool()) {
+                LOG_WARN << "Invalid API key - rejecting authentication";
+                sendError(wsConnPtr, "Invalid API key");
+                return;
+            }
+
+            // Update connection info with bot credentials
+            {
+                std::lock_guard<std::mutex> lock(connectionsMutex_);
+                auto it = connections_.find(wsConnPtr);
+                if (it == connections_.end()) {
+                    LOG_WARN << "Connection closed before API key validation completed";
+                    return;
+                }
+
+                // Get API key ID for connection tracking
+                int64_t keyId = (*json)["keyId"].asInt64();
+
+                // SECURITY FIX: Enforce 1 connection per API key
+                auto existingConn = apiKeyConnections_.find(keyId);
+                if (existingConn != apiKeyConnections_.end()) {
+                    LOG_WARN << "API key " << keyId << " already has an active connection - rejecting";
+                    sendError(wsConnPtr, "Only 1 connection per API key allowed. Disconnect the existing connection first.");
+                    return;
+                }
+
+                // Update connection info with validated bot data
+                it->second.userId = std::to_string((*json)["userId"].asInt64());
+                it->second.username = (*json)["username"].asString();
+                it->second.userColor = (*json)["userColor"].asString();
+                it->second.avatarUrl = (*json)["avatarUrl"].asString();
+                it->second.isGuest = false;
+                it->second.isApiKeyConnection = true;
+                it->second.apiKeyId = keyId;
+                it->second.botScopes = (*json).isMember("scopes") ? (*json)["scopes"].asString() : "chat:rw";
+                it->second.isModerator = false;
+                it->second.isStreamer = false;
+
+                apiKeyConnections_[keyId] = wsConnPtr;  // Track this API key's connection
+
+                LOG_INFO << "Bot authenticated via API key message: " << it->second.username
+                         << " (keyId: " << keyId << ", scopes: " << it->second.botScopes << ")";
+
+                // Send welcome message (inside lock - connection is valid)
+                Json::Value welcome;
+                welcome["type"] = "welcome";
+                welcome["username"] = it->second.username;
+                welcome["userId"] = it->second.userId;
+                welcome["isGuest"] = false;
+                welcome["isModerator"] = false;
+                welcome["realmId"] = it->second.realmId;
+                try {
+                    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), welcome));
+                } catch (const std::exception& e) {
+                    LOG_WARN << "Failed to send welcome to bot: " << e.what();
+                }
+
+                // Send history if realm specified
+                if (!it->second.realmId.empty()) {
+                    auto& chatService = services::ChatService::getInstance();
+                    auto messages = chatService.getRealmMessages(it->second.realmId, 50);
+
+                    Json::Value history;
+                    history["type"] = "history";
+                    history["messages"] = Json::arrayValue;
+                    for (const auto& msg : messages) {
+                        history["messages"].append(msg.toJson());
+                    }
+                    try {
+                        wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), history));
+                    } catch (const std::exception& e) {
+                        LOG_WARN << "Failed to send history to bot: " << e.what();
+                    }
+                }
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in handleBotApiKeyAuth callback: " << e.what();
+        }
+    });
+}
+
+void ChatWebSocketController::broadcastMessage(const std::string& realmId, const Json::Value& message) {
+    Json::Value broadcast = message;
+    broadcast["type"] = "new_message";
+
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), broadcast);
+
+    // Global chat: broadcast to ALL connections, not just the same realm
+    // Frontend will filter based on user's realm preferences
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+    for (const auto& [conn, info] : connections_) {
+        conn->send(messageStr);
+    }
+}
+
+void ChatWebSocketController::broadcastToRealm(const std::string& realmId, const Json::Value& message) {
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), message);
+
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+    for (const auto& [conn, info] : connections_) {
+        if (info.realmId == realmId) {
+            conn->send(messageStr);
+        }
+    }
+}
+
+void ChatWebSocketController::broadcastToUser(const std::string& userId, const Json::Value& message) {
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), message);
+
+    std::lock_guard<std::mutex> lock(connectionsMutex_);
+    for (const auto& [conn, info] : connections_) {
+        if (info.userId == userId) {
+            conn->send(messageStr);
+        }
+    }
+}
+
+Json::Value ChatWebSocketController::getRealmStats() {
+    Json::Value result = Json::arrayValue;
+    std::map<std::string, int> realmCounts;
+
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        for (const auto& [conn, info] : connections_) {
+            if (!info.realmId.empty()) {
+                realmCounts[info.realmId]++;
+            }
+        }
+    }
+
+    for (const auto& [realmId, count] : realmCounts) {
+        Json::Value realm;
+        realm["realmId"] = realmId;
+        realm["participantCount"] = count;
+        result.append(realm);
+    }
+
+    return result;
+}
+
+void ChatWebSocketController::sendError(const WebSocketConnectionPtr& wsConnPtr, const std::string& error) {
+    Json::Value response;
+    response["type"] = "error";
+    response["error"] = error;
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), response));
+}
+
+void ChatWebSocketController::sendSuccess(const WebSocketConnectionPtr& wsConnPtr, const Json::Value& data) {
+    Json::Value response = data;
+    if (!response.isMember("type")) {
+        response["type"] = "success";
+    }
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), response));
+}
+
+// Force linker to include this object file
+void ChatWebSocketController::ensureLoaded() {
+    std::cout << "[WS_CONTROLLER] ensureLoaded() called - file is linked" << std::endl;
+    LOG_INFO << "ChatWebSocketController ensureLoaded() called - file is linked";
+}
+
+// Check and disconnect guests that have exceeded their session timeout
+void ChatWebSocketController::checkGuestTimeouts() {
+    auto now = std::chrono::system_clock::now();
+    std::vector<WebSocketConnectionPtr> toDisconnect;
+
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        for (const auto& [conn, info] : connections_) {
+            if (info.isGuest && info.sessionTimeoutMinutes > 0) {
+                auto duration = std::chrono::duration_cast<std::chrono::minutes>(
+                    now - info.connectionTime
+                ).count();
+
+                if (duration >= info.sessionTimeoutMinutes) {
+                    toDisconnect.push_back(conn);
+                }
+            }
+        }
+    }
+
+    // Disconnect outside the lock to avoid holding it while sending messages
+    for (const auto& conn : toDisconnect) {
+        Json::Value msg;
+        msg["type"] = "session_expired";
+        msg["message"] = "Guest session expired. Please reconnect.";
+        conn->send(Json::writeString(Json::StreamWriterBuilder(), msg));
+        conn->shutdown();
+        LOG_INFO << "Guest session timed out - disconnecting";
+    }
+}
+
+// Debug: Static initializer to verify this file is loaded
+static struct ChatWebSocketControllerLoader {
+    ChatWebSocketControllerLoader() {
+        std::cout << "[WS_CONTROLLER] Static initializer running" << std::endl;
+        LOG_INFO << "ChatWebSocketController static initializer running";
+    }
+} __chatWsControllerLoader;
+
+// Explicitly instantiate the WebSocketController template to force registration
+// This ensures Drogon's auto-registration mechanism runs even with custom CMake builds
+template class drogon::WebSocketController<ChatWebSocketController>;
+
+// Internal API: Try to uberban a connected user by ID
+// Option C: All registered user uberbans are deferred - fingerprint captured on reconnect
+// If user is connected: set pending_uberban + disconnect ALL their connections (fingerprint captured on reconnect)
+// Returns: "disconnected" if user was found and disconnected, empty string if not connected
+std::string ChatWebSocketController::tryUberbanConnectedUser(const std::string& userId) {
+    std::vector<WebSocketConnectionPtr> targetConns;
+    std::string username;
+
+    {
+        std::lock_guard<std::mutex> lock(connectionsMutex_);
+        // Collect ALL connections for this user (handles multiple tabs)
+        for (auto& [conn, info] : connections_) {
+            if (info.userId == userId) {
+                targetConns.push_back(conn);
+                if (username.empty()) {
+                    username = info.username;
+                }
+            }
+        }
+    }
+
+    if (targetConns.empty()) {
+        LOG_INFO << "tryUberbanConnectedUser: User " << userId << " not connected";
+        return "";
+    }
+
+    // Set pending_uberban in Redis - fingerprint will be captured on reconnect
+    auto& redis = services::RedisMessageStore::getInstance();
+    redis.setPendingUberban(userId);
+
+    LOG_INFO << "User " << username << " (" << userId << ") marked for pending uberban, disconnecting "
+             << targetConns.size() << " connection(s)";
+
+    // Notify and disconnect ALL connections (browser will auto-reconnect, triggering fingerprint capture)
+    for (auto& conn : targetConns) {
+        Json::Value error;
+        error["type"] = "error";
+        error["error"] = "You have been permanently banned from the site.";
+        conn->send(Json::writeString(Json::StreamWriterBuilder(), error));
+        conn->shutdown();
+    }
+
+    return "disconnected";
+}
diff --git a/chat-service/src/controllers/ChatWebSocketController.h b/chat-service/src/controllers/ChatWebSocketController.h
new file mode 100644
index 0000000..e192166
--- /dev/null
+++ b/chat-service/src/controllers/ChatWebSocketController.h
@@ -0,0 +1,103 @@
+#pragma once
+#include <drogon/WebSocketController.h>
+#include <drogon/PubSubService.h>
+#include <unordered_map>
+#include <memory>
+#include <chrono>
+
+using namespace drogon;
+
+class ChatWebSocketController : public drogon::WebSocketController<ChatWebSocketController> {
+public:
+    void handleNewMessage(const WebSocketConnectionPtr& wsConnPtr, std::string&& message,
+                          const WebSocketMessageType& type) override;
+
+    void handleNewConnection(const HttpRequestPtr& req, const WebSocketConnectionPtr& wsConnPtr) override;
+
+    void handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) override;
+
+    WS_PATH_LIST_BEGIN
+    WS_PATH_ADD("/chat/ws");
+    WS_PATH_ADD("/chat/stream/{1}");
+    WS_PATH_LIST_END
+
+    static void broadcastMessage(const std::string& realmId, const Json::Value& message);
+    static void broadcastToRealm(const std::string& realmId, const Json::Value& message);
+    static void broadcastToUser(const std::string& userId, const Json::Value& message);
+
+    // Get stats for all active realms (realmId -> participant count)
+    static Json::Value getRealmStats();
+
+    // Force linker to include this object file
+    static void ensureLoaded();
+
+    // Check and disconnect guests that have exceeded their session timeout
+    static void checkGuestTimeouts();
+
+private:
+    struct ConnectionInfo {
+        std::string realmId;
+        std::string userId;
+        std::string username;
+        std::string userColor;
+        std::string avatarUrl;
+        std::string fingerprint;  // Browser fingerprint for guests (empty for registered users)
+        bool isGuest = false;
+        bool isAdmin = false;           // Site admin (from JWT)
+        bool isSiteModerator = false;   // Site-wide moderator role (from JWT is_moderator claim)
+        bool isModerator = false;       // Has mod powers in current realm (computed: admin/siteMod/realmOwner/realmMod)
+        bool isStreamer = false;
+        bool isRestreamer = false;      // SECURITY FIX #9: Added for auth message handling
+        bool isApiKeyConnection = false;  // Bot API key connections (can only send/receive, no mod actions)
+        int64_t apiKeyId = 0;             // API key ID for bot connections (for connection limit tracking)
+        std::string botScopes;            // Scopes for bot connections (e.g., "chat:rw")
+        std::chrono::system_clock::time_point connectionTime;  // When this connection was established
+        int sessionTimeoutMinutes = 0;  // Random timeout for guests (0 = no timeout)
+    };
+
+    static std::unordered_map<WebSocketConnectionPtr, ConnectionInfo> connections_;
+    static std::unordered_map<WebSocketConnectionPtr, std::chrono::steady_clock::time_point> pendingConnections_;  // SECURITY FIX: Track pending API key validations
+    static std::unordered_map<int64_t, WebSocketConnectionPtr> apiKeyConnections_;  // SECURITY FIX: Track 1 connection per API key
+    static std::unordered_map<WebSocketConnectionPtr, std::chrono::steady_clock::time_point> lastRenameTime_;  // SECURITY FIX #24: Rate limit guest renames
+    static std::unordered_map<std::string, WebSocketConnectionPtr> usernameToConnection_;  // SECURITY FIX #25: O(1) username collision lookup
+    static std::mutex connectionsMutex_;
+
+    void handleChatMessage(const WebSocketConnectionPtr& wsConnPtr,
+                           const ConnectionInfo& info,
+                           const Json::Value& data);
+
+    void handleJoinRealm(const WebSocketConnectionPtr& wsConnPtr,
+                         ConnectionInfo& info,
+                         const Json::Value& data);
+
+    void handleModAction(const WebSocketConnectionPtr& wsConnPtr,
+                         const ConnectionInfo& info,
+                         const Json::Value& data);
+
+    void handleGetParticipants(const WebSocketConnectionPtr& wsConnPtr,
+                               const ConnectionInfo& info);
+
+    void handleRename(const WebSocketConnectionPtr& wsConnPtr,
+                      ConnectionInfo& info,
+                      const Json::Value& data);
+
+    // SECURITY FIX #9: Handle auth token sent as message instead of URL param
+    void handleAuthMessage(const WebSocketConnectionPtr& wsConnPtr,
+                           const Json::Value& data);
+
+    // SECURITY FIX: Handle bot API key authentication via message (not URL)
+    void handleBotApiKeyAuth(const WebSocketConnectionPtr& wsConnPtr,
+                             const std::string& apiKey);
+
+    void sendError(const WebSocketConnectionPtr& wsConnPtr, const std::string& error);
+    void sendSuccess(const WebSocketConnectionPtr& wsConnPtr, const Json::Value& data);
+
+    // Broadcast participant events (caller must hold connectionsMutex_)
+    static void broadcastParticipantJoined(const std::string& realmId, const ConnectionInfo& joinedUser);
+    static void broadcastParticipantLeft(const std::string& realmId, const std::string& userId, const std::string& username);
+
+public:
+    // Internal API: Try to uberban a user by ID (used by backend admin endpoint)
+    // Returns: fingerprint if user was connected and banned, empty string if not connected
+    static std::string tryUberbanConnectedUser(const std::string& userId);
+};
diff --git a/chat-service/src/controllers/ModerationController.cpp b/chat-service/src/controllers/ModerationController.cpp
new file mode 100644
index 0000000..9f4580b
--- /dev/null
+++ b/chat-service/src/controllers/ModerationController.cpp
@@ -0,0 +1,392 @@
+#include "ModerationController.h"
+#include "ChatWebSocketController.h"
+#include "../services/ModerationService.h"
+#include "../services/AuthService.h"
+#include <json/json.h>
+
+// Helper to check if user can perform uberban (admins + site moderators only)
+static bool canUberban(const services::UserClaims& claims) {
+    return claims.isAdmin || claims.isModerator;
+}
+
+// Helper to check if user can perform realm moderation (admin, site mod, or has mod flag)
+static bool canModerate(const services::UserClaims& claims) {
+    return claims.isAdmin || claims.isModerator;
+    // TODO: Add realm owner and per-realm moderator checks via backend API
+}
+
+void ModerationController::uberbanUser(const HttpRequestPtr& req,
+                                        std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string fingerprint = json.get("fingerprint", "").asString();
+    std::string reason = json.get("reason", "").asString();
+
+    if (fingerprint.empty()) {
+        Json::Value error;
+        error["error"] = "Fingerprint required";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    // Verify admin or site moderator
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canUberban(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized - only admins and site moderators can uberban";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.uberbanUser(fingerprint, claims->userId, reason);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::unUberbanUser(const HttpRequestPtr& req,
+                                          std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string fingerprint = json.get("fingerprint", "").asString();
+
+    if (fingerprint.empty()) {
+        Json::Value error;
+        error["error"] = "Fingerprint required";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canUberban(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized - only admins and site moderators can remove uberbans";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.unUberbanUser(fingerprint, claims->userId);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::getUberbannedUsers(const HttpRequestPtr& req,
+                                               std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canUberban(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    auto uberbannedFingerprints = modService.getUberbannedFingerprints();
+
+    Json::Value response;
+    response["uberbannedFingerprints"] = Json::arrayValue;
+    for (const auto& fp : uberbannedFingerprints) {
+        response["uberbannedFingerprints"].append(fp);
+    }
+
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::banUser(const HttpRequestPtr& req,
+                                    std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string targetUserId = json.get("targetUserId", "").asString();
+    std::string guestFingerprint = json.get("fingerprint", "").asString();
+    std::string reason = json.get("reason", "").asString();
+
+    // Verify moderator
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canModerate(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.banUserFromRealm(realmId, targetUserId, claims->userId, reason, guestFingerprint);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::unbanUser(const HttpRequestPtr& req,
+                                      std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string targetUserId = json.get("targetUserId", "").asString();
+    std::string guestFingerprint = json.get("fingerprint", "").asString();
+
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canModerate(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.unbanUserFromRealm(realmId, targetUserId, claims->userId, guestFingerprint);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::getBannedUsers(const HttpRequestPtr& req,
+                                           std::function<void(const HttpResponsePtr&)>&& callback,
+                                           const std::string& realmId) {
+    auto& modService = services::ModerationService::getInstance();
+    auto bannedIdentifiers = modService.getRealmBannedIdentifiers(realmId);
+
+    Json::Value response;
+    response["bannedUsers"] = Json::arrayValue;
+    for (const auto& identifier : bannedIdentifiers) {
+        response["bannedUsers"].append(identifier);
+    }
+
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::kickUser(const HttpRequestPtr& req,
+                                     std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string targetUserId = json.get("targetUserId", "").asString();
+    std::string reason = json.get("reason", "").asString();
+    int duration = json.get("duration", 60).asInt(); // Default 1 minute
+
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canModerate(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.kickUser(realmId, targetUserId, claims->userId, reason, duration);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::muteUser(const HttpRequestPtr& req,
+                                     std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string targetUserId = json.get("targetUserId", "").asString();
+    int duration = json.get("duration", 0).asInt(); // 0 = permanent (default)
+    std::string reason = json.get("reason", "").asString();
+
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canModerate(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.muteUser(realmId, targetUserId, claims->userId, duration, reason);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+void ModerationController::unmuteUser(const HttpRequestPtr& req,
+                                       std::function<void(const HttpResponsePtr&)>&& callback) {
+    auto jsonPtr = req->getJsonObject();
+    if (!jsonPtr) {
+        Json::Value error;
+        error["error"] = "Invalid JSON";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k400BadRequest);
+        callback(resp);
+        return;
+    }
+
+    auto& json = *jsonPtr;
+    std::string realmId = json.get("realmId", "").asString();
+    std::string targetUserId = json.get("targetUserId", "").asString();
+
+    auto& authService = services::AuthService::getInstance();
+    auto token = req->getHeader("Authorization");
+    if (token.find("Bearer ") == 0) token = token.substr(7);
+
+    auto claims = authService.verifyToken(token);
+    if (!claims.has_value() || !canModerate(*claims)) {
+        Json::Value error;
+        error["error"] = "Unauthorized";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        callback(resp);
+        return;
+    }
+
+    auto& modService = services::ModerationService::getInstance();
+    bool success = modService.unmuteUser(realmId, targetUserId, claims->userId);
+
+    Json::Value response;
+    response["success"] = success;
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
+
+// Internal API: Called by backend to uberban a user
+// Option C: All registered user uberbans are deferred - fingerprint captured on reconnect
+// If user is connected: disconnect them + set pending_uberban (fingerprint captured on reconnect)
+// If not connected: backend should set pending_uberban
+// Returns { disconnected: true/false }
+void ModerationController::internalUberbanUser(const HttpRequestPtr& req,
+                                                std::function<void(const HttpResponsePtr&)>&& callback,
+                                                const std::string& userId) {
+    // This is an internal API - no auth check needed (only accessible from within Docker network)
+    // The backend AdminController handles authentication before calling this
+
+    // Try to disconnect the user if they're connected (sets pending_uberban + disconnects)
+    std::string result = ChatWebSocketController::tryUberbanConnectedUser(userId);
+
+    Json::Value response;
+    if (result == "disconnected") {
+        // User was connected - disconnected and pending_uberban set
+        // Fingerprint will be captured on reconnect
+        response["disconnected"] = true;
+        response["immediate"] = false;  // Fingerprint captured on reconnect
+        LOG_INFO << "Internal uberban: User " << userId << " was connected, disconnected (pending uberban)";
+    } else {
+        // User not connected - caller should set pending_uberban
+        response["disconnected"] = false;
+        response["immediate"] = false;
+        LOG_INFO << "Internal uberban: User " << userId << " not connected, pending uberban needed";
+    }
+
+    auto resp = HttpResponse::newHttpJsonResponse(response);
+    callback(resp);
+}
diff --git a/chat-service/src/controllers/ModerationController.h b/chat-service/src/controllers/ModerationController.h
new file mode 100644
index 0000000..edf296b
--- /dev/null
+++ b/chat-service/src/controllers/ModerationController.h
@@ -0,0 +1,46 @@
+#pragma once
+#include <drogon/HttpController.h>
+
+using namespace drogon;
+
+class ModerationController : public drogon::HttpController<ModerationController> {
+public:
+    METHOD_LIST_BEGIN
+    // Site-wide uberban (admins + site moderators only)
+    ADD_METHOD_TO(ModerationController::uberbanUser, "/api/chat/uberban", Post);
+    ADD_METHOD_TO(ModerationController::unUberbanUser, "/api/chat/unuberban", Post);
+    ADD_METHOD_TO(ModerationController::getUberbannedUsers, "/api/chat/uberbanned", Get);
+
+    // Per-realm ban (admins, site mods, realm owners, realm mods)
+    ADD_METHOD_TO(ModerationController::banUser, "/api/chat/ban", Post);
+    ADD_METHOD_TO(ModerationController::unbanUser, "/api/chat/unban", Post);
+    ADD_METHOD_TO(ModerationController::getBannedUsers, "/api/chat/banned/{realmId}", Get);
+
+    // Kick (admins, site mods, realm owners, realm mods)
+    ADD_METHOD_TO(ModerationController::kickUser, "/api/chat/kick", Post);
+
+    // Mute (admins, site mods, realm owners, realm mods)
+    ADD_METHOD_TO(ModerationController::muteUser, "/api/chat/mute", Post);
+    ADD_METHOD_TO(ModerationController::unmuteUser, "/api/chat/unmute", Post);
+
+    // Internal endpoint for backend to uberban a connected user (gets fingerprint from active connection)
+    ADD_METHOD_TO(ModerationController::internalUberbanUser, "/api/internal/user/{userId}/uberban", Post);
+    METHOD_LIST_END
+
+    void uberbanUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void unUberbanUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void getUberbannedUsers(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+
+    void banUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void unbanUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void getBannedUsers(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback,
+                        const std::string& realmId);
+
+    void kickUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+
+    void muteUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+    void unmuteUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback);
+
+    void internalUberbanUser(const HttpRequestPtr& req, std::function<void(const HttpResponsePtr&)>&& callback,
+                             const std::string& userId);
+};
diff --git a/chat-service/src/controllers/WatchSyncController.cpp b/chat-service/src/controllers/WatchSyncController.cpp
new file mode 100644
index 0000000..bf0e501
--- /dev/null
+++ b/chat-service/src/controllers/WatchSyncController.cpp
@@ -0,0 +1,1470 @@
+#include "WatchSyncController.h"
+#include "../services/AuthService.h"
+#include <drogon/HttpClient.h>
+#include <json/json.h>
+#include <iostream>
+#include <set>
+
+std::unordered_map<WebSocketConnectionPtr, WatchSyncController::ViewerInfo>
+    WatchSyncController::viewers_;
+std::mutex WatchSyncController::viewersMutex_;
+
+std::unordered_map<std::string, WatchSyncController::RoomState>
+    WatchSyncController::roomStates_;
+std::mutex WatchSyncController::roomStatesMutex_;
+
+std::thread WatchSyncController::syncLoopThread_;
+std::atomic<bool> WatchSyncController::syncLoopRunning_{false};
+std::mutex WatchSyncController::syncLoopMutex_;
+
+// Lead-in duration in milliseconds (time for clients to buffer before playback)
+static constexpr int64_t LEAD_IN_DURATION_MS = 3000;
+// Sync broadcast interval in milliseconds
+static constexpr int64_t SYNC_INTERVAL_MS = 1000;
+
+void WatchSyncController::ensureLoaded() {
+    // Force linker to include this object file
+}
+
+void WatchSyncController::startSyncLoop() {
+    std::lock_guard<std::mutex> lock(syncLoopMutex_);
+
+    if (syncLoopRunning_.load()) {
+        return; // Already running
+    }
+
+    // Make sure any previous thread is fully cleaned up
+    if (syncLoopThread_.joinable()) {
+        syncLoopThread_.join();
+    }
+
+    syncLoopRunning_.store(true);
+    LOG_INFO << "Starting watch sync loop";
+    syncLoopThread_ = std::thread([]() {
+        while (syncLoopRunning_.load()) {
+            syncLoop();
+            std::this_thread::sleep_for(std::chrono::milliseconds(SYNC_INTERVAL_MS));
+        }
+    });
+}
+
+void WatchSyncController::stopSyncLoop() {
+    std::lock_guard<std::mutex> lock(syncLoopMutex_);
+
+    if (!syncLoopRunning_.load()) {
+        return; // Not running
+    }
+
+    LOG_INFO << "Stopping watch sync loop";
+    syncLoopRunning_.store(false);
+
+    if (syncLoopThread_.joinable()) {
+        try {
+            syncLoopThread_.join();
+        } catch (...) {
+            // If join fails, detach to prevent terminate on destruction
+            LOG_WARN << "Failed to join sync loop thread, detaching";
+            syncLoopThread_.detach();
+        }
+    }
+}
+
+// Helper to check if a connection is still valid (exists in viewers_ map)
+bool WatchSyncController::isConnectionValid(const WebSocketConnectionPtr& wsConnPtr) {
+    std::lock_guard<std::mutex> lock(viewersMutex_);
+    return viewers_.find(wsConnPtr) != viewers_.end();
+}
+
+// Helper to safely send to a connection (checks validity first)
+void WatchSyncController::safeSend(const WebSocketConnectionPtr& wsConnPtr, const std::string& message) {
+    if (!isConnectionValid(wsConnPtr)) {
+        LOG_DEBUG << "Skipping send to closed connection";
+        return;
+    }
+    try {
+        wsConnPtr->send(message);
+    } catch (const std::exception& e) {
+        LOG_WARN << "Exception sending to connection: " << e.what();
+    }
+}
+
+void WatchSyncController::syncLoop() {
+    std::vector<std::string> activeRooms;
+
+    // Get list of rooms with viewers
+    {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        std::set<std::string> roomSet;
+        for (const auto& [conn, info] : viewers_) {
+            if (!info.realmId.empty()) {
+                roomSet.insert(info.realmId);
+            }
+        }
+        activeRooms.assign(roomSet.begin(), roomSet.end());
+    }
+
+    // Broadcast sync to each active room
+    for (const auto& realmId : activeRooms) {
+        broadcastRoomSync(realmId);
+    }
+}
+
+double WatchSyncController::getExpectedTime(const RoomState& state) {
+    if (state.playbackState != "playing") {
+        return state.currentTime;
+    }
+
+    // Handle lead-in period
+    if (state.leadInActive) {
+        auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+            std::chrono::system_clock::now().time_since_epoch()).count();
+        int64_t elapsed = now - state.leadInStartMs;
+        if (elapsed < LEAD_IN_DURATION_MS) {
+            // Still in lead-in, return the target start time
+            return state.currentTime;
+        }
+        // Lead-in complete, calculate based on when lead-in ended
+        double elapsedSinceLeadIn = (elapsed - LEAD_IN_DURATION_MS) / 1000.0;
+        return state.currentTime + elapsedSinceLeadIn;
+    }
+
+    // Normal playback - calculate time based on last update
+    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+        std::chrono::system_clock::now().time_since_epoch()).count();
+    double elapsedSeconds = (now - state.lastUpdateMs) / 1000.0;
+    return state.currentTime + elapsedSeconds;
+}
+
+void WatchSyncController::updateRoomStateFromDb(const std::string& realmId) {
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpRequest();
+    httpReq->setPath("/api/watch/" + realmId + "/state");
+    httpReq->setMethod(drogon::Get);
+
+    client->sendRequest(httpReq, [realmId](ReqResult result, const HttpResponsePtr& resp) {
+        if (result != ReqResult::Ok || !resp || resp->getStatusCode() != k200OK) {
+            return;
+        }
+
+        auto json = resp->getJsonObject();
+        if (!json || !(*json)["success"].asBool()) {
+            return;
+        }
+
+        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+        auto& state = roomStates_[realmId];
+
+        std::string newPlaybackState = (*json)["playbackState"].asString();
+        bool wasPlaying = state.playbackState == "playing";
+        bool nowPlaying = newPlaybackState == "playing";
+
+        state.playbackState = newPlaybackState;
+        state.currentTime = (*json)["currentTime"].asDouble();
+        state.lastUpdateMs = std::chrono::duration_cast<std::chrono::milliseconds>(
+            std::chrono::system_clock::now().time_since_epoch()).count();
+
+        if (!(*json)["currentVideo"].isNull()) {
+            auto& video = (*json)["currentVideo"];
+            state.currentVideoId = video["youtubeVideoId"].asString();
+            state.currentPlaylistItemId = video["id"].asInt64();
+            state.currentVideoTitle = video["title"].asString();
+            state.durationSeconds = video["durationSeconds"].asInt();
+        } else {
+            state.currentVideoId.clear();
+            state.currentPlaylistItemId = 0;
+            state.currentVideoTitle.clear();
+            state.durationSeconds = 0;
+        }
+
+        // Start lead-in if transitioning to playing
+        if (!wasPlaying && nowPlaying) {
+            state.leadInActive = true;
+            state.leadInStartMs = state.lastUpdateMs;
+            LOG_INFO << "Starting lead-in for room " << realmId;
+        }
+    });
+}
+
+void WatchSyncController::broadcastRoomSync(const std::string& realmId) {
+    RoomState state;
+    bool hasState = false;
+    bool shouldAutoAdvance = false;
+
+    {
+        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+        auto it = roomStates_.find(realmId);
+        if (it != roomStates_.end()) {
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+
+            // FIX: Update lead-in flag BEFORE copying state to ensure consistency
+            // Check if lead-in is complete and update the source first
+            if (it->second.leadInActive) {
+                if (now - it->second.leadInStartMs >= LEAD_IN_DURATION_MS) {
+                    it->second.leadInActive = false;
+                    LOG_INFO << "Lead-in complete for room " << realmId;
+                }
+            }
+
+            // Check if video has ended and should auto-advance
+            if (it->second.playbackState == "playing" &&
+                it->second.durationSeconds > 0 &&
+                !it->second.currentVideoId.empty()) {
+                double expectedTime = getExpectedTime(it->second);
+                // Add 1 second buffer to account for timing variations
+                if (expectedTime >= static_cast<double>(it->second.durationSeconds) + 1.0) {
+                    shouldAutoAdvance = true;
+                    // Mark as ended to prevent multiple auto-advance calls
+                    it->second.playbackState = "ended";
+                    it->second.stateVersion++;
+                    LOG_INFO << "Video ended in room " << realmId << ", auto-advancing";
+                }
+            }
+
+            // NOW copy the state after all updates are done
+            state = it->second;
+            hasState = true;
+        }
+    }
+
+    if (!hasState) {
+        return;
+    }
+
+    // Auto-advance to next video (server-side, no owner required)
+    if (shouldAutoAdvance) {
+        autoAdvanceToNextVideo(realmId);
+        return; // Don't broadcast stale state, wait for next sync after advance
+    }
+
+    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+        std::chrono::system_clock::now().time_since_epoch()).count();
+
+    Json::Value sync;
+    sync["type"] = "sync";
+    sync["playbackState"] = state.playbackState;
+    sync["currentTime"] = getExpectedTime(state);
+    sync["serverTime"] = now;
+    sync["leadIn"] = state.leadInActive;
+
+    if (!state.currentVideoId.empty()) {
+        Json::Value video;
+        video["id"] = static_cast<Json::Int64>(state.currentPlaylistItemId);
+        video["youtubeVideoId"] = state.currentVideoId;
+        video["title"] = state.currentVideoTitle;
+        video["durationSeconds"] = state.durationSeconds;
+        sync["currentVideo"] = video;
+    }
+
+    broadcastToRoom(realmId, sync);
+}
+
+void WatchSyncController::autoAdvanceToNextVideo(const std::string& realmId) {
+    // Check skip debounce to prevent multiple auto-advance calls
+    {
+        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+        auto it = roomStates_.find(realmId);
+        if (it != roomStates_.end()) {
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+            if (now - it->second.lastSkipMs < SKIP_DEBOUNCE_MS) {
+                LOG_DEBUG << "Auto-advance debounced for room " << realmId;
+                return;
+            }
+            // Mark skip time to prevent concurrent skips
+            it->second.lastSkipMs = now;
+        }
+    }
+
+    // Call backend to get playlist (includes isLocked status)
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpRequest();
+    httpReq->setPath("/api/watch/" + realmId + "/playlist");
+    httpReq->setMethod(drogon::Get);
+
+    client->sendRequest(httpReq, [realmId](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            if (result != ReqResult::Ok || !resp) {
+                LOG_WARN << "Failed to get playlist for auto-advance in room " << realmId;
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                return;
+            }
+
+            // Analyze playlist: count queued videos, check if current is locked
+            int queuedCount = 0;
+            int lockedCount = 0;
+            bool currentVideoIsLocked = false;
+            int64_t currentPlaylistItemId = 0;
+
+            // Get current video ID from room state
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto it = roomStates_.find(realmId);
+                if (it != roomStates_.end()) {
+                    currentPlaylistItemId = it->second.currentPlaylistItemId;
+                }
+            }
+
+            const Json::Value& playlist = (*json)["playlist"];
+            for (const auto& item : playlist) {
+                std::string status = item["status"].asString();
+                bool isLocked = item.isMember("isLocked") && item["isLocked"].asBool();
+
+                if (status == "queued") {
+                    queuedCount++;
+                    if (isLocked) lockedCount++;
+                } else if (status == "playing") {
+                    currentVideoIsLocked = isLocked;
+                }
+            }
+
+            LOG_INFO << "Auto-advance: Room " << realmId << " - " << queuedCount
+                     << " queued, " << lockedCount << " locked, current locked: "
+                     << (currentVideoIsLocked ? "yes" : "no");
+
+            // Get viewer count for silent loop logic
+            int viewerCount = getViewerCount(realmId);
+
+            bool shouldRepeat = false;
+            bool shouldRestartLocked = false;
+            bool silentLoop = false;
+            RoomState stateCopy;
+
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto it = roomStates_.find(realmId);
+                if (it != roomStates_.end()) {
+                    auto& state = it->second;
+                    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                        std::chrono::system_clock::now().time_since_epoch()).count();
+
+                    // Update locked status in room state
+                    state.currentVideoLocked = currentVideoIsLocked;
+
+                    if (currentVideoIsLocked) {
+                        // LOCKED VIDEO: Loop forever, don't move to history
+                        shouldRestartLocked = true;
+                        state.currentTime = 0.0;
+                        state.playbackState = "playing";
+                        state.lastUpdateMs = now;
+                        state.leadInActive = true;
+                        state.leadInStartMs = now;
+                        state.stateVersion++;
+
+                        // Silent loop if no viewers
+                        if (viewerCount == 0) {
+                            silentLoop = true;
+                            LOG_DEBUG << "Auto-advance: Silent loop for locked video in room " << realmId
+                                     << " (no viewers)";
+                        } else {
+                            LOG_INFO << "Auto-advance: Restarting locked video in room " << realmId;
+                        }
+                    } else if (queuedCount > 0) {
+                        // Videos in queue, do normal skip
+                        state.repeatCount = 0;
+                        state.isRepeating = false;
+                    } else if (state.repeatCount < 3 && !state.currentVideoId.empty()) {
+                        // No queued videos, repeat current (up to 3 times)
+                        shouldRepeat = true;
+                        state.repeatCount++;
+                        state.isRepeating = true;
+                        state.currentTime = 0.0;
+                        state.playbackState = "playing";
+                        state.lastUpdateMs = now;
+                        state.leadInActive = true;
+                        state.leadInStartMs = now;
+                        state.stateVersion++;
+                        LOG_INFO << "Auto-advance: Repeating video in room " << realmId
+                                 << " (repeat #" << state.repeatCount << " of 3)";
+                    } else {
+                        // Max repeats reached, end playlist
+                        state.repeatCount = 0;
+                        state.isRepeating = false;
+                        LOG_INFO << "Auto-advance: Max repeats reached in room " << realmId;
+                    }
+
+                    stateCopy = state;
+                }
+            }
+
+            if (shouldRestartLocked) {
+                // Locked video restart - only broadcast if there are viewers
+                if (!silentLoop) {
+                    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                        std::chrono::system_clock::now().time_since_epoch()).count();
+
+                    Json::Value stateChange;
+                    stateChange["type"] = "state_change";
+                    stateChange["event"] = "locked_restart";
+                    stateChange["triggeredBy"] = "server";
+                    stateChange["playbackState"] = "playing";
+                    stateChange["currentTime"] = 0.0;
+                    stateChange["serverTime"] = static_cast<Json::Int64>(now);
+                    stateChange["leadIn"] = true;
+                    stateChange["isLocked"] = true;
+
+                    if (!stateCopy.currentVideoId.empty()) {
+                        Json::Value video;
+                        video["id"] = static_cast<Json::Int64>(stateCopy.currentPlaylistItemId);
+                        video["youtubeVideoId"] = stateCopy.currentVideoId;
+                        video["title"] = stateCopy.currentVideoTitle;
+                        video["durationSeconds"] = stateCopy.durationSeconds;
+                        video["isLocked"] = true;
+                        stateChange["currentVideo"] = video;
+                    }
+
+                    broadcastToRoom(realmId, stateChange);
+                }
+                return;  // Don't proceed to next video logic
+            }
+
+            if (shouldRepeat) {
+                // Broadcast repeat event using the stateCopy we already have
+                auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                    std::chrono::system_clock::now().time_since_epoch()).count();
+
+                Json::Value stateChange;
+                stateChange["type"] = "state_change";
+                stateChange["event"] = "repeat";
+                stateChange["triggeredBy"] = "server";
+                stateChange["playbackState"] = "playing";
+                stateChange["currentTime"] = 0.0;
+                stateChange["serverTime"] = static_cast<Json::Int64>(now);
+                stateChange["leadIn"] = true;
+                stateChange["repeatCount"] = stateCopy.repeatCount;
+                stateChange["isRepeating"] = true;
+
+                if (!stateCopy.currentVideoId.empty()) {
+                    Json::Value video;
+                    video["id"] = static_cast<Json::Int64>(stateCopy.currentPlaylistItemId);
+                    video["youtubeVideoId"] = stateCopy.currentVideoId;
+                    video["title"] = stateCopy.currentVideoTitle;
+                    video["durationSeconds"] = stateCopy.durationSeconds;
+                    stateChange["currentVideo"] = video;
+                }
+
+                broadcastToRoom(realmId, stateChange);
+            } else if (queuedCount > 0) {
+                // Advance to next video via backend API
+                auto skipClient = HttpClient::newHttpClient("http://drogon-backend:8080");
+                auto skipReq = HttpRequest::newHttpJsonRequest(Json::Value());
+                skipReq->setPath("/api/watch/" + realmId + "/next");
+                skipReq->setMethod(drogon::Post);
+
+                skipClient->sendRequest(skipReq, [realmId](ReqResult skipResult, const HttpResponsePtr& skipResp) {
+                    if (skipResult != ReqResult::Ok || !skipResp) {
+                        LOG_WARN << "Failed to auto-advance video in room " << realmId;
+                        return;
+                    }
+
+                    auto skipJson = skipResp->getJsonObject();
+                    if (!skipJson || !(*skipJson)["success"].asBool()) {
+                        LOG_WARN << "Backend rejected auto-advance for room " << realmId;
+                        return;
+                    }
+
+                    // Update local state and broadcast
+                    {
+                        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                        auto it = roomStates_.find(realmId);
+                        if (it != roomStates_.end()) {
+                            auto& state = it->second;
+                            state.playbackState = (*skipJson)["playbackState"].asString();
+                            state.currentTime = (*skipJson)["currentTime"].asDouble();
+                            state.lastUpdateMs = std::chrono::duration_cast<std::chrono::milliseconds>(
+                                std::chrono::system_clock::now().time_since_epoch()).count();
+                            state.leadInActive = true;
+                            state.leadInStartMs = state.lastUpdateMs;
+                            state.repeatCount = 0;
+                            state.isRepeating = false;
+
+                            if ((*skipJson).isMember("currentVideo") && !(*skipJson)["currentVideo"].isNull()) {
+                                auto& video = (*skipJson)["currentVideo"];
+                                state.currentVideoId = video["youtubeVideoId"].asString();
+                                state.currentPlaylistItemId = video["id"].asInt64();
+                                state.currentVideoTitle = video["title"].asString();
+                                state.durationSeconds = video["durationSeconds"].asInt();
+                                state.currentVideoLocked = video.isMember("isLocked") && video["isLocked"].asBool();
+                            } else {
+                                state.currentVideoId.clear();
+                                state.currentPlaylistItemId = 0;
+                                state.currentVideoTitle.clear();
+                                state.durationSeconds = 0;
+                                state.currentVideoLocked = false;
+                            }
+                        }
+                    }
+
+                    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                        std::chrono::system_clock::now().time_since_epoch()).count();
+
+                    Json::Value stateChange;
+                    stateChange["type"] = "state_change";
+                    stateChange["event"] = "skip";
+                    stateChange["triggeredBy"] = "server";
+                    stateChange["serverTime"] = static_cast<Json::Int64>(now);
+                    stateChange["playbackState"] = (*skipJson)["playbackState"];
+                    stateChange["currentTime"] = (*skipJson)["currentTime"];
+                    stateChange["leadIn"] = true;
+
+                    if ((*skipJson).isMember("currentVideo")) {
+                        stateChange["currentVideo"] = (*skipJson)["currentVideo"];
+                    }
+
+                    broadcastToRoom(realmId, stateChange);
+                    LOG_INFO << "Auto-advanced to next video in room " << realmId;
+                });
+            } else {
+                // No more videos, update state to ended
+                {
+                    std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                    auto it = roomStates_.find(realmId);
+                    if (it != roomStates_.end()) {
+                        it->second.playbackState = "ended";
+                        it->second.currentVideoId.clear();
+                        it->second.currentPlaylistItemId = 0;
+                    }
+                }
+
+                auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                    std::chrono::system_clock::now().time_since_epoch()).count();
+
+                Json::Value stateChange;
+                stateChange["type"] = "state_change";
+                stateChange["event"] = "ended";
+                stateChange["triggeredBy"] = "server";
+                stateChange["playbackState"] = "ended";
+                stateChange["currentVideo"] = Json::nullValue;
+                stateChange["serverTime"] = static_cast<Json::Int64>(now);
+
+                broadcastToRoom(realmId, stateChange);
+                LOG_INFO << "Playlist ended in room " << realmId;
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in auto-advance: " << e.what();
+        }
+    });
+}
+
+void WatchSyncController::handleNewConnection(const HttpRequestPtr& req,
+                                               const WebSocketConnectionPtr& wsConnPtr) {
+    LOG_INFO << "New watch sync connection from " << wsConnPtr->peerAddr().toIpPort();
+
+    auto realmId = req->getParameter("realmId");
+    auto token = req->getParameter("token");
+
+    LOG_INFO << "Watch sync connection for realmId: " << (realmId.empty() ? "(pending)" : realmId);
+
+    ViewerInfo info;
+    info.realmId = realmId;
+    info.isGuest = true;
+    info.connectionTime = std::chrono::system_clock::now();
+
+    // Authenticate if token provided
+    if (!token.empty()) {
+        auto userClaims = services::AuthService::getInstance().verifyToken(token);
+        if (userClaims) {
+            info.userId = userClaims->userId;
+            info.username = userClaims->username;
+            info.authToken = token;  // Store token for backend API calls
+            info.isGuest = false;
+            LOG_INFO << "Authenticated user: " << userClaims->username;
+        }
+    }
+
+    if (info.userId.empty()) {
+        info.userId = "guest_" + std::to_string(reinterpret_cast<uintptr_t>(wsConnPtr.get()));
+        info.username = "Guest";
+    }
+
+    {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        viewers_[wsConnPtr] = info;
+    }
+
+    // If realmId provided, auto-join and send welcome
+    if (!realmId.empty()) {
+        Json::Value joinData;
+        joinData["realmId"] = realmId;
+        handleJoinRoom(wsConnPtr, info, joinData);
+    }
+}
+
+void WatchSyncController::handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) {
+    std::string realmId;
+    std::string username;
+    bool hasViewersRemaining = false;
+    bool roomHasViewers = false;
+
+    {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        auto it = viewers_.find(wsConnPtr);
+        if (it != viewers_.end()) {
+            realmId = it->second.realmId;
+            username = it->second.username;
+            viewers_.erase(it);
+        }
+
+        // Check if any viewers remain
+        hasViewersRemaining = !viewers_.empty();
+
+        // Check if this specific room still has viewers
+        for (const auto& [conn, info] : viewers_) {
+            if (info.realmId == realmId) {
+                roomHasViewers = true;
+                break;
+            }
+        }
+    }
+
+    if (!realmId.empty()) {
+        LOG_INFO << "Viewer " << username << " left watch room " << realmId;
+
+        // Clean up room state if no viewers remain in that room
+        if (!roomHasViewers) {
+            std::lock_guard<std::mutex> lock(roomStatesMutex_);
+            roomStates_.erase(realmId);
+            LOG_INFO << "Cleaned up room state for " << realmId;
+        } else {
+            broadcastViewerCount(realmId);
+        }
+    }
+
+    // Stop sync loop if no viewers remain anywhere
+    if (!hasViewersRemaining) {
+        stopSyncLoop();
+    }
+}
+
+// Rate limiting check - returns true if message should be processed
+bool WatchSyncController::checkRateLimit(const WebSocketConnectionPtr& wsConnPtr) {
+    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+        std::chrono::system_clock::now().time_since_epoch()).count();
+
+    std::lock_guard<std::mutex> lock(viewersMutex_);
+    auto it = viewers_.find(wsConnPtr);
+    if (it == viewers_.end()) {
+        return false;
+    }
+
+    auto& info = it->second;
+
+    // Check minimum interval between messages
+    if (now - info.lastMessageMs < MIN_MESSAGE_INTERVAL_MS) {
+        LOG_DEBUG << "Rate limit: message too fast for " << info.username;
+        return false;
+    }
+
+    // Reset window if expired
+    if (now - info.windowStartMs > RATE_LIMIT_WINDOW_MS) {
+        info.windowStartMs = now;
+        info.messageCount = 0;
+    }
+
+    // Check message count
+    if (info.messageCount >= RATE_LIMIT_MESSAGES) {
+        LOG_WARN << "Rate limit exceeded for " << info.username;
+        return false;
+    }
+
+    // Update counters
+    info.lastMessageMs = now;
+    info.messageCount++;
+    return true;
+}
+
+void WatchSyncController::handleNewMessage(const WebSocketConnectionPtr& wsConnPtr,
+                                           std::string&& message,
+                                           const WebSocketMessageType& type) {
+    if (type != WebSocketMessageType::Text) {
+        return;
+    }
+
+    // Apply rate limiting
+    if (!checkRateLimit(wsConnPtr)) {
+        sendError(wsConnPtr, "Rate limit exceeded. Please slow down.");
+        return;
+    }
+
+    Json::Value json;
+    Json::Reader reader;
+    if (!reader.parse(message, json)) {
+        sendError(wsConnPtr, "Invalid JSON");
+        return;
+    }
+
+    std::string msgType = json["type"].asString();
+
+    ViewerInfo info;
+    {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        auto it = viewers_.find(wsConnPtr);
+        if (it == viewers_.end()) {
+            sendError(wsConnPtr, "Connection not found");
+            return;
+        }
+        info = it->second;
+    }
+
+    if (msgType == "join") {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        auto it = viewers_.find(wsConnPtr);
+        if (it != viewers_.end()) {
+            handleJoinRoom(wsConnPtr, it->second, json);
+        }
+    } else if (msgType == "sync_request") {
+        handleSyncRequest(wsConnPtr, info);
+    } else if (msgType == "play" || msgType == "pause" || msgType == "seek" || msgType == "skip") {
+        handlePlaybackControl(wsConnPtr, info, json);
+    } else if (msgType == "update_duration") {
+        handleUpdateDuration(wsConnPtr, info, json);
+    } else {
+        sendError(wsConnPtr, "Unknown message type: " + msgType);
+    }
+}
+
+void WatchSyncController::handleJoinRoom(const WebSocketConnectionPtr& wsConnPtr,
+                                          ViewerInfo& info,
+                                          const Json::Value& data) {
+    std::string newRealmId = data["realmId"].asString();
+    if (newRealmId.empty()) {
+        sendError(wsConnPtr, "realmId required");
+        return;
+    }
+
+    std::string oldRealmId = info.realmId;
+    info.realmId = newRealmId;
+
+    LOG_INFO << "Viewer " << info.username << " joined watch room " << newRealmId;
+
+    // Fetch room state and permissions from backend
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpRequest();
+    httpReq->setPath("/api/watch/" + newRealmId + "/state");
+    httpReq->setMethod(drogon::Get);
+
+    // Pass user token if available for permission checking
+    if (!info.authToken.empty()) {
+        httpReq->addHeader("Authorization", "Bearer " + info.authToken);
+    }
+
+    client->sendRequest(httpReq, [this, wsConnPtr, newRealmId](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            // Check if connection is still valid before processing
+            if (!isConnectionValid(wsConnPtr)) {
+                LOG_DEBUG << "Connection closed before join room callback completed";
+                return;
+            }
+
+            if (result != ReqResult::Ok || !resp || resp->getStatusCode() != k200OK) {
+                sendError(wsConnPtr, "Failed to get room state");
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                sendError(wsConnPtr, "Room not found");
+                return;
+            }
+
+            // Update permissions from response
+            {
+                std::lock_guard<std::mutex> lock(viewersMutex_);
+                auto it = viewers_.find(wsConnPtr);
+                if (it != viewers_.end()) {
+                    it->second.canAddToPlaylist = (*json)["canAddToPlaylist"].asBool();
+                    it->second.canControlPlayback = (*json)["canControlPlayback"].asBool();
+                }
+            }
+
+            // Initialize/update in-memory room state
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto& state = roomStates_[newRealmId];
+                auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                    std::chrono::system_clock::now().time_since_epoch()).count();
+                state.playbackState = (*json)["playbackState"].asString();
+                state.currentTime = (*json)["currentTime"].asDouble();
+                state.lastUpdateMs = now;
+                state.lastDbSyncMs = now;  // Mark as freshly synced from DB
+
+                if (!(*json)["currentVideo"].isNull()) {
+                    auto& video = (*json)["currentVideo"];
+                    state.currentVideoId = video["youtubeVideoId"].asString();
+                    state.currentPlaylistItemId = video["id"].asInt64();
+                    state.currentVideoTitle = video["title"].asString();
+                    state.durationSeconds = video["durationSeconds"].asInt();
+                }
+            }
+
+            // Start sync loop if not already running
+            startSyncLoop();
+
+            // Send welcome message with room state
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+
+            Json::Value welcome;
+            welcome["type"] = "welcome";
+            welcome["realmId"] = newRealmId;
+            welcome["realmName"] = (*json)["realmName"];
+            welcome["canAddToPlaylist"] = (*json)["canAddToPlaylist"];
+            welcome["canControlPlayback"] = (*json)["canControlPlayback"];
+            welcome["playbackState"] = (*json)["playbackState"];
+            welcome["currentTime"] = (*json)["currentTime"];
+            welcome["serverTime"] = static_cast<Json::Int64>(now);
+            welcome["viewerCount"] = getViewerCount(newRealmId);
+
+            if (!(*json)["currentVideo"].isNull()) {
+                welcome["currentVideo"] = (*json)["currentVideo"];
+            } else {
+                welcome["currentVideo"] = Json::nullValue;
+            }
+
+            safeSend(wsConnPtr, Json::writeString(Json::StreamWriterBuilder(), welcome));
+
+            // Broadcast updated viewer count
+            broadcastViewerCount(newRealmId);
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in join room callback: " << e.what();
+        }
+    });
+}
+
+void WatchSyncController::handleSyncRequest(const WebSocketConnectionPtr& wsConnPtr,
+                                            const ViewerInfo& info) {
+    if (info.realmId.empty()) {
+        sendError(wsConnPtr, "Not in a room");
+        return;
+    }
+
+    // Check in-memory state first
+    RoomState state;
+    bool hasState = false;
+    bool hasVideo = false;
+    bool isStale = false;
+
+    {
+        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+        auto it = roomStates_.find(info.realmId);
+        if (it != roomStates_.end()) {
+            state = it->second;
+            hasState = true;
+            hasVideo = !state.currentVideoId.empty();
+
+            // FIX: Check if state is stale and needs refresh from database
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+            isStale = (now - state.lastDbSyncMs > DB_SYNC_STALE_MS);
+        }
+    }
+
+    // If we have in-memory state WITH a video AND it's fresh, use it (fast path)
+    // Otherwise, fetch fresh from backend (handles case where video was just added)
+    if (!hasState || !hasVideo || isStale) {
+        // Fetch fresh state from backend
+        auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+        auto httpReq = HttpRequest::newHttpRequest();
+        httpReq->setPath("/api/watch/" + info.realmId + "/state");
+        httpReq->setMethod(drogon::Get);
+
+        std::string realmId = info.realmId;
+        client->sendRequest(httpReq, [this, wsConnPtr, realmId](ReqResult result, const HttpResponsePtr& resp) {
+            try {
+                if (!isConnectionValid(wsConnPtr)) {
+                    return;
+                }
+
+                if (result != ReqResult::Ok || !resp || resp->getStatusCode() != k200OK) {
+                    return;
+                }
+
+                auto json = resp->getJsonObject();
+                if (!json || !(*json)["success"].asBool()) {
+                    return;
+                }
+
+                auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                    std::chrono::system_clock::now().time_since_epoch()).count();
+
+                Json::Value sync;
+                sync["type"] = "sync";
+                sync["playbackState"] = (*json)["playbackState"];
+                sync["currentTime"] = (*json)["currentTime"];
+                sync["serverTime"] = static_cast<Json::Int64>(now);
+
+                if (!(*json)["currentVideo"].isNull()) {
+                    sync["currentVideo"] = (*json)["currentVideo"];
+
+                    // Update in-memory state so subsequent requests are fast
+                    auto& cv = (*json)["currentVideo"];
+                    std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                    auto& roomState = roomStates_[realmId];
+                    roomState.playbackState = (*json)["playbackState"].asString();
+                    roomState.currentTime = (*json)["currentTime"].asDouble();
+                    roomState.lastUpdateMs = now;
+                    roomState.lastDbSyncMs = now;  // Mark as freshly synced from DB
+                    roomState.currentVideoId = cv["youtubeVideoId"].asString();
+                    roomState.currentPlaylistItemId = cv["id"].asInt64();
+                    roomState.currentVideoTitle = cv["title"].asString();
+                    roomState.durationSeconds = cv["durationSeconds"].asInt();
+                    roomState.currentVideoLocked = cv.isMember("isLocked") && cv["isLocked"].asBool();
+                }
+
+                safeSend(wsConnPtr, Json::writeString(Json::StreamWriterBuilder(), sync));
+            } catch (const std::exception& e) {
+                LOG_ERROR << "Exception in sync request callback: " << e.what();
+            }
+        });
+        return;
+    }
+
+    auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+        std::chrono::system_clock::now().time_since_epoch()).count();
+
+    Json::Value sync;
+    sync["type"] = "sync";
+    sync["playbackState"] = state.playbackState;
+    sync["currentTime"] = getExpectedTime(state);
+    sync["serverTime"] = static_cast<Json::Int64>(now);
+    sync["leadIn"] = state.leadInActive;
+
+    if (!state.currentVideoId.empty()) {
+        Json::Value video;
+        video["id"] = static_cast<Json::Int64>(state.currentPlaylistItemId);
+        video["youtubeVideoId"] = state.currentVideoId;
+        video["title"] = state.currentVideoTitle;
+        video["durationSeconds"] = state.durationSeconds;
+        sync["currentVideo"] = video;
+    }
+
+    wsConnPtr->send(Json::writeString(Json::StreamWriterBuilder(), sync));
+}
+
+void WatchSyncController::handlePlaybackControl(const WebSocketConnectionPtr& wsConnPtr,
+                                                 const ViewerInfo& info,
+                                                 const Json::Value& data) {
+    if (info.realmId.empty()) {
+        sendError(wsConnPtr, "Not in a room");
+        return;
+    }
+
+    if (!info.canControlPlayback) {
+        sendError(wsConnPtr, "Only the room owner can control playback");
+        return;
+    }
+
+    std::string action = data["type"].asString();
+    std::string endpoint;
+
+    if (action == "play") {
+        endpoint = "/api/watch/" + info.realmId + "/play";
+    } else if (action == "pause") {
+        endpoint = "/api/watch/" + info.realmId + "/pause";
+    } else if (action == "seek") {
+        endpoint = "/api/watch/" + info.realmId + "/seek";
+    } else if (action == "skip") {
+        // For skip, check if we should repeat the last video instead
+        handleSkipWithRepeat(wsConnPtr, info, data);
+        return;
+    } else {
+        sendError(wsConnPtr, "Unknown action");
+        return;
+    }
+
+    // Forward to backend API
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpJsonRequest(data);
+    httpReq->setPath(endpoint);
+    httpReq->setMethod(drogon::Post);
+
+    // Pass auth token to backend for permission verification
+    if (!info.authToken.empty()) {
+        httpReq->addHeader("Authorization", "Bearer " + info.authToken);
+    }
+
+    std::string realmId = info.realmId;
+    std::string username = info.username;
+
+    client->sendRequest(httpReq, [this, wsConnPtr, action, realmId, username](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            if (result != ReqResult::Ok || !resp) {
+                sendError(wsConnPtr, "Failed to update playback state");
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                std::string error = json ? (*json)["error"].asString() : "Unknown error";
+                sendError(wsConnPtr, error);
+                return;
+            }
+
+            // Update in-memory room state
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto it = roomStates_.find(realmId);
+                if (it != roomStates_.end()) {
+                    auto& state = it->second;
+                    std::string oldPlaybackState = state.playbackState;
+
+                    if (json->isMember("playbackState")) {
+                        state.playbackState = (*json)["playbackState"].asString();
+                    }
+                    if (json->isMember("currentTime")) {
+                        state.currentTime = (*json)["currentTime"].asDouble();
+                    }
+
+                    state.lastUpdateMs = std::chrono::duration_cast<std::chrono::milliseconds>(
+                        std::chrono::system_clock::now().time_since_epoch()).count();
+
+                    // Handle lead-in for play action (transitioning from paused to playing)
+                    if (action == "play" && oldPlaybackState != "playing" && state.playbackState == "playing") {
+                        state.leadInActive = true;
+                        state.leadInStartMs = state.lastUpdateMs;
+                        LOG_INFO << "Starting lead-in for room " << realmId << " (play action)";
+                    }
+
+                    // Clear lead-in on pause/seek
+                    if (action == "pause" || action == "seek") {
+                        state.leadInActive = false;
+                    }
+
+                    // Update video info on skip
+                    if (json->isMember("currentVideo") && !(*json)["currentVideo"].isNull()) {
+                        auto& video = (*json)["currentVideo"];
+                        state.currentVideoId = video["youtubeVideoId"].asString();
+                        state.currentPlaylistItemId = video["id"].asInt64();
+                        state.currentVideoTitle = video["title"].asString();
+                        state.durationSeconds = video["durationSeconds"].asInt();
+                    } else if (json->isMember("currentVideo") && (*json)["currentVideo"].isNull()) {
+                        state.currentVideoId.clear();
+                        state.currentPlaylistItemId = 0;
+                        state.currentVideoTitle.clear();
+                        state.durationSeconds = 0;
+                    }
+                }
+            }
+
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+
+            // Broadcast state change to all viewers in room
+            Json::Value stateChange;
+            stateChange["type"] = "state_change";
+            stateChange["event"] = action;
+            stateChange["triggeredBy"] = username;
+            stateChange["serverTime"] = static_cast<Json::Int64>(now);
+
+            if (json->isMember("playbackState")) {
+                stateChange["playbackState"] = (*json)["playbackState"];
+            }
+            if (json->isMember("currentTime")) {
+                stateChange["currentTime"] = (*json)["currentTime"];
+            }
+            if (json->isMember("currentVideo")) {
+                stateChange["currentVideo"] = (*json)["currentVideo"];
+            }
+
+            // Include lead-in flag for play actions
+            if (action == "play") {
+                stateChange["leadIn"] = true;
+            }
+
+            broadcastToRoom(realmId, stateChange);
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in playback control callback: " << e.what();
+        }
+    });
+}
+
+void WatchSyncController::broadcastToRoom(const std::string& realmId, const Json::Value& message) {
+    std::string messageStr = Json::writeString(Json::StreamWriterBuilder(), message);
+
+    // Copy connections to a local vector before releasing lock
+    std::vector<WebSocketConnectionPtr> connections;
+    {
+        std::lock_guard<std::mutex> lock(viewersMutex_);
+        for (const auto& [conn, info] : viewers_) {
+            if (info.realmId == realmId) {
+                connections.push_back(conn);
+            }
+        }
+    }
+
+    // Send outside the lock - connections hold shared_ptr so objects stay alive
+    for (const auto& conn : connections) {
+        try {
+            conn->send(messageStr);
+        } catch (const std::exception& e) {
+            LOG_WARN << "Failed to send to connection: " << e.what();
+        }
+    }
+}
+
+int WatchSyncController::getViewerCount(const std::string& realmId) {
+    std::lock_guard<std::mutex> lock(viewersMutex_);
+    int count = 0;
+    for (const auto& [conn, info] : viewers_) {
+        if (info.realmId == realmId) {
+            count++;
+        }
+    }
+    return count;
+}
+
+void WatchSyncController::broadcastViewerCount(const std::string& realmId) {
+    Json::Value msg;
+    msg["type"] = "viewer_count";
+    msg["count"] = getViewerCount(realmId);
+
+    broadcastToRoom(realmId, msg);
+}
+
+void WatchSyncController::sendError(const WebSocketConnectionPtr& wsConnPtr, const std::string& error) {
+    Json::Value msg;
+    msg["type"] = "error";
+    msg["error"] = error;
+    safeSend(wsConnPtr, Json::writeString(Json::StreamWriterBuilder(), msg));
+}
+
+void WatchSyncController::sendSuccess(const WebSocketConnectionPtr& wsConnPtr, const Json::Value& data) {
+    Json::Value msg = data;
+    msg["success"] = true;
+    safeSend(wsConnPtr, Json::writeString(Json::StreamWriterBuilder(), msg));
+}
+
+void WatchSyncController::handleSkipWithRepeat(const WebSocketConnectionPtr& wsConnPtr,
+                                                const ViewerInfo& info,
+                                                const Json::Value& data) {
+    // Check skip debounce to prevent duplicate skip requests from network retries
+    {
+        std::lock_guard<std::mutex> lock(roomStatesMutex_);
+        auto it = roomStates_.find(info.realmId);
+        if (it != roomStates_.end()) {
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+            if (now - it->second.lastSkipMs < SKIP_DEBOUNCE_MS) {
+                LOG_DEBUG << "Skip debounced for room " << info.realmId;
+                sendError(wsConnPtr, "Skip in progress, please wait");
+                return;
+            }
+            // Mark skip time to prevent concurrent skips
+            it->second.lastSkipMs = now;
+        }
+    }
+
+    // Check if there are queued videos by calling backend playlist API
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpRequest();
+    httpReq->setPath("/api/watch/" + info.realmId + "/playlist");
+    httpReq->setMethod(drogon::Get);
+
+    if (!info.authToken.empty()) {
+        httpReq->addHeader("Authorization", "Bearer " + info.authToken);
+    }
+
+    std::string realmId = info.realmId;
+    std::string username = info.username;
+    std::string authToken = info.authToken;
+
+    client->sendRequest(httpReq, [this, wsConnPtr, realmId, username, authToken, data](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            if (result != ReqResult::Ok || !resp) {
+                // On error, just do a normal skip
+                ViewerInfo tempInfo;
+                tempInfo.realmId = realmId;
+                tempInfo.username = username;
+                tempInfo.authToken = authToken;
+                tempInfo.canControlPlayback = true;
+                performSkip(wsConnPtr, tempInfo, data);
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                ViewerInfo tempInfo;
+                tempInfo.realmId = realmId;
+                tempInfo.username = username;
+                tempInfo.authToken = authToken;
+                tempInfo.canControlPlayback = true;
+                performSkip(wsConnPtr, tempInfo, data);
+                return;
+            }
+
+            // Count queued videos (exclude currently playing)
+            int queuedCount = 0;
+            const Json::Value& playlist = (*json)["playlist"];
+            for (const auto& item : playlist) {
+                if (item["status"].asString() == "queued") {
+                    queuedCount++;
+                }
+            }
+
+            LOG_INFO << "Room " << realmId << " has " << queuedCount << " queued videos";
+
+            bool shouldRepeat = false;
+            int currentRepeatCount = 0;
+
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto it = roomStates_.find(realmId);
+                if (it != roomStates_.end()) {
+                    auto& state = it->second;
+                    currentRepeatCount = state.repeatCount;
+
+                    // If there are queued videos, reset repeat count and do normal skip
+                    if (queuedCount > 0) {
+                        state.repeatCount = 0;
+                        state.isRepeating = false;
+                        LOG_INFO << "Room " << realmId << ": Videos in queue, resetting repeat count and skipping to next";
+                    }
+                    // If no queued videos and we haven't repeated 3 times yet, repeat
+                    else if (state.repeatCount < 3 && !state.currentVideoId.empty()) {
+                        shouldRepeat = true;
+                        state.repeatCount++;
+                        state.isRepeating = true;
+                        state.currentTime = 0.0;
+                        state.playbackState = "playing";
+                        state.lastUpdateMs = std::chrono::duration_cast<std::chrono::milliseconds>(
+                            std::chrono::system_clock::now().time_since_epoch()).count();
+                        state.leadInActive = true;
+                        state.leadInStartMs = state.lastUpdateMs;
+                        LOG_INFO << "Room " << realmId << ": Repeating video (repeat #" << state.repeatCount << " of 3)";
+                    }
+                    // If no queued videos and already repeated 3 times, do normal skip (will end playlist)
+                    else {
+                        state.repeatCount = 0;
+                        state.isRepeating = false;
+                        LOG_INFO << "Room " << realmId << ": Max repeats reached, ending playlist";
+                    }
+                }
+            }
+
+            if (shouldRepeat) {
+                // Broadcast repeat event to all viewers
+                auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                    std::chrono::system_clock::now().time_since_epoch()).count();
+
+                Json::Value stateChange;
+                stateChange["type"] = "state_change";
+                stateChange["event"] = "repeat";
+                stateChange["triggeredBy"] = username;
+                stateChange["serverTime"] = static_cast<Json::Int64>(now);
+                stateChange["playbackState"] = "playing";
+                stateChange["currentTime"] = 0.0;
+                stateChange["leadIn"] = true;
+
+                {
+                    std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                    auto it = roomStates_.find(realmId);
+                    if (it != roomStates_.end()) {
+                        stateChange["repeatCount"] = it->second.repeatCount;
+
+                        // Include current video info
+                        if (!it->second.currentVideoId.empty()) {
+                            Json::Value video;
+                            video["youtubeVideoId"] = it->second.currentVideoId;
+                            video["id"] = static_cast<Json::Int64>(it->second.currentPlaylistItemId);
+                            video["title"] = it->second.currentVideoTitle;
+                            video["durationSeconds"] = it->second.durationSeconds;
+                            stateChange["currentVideo"] = video;
+                        }
+                    }
+                }
+
+                broadcastToRoom(realmId, stateChange);
+            } else {
+                // Proceed with normal skip
+                ViewerInfo tempInfo;
+                tempInfo.realmId = realmId;
+                tempInfo.username = username;
+                tempInfo.authToken = authToken;
+                tempInfo.canControlPlayback = true;
+                performSkip(wsConnPtr, tempInfo, data);
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in skip with repeat callback: " << e.what();
+        }
+    });
+}
+
+void WatchSyncController::performSkip(const WebSocketConnectionPtr& wsConnPtr,
+                                       const ViewerInfo& info,
+                                       const Json::Value& data) {
+    // Forward skip to backend API
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    auto httpReq = HttpRequest::newHttpJsonRequest(data);
+    httpReq->setPath("/api/watch/" + info.realmId + "/skip");
+    httpReq->setMethod(drogon::Post);
+
+    if (!info.authToken.empty()) {
+        httpReq->addHeader("Authorization", "Bearer " + info.authToken);
+    }
+
+    std::string realmId = info.realmId;
+    std::string username = info.username;
+
+    client->sendRequest(httpReq, [this, wsConnPtr, realmId, username](ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            // Check connection validity before any operations
+            if (!isConnectionValid(wsConnPtr)) {
+                LOG_DEBUG << "performSkip: Connection closed before callback";
+                return;
+            }
+
+            if (result != ReqResult::Ok || !resp) {
+                sendError(wsConnPtr, "Failed to skip video");
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                std::string error = json ? (*json)["error"].asString() : "Unknown error";
+                sendError(wsConnPtr, error);
+                return;
+            }
+
+            // Update in-memory room state
+            {
+                std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                auto it = roomStates_.find(realmId);
+                if (it != roomStates_.end()) {
+                    auto& state = it->second;
+
+                    if (json->isMember("playbackState")) {
+                        state.playbackState = (*json)["playbackState"].asString();
+                    }
+                    if (json->isMember("currentTime")) {
+                        state.currentTime = (*json)["currentTime"].asDouble();
+                    }
+
+                    state.lastUpdateMs = std::chrono::duration_cast<std::chrono::milliseconds>(
+                        std::chrono::system_clock::now().time_since_epoch()).count();
+
+                    // Reset repeat state when skipping to new video
+                    state.repeatCount = 0;
+                    state.isRepeating = false;
+
+                    // Handle lead-in for new video
+                    if (state.playbackState == "playing") {
+                        state.leadInActive = true;
+                        state.leadInStartMs = state.lastUpdateMs;
+                    }
+
+                    // Update video info
+                    if (json->isMember("currentVideo") && !(*json)["currentVideo"].isNull()) {
+                        auto& video = (*json)["currentVideo"];
+                        state.currentVideoId = video["youtubeVideoId"].asString();
+                        state.currentPlaylistItemId = video["id"].asInt64();
+                        state.currentVideoTitle = video["title"].asString();
+                        state.durationSeconds = video["durationSeconds"].asInt();
+                    } else if (json->isMember("currentVideo") && (*json)["currentVideo"].isNull()) {
+                        state.currentVideoId.clear();
+                        state.currentPlaylistItemId = 0;
+                        state.currentVideoTitle.clear();
+                        state.durationSeconds = 0;
+                    }
+                }
+            }
+
+            auto now = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::system_clock::now().time_since_epoch()).count();
+
+            // Broadcast state change to all viewers in room
+            Json::Value stateChange;
+            stateChange["type"] = "state_change";
+            stateChange["event"] = "skip";
+            stateChange["triggeredBy"] = username;
+            stateChange["serverTime"] = static_cast<Json::Int64>(now);
+
+            if (json->isMember("playbackState")) {
+                stateChange["playbackState"] = (*json)["playbackState"];
+            }
+            if (json->isMember("currentTime")) {
+                stateChange["currentTime"] = (*json)["currentTime"];
+            }
+            if (json->isMember("currentVideo")) {
+                stateChange["currentVideo"] = (*json)["currentVideo"];
+            }
+
+            stateChange["leadIn"] = true;
+
+            broadcastToRoom(realmId, stateChange);
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in performSkip callback: " << e.what();
+        }
+    });
+}
+
+void WatchSyncController::handleUpdateDuration(const WebSocketConnectionPtr& wsConnPtr,
+                                                const ViewerInfo& info,
+                                                const Json::Value& data) {
+    if (info.realmId.empty()) {
+        sendError(wsConnPtr, "Not in a room");
+        return;
+    }
+
+    int64_t playlistItemId = data["playlistItemId"].asInt64();
+    int durationSeconds = data["duration"].asInt();
+
+    // Validate duration (1 second to 24 hours)
+    if (durationSeconds < 1 || durationSeconds > 86400) {
+        LOG_WARN << "Invalid duration reported: " << durationSeconds;
+        return;
+    }
+
+    LOG_INFO << "Duration reported for playlist item " << playlistItemId
+             << " in room " << info.realmId << ": " << durationSeconds << "s";
+
+    // Forward to backend API
+    auto client = HttpClient::newHttpClient("http://drogon-backend:8080");
+    Json::Value reqBody;
+    reqBody["playlistItemId"] = static_cast<Json::Int64>(playlistItemId);
+    reqBody["duration"] = durationSeconds;
+
+    auto httpReq = HttpRequest::newHttpJsonRequest(reqBody);
+    httpReq->setPath("/api/watch/" + info.realmId + "/duration");
+    httpReq->setMethod(drogon::Post);
+
+    std::string realmId = info.realmId;
+
+    client->sendRequest(httpReq, [this, wsConnPtr, realmId, playlistItemId, durationSeconds]
+                        (ReqResult result, const HttpResponsePtr& resp) {
+        try {
+            if (result != ReqResult::Ok || !resp || resp->getStatusCode() != k200OK) {
+                LOG_WARN << "Failed to update duration in backend";
+                return;
+            }
+
+            auto json = resp->getJsonObject();
+            if (json && (*json)["updated"].asBool()) {
+                LOG_INFO << "Duration updated for playlist item " << playlistItemId
+                         << " to " << durationSeconds << "s";
+
+                // Update in-memory state
+                {
+                    std::lock_guard<std::mutex> lock(roomStatesMutex_);
+                    auto it = roomStates_.find(realmId);
+                    if (it != roomStates_.end() &&
+                        it->second.currentPlaylistItemId == playlistItemId) {
+                        it->second.durationSeconds = durationSeconds;
+                    }
+                }
+
+                // Broadcast duration update to all viewers in room
+                Json::Value update;
+                update["type"] = "duration_update";
+                update["playlistItemId"] = static_cast<Json::Int64>(playlistItemId);
+                update["duration"] = durationSeconds;
+                broadcastToRoom(realmId, update);
+            }
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Exception in updateDuration callback: " << e.what();
+        }
+    });
+}
diff --git a/chat-service/src/controllers/WatchSyncController.h b/chat-service/src/controllers/WatchSyncController.h
new file mode 100644
index 0000000..172f91d
--- /dev/null
+++ b/chat-service/src/controllers/WatchSyncController.h
@@ -0,0 +1,152 @@
+#pragma once
+#include <drogon/WebSocketController.h>
+#include <unordered_map>
+#include <mutex>
+#include <chrono>
+#include <thread>
+#include <atomic>
+
+using namespace drogon;
+
+class WatchSyncController : public drogon::WebSocketController<WatchSyncController> {
+public:
+    void handleNewMessage(const WebSocketConnectionPtr& wsConnPtr, std::string&& message,
+                          const WebSocketMessageType& type) override;
+
+    void handleNewConnection(const HttpRequestPtr& req, const WebSocketConnectionPtr& wsConnPtr) override;
+
+    void handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) override;
+
+    WS_PATH_LIST_BEGIN
+    WS_PATH_ADD("/watch/ws");
+    WS_PATH_LIST_END
+
+    // Broadcast sync state to all viewers in a watch room
+    static void broadcastToRoom(const std::string& realmId, const Json::Value& message);
+
+    // Get viewer count for a room
+    static int getViewerCount(const std::string& realmId);
+
+    // Force linker to include this object file
+    static void ensureLoaded();
+
+    // Start/stop the sync loop (called on first connection and when last viewer leaves)
+    static void startSyncLoop();
+    static void stopSyncLoop();
+
+private:
+    struct ViewerInfo {
+        std::string realmId;
+        std::string userId;
+        std::string username;
+        std::string authToken;  // Store auth token for backend API calls
+        bool canAddToPlaylist = false;
+        bool canControlPlayback = false;
+        bool isGuest = false;
+        std::chrono::system_clock::time_point connectionTime;
+
+        // Rate limiting fields
+        int64_t lastMessageMs = 0;         // Timestamp of last message
+        int messageCount = 0;              // Message count in current window
+        int64_t windowStartMs = 0;         // Start of rate limit window
+    };
+
+    // In-memory room state for accurate time tracking (CyTube-style)
+    struct RoomState {
+        std::string playbackState = "paused";  // "playing", "paused", "ended", "buffering"
+        double currentTime = 0.0;              // Current playback position in seconds
+        int64_t lastUpdateMs = 0;              // Timestamp of last update (milliseconds)
+        std::string currentVideoId;            // YouTube video ID
+        int64_t currentPlaylistItemId = 0;     // Playlist item ID
+        std::string currentVideoTitle;
+        int durationSeconds = 0;
+        bool leadInActive = false;             // True during initial buffering period
+        int64_t leadInStartMs = 0;             // When lead-in started
+        int repeatCount = 0;                   // Current repeat count for last video (max 3)
+        bool isRepeating = false;              // True when in repeat mode (last video looping)
+        bool currentVideoLocked = false;       // True if current video is locked (loops forever)
+
+        // Skip idempotency tracking
+        int64_t lastSkipMs = 0;                // Timestamp of last skip (prevents double-skip)
+        uint64_t stateVersion = 0;             // State version for sync validation
+
+        // State freshness tracking
+        int64_t lastDbSyncMs = 0;              // Last time state was synced from database
+    };
+
+    static std::unordered_map<WebSocketConnectionPtr, ViewerInfo> viewers_;
+    static std::mutex viewersMutex_;
+
+    // In-memory room states (keyed by realmId)
+    static std::unordered_map<std::string, RoomState> roomStates_;
+    static std::mutex roomStatesMutex_;
+
+    // Sync loop thread
+    static std::thread syncLoopThread_;
+    static std::atomic<bool> syncLoopRunning_;
+    static std::mutex syncLoopMutex_;  // Protects thread start/stop operations
+
+    // Sync loop - runs every second to update time and broadcast
+    static void syncLoop();
+
+    // Update room state from database (called when joining or on state change)
+    static void updateRoomStateFromDb(const std::string& realmId);
+
+    // Broadcast current state to all viewers in a room
+    static void broadcastRoomSync(const std::string& realmId);
+
+    // Auto-advance to next video when current video ends (server-side, no owner required)
+    static void autoAdvanceToNextVideo(const std::string& realmId);
+
+    // Get current expected playback time for a room
+    static double getExpectedTime(const RoomState& state);
+
+    void handleJoinRoom(const WebSocketConnectionPtr& wsConnPtr,
+                        ViewerInfo& info,
+                        const Json::Value& data);
+
+    void handleSyncRequest(const WebSocketConnectionPtr& wsConnPtr,
+                          const ViewerInfo& info);
+
+    void handlePlaybackControl(const WebSocketConnectionPtr& wsConnPtr,
+                               const ViewerInfo& info,
+                               const Json::Value& data);
+
+    void handleSkipWithRepeat(const WebSocketConnectionPtr& wsConnPtr,
+                              const ViewerInfo& info,
+                              const Json::Value& data);
+
+    void performSkip(const WebSocketConnectionPtr& wsConnPtr,
+                     const ViewerInfo& info,
+                     const Json::Value& data);
+
+    void handleUpdateDuration(const WebSocketConnectionPtr& wsConnPtr,
+                              const ViewerInfo& info,
+                              const Json::Value& data);
+
+    void sendError(const WebSocketConnectionPtr& wsConnPtr, const std::string& error);
+    void sendSuccess(const WebSocketConnectionPtr& wsConnPtr, const Json::Value& data);
+
+    // Helper to check if connection still exists (for async callback safety)
+    static bool isConnectionValid(const WebSocketConnectionPtr& wsConnPtr);
+
+    // Helper to safely send to a connection (validates first)
+    static void safeSend(const WebSocketConnectionPtr& wsConnPtr, const std::string& message);
+
+    // Broadcast viewer count update
+    static void broadcastViewerCount(const std::string& realmId);
+
+    // Rate limiting check (returns true if message should be processed)
+    bool checkRateLimit(const WebSocketConnectionPtr& wsConnPtr);
+
+    // Constants for rate limiting
+    static constexpr int RATE_LIMIT_MESSAGES = 30;      // Max messages per window
+    static constexpr int64_t RATE_LIMIT_WINDOW_MS = 10000;  // 10 second window
+    static constexpr int64_t MIN_MESSAGE_INTERVAL_MS = 100; // Min 100ms between messages
+
+    // Skip debounce interval (prevent double-skips within this window)
+    static constexpr int64_t SKIP_DEBOUNCE_MS = 1000;
+
+    // Database sync freshness threshold (refresh from DB if older than this)
+    static constexpr int64_t DB_SYNC_STALE_MS = 5000;
+};
diff --git a/chat-service/src/main.cpp b/chat-service/src/main.cpp
new file mode 100644
index 0000000..6f1bbb8
--- /dev/null
+++ b/chat-service/src/main.cpp
@@ -0,0 +1,134 @@
+#include <drogon/drogon.h>
+#include <iostream>
+#include "services/RedisMessageStore.h"
+#include "services/AuthService.h"
+#include "services/ChatService.h"
+#include "services/StickerService.h"
+#include "services/CensorService.h"
+#include "controllers/ChatController.h"
+#include "controllers/ChatWebSocketController.h"
+#include "controllers/ModerationController.h"
+#include "controllers/ChatAdminController.h"
+#include "controllers/WatchSyncController.h"
+
+using namespace drogon;
+
+int main() {
+    // Load configuration
+    app().loadConfigFile("config.json");
+
+    LOG_INFO << "Starting Chat Service...";
+
+    // Get configuration values
+    auto config = app().getCustomConfig();
+    auto redisConfig = config.get("redis", Json::Value::null);
+    auto jwtConfig = config.get("jwt", Json::Value::null);
+
+    // Initialize Redis
+    auto& redis = services::RedisMessageStore::getInstance();
+
+    // Get Redis host from environment or config
+    std::string redisHost = redisConfig.get("host", "localhost").asString();
+    const char* envRedisHost = std::getenv("REDIS_HOST");
+    if (envRedisHost) {
+        redisHost = envRedisHost;
+    }
+
+    // Get Redis password from environment
+    std::string redisPass = "";
+    const char* envRedisPass = std::getenv("REDIS_PASS");
+    if (envRedisPass && strlen(envRedisPass) > 0) {
+        redisPass = envRedisPass;
+    }
+
+    redis.initialize(
+        redisHost,
+        redisConfig.get("port", 6379).asInt(),
+        redisConfig.get("db", 1).asInt(),
+        redisPass
+    );
+
+    // Initialize Auth Service
+    std::string jwtSecret = jwtConfig.get("secret", "").asString();
+    if (jwtSecret.empty()) {
+        // Try environment variable
+        const char* envSecret = std::getenv("JWT_SECRET");
+        if (envSecret) {
+            jwtSecret = envSecret;
+        } else {
+            LOG_ERROR << "JWT_SECRET not configured!";
+            return 1;
+        }
+    }
+
+    auto& authService = services::AuthService::getInstance();
+    authService.initialize(jwtSecret);
+
+    // Initialize Chat Service
+    auto& chatService = services::ChatService::getInstance();
+    chatService.initialize();
+
+    // Initialize Sticker Service (for :roll: and :rtd: processing)
+    auto& stickerService = services::StickerService::getInstance();
+    stickerService.initialize();
+
+    // Initialize Censor Service (for word filtering)
+    auto& censorService = services::CensorService::getInstance();
+    censorService.initialize();
+
+    LOG_INFO << "Chat initialization complete";
+
+    // Set CORS
+    app().registerPostHandlingAdvice([](const HttpRequestPtr& req, const HttpResponsePtr& resp) {
+        resp->addHeader("Access-Control-Allow-Origin", "*");
+        resp->addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+        resp->addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+        resp->addHeader("Access-Control-Max-Age", "3600");
+    });
+
+    // Handle OPTIONS requests
+    app().registerPreHandlingAdvice([](const HttpRequestPtr& req, AdviceCallback&& acb, AdviceChainCallback&& accb) {
+        if (req->method() == Options) {
+            auto resp = HttpResponse::newHttpResponse();
+            resp->setStatusCode(k200OK);
+            resp->addHeader("Access-Control-Allow-Origin", "*");
+            resp->addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+            resp->addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+            resp->addHeader("Access-Control-Max-Age", "3600");
+            acb(resp);
+            return;
+        }
+        accb();
+    });
+
+    // Ensure WebSocket controllers are loaded
+    ChatWebSocketController::ensureLoaded();
+    WatchSyncController::ensureLoaded();
+
+    // Explicitly register WebSocket paths (workaround for custom CMake builds)
+    app().registerWebSocketController("/chat/ws", "ChatWebSocketController");
+    app().registerWebSocketController("/chat/stream/{1}", "ChatWebSocketController");
+    app().registerWebSocketController("/watch/ws", "WatchSyncController");
+    LOG_INFO << "WebSocket paths explicitly registered";
+
+    LOG_INFO << "Chat Service initialized successfully";
+    LOG_INFO << "WebSocket endpoint: ws://localhost:8081/chat/stream/{realmId}";
+    LOG_INFO << "REST API: http://localhost:8081/api/chat/*";
+
+    // Register guest session timeout checker (runs every 5 minutes)
+    app().getLoop()->runEvery(300.0, []() {
+        ChatWebSocketController::checkGuestTimeouts();
+    });
+    LOG_INFO << "Guest session timeout checker registered (45-123 minute random timeout)";
+
+    // Schedule sticker fetch (must be done here, after event loop is set up)
+    stickerService.scheduleFetch();
+
+    // Schedule censored words fetch (must be done here, after event loop is set up)
+    censorService.scheduleFetch();
+
+    // Run the application
+    app().run();
+
+    return 0;
+}
diff --git a/chat-service/src/middleware/ChatAuthMiddleware.cpp b/chat-service/src/middleware/ChatAuthMiddleware.cpp
new file mode 100644
index 0000000..362f57e
--- /dev/null
+++ b/chat-service/src/middleware/ChatAuthMiddleware.cpp
@@ -0,0 +1,46 @@
+#include "ChatAuthMiddleware.h"
+#include "../services/AuthService.h"
+#include <json/json.h>
+
+void ChatAuthMiddleware::doFilter(const HttpRequestPtr& req,
+                                    FilterCallback&& fcb,
+                                    FilterChainCallback&& fccb) {
+    // Extract token from Authorization header
+    auto authHeader = req->getHeader("Authorization");
+
+    if (authHeader.empty()) {
+        Json::Value error;
+        error["error"] = "Missing authorization token";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        fcb(resp);
+        return;
+    }
+
+    // Remove "Bearer " prefix if present
+    std::string token = authHeader;
+    if (token.find("Bearer ") == 0) {
+        token = token.substr(7);
+    }
+
+    // Verify token
+    auto& authService = services::AuthService::getInstance();
+    auto claims = authService.verifyToken(token);
+
+    if (!claims.has_value()) {
+        Json::Value error;
+        error["error"] = "Invalid or expired token";
+        auto resp = HttpResponse::newHttpJsonResponse(error);
+        resp->setStatusCode(k401Unauthorized);
+        fcb(resp);
+        return;
+    }
+
+    // Store user info in request attributes for use in controllers
+    req->attributes()->insert("userId", claims->userId);
+    req->attributes()->insert("username", claims->username);
+    req->attributes()->insert("isAdmin", claims->isAdmin);
+
+    // Continue to next filter or controller
+    fccb();
+}
diff --git a/chat-service/src/middleware/ChatAuthMiddleware.h b/chat-service/src/middleware/ChatAuthMiddleware.h
new file mode 100644
index 0000000..dfd356e
--- /dev/null
+++ b/chat-service/src/middleware/ChatAuthMiddleware.h
@@ -0,0 +1,11 @@
+#pragma once
+#include <drogon/HttpFilter.h>
+
+using namespace drogon;
+
+class ChatAuthMiddleware : public HttpFilter<ChatAuthMiddleware> {
+public:
+    void doFilter(const HttpRequestPtr& req,
+                  FilterCallback&& fcb,
+                  FilterChainCallback&& fccb) override;
+};
diff --git a/chat-service/src/models/ChatMessage.h b/chat-service/src/models/ChatMessage.h
new file mode 100644
index 0000000..f46502d
--- /dev/null
+++ b/chat-service/src/models/ChatMessage.h
@@ -0,0 +1,179 @@
+#pragma once
+#include <string>
+#include <json/json.h>
+#include <drogon/utils/Utilities.h>
+
+namespace models {
+
+struct ChatMessage {
+    std::string messageId;
+    std::string realmId;
+    std::string userId;
+    std::string username;
+    std::string userColor;
+    std::string avatarUrl;
+    std::string content;
+    int64_t timestamp;
+    bool isGuest;
+    bool isModerator;
+    bool isStreamer;
+    std::string channel; // "global" or "realm:{realmId}"
+    int64_t selfDestructAt; // 0 = permanent, otherwise Unix timestamp (ms) when message should be deleted
+    bool usedRoll; // true if message originally contained :roll:
+    bool usedRtd;  // true if message originally contained :rtd:
+
+    ChatMessage() : selfDestructAt(0), usedRoll(false), usedRtd(false) {}
+
+    ChatMessage(const std::string& realmId_, const std::string& userId_,
+                const std::string& username_, const std::string& userColor_,
+                const std::string& avatarUrl_, const std::string& content_,
+                bool isGuest_ = false, bool isModerator_ = false, bool isStreamer_ = false,
+                int selfDestructSeconds = 0, bool usedRoll_ = false, bool usedRtd_ = false)
+        : realmId(realmId_), userId(userId_), username(username_),
+          userColor(userColor_), avatarUrl(avatarUrl_), content(content_),
+          isGuest(isGuest_), isModerator(isModerator_), isStreamer(isStreamer_), selfDestructAt(0),
+          usedRoll(usedRoll_), usedRtd(usedRtd_) {
+        messageId = drogon::utils::getUuid();
+        timestamp = std::chrono::duration_cast<std::chrono::milliseconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count();
+        channel = "realm:" + realmId;
+
+        // Calculate self-destruct time if specified
+        if (selfDestructSeconds > 0) {
+            selfDestructAt = timestamp + (selfDestructSeconds * 1000);
+        }
+    }
+
+    Json::Value toJson() const {
+        Json::Value json;
+        json["messageId"] = messageId;
+        json["realmId"] = realmId;
+        json["userId"] = userId;
+        json["username"] = username;
+        json["userColor"] = userColor;
+        if (!avatarUrl.empty()) {
+            json["avatarUrl"] = avatarUrl;
+        }
+        json["content"] = content;
+        json["timestamp"] = (Json::Int64)timestamp;
+        json["isGuest"] = isGuest;
+        json["isModerator"] = isModerator;
+        json["isStreamer"] = isStreamer;
+        json["channel"] = channel;
+        if (selfDestructAt > 0) {
+            json["selfDestructAt"] = (Json::Int64)selfDestructAt;
+        }
+        if (usedRoll) {
+            json["usedRoll"] = true;
+        }
+        if (usedRtd) {
+            json["usedRtd"] = true;
+        }
+        return json;
+    }
+
+    static ChatMessage fromJson(const Json::Value& json) {
+        ChatMessage msg;
+        msg.messageId = json["messageId"].asString();
+        msg.realmId = json["realmId"].asString();
+        msg.userId = json["userId"].asString();
+        msg.username = json["username"].asString();
+        msg.userColor = json["userColor"].asString();
+        msg.avatarUrl = json.get("avatarUrl", "").asString();
+        msg.content = json["content"].asString();
+        msg.timestamp = json["timestamp"].asInt64();
+        msg.isGuest = json["isGuest"].asBool();
+        msg.isModerator = json["isModerator"].asBool();
+        msg.isStreamer = json["isStreamer"].asBool();
+        msg.channel = json.get("channel", "realm:" + msg.realmId).asString();
+        msg.selfDestructAt = json.get("selfDestructAt", 0).asInt64();
+        msg.usedRoll = json.get("usedRoll", false).asBool();
+        msg.usedRtd = json.get("usedRtd", false).asBool();
+        return msg;
+    }
+
+    std::string serialize() const {
+        Json::StreamWriterBuilder builder;
+        builder["indentation"] = "";
+        return Json::writeString(builder, toJson());
+    }
+
+    static ChatMessage deserialize(const std::string& str) {
+        Json::CharReaderBuilder builder;
+        Json::Value json;
+        std::istringstream s(str);
+        std::string errs;
+        if (Json::parseFromStream(builder, s, &json, &errs)) {
+            return fromJson(json);
+        }
+        return ChatMessage();
+    }
+};
+
+struct ChatSettings {
+    std::string realmId;
+    int retentionHours;
+    int slowModeSeconds;
+    bool linksAllowed;
+    bool subscribersOnly;
+    bool chatGuestsAllowed;
+
+    ChatSettings() : retentionHours(24), slowModeSeconds(0),
+                     linksAllowed(true), subscribersOnly(false),
+                     chatGuestsAllowed(true) {}
+
+    Json::Value toJson() const {
+        Json::Value json;
+        json["realmId"] = realmId;
+        json["retentionHours"] = retentionHours;
+        json["slowModeSeconds"] = slowModeSeconds;
+        json["linksAllowed"] = linksAllowed;
+        json["subscribersOnly"] = subscribersOnly;
+        json["chatGuestsAllowed"] = chatGuestsAllowed;
+        return json;
+    }
+
+    static ChatSettings fromJson(const Json::Value& json) {
+        ChatSettings settings;
+        settings.realmId = json["realmId"].asString();
+        settings.retentionHours = json.get("retentionHours", 24).asInt();
+        settings.slowModeSeconds = json.get("slowModeSeconds", 0).asInt();
+        settings.linksAllowed = json.get("linksAllowed", true).asBool();
+        settings.subscribersOnly = json.get("subscribersOnly", false).asBool();
+        settings.chatGuestsAllowed = json.get("chatGuestsAllowed", true).asBool();
+        return settings;
+    }
+};
+
+struct GlobalChatSettings {
+    std::string guestPrefix;
+    int defaultRetentionHours;
+    bool guestsAllowedSiteWide;
+    bool registrationEnabled;
+
+    GlobalChatSettings() : guestPrefix("Guest"),
+                           defaultRetentionHours(24),
+                           guestsAllowedSiteWide(true),
+                           registrationEnabled(true) {}
+
+    Json::Value toJson() const {
+        Json::Value json;
+        json["guestPrefix"] = guestPrefix;
+        json["defaultRetentionHours"] = defaultRetentionHours;
+        json["guestsAllowedSiteWide"] = guestsAllowedSiteWide;
+        json["registrationEnabled"] = registrationEnabled;
+        return json;
+    }
+
+    static GlobalChatSettings fromJson(const Json::Value& json) {
+        GlobalChatSettings settings;
+        settings.guestPrefix = json.get("guestPrefix", "Guest").asString();
+        settings.defaultRetentionHours = json.get("defaultRetentionHours", 24).asInt();
+        settings.guestsAllowedSiteWide = json.get("guestsAllowedSiteWide", true).asBool();
+        settings.registrationEnabled = json.get("registrationEnabled", true).asBool();
+        return settings;
+    }
+};
+
+} // namespace models
diff --git a/chat-service/src/models/ModerationAction.h b/chat-service/src/models/ModerationAction.h
new file mode 100644
index 0000000..6b2d071
--- /dev/null
+++ b/chat-service/src/models/ModerationAction.h
@@ -0,0 +1,67 @@
+#pragma once
+#include <string>
+#include <chrono>
+#include <json/json.h>
+
+namespace models {
+
+enum class ModActionType {
+    BAN,            // Legacy (per-realm user ID ban)
+    UNBAN,          // Legacy (per-realm user ID unban)
+    MUTE,           // Mute user (permanent by default, optional duration)
+    UNMUTE,
+    DELETE_MESSAGE,
+    UBERBAN,        // Site-wide fingerprint ban (harsh)
+    UNUBERBAN,      // Remove site-wide fingerprint ban
+    REALM_BAN,      // Per-realm ban (user ID or fingerprint)
+    REALM_UNBAN,    // Remove per-realm ban
+    KICK            // Temporary disconnect + rejoin block
+};
+
+struct ModerationAction {
+    ModActionType type;
+    std::string realmId;
+    std::string targetUserId;
+    std::string moderatorId;
+    std::string reason;
+    int64_t duration; // in seconds, 0 for permanent
+    int64_t timestamp;
+
+    ModerationAction() = default;
+
+    ModerationAction(ModActionType type_, const std::string& realmId_,
+                     const std::string& targetUserId_, const std::string& moderatorId_,
+                     const std::string& reason_ = "", int64_t duration_ = 0)
+        : type(type_), realmId(realmId_), targetUserId(targetUserId_),
+          moderatorId(moderatorId_), reason(reason_), duration(duration_) {
+        timestamp = std::chrono::duration_cast<std::chrono::seconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count();
+    }
+
+    Json::Value toJson() const {
+        Json::Value json;
+        json["type"] = static_cast<int>(type);
+        json["realmId"] = realmId;
+        json["targetUserId"] = targetUserId;
+        json["moderatorId"] = moderatorId;
+        json["reason"] = reason;
+        json["duration"] = (Json::Int64)duration;
+        json["timestamp"] = (Json::Int64)timestamp;
+        return json;
+    }
+
+    static ModerationAction fromJson(const Json::Value& json) {
+        ModerationAction action;
+        action.type = static_cast<ModActionType>(json["type"].asInt());
+        action.realmId = json["realmId"].asString();
+        action.targetUserId = json["targetUserId"].asString();
+        action.moderatorId = json["moderatorId"].asString();
+        action.reason = json.get("reason", "").asString();
+        action.duration = json.get("duration", 0).asInt64();
+        action.timestamp = json["timestamp"].asInt64();
+        return action;
+    }
+};
+
+} // namespace models
diff --git a/chat-service/src/services/AuthService.cpp b/chat-service/src/services/AuthService.cpp
new file mode 100644
index 0000000..82d3695
--- /dev/null
+++ b/chat-service/src/services/AuthService.cpp
@@ -0,0 +1,73 @@
+#include "AuthService.h"
+#include <drogon/drogon.h>
+
+namespace services {
+
+AuthService& AuthService::getInstance() {
+    static AuthService instance;
+    return instance;
+}
+
+void AuthService::initialize(const std::string& jwtSecret) {
+    jwtSecret_ = jwtSecret;
+    LOG_INFO << "AuthService initialized";
+}
+
+std::optional<UserClaims> AuthService::verifyToken(const std::string& token) {
+    try {
+        auto decoded = jwt::decode(token);
+
+        auto verifier = jwt::verify()
+            .allow_algorithm(jwt::algorithm::hs256{jwtSecret_})
+            .with_issuer("streaming-app");
+
+        verifier.verify(decoded);
+
+        UserClaims claims;
+        claims.userId = decoded.get_payload_claim("user_id").as_string();
+        claims.username = decoded.get_payload_claim("username").as_string();
+
+        // Optional claims
+        if (decoded.has_payload_claim("color_code")) {
+            claims.userColor = decoded.get_payload_claim("color_code").as_string();
+        }
+        if (decoded.has_payload_claim("avatar_url")) {
+            claims.avatarUrl = decoded.get_payload_claim("avatar_url").as_string();
+        }
+        if (decoded.has_payload_claim("is_admin")) {
+            // Backend sends "1" or "0" as strings
+            auto adminStr = decoded.get_payload_claim("is_admin").as_string();
+            claims.isAdmin = (adminStr == "1");
+        }
+        if (decoded.has_payload_claim("is_moderator")) {
+            // Backend sends "1" or "0" as strings
+            auto modStr = decoded.get_payload_claim("is_moderator").as_string();
+            claims.isModerator = (modStr == "1");
+        }
+        if (decoded.has_payload_claim("is_streamer")) {
+            // Backend sends "1" or "0" as strings
+            auto streamerStr = decoded.get_payload_claim("is_streamer").as_string();
+            claims.isStreamer = (streamerStr == "1");
+        }
+
+        LOG_INFO << "[verifyToken] Successfully verified token for user: " << claims.username;
+        return claims;
+
+    } catch (const std::exception& e) {
+        LOG_DEBUG << "[verifyToken] Token verification failed: " << e.what();
+        return std::nullopt;
+    }
+}
+
+bool AuthService::isUserModerator(const std::string& userId, const std::string& realmId) {
+    // TODO: Query main backend API or database to check moderator status
+    // For now, we'll implement a simple HTTP call to the backend
+    return false;
+}
+
+bool AuthService::isUserStreamer(const std::string& userId, const std::string& realmId) {
+    // TODO: Query main backend API or database to check if user owns the realm
+    return false;
+}
+
+} // namespace services
diff --git a/chat-service/src/services/AuthService.h b/chat-service/src/services/AuthService.h
new file mode 100644
index 0000000..670be62
--- /dev/null
+++ b/chat-service/src/services/AuthService.h
@@ -0,0 +1,41 @@
+#pragma once
+#include <string>
+#include <optional>
+#include <json/json.h>
+#include <jwt-cpp/jwt.h>
+
+namespace services {
+
+struct UserClaims {
+    std::string userId;
+    std::string username;
+    std::string userColor;
+    std::string avatarUrl;
+    bool isAdmin;
+    bool isModerator;  // Site-wide moderator role
+    bool isStreamer;
+
+    UserClaims() : isAdmin(false), isModerator(false), isStreamer(false) {}
+};
+
+class AuthService {
+public:
+    static AuthService& getInstance();
+
+    void initialize(const std::string& jwtSecret);
+
+    std::optional<UserClaims> verifyToken(const std::string& token);
+
+    bool isUserModerator(const std::string& userId, const std::string& realmId);
+    bool isUserStreamer(const std::string& userId, const std::string& realmId);
+
+private:
+    AuthService() = default;
+    ~AuthService() = default;
+    AuthService(const AuthService&) = delete;
+    AuthService& operator=(const AuthService&) = delete;
+
+    std::string jwtSecret_;
+};
+
+} // namespace services
diff --git a/chat-service/src/services/CensorService.cpp b/chat-service/src/services/CensorService.cpp
new file mode 100644
index 0000000..4124b0f
--- /dev/null
+++ b/chat-service/src/services/CensorService.cpp
@@ -0,0 +1,279 @@
+#include "CensorService.h"
+#include <drogon/drogon.h>
+#include <drogon/HttpClient.h>
+#include <sstream>
+#include <algorithm>
+#include <cctype>
+
+namespace services {
+
+CensorService& CensorService::getInstance() {
+    static CensorService instance;
+    return instance;
+}
+
+void CensorService::initialize() {
+    initialized_ = true;
+    LOG_INFO << "CensorService initialized";
+}
+
+void CensorService::scheduleFetch() {
+    LOG_INFO << "Scheduling censored words fetch in 2 seconds...";
+    drogon::app().getLoop()->runAfter(2.0, [this]() {
+        LOG_INFO << "Pre-fetching censored words from backend...";
+        fetchCensoredWordsAsync();
+    });
+    // No periodic refresh - cache invalidation is triggered by backend
+}
+
+void CensorService::invalidateCache() {
+    LOG_INFO << "Cache invalidation requested, fetching censored words from backend...";
+    fetchCensoredWordsAsync();
+}
+
+void CensorService::fetchCensoredWordsFromBackend() {
+    auto config = drogon::app().getCustomConfig();
+    auto backendConfig = config.get("backend_api", Json::Value::null);
+    std::string host;
+    int port;
+
+    if (backendConfig.isNull() || !backendConfig.isMember("host")) {
+        host = "drogon-backend";
+        port = 8080;
+    } else {
+        host = backendConfig.get("host", "drogon-backend").asString();
+        port = backendConfig.get("port", 8080).asInt();
+    }
+
+    auto client = drogon::HttpClient::newHttpClient("http://" + host + ":" + std::to_string(port));
+    auto req = drogon::HttpRequest::newHttpRequest();
+    req->setMethod(drogon::Get);
+    req->setPath("/api/internal/censored-words");
+
+    std::pair<drogon::ReqResult, drogon::HttpResponsePtr> result = client->sendRequest(req, 5.0);
+
+    if (result.first != drogon::ReqResult::Ok) {
+        LOG_ERROR << "Failed to fetch censored words from backend: request failed";
+        return;
+    }
+
+    auto resp = result.second;
+    if (resp->getStatusCode() != drogon::k200OK) {
+        LOG_ERROR << "Failed to fetch censored words from backend: HTTP " << resp->getStatusCode();
+        return;
+    }
+
+    try {
+        auto json = resp->getJsonObject();
+        if (!json || !(*json)["success"].asBool()) {
+            LOG_ERROR << "Failed to fetch censored words: invalid response";
+            return;
+        }
+
+        std::string wordsStr = (*json)["censored_words"].asString();
+
+        // Build new data in temporary variables
+        std::vector<std::string> newWords;
+        std::optional<std::regex> newPattern;
+
+        if (!wordsStr.empty()) {
+            std::stringstream ss(wordsStr);
+            std::string word;
+            while (std::getline(ss, word, ',') && newWords.size() < MAX_WORD_COUNT) {
+                size_t start = word.find_first_not_of(" \t\r\n");
+                size_t end = word.find_last_not_of(" \t\r\n");
+                if (start != std::string::npos && end != std::string::npos) {
+                    word = word.substr(start, end - start + 1);
+                    // Skip empty words and words exceeding max length (ReDoS prevention)
+                    if (!word.empty() && word.length() <= MAX_WORD_LENGTH) {
+                        newWords.push_back(word);
+                    } else if (word.length() > MAX_WORD_LENGTH) {
+                        LOG_WARN << "Skipping censored word exceeding " << MAX_WORD_LENGTH << " chars";
+                    }
+                }
+            }
+            newPattern = buildCombinedPattern(newWords);
+        }
+
+        // Atomic swap under lock
+        {
+            std::unique_lock<std::shared_mutex> lock(mutex_);
+            censoredWords_ = std::move(newWords);
+            combinedPattern_ = std::move(newPattern);
+        }
+
+        LOG_DEBUG << "Fetched " << censoredWords_.size() << " censored words from backend";
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Error parsing censored words response: " << e.what();
+    }
+}
+
+void CensorService::fetchCensoredWordsAsync() {
+    auto config = drogon::app().getCustomConfig();
+    auto backendConfig = config.get("backend_api", Json::Value::null);
+    std::string host;
+    int port;
+
+    if (backendConfig.isNull() || !backendConfig.isMember("host")) {
+        host = "drogon-backend";
+        port = 8080;
+    } else {
+        host = backendConfig.get("host", "drogon-backend").asString();
+        port = backendConfig.get("port", 8080).asInt();
+    }
+
+    std::string url = "http://" + host + ":" + std::to_string(port);
+    auto client = drogon::HttpClient::newHttpClient(url, drogon::app().getLoop());
+    auto req = drogon::HttpRequest::newHttpRequest();
+    req->setMethod(drogon::Get);
+    req->setPath("/api/internal/censored-words");
+
+    client->sendRequest(req, [this, client](drogon::ReqResult result, const drogon::HttpResponsePtr& resp) {
+        if (result != drogon::ReqResult::Ok) {
+            LOG_ERROR << "Async fetch censored words failed";
+            return;
+        }
+
+        if (resp->getStatusCode() != drogon::k200OK) {
+            LOG_ERROR << "Async fetch censored words failed: HTTP " << resp->getStatusCode();
+            return;
+        }
+
+        try {
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                LOG_ERROR << "Async fetch censored words: invalid response";
+                return;
+            }
+
+            std::string wordsStr = (*json)["censored_words"].asString();
+
+            // Build new data in temporary variables
+            std::vector<std::string> newWords;
+            std::optional<std::regex> newPattern;
+
+            if (!wordsStr.empty()) {
+                std::stringstream ss(wordsStr);
+                std::string word;
+                while (std::getline(ss, word, ',') && newWords.size() < MAX_WORD_COUNT) {
+                    size_t start = word.find_first_not_of(" \t\r\n");
+                    size_t end = word.find_last_not_of(" \t\r\n");
+                    if (start != std::string::npos && end != std::string::npos) {
+                        word = word.substr(start, end - start + 1);
+                        // Skip empty words and words exceeding max length (ReDoS prevention)
+                        if (!word.empty() && word.length() <= MAX_WORD_LENGTH) {
+                            newWords.push_back(word);
+                        } else if (word.length() > MAX_WORD_LENGTH) {
+                            LOG_WARN << "Skipping censored word exceeding " << MAX_WORD_LENGTH << " chars";
+                        }
+                    }
+                }
+                newPattern = buildCombinedPattern(newWords);
+            }
+
+            // Atomic swap under lock
+            {
+                std::unique_lock<std::shared_mutex> lock(mutex_);
+                censoredWords_ = std::move(newWords);
+                combinedPattern_ = std::move(newPattern);
+            }
+
+            LOG_INFO << "Successfully fetched " << censoredWords_.size() << " censored words from backend";
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Error parsing async censored words response: " << e.what();
+        }
+    }, 10.0);
+}
+
+std::optional<std::regex> CensorService::buildCombinedPattern(const std::vector<std::string>& words) {
+    if (words.empty()) {
+        return std::nullopt;
+    }
+
+    try {
+        // Build combined pattern: \b(word1|word2|word3)\b
+        std::string pattern = "\\b(";
+        bool first = true;
+
+        for (const auto& word : words) {
+            if (!first) {
+                pattern += "|";
+            }
+            first = false;
+
+            // Escape special regex characters
+            for (char c : word) {
+                if (c == '.' || c == '^' || c == '$' || c == '*' || c == '+' ||
+                    c == '?' || c == '(' || c == ')' || c == '[' || c == ']' ||
+                    c == '{' || c == '}' || c == '|' || c == '\\') {
+                    pattern += '\\';
+                }
+                pattern += c;
+            }
+        }
+
+        pattern += ")\\b";
+
+        return std::regex(pattern, std::regex_constants::icase);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Failed to build combined censored pattern: " << e.what();
+        return std::nullopt;
+    }
+}
+
+std::string CensorService::censor(const std::string& text) {
+    if (text.empty()) {
+        return text;
+    }
+
+    std::shared_lock<std::shared_mutex> lock(mutex_);
+
+    if (!combinedPattern_) {
+        return text;
+    }
+
+    std::string result;
+    try {
+        // Replace censored words with asterisks
+        std::sregex_iterator begin(text.begin(), text.end(), *combinedPattern_);
+        std::sregex_iterator end;
+
+        size_t lastPos = 0;
+        for (std::sregex_iterator it = begin; it != end; ++it) {
+            const std::smatch& match = *it;
+            // Append text before match
+            result += text.substr(lastPos, match.position() - lastPos);
+            // Replace match with fixed asterisks
+            result += "****";
+            lastPos = match.position() + match.length();
+        }
+        // Append remaining text
+        result += text.substr(lastPos);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Regex replace error: " << e.what();
+        return text;
+    }
+
+    return result;
+}
+
+bool CensorService::containsCensoredWords(const std::string& text) {
+    if (text.empty()) {
+        return false;
+    }
+
+    std::shared_lock<std::shared_mutex> lock(mutex_);
+
+    if (!combinedPattern_) {
+        return false;
+    }
+
+    try {
+        return std::regex_search(text, *combinedPattern_);
+    } catch (const std::regex_error& e) {
+        LOG_ERROR << "Regex search error: " << e.what();
+        return false;
+    }
+}
+
+} // namespace services
diff --git a/chat-service/src/services/CensorService.h b/chat-service/src/services/CensorService.h
new file mode 100644
index 0000000..0146b83
--- /dev/null
+++ b/chat-service/src/services/CensorService.h
@@ -0,0 +1,51 @@
+#pragma once
+#include <string>
+#include <vector>
+#include <mutex>
+#include <shared_mutex>
+#include <regex>
+#include <chrono>
+#include <optional>
+
+namespace services {
+
+// Maximum length for a single censored word (ReDoS prevention)
+static constexpr size_t MAX_WORD_LENGTH = 100;
+// Maximum number of censored words
+static constexpr size_t MAX_WORD_COUNT = 500;
+
+class CensorService {
+public:
+    static CensorService& getInstance();
+
+    void initialize();
+
+    // Schedule initial fetch from backend (call from main after event loop setup)
+    void scheduleFetch();
+
+    // Censor text by replacing censored words with asterisks (case-insensitive)
+    std::string censor(const std::string& text);
+
+    // Check if text contains any censored words
+    bool containsCensoredWords(const std::string& text);
+
+    // Invalidate cache and refetch from backend (called when backend updates words)
+    void invalidateCache();
+
+private:
+    CensorService() = default;
+    ~CensorService() = default;
+    CensorService(const CensorService&) = delete;
+    CensorService& operator=(const CensorService&) = delete;
+
+    void fetchCensoredWordsAsync();
+    void fetchCensoredWordsFromBackend();
+    std::optional<std::regex> buildCombinedPattern(const std::vector<std::string>& words);
+
+    mutable std::shared_mutex mutex_;
+    std::vector<std::string> censoredWords_;
+    std::optional<std::regex> combinedPattern_;  // Single combined pattern for efficiency
+    bool initialized_ = false;
+};
+
+} // namespace services
diff --git a/chat-service/src/services/ChatService.cpp b/chat-service/src/services/ChatService.cpp
new file mode 100644
index 0000000..111ff8b
--- /dev/null
+++ b/chat-service/src/services/ChatService.cpp
@@ -0,0 +1,294 @@
+#include "ChatService.h"
+#include "RedisMessageStore.h"
+#include "ModerationService.h"
+#include "StickerService.h"
+#include "CensorService.h"
+#include "../controllers/ChatWebSocketController.h"
+#include <drogon/drogon.h>
+#include <drogon/HttpClient.h>
+#include <regex>
+
+namespace services {
+
+ChatService& ChatService::getInstance() {
+    static ChatService instance;
+    return instance;
+}
+
+void ChatService::initialize() {
+    LOG_INFO << "ChatService initialized";
+    startCleanupTask();
+}
+
+SendMessageResult ChatService::sendMessage(const std::string& realmId,
+                                            const std::string& userId,
+                                            const std::string& username,
+                                            const std::string& userColor,
+                                            const std::string& avatarUrl,
+                                            const std::string& content,
+                                            bool isGuest,
+                                            bool isModerator,
+                                            bool isStreamer,
+                                            models::ChatMessage& outMessage,
+                                            int selfDestructSeconds,
+                                            bool isBot) {
+    auto& redis = RedisMessageStore::getInstance();
+    auto& modService = ModerationService::getInstance();
+
+    // SECURITY FIX: Bot rate limiting (1 message per second)
+    if (isBot) {
+        if (!canBotSendMessage(userId)) {
+            return SendMessageResult::BOT_RATE_LIMITED;
+        }
+    }
+
+    // Check if user can chat (not banned or muted)
+    if (!isGuest && !modService.canUserChat(realmId, userId)) {
+        if (redis.isBanned(realmId, userId)) {
+            return SendMessageResult::BANNED;
+        }
+        if (redis.isMuted(realmId, userId)) {
+            return SendMessageResult::MUTED;
+        }
+    }
+
+    // Validate content
+    if (!isContentValid(content)) {
+        return SendMessageResult::INVALID_CONTENT;
+    }
+
+    // Check message length
+    auto config = drogon::app().getCustomConfig().get("chat", Json::Value::null);
+    int maxLength = config.get("max_message_length", 500).asInt();
+    if (content.length() > static_cast<size_t>(maxLength)) {
+        return SendMessageResult::MESSAGE_TOO_LONG;
+    }
+
+    // Get realm settings
+    auto settings = redis.getRealmSettings(realmId);
+
+    // Check if guests are allowed (global setting overrides realm setting)
+    if (isGuest) {
+        auto globalSettings = getGlobalSettings();
+        // Global setting takes priority - if disabled site-wide, no guests can chat
+        if (!globalSettings.guestsAllowedSiteWide) {
+            return SendMessageResult::GUESTS_NOT_ALLOWED;
+        }
+        // Per-realm setting - if disabled for this realm, guests can't chat here
+        if (!settings.chatGuestsAllowed) {
+            return SendMessageResult::GUESTS_NOT_ALLOWED;
+        }
+    }
+
+    // Check if links are allowed (unless moderator or streamer)
+    if (!isModerator && !isStreamer && !settings.linksAllowed && containsLinks(content)) {
+        return SendMessageResult::LINKS_NOT_ALLOWED;
+    }
+
+    // Check slow mode (unless moderator or streamer)
+    // Guests are also subject to slow mode to prevent spam
+    if (!isModerator && !isStreamer) {
+        if (!redis.canSendMessage(realmId, userId, settings.slowModeSeconds)) {
+            return SendMessageResult::SLOW_MODE;
+        }
+    }
+
+    // Process special stickers (:roll: and :rtd:)
+    auto& stickerService = StickerService::getInstance();
+    auto stickerResult = stickerService.processSpecialStickers(content);
+    std::string processedContent = stickerResult.content;
+
+    // Track sticker usage (async, fire-and-forget)
+    auto usedStickers = stickerService.extractStickerNames(processedContent);
+    if (!usedStickers.empty()) {
+        stickerService.trackStickerUsage(usedStickers);
+    }
+
+    // Apply censoring to remove banned words
+    auto& censorService = CensorService::getInstance();
+    processedContent = censorService.censor(processedContent);
+
+    // If message is empty after censoring, reject it
+    if (processedContent.empty()) {
+        return SendMessageResult::INVALID_CONTENT;
+    }
+
+    // Create message with optional self-destruct timer and roll/rtd flags
+    models::ChatMessage message(realmId, userId, username, userColor, avatarUrl, processedContent,
+                                isGuest, isModerator, isStreamer, selfDestructSeconds,
+                                stickerResult.usedRoll, stickerResult.usedRtd);
+
+    // Store in Redis
+    if (!redis.addMessage(message)) {
+        return SendMessageResult::ERROR;
+    }
+
+    // Record message sent for slow mode (all users except mods/streamers)
+    if (!isModerator && !isStreamer) {
+        redis.recordMessageSent(realmId, userId);
+    }
+
+    // Record user activity
+    redis.recordUserActivity(realmId, userId);
+
+    // Schedule self-destruct if timer is set
+    if (selfDestructSeconds > 0) {
+        scheduleSelfDestruct(realmId, message.messageId, selfDestructSeconds);
+    }
+
+    outMessage = message;
+    return SendMessageResult::SUCCESS;
+}
+
+void ChatService::scheduleSelfDestruct(const std::string& realmId, const std::string& messageId, int delaySeconds) {
+    LOG_DEBUG << "Scheduling self-destruct for message " << messageId << " in " << delaySeconds << " seconds";
+
+    // Use Drogon's timer to schedule deletion
+    drogon::app().getLoop()->runAfter(delaySeconds, [realmId, messageId]() {
+        LOG_DEBUG << "Self-destructing message: " << messageId;
+        auto& modService = ModerationService::getInstance();
+        if (modService.deleteMessage(realmId, messageId, "system:self-destruct")) {
+            // Broadcast deletion to all connected clients in the realm
+            Json::Value broadcast;
+            broadcast["type"] = "message_deleted";
+            broadcast["messageId"] = messageId;
+            ChatWebSocketController::broadcastToRealm(realmId, broadcast);
+            LOG_DEBUG << "Broadcasted self-destruct deletion for message: " << messageId;
+        }
+    });
+}
+
+std::vector<models::ChatMessage> ChatService::getRealmMessages(const std::string& realmId,
+                                                                 int limit,
+                                                                 int64_t beforeTimestamp) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getMessages(realmId, limit, beforeTimestamp);
+}
+
+bool ChatService::deleteMessage(const std::string& realmId, const std::string& messageId,
+                                 const std::string& moderatorId) {
+    auto& modService = ModerationService::getInstance();
+    return modService.deleteMessage(realmId, messageId, moderatorId);
+}
+
+models::ChatSettings ChatService::getRealmSettings(const std::string& realmId) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getRealmSettings(realmId);
+}
+
+bool ChatService::updateRealmSettings(const std::string& realmId, const models::ChatSettings& settings) {
+    auto& redis = RedisMessageStore::getInstance();
+    redis.setRealmSettings(realmId, settings);
+    return true;
+}
+
+models::GlobalChatSettings ChatService::getGlobalSettings() {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getGlobalSettings();
+}
+
+bool ChatService::updateGlobalSettings(const models::GlobalChatSettings& settings) {
+    auto& redis = RedisMessageStore::getInstance();
+    redis.setGlobalSettings(settings);
+    return true;
+}
+
+std::string ChatService::generateGuestUsername() {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.generateGuestId("");
+}
+
+std::string ChatService::getRandomDefaultAvatar() {
+    try {
+        // Synchronous HTTP request to backend for random default avatar
+        auto client = drogon::HttpClient::newHttpClient("http://drogon-backend:8080");
+        auto req = drogon::HttpRequest::newHttpRequest();
+        req->setPath("/api/default-avatar/random");
+        req->setMethod(drogon::Get);
+
+        auto [result, resp] = client->sendRequest(req, 2.0); // 2 second timeout
+
+        if (result == drogon::ReqResult::Ok && resp) {
+            auto json = resp->getJsonObject();
+            if (json && (*json)["success"].asBool()) {
+                auto avatarUrl = (*json)["avatarUrl"];
+                if (!avatarUrl.isNull()) {
+                    return avatarUrl.asString();
+                }
+            }
+        }
+    } catch (const std::exception& e) {
+        LOG_WARN << "Failed to get random default avatar: " << e.what();
+    }
+    return ""; // Return empty string if no default avatars available
+}
+
+void ChatService::startCleanupTask() {
+    auto config = drogon::app().getCustomConfig().get("chat", Json::Value::null);
+    int intervalSeconds = config.get("cleanup_interval_seconds", 300).asInt();
+
+    // Schedule periodic cleanup
+    drogon::app().getLoop()->runEvery(intervalSeconds, [this]() {
+        cleanupMessages();
+    });
+
+    LOG_INFO << "Chat cleanup task started (interval: " << intervalSeconds << "s)";
+}
+
+bool ChatService::containsLinks(const std::string& content) {
+    // Simple regex to detect URLs
+    std::regex urlPattern(R"((https?://|www\.)[^\s]+)", std::regex::icase);
+    return std::regex_search(content, urlPattern);
+}
+
+bool ChatService::isContentValid(const std::string& content) {
+    // Check if content is empty or only whitespace
+    if (content.empty() || content.find_first_not_of(" \t\n\r") == std::string::npos) {
+        return false;
+    }
+    return true;
+}
+
+void ChatService::cleanupMessages() {
+    LOG_DEBUG << "Running message cleanup task";
+
+    auto& redis = RedisMessageStore::getInstance();
+    if (!redis.isInitialized()) {
+        LOG_WARN << "Redis not initialized - skipping cleanup";
+        return;
+    }
+
+    // Get list of active realms from Redis
+    auto activeRealms = redis.getActiveRealms();
+    LOG_DEBUG << "Cleaning up messages for " << activeRealms.size() << " active realms";
+
+    for (const auto& realmId : activeRealms) {
+        auto settings = redis.getRealmSettings(realmId);
+        if (settings.retentionHours > 0) {
+            redis.cleanupOldMessages(realmId, settings.retentionHours);
+            LOG_DEBUG << "Cleaned up old messages for realm: " << realmId
+                      << " (retention: " << settings.retentionHours << "h)";
+        }
+    }
+}
+
+// SECURITY FIX: Bot rate limiting implementation
+bool ChatService::canBotSendMessage(const std::string& botUserId) {
+    std::lock_guard<std::mutex> lock(botRateLimitMutex_);
+
+    auto now = std::chrono::steady_clock::now();
+    auto it = botLastMessage_.find(botUserId);
+
+    if (it != botLastMessage_.end()) {
+        auto elapsed = std::chrono::duration_cast<std::chrono::milliseconds>(now - it->second).count();
+        if (elapsed < BOT_RATE_LIMIT_MS) {
+            LOG_DEBUG << "Bot " << botUserId << " rate limited (only " << elapsed << "ms since last message)";
+            return false;
+        }
+    }
+
+    botLastMessage_[botUserId] = now;
+    return true;
+}
+
+} // namespace services
diff --git a/chat-service/src/services/ChatService.h b/chat-service/src/services/ChatService.h
new file mode 100644
index 0000000..0d55e26
--- /dev/null
+++ b/chat-service/src/services/ChatService.h
@@ -0,0 +1,83 @@
+#pragma once
+#include <string>
+#include <vector>
+#include <functional>
+#include <unordered_map>
+#include <chrono>
+#include <mutex>
+#include "../models/ChatMessage.h"
+
+namespace services {
+
+enum class SendMessageResult {
+    SUCCESS,
+    BANNED,
+    MUTED,
+    SLOW_MODE,
+    BOT_RATE_LIMITED,  // SECURITY FIX: Bot-specific rate limiting
+    LINKS_NOT_ALLOWED,
+    MESSAGE_TOO_LONG,
+    INVALID_CONTENT,
+    GUESTS_NOT_ALLOWED,
+    ERROR
+};
+
+class ChatService {
+public:
+    static ChatService& getInstance();
+
+    void initialize();
+
+    SendMessageResult sendMessage(const std::string& realmId,
+                                   const std::string& userId,
+                                   const std::string& username,
+                                   const std::string& userColor,
+                                   const std::string& avatarUrl,
+                                   const std::string& content,
+                                   bool isGuest,
+                                   bool isModerator,
+                                   bool isStreamer,
+                                   models::ChatMessage& outMessage,
+                                   int selfDestructSeconds = 0,
+                                   bool isBot = false);  // SECURITY FIX: Bot rate limiting
+
+    // Schedule a message for self-destruction
+    void scheduleSelfDestruct(const std::string& realmId, const std::string& messageId, int delaySeconds);
+
+    std::vector<models::ChatMessage> getRealmMessages(const std::string& realmId,
+                                                       int limit = 100,
+                                                       int64_t beforeTimestamp = 0);
+
+    bool deleteMessage(const std::string& realmId, const std::string& messageId,
+                       const std::string& moderatorId);
+
+    models::ChatSettings getRealmSettings(const std::string& realmId);
+    bool updateRealmSettings(const std::string& realmId, const models::ChatSettings& settings);
+
+    models::GlobalChatSettings getGlobalSettings();
+    bool updateGlobalSettings(const models::GlobalChatSettings& settings);
+
+    std::string generateGuestUsername();
+
+    std::string getRandomDefaultAvatar();
+
+    void startCleanupTask();
+
+private:
+    ChatService() = default;
+    ~ChatService() = default;
+    ChatService(const ChatService&) = delete;
+    ChatService& operator=(const ChatService&) = delete;
+
+    bool containsLinks(const std::string& content);
+    bool isContentValid(const std::string& content);
+    void cleanupMessages();
+
+    // SECURITY FIX: Bot rate limiting (1 message per second per bot)
+    static constexpr int BOT_RATE_LIMIT_MS = 1000;  // 1 second between messages
+    std::unordered_map<std::string, std::chrono::steady_clock::time_point> botLastMessage_;
+    std::mutex botRateLimitMutex_;
+    bool canBotSendMessage(const std::string& botUserId);
+};
+
+} // namespace services
diff --git a/chat-service/src/services/ModerationService.cpp b/chat-service/src/services/ModerationService.cpp
new file mode 100644
index 0000000..6c53901
--- /dev/null
+++ b/chat-service/src/services/ModerationService.cpp
@@ -0,0 +1,249 @@
+#include "ModerationService.h"
+#include "RedisMessageStore.h"
+#include <drogon/drogon.h>
+
+namespace services {
+
+ModerationService& ModerationService::getInstance() {
+    static ModerationService instance;
+    return instance;
+}
+
+bool ModerationService::banUser(const std::string& realmId, const std::string& targetUserId,
+                                 const std::string& moderatorId, const std::string& reason) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.addBan(realmId, targetUserId);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::BAN, realmId,
+                                        targetUserId, moderatorId, reason);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::unbanUser(const std::string& realmId, const std::string& targetUserId,
+                                   const std::string& moderatorId) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.removeBan(realmId, targetUserId);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::UNBAN, realmId,
+                                        targetUserId, moderatorId);
+        logAction(action);
+    }
+
+    return success;
+}
+
+// Site-wide fingerprint ban ("uberban") - only for admins and site moderators
+bool ModerationService::uberbanUser(const std::string& fingerprint, const std::string& moderatorId,
+                                     const std::string& reason) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.addFingerprintBan(fingerprint);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::UBERBAN, "site-wide",
+                                        fingerprint, moderatorId, reason);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::unUberbanUser(const std::string& fingerprint, const std::string& moderatorId) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.removeFingerprintBan(fingerprint);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::UNUBERBAN, "site-wide",
+                                        fingerprint, moderatorId);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::isUserUberbanned(const std::string& fingerprint) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.isFingerprintBanned(fingerprint);
+}
+
+std::vector<std::string> ModerationService::getUberbannedFingerprints() {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getBannedFingerprints();
+}
+
+// Per-realm ban (supports user ID and fingerprint for guests)
+bool ModerationService::banUserFromRealm(const std::string& realmId, const std::string& targetUserId,
+                                          const std::string& moderatorId, const std::string& reason,
+                                          const std::string& guestFingerprint) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = false;
+
+    // Ban by user ID if provided
+    if (!targetUserId.empty()) {
+        success = redis.addRealmBan(realmId, "user:" + targetUserId);
+    }
+    // Ban by fingerprint if provided (for guests)
+    else if (!guestFingerprint.empty()) {
+        success = redis.addRealmBan(realmId, "fp:" + guestFingerprint);
+    }
+
+    if (success) {
+        std::string target = !targetUserId.empty() ? targetUserId : ("fp:" + guestFingerprint);
+        models::ModerationAction action(models::ModActionType::REALM_BAN, realmId,
+                                        target, moderatorId, reason);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::unbanUserFromRealm(const std::string& realmId, const std::string& targetUserId,
+                                            const std::string& moderatorId,
+                                            const std::string& guestFingerprint) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = false;
+
+    // Unban by user ID if provided
+    if (!targetUserId.empty()) {
+        success = redis.removeRealmBan(realmId, "user:" + targetUserId);
+    }
+    // Unban by fingerprint if provided (for guests)
+    else if (!guestFingerprint.empty()) {
+        success = redis.removeRealmBan(realmId, "fp:" + guestFingerprint);
+    }
+
+    if (success) {
+        std::string target = !targetUserId.empty() ? targetUserId : ("fp:" + guestFingerprint);
+        models::ModerationAction action(models::ModActionType::REALM_UNBAN, realmId,
+                                        target, moderatorId);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::isUserBannedFromRealm(const std::string& realmId, const std::string& userId,
+                                               const std::string& guestFingerprint) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.isRealmBanned(realmId, userId, guestFingerprint);
+}
+
+std::vector<std::string> ModerationService::getRealmBannedIdentifiers(const std::string& realmId) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getRealmBannedIdentifiers(realmId);
+}
+
+// Kick (disconnect + 1 minute rejoin block)
+bool ModerationService::kickUser(const std::string& realmId, const std::string& targetUserId,
+                                  const std::string& moderatorId, const std::string& reason,
+                                  int durationSeconds) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.addKick(realmId, targetUserId, durationSeconds);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::KICK, realmId,
+                                        targetUserId, moderatorId, reason, durationSeconds);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::isUserKicked(const std::string& realmId, const std::string& userId) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.isKicked(realmId, userId);
+}
+
+bool ModerationService::muteUser(const std::string& realmId, const std::string& targetUserId,
+                                  const std::string& moderatorId, int durationSeconds,
+                                  const std::string& reason) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.addMute(realmId, targetUserId, durationSeconds);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::MUTE, realmId,
+                                        targetUserId, moderatorId, reason, durationSeconds);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::unmuteUser(const std::string& realmId, const std::string& targetUserId,
+                                    const std::string& moderatorId) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.removeMute(realmId, targetUserId);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::UNMUTE, realmId,
+                                        targetUserId, moderatorId);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::deleteMessage(const std::string& realmId, const std::string& messageId,
+                                       const std::string& moderatorId) {
+    auto& redis = RedisMessageStore::getInstance();
+    bool success = redis.deleteMessage(realmId, messageId);
+
+    if (success) {
+        models::ModerationAction action(models::ModActionType::DELETE_MESSAGE, realmId,
+                                        messageId, moderatorId);
+        logAction(action);
+    }
+
+    return success;
+}
+
+bool ModerationService::canUserChat(const std::string& realmId, const std::string& userId,
+                                     const std::string& fingerprint) {
+    auto& redis = RedisMessageStore::getInstance();
+
+    // Check if uberbanned (site-wide fingerprint ban)
+    if (!fingerprint.empty() && redis.isFingerprintBanned(fingerprint)) {
+        return false;
+    }
+
+    // Check if banned from this specific realm (new realm ban system)
+    if (redis.isRealmBanned(realmId, userId, fingerprint)) {
+        return false;
+    }
+
+    // Check legacy per-realm ban
+    if (redis.isBanned(realmId, userId)) {
+        return false;
+    }
+
+    // Check if kicked from this realm
+    if (!userId.empty() && redis.isKicked(realmId, userId)) {
+        return false;
+    }
+
+    // Check if muted
+    if (redis.isMuted(realmId, userId)) {
+        return false;
+    }
+
+    return true;
+}
+
+std::vector<std::string> ModerationService::getBannedUsers(const std::string& realmId) {
+    auto& redis = RedisMessageStore::getInstance();
+    return redis.getBannedUsers(realmId);
+}
+
+void ModerationService::logAction(const models::ModerationAction& action) {
+    LOG_INFO << "Moderation action: type=" << static_cast<int>(action.type)
+             << " realm=" << action.realmId
+             << " target=" << action.targetUserId
+             << " moderator=" << action.moderatorId
+             << " reason=" << action.reason;
+}
+
+} // namespace services
diff --git a/chat-service/src/services/ModerationService.h b/chat-service/src/services/ModerationService.h
new file mode 100644
index 0000000..237dd42
--- /dev/null
+++ b/chat-service/src/services/ModerationService.h
@@ -0,0 +1,67 @@
+#pragma once
+#include <string>
+#include <vector>
+#include "../models/ModerationAction.h"
+
+namespace services {
+
+class ModerationService {
+public:
+    static ModerationService& getInstance();
+
+    // Legacy per-realm ban (user ID only) - kept for backward compatibility
+    bool banUser(const std::string& realmId, const std::string& targetUserId,
+                 const std::string& moderatorId, const std::string& reason = "");
+    bool unbanUser(const std::string& realmId, const std::string& targetUserId,
+                   const std::string& moderatorId);
+
+    // Site-wide fingerprint ban ("uberban") - only for admins and site moderators
+    bool uberbanUser(const std::string& fingerprint, const std::string& moderatorId,
+                     const std::string& reason = "");
+    bool unUberbanUser(const std::string& fingerprint, const std::string& moderatorId);
+    bool isUserUberbanned(const std::string& fingerprint);
+    std::vector<std::string> getUberbannedFingerprints();
+
+    // Per-realm ban (supports user ID and fingerprint for guests)
+    bool banUserFromRealm(const std::string& realmId, const std::string& targetUserId,
+                          const std::string& moderatorId, const std::string& reason = "",
+                          const std::string& guestFingerprint = "");
+    bool unbanUserFromRealm(const std::string& realmId, const std::string& targetUserId,
+                            const std::string& moderatorId,
+                            const std::string& guestFingerprint = "");
+    bool isUserBannedFromRealm(const std::string& realmId, const std::string& userId,
+                               const std::string& guestFingerprint = "");
+    std::vector<std::string> getRealmBannedIdentifiers(const std::string& realmId);
+
+    // Kick (disconnect + 1 minute rejoin block)
+    bool kickUser(const std::string& realmId, const std::string& targetUserId,
+                  const std::string& moderatorId, const std::string& reason = "",
+                  int durationSeconds = 60);
+    bool isUserKicked(const std::string& realmId, const std::string& userId);
+
+    // durationSeconds: 0 = permanent (default), >0 = temporary with auto-expire
+    bool muteUser(const std::string& realmId, const std::string& targetUserId,
+                  const std::string& moderatorId, int durationSeconds = 0,
+                  const std::string& reason = "");
+
+    bool unmuteUser(const std::string& realmId, const std::string& targetUserId,
+                    const std::string& moderatorId);
+
+    bool deleteMessage(const std::string& realmId, const std::string& messageId,
+                       const std::string& moderatorId);
+
+    bool canUserChat(const std::string& realmId, const std::string& userId,
+                     const std::string& fingerprint = "");
+
+    std::vector<std::string> getBannedUsers(const std::string& realmId);
+
+private:
+    ModerationService() = default;
+    ~ModerationService() = default;
+    ModerationService(const ModerationService&) = delete;
+    ModerationService& operator=(const ModerationService&) = delete;
+
+    void logAction(const models::ModerationAction& action);
+};
+
+} // namespace services
diff --git a/chat-service/src/services/RedisMessageStore.cpp b/chat-service/src/services/RedisMessageStore.cpp
new file mode 100644
index 0000000..f4da592
--- /dev/null
+++ b/chat-service/src/services/RedisMessageStore.cpp
@@ -0,0 +1,651 @@
+#include "RedisMessageStore.h"
+#include <drogon/drogon.h>
+#include <regex>
+#include <random>
+
+using namespace sw::redis;
+using namespace models;
+
+namespace services {
+
+RedisMessageStore& RedisMessageStore::getInstance() {
+    static RedisMessageStore instance;
+    return instance;
+}
+
+void RedisMessageStore::initialize(const std::string& host, int port, int db, const std::string& password) {
+    ConnectionOptions opts;
+    opts.host = host;
+    opts.port = port;
+    opts.db = db;
+    opts.socket_timeout = std::chrono::milliseconds(5000);
+
+    if (!password.empty()) {
+        opts.password = password;
+    }
+
+    redis_ = std::make_unique<Redis>(opts);
+    LOG_INFO << "RedisMessageStore initialized: " << host << ":" << port << " db=" << db;
+}
+
+void RedisMessageStore::trackActiveRealm(const std::string& realmId) {
+    if (!redis_) return;
+    try {
+        auto now = std::chrono::duration_cast<std::chrono::seconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count();
+        redis_->zadd("chat:active_realms", realmId, static_cast<double>(now));
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error tracking active realm: " << e.what();
+    }
+}
+
+std::vector<std::string> RedisMessageStore::getActiveRealms() {
+    std::vector<std::string> realms;
+    if (!redis_) return realms;
+    try {
+        // Get realms active in the last hour
+        auto now = std::chrono::duration_cast<std::chrono::seconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count();
+        auto cutoff = now - 3600;  // 1 hour ago
+        BoundedInterval<double> interval(static_cast<double>(cutoff), static_cast<double>(now), BoundType::CLOSED);
+        redis_->zrangebyscore("chat:active_realms", interval, std::back_inserter(realms));
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting active realms: " << e.what();
+    }
+    return realms;
+}
+
+bool RedisMessageStore::addMessage(const ChatMessage& message) {
+    if (!redis_) {
+        LOG_ERROR << "Redis not initialized - cannot add message";
+        return false;
+    }
+    try {
+        // Track this realm as active
+        trackActiveRealm(message.realmId);
+
+        auto key = getMessagesKey(message.realmId);
+        auto serialized = message.serialize();
+
+        // Add to sorted set with timestamp as score
+        redis_->zadd(key, serialized, static_cast<double>(message.timestamp));
+
+        // Trim to max messages per realm
+        auto maxMessages = drogon::app().getCustomConfig().get("chat", Json::Value::null)
+                                        .get("max_messages_per_realm", 1000).asInt64();
+        redis_->zremrangebyrank(key, 0, -(maxMessages + 1));
+
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding message: " << e.what();
+        return false;
+    }
+}
+
+std::vector<ChatMessage> RedisMessageStore::getMessages(const std::string& realmId,
+                                                         int limit,
+                                                         int64_t beforeTimestamp) {
+    std::vector<ChatMessage> messages;
+    if (!redis_) {
+        LOG_ERROR << "Redis not initialized - cannot get messages";
+        return messages;
+    }
+    try {
+        auto key = getMessagesKey(realmId);
+
+        std::vector<std::string> results;
+        if (beforeTimestamp > 0) {
+            // Get messages before timestamp
+            BoundedInterval<double> interval(0, static_cast<double>(beforeTimestamp), BoundType::CLOSED);
+            LimitOptions limitOpt(0, limit);
+            redis_->zrevrangebyscore(key, interval, limitOpt, std::back_inserter(results));
+        } else {
+            // Get latest messages
+            redis_->zrevrange(key, 0, limit - 1, std::back_inserter(results));
+        }
+
+        for (const auto& serialized : results) {
+            messages.push_back(ChatMessage::deserialize(serialized));
+        }
+
+        // Reverse to get chronological order
+        std::reverse(messages.begin(), messages.end());
+
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting messages: " << e.what();
+    }
+    return messages;
+}
+
+bool RedisMessageStore::deleteMessage(const std::string& realmId, const std::string& messageId) {
+    try {
+        auto key = getMessagesKey(realmId);
+
+        // Get all messages and remove the one with matching ID
+        std::vector<std::string> messages;
+        redis_->zrange(key, 0, -1, std::back_inserter(messages));
+
+        for (const auto& serialized : messages) {
+            auto msg = ChatMessage::deserialize(serialized);
+            if (msg.messageId == messageId) {
+                redis_->zrem(key, serialized);
+                return true;
+            }
+        }
+        return false;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error deleting message: " << e.what();
+        return false;
+    }
+}
+
+void RedisMessageStore::cleanupOldMessages(const std::string& realmId, int retentionHours) {
+    try {
+        auto key = getMessagesKey(realmId);
+        auto cutoffTime = std::chrono::duration_cast<std::chrono::milliseconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count() - (retentionHours * 3600000LL);
+
+        BoundedInterval<double> interval(0, static_cast<double>(cutoffTime), BoundType::CLOSED);
+        redis_->zremrangebyscore(key, interval);
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error cleaning up messages: " << e.what();
+    }
+}
+
+void RedisMessageStore::setGlobalSettings(const GlobalChatSettings& settings) {
+    try {
+        redis_->hset("chat:settings:global", "guestPrefix", settings.guestPrefix);
+        redis_->hset("chat:settings:global", "defaultRetentionHours",
+                     std::to_string(settings.defaultRetentionHours));
+        redis_->hset("chat:settings:global", "guestsAllowedSiteWide",
+                     settings.guestsAllowedSiteWide ? "1" : "0");
+        redis_->hset("chat:settings:global", "registrationEnabled",
+                     settings.registrationEnabled ? "1" : "0");
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error setting global settings: " << e.what();
+    }
+}
+
+GlobalChatSettings RedisMessageStore::getGlobalSettings() {
+    GlobalChatSettings settings;
+    try {
+        std::unordered_map<std::string, std::string> data;
+        redis_->hgetall("chat:settings:global", std::inserter(data, data.begin()));
+
+        if (!data.empty()) {
+            // Safely read each field with defaults for missing/empty values
+            auto it = data.find("guestPrefix");
+            if (it != data.end() && !it->second.empty()) {
+                settings.guestPrefix = it->second;
+            }
+
+            it = data.find("defaultRetentionHours");
+            if (it != data.end() && !it->second.empty()) {
+                settings.defaultRetentionHours = std::stoi(it->second);
+            }
+
+            it = data.find("guestsAllowedSiteWide");
+            if (it != data.end()) {
+                settings.guestsAllowedSiteWide = (it->second == "1");
+            }
+
+            it = data.find("registrationEnabled");
+            if (it != data.end()) {
+                settings.registrationEnabled = (it->second == "1");
+            }
+        } else {
+            // Initialize with defaults from config
+            auto config = drogon::app().getCustomConfig().get("chat", Json::Value::null);
+            settings.guestPrefix = config.get("guest_prefix", "Guest").asString();
+            settings.defaultRetentionHours = config.get("default_retention_hours", 24).asInt();
+            settings.guestsAllowedSiteWide = config.get("guests_allowed_site_wide", true).asBool();
+            settings.registrationEnabled = config.get("registration_enabled", true).asBool();
+            setGlobalSettings(settings);
+        }
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting global settings: " << e.what();
+    }
+    return settings;
+}
+
+void RedisMessageStore::setRealmSettings(const std::string& realmId, const ChatSettings& settings) {
+    try {
+        auto key = "chat:settings:realm:" + realmId;
+        redis_->hset(key, "retentionHours", std::to_string(settings.retentionHours));
+        redis_->hset(key, "slowModeSeconds", std::to_string(settings.slowModeSeconds));
+        redis_->hset(key, "linksAllowed", settings.linksAllowed ? "1" : "0");
+        redis_->hset(key, "subscribersOnly", settings.subscribersOnly ? "1" : "0");
+        redis_->hset(key, "chatGuestsAllowed", settings.chatGuestsAllowed ? "1" : "0");
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error setting realm settings: " << e.what();
+    }
+}
+
+ChatSettings RedisMessageStore::getRealmSettings(const std::string& realmId) {
+    ChatSettings settings;
+    settings.realmId = realmId;
+
+    try {
+        auto key = "chat:settings:realm:" + realmId;
+        std::unordered_map<std::string, std::string> data;
+        redis_->hgetall(key, std::inserter(data, data.begin()));
+
+        if (!data.empty()) {
+            // Safely read each field with defaults for missing/empty values
+            auto it = data.find("retentionHours");
+            if (it != data.end() && !it->second.empty()) {
+                settings.retentionHours = std::stoi(it->second);
+            }
+
+            it = data.find("slowModeSeconds");
+            if (it != data.end() && !it->second.empty()) {
+                settings.slowModeSeconds = std::stoi(it->second);
+            }
+
+            it = data.find("linksAllowed");
+            if (it != data.end()) {
+                settings.linksAllowed = (it->second == "1");
+            }
+
+            it = data.find("subscribersOnly");
+            if (it != data.end()) {
+                settings.subscribersOnly = (it->second == "1");
+            }
+
+            it = data.find("chatGuestsAllowed");
+            // Default to true if not set (backward compatibility)
+            settings.chatGuestsAllowed = (it == data.end() || it->second != "0");
+        } else {
+            // Use global defaults
+            auto globalSettings = getGlobalSettings();
+            settings.retentionHours = globalSettings.defaultRetentionHours;
+        }
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting realm settings: " << e.what();
+    }
+    return settings;
+}
+
+bool RedisMessageStore::addBan(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getBanKey(realmId);
+        redis_->sadd(key, userId);
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::removeBan(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getBanKey(realmId);
+        redis_->srem(key, userId);
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error removing ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::isBanned(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getBanKey(realmId);
+        return redis_->sismember(key, userId);
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking ban: " << e.what();
+        return false;
+    }
+}
+
+std::vector<std::string> RedisMessageStore::getBannedUsers(const std::string& realmId) {
+    std::vector<std::string> banned;
+    try {
+        auto key = getBanKey(realmId);
+        redis_->smembers(key, std::back_inserter(banned));
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting banned users: " << e.what();
+    }
+    return banned;
+}
+
+bool RedisMessageStore::addMute(const std::string& realmId, const std::string& userId, int durationSeconds) {
+    try {
+        auto key = getMuteKey(realmId, userId);
+        if (durationSeconds <= 0) {
+            // Permanent mute - no expiry
+            redis_->set(key, "1");
+            LOG_INFO << "Added permanent mute in " << realmId << " for user " << userId;
+        } else {
+            // Temporary mute with TTL
+            redis_->setex(key, durationSeconds, "1");
+            LOG_INFO << "Added temporary mute in " << realmId << " for user " << userId << " (" << durationSeconds << "s)";
+        }
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding mute: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::removeMute(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getMuteKey(realmId, userId);
+        redis_->del(key);
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error removing mute: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::isMuted(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getMuteKey(realmId, userId);
+        auto val = redis_->get(key);
+        return val.has_value();
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking mute: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::canSendMessage(const std::string& realmId, const std::string& userId, int slowModeSeconds) {
+    if (slowModeSeconds <= 0) return true;
+    if (!redis_) {
+        LOG_ERROR << "Redis not initialized - denying message for safety";
+        return false;  // Fail safe: deny if Redis unavailable
+    }
+
+    try {
+        auto key = getSlowModeKey(realmId, userId);
+        auto val = redis_->get(key);
+        return !val.has_value();
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking slow mode: " << e.what();
+        return false;  // Fail safe: deny on error
+    }
+}
+
+void RedisMessageStore::recordMessageSent(const std::string& realmId, const std::string& userId) {
+    try {
+        auto settings = getRealmSettings(realmId);
+        if (settings.slowModeSeconds > 0) {
+            auto key = getSlowModeKey(realmId, userId);
+            redis_->setex(key, settings.slowModeSeconds, "1");
+        }
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error recording message: " << e.what();
+    }
+}
+
+std::string RedisMessageStore::generateGuestId(const std::string& pattern) {
+    try {
+        auto globalSettings = getGlobalSettings();
+
+        // Generate 5-character Base62 string (0-9, a-z, A-Z)
+        std::random_device rd;
+        std::mt19937 gen(rd());
+        const char base62_chars[] = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        std::uniform_int_distribution<> dis(0, 61);  // 62 characters (0-61)
+        std::string randomStr;
+        for (int i = 0; i < 5; i++) {
+            randomStr += base62_chars[dis(gen)];
+        }
+
+        // Always use format: prefix + random (e.g., "Guest3xYzA")
+        return globalSettings.guestPrefix + randomStr;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error generating guest ID: " << e.what();
+        return "guest" + std::to_string(time(nullptr));
+    }
+}
+
+// SECURITY FIX #31: Server-side guest name persistence
+bool RedisMessageStore::setGuestName(const std::string& fingerprint, const std::string& name) {
+    if (fingerprint.empty() || name.empty()) return false;
+    try {
+        // Store with 30 day TTL (guest names expire after inactivity)
+        redis_->setex("chat:guest_name:" + fingerprint, 30 * 24 * 60 * 60, name);
+        LOG_DEBUG << "Stored guest name for fingerprint: " << fingerprint.substr(0, 8) << "...";
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error setting guest name: " << e.what();
+        return false;
+    }
+}
+
+std::optional<std::string> RedisMessageStore::getGuestName(const std::string& fingerprint) {
+    if (fingerprint.empty()) return std::nullopt;
+    try {
+        auto result = redis_->get("chat:guest_name:" + fingerprint);
+        if (result) {
+            LOG_DEBUG << "Found stored guest name for fingerprint: " << fingerprint.substr(0, 8) << "...";
+            return *result;
+        }
+        return std::nullopt;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting guest name: " << e.what();
+        return std::nullopt;
+    }
+}
+
+bool RedisMessageStore::clearGuestName(const std::string& fingerprint) {
+    if (fingerprint.empty()) return false;
+    try {
+        redis_->del("chat:guest_name:" + fingerprint);
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error clearing guest name: " << e.what();
+        return false;
+    }
+}
+
+void RedisMessageStore::recordUserActivity(const std::string& realmId, const std::string& userId) {
+    try {
+        auto key = getActiveUsersKey(realmId);
+        auto now = std::chrono::duration_cast<std::chrono::seconds>(
+            std::chrono::system_clock::now().time_since_epoch()
+        ).count();
+        redis_->zadd(key, userId, static_cast<double>(now));
+
+        // Remove inactive users (>5 minutes)
+        auto cutoff = now - 300;
+        BoundedInterval<double> interval(0, static_cast<double>(cutoff), BoundType::CLOSED);
+        redis_->zremrangebyscore(key, interval);
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error recording activity: " << e.what();
+    }
+}
+
+int RedisMessageStore::getActiveUserCount(const std::string& realmId) {
+    try {
+        auto key = getActiveUsersKey(realmId);
+        return redis_->zcard(key);
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting active count: " << e.what();
+        return 0;
+    }
+}
+
+// Pending uberban (set by backend or chat-service when admin marks user for deferred uberban)
+bool RedisMessageStore::setPendingUberban(const std::string& userId) {
+    if (userId.empty()) return false;
+    try {
+        // 30 day TTL - if user never reconnects, the key will expire
+        // Backend also sets this with TTL as backup
+        redis_->setex("pending_uberban:" + userId, std::chrono::seconds(30 * 24 * 60 * 60), "1");
+        LOG_INFO << "Set pending uberban for user: " << userId << " (TTL: 30 days)";
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error setting pending uberban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::hasPendingUberban(const std::string& userId) {
+    if (userId.empty()) return false;
+    try {
+        auto val = redis_->get("pending_uberban:" + userId);
+        return val.has_value();
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking pending uberban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::clearPendingUberban(const std::string& userId) {
+    if (userId.empty()) return false;
+    try {
+        redis_->del("pending_uberban:" + userId);
+        LOG_INFO << "Cleared pending uberban for user: " << userId;
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error clearing pending uberban: " << e.what();
+        return false;
+    }
+}
+
+// Fingerprint bans (site-wide, for guests only)
+// These use a single global Redis set: chat:banned:fingerprints
+
+bool RedisMessageStore::addFingerprintBan(const std::string& fingerprint) {
+    if (fingerprint.empty()) return false;
+    try {
+        redis_->sadd("chat:banned:fingerprints", fingerprint);
+        LOG_INFO << "Added fingerprint ban: " << fingerprint.substr(0, 8) << "...";
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding fingerprint ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::removeFingerprintBan(const std::string& fingerprint) {
+    if (fingerprint.empty()) return false;
+    try {
+        redis_->srem("chat:banned:fingerprints", fingerprint);
+        LOG_INFO << "Removed fingerprint ban: " << fingerprint.substr(0, 8) << "...";
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error removing fingerprint ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::isFingerprintBanned(const std::string& fingerprint) {
+    if (fingerprint.empty()) return false;
+    try {
+        return redis_->sismember("chat:banned:fingerprints", fingerprint);
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking fingerprint ban: " << e.what();
+        return false;  // Fail open - allow if Redis error
+    }
+}
+
+std::vector<std::string> RedisMessageStore::getBannedFingerprints() {
+    std::vector<std::string> fingerprints;
+    try {
+        redis_->smembers("chat:banned:fingerprints", std::back_inserter(fingerprints));
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting banned fingerprints: " << e.what();
+    }
+    return fingerprints;
+}
+
+// Realm-specific bans (supports both user IDs and fingerprints)
+// identifier format: "user:{userId}" or "fp:{fingerprint}"
+
+bool RedisMessageStore::addRealmBan(const std::string& realmId, const std::string& identifier) {
+    if (identifier.empty()) return false;
+    try {
+        auto key = getRealmBanKey(realmId);
+        redis_->sadd(key, identifier);
+        LOG_INFO << "Added realm ban in " << realmId << ": " << identifier;
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding realm ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::removeRealmBan(const std::string& realmId, const std::string& identifier) {
+    if (identifier.empty()) return false;
+    try {
+        auto key = getRealmBanKey(realmId);
+        redis_->srem(key, identifier);
+        LOG_INFO << "Removed realm ban in " << realmId << ": " << identifier;
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error removing realm ban: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::isRealmBanned(const std::string& realmId, const std::string& userId, const std::string& fingerprint) {
+    try {
+        auto key = getRealmBanKey(realmId);
+
+        // Check user ban if userId provided
+        if (!userId.empty()) {
+            if (redis_->sismember(key, "user:" + userId)) {
+                return true;
+            }
+        }
+
+        // Check fingerprint ban if fingerprint provided
+        if (!fingerprint.empty()) {
+            if (redis_->sismember(key, "fp:" + fingerprint)) {
+                return true;
+            }
+        }
+
+        return false;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking realm ban: " << e.what();
+        return false;  // Fail open - allow if Redis error
+    }
+}
+
+std::vector<std::string> RedisMessageStore::getRealmBannedIdentifiers(const std::string& realmId) {
+    std::vector<std::string> identifiers;
+    try {
+        auto key = getRealmBanKey(realmId);
+        redis_->smembers(key, std::back_inserter(identifiers));
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error getting realm banned identifiers: " << e.what();
+    }
+    return identifiers;
+}
+
+// Kicks (temporary disconnect + rejoin block with TTL)
+
+bool RedisMessageStore::addKick(const std::string& realmId, const std::string& userId, int durationSeconds) {
+    if (userId.empty()) return false;
+    try {
+        auto key = getKickKey(realmId, userId);
+        redis_->setex(key, durationSeconds, "1");
+        LOG_INFO << "Added kick in " << realmId << " for user " << userId << " (" << durationSeconds << "s)";
+        return true;
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error adding kick: " << e.what();
+        return false;
+    }
+}
+
+bool RedisMessageStore::isKicked(const std::string& realmId, const std::string& userId) {
+    if (userId.empty()) return false;
+    try {
+        auto key = getKickKey(realmId, userId);
+        auto val = redis_->get(key);
+        return val.has_value();
+    } catch (const Error& e) {
+        LOG_ERROR << "Redis error checking kick: " << e.what();
+        return false;  // Fail open - allow if Redis error
+    }
+}
+
+} // namespace services
diff --git a/chat-service/src/services/RedisMessageStore.h b/chat-service/src/services/RedisMessageStore.h
new file mode 100644
index 0000000..cefc1b9
--- /dev/null
+++ b/chat-service/src/services/RedisMessageStore.h
@@ -0,0 +1,124 @@
+#pragma once
+#include <memory>
+#include <string>
+#include <vector>
+#include <optional>
+#include <sw/redis++/redis++.h>
+#include "../models/ChatMessage.h"
+
+namespace services {
+
+class RedisMessageStore {
+public:
+    static RedisMessageStore& getInstance();
+
+    void initialize(const std::string& host, int port, int db = 1, const std::string& password = "");
+    bool isInitialized() const { return redis_ != nullptr; }
+
+    // Track active realms for cleanup
+    void trackActiveRealm(const std::string& realmId);
+    std::vector<std::string> getActiveRealms();
+
+    // Message operations
+    bool addMessage(const models::ChatMessage& message);
+    std::vector<models::ChatMessage> getMessages(const std::string& realmId,
+                                                  int limit = 100,
+                                                  int64_t beforeTimestamp = 0);
+    bool deleteMessage(const std::string& realmId, const std::string& messageId);
+    void cleanupOldMessages(const std::string& realmId, int retentionHours);
+
+    // Settings operations
+    void setGlobalSettings(const models::GlobalChatSettings& settings);
+    models::GlobalChatSettings getGlobalSettings();
+    void setRealmSettings(const std::string& realmId, const models::ChatSettings& settings);
+    models::ChatSettings getRealmSettings(const std::string& realmId);
+
+    // Moderation operations (per-realm)
+    bool addBan(const std::string& realmId, const std::string& userId);
+    bool removeBan(const std::string& realmId, const std::string& userId);
+    bool isBanned(const std::string& realmId, const std::string& userId);
+    std::vector<std::string> getBannedUsers(const std::string& realmId);
+
+    // durationSeconds: 0 = permanent, >0 = temporary with TTL
+    bool addMute(const std::string& realmId, const std::string& userId, int durationSeconds = 0);
+    bool removeMute(const std::string& realmId, const std::string& userId);
+    bool isMuted(const std::string& realmId, const std::string& userId);
+
+    // Fingerprint bans - site-wide "uberban" (for guests and registered users)
+    bool addFingerprintBan(const std::string& fingerprint);
+    bool removeFingerprintBan(const std::string& fingerprint);
+    bool isFingerprintBanned(const std::string& fingerprint);
+    std::vector<std::string> getBannedFingerprints();
+
+    // Realm-specific bans (supports both user IDs and fingerprints)
+    // identifier format: "user:{userId}" or "fp:{fingerprint}"
+    bool addRealmBan(const std::string& realmId, const std::string& identifier);
+    bool removeRealmBan(const std::string& realmId, const std::string& identifier);
+    bool isRealmBanned(const std::string& realmId, const std::string& userId, const std::string& fingerprint = "");
+    std::vector<std::string> getRealmBannedIdentifiers(const std::string& realmId);
+
+    // Kicks (temporary disconnect + rejoin block with TTL)
+    bool addKick(const std::string& realmId, const std::string& userId, int durationSeconds = 60);
+    bool isKicked(const std::string& realmId, const std::string& userId);
+
+    // Slow mode
+    bool canSendMessage(const std::string& realmId, const std::string& userId, int slowModeSeconds);
+    void recordMessageSent(const std::string& realmId, const std::string& userId);
+
+    // Guest ID generation
+    std::string generateGuestId(const std::string& pattern);
+
+    // SECURITY FIX #31: Server-side guest name persistence (by fingerprint)
+    // Stores guest's chosen name server-side so it persists across sessions
+    // More secure than localStorage which is accessible to same-origin XSS
+    bool setGuestName(const std::string& fingerprint, const std::string& name);
+    std::optional<std::string> getGuestName(const std::string& fingerprint);
+    bool clearGuestName(const std::string& fingerprint);
+
+    // Active users
+    void recordUserActivity(const std::string& realmId, const std::string& userId);
+    int getActiveUserCount(const std::string& realmId);
+
+    // Pending uberban check (set by backend or chat-service, checked on connect)
+    bool setPendingUberban(const std::string& userId);
+    bool hasPendingUberban(const std::string& userId);
+    bool clearPendingUberban(const std::string& userId);
+
+private:
+    RedisMessageStore() = default;
+    ~RedisMessageStore() = default;
+    RedisMessageStore(const RedisMessageStore&) = delete;
+    RedisMessageStore& operator=(const RedisMessageStore&) = delete;
+
+    std::unique_ptr<sw::redis::Redis> redis_;
+
+    std::string getMessagesKey(const std::string& realmId) const {
+        return "chat:messages:" + realmId;
+    }
+
+    std::string getBanKey(const std::string& realmId) const {
+        return "chat:banned:" + realmId;
+    }
+
+    std::string getMuteKey(const std::string& realmId, const std::string& userId) const {
+        return "chat:muted:" + realmId + ":" + userId;
+    }
+
+    std::string getSlowModeKey(const std::string& realmId, const std::string& userId) const {
+        return "chat:slowmode:" + realmId + ":" + userId;
+    }
+
+    std::string getActiveUsersKey(const std::string& realmId) const {
+        return "chat:active:" + realmId;
+    }
+
+    std::string getRealmBanKey(const std::string& realmId) const {
+        return "chat:realm_banned:" + realmId;
+    }
+
+    std::string getKickKey(const std::string& realmId, const std::string& userId) const {
+        return "chat:kicked:" + realmId + ":" + userId;
+    }
+};
+
+} // namespace services
diff --git a/chat-service/src/services/StickerService.cpp b/chat-service/src/services/StickerService.cpp
new file mode 100644
index 0000000..6d92739
--- /dev/null
+++ b/chat-service/src/services/StickerService.cpp
@@ -0,0 +1,342 @@
+#include "StickerService.h"
+#include <drogon/drogon.h>
+#include <drogon/HttpClient.h>
+#include <regex>
+#include <algorithm>
+#include <unordered_set>
+
+namespace services {
+
+StickerService& StickerService::getInstance() {
+    static StickerService instance;
+    return instance;
+}
+
+void StickerService::initialize() {
+    // Initialize random number generator with random seed
+    std::random_device rd;
+    rng_.seed(rd());
+    initialized_ = true;
+
+    LOG_INFO << "StickerService initialized";
+}
+
+void StickerService::scheduleFetch() {
+    // This should be called from main.cpp after event loop setup
+    LOG_INFO << "Scheduling sticker fetch in 2 seconds...";
+    drogon::app().getLoop()->runAfter(2.0, [this]() {
+        LOG_INFO << "Pre-fetching stickers from backend...";
+        fetchStickersAsync();
+    });
+}
+
+void StickerService::ensureStickersLoaded() {
+    // Check if we need to fetch (lazy load on first use, then refresh daily)
+    auto now = std::chrono::steady_clock::now();
+    auto elapsed = std::chrono::duration_cast<std::chrono::seconds>(now - lastFetch_).count();
+
+    // Fetch if never fetched or cache expired
+    if (lastFetch_ == std::chrono::steady_clock::time_point{} || elapsed > CACHE_TTL_SECONDS) {
+        fetchStickersFromBackend();
+    }
+}
+
+void StickerService::fetchStickersFromBackend() {
+    auto config = drogon::app().getCustomConfig();
+    auto backendConfig = config.get("backend_api", Json::Value::null);
+    std::string host;
+    int port;
+
+    if (backendConfig.isNull() || !backendConfig.isMember("host")) {
+        host = "drogon-backend";
+        port = 8080;
+    } else {
+        host = backendConfig.get("host", "drogon-backend").asString();
+        port = backendConfig.get("port", 8080).asInt();
+    }
+
+    auto client = drogon::HttpClient::newHttpClient("http://" + host + ":" + std::to_string(port));
+    auto req = drogon::HttpRequest::newHttpRequest();
+    req->setMethod(drogon::Get);
+    req->setPath("/api/admin/stickers");
+
+    // Synchronous request with timeout
+    std::pair<drogon::ReqResult, drogon::HttpResponsePtr> result = client->sendRequest(req, 5.0);
+
+    if (result.first != drogon::ReqResult::Ok) {
+        LOG_ERROR << "Failed to fetch stickers from backend: request failed";
+        return;
+    }
+
+    auto resp = result.second;
+    if (resp->getStatusCode() != drogon::k200OK) {
+        LOG_ERROR << "Failed to fetch stickers from backend: HTTP " << resp->getStatusCode();
+        return;
+    }
+
+    try {
+        auto json = resp->getJsonObject();
+        if (!json || !(*json)["success"].asBool()) {
+            LOG_ERROR << "Failed to fetch stickers: invalid response";
+            return;
+        }
+
+        std::lock_guard<std::mutex> lock(mutex_);
+        stickers_.clear();
+
+        const auto& stickersArray = (*json)["stickers"];
+        for (const auto& s : stickersArray) {
+            Sticker sticker;
+            sticker.id = s["id"].asInt64();
+            sticker.name = s["name"].asString();
+            sticker.filePath = s["filePath"].asString();
+            stickers_.push_back(sticker);
+        }
+
+        lastFetch_ = std::chrono::steady_clock::now();
+        LOG_DEBUG << "Fetched " << stickers_.size() << " stickers from backend";
+    } catch (const std::exception& e) {
+        LOG_ERROR << "Error parsing stickers response: " << e.what();
+    }
+}
+
+
+void StickerService::fetchStickersAsync() {
+    auto config = drogon::app().getCustomConfig();
+    LOG_DEBUG << "Custom config keys: " << config.getMemberNames().size();
+    for (const auto& key : config.getMemberNames()) {
+        LOG_DEBUG << "  Config key: " << key;
+    }
+
+    auto backendConfig = config.get("backend_api", Json::Value::null);
+    std::string host;
+    int port;
+
+    if (backendConfig.isNull() || !backendConfig.isMember("host")) {
+        // Fallback: hardcode the Docker network hostname
+        LOG_WARN << "backend_api config not found, using hardcoded defaults";
+        host = "drogon-backend";
+        port = 8080;
+    } else {
+        host = backendConfig.get("host", "drogon-backend").asString();
+        port = backendConfig.get("port", 8080).asInt();
+    }
+
+    std::string url = "http://" + host + ":" + std::to_string(port);
+    LOG_INFO << "Creating HTTP client for: " << url;
+
+    auto client = drogon::HttpClient::newHttpClient(url, drogon::app().getLoop());
+    auto req = drogon::HttpRequest::newHttpRequest();
+    req->setMethod(drogon::Get);
+    req->setPath("/api/admin/stickers");
+
+    // Capture client to keep it alive during async request
+    client->sendRequest(req, [this, client](drogon::ReqResult result, const drogon::HttpResponsePtr& resp) {
+        if (result != drogon::ReqResult::Ok) {
+            std::string errorMsg;
+            switch (result) {
+                case drogon::ReqResult::BadResponse: errorMsg = "BadResponse"; break;
+                case drogon::ReqResult::NetworkFailure: errorMsg = "NetworkFailure"; break;
+                case drogon::ReqResult::BadServerAddress: errorMsg = "BadServerAddress"; break;
+                case drogon::ReqResult::Timeout: errorMsg = "Timeout"; break;
+                case drogon::ReqResult::HandshakeError: errorMsg = "HandshakeError"; break;
+                case drogon::ReqResult::InvalidCertificate: errorMsg = "InvalidCertificate"; break;
+                default: errorMsg = "Unknown(" + std::to_string(static_cast<int>(result)) + ")"; break;
+            }
+            LOG_ERROR << "Async fetch stickers failed: " << errorMsg;
+            return;
+        }
+
+        if (resp->getStatusCode() != drogon::k200OK) {
+            LOG_ERROR << "Async fetch stickers failed: HTTP " << resp->getStatusCode();
+            return;
+        }
+
+        try {
+            auto json = resp->getJsonObject();
+            if (!json || !(*json)["success"].asBool()) {
+                LOG_ERROR << "Async fetch stickers: invalid response";
+                return;
+            }
+
+            std::lock_guard<std::mutex> lock(mutex_);
+            stickers_.clear();
+
+            const auto& stickersArray = (*json)["stickers"];
+            for (const auto& s : stickersArray) {
+                Sticker sticker;
+                sticker.id = s["id"].asInt64();
+                sticker.name = s["name"].asString();
+                sticker.filePath = s["filePath"].asString();
+                stickers_.push_back(sticker);
+            }
+
+            lastFetch_ = std::chrono::steady_clock::now();
+            LOG_INFO << "Successfully fetched " << stickers_.size() << " stickers from backend";
+        } catch (const std::exception& e) {
+            LOG_ERROR << "Error parsing async stickers response: " << e.what();
+        }
+    }, 10.0);  // 10 second timeout
+}
+
+void StickerService::refreshCache() {
+    fetchStickersAsync();
+}
+
+std::string StickerService::getRandomStickerName() {
+    // Ensure stickers are loaded (lazy load / refresh if expired)
+    ensureStickersLoaded();
+
+    std::lock_guard<std::mutex> lock(mutex_);
+
+    if (stickers_.empty()) {
+        LOG_WARN << ":roll: used but no stickers available in database";
+        return ":roll:"; // Keep :roll: as-is if no stickers available
+    }
+
+    std::uniform_int_distribution<size_t> dist(0, stickers_.size() - 1);
+    return ":" + stickers_[dist(rng_)].name + ":";
+}
+
+std::string StickerService::getRandomDiceStickerName() {
+    std::lock_guard<std::mutex> lock(mutex_);
+    // Generate random number 1-6
+    std::uniform_int_distribution<int> dist(1, 6);
+    int roll = dist(rng_);
+    return ":d" + std::to_string(roll) + ":";
+}
+
+ProcessedStickerResult StickerService::processSpecialStickers(const std::string& content) {
+    ProcessedStickerResult result;
+    result.usedRoll = false;
+    result.usedRtd = false;
+    std::string processed = content;
+
+    // Replace all occurrences of :roll: with random stickers
+    // Each :roll: gets a different random sticker
+    std::regex rollPattern(":roll:", std::regex::icase);
+    std::string::const_iterator searchStart(processed.cbegin());
+    std::smatch match;
+    std::string temp;
+    size_t lastPos = 0;
+
+    while (std::regex_search(searchStart, processed.cend(), match, rollPattern)) {
+        result.usedRoll = true;
+        size_t matchPos = match.position() + (searchStart - processed.cbegin());
+        temp += processed.substr(lastPos, matchPos - lastPos);
+        temp += getRandomStickerName();
+        lastPos = matchPos + match.length();
+        searchStart = match.suffix().first;
+    }
+    temp += processed.substr(lastPos);
+    processed = temp;
+
+    // Replace all occurrences of :rtd: with random dice stickers
+    std::regex rtdPattern(":rtd:", std::regex::icase);
+    searchStart = processed.cbegin();
+    temp.clear();
+    lastPos = 0;
+
+    while (std::regex_search(searchStart, processed.cend(), match, rtdPattern)) {
+        result.usedRtd = true;
+        size_t matchPos = match.position() + (searchStart - processed.cbegin());
+        temp += processed.substr(lastPos, matchPos - lastPos);
+        temp += getRandomDiceStickerName();
+        lastPos = matchPos + match.length();
+        searchStart = match.suffix().first;
+    }
+    temp += processed.substr(lastPos);
+
+    result.content = temp;
+    return result;
+}
+
+std::vector<std::string> StickerService::extractStickerNames(const std::string& content) {
+    // Ensure stickers are loaded before extracting
+    ensureStickersLoaded();
+
+    // Copy stickers under lock to minimize lock duration
+    std::vector<Sticker> stickersCopy;
+    {
+        std::lock_guard<std::mutex> lock(mutex_);
+        stickersCopy = stickers_;
+    }
+
+    std::vector<std::string> names;
+    std::unordered_set<std::string> seen;  // Track unique stickers (case-insensitive)
+    std::regex stickerPattern(":([a-zA-Z0-9_]+):");
+    std::sregex_iterator iter(content.begin(), content.end(), stickerPattern);
+    std::sregex_iterator end;
+
+    while (iter != end) {
+        std::string name = (*iter)[1].str();
+        // Convert to lowercase for deduplication and lookup
+        std::string nameLower = name;
+        std::transform(nameLower.begin(), nameLower.end(), nameLower.begin(), ::tolower);
+
+        // Skip if we've already seen this sticker (case-insensitive)
+        if (seen.count(nameLower) > 0) {
+            ++iter;
+            continue;
+        }
+
+        // Check if it's a valid sticker in our cache
+        auto it = std::find_if(stickersCopy.begin(), stickersCopy.end(),
+            [&nameLower](const Sticker& s) {
+                std::string stickerNameLower = s.name;
+                std::transform(stickerNameLower.begin(), stickerNameLower.end(),
+                              stickerNameLower.begin(), ::tolower);
+                return stickerNameLower == nameLower;
+            });
+
+        if (it != stickersCopy.end()) {
+            names.push_back(it->name);  // Use canonical name from cache
+            seen.insert(nameLower);      // Mark as seen
+        }
+        ++iter;
+    }
+    return names;
+}
+
+void StickerService::trackStickerUsage(const std::vector<std::string>& stickerNames) {
+    if (stickerNames.empty()) return;
+
+    auto config = drogon::app().getCustomConfig();
+    auto backendConfig = config.get("backend_api", Json::Value::null);
+    std::string host;
+    int port;
+
+    if (backendConfig.isNull() || !backendConfig.isMember("host")) {
+        host = "drogon-backend";
+        port = 8080;
+    } else {
+        host = backendConfig.get("host", "drogon-backend").asString();
+        port = backendConfig.get("port", 8080).asInt();
+    }
+
+    auto client = drogon::HttpClient::newHttpClient(
+        "http://" + host + ":" + std::to_string(port),
+        drogon::app().getLoop()
+    );
+
+    Json::Value body;
+    body["stickers"] = Json::arrayValue;
+    for (const auto& name : stickerNames) {
+        body["stickers"].append(name);
+    }
+
+    auto req = drogon::HttpRequest::newHttpJsonRequest(body);
+    req->setMethod(drogon::Post);
+    req->setPath("/api/internal/stickers/track-usage");
+
+    // Fire-and-forget - we don't wait for response
+    client->sendRequest(req, [client](drogon::ReqResult result, const drogon::HttpResponsePtr&) {
+        if (result != drogon::ReqResult::Ok) {
+            LOG_WARN << "Failed to track sticker usage: " << static_cast<int>(result);
+        } else {
+            LOG_DEBUG << "Sticker usage tracked successfully";
+        }
+    }, 5.0);
+}
+
+} // namespace services
diff --git a/chat-service/src/services/StickerService.h b/chat-service/src/services/StickerService.h
new file mode 100644
index 0000000..1f8cb75
--- /dev/null
+++ b/chat-service/src/services/StickerService.h
@@ -0,0 +1,69 @@
+#pragma once
+#include <string>
+#include <vector>
+#include <unordered_map>
+#include <mutex>
+#include <chrono>
+#include <random>
+
+namespace services {
+
+struct Sticker {
+    int64_t id;
+    std::string name;
+    std::string filePath;
+};
+
+struct ProcessedStickerResult {
+    std::string content;
+    bool usedRoll;
+    bool usedRtd;
+};
+
+class StickerService {
+public:
+    static StickerService& getInstance();
+
+    void initialize();
+
+    // Schedule async fetch after event loop starts (call from main)
+    void scheduleFetch();
+
+    // Get a random sticker name for :roll:
+    std::string getRandomStickerName();
+
+    // Get a random dice sticker name for :rtd: (d1-d6)
+    std::string getRandomDiceStickerName();
+
+    // Process message content, replacing :roll: and :rtd: with actual sticker names
+    ProcessedStickerResult processSpecialStickers(const std::string& content);
+
+    // Force refresh the sticker cache
+    void refreshCache();
+
+    // Extract sticker names from message content (for usage tracking)
+    std::vector<std::string> extractStickerNames(const std::string& content);
+
+    // Track sticker usage - sends increment to backend (fire-and-forget)
+    void trackStickerUsage(const std::vector<std::string>& stickerNames);
+
+private:
+    StickerService() = default;
+    ~StickerService() = default;
+    StickerService(const StickerService&) = delete;
+    StickerService& operator=(const StickerService&) = delete;
+
+    void fetchStickersFromBackend();
+    void fetchStickersAsync();
+    void ensureStickersLoaded();
+
+    std::vector<Sticker> stickers_;
+    std::mutex mutex_;
+    std::chrono::steady_clock::time_point lastFetch_;
+    static constexpr int CACHE_TTL_SECONDS = 3600; // 1 hour cache
+    bool initialized_ = false;
+
+    std::mt19937 rng_;
+};
+
+} // namespace services
diff --git a/database/00-create-nakama-db.sql b/database/00-create-nakama-db.sql
new file mode 100644
index 0000000..c5d4d1d
--- /dev/null
+++ b/database/00-create-nakama-db.sql
@@ -0,0 +1,7 @@
+-- Create Nakama database for game server
+-- This runs before init.sql (alphabetically sorted)
+-- Note: This runs in the context of the postgres database
+
+-- Create the nakama database if it doesn't exist
+SELECT 'CREATE DATABASE nakama'
+WHERE NOT EXISTS (SELECT FROM pg_database WHERE datname = 'nakama')\gexec
diff --git a/database/00-init-nakama.sh b/database/00-init-nakama.sh
new file mode 100644
index 0000000..239e51b
--- /dev/null
+++ b/database/00-init-nakama.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+# Create Nakama database for game server
+# This script runs before init.sql (alphabetically)
+set -e
+
+psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "postgres" <<-EOSQL
+    CREATE DATABASE nakama;
+    GRANT ALL PRIVILEGES ON DATABASE nakama TO $POSTGRES_USER;
+EOSQL
+
+echo "Nakama database created successfully"
diff --git a/database/init.sql b/database/init.sql
index b57b165..3b8b3ee 100644
--- a/database/init.sql
+++ b/database/init.sql
@@ -9,7 +9,7 @@ CREATE TABLE IF NOT EXISTS users (
     pgp_only_enabled_at TIMESTAMP WITH TIME ZONE,
     bio TEXT DEFAULT '',
     avatar_url VARCHAR(255),
-    user_color VARCHAR(7) UNIQUE NOT NULL,  -- Unique hex color for each user
+    user_color VARCHAR(7) NOT NULL DEFAULT '#561D5E',  -- Hex color (no longer unique - allows collisions)
     created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
     updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 );
@@ -23,19 +23,69 @@ CREATE TABLE IF NOT EXISTS pgp_keys (
     created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 );
 
--- Create realms table (removed display_name and description)
+-- Create realms table
 CREATE TABLE IF NOT EXISTS realms (
     id BIGSERIAL PRIMARY KEY,
     user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
     name VARCHAR(255) UNIQUE NOT NULL,
-    stream_key VARCHAR(64) UNIQUE NOT NULL,
+    description TEXT DEFAULT '',
+    realm_type VARCHAR(20) DEFAULT 'stream' CHECK (realm_type IN ('stream', 'video')),
+    stream_key VARCHAR(64) UNIQUE,
     is_active BOOLEAN DEFAULT true,
     is_live BOOLEAN DEFAULT false,
     viewer_count INTEGER DEFAULT 0,
+    viewer_multiplier INTEGER DEFAULT 1,
+    chat_enabled BOOLEAN DEFAULT true,
+    chat_retention_hours INTEGER DEFAULT 24,
+    chat_slow_mode_seconds INTEGER DEFAULT 0,
+    chat_links_allowed BOOLEAN DEFAULT true,
+    chat_subscribers_only BOOLEAN DEFAULT false,
+    chat_guests_allowed BOOLEAN DEFAULT true,
     created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
     updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 );
 
+-- Add description column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'description'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN description TEXT DEFAULT '';
+    END IF;
+END $$;
+
+-- Add realm_type column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'realm_type'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN realm_type VARCHAR(20) DEFAULT 'stream' CHECK (realm_type IN ('stream', 'video'));
+    END IF;
+END $$;
+
+-- Add viewer_multiplier column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'viewer_multiplier'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN viewer_multiplier INTEGER DEFAULT 1;
+    END IF;
+END $$;
+
+-- Make stream_key nullable for video realms (for existing databases)
+DO $$
+BEGIN
+    ALTER TABLE realms ALTER COLUMN stream_key DROP NOT NULL;
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
 -- Create stream_keys table (deprecated, kept for compatibility)
 CREATE TABLE IF NOT EXISTS stream_keys (
     id BIGSERIAL PRIMARY KEY,
@@ -57,6 +107,7 @@ CREATE INDEX idx_realms_user_id ON realms(user_id);
 CREATE INDEX idx_realms_name ON realms(name);
 CREATE INDEX idx_realms_stream_key ON realms(stream_key);
 CREATE INDEX idx_realms_is_live ON realms(is_live);
+CREATE INDEX idx_realms_realm_type ON realms(realm_type);
 CREATE INDEX idx_stream_keys_user_id ON stream_keys(user_id);
 CREATE INDEX idx_stream_keys_key ON stream_keys(key) WHERE is_active = true;
 CREATE INDEX idx_stream_keys_active ON stream_keys(is_active);
@@ -109,4 +160,1041 @@ END;
 $$ language 'plpgsql';
 
 CREATE TRIGGER ensure_pgp_only_timestamp BEFORE INSERT OR UPDATE ON users
-    FOR EACH ROW EXECUTE FUNCTION check_pgp_only_timestamp();
\ No newline at end of file
+    FOR EACH ROW EXECUTE FUNCTION check_pgp_only_timestamp();
+
+-- Chat moderators table
+CREATE TABLE IF NOT EXISTS chat_moderators (
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    granted_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (realm_id, user_id)
+);
+
+-- Chat global settings table (singleton - only one row allowed)
+CREATE TABLE IF NOT EXISTS chat_settings (
+    id INTEGER PRIMARY KEY DEFAULT 1 CHECK (id = 1),
+    guest_prefix VARCHAR(50) DEFAULT 'Guest',
+    guest_id_pattern VARCHAR(100) DEFAULT '{prefix}{random}',
+    default_retention_hours INTEGER DEFAULT 24,
+    guests_allowed_site_wide BOOLEAN DEFAULT true,
+    registration_enabled BOOLEAN DEFAULT true,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Add new columns if they don't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'chat_settings' AND column_name = 'guests_allowed_site_wide'
+    ) THEN
+        ALTER TABLE chat_settings ADD COLUMN guests_allowed_site_wide BOOLEAN DEFAULT true;
+    END IF;
+
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'chat_settings' AND column_name = 'registration_enabled'
+    ) THEN
+        ALTER TABLE chat_settings ADD COLUMN registration_enabled BOOLEAN DEFAULT true;
+    END IF;
+END $$;
+
+-- Insert default chat settings (only one row can exist due to CHECK constraint)
+INSERT INTO chat_settings (id, guest_prefix, guest_id_pattern, default_retention_hours, guests_allowed_site_wide, registration_enabled)
+VALUES (1, 'Guest', '{prefix}{random}', 24, true, true)
+ON CONFLICT (id) DO UPDATE SET
+    guest_prefix = COALESCE(EXCLUDED.guest_prefix, chat_settings.guest_prefix),
+    guest_id_pattern = COALESCE(EXCLUDED.guest_id_pattern, chat_settings.guest_id_pattern),
+    default_retention_hours = COALESCE(EXCLUDED.default_retention_hours, chat_settings.default_retention_hours),
+    guests_allowed_site_wide = COALESCE(EXCLUDED.guests_allowed_site_wide, chat_settings.guests_allowed_site_wide),
+    registration_enabled = COALESCE(EXCLUDED.registration_enabled, chat_settings.registration_enabled);
+
+-- Create chat moderators indexes
+CREATE INDEX idx_chat_moderators_realm_id ON chat_moderators(realm_id);
+CREATE INDEX idx_chat_moderators_user_id ON chat_moderators(user_id);
+
+-- Chat settings trigger
+CREATE TRIGGER update_chat_settings_updated_at BEFORE UPDATE ON chat_settings
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Stickers/Emotes table
+CREATE TABLE IF NOT EXISTS stickers (
+    id BIGSERIAL PRIMARY KEY,
+    name VARCHAR(50) UNIQUE NOT NULL,
+    file_path VARCHAR(255) NOT NULL,
+    is_active BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create stickers index
+CREATE INDEX idx_stickers_name ON stickers(name);
+CREATE INDEX idx_stickers_active ON stickers(is_active);
+
+-- Add is_restreamer column to users table
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_restreamer'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_restreamer BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Add banner_url column to users table
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'banner_url'
+    ) THEN
+        ALTER TABLE users ADD COLUMN banner_url VARCHAR(255);
+    END IF;
+END $$;
+
+-- Add banner_position column to users table (0-100 representing Y percentage for object-position)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'banner_position'
+    ) THEN
+        ALTER TABLE users ADD COLUMN banner_position INTEGER DEFAULT 50;
+    END IF;
+END $$;
+
+-- Add banner_zoom column to users table (100-200 representing zoom percentage)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'banner_zoom'
+    ) THEN
+        ALTER TABLE users ADD COLUMN banner_zoom INTEGER DEFAULT 100;
+    END IF;
+END $$;
+
+-- Add banner_position_x column to users table (0-100 representing X percentage for object-position)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'banner_position_x'
+    ) THEN
+        ALTER TABLE users ADD COLUMN banner_position_x INTEGER DEFAULT 50;
+    END IF;
+END $$;
+
+-- Create index for is_restreamer
+CREATE INDEX IF NOT EXISTS idx_users_is_restreamer ON users(is_restreamer);
+
+-- Restream destinations table (max 2 per realm enforced by application)
+CREATE TABLE IF NOT EXISTS restream_destinations (
+    id BIGSERIAL PRIMARY KEY,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    name VARCHAR(100) NOT NULL,
+    rtmp_url VARCHAR(500) NOT NULL,
+    stream_key VARCHAR(500) NOT NULL,
+    enabled BOOLEAN DEFAULT true,
+    is_connected BOOLEAN DEFAULT false,
+    last_error TEXT,
+    last_connected_at TIMESTAMP WITH TIME ZONE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for restream_destinations
+CREATE INDEX IF NOT EXISTS idx_restream_destinations_realm_id ON restream_destinations(realm_id);
+CREATE INDEX IF NOT EXISTS idx_restream_destinations_enabled ON restream_destinations(enabled);
+
+-- Trigger for restream_destinations updated_at
+DROP TRIGGER IF EXISTS update_restream_destinations_updated_at ON restream_destinations;
+CREATE TRIGGER update_restream_destinations_updated_at BEFORE UPDATE ON restream_destinations
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add is_bot column to users table (for Bot role - allows API key generation)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_bot'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_bot BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_bot
+CREATE INDEX IF NOT EXISTS idx_users_is_bot ON users(is_bot);
+
+-- Bot API keys table (for chatbot authentication)
+CREATE TABLE IF NOT EXISTS bot_api_keys (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    api_key VARCHAR(64) UNIQUE NOT NULL,
+    name VARCHAR(100) NOT NULL CHECK (name ~ '^[a-zA-Z0-9_-]+$'),
+    scopes TEXT DEFAULT 'chat:rw',
+    is_active BOOLEAN DEFAULT true,
+    last_used_at TIMESTAMP WITH TIME ZONE,
+    expires_at TIMESTAMP WITH TIME ZONE DEFAULT (CURRENT_TIMESTAMP + INTERVAL '1 year'),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Add expires_at column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'bot_api_keys' AND column_name = 'expires_at'
+    ) THEN
+        ALTER TABLE bot_api_keys ADD COLUMN expires_at TIMESTAMP WITH TIME ZONE
+            DEFAULT (CURRENT_TIMESTAMP + INTERVAL '1 year');
+    END IF;
+END $$;
+
+-- Add scopes column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'bot_api_keys' AND column_name = 'scopes'
+    ) THEN
+        ALTER TABLE bot_api_keys ADD COLUMN scopes TEXT DEFAULT 'chat:rw';
+    END IF;
+END $$;
+
+-- Update existing 'chat:write' scopes to 'chat:rw' (migration for existing keys)
+UPDATE bot_api_keys SET scopes = 'chat:rw' WHERE scopes = 'chat:write';
+
+-- Add name format CHECK constraint if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    ALTER TABLE bot_api_keys DROP CONSTRAINT IF EXISTS bot_api_keys_name_check;
+    ALTER TABLE bot_api_keys ADD CONSTRAINT bot_api_keys_name_check
+        CHECK (name ~ '^[a-zA-Z0-9_-]+$');
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- Create indexes for bot_api_keys
+CREATE INDEX IF NOT EXISTS idx_bot_api_keys_api_key ON bot_api_keys(api_key) WHERE is_active = true;
+CREATE INDEX IF NOT EXISTS idx_bot_api_keys_user_id ON bot_api_keys(user_id);
+
+-- Honk sounds table (for @mention notification sounds)
+CREATE TABLE IF NOT EXISTS honk_sounds (
+    id BIGSERIAL PRIMARY KEY,
+    name VARCHAR(100) NOT NULL,
+    file_path VARCHAR(255) NOT NULL,
+    is_active BOOLEAN DEFAULT false,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create honk sounds indexes
+CREATE INDEX IF NOT EXISTS idx_honk_sounds_active ON honk_sounds(is_active);
+
+-- Ensure only one honk sound can be active at a time
+CREATE OR REPLACE FUNCTION ensure_single_active_honk()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF NEW.is_active = true THEN
+        UPDATE honk_sounds SET is_active = false WHERE id != NEW.id AND is_active = true;
+    END IF;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+DROP TRIGGER IF EXISTS single_active_honk ON honk_sounds;
+CREATE TRIGGER single_active_honk AFTER INSERT OR UPDATE ON honk_sounds
+    FOR EACH ROW EXECUTE FUNCTION ensure_single_active_honk();
+
+-- Add is_sticker_creator column to users table
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_sticker_creator'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_sticker_creator BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_sticker_creator
+CREATE INDEX IF NOT EXISTS idx_users_is_sticker_creator ON users(is_sticker_creator);
+
+-- Sticker submissions table (for sticker creator approval workflow)
+CREATE TABLE IF NOT EXISTS sticker_submissions (
+    id BIGSERIAL PRIMARY KEY,
+    name VARCHAR(50) NOT NULL,
+    file_path VARCHAR(255) NOT NULL,
+    submitted_by BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'denied')),
+    reviewed_by BIGINT REFERENCES users(id) ON DELETE SET NULL,
+    reviewed_at TIMESTAMP WITH TIME ZONE,
+    denial_reason TEXT,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create sticker submissions indexes
+CREATE INDEX IF NOT EXISTS idx_sticker_submissions_status ON sticker_submissions(status);
+CREATE INDEX IF NOT EXISTS idx_sticker_submissions_submitted_by ON sticker_submissions(submitted_by);
+CREATE INDEX IF NOT EXISTS idx_sticker_submissions_created_at ON sticker_submissions(created_at DESC);
+
+-- Add graffiti_url column to users table (88x33 pixel art signature GIF)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'graffiti_url'
+    ) THEN
+        ALTER TABLE users ADD COLUMN graffiti_url VARCHAR(255);
+    END IF;
+END $$;
+
+-- Add is_uploader column to users table (for video uploads)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_uploader'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_uploader BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_uploader
+CREATE INDEX IF NOT EXISTS idx_users_is_uploader ON users(is_uploader);
+
+-- Video uploads table
+CREATE TABLE IF NOT EXISTS videos (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    description TEXT DEFAULT '',
+    file_path VARCHAR(500) NOT NULL,
+    thumbnail_path VARCHAR(500),
+    preview_path VARCHAR(500),
+    duration_seconds INTEGER DEFAULT 0,
+    file_size_bytes BIGINT DEFAULT 0,
+    width INTEGER,
+    height INTEGER,
+    status VARCHAR(20) DEFAULT 'processing' CHECK (status IN ('processing', 'ready', 'failed', 'deleted')),
+    view_count INTEGER DEFAULT 0,
+    is_public BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Add preview_path column if it doesn't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'videos' AND column_name = 'preview_path'
+    ) THEN
+        ALTER TABLE videos ADD COLUMN preview_path VARCHAR(500);
+    END IF;
+END $$;
+
+-- Add bitrate column to videos table if it doesn't exist
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'videos' AND column_name = 'bitrate'
+    ) THEN
+        ALTER TABLE videos ADD COLUMN bitrate INTEGER;
+    END IF;
+END $$;
+
+-- Add video_codec column to videos table if it doesn't exist
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'videos' AND column_name = 'video_codec'
+    ) THEN
+        ALTER TABLE videos ADD COLUMN video_codec VARCHAR(50);
+    END IF;
+END $$;
+
+-- Add audio_codec column to videos table if it doesn't exist
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'videos' AND column_name = 'audio_codec'
+    ) THEN
+        ALTER TABLE videos ADD COLUMN audio_codec VARCHAR(50);
+    END IF;
+END $$;
+
+-- Create indexes for videos
+CREATE INDEX IF NOT EXISTS idx_videos_user_id ON videos(user_id);
+CREATE INDEX IF NOT EXISTS idx_videos_realm_id ON videos(realm_id);
+CREATE INDEX IF NOT EXISTS idx_videos_status ON videos(status);
+CREATE INDEX IF NOT EXISTS idx_videos_is_public ON videos(is_public);
+CREATE INDEX IF NOT EXISTS idx_videos_created_at ON videos(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_videos_view_count ON videos(view_count DESC);
+CREATE INDEX IF NOT EXISTS idx_videos_public_ready ON videos(is_public, status) WHERE is_public = true AND status = 'ready';
+
+-- Trigger for videos updated_at
+DROP TRIGGER IF EXISTS update_videos_updated_at ON videos;
+CREATE TRIGGER update_videos_updated_at BEFORE UPDATE ON videos
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Site settings table for customization (logo, title, etc.)
+CREATE TABLE IF NOT EXISTS site_settings (
+    id SERIAL PRIMARY KEY,
+    setting_key VARCHAR(100) UNIQUE NOT NULL,
+    setting_value TEXT,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert default site settings
+INSERT INTO site_settings (setting_key, setting_value) VALUES
+    ('site_title', 'Stream'),
+    ('logo_path', ''),
+    ('logo_display_mode', 'text')  -- 'text', 'image', 'both'
+ON CONFLICT (setting_key) DO NOTHING;
+
+-- Trigger for site_settings updated_at
+DROP TRIGGER IF EXISTS update_site_settings_updated_at ON site_settings;
+CREATE TRIGGER update_site_settings_updated_at BEFORE UPDATE ON site_settings
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- SSL/TLS Certificate Settings (singleton table for Let's Encrypt management)
+CREATE TABLE IF NOT EXISTS ssl_settings (
+    id INTEGER PRIMARY KEY DEFAULT 1 CHECK (id = 1),
+    domain VARCHAR(255),
+    acme_email VARCHAR(255),
+    certificate_status VARCHAR(20) DEFAULT 'none' CHECK (certificate_status IN ('none', 'pending', 'active', 'expired', 'error')),
+    certificate_expiry TIMESTAMP WITH TIME ZONE,
+    last_renewal_attempt TIMESTAMP WITH TIME ZONE,
+    last_renewal_error TEXT,
+    auto_renewal_enabled BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert default SSL settings row
+INSERT INTO ssl_settings (id, domain, certificate_status)
+VALUES (1, '', 'none')
+ON CONFLICT (id) DO NOTHING;
+
+-- Trigger for ssl_settings updated_at
+DROP TRIGGER IF EXISTS update_ssl_settings_updated_at ON ssl_settings;
+CREATE TRIGGER update_ssl_settings_updated_at BEFORE UPDATE ON ssl_settings
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add offline_image_url column to realms table (for stream realms to display when offline)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'offline_image_url'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN offline_image_url VARCHAR(500);
+    END IF;
+END $$;
+
+-- Add title_color column to realms table (hex color for realm title display)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'title_color'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN title_color VARCHAR(7) DEFAULT '#ffffff';
+    END IF;
+END $$;
+
+-- Update realm_type CHECK constraint to include 'audio'
+DO $$
+BEGIN
+    -- Drop the old constraint if it exists
+    ALTER TABLE realms DROP CONSTRAINT IF EXISTS realms_realm_type_check;
+    -- Add the new constraint with 'audio' type
+    ALTER TABLE realms ADD CONSTRAINT realms_realm_type_check
+        CHECK (realm_type IN ('stream', 'video', 'audio'));
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- Audio files table (for audio realms)
+CREATE TABLE IF NOT EXISTS audio_files (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    description TEXT DEFAULT '',
+    file_path VARCHAR(500) NOT NULL,
+    thumbnail_path VARCHAR(500),          -- Optional cover art
+    duration_seconds INTEGER DEFAULT 0,
+    file_size_bytes BIGINT DEFAULT 0,
+    format VARCHAR(20),                    -- mp3, wav, flac, ogg, aac
+    bitrate INTEGER,                       -- kbps
+    status VARCHAR(20) DEFAULT 'processing' CHECK (status IN ('processing', 'ready', 'failed', 'deleted')),
+    play_count INTEGER DEFAULT 0,
+    is_public BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for audio_files
+CREATE INDEX IF NOT EXISTS idx_audio_files_user_id ON audio_files(user_id);
+CREATE INDEX IF NOT EXISTS idx_audio_files_realm_id ON audio_files(realm_id);
+CREATE INDEX IF NOT EXISTS idx_audio_files_status ON audio_files(status);
+CREATE INDEX IF NOT EXISTS idx_audio_files_is_public ON audio_files(is_public);
+CREATE INDEX IF NOT EXISTS idx_audio_files_created_at ON audio_files(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_audio_files_play_count ON audio_files(play_count DESC);
+CREATE INDEX IF NOT EXISTS idx_audio_files_public_ready ON audio_files(is_public, status) WHERE is_public = true AND status = 'ready';
+
+-- Trigger for audio_files updated_at
+DROP TRIGGER IF EXISTS update_audio_files_updated_at ON audio_files;
+CREATE TRIGGER update_audio_files_updated_at BEFORE UPDATE ON audio_files
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Update realm_type CHECK constraint to include 'ebook'
+DO $$
+BEGIN
+    -- Drop the old constraint if it exists
+    ALTER TABLE realms DROP CONSTRAINT IF EXISTS realms_realm_type_check;
+    -- Add the new constraint with 'ebook' type
+    ALTER TABLE realms ADD CONSTRAINT realms_realm_type_check
+        CHECK (realm_type IN ('stream', 'video', 'audio', 'ebook'));
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- Ebook files table (for ebook realms - EPUB only)
+CREATE TABLE IF NOT EXISTS ebooks (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    description TEXT DEFAULT '',
+    file_path VARCHAR(500) NOT NULL,
+    cover_path VARCHAR(500),              -- Cover image (extracted from EPUB or user-uploaded)
+    file_size_bytes BIGINT DEFAULT 0,
+    chapter_count INTEGER,                -- Extracted from TOC
+    status VARCHAR(20) DEFAULT 'processing' CHECK (status IN ('processing', 'ready', 'failed', 'deleted')),
+    read_count INTEGER DEFAULT 0,
+    is_public BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for ebooks
+CREATE INDEX IF NOT EXISTS idx_ebooks_user_id ON ebooks(user_id);
+CREATE INDEX IF NOT EXISTS idx_ebooks_realm_id ON ebooks(realm_id);
+CREATE INDEX IF NOT EXISTS idx_ebooks_status ON ebooks(status);
+CREATE INDEX IF NOT EXISTS idx_ebooks_is_public ON ebooks(is_public);
+CREATE INDEX IF NOT EXISTS idx_ebooks_created_at ON ebooks(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_ebooks_read_count ON ebooks(read_count DESC);
+CREATE INDEX IF NOT EXISTS idx_ebooks_public_ready ON ebooks(is_public, status) WHERE is_public = true AND status = 'ready';
+
+-- Trigger for ebooks updated_at
+DROP TRIGGER IF EXISTS update_ebooks_updated_at ON ebooks;
+CREATE TRIGGER update_ebooks_updated_at BEFORE UPDATE ON ebooks
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add is_texter column to users table (for forum creation)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_texter'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_texter BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_texter
+CREATE INDEX IF NOT EXISTS idx_users_is_texter ON users(is_texter);
+
+-- Forums table (owned by texters)
+CREATE TABLE IF NOT EXISTS forums (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    name VARCHAR(100) NOT NULL,
+    slug VARCHAR(100) UNIQUE NOT NULL,
+    description TEXT DEFAULT '',
+    banner_url VARCHAR(255) DEFAULT '',
+    banner_position INTEGER DEFAULT 50,
+    banner_position_x INTEGER DEFAULT 50,
+    banner_zoom INTEGER DEFAULT 100,
+    title_color VARCHAR(7) DEFAULT '#ffffff',
+    is_active BOOLEAN DEFAULT true,
+    thread_count INTEGER DEFAULT 0,
+    post_count INTEGER DEFAULT 0,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Add banner columns if they don't exist (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'forums' AND column_name = 'banner_url') THEN
+        ALTER TABLE forums ADD COLUMN banner_url VARCHAR(255) DEFAULT '';
+    END IF;
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'forums' AND column_name = 'banner_position') THEN
+        ALTER TABLE forums ADD COLUMN banner_position INTEGER DEFAULT 50;
+    END IF;
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'forums' AND column_name = 'banner_position_x') THEN
+        ALTER TABLE forums ADD COLUMN banner_position_x INTEGER DEFAULT 50;
+    END IF;
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'forums' AND column_name = 'banner_zoom') THEN
+        ALTER TABLE forums ADD COLUMN banner_zoom INTEGER DEFAULT 100;
+    END IF;
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'forums' AND column_name = 'title_color') THEN
+        ALTER TABLE forums ADD COLUMN title_color VARCHAR(7) DEFAULT '#ffffff';
+    END IF;
+END $$;
+
+-- Create indexes for forums
+CREATE INDEX IF NOT EXISTS idx_forums_user_id ON forums(user_id);
+CREATE INDEX IF NOT EXISTS idx_forums_slug ON forums(slug);
+CREATE INDEX IF NOT EXISTS idx_forums_is_active ON forums(is_active);
+CREATE INDEX IF NOT EXISTS idx_forums_created_at ON forums(created_at DESC);
+
+-- Trigger for forums updated_at
+DROP TRIGGER IF EXISTS update_forums_updated_at ON forums;
+CREATE TRIGGER update_forums_updated_at BEFORE UPDATE ON forums
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Forum threads table
+CREATE TABLE IF NOT EXISTS forum_threads (
+    id BIGSERIAL PRIMARY KEY,
+    forum_id BIGINT NOT NULL REFERENCES forums(id) ON DELETE CASCADE,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    content TEXT NOT NULL,
+    is_pinned BOOLEAN DEFAULT false,
+    is_locked BOOLEAN DEFAULT false,
+    post_count INTEGER DEFAULT 0,
+    last_post_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    last_post_user_id BIGINT REFERENCES users(id) ON DELETE SET NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for forum_threads
+CREATE INDEX IF NOT EXISTS idx_forum_threads_forum_id ON forum_threads(forum_id);
+CREATE INDEX IF NOT EXISTS idx_forum_threads_user_id ON forum_threads(user_id);
+CREATE INDEX IF NOT EXISTS idx_forum_threads_is_pinned ON forum_threads(is_pinned);
+CREATE INDEX IF NOT EXISTS idx_forum_threads_last_post_at ON forum_threads(last_post_at DESC);
+CREATE INDEX IF NOT EXISTS idx_forum_threads_created_at ON forum_threads(created_at DESC);
+
+-- Trigger for forum_threads updated_at
+DROP TRIGGER IF EXISTS update_forum_threads_updated_at ON forum_threads;
+CREATE TRIGGER update_forum_threads_updated_at BEFORE UPDATE ON forum_threads
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Forum posts table (replies to threads)
+CREATE TABLE IF NOT EXISTS forum_posts (
+    id BIGSERIAL PRIMARY KEY,
+    thread_id BIGINT NOT NULL REFERENCES forum_threads(id) ON DELETE CASCADE,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    content TEXT NOT NULL,
+    is_edited BOOLEAN DEFAULT false,
+    edited_at TIMESTAMP WITH TIME ZONE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for forum_posts
+CREATE INDEX IF NOT EXISTS idx_forum_posts_thread_id ON forum_posts(thread_id);
+CREATE INDEX IF NOT EXISTS idx_forum_posts_user_id ON forum_posts(user_id);
+CREATE INDEX IF NOT EXISTS idx_forum_posts_created_at ON forum_posts(created_at);
+
+-- Forum bans table (per-forum user bans, managed by forum owner or admin)
+CREATE TABLE IF NOT EXISTS forum_bans (
+    id BIGSERIAL PRIMARY KEY,
+    forum_id BIGINT NOT NULL REFERENCES forums(id) ON DELETE CASCADE,
+    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    banned_by BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    reason TEXT DEFAULT '',
+    expires_at TIMESTAMP WITH TIME ZONE,  -- NULL = permanent
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(forum_id, user_id)
+);
+
+-- Create indexes for forum_bans
+CREATE INDEX IF NOT EXISTS idx_forum_bans_forum_id ON forum_bans(forum_id);
+CREATE INDEX IF NOT EXISTS idx_forum_bans_user_id ON forum_bans(user_id);
+CREATE INDEX IF NOT EXISTS idx_forum_bans_expires_at ON forum_bans(expires_at);
+
+-- ============================================
+-- WATCH ROOMS (YouTube Sync - CyTube style)
+-- ============================================
+
+-- Update realm_type CHECK constraint to include 'watch'
+DO $$
+BEGIN
+    ALTER TABLE realms DROP CONSTRAINT IF EXISTS realms_realm_type_check;
+    ALTER TABLE realms ADD CONSTRAINT realms_realm_type_check
+        CHECK (realm_type IN ('stream', 'video', 'audio', 'ebook', 'watch'));
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- Add playlist control columns to realms (for watch rooms)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'playlist_control_mode'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN playlist_control_mode VARCHAR(20) DEFAULT 'owner';
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'playlist_whitelist'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN playlist_whitelist TEXT DEFAULT '[]';
+    END IF;
+END $$;
+
+-- Watch playlist table (queue of YouTube videos for watch rooms)
+-- Note: position column is deprecated - ordering now uses created_at timestamp
+CREATE TABLE IF NOT EXISTS watch_playlist (
+    id BIGSERIAL PRIMARY KEY,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    youtube_video_id VARCHAR(20) NOT NULL,
+    title VARCHAR(255) NOT NULL,
+    duration_seconds INTEGER NOT NULL,
+    thumbnail_url VARCHAR(500),
+    added_by BIGINT REFERENCES users(id) ON DELETE SET NULL,
+    added_by_username VARCHAR(255) NOT NULL,
+    position INTEGER DEFAULT 0,
+    status VARCHAR(20) DEFAULT 'queued' CHECK (status IN ('queued', 'playing', 'played', 'skipped')),
+    started_at TIMESTAMP WITH TIME ZONE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Migration: Allow NULL for position column (ordering now uses created_at)
+DO $$
+BEGIN
+    ALTER TABLE watch_playlist ALTER COLUMN position DROP NOT NULL;
+    ALTER TABLE watch_playlist ALTER COLUMN position SET DEFAULT 0;
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- Create indexes for watch_playlist
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_realm_id ON watch_playlist(realm_id);
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_position ON watch_playlist(realm_id, position);
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_status ON watch_playlist(status);
+-- Composite index for efficient playlist ordering by created_at (used instead of position)
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_realm_created ON watch_playlist(realm_id, created_at ASC);
+
+-- Watch room state table (current playback state for sync)
+CREATE TABLE IF NOT EXISTS watch_room_state (
+    realm_id BIGINT PRIMARY KEY REFERENCES realms(id) ON DELETE CASCADE,
+    current_video_id BIGINT REFERENCES watch_playlist(id) ON DELETE SET NULL,
+    playback_state VARCHAR(20) DEFAULT 'paused' CHECK (playback_state IN ('playing', 'paused', 'ended')),
+    current_time_seconds FLOAT DEFAULT 0,
+    last_sync_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    viewer_count INTEGER DEFAULT 0,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Trigger for watch_room_state updated_at
+DROP TRIGGER IF EXISTS update_watch_room_state_updated_at ON watch_room_state;
+CREATE TRIGGER update_watch_room_state_updated_at BEFORE UPDATE ON watch_room_state
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add guest_fingerprint column to watch_playlist for tracking guest video limits
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'watch_playlist' AND column_name = 'guest_fingerprint'
+    ) THEN
+        ALTER TABLE watch_playlist ADD COLUMN guest_fingerprint VARCHAR(100);
+    END IF;
+END $$;
+
+-- Index for efficient guest video count queries
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_guest_fingerprint ON watch_playlist(guest_fingerprint) WHERE guest_fingerprint IS NOT NULL;
+
+-- Add is_locked column to watch_playlist for locking videos to loop forever
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'watch_playlist' AND column_name = 'is_locked'
+    ) THEN
+        ALTER TABLE watch_playlist ADD COLUMN is_locked BOOLEAN DEFAULT FALSE;
+    END IF;
+END $$;
+
+-- Index for efficient locked video queries
+CREATE INDEX IF NOT EXISTS idx_watch_playlist_is_locked ON watch_playlist(realm_id, is_locked) WHERE is_locked = TRUE;
+
+-- Add is_watch_creator column to users table (for watch room creation - separate from uploader role)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_watch_creator'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_watch_creator BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_watch_creator
+CREATE INDEX IF NOT EXISTS idx_users_is_watch_creator ON users(is_watch_creator);
+
+-- Add is_disabled column to users table (disabled users cannot login)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_disabled'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_disabled BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_disabled
+CREATE INDEX IF NOT EXISTS idx_users_is_disabled ON users(is_disabled);
+
+-- Add censored_words setting to site_settings
+INSERT INTO site_settings (setting_key, setting_value) VALUES
+    ('censored_words', '')
+ON CONFLICT (setting_key) DO NOTHING;
+
+-- Add original_creator_username column to realms table (preserves creator info when user is deleted)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'realms' AND column_name = 'original_creator_username'
+    ) THEN
+        ALTER TABLE realms ADD COLUMN original_creator_username VARCHAR(255);
+    END IF;
+END $$;
+
+-- ============================================
+-- ÜBERCOIN VIRTUAL CURRENCY SYSTEM
+-- ============================================
+
+-- Add ubercoin_balance column to users table (3 decimal places, default 612.000)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'ubercoin_balance'
+    ) THEN
+        ALTER TABLE users ADD COLUMN ubercoin_balance NUMERIC(18,3) DEFAULT 612.000;
+    END IF;
+END $$;
+
+-- Create index for ubercoin_balance (for leaderboards, etc.)
+CREATE INDEX IF NOT EXISTS idx_users_ubercoin_balance ON users(ubercoin_balance DESC);
+
+-- Übercoin treasury table (singleton - tracks burned coins and redistribution)
+CREATE TABLE IF NOT EXISTS ubercoin_treasury (
+    id INTEGER PRIMARY KEY DEFAULT 1 CHECK (id = 1),
+    balance NUMERIC(18,3) DEFAULT 0.000,
+    total_destroyed NUMERIC(18,3) DEFAULT 0.000,
+    last_growth_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    last_distribution_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert default treasury row (only one row can exist due to CHECK constraint)
+INSERT INTO ubercoin_treasury (id, balance, total_destroyed)
+VALUES (1, 0.000, 0.000)
+ON CONFLICT (id) DO NOTHING;
+
+-- Trigger for ubercoin_treasury updated_at
+DROP TRIGGER IF EXISTS update_ubercoin_treasury_updated_at ON ubercoin_treasury;
+CREATE TRIGGER update_ubercoin_treasury_updated_at BEFORE UPDATE ON ubercoin_treasury
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- ============================================
+-- DEFAULT GUEST AVATARS
+-- ============================================
+
+-- Default avatars table (for random guest avatar assignment)
+CREATE TABLE IF NOT EXISTS default_avatars (
+    id BIGSERIAL PRIMARY KEY,
+    file_path VARCHAR(500) NOT NULL,
+    is_active BOOLEAN DEFAULT true,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for default_avatars
+CREATE INDEX IF NOT EXISTS idx_default_avatars_active ON default_avatars(is_active) WHERE is_active = true;
+
+-- ============================================
+-- CHAT MODERATION SYSTEM ENHANCEMENTS
+-- ============================================
+
+-- Add is_moderator column to users table (site-wide moderator role)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'is_moderator'
+    ) THEN
+        ALTER TABLE users ADD COLUMN is_moderator BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Create index for is_moderator
+CREATE INDEX IF NOT EXISTS idx_users_is_moderator ON users(is_moderator);
+
+-- Realm bans table (per-realm bans for users and guests)
+CREATE TABLE IF NOT EXISTS realm_bans (
+    id BIGSERIAL PRIMARY KEY,
+    realm_id BIGINT NOT NULL REFERENCES realms(id) ON DELETE CASCADE,
+    user_id BIGINT REFERENCES users(id) ON DELETE CASCADE,  -- NULL for guest bans
+    guest_fingerprint VARCHAR(64),  -- For guest bans (NULL for user bans)
+    banned_by BIGINT NOT NULL REFERENCES users(id),
+    reason TEXT DEFAULT '',
+    banned_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT realm_bans_target_check CHECK (
+        (user_id IS NOT NULL AND guest_fingerprint IS NULL) OR
+        (user_id IS NULL AND guest_fingerprint IS NOT NULL)
+    )
+);
+
+-- Create unique constraints to prevent duplicate bans
+CREATE UNIQUE INDEX IF NOT EXISTS idx_realm_bans_user ON realm_bans(realm_id, user_id) WHERE user_id IS NOT NULL;
+CREATE UNIQUE INDEX IF NOT EXISTS idx_realm_bans_fingerprint ON realm_bans(realm_id, guest_fingerprint) WHERE guest_fingerprint IS NOT NULL;
+
+-- Create indexes for efficient lookups
+CREATE INDEX IF NOT EXISTS idx_realm_bans_realm_id ON realm_bans(realm_id);
+CREATE INDEX IF NOT EXISTS idx_realm_bans_user_id ON realm_bans(user_id) WHERE user_id IS NOT NULL;
+CREATE INDEX IF NOT EXISTS idx_realm_bans_guest_fingerprint ON realm_bans(guest_fingerprint) WHERE guest_fingerprint IS NOT NULL;
+
+-- ============================================
+-- SECURITY FIX #15: Remove UNIQUE constraint on user_color
+-- (Prevents user enumeration attack via color collision errors)
+-- ============================================
+DO $$
+BEGIN
+    ALTER TABLE users DROP CONSTRAINT IF EXISTS users_user_color_key;
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- ============================================
+-- SECURITY FIX #19: Add CHECK constraint for password_hash/is_pgp_only
+-- (Ensures data integrity - password required for non-PGP accounts)
+-- ============================================
+DO $$
+BEGIN
+    ALTER TABLE users DROP CONSTRAINT IF EXISTS users_password_pgp_check;
+    ALTER TABLE users ADD CONSTRAINT users_password_pgp_check
+        CHECK (
+            (is_pgp_only = true) OR
+            (is_pgp_only = false AND password_hash IS NOT NULL) OR
+            (is_pgp_only IS NULL AND password_hash IS NOT NULL)
+        );
+EXCEPTION
+    WHEN others THEN NULL;
+END $$;
+
+-- ============================================
+-- SECURITY FIX #10: Add token_version for JWT revocation
+-- (Allows invalidating all tokens on password change)
+-- ============================================
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'token_version'
+    ) THEN
+        ALTER TABLE users ADD COLUMN token_version INTEGER DEFAULT 1;
+    END IF;
+END $$;
+
+-- Create index for token_version lookups
+CREATE INDEX IF NOT EXISTS idx_users_token_version ON users(id, token_version);
+
+-- ============================================
+-- STICKER USAGE TRACKING
+-- ============================================
+
+-- Add usage_count column to stickers table for tracking usage statistics
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'stickers' AND column_name = 'usage_count'
+    ) THEN
+        ALTER TABLE stickers ADD COLUMN usage_count BIGINT DEFAULT 0;
+    END IF;
+END $$;
+
+-- Create index for efficient top stickers query
+CREATE INDEX IF NOT EXISTS idx_stickers_usage_count ON stickers(usage_count DESC) WHERE is_active = true;
+
+-- ============================================
+-- REFERRAL CODE SYSTEM
+-- ============================================
+
+-- Add referral_system_enabled column to chat_settings (for existing databases)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'chat_settings' AND column_name = 'referral_system_enabled'
+    ) THEN
+        ALTER TABLE chat_settings ADD COLUMN referral_system_enabled BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Referral codes table (single-use registration codes purchased with ubercoin)
+CREATE TABLE IF NOT EXISTS referral_codes (
+    id BIGSERIAL PRIMARY KEY,
+    owner_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    code VARCHAR(12) UNIQUE NOT NULL,
+    is_used BOOLEAN DEFAULT false,
+    used_by BIGINT REFERENCES users(id) ON DELETE SET NULL,
+    used_at TIMESTAMP WITH TIME ZONE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for referral_codes
+CREATE INDEX IF NOT EXISTS idx_referral_codes_owner_id ON referral_codes(owner_id);
+CREATE INDEX IF NOT EXISTS idx_referral_codes_code ON referral_codes(code) WHERE is_used = false;
+CREATE INDEX IF NOT EXISTS idx_referral_codes_is_used ON referral_codes(is_used);
+CREATE INDEX IF NOT EXISTS idx_referral_codes_used_by ON referral_codes(used_by) WHERE used_by IS NOT NULL;
+
+-- ============================================
+-- PENDING UBERBAN SYSTEM
+-- (Deferred fingerprint ban - applies on next activity)
+-- ============================================
+
+-- Add pending_uberban column to users table (marks user for uberban on next login/connect)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'pending_uberban'
+    ) THEN
+        ALTER TABLE users ADD COLUMN pending_uberban BOOLEAN DEFAULT false;
+    END IF;
+END $$;
+
+-- Add pending_uberban_at column (when the uberban was requested)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name = 'users' AND column_name = 'pending_uberban_at'
+    ) THEN
+        ALTER TABLE users ADD COLUMN pending_uberban_at TIMESTAMP WITH TIME ZONE;
+    END IF;
+END $$;
+
+-- Create index for pending_uberban lookups
+CREATE INDEX IF NOT EXISTS idx_users_pending_uberban ON users(pending_uberban) WHERE pending_uberban = true;
\ No newline at end of file
diff --git a/devops/forgejo-server/.env.example b/devops/forgejo-server/.env.example
new file mode 100644
index 0000000..cf010a9
--- /dev/null
+++ b/devops/forgejo-server/.env.example
@@ -0,0 +1,41 @@
+# =============================================================================
+# Forgejo Server Environment Configuration
+# Copy to .env and fill in values
+# =============================================================================
+
+# Domain for Forgejo (required)
+FORGEJO_DOMAIN=bit.realms.pub
+
+# PostgreSQL Configuration
+POSTGRES_USER=forgejo
+POSTGRES_PASSWORD=CHANGE_ME_SECURE_PASSWORD
+POSTGRES_DB=forgejo
+
+# Forgejo Security Keys (generate with: openssl rand -hex 32)
+# SECRET_KEY: Used for encrypting data
+FORGEJO_SECRET_KEY=CHANGE_ME_GENERATE_WITH_openssl_rand_hex_32
+
+# INTERNAL_TOKEN: Used for internal API authentication
+FORGEJO_INTERNAL_TOKEN=CHANGE_ME_GENERATE_WITH_openssl_rand_hex_32
+
+# JWT_SECRET: Used for OAuth2 JWT tokens
+FORGEJO_JWT_SECRET=CHANGE_ME_GENERATE_WITH_openssl_rand_hex_32
+
+# =============================================================================
+# Runner Configuration (set after initial setup)
+# =============================================================================
+
+# Runner registration token (get from Forgejo admin panel)
+# Site Administration > Actions > Runners > Create new Runner
+# RUNNER_TOKEN=
+
+# =============================================================================
+# Generate secure values with:
+#
+#   # Generate all secrets at once
+#   echo "FORGEJO_SECRET_KEY=$(openssl rand -hex 32)"
+#   echo "FORGEJO_INTERNAL_TOKEN=$(openssl rand -hex 32)"
+#   echo "FORGEJO_JWT_SECRET=$(openssl rand -hex 32)"
+#   echo "POSTGRES_PASSWORD=$(openssl rand -base64 24)"
+#
+# =============================================================================
diff --git a/devops/forgejo-server/Caddyfile b/devops/forgejo-server/Caddyfile
new file mode 100644
index 0000000..c738c70
--- /dev/null
+++ b/devops/forgejo-server/Caddyfile
@@ -0,0 +1,40 @@
+# =============================================================================
+# Caddy Configuration for Forgejo
+# Automatic HTTPS with Let's Encrypt
+# =============================================================================
+
+{$FORGEJO_DOMAIN} {
+    # Reverse proxy to Forgejo
+    reverse_proxy forgejo:3000
+
+    # Enable compression
+    encode gzip zstd
+
+    # Security headers
+    header {
+        # HSTS
+        Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+        # Prevent clickjacking
+        X-Frame-Options "SAMEORIGIN"
+        # XSS protection
+        X-Content-Type-Options "nosniff"
+        X-XSS-Protection "1; mode=block"
+        # Referrer policy
+        Referrer-Policy "strict-origin-when-cross-origin"
+        # Remove server header
+        -Server
+    }
+
+    # Logging
+    log {
+        output file /data/access.log {
+            roll_size 10mb
+            roll_keep 5
+        }
+    }
+}
+
+# HTTP to HTTPS redirect (automatic with Caddy, but explicit for clarity)
+http://{$FORGEJO_DOMAIN} {
+    redir https://{$FORGEJO_DOMAIN}{uri} permanent
+}
diff --git a/devops/forgejo-server/README.md b/devops/forgejo-server/README.md
new file mode 100644
index 0000000..0930caa
--- /dev/null
+++ b/devops/forgejo-server/README.md
@@ -0,0 +1,137 @@
+# Forgejo Server Setup
+
+Git server with CI/CD for realms.india infrastructure.
+
+## Prerequisites
+
+- Droplet with Docker and Docker Compose installed (via Terraform cloud-init)
+- Volume mounted at `/mnt/forgejo`
+- DNS A record pointing to droplet IP
+
+## Initial Setup
+
+### 1. Copy configuration files
+
+```bash
+# SSH to Forgejo server via jump host
+ssh realms-forgejo
+
+# Copy files to /opt/forgejo
+cd /opt/forgejo
+# (upload docker-compose.yml, Caddyfile, .env.example)
+```
+
+### 2. Generate secrets and configure environment
+
+```bash
+cd /opt/forgejo
+cp .env.example .env
+
+# Generate secure values
+echo "FORGEJO_SECRET_KEY=$(openssl rand -hex 32)"
+echo "FORGEJO_INTERNAL_TOKEN=$(openssl rand -hex 32)"
+echo "FORGEJO_JWT_SECRET=$(openssl rand -hex 32)"
+echo "POSTGRES_PASSWORD=$(openssl rand -base64 24)"
+
+# Edit .env with generated values
+vim .env
+```
+
+### 3. Start Forgejo (without runner)
+
+```bash
+docker compose up -d forgejo-db forgejo caddy
+docker compose logs -f forgejo
+```
+
+### 4. Initial Forgejo Configuration
+
+1. Visit `https://bit.realms.pub`
+2. Create admin account (first user becomes admin)
+3. Configure settings as needed
+
+### 5. Register the Actions Runner
+
+```bash
+# Get runner token from Forgejo
+# Site Administration > Actions > Runners > Create new Runner
+
+# Register the runner
+docker compose run --rm forgejo-runner \
+  forgejo-runner register \
+  --instance https://bit.realms.pub \
+  --token YOUR_RUNNER_TOKEN \
+  --name realms-runner \
+  --labels ubuntu-latest,docker \
+  --no-interactive
+
+# Start the runner
+docker compose up -d forgejo-runner
+```
+
+### 6. Verify Setup
+
+```bash
+# Check all services
+docker compose ps
+
+# Check logs
+docker compose logs -f
+
+# Test Git SSH
+ssh -T git@bit.realms.pub -p 2222
+```
+
+## Maintenance
+
+### View logs
+```bash
+docker compose logs -f [service]
+```
+
+### Restart services
+```bash
+docker compose restart [service]
+```
+
+### Backup
+```bash
+# Stop services
+docker compose down
+
+# Backup volumes
+tar -czvf forgejo-backup-$(date +%Y%m%d).tar.gz /mnt/forgejo
+
+# Restart
+docker compose up -d
+```
+
+### Update Forgejo
+
+```bash
+# Pull new image
+docker compose pull forgejo
+
+# Recreate container
+docker compose up -d forgejo
+```
+
+## Troubleshooting
+
+### Runner won't start
+- Ensure runner is registered first
+- Check `/mnt/forgejo/runner-data/.runner` exists
+- Check logs: `docker compose logs forgejo-runner`
+
+### SSL certificate issues
+- Ensure DNS is properly configured
+- Check Caddy logs: `docker compose logs caddy`
+- Caddy auto-obtains certs, may take a minute on first start
+
+### Database connection issues
+- Check PostgreSQL is healthy: `docker compose ps`
+- Check logs: `docker compose logs forgejo-db`
+
+### Git SSH not working
+- Verify port 2222 is open in firewall
+- Test: `ssh -T git@bit.realms.pub -p 2222 -v`
diff --git a/devops/forgejo-server/docker-compose.yml b/devops/forgejo-server/docker-compose.yml
new file mode 100644
index 0000000..bc7fe24
--- /dev/null
+++ b/devops/forgejo-server/docker-compose.yml
@@ -0,0 +1,208 @@
+# =============================================================================
+# Forgejo Git Server - Docker Compose Stack
+# Forgejo 11.0.8 LTS with PostgreSQL, Caddy, and Actions Runner
+# =============================================================================
+
+services:
+  # ---------------------------------------------------------------------------
+  # PostgreSQL Database
+  # ---------------------------------------------------------------------------
+  forgejo-db:
+    image: postgres:16-alpine
+    container_name: forgejo-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-forgejo}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD required}
+      POSTGRES_DB: ${POSTGRES_DB:-forgejo}
+    volumes:
+      - /mnt/forgejo/forgejo-db:/var/lib/postgresql/data
+    networks:
+      - forgejo-internal
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-forgejo} -d ${POSTGRES_DB:-forgejo}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # ---------------------------------------------------------------------------
+  # Forgejo Git Server
+  # Using rootless image for better security
+  # ---------------------------------------------------------------------------
+  forgejo:
+    image: codeberg.org/forgejo/forgejo:11.0.8-rootless
+    container_name: forgejo
+    restart: unless-stopped
+    depends_on:
+      forgejo-db:
+        condition: service_healthy
+    environment:
+      # Database
+      FORGEJO__database__DB_TYPE: postgres
+      FORGEJO__database__HOST: forgejo-db:5432
+      FORGEJO__database__NAME: ${POSTGRES_DB:-forgejo}
+      FORGEJO__database__USER: ${POSTGRES_USER:-forgejo}
+      FORGEJO__database__PASSWD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD required}
+
+      # Server configuration
+      FORGEJO__server__DOMAIN: ${FORGEJO_DOMAIN:?FORGEJO_DOMAIN required}
+      FORGEJO__server__ROOT_URL: https://${FORGEJO_DOMAIN}/
+      FORGEJO__server__SSH_DOMAIN: ${FORGEJO_DOMAIN}
+      FORGEJO__server__SSH_PORT: 2222
+      FORGEJO__server__SSH_LISTEN_PORT: 2222
+      FORGEJO__server__START_SSH_SERVER: "true"
+      FORGEJO__server__HTTP_PORT: 3000
+      FORGEJO__server__LFS_START_SERVER: "true"
+
+      # Security
+      FORGEJO__security__INSTALL_LOCK: "true"
+      FORGEJO__security__SECRET_KEY: ${FORGEJO_SECRET_KEY:?FORGEJO_SECRET_KEY required}
+      FORGEJO__security__INTERNAL_TOKEN: ${FORGEJO_INTERNAL_TOKEN:?FORGEJO_INTERNAL_TOKEN required}
+      FORGEJO__security__PASSWORD_COMPLEXITY: "lower,upper,digit"
+      FORGEJO__security__MIN_PASSWORD_LENGTH: "12"
+
+      # OAuth2 JWT secret
+      FORGEJO__oauth2__JWT_SECRET: ${FORGEJO_JWT_SECRET:?FORGEJO_JWT_SECRET required}
+
+      # Service settings
+      FORGEJO__service__DISABLE_REGISTRATION: "false"
+      FORGEJO__service__REQUIRE_SIGNIN_VIEW: "false"
+      FORGEJO__service__ENABLE_NOTIFY_MAIL: "false"
+
+      # Actions (CI/CD)
+      FORGEJO__actions__ENABLED: "true"
+      FORGEJO__actions__DEFAULT_ACTIONS_URL: "https://code.forgejo.org"
+
+      # Repository settings
+      FORGEJO__repository__DEFAULT_BRANCH: "main"
+      FORGEJO__repository__ENABLE_PUSH_CREATE_USER: "true"
+      FORGEJO__repository__ENABLE_PUSH_CREATE_ORG: "true"
+
+      # LFS settings
+      FORGEJO__lfs__PATH: /data/lfs
+
+      # Webhook settings (for CI/CD)
+      FORGEJO__webhook__ALLOWED_HOST_LIST: "private"
+      FORGEJO__webhook__SKIP_TLS_VERIFY: "false"
+
+      # Log settings
+      FORGEJO__log__MODE: "console"
+      FORGEJO__log__LEVEL: "Info"
+
+    volumes:
+      - /mnt/forgejo/forgejo-data:/data
+      - /etc/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
+    networks:
+      - forgejo-internal
+      - forgejo-public
+    ports:
+      # Git SSH - exposed publicly
+      - "2222:2222"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/healthz"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+
+  # ---------------------------------------------------------------------------
+  # Caddy Reverse Proxy
+  # Automatic HTTPS with Let's Encrypt
+  # ---------------------------------------------------------------------------
+  caddy:
+    image: caddy:2-alpine
+    container_name: forgejo-caddy
+    restart: unless-stopped
+    depends_on:
+      forgejo:
+        condition: service_healthy
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy_data:/data
+      - caddy_config:/config
+    networks:
+      - forgejo-public
+    environment:
+      FORGEJO_DOMAIN: ${FORGEJO_DOMAIN}
+
+  # ---------------------------------------------------------------------------
+  # Forgejo Actions Runner
+  # For CI/CD pipelines
+  # ---------------------------------------------------------------------------
+  forgejo-runner:
+    image: code.forgejo.org/forgejo/runner:6.3.1
+    container_name: forgejo-runner
+    restart: unless-stopped
+    depends_on:
+      forgejo:
+        condition: service_healthy
+      docker-dind:
+        condition: service_started
+    environment:
+      DOCKER_HOST: tcp://docker-dind:2376
+      DOCKER_TLS_VERIFY: "1"
+      DOCKER_CERT_PATH: /certs/client
+    volumes:
+      - /mnt/forgejo/runner-data:/data
+      - dind-certs-client:/certs/client:ro
+    networks:
+      - forgejo-internal
+      - dind-network
+    command: >
+      sh -c '
+        if [ ! -f /data/.runner ]; then
+          echo "Runner not registered. Please run registration command first."
+          echo "See README for registration instructions."
+          sleep infinity
+        fi
+        forgejo-runner daemon --config /data/config.yaml
+      '
+
+  # ---------------------------------------------------------------------------
+  # Docker-in-Docker for Runner
+  # Allows building Docker images in CI/CD
+  # ---------------------------------------------------------------------------
+  docker-dind:
+    image: docker:27-dind
+    container_name: forgejo-dind
+    restart: unless-stopped
+    privileged: true
+    environment:
+      DOCKER_TLS_CERTDIR: /certs
+    volumes:
+      - dind-certs-ca:/certs/ca
+      - dind-certs-client:/certs/client
+      - dind-storage:/var/lib/docker
+    networks:
+      - dind-network
+    # Resource limits for 1GB RAM droplet
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+
+# =============================================================================
+# Networks
+# =============================================================================
+networks:
+  forgejo-internal:
+    driver: bridge
+    internal: true
+  forgejo-public:
+    driver: bridge
+  dind-network:
+    driver: bridge
+
+# =============================================================================
+# Volumes
+# =============================================================================
+volumes:
+  caddy_data:
+  caddy_config:
+  dind-certs-ca:
+  dind-certs-client:
+  dind-storage:
diff --git a/devops/terraform/.gitignore b/devops/terraform/.gitignore
new file mode 100644
index 0000000..e158bc9
--- /dev/null
+++ b/devops/terraform/.gitignore
@@ -0,0 +1,44 @@
+# Local .terraform directories
+**/.terraform/*
+
+# .tfstate files
+*.tfstate
+*.tfstate.*
+
+# Crash log files
+crash.log
+crash.*.log
+
+# Exclude all .tfvars files, which are likely to contain sensitive data
+*.tfvars
+*.tfvars.json
+
+# But include the example file
+!terraform.tfvars.example
+
+# Ignore override files as they are usually used to override resources locally
+override.tf
+override.tf.json
+*_override.tf
+*_override.tf.json
+
+# Ignore CLI configuration files
+.terraformrc
+terraform.rc
+
+# Ignore lock file (optional - some teams commit this)
+# .terraform.lock.hcl
+
+# Secrets directory
+.secrets/
+
+# SSH keys
+*.pem
+*_key
+*.key
+id_*
+!*.pub
+
+# Backup files
+*.backup
+*.bak
diff --git a/devops/terraform/.terraform.lock.hcl b/devops/terraform/.terraform.lock.hcl
new file mode 100644
index 0000000..e695811
--- /dev/null
+++ b/devops/terraform/.terraform.lock.hcl
@@ -0,0 +1,106 @@
+# This file is maintained automatically by "terraform init".
+# Manual edits may be lost in future updates.
+
+provider "registry.terraform.io/digitalocean/digitalocean" {
+  version     = "2.72.0"
+  constraints = ">= 2.34.0, ~> 2.34"
+  hashes = [
+    "h1:Evhic408nTkCx4bGRFOvzYKkpuHTQOWRw5UdU0tjVFE=",
+    "zh:06fd036391b1e67e33b9aeb6e717b3be7f3fa358192111ac6cebc6d71e69ae17",
+    "zh:159fd52b64482467994faf7fa2988f53817f7e213ddf0a5e51de3d49375d9c36",
+    "zh:16b91e919a2b6f49cd6882d4241b9e05480a3838804114208e60f1b47b29b8e6",
+    "zh:39dfb113e810070fe932ab8906280ea9f81e7009e165b9933c48c5f0b9b30b9d",
+    "zh:432b3ef2f5b3d06821cb4cb11d705125bd365d7d6fb08db4b3ddcd0354471c5b",
+    "zh:4e9e286f148df4de33dd6a656e6be5586bc3e49c744bc5b6a315f2cf179c3803",
+    "zh:60a56107c1b047dc8be17a6944d6098a1fea6894929874ea70ff59a7879f7252",
+    "zh:7ef58ae0830af5559f0cb9f6cff260bf7bd4c120d31781ce1c6297fe9b149d6d",
+    "zh:9623850701a5a1d7840a32451b48bc6423791814e98cde8a26a112e824102845",
+    "zh:a73e4eae3c510de4c3882f301a4024efe1c733b9ef20492b85d367f04c83db1a",
+    "zh:a8ac85aa1bec870b88c8ff15c7d682b6239cc7fd3ec43348c71a0c25e1bc8d18",
+    "zh:d72c44619d38e471a1a13809c111b459396fcb61be97058287bb883b422973a3",
+    "zh:d8f2751dd548e996890dd8b91ee834fbdd64aeeb41df1ef0ffbf97b03e07ce19",
+    "zh:decf393b215330f62b4f43135dd4827c0c32b3b230e5d9cf78d973e6862043a8",
+    "zh:ecfe43046837abc2b9b1eeac945d103513fc485d63f0c2cc39e71b52d9c417f8",
+    "zh:f27c41e46fcd5a2d9faba3aa51a4769dad3f413ac65203fb96ff7a0c68a801e6",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/cloudinit" {
+  version     = "2.3.7"
+  constraints = ">= 2.3.0, ~> 2.3"
+  hashes = [
+    "h1:h1Pr6uNwq+iDEGrnQJEHzOTz+yVTW0AJgZrGXuoO4Qs=",
+    "zh:06f1c54e919425c3139f8aeb8fcf9bceca7e560d48c9f0c1e3bb0a8ad9d9da1e",
+    "zh:0e1e4cf6fd98b019e764c28586a386dc136129fef50af8c7165a067e7e4a31d5",
+    "zh:1871f4337c7c57287d4d67396f633d224b8938708b772abfc664d1f80bd67edd",
+    "zh:2b9269d91b742a71b2248439d5e9824f0447e6d261bfb86a8a88528609b136d1",
+    "zh:3d8ae039af21426072c66d6a59a467d51f2d9189b8198616888c1b7fc42addc7",
+    "zh:3ef4e2db5bcf3e2d915921adced43929214e0946a6fb11793085d9a48995ae01",
+    "zh:42ae54381147437c83cbb8790cc68935d71b6357728a154109d3220b1beb4dc9",
+    "zh:4496b362605ae4cbc9ef7995d102351e2fe311897586ffc7a4a262ccca0c782a",
+    "zh:652a2401257a12706d32842f66dac05a735693abcb3e6517d6b5e2573729ba13",
+    "zh:7406c30806f5979eaed5f50c548eced2ea18ea121e01801d2f0d4d87a04f6a14",
+    "zh:7848429fd5a5bcf35f6fee8487df0fb64b09ec071330f3ff240c0343fe2a5224",
+    "zh:78d5eefdd9e494defcb3c68d282b8f96630502cac21d1ea161f53cfe9bb483b3",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/local" {
+  version     = "2.6.1"
+  constraints = "~> 2.4"
+  hashes = [
+    "h1:Ey2jPUGfuahWUs8w82yeZKBMYqh9SM3e6J+EQt7QTKk=",
+    "zh:10050d08f416de42a857e4b6f76809aae63ea4ec6f5c852a126a915dede814b4",
+    "zh:2df2a3ebe9830d4759c59b51702e209fe053f47453cb4688f43c063bac8746b7",
+    "zh:2e759568bcc38c86ca0e43701d34cf29945736fdc8e429c5b287ddc2703c7b18",
+    "zh:6a62a34e48500ab4aea778e355e162ebde03260b7a9eb9edc7e534c84fbca4c6",
+    "zh:74373728ba32a1d5450a3a88ac45624579e32755b086cd4e51e88d9aca240ef6",
+    "zh:78d5eefdd9e494defcb3c68d282b8f96630502cac21d1ea161f53cfe9bb483b3",
+    "zh:8dddae588971a996f622e7589cd8b9da7834c744ac12bfb59c97fa77ded95255",
+    "zh:946f82f66353bb97aefa8d95c4ca86db227f9b7c50b82415289ac47e4e74d08d",
+    "zh:e9a5c09e6f35e510acf15b666fd0b34a30164cecdcd81ce7cda0f4b2dade8d91",
+    "zh:eafe5b873ef42b32feb2f969c38ff8652507e695620cbaf03b9db714bee52249",
+    "zh:ec146289fa27650c9d433bb5c7847379180c0b7a323b1b94e6e7ad5d2a7dbe71",
+    "zh:fc882c35ce05631d76c0973b35adde26980778fc81d9da81a2fade2b9d73423b",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/random" {
+  version     = "3.7.2"
+  constraints = "~> 3.6"
+  hashes = [
+    "h1:0hcNr59VEJbhZYwuDE/ysmyTS0evkfcLarlni+zATPM=",
+    "zh:14829603a32e4bc4d05062f059e545a91e27ff033756b48afbae6b3c835f508f",
+    "zh:1527fb07d9fea400d70e9e6eb4a2b918d5060d604749b6f1c361518e7da546dc",
+    "zh:1e86bcd7ebec85ba336b423ba1db046aeaa3c0e5f921039b3f1a6fc2f978feab",
+    "zh:24536dec8bde66753f4b4030b8f3ef43c196d69cccbea1c382d01b222478c7a3",
+    "zh:29f1786486759fad9b0ce4fdfbbfece9343ad47cd50119045075e05afe49d212",
+    "zh:4d701e978c2dd8604ba1ce962b047607701e65c078cb22e97171513e9e57491f",
+    "zh:78d5eefdd9e494defcb3c68d282b8f96630502cac21d1ea161f53cfe9bb483b3",
+    "zh:7b8434212eef0f8c83f5a90c6d76feaf850f6502b61b53c329e85b3b281cba34",
+    "zh:ac8a23c212258b7976e1621275e3af7099e7e4a3d4478cf8d5d2a27f3bc3e967",
+    "zh:b516ca74431f3df4c6cf90ddcdb4042c626e026317a33c53f0b445a3d93b720d",
+    "zh:dc76e4326aec2490c1600d6871a95e78f9050f9ce427c71707ea412a2f2f1a62",
+    "zh:eac7b63e86c749c7d48f527671c7aee5b4e26c10be6ad7232d6860167f99dbb0",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/tls" {
+  version     = "4.1.0"
+  constraints = ">= 4.0.0, ~> 4.0"
+  hashes = [
+    "h1:y9cHrgcuaZt592In6xQzz1lx7k/B9EeWrAb8K7QqOgU=",
+    "zh:14c35d89307988c835a7f8e26f1b83ce771e5f9b41e407f86a644c0152089ac2",
+    "zh:2fb9fe7a8b5afdbd3e903acb6776ef1be3f2e587fb236a8c60f11a9fa165faa8",
+    "zh:35808142ef850c0c60dd93dc06b95c747720ed2c40c89031781165f0c2baa2fc",
+    "zh:35b5dc95bc75f0b3b9c5ce54d4d7600c1ebc96fbb8dfca174536e8bf103c8cdc",
+    "zh:38aa27c6a6c98f1712aa5cc30011884dc4b128b4073a4a27883374bfa3ec9fac",
+    "zh:51fb247e3a2e88f0047cb97bb9df7c228254a3b3021c5534e4563b4007e6f882",
+    "zh:62b981ce491e38d892ba6364d1d0cdaadcee37cc218590e07b310b1dfa34be2d",
+    "zh:bc8e47efc611924a79f947ce072a9ad698f311d4a60d0b4dfff6758c912b7298",
+    "zh:c149508bd131765d1bc085c75a870abb314ff5a6d7f5ac1035a8892d686b6297",
+    "zh:d38d40783503d278b63858978d40e07ac48123a2925e1a6b47e62179c046f87a",
+    "zh:f569b65999264a9416862bca5cd2a6177d94ccb0424f3a4ef424428912b9cb3c",
+    "zh:fb07f708e3316615f6d218cec198504984c0ce7000b9f1eebff7516e384f4b54",
+  ]
+}
diff --git a/devops/terraform/main.tf b/devops/terraform/main.tf
new file mode 100644
index 0000000..caf7931
--- /dev/null
+++ b/devops/terraform/main.tf
@@ -0,0 +1,107 @@
+# =============================================================================
+# realms.india - DigitalOcean Infrastructure (Phase A: Jump Host + Forgejo)
+# =============================================================================
+
+locals {
+  common_tags = concat([
+    var.project_name,
+    var.environment,
+    "terraform-managed"
+  ], var.tags)
+}
+
+# =============================================================================
+# VPC Module
+# =============================================================================
+
+module "vpc" {
+  source = "./modules/vpc"
+
+  name        = "${var.project_name}-vpc-${var.environment}"
+  region      = var.region
+  ip_range    = var.vpc_ip_range
+  description = "VPC for ${var.project_name} ${var.environment} environment"
+}
+
+# =============================================================================
+# SSH Keys Module
+# =============================================================================
+
+module "ssh_keys" {
+  source = "./modules/ssh_keys"
+
+  project_name          = var.project_name
+  environment           = var.environment
+  admin_ssh_public_keys = var.admin_ssh_public_keys
+}
+
+# =============================================================================
+# Jump Host Module (Bastion)
+# =============================================================================
+
+module "jump_host" {
+  source = "./modules/jump_host"
+
+  project_name         = var.project_name
+  environment          = var.environment
+  region               = var.region
+  vpc_uuid             = module.vpc.vpc_id
+  vpc_ip_range         = var.vpc_ip_range
+  ssh_keys             = module.ssh_keys.all_ssh_key_ids
+  droplet_size         = var.jump_host_size
+  droplet_image        = var.jump_host_image
+  ssh_port             = var.jump_host_ssh_port
+  enable_backups       = var.enable_droplet_backups
+  tags                 = local.common_tags
+  internal_private_key = module.ssh_keys.internal_private_key
+
+  depends_on = [module.vpc, module.ssh_keys]
+}
+
+# =============================================================================
+# Forgejo Module
+# =============================================================================
+
+module "forgejo" {
+  source = "./modules/forgejo"
+
+  project_name        = var.project_name
+  environment         = var.environment
+  region              = var.region
+  vpc_uuid            = module.vpc.vpc_id
+  vpc_ip_range        = var.vpc_ip_range
+  ssh_keys            = module.ssh_keys.forgejo_ssh_key_ids
+  droplet_size        = var.forgejo_droplet_size
+  droplet_image       = var.forgejo_droplet_image
+  volume_size         = var.forgejo_volume_size
+  ssh_port            = var.forgejo_ssh_port
+  git_ssh_port        = var.forgejo_git_ssh_port
+  domain              = var.forgejo_domain
+  enable_backups      = var.enable_droplet_backups
+  tags                = local.common_tags
+
+  # DNS Configuration
+  manage_dns      = var.manage_dns
+  dns_zone        = var.dns_zone
+  dns_record_name = "qbit"  # Creates qbit.realms.pub
+
+  depends_on = [module.vpc, module.ssh_keys]
+}
+
+# =============================================================================
+# Firewalls Module
+# =============================================================================
+
+module "firewalls" {
+  source = "./modules/firewalls"
+
+  project_name        = var.project_name
+  environment         = var.environment
+  vpc_ip_range        = var.vpc_ip_range
+  jump_host_droplet_id = module.jump_host.droplet_id
+  jump_host_ssh_port  = var.jump_host_ssh_port
+  forgejo_droplet_id   = module.forgejo.droplet_id
+  forgejo_git_ssh_port = var.forgejo_git_ssh_port
+
+  depends_on = [module.jump_host, module.forgejo]
+}
diff --git a/devops/terraform/modules/firewalls/main.tf b/devops/terraform/modules/firewalls/main.tf
new file mode 100644
index 0000000..fbd4cab
--- /dev/null
+++ b/devops/terraform/modules/firewalls/main.tf
@@ -0,0 +1,187 @@
+# =============================================================================
+# Firewalls Module
+# Defense in depth with DigitalOcean Cloud Firewalls
+# =============================================================================
+
+# -----------------------------------------------------------------------------
+# Jump Host Firewall
+# Only allows SSH on non-standard port from anywhere
+# -----------------------------------------------------------------------------
+resource "digitalocean_firewall" "jump_host" {
+  name = "${var.project_name}-${var.environment}-jump-fw"
+
+  droplet_ids = [var.jump_host_droplet_id]
+
+  # Inbound: SSH on non-standard port
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = var.jump_host_ssh_port
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # Inbound: Allow all VPC traffic
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "icmp"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  # Outbound: Only necessary traffic (security hardening)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # DNS
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # DNS
+  }
+
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "80"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # HTTP (apt)
+  }
+
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "443"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # HTTPS
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "123"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # NTP
+  }
+
+  outbound_rule {
+    protocol              = "icmp"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # VPC outbound (all ports for internal communication)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+}
+
+# -----------------------------------------------------------------------------
+# Forgejo Firewall
+# Allows HTTP, HTTPS, and Git SSH from anywhere
+# System SSH only from VPC (handled by VPC rule)
+# -----------------------------------------------------------------------------
+resource "digitalocean_firewall" "forgejo" {
+  name = "${var.project_name}-${var.environment}-forgejo-fw"
+
+  droplet_ids = [var.forgejo_droplet_id]
+
+  # Inbound: HTTP
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "80"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # Inbound: HTTPS
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "443"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # Inbound: Git SSH
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = var.forgejo_git_ssh_port
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # Inbound: Allow all VPC traffic (includes system SSH on non-standard port)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "icmp"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  # Outbound: Only necessary traffic (security hardening)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # DNS
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # DNS
+  }
+
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "80"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # HTTP (apt, Let's Encrypt)
+  }
+
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "443"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # HTTPS (Docker, webhooks)
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "123"
+    destination_addresses = ["0.0.0.0/0", "::/0"]  # NTP
+  }
+
+  outbound_rule {
+    protocol              = "icmp"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # VPC outbound (all ports for internal communication)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+}
diff --git a/devops/terraform/modules/firewalls/outputs.tf b/devops/terraform/modules/firewalls/outputs.tf
new file mode 100644
index 0000000..e4f9bdf
--- /dev/null
+++ b/devops/terraform/modules/firewalls/outputs.tf
@@ -0,0 +1,13 @@
+# =============================================================================
+# Firewalls Module Outputs
+# =============================================================================
+
+output "jump_host_firewall_id" {
+  description = "ID of the jump host firewall"
+  value       = digitalocean_firewall.jump_host.id
+}
+
+output "forgejo_firewall_id" {
+  description = "ID of the Forgejo firewall"
+  value       = digitalocean_firewall.forgejo.id
+}
diff --git a/devops/terraform/modules/firewalls/variables.tf b/devops/terraform/modules/firewalls/variables.tf
new file mode 100644
index 0000000..93a9a0d
--- /dev/null
+++ b/devops/terraform/modules/firewalls/variables.tf
@@ -0,0 +1,39 @@
+# =============================================================================
+# Firewalls Module Variables
+# =============================================================================
+
+variable "project_name" {
+  description = "Name of the project"
+  type        = string
+}
+
+variable "environment" {
+  description = "Environment name"
+  type        = string
+}
+
+variable "vpc_ip_range" {
+  description = "VPC IP range for internal traffic"
+  type        = string
+}
+
+variable "jump_host_droplet_id" {
+  description = "ID of the jump host droplet"
+  type        = number
+}
+
+variable "jump_host_ssh_port" {
+  description = "SSH port for jump host"
+  type        = number
+}
+
+variable "forgejo_droplet_id" {
+  description = "ID of the Forgejo droplet"
+  type        = number
+}
+
+variable "forgejo_git_ssh_port" {
+  description = "Git SSH port for Forgejo"
+  type        = number
+  default     = 2222
+}
diff --git a/devops/terraform/modules/firewalls/versions.tf b/devops/terraform/modules/firewalls/versions.tf
new file mode 100644
index 0000000..59fb163
--- /dev/null
+++ b/devops/terraform/modules/firewalls/versions.tf
@@ -0,0 +1,8 @@
+terraform {
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = ">= 2.34"
+    }
+  }
+}
diff --git a/devops/terraform/modules/forgejo/cloud-init.yaml.tpl b/devops/terraform/modules/forgejo/cloud-init.yaml.tpl
new file mode 100644
index 0000000..2ffee24
--- /dev/null
+++ b/devops/terraform/modules/forgejo/cloud-init.yaml.tpl
@@ -0,0 +1,590 @@
+#cloud-config
+
+# =============================================================================
+# Forgejo Server Cloud-Init Configuration
+# Git server with Docker for Forgejo 11.0.8 LTS - FULLY AUTOMATED
+# =============================================================================
+
+# NOTE: We install packages via runcmd instead of packages: section
+# because DigitalOcean's base image cloud-init can interfere with the packages module
+
+# bootcmd runs before write_files - create directories needed for write_files
+bootcmd:
+  - mkdir -p /opt/forgejo/caddy
+
+write_files:
+  # SSH daemon configuration (non-standard port, VPC only access expected)
+  - path: /etc/ssh/sshd_config.d/99-hardening.conf
+    content: |
+      # Non-standard port (VPC access only via jump host)
+      Port ${ssh_port}
+
+      # Authentication hardening
+      PermitRootLogin prohibit-password
+      PasswordAuthentication no
+      PubkeyAuthentication yes
+      AuthenticationMethods publickey
+
+      # Security settings
+      MaxAuthTries 3
+      LoginGraceTime 30
+      PermitEmptyPasswords no
+      X11Forwarding no
+      AllowTcpForwarding no
+      AllowAgentForwarding no
+      PermitUserEnvironment no
+      MaxSessions 3
+
+      # Session settings
+      ClientAliveInterval 300
+      ClientAliveCountMax 2
+
+      # Logging
+      LogLevel VERBOSE
+    permissions: '0644'
+
+  # NOTE: authorized_keys is managed by DigitalOcean's native SSH key provisioning
+  # The internal key is added via digitalocean_ssh_key.internal resource
+
+  # Fail2ban configuration for system SSH
+  - path: /etc/fail2ban/jail.d/sshd.local
+    content: |
+      [sshd]
+      enabled = true
+      port = ${ssh_port}
+      filter = sshd
+      logpath = /var/log/auth.log
+      backend = systemd
+      bantime = 1h
+      findtime = 10m
+      maxretry = 3
+    permissions: '0644'
+
+  # Fail2ban for Forgejo Git SSH
+  - path: /etc/fail2ban/jail.d/forgejo-ssh.local
+    content: |
+      [forgejo-ssh]
+      enabled = true
+      port = ${git_ssh_port}
+      filter = sshd
+      logpath = /var/lib/docker/containers/*forgejo*/*-json.log
+      backend = auto
+      bantime = 1h
+      findtime = 10m
+      maxretry = 5
+    permissions: '0644'
+
+  # Fail2ban filter for Forgejo HTTP auth failures
+  - path: /etc/fail2ban/filter.d/forgejo.conf
+    content: |
+      [Definition]
+      failregex = ^.*Failed authentication attempt for .* from <HOST>.*$
+                  ^.*invalid credentials from <HOST>.*$
+      ignoreregex =
+    permissions: '0644'
+
+  # Fail2ban jail for Forgejo HTTP
+  - path: /etc/fail2ban/jail.d/forgejo-http.local
+    content: |
+      [forgejo-http]
+      enabled = true
+      port = 80,443
+      filter = forgejo
+      logpath = /var/lib/docker/containers/*forgejo*/*-json.log
+      backend = auto
+      bantime = 1h
+      findtime = 10m
+      maxretry = 5
+    permissions: '0644'
+
+  # Docker daemon configuration (hardened)
+  - path: /etc/docker/daemon.json
+    content: |
+      {
+        "log-driver": "json-file",
+        "log-opts": {
+          "max-size": "10m",
+          "max-file": "3"
+        },
+        "storage-driver": "overlay2",
+        "live-restore": true,
+        "no-new-privileges": true
+      }
+    permissions: '0644'
+
+  # UFW configuration script
+  - path: /usr/local/bin/configure-firewall.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      # Reset UFW
+      ufw --force reset
+
+      # Default policies
+      ufw default deny incoming
+      ufw default deny outgoing
+
+      # Inbound: HTTP/HTTPS for Forgejo web
+      ufw allow in 80/tcp comment 'HTTP'
+      ufw allow in 443/tcp comment 'HTTPS'
+
+      # Inbound: Git SSH (public)
+      ufw allow in ${git_ssh_port}/tcp comment 'Git SSH'
+
+      # Inbound: VPC traffic (includes system SSH on non-standard port)
+      ufw allow in from ${vpc_ip_range} comment 'VPC internal'
+
+      # Outbound: Only necessary traffic (matching DO firewall)
+      ufw allow out 53/tcp comment 'DNS'
+      ufw allow out 53/udp comment 'DNS'
+      ufw allow out 80/tcp comment 'HTTP'
+      ufw allow out 443/tcp comment 'HTTPS'
+      ufw allow out 123/udp comment 'NTP'
+      ufw allow out to ${vpc_ip_range} comment 'VPC'
+
+      # Enable logging for security audit
+      ufw logging high
+
+      # Enable UFW
+      ufw --force enable
+
+      echo "Firewall configured successfully"
+    permissions: '0755'
+
+  # Volume mount script
+  - path: /usr/local/bin/mount-volume.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      VOLUME_NAME="${volume_name}"
+      MOUNT_POINT="/mnt/forgejo"
+
+      # Create mount point
+      mkdir -p "$MOUNT_POINT"
+
+      # Find the volume device
+      # DigitalOcean volumes are typically at /dev/disk/by-id/scsi-0DO_Volume_*
+      VOLUME_DEV=$(readlink -f /dev/disk/by-id/scsi-0DO_Volume_$VOLUME_NAME 2>/dev/null || true)
+
+      if [ -z "$VOLUME_DEV" ]; then
+        echo "Waiting for volume to attach..."
+        sleep 10
+        VOLUME_DEV=$(readlink -f /dev/disk/by-id/scsi-0DO_Volume_$VOLUME_NAME 2>/dev/null || true)
+      fi
+
+      if [ -n "$VOLUME_DEV" ]; then
+        # Check if already mounted
+        if ! mountpoint -q "$MOUNT_POINT"; then
+          mount "$VOLUME_DEV" "$MOUNT_POINT"
+          echo "Volume mounted at $MOUNT_POINT"
+        fi
+
+        # Add to fstab if not already there
+        if ! grep -q "$VOLUME_DEV" /etc/fstab; then
+          echo "$VOLUME_DEV $MOUNT_POINT ext4 defaults,nofail,discard 0 2" >> /etc/fstab
+        fi
+
+        # Create subdirectories
+        mkdir -p "$MOUNT_POINT/forgejo-data"
+        mkdir -p "$MOUNT_POINT/forgejo-db"
+        mkdir -p "$MOUNT_POINT/runner-data"
+
+        # Set permissions (UID 1000 is typically the forgejo user in container)
+        chown -R 1000:1000 "$MOUNT_POINT/forgejo-data"
+        chown -R 999:999 "$MOUNT_POINT/forgejo-db"  # postgres user
+        chown -R 1000:1000 "$MOUNT_POINT/runner-data"
+      else
+        echo "WARNING: Volume not found. Please attach volume manually."
+      fi
+    permissions: '0755'
+
+  # Swap configuration script (needed for 1GB RAM)
+  - path: /usr/local/bin/configure-swap.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      SWAP_FILE="/swapfile"
+      SWAP_SIZE="2G"
+
+      if [ ! -f "$SWAP_FILE" ]; then
+        echo "Creating $SWAP_SIZE swap file..."
+        fallocate -l $SWAP_SIZE $SWAP_FILE
+        chmod 600 $SWAP_FILE
+        mkswap $SWAP_FILE
+        swapon $SWAP_FILE
+
+        # Add to fstab
+        echo "$SWAP_FILE none swap sw 0 0" >> /etc/fstab
+
+        # Adjust swappiness for better performance
+        echo "vm.swappiness=10" >> /etc/sysctl.conf
+        sysctl vm.swappiness=10
+
+        echo "Swap configured successfully"
+      else
+        echo "Swap file already exists"
+      fi
+    permissions: '0755'
+
+  # Unattended upgrades configuration
+  - path: /etc/apt/apt.conf.d/50unattended-upgrades
+    content: |
+      Unattended-Upgrade::Allowed-Origins {
+          "$${distro_id}:$${distro_codename}";
+          "$${distro_id}:$${distro_codename}-security";
+          "$${distro_id}:$${distro_codename}-updates";
+      };
+      Unattended-Upgrade::AutoFixInterruptedDpkg "true";
+      Unattended-Upgrade::MinimalSteps "true";
+      Unattended-Upgrade::Remove-Unused-Dependencies "true";
+      Unattended-Upgrade::Automatic-Reboot "false";
+    permissions: '0644'
+
+  # Auto-upgrades configuration
+  - path: /etc/apt/apt.conf.d/20auto-upgrades
+    content: |
+      APT::Periodic::Update-Package-Lists "1";
+      APT::Periodic::Unattended-Upgrade "1";
+      APT::Periodic::AutocleanInterval "7";
+    permissions: '0644'
+
+  # ==========================================================================
+  # FORGEJO DOCKER COMPOSE STACK
+  # ==========================================================================
+
+  # Docker Compose file
+  - path: /opt/forgejo/docker-compose.yml
+    content: |
+      services:
+        # PostgreSQL Database
+        forgejo-db:
+          image: postgres:16-alpine
+          container_name: forgejo-db
+          restart: unless-stopped
+          environment:
+            POSTGRES_USER: $${POSTGRES_USER:-forgejo}
+            POSTGRES_PASSWORD: $${POSTGRES_PASSWORD}
+            POSTGRES_DB: $${POSTGRES_DB:-forgejo}
+          volumes:
+            - /mnt/forgejo/forgejo-db:/var/lib/postgresql/data
+          networks:
+            - forgejo-internal
+          healthcheck:
+            test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER:-forgejo} -d $${POSTGRES_DB:-forgejo}"]
+            interval: 10s
+            timeout: 5s
+            retries: 5
+          deploy:
+            resources:
+              limits:
+                memory: 256M
+              reservations:
+                memory: 128M
+
+        # Forgejo Git Server
+        forgejo:
+          image: codeberg.org/forgejo/forgejo:11.0.8-rootless
+          container_name: forgejo
+          restart: unless-stopped
+          depends_on:
+            forgejo-db:
+              condition: service_healthy
+          environment:
+            FORGEJO__database__DB_TYPE: postgres
+            FORGEJO__database__HOST: forgejo-db:5432
+            FORGEJO__database__NAME: $${POSTGRES_DB:-forgejo}
+            FORGEJO__database__USER: $${POSTGRES_USER:-forgejo}
+            FORGEJO__database__PASSWD: $${POSTGRES_PASSWORD}
+            FORGEJO__server__DOMAIN: $${FORGEJO_DOMAIN}
+            FORGEJO__server__ROOT_URL: https://$${FORGEJO_DOMAIN}/
+            FORGEJO__server__SSH_DOMAIN: $${FORGEJO_DOMAIN}
+            FORGEJO__server__SSH_PORT: ${git_ssh_port}
+            FORGEJO__server__SSH_LISTEN_PORT: ${git_ssh_port}
+            FORGEJO__server__START_SSH_SERVER: "true"
+            FORGEJO__server__HTTP_PORT: 3000
+            FORGEJO__server__LFS_START_SERVER: "true"
+            FORGEJO__security__INSTALL_LOCK: "true"
+            FORGEJO__security__SECRET_KEY: $${FORGEJO_SECRET_KEY}
+            FORGEJO__security__INTERNAL_TOKEN: $${FORGEJO_INTERNAL_TOKEN}
+            FORGEJO__security__PASSWORD_COMPLEXITY: "lower,upper,digit"
+            FORGEJO__security__MIN_PASSWORD_LENGTH: "12"
+            FORGEJO__oauth2__JWT_SECRET: $${FORGEJO_JWT_SECRET}
+            FORGEJO__service__DISABLE_REGISTRATION: "true"
+            FORGEJO__service__REQUIRE_SIGNIN_VIEW: "false"
+            FORGEJO__service__ENABLE_NOTIFY_MAIL: "false"
+            FORGEJO__actions__ENABLED: "true"
+            FORGEJO__actions__DEFAULT_ACTIONS_URL: "https://code.forgejo.org"
+            FORGEJO__repository__DEFAULT_BRANCH: "main"
+            FORGEJO__repository__ENABLE_PUSH_CREATE_USER: "true"
+            FORGEJO__repository__ENABLE_PUSH_CREATE_ORG: "true"
+            FORGEJO__lfs__PATH: /data/lfs
+            FORGEJO__webhook__ALLOWED_HOST_LIST: "private"
+            FORGEJO__webhook__SKIP_TLS_VERIFY: "false"
+            FORGEJO__log__MODE: "console"
+            FORGEJO__log__LEVEL: "Info"
+          volumes:
+            - /mnt/forgejo/forgejo-data:/data
+            - /etc/timezone:/etc/timezone:ro
+            - /etc/localtime:/etc/localtime:ro
+          networks:
+            - forgejo-internal
+            - forgejo-public
+          ports:
+            - "${git_ssh_port}:${git_ssh_port}"
+          healthcheck:
+            test: ["CMD", "curl", "-f", "http://localhost:3000/api/healthz"]
+            interval: 30s
+            timeout: 10s
+            retries: 3
+            start_period: 60s
+          security_opt:
+            - no-new-privileges:true
+          deploy:
+            resources:
+              limits:
+                memory: 384M
+              reservations:
+                memory: 192M
+
+        # Caddy Reverse Proxy with auto-SSL and rate limiting
+        caddy:
+          build:
+            context: ./caddy
+            dockerfile: Dockerfile
+          container_name: forgejo-caddy
+          restart: unless-stopped
+          depends_on:
+            forgejo:
+              condition: service_healthy
+          ports:
+            - "80:80"
+            - "443:443"
+          volumes:
+            - /opt/forgejo/Caddyfile:/etc/caddy/Caddyfile:ro
+            - caddy_data:/data
+            - caddy_config:/config
+          networks:
+            - forgejo-public
+          environment:
+            FORGEJO_DOMAIN: $${FORGEJO_DOMAIN}
+          security_opt:
+            - no-new-privileges:true
+          deploy:
+            resources:
+              limits:
+                memory: 64M
+              reservations:
+                memory: 32M
+
+      networks:
+        forgejo-internal:
+          driver: bridge
+          internal: true
+        forgejo-public:
+          driver: bridge
+
+      volumes:
+        caddy_data:
+        caddy_config:
+    permissions: '0644'
+
+  # Caddy Dockerfile with rate-limit plugin
+  - path: /opt/forgejo/caddy/Dockerfile
+    content: |
+      FROM caddy:2-builder AS builder
+      RUN xcaddy build --with github.com/mholt/caddy-ratelimit
+
+      FROM caddy:2-alpine
+      COPY --from=builder /usr/bin/caddy /usr/bin/caddy
+    permissions: '0644'
+
+  # Caddyfile for reverse proxy with rate limiting
+  - path: /opt/forgejo/Caddyfile
+    content: |
+      {
+          order rate_limit before basicauth
+      }
+
+      ${domain} {
+          # Rate limiting - 100 requests per minute per IP
+          rate_limit {
+              zone forgejo_zone {
+                  key {remote_host}
+                  events 100
+                  window 1m
+              }
+          }
+
+          reverse_proxy forgejo:3000
+
+          encode gzip zstd
+
+          header {
+              Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+              X-Frame-Options "SAMEORIGIN"
+              X-Content-Type-Options "nosniff"
+              X-XSS-Protection "1; mode=block"
+              Referrer-Policy "strict-origin-when-cross-origin"
+              -Server
+          }
+
+          log {
+              output file /data/access.log {
+                  roll_size 10mb
+                  roll_keep 5
+              }
+          }
+      }
+    permissions: '0644'
+
+  # Script to create .env with Terraform-generated secrets
+  - path: /usr/local/bin/setup-forgejo.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      ENV_FILE="/opt/forgejo/.env"
+
+      # Only create if .env doesn't exist (preserves on re-run)
+      if [ ! -f "$ENV_FILE" ]; then
+        echo "Writing Forgejo configuration..."
+
+        {
+          echo "# Forgejo configuration (secrets from Terraform)"
+          echo "FORGEJO_DOMAIN=${domain}"
+          echo ""
+          echo "# PostgreSQL"
+          echo "POSTGRES_USER=forgejo"
+          echo "POSTGRES_PASSWORD=${postgres_password}"
+          echo "POSTGRES_DB=forgejo"
+          echo ""
+          echo "# Forgejo Security Keys"
+          echo "FORGEJO_SECRET_KEY=${forgejo_secret_key}"
+          echo "FORGEJO_INTERNAL_TOKEN=${forgejo_internal_token}"
+          echo "FORGEJO_JWT_SECRET=${forgejo_jwt_secret}"
+        } > "$ENV_FILE"
+
+        chmod 600 "$ENV_FILE"
+        echo "Configuration saved to $ENV_FILE"
+      else
+        echo ".env already exists, skipping"
+      fi
+    permissions: '0755'
+
+  # DNS wait script - waits for DNS to propagate before starting Caddy
+  - path: /usr/local/bin/wait-for-dns.sh
+    content: |
+      #!/bin/bash
+      DOMAIN="${domain}"
+      MAX_ATTEMPTS=60
+      ATTEMPT=0
+
+      echo "Waiting for DNS to propagate for $DOMAIN..."
+
+      while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do
+        if host "$DOMAIN" > /dev/null 2>&1; then
+          echo "DNS resolved for $DOMAIN"
+          exit 0
+        fi
+        ATTEMPT=$((ATTEMPT + 1))
+        echo "Attempt $ATTEMPT/$MAX_ATTEMPTS - waiting 10s..."
+        sleep 10
+      done
+
+      echo "WARNING: DNS did not resolve after $MAX_ATTEMPTS attempts"
+      echo "Let's Encrypt certificate may fail - run 'docker compose restart caddy' after DNS propagates"
+      exit 0
+    permissions: '0755'
+
+  # Message of the day
+  - path: /etc/motd
+    content: |
+
+      +---------------------------------------------------------------+
+      |                    FORGEJO GIT SERVER                         |
+      |                                                               |
+      |  Domain: ${domain}
+      |  Git SSH Port: ${git_ssh_port}
+      |                                                               |
+      |  Data location: /mnt/forgejo                                  |
+      |  Docker compose: /opt/forgejo                                 |
+      |                                                               |
+      |  Commands:                                                    |
+      |    cd /opt/forgejo && docker compose logs -f                  |
+      |    cd /opt/forgejo && docker compose restart                  |
+      |                                                               |
+      +---------------------------------------------------------------+
+
+    permissions: '0644'
+
+runcmd:
+  # Ensure .ssh directory exists with correct permissions
+  # (authorized_keys is managed by DigitalOcean's native SSH key provisioning)
+  - mkdir -p /root/.ssh && chmod 700 /root/.ssh
+
+  # Ensure sshd_config includes the .d directory (Debian 12 fix)
+  - grep -q 'Include /etc/ssh/sshd_config.d' /etc/ssh/sshd_config || sed -i '1i Include /etc/ssh/sshd_config.d/*.conf' /etc/ssh/sshd_config
+
+  # Comment out Port in main sshd_config so sshd_config.d takes precedence (Debian 12 fix)
+  - sed -i 's/^Port /#Port /' /etc/ssh/sshd_config
+
+  # Restart SSH with new configuration
+  - systemctl restart sshd
+
+  # Wait for any background apt processes to finish (DO images run apt on boot)
+  - while fuser /var/lib/dpkg/lock-frontend >/dev/null 2>&1; do echo "Waiting for dpkg lock..."; sleep 5; done
+
+  # Install prerequisites
+  - apt-get update
+  - DEBIAN_FRONTEND=noninteractive apt-get -o DPkg::Lock::Timeout=60 install -y ca-certificates curl gnupg fail2ban ufw unattended-upgrades apt-listchanges vim git
+
+  # Add Docker's official GPG key and repository
+  - install -m 0755 -d /etc/apt/keyrings
+  - curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+  - chmod a+r /etc/apt/keyrings/docker.gpg
+  - echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian $(. /etc/os-release && echo $VERSION_CODENAME) stable" > /etc/apt/sources.list.d/docker.list
+
+  # Install Docker from official repository
+  - apt-get update
+  - DEBIAN_FRONTEND=noninteractive apt-get -o DPkg::Lock::Timeout=60 install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+
+  # Enable and start Docker
+  - systemctl enable docker
+  - systemctl start docker
+
+  # Enable and start fail2ban
+  - systemctl enable fail2ban
+  - systemctl restart fail2ban
+
+  # Configure swap (important for 1GB RAM)
+  - /usr/local/bin/configure-swap.sh
+
+  # Mount the volume
+  - /usr/local/bin/mount-volume.sh
+
+  # Fix ownership for Forgejo container (runs as UID 1000)
+  # This must run AFTER all directories are created to ensure correct permissions
+  - chown -R 1000:1000 /mnt/forgejo/forgejo-data
+
+  # Configure firewall
+  - /usr/local/bin/configure-firewall.sh
+
+  # Generate secrets and create .env
+  - /usr/local/bin/setup-forgejo.sh
+
+  # Wait for DNS to propagate before starting Caddy (for Let's Encrypt)
+  - /usr/local/bin/wait-for-dns.sh
+
+  # Start Forgejo stack (build Caddy with rate-limit plugin, pull others)
+  - cd /opt/forgejo && docker compose build caddy
+  - cd /opt/forgejo && docker compose pull forgejo forgejo-db
+  - cd /opt/forgejo && docker compose up -d
+
+  # Enable unattended upgrades
+  - systemctl enable unattended-upgrades
+  - systemctl start unattended-upgrades
+
+final_message: "Forgejo server fully deployed after $UPTIME seconds. Visit https://${domain}"
diff --git a/devops/terraform/modules/forgejo/main.tf b/devops/terraform/modules/forgejo/main.tf
new file mode 100644
index 0000000..d05ec67
--- /dev/null
+++ b/devops/terraform/modules/forgejo/main.tf
@@ -0,0 +1,97 @@
+# =============================================================================
+# Secret Generation
+# =============================================================================
+
+resource "random_password" "postgres" {
+  length  = 32
+  special = false
+}
+
+resource "random_password" "forgejo_secret_key" {
+  length  = 64
+  special = false
+}
+
+resource "random_password" "forgejo_internal_token" {
+  length  = 64
+  special = false
+}
+
+resource "random_password" "forgejo_jwt_secret" {
+  length  = 64
+  special = false
+}
+
+# =============================================================================
+# Forgejo Volume (Block Storage)
+# =============================================================================
+
+resource "digitalocean_volume" "forgejo" {
+  name                    = "${var.project_name}-forgejo-${var.environment}"
+  region                  = var.region
+  size                    = var.volume_size
+  initial_filesystem_type = "ext4"
+  description             = "Forgejo data volume for ${var.project_name}"
+  tags                    = var.tags
+}
+
+# =============================================================================
+# Forgejo Droplet
+# =============================================================================
+
+resource "digitalocean_droplet" "forgejo" {
+  name     = "${var.project_name}-forgejo-${var.environment}"
+  size     = var.droplet_size
+  image    = var.droplet_image
+  region   = var.region
+  vpc_uuid = var.vpc_uuid
+
+  ssh_keys   = var.ssh_keys
+  backups    = var.enable_backups
+  monitoring = true
+  ipv6       = true
+
+  # Pass cloud-config directly without cloudinit_config wrapper
+  # (cloudinit_config MIME multipart format was being ignored by DigitalOcean)
+  user_data = templatefile("${path.module}/cloud-init.yaml.tpl", {
+    ssh_port               = var.ssh_port
+    git_ssh_port           = var.git_ssh_port
+    vpc_ip_range           = var.vpc_ip_range
+    volume_name            = "${var.project_name}-forgejo-${var.environment}"
+    domain                 = var.domain
+    postgres_password      = random_password.postgres.result
+    forgejo_secret_key     = random_password.forgejo_secret_key.result
+    forgejo_internal_token = random_password.forgejo_internal_token.result
+    forgejo_jwt_secret     = random_password.forgejo_jwt_secret.result
+  })
+
+  tags = var.tags
+
+  lifecycle {
+    create_before_destroy = false
+    ignore_changes        = [user_data]
+  }
+}
+
+# =============================================================================
+# Volume Attachment
+# =============================================================================
+
+resource "digitalocean_volume_attachment" "forgejo" {
+  droplet_id = digitalocean_droplet.forgejo.id
+  volume_id  = digitalocean_volume.forgejo.id
+}
+
+# =============================================================================
+# DNS Record (optional - requires domain to be managed by DigitalOcean)
+# =============================================================================
+
+resource "digitalocean_record" "forgejo" {
+  count = var.manage_dns ? 1 : 0
+
+  domain = var.dns_zone
+  type   = "A"
+  name   = var.dns_record_name
+  value  = digitalocean_droplet.forgejo.ipv4_address
+  ttl    = 600
+}
diff --git a/devops/terraform/modules/forgejo/outputs.tf b/devops/terraform/modules/forgejo/outputs.tf
new file mode 100644
index 0000000..6a39f37
--- /dev/null
+++ b/devops/terraform/modules/forgejo/outputs.tf
@@ -0,0 +1,34 @@
+output "droplet_id" {
+  description = "ID of the Forgejo droplet"
+  value       = digitalocean_droplet.forgejo.id
+}
+
+output "public_ip" {
+  description = "Public IPv4 address of the Forgejo droplet"
+  value       = digitalocean_droplet.forgejo.ipv4_address
+}
+
+output "private_ip" {
+  description = "Private IPv4 address of the Forgejo droplet (VPC)"
+  value       = digitalocean_droplet.forgejo.ipv4_address_private
+}
+
+output "urn" {
+  description = "URN of the Forgejo droplet"
+  value       = digitalocean_droplet.forgejo.urn
+}
+
+output "volume_id" {
+  description = "ID of the Forgejo volume"
+  value       = digitalocean_volume.forgejo.id
+}
+
+output "volume_name" {
+  description = "Name of the Forgejo volume"
+  value       = digitalocean_volume.forgejo.name
+}
+
+output "dns_record_fqdn" {
+  description = "FQDN of the DNS record (if managed)"
+  value       = var.manage_dns ? digitalocean_record.forgejo[0].fqdn : null
+}
diff --git a/devops/terraform/modules/forgejo/variables.tf b/devops/terraform/modules/forgejo/variables.tf
new file mode 100644
index 0000000..ffee337
--- /dev/null
+++ b/devops/terraform/modules/forgejo/variables.tf
@@ -0,0 +1,99 @@
+variable "project_name" {
+  description = "Project name"
+  type        = string
+}
+
+variable "environment" {
+  description = "Environment name"
+  type        = string
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+}
+
+variable "vpc_uuid" {
+  description = "UUID of the VPC"
+  type        = string
+}
+
+variable "vpc_ip_range" {
+  description = "IP range of the VPC (CIDR notation)"
+  type        = string
+}
+
+variable "ssh_keys" {
+  description = "List of SSH key IDs to add to the droplet"
+  type        = list(string)
+}
+
+variable "droplet_size" {
+  description = "Size slug for the droplet"
+  type        = string
+  default     = "s-1vcpu-1gb-intel"
+}
+
+variable "droplet_image" {
+  description = "Image slug for the droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+variable "volume_size" {
+  description = "Size of the data volume in GB"
+  type        = number
+  default     = 50
+}
+
+variable "ssh_port" {
+  description = "System SSH port (non-standard, VPC only)"
+  type        = number
+  default     = 52913
+}
+
+variable "git_ssh_port" {
+  description = "Git SSH port (public)"
+  type        = number
+  default     = 2222
+}
+
+variable "domain" {
+  description = "Domain name for Forgejo"
+  type        = string
+  default     = "qbit.realms.pub"
+}
+
+variable "enable_backups" {
+  description = "Enable automated backups"
+  type        = bool
+  default     = true
+}
+
+variable "tags" {
+  description = "Tags to apply to resources"
+  type        = list(string)
+  default     = []
+}
+
+# =============================================================================
+# DNS Configuration (optional)
+# =============================================================================
+
+variable "manage_dns" {
+  description = "Whether to manage DNS record via DigitalOcean"
+  type        = bool
+  default     = false
+}
+
+variable "dns_zone" {
+  description = "DNS zone (base domain) managed by DigitalOcean (e.g., realms.pub)"
+  type        = string
+  default     = ""
+}
+
+variable "dns_record_name" {
+  description = "DNS record name (subdomain, e.g., 'qbit' for qbit.realms.pub)"
+  type        = string
+  default     = ""
+}
diff --git a/devops/terraform/modules/forgejo/versions.tf b/devops/terraform/modules/forgejo/versions.tf
new file mode 100644
index 0000000..5b21b66
--- /dev/null
+++ b/devops/terraform/modules/forgejo/versions.tf
@@ -0,0 +1,12 @@
+terraform {
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = ">= 2.34"
+    }
+    cloudinit = {
+      source  = "hashicorp/cloudinit"
+      version = ">= 2.3"
+    }
+  }
+}
diff --git a/devops/terraform/modules/jump_host/cloud-init.yaml.tpl b/devops/terraform/modules/jump_host/cloud-init.yaml.tpl
new file mode 100644
index 0000000..a36ae11
--- /dev/null
+++ b/devops/terraform/modules/jump_host/cloud-init.yaml.tpl
@@ -0,0 +1,175 @@
+#cloud-config
+
+# =============================================================================
+# Jump Host (Bastion) Cloud-Init Configuration
+# Minimal attack surface - SSH only, no Docker
+# =============================================================================
+
+# NOTE: We install packages via runcmd instead of packages: section
+# because DigitalOcean's base image cloud-init can interfere with the packages module
+
+# SSH hardening configuration
+write_files:
+  # SSH daemon configuration
+  - path: /etc/ssh/sshd_config.d/99-hardening.conf
+    content: |
+      # Non-standard port
+      Port ${ssh_port}
+
+      # Authentication hardening
+      PermitRootLogin prohibit-password
+      PasswordAuthentication no
+      PubkeyAuthentication yes
+      AuthenticationMethods publickey
+
+      # Security settings
+      MaxAuthTries 3
+      LoginGraceTime 30
+      PermitEmptyPasswords no
+      X11Forwarding no
+      AllowTcpForwarding no
+      AllowAgentForwarding no
+      PermitUserEnvironment no
+      MaxSessions 3
+
+      # Session settings
+      ClientAliveInterval 300
+      ClientAliveCountMax 2
+
+      # Logging
+      LogLevel VERBOSE
+    permissions: '0644'
+
+  # Fail2ban SSH jail configuration
+  - path: /etc/fail2ban/jail.d/sshd.local
+    content: |
+      [sshd]
+      enabled = true
+      port = ${ssh_port}
+      filter = sshd
+      logpath = /var/log/auth.log
+      backend = systemd
+      bantime = 1h
+      findtime = 10m
+      maxretry = 3
+    permissions: '0644'
+
+  # UFW configuration script
+  - path: /usr/local/bin/configure-firewall.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      # Reset UFW
+      ufw --force reset
+
+      # Default policies
+      ufw default deny incoming
+      ufw default deny outgoing
+
+      # Inbound: SSH on non-standard port
+      ufw allow in ${ssh_port}/tcp comment 'SSH'
+
+      # Inbound: VPC traffic
+      ufw allow in from ${vpc_ip_range} comment 'VPC internal'
+
+      # Outbound: Only necessary traffic (matching DO firewall)
+      ufw allow out 53/tcp comment 'DNS'
+      ufw allow out 53/udp comment 'DNS'
+      ufw allow out 80/tcp comment 'HTTP'
+      ufw allow out 443/tcp comment 'HTTPS'
+      ufw allow out 123/udp comment 'NTP'
+      ufw allow out to ${vpc_ip_range} comment 'VPC'
+
+      # Enable logging for security audit
+      ufw logging high
+
+      # Enable UFW
+      ufw --force enable
+
+      echo "Firewall configured successfully"
+    permissions: '0755'
+
+  # Unattended upgrades configuration
+  - path: /etc/apt/apt.conf.d/50unattended-upgrades
+    content: |
+      Unattended-Upgrade::Allowed-Origins {
+          "$${distro_id}:$${distro_codename}";
+          "$${distro_id}:$${distro_codename}-security";
+          "$${distro_id}:$${distro_codename}-updates";
+      };
+      Unattended-Upgrade::AutoFixInterruptedDpkg "true";
+      Unattended-Upgrade::MinimalSteps "true";
+      Unattended-Upgrade::Remove-Unused-Dependencies "true";
+      Unattended-Upgrade::Automatic-Reboot "false";
+    permissions: '0644'
+
+  # Auto-upgrades configuration
+  - path: /etc/apt/apt.conf.d/20auto-upgrades
+    content: |
+      APT::Periodic::Update-Package-Lists "1";
+      APT::Periodic::Unattended-Upgrade "1";
+      APT::Periodic::AutocleanInterval "7";
+    permissions: '0644'
+
+  # Message of the day
+  - path: /etc/motd
+    content: |
+
+      ╔═══════════════════════════════════════════════════════════════╗
+      ║                   JUMP HOST / BASTION                         ║
+      ║                                                               ║
+      ║  This is a restricted access server.                          ║
+      ║  All connections are logged and monitored.                    ║
+      ║                                                               ║
+      ║  Use this host to access internal infrastructure:             ║
+      ║    ssh -p 52913 root@10.10.0.x                                ║
+      ║                                                               ║
+      ╚═══════════════════════════════════════════════════════════════╝
+
+    permissions: '0644'
+
+  # Internal SSH private key (for accessing Forgejo and other internal servers)
+  - path: /root/.ssh/id_ed25519
+    content: |
+      ${indent(6, internal_private_key)}
+    permissions: '0600'
+
+  # SSH config for internal servers
+  - path: /root/.ssh/config
+    content: |
+      Host 10.10.0.*
+        StrictHostKeyChecking accept-new
+        IdentityFile ~/.ssh/id_ed25519
+        User root
+    permissions: '0600'
+
+runcmd:
+  # Ensure sshd_config includes the .d directory (Debian 12 fix)
+  - grep -q 'Include /etc/ssh/sshd_config.d' /etc/ssh/sshd_config || sed -i '1i Include /etc/ssh/sshd_config.d/*.conf' /etc/ssh/sshd_config
+
+  # Comment out Port in main sshd_config so sshd_config.d takes precedence (Debian 12 fix)
+  - sed -i 's/^Port /#Port /' /etc/ssh/sshd_config
+
+  # Restart SSH with new configuration
+  - systemctl restart sshd
+
+  # Wait for any background apt processes to finish (DO images run apt on boot)
+  - while fuser /var/lib/dpkg/lock-frontend >/dev/null 2>&1; do echo "Waiting for dpkg lock..."; sleep 5; done
+
+  # Install all required packages (more reliable than packages: section on DO images)
+  - apt-get update
+  - DEBIAN_FRONTEND=noninteractive apt-get -o DPkg::Lock::Timeout=60 install -y fail2ban ufw unattended-upgrades apt-listchanges curl vim
+
+  # Enable and start fail2ban
+  - systemctl enable fail2ban
+  - systemctl restart fail2ban
+
+  # Configure firewall
+  - /usr/local/bin/configure-firewall.sh
+
+  # Enable unattended upgrades
+  - systemctl enable unattended-upgrades
+  - systemctl start unattended-upgrades
+
+final_message: "Jump host initialization complete after $UPTIME seconds"
diff --git a/devops/terraform/modules/jump_host/main.tf b/devops/terraform/modules/jump_host/main.tf
new file mode 100644
index 0000000..8e042ea
--- /dev/null
+++ b/devops/terraform/modules/jump_host/main.tf
@@ -0,0 +1,39 @@
+# =============================================================================
+# Jump Host (Bastion) Droplet
+# =============================================================================
+
+data "cloudinit_config" "jump_host" {
+  gzip          = false
+  base64_encode = false
+
+  part {
+    content_type = "text/cloud-config"
+    content = templatefile("${path.module}/cloud-init.yaml.tpl", {
+      ssh_port             = var.ssh_port
+      vpc_ip_range         = var.vpc_ip_range
+      internal_private_key = var.internal_private_key
+    })
+  }
+}
+
+resource "digitalocean_droplet" "jump_host" {
+  name     = "${var.project_name}-jump-${var.environment}"
+  size     = var.droplet_size
+  image    = var.droplet_image
+  region   = var.region
+  vpc_uuid = var.vpc_uuid
+
+  ssh_keys   = var.ssh_keys
+  backups    = var.enable_backups
+  monitoring = true
+  ipv6       = true
+
+  user_data = data.cloudinit_config.jump_host.rendered
+
+  tags = var.tags
+
+  lifecycle {
+    create_before_destroy = false
+    ignore_changes        = [user_data]  # Don't recreate on cloud-init changes
+  }
+}
diff --git a/devops/terraform/modules/jump_host/outputs.tf b/devops/terraform/modules/jump_host/outputs.tf
new file mode 100644
index 0000000..c214893
--- /dev/null
+++ b/devops/terraform/modules/jump_host/outputs.tf
@@ -0,0 +1,19 @@
+output "droplet_id" {
+  description = "ID of the jump host droplet"
+  value       = digitalocean_droplet.jump_host.id
+}
+
+output "public_ip" {
+  description = "Public IPv4 address of the jump host"
+  value       = digitalocean_droplet.jump_host.ipv4_address
+}
+
+output "private_ip" {
+  description = "Private IPv4 address of the jump host (VPC)"
+  value       = digitalocean_droplet.jump_host.ipv4_address_private
+}
+
+output "urn" {
+  description = "URN of the jump host droplet"
+  value       = digitalocean_droplet.jump_host.urn
+}
diff --git a/devops/terraform/modules/jump_host/variables.tf b/devops/terraform/modules/jump_host/variables.tf
new file mode 100644
index 0000000..8d95964
--- /dev/null
+++ b/devops/terraform/modules/jump_host/variables.tf
@@ -0,0 +1,65 @@
+variable "project_name" {
+  description = "Project name"
+  type        = string
+}
+
+variable "environment" {
+  description = "Environment name"
+  type        = string
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+}
+
+variable "vpc_uuid" {
+  description = "UUID of the VPC"
+  type        = string
+}
+
+variable "vpc_ip_range" {
+  description = "IP range of the VPC (CIDR notation)"
+  type        = string
+}
+
+variable "ssh_keys" {
+  description = "List of SSH key IDs to add to the droplet"
+  type        = list(string)
+}
+
+variable "droplet_size" {
+  description = "Size slug for the droplet"
+  type        = string
+  default     = "s-1vcpu-512mb-10gb"
+}
+
+variable "droplet_image" {
+  description = "Image slug for the droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+variable "ssh_port" {
+  description = "SSH port (non-standard for security)"
+  type        = number
+  default     = 49822
+}
+
+variable "enable_backups" {
+  description = "Enable automated backups"
+  type        = bool
+  default     = true
+}
+
+variable "tags" {
+  description = "Tags to apply to the droplet"
+  type        = list(string)
+  default     = []
+}
+
+variable "internal_private_key" {
+  description = "Private SSH key for accessing internal servers (Forgejo, etc.)"
+  type        = string
+  sensitive   = true
+}
diff --git a/devops/terraform/modules/jump_host/versions.tf b/devops/terraform/modules/jump_host/versions.tf
new file mode 100644
index 0000000..5b21b66
--- /dev/null
+++ b/devops/terraform/modules/jump_host/versions.tf
@@ -0,0 +1,12 @@
+terraform {
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = ">= 2.34"
+    }
+    cloudinit = {
+      source  = "hashicorp/cloudinit"
+      version = ">= 2.3"
+    }
+  }
+}
diff --git a/devops/terraform/modules/ssh_keys/main.tf b/devops/terraform/modules/ssh_keys/main.tf
new file mode 100644
index 0000000..4819dc7
--- /dev/null
+++ b/devops/terraform/modules/ssh_keys/main.tf
@@ -0,0 +1,46 @@
+# =============================================================================
+# Admin SSH Keys (provided by user)
+# =============================================================================
+
+resource "digitalocean_ssh_key" "admin" {
+  for_each = var.admin_ssh_public_keys
+
+  name       = "${var.project_name}-${var.environment}-${each.key}"
+  public_key = each.value
+}
+
+# =============================================================================
+# Deploy Key (auto-generated for Forgejo Actions CI/CD)
+# =============================================================================
+
+resource "tls_private_key" "deploy" {
+  algorithm = "ED25519"
+}
+
+resource "digitalocean_ssh_key" "deploy" {
+  name       = "${var.project_name}-${var.environment}-deploy-key"
+  public_key = tls_private_key.deploy.public_key_openssh
+}
+
+# =============================================================================
+# Save deploy key locally for initial setup (optional)
+# =============================================================================
+
+resource "local_sensitive_file" "deploy_private_key" {
+  content         = tls_private_key.deploy.private_key_openssh
+  filename        = "${path.root}/.secrets/deploy_key_${var.environment}"
+  file_permission = "0600"
+}
+
+# =============================================================================
+# Internal VPC Key (jump host → internal servers like Forgejo)
+# =============================================================================
+
+resource "tls_private_key" "internal" {
+  algorithm = "ED25519"
+}
+
+resource "digitalocean_ssh_key" "internal" {
+  name       = "${var.project_name}-${var.environment}-internal-key"
+  public_key = tls_private_key.internal.public_key_openssh
+}
diff --git a/devops/terraform/modules/ssh_keys/outputs.tf b/devops/terraform/modules/ssh_keys/outputs.tf
new file mode 100644
index 0000000..6a2af92
--- /dev/null
+++ b/devops/terraform/modules/ssh_keys/outputs.tf
@@ -0,0 +1,54 @@
+output "admin_ssh_key_ids" {
+  description = "IDs of admin SSH keys"
+  value       = [for key in digitalocean_ssh_key.admin : key.id]
+}
+
+output "deploy_ssh_key_id" {
+  description = "ID of the deploy SSH key"
+  value       = digitalocean_ssh_key.deploy.id
+}
+
+output "all_ssh_key_ids" {
+  description = "All SSH key IDs (admin + deploy)"
+  value = concat(
+    [for key in digitalocean_ssh_key.admin : key.id],
+    [digitalocean_ssh_key.deploy.id]
+  )
+}
+
+output "internal_ssh_key_id" {
+  description = "ID of the internal VPC SSH key"
+  value       = digitalocean_ssh_key.internal.id
+}
+
+output "forgejo_ssh_key_ids" {
+  description = "SSH key IDs for Forgejo (internal only - access via jump host)"
+  value       = [digitalocean_ssh_key.internal.id]
+}
+
+output "deploy_key_fingerprint" {
+  description = "Fingerprint of the deploy key"
+  value       = digitalocean_ssh_key.deploy.fingerprint
+}
+
+output "deploy_private_key" {
+  description = "Private key for deployment (add to Forgejo secrets)"
+  value       = tls_private_key.deploy.private_key_openssh
+  sensitive   = true
+}
+
+output "deploy_public_key" {
+  description = "Public key for deployment"
+  value       = tls_private_key.deploy.public_key_openssh
+}
+
+output "internal_private_key" {
+  description = "Private key for jump host → internal servers"
+  value       = tls_private_key.internal.private_key_openssh
+  sensitive   = true
+}
+
+output "internal_public_key" {
+  description = "Public key for internal server authentication"
+  value       = tls_private_key.internal.public_key_openssh
+}
diff --git a/devops/terraform/modules/ssh_keys/variables.tf b/devops/terraform/modules/ssh_keys/variables.tf
new file mode 100644
index 0000000..ca15b27
--- /dev/null
+++ b/devops/terraform/modules/ssh_keys/variables.tf
@@ -0,0 +1,15 @@
+variable "project_name" {
+  description = "Project name"
+  type        = string
+}
+
+variable "environment" {
+  description = "Environment name"
+  type        = string
+}
+
+variable "admin_ssh_public_keys" {
+  description = "Map of admin SSH public keys (name => public_key)"
+  type        = map(string)
+  default     = {}
+}
diff --git a/devops/terraform/modules/ssh_keys/versions.tf b/devops/terraform/modules/ssh_keys/versions.tf
new file mode 100644
index 0000000..14c0d40
--- /dev/null
+++ b/devops/terraform/modules/ssh_keys/versions.tf
@@ -0,0 +1,12 @@
+terraform {
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = ">= 2.34"
+    }
+    tls = {
+      source  = "hashicorp/tls"
+      version = ">= 4.0"
+    }
+  }
+}
diff --git a/devops/terraform/modules/vpc/main.tf b/devops/terraform/modules/vpc/main.tf
new file mode 100644
index 0000000..b697865
--- /dev/null
+++ b/devops/terraform/modules/vpc/main.tf
@@ -0,0 +1,10 @@
+# =============================================================================
+# VPC Resource
+# =============================================================================
+
+resource "digitalocean_vpc" "main" {
+  name        = var.name
+  region      = var.region
+  ip_range    = var.ip_range
+  description = var.description
+}
diff --git a/devops/terraform/modules/vpc/outputs.tf b/devops/terraform/modules/vpc/outputs.tf
new file mode 100644
index 0000000..776cb0e
--- /dev/null
+++ b/devops/terraform/modules/vpc/outputs.tf
@@ -0,0 +1,14 @@
+output "vpc_id" {
+  description = "ID of the VPC"
+  value       = digitalocean_vpc.main.id
+}
+
+output "vpc_urn" {
+  description = "URN of the VPC"
+  value       = digitalocean_vpc.main.urn
+}
+
+output "vpc_ip_range" {
+  description = "IP range of the VPC"
+  value       = digitalocean_vpc.main.ip_range
+}
diff --git a/devops/terraform/modules/vpc/variables.tf b/devops/terraform/modules/vpc/variables.tf
new file mode 100644
index 0000000..0698892
--- /dev/null
+++ b/devops/terraform/modules/vpc/variables.tf
@@ -0,0 +1,20 @@
+variable "name" {
+  description = "Name of the VPC"
+  type        = string
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+}
+
+variable "ip_range" {
+  description = "IP range for the VPC (CIDR notation)"
+  type        = string
+}
+
+variable "description" {
+  description = "Description of the VPC"
+  type        = string
+  default     = ""
+}
diff --git a/devops/terraform/modules/vpc/versions.tf b/devops/terraform/modules/vpc/versions.tf
new file mode 100644
index 0000000..59fb163
--- /dev/null
+++ b/devops/terraform/modules/vpc/versions.tf
@@ -0,0 +1,8 @@
+terraform {
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = ">= 2.34"
+    }
+  }
+}
diff --git a/devops/terraform/outputs.tf b/devops/terraform/outputs.tf
new file mode 100644
index 0000000..e5fb3c1
--- /dev/null
+++ b/devops/terraform/outputs.tf
@@ -0,0 +1,144 @@
+# =============================================================================
+# VPC Outputs
+# =============================================================================
+
+output "vpc_id" {
+  description = "ID of the VPC"
+  value       = module.vpc.vpc_id
+}
+
+output "vpc_urn" {
+  description = "URN of the VPC"
+  value       = module.vpc.vpc_urn
+}
+
+# =============================================================================
+# Jump Host Outputs
+# =============================================================================
+
+output "jump_host_id" {
+  description = "ID of the jump host droplet"
+  value       = module.jump_host.droplet_id
+}
+
+output "jump_host_public_ip" {
+  description = "Public IPv4 address of the jump host"
+  value       = module.jump_host.public_ip
+}
+
+output "jump_host_private_ip" {
+  description = "Private IPv4 address of the jump host (VPC)"
+  value       = module.jump_host.private_ip
+}
+
+output "jump_host_ssh_port" {
+  description = "SSH port for the jump host"
+  value       = var.jump_host_ssh_port
+}
+
+# =============================================================================
+# Forgejo Outputs
+# =============================================================================
+
+output "forgejo_droplet_id" {
+  description = "ID of the Forgejo droplet"
+  value       = module.forgejo.droplet_id
+}
+
+output "forgejo_public_ip" {
+  description = "Public IPv4 address of the Forgejo droplet"
+  value       = module.forgejo.public_ip
+}
+
+output "forgejo_private_ip" {
+  description = "Private IPv4 address of the Forgejo droplet (VPC)"
+  value       = module.forgejo.private_ip
+}
+
+output "forgejo_volume_id" {
+  description = "ID of the Forgejo volume"
+  value       = module.forgejo.volume_id
+}
+
+output "forgejo_ssh_port" {
+  description = "System SSH port for Forgejo (VPC only)"
+  value       = var.forgejo_ssh_port
+}
+
+output "forgejo_git_ssh_port" {
+  description = "Git SSH port for Forgejo (public)"
+  value       = var.forgejo_git_ssh_port
+}
+
+output "forgejo_domain" {
+  description = "Domain name for Forgejo"
+  value       = var.forgejo_domain
+}
+
+# =============================================================================
+# SSH Key Outputs
+# =============================================================================
+
+output "deploy_key_fingerprint" {
+  description = "Fingerprint of the deploy key (for Forgejo Actions)"
+  value       = module.ssh_keys.deploy_key_fingerprint
+}
+
+output "deploy_private_key" {
+  description = "Private key for Forgejo Actions deployments (store securely!)"
+  value       = module.ssh_keys.deploy_private_key
+  sensitive   = true
+}
+
+output "internal_public_key" {
+  description = "Public key for internal VPC access (jump host -> internal servers)"
+  value       = module.ssh_keys.internal_public_key
+}
+
+# =============================================================================
+# Firewall Outputs
+# =============================================================================
+
+output "jump_host_firewall_id" {
+  description = "ID of the jump host firewall"
+  value       = module.firewalls.jump_host_firewall_id
+}
+
+output "forgejo_firewall_id" {
+  description = "ID of the Forgejo firewall"
+  value       = module.firewalls.forgejo_firewall_id
+}
+
+# =============================================================================
+# Connection Info
+# =============================================================================
+
+output "ssh_config" {
+  description = "SSH config snippet for connecting to the infrastructure"
+  value       = <<-EOT
+    # Add to ~/.ssh/config (Windows: C:\Users\<username>\.ssh\config)
+
+    Host realms-jump
+        HostName ${module.jump_host.public_ip}
+        Port ${var.jump_host_ssh_port}
+        User root
+        IdentityFile ~/.ssh/id_ed25519
+
+    Host realms-forgejo
+        HostName ${module.forgejo.private_ip}
+        Port ${var.forgejo_ssh_port}
+        User root
+        ProxyJump realms-jump
+        IdentityFile ~/.ssh/id_ed25519
+  EOT
+}
+
+output "dns_record_info" {
+  description = "DNS record to create for Forgejo"
+  value       = <<-EOT
+    Create an A record:
+      Name: qbit (for qbit.realms.pub)
+      Value: ${module.forgejo.public_ip}
+      TTL: 300
+  EOT
+}
diff --git a/devops/terraform/terraform.tfvars.example b/devops/terraform/terraform.tfvars.example
new file mode 100644
index 0000000..d89b739
--- /dev/null
+++ b/devops/terraform/terraform.tfvars.example
@@ -0,0 +1,76 @@
+# =============================================================================
+# DigitalOcean Terraform Configuration
+# =============================================================================
+# Copy this file to terraform.tfvars and fill in your values
+# NEVER commit terraform.tfvars to version control!
+#
+# Set the DO token via environment variable:
+#   export TF_VAR_do_token="dop_v1_your_token_here"
+# =============================================================================
+
+# =============================================================================
+# Project Configuration
+# =============================================================================
+
+project_name = "realms"
+environment  = "production"
+region       = "nyc3"
+
+# =============================================================================
+# VPC Configuration
+# =============================================================================
+
+vpc_ip_range = "10.10.0.0/16"
+
+# =============================================================================
+# SSH Configuration
+# =============================================================================
+
+# Add your admin SSH public key(s) here
+# Generate with: ssh-keygen -t ed25519 -C "your_email@example.com"
+admin_ssh_public_keys = {
+  # "admin-name" = "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAINlczdk2KKjY2CyYV1Ql8enjRn8gpBBgSLmbbCUyG5Qs admin@doom.tube"
+}
+
+# SSH ports (non-standard for security)
+jump_host_ssh_port   = 49822  # Jump host public SSH
+forgejo_ssh_port     = 52913  # Forgejo system SSH (VPC only)
+forgejo_git_ssh_port = 2222   # Forgejo Git SSH (public)
+
+# =============================================================================
+# Jump Host Configuration
+# =============================================================================
+
+jump_host_size  = "s-1vcpu-512mb-10gb"  # $4/mo
+jump_host_image = "debian-12-x64"
+
+# =============================================================================
+# Forgejo Configuration
+# =============================================================================
+
+forgejo_droplet_size  = "s-1vcpu-1gb-intel"  # $7/mo - 1GB RAM, 1 Intel vCPU
+forgejo_droplet_image = "debian-12-x64"
+forgejo_volume_size   = 50  # GB for repositories and LFS
+forgejo_domain        = "qbit.realms.pub"
+
+# =============================================================================
+# DNS Configuration (requires domain to be managed by DigitalOcean)
+# =============================================================================
+
+# Set to true to automatically create/update A record for Forgejo
+manage_dns = true
+
+# Base domain managed by DigitalOcean DNS
+dns_zone = "realms.pub"
+
+# =============================================================================
+# Backup Configuration
+# =============================================================================
+
+enable_droplet_backups = true
+
+# =============================================================================
+# Additional Tags
+# =============================================================================
+
+tags = []
diff --git a/devops/terraform/variables.tf b/devops/terraform/variables.tf
new file mode 100644
index 0000000..bb239ad
--- /dev/null
+++ b/devops/terraform/variables.tf
@@ -0,0 +1,150 @@
+# =============================================================================
+# Provider Configuration
+# =============================================================================
+
+variable "do_token" {
+  description = "DigitalOcean API token"
+  type        = string
+  sensitive   = true
+}
+
+# =============================================================================
+# Project Configuration
+# =============================================================================
+
+variable "project_name" {
+  description = "Project name used for resource naming"
+  type        = string
+  default     = "realms"
+}
+
+variable "environment" {
+  description = "Environment name (production, staging, development)"
+  type        = string
+  default     = "production"
+
+  validation {
+    condition     = contains(["production", "staging", "development"], var.environment)
+    error_message = "Environment must be one of: production, staging, development."
+  }
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+  default     = "nyc3"
+}
+
+# =============================================================================
+# VPC Configuration
+# =============================================================================
+
+variable "vpc_ip_range" {
+  description = "IP range for the VPC (CIDR notation)"
+  type        = string
+  default     = "10.10.0.0/16"
+}
+
+# =============================================================================
+# SSH Configuration
+# =============================================================================
+
+variable "admin_ssh_public_keys" {
+  description = "Map of admin SSH public keys (name => public_key)"
+  type        = map(string)
+  default     = {}
+}
+
+variable "jump_host_ssh_port" {
+  description = "SSH port for the jump host (non-standard for security)"
+  type        = number
+  default     = 49822
+}
+
+variable "forgejo_ssh_port" {
+  description = "System SSH port for Forgejo (VPC only, non-standard)"
+  type        = number
+  default     = 52913
+}
+
+variable "forgejo_git_ssh_port" {
+  description = "Git SSH port for Forgejo (public)"
+  type        = number
+  default     = 2222
+}
+
+# =============================================================================
+# Jump Host Configuration
+# =============================================================================
+
+variable "jump_host_size" {
+  description = "Size slug for the jump host droplet"
+  type        = string
+  default     = "s-1vcpu-512mb-10gb"
+}
+
+variable "jump_host_image" {
+  description = "Image slug for the jump host droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+# =============================================================================
+# Forgejo Configuration
+# =============================================================================
+
+variable "forgejo_droplet_size" {
+  description = "Size slug for the Forgejo droplet"
+  type        = string
+  default     = "s-1vcpu-1gb-intel"
+}
+
+variable "forgejo_droplet_image" {
+  description = "Image slug for the Forgejo droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+variable "forgejo_volume_size" {
+  description = "Size of the Forgejo data volume in GB"
+  type        = number
+  default     = 50
+}
+
+variable "forgejo_domain" {
+  description = "Domain name for Forgejo (e.g., qbit.realms.pub)"
+  type        = string
+  default     = "qbit.realms.pub"
+}
+
+variable "manage_dns" {
+  description = "Whether to manage DNS records via DigitalOcean"
+  type        = bool
+  default     = false
+}
+
+variable "dns_zone" {
+  description = "DNS zone (base domain) managed by DigitalOcean (e.g., realms.pub)"
+  type        = string
+  default     = "realms.pub"
+}
+
+# =============================================================================
+# Backup Configuration
+# =============================================================================
+
+variable "enable_droplet_backups" {
+  description = "Enable automated droplet backups"
+  type        = bool
+  default     = true
+}
+
+# =============================================================================
+# Tags
+# =============================================================================
+
+variable "tags" {
+  description = "Additional tags to apply to resources"
+  type        = list(string)
+  default     = []
+}
diff --git a/devops/terraform/versions.tf b/devops/terraform/versions.tf
new file mode 100644
index 0000000..3c81d3a
--- /dev/null
+++ b/devops/terraform/versions.tf
@@ -0,0 +1,34 @@
+# =============================================================================
+# Terraform and Provider Version Constraints
+# =============================================================================
+
+terraform {
+  required_version = ">= 1.5.0"
+
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = "~> 2.34"
+    }
+    tls = {
+      source  = "hashicorp/tls"
+      version = "~> 4.0"
+    }
+    local = {
+      source  = "hashicorp/local"
+      version = "~> 2.4"
+    }
+    cloudinit = {
+      source  = "hashicorp/cloudinit"
+      version = "~> 2.3"
+    }
+    random = {
+      source  = "hashicorp/random"
+      version = "~> 3.6"
+    }
+  }
+}
+
+provider "digitalocean" {
+  token = var.do_token
+}
diff --git a/docker b/docker
deleted file mode 100644
index e69de29..0000000
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
new file mode 100644
index 0000000..a93ca18
--- /dev/null
+++ b/docker-compose.prod.yml
@@ -0,0 +1,231 @@
+# =============================================================================
+# Realms Production Docker Compose
+# =============================================================================
+# Uses pre-built images from Forgejo registry (qbit.realms.pub)
+# Deployed to /opt/realms/ on production server
+# =============================================================================
+
+services:
+  postgres:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: streaming
+      POSTGRES_USER: streamuser
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U streamuser -d streaming"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - backend
+
+  redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "-a", "${REDIS_PASSWORD}", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - backend
+
+  ovenmediaengine:
+    image: airensoft/ovenmediaengine:latest
+    restart: unless-stopped
+    ports:
+      - "1935:1935"           # RTMP
+      - "9999:9999/udp"       # SRT
+      - "3333:3333"           # WebRTC Signaling
+      - "3334:3334"           # WebRTC Signaling TCP
+      - "3478:3478"           # STUN/TURN
+      - "10000-10009:10000-10009/udp" # WebRTC ICE Candidates
+    volumes:
+      - ./Server.xml:/opt/ovenmediaengine/bin/origin_conf/Server.xml
+      - ome_logs:/var/log/ovenmediaengine
+    environment:
+      OME_API_PORT: 8081
+      OME_API_ACCESS_TOKEN: ${OME_API_TOKEN}
+    networks:
+      - backend
+      - frontend
+
+  drogon-backend:
+    image: qbit.realms.pub/realms/backend:latest
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    environment:
+      DB_HOST: postgres
+      DB_NAME: streaming
+      DB_USER: streamuser
+      DB_PASS: ${DB_PASSWORD}
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
+      JWT_SECRET: ${JWT_SECRET}
+      OME_API_URL: http://ovenmediaengine:8081
+      OME_API_TOKEN: ${OME_API_TOKEN}
+    volumes:
+      - ./config.json:/app/config.json
+      - uploads:/app/uploads
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080/api/health"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    networks:
+      - backend
+
+  chat-service:
+    image: qbit.realms.pub/realms/chat-service:latest
+    restart: unless-stopped
+    depends_on:
+      redis:
+        condition: service_healthy
+      drogon-backend:
+        condition: service_healthy
+    environment:
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
+      JWT_SECRET: ${JWT_SECRET}
+    # Config is baked into the Docker image
+    healthcheck:
+      test: ["CMD-SHELL", "curl -s http://localhost:8081/ > /dev/null 2>&1 || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
+    networks:
+      - backend
+
+  nakama:
+    image: registry.heroiclabs.com/heroiclabs/nakama:3.21.1
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    entrypoint:
+      - "/bin/sh"
+      - "-c"
+      - |
+        set -e
+        apt-get update >/dev/null 2>&1 && apt-get install -y postgresql-client >/dev/null 2>&1 || true
+        PGPASSWORD=$DB_PASSWORD psql -h postgres -U streamuser -d postgres -tc "SELECT 1 FROM pg_database WHERE datname = 'nakama'" | grep -q 1 || PGPASSWORD=$DB_PASSWORD psql -h postgres -U streamuser -d postgres -c "CREATE DATABASE nakama"
+        /nakama/nakama migrate up --database.address "streamuser:$DB_PASSWORD@postgres:5432/nakama?sslmode=disable"
+        exec /nakama/nakama \
+          --name realms-nakama \
+          --database.address "streamuser:$DB_PASSWORD@postgres:5432/nakama?sslmode=disable" \
+          --socket.server_key "$NAKAMA_SERVER_KEY" \
+          --session.token_expiry_sec 86400 \
+          --runtime.env "JWT_SECRET=$JWT_SECRET" \
+          --console.username admin \
+          --console.password "$NAKAMA_CONSOLE_PASSWORD" \
+          --logger.level INFO
+    environment:
+      - JWT_SECRET=${JWT_SECRET}
+      - NAKAMA_CONSOLE_PASSWORD=${NAKAMA_CONSOLE_PASSWORD}
+      - NAKAMA_SERVER_KEY=${NAKAMA_SERVER_KEY}
+      - DB_PASSWORD=${DB_PASSWORD}
+    # Custom modules can be baked into a custom nakama image if needed
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7350/healthcheck"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    networks:
+      - backend
+      - frontend
+
+  openresty:
+    image: qbit.realms.pub/realms/openresty:latest
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+      - "8088:8088"           # HLS/LLHLS proxy with CORS
+    depends_on:
+      drogon-backend:
+        condition: service_healthy
+      chat-service:
+        condition: service_healthy
+      ovenmediaengine:
+        condition: service_started
+      redis:
+        condition: service_healthy
+      nakama:
+        condition: service_started
+    environment:
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
+      BACKEND_URL: http://drogon-backend:8080
+      CHAT_URL: http://chat-service:8081
+      OME_URL: http://ovenmediaengine:8081
+      JWT_SECRET: ${JWT_SECRET}
+    volumes:
+      - uploads:/app/uploads:ro
+      - letsencrypt_data:/etc/letsencrypt:ro
+      - certbot_webroot:/var/www/certbot:ro
+    networks:
+      - frontend
+      - backend
+
+  sveltekit:
+    image: qbit.realms.pub/realms/frontend:latest
+    restart: unless-stopped
+    depends_on:
+      openresty:
+        condition: service_started
+    environment:
+      NODE_ENV: production
+    networks:
+      - frontend
+
+  certbot:
+    image: certbot/certbot:latest
+    restart: unless-stopped
+    volumes:
+      - letsencrypt_data:/etc/letsencrypt
+      - certbot_webroot:/var/www/certbot
+    entrypoint: ["/bin/sh", "-c"]
+    command:
+      - |
+        trap exit TERM
+        while :; do
+          certbot renew --webroot --webroot-path=/var/www/certbot --quiet
+          sleep 12h & wait $$!
+        done
+    networks:
+      - backend
+
+networks:
+  frontend:
+    driver: bridge
+  backend:
+    driver: bridge
+
+volumes:
+  postgres_data:
+  redis_data:
+  ome_logs:
+  uploads:
+  letsencrypt_data:
+  certbot_webroot:
diff --git a/docker-compose.yml b/docker-compose.yml
index 07901fc..cd61e29 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,12 +1,10 @@
-version: '3.8'
-
 services:
   postgres:
     image: postgres:16-alpine
     environment:
       POSTGRES_DB: streaming
       POSTGRES_USER: streamuser
-      POSTGRES_PASSWORD: streampass  # Fixed: hardcoded for consistency
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
     volumes:
       - postgres_data:/var/lib/postgresql/data
       - ./database/init.sql:/docker-entrypoint-initdb.d/init.sql
@@ -21,11 +19,11 @@ services:
 
   redis:
     image: redis:7-alpine
-    command: redis-server --appendonly yes
+    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
     volumes:
       - redis_data:/data
     healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
+      test: ["CMD", "redis-cli", "-a", "${REDIS_PASSWORD}", "ping"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -37,7 +35,7 @@ services:
     ports:
       - "1935:1935"           # RTMP
       - "9999:9999/udp"       # SRT
-      - "8088:8080"           # HLS/LLHLS
+      # HLS/LLHLS now proxied through openresty (removed direct exposure)
       - "8081:8081"           # API (internal)
       - "3333:3333"           # WebRTC Signaling
       - "3478:3478"           # WebRTC ICE
@@ -47,7 +45,7 @@ services:
       - ome_logs:/var/log/ovenmediaengine
     environment:
       OME_API_PORT: 8081
-      OME_API_ACCESS_TOKEN: your-api-token
+      OME_API_ACCESS_TOKEN: ${OME_API_TOKEN}
     networks:
       - backend
       - frontend
@@ -63,12 +61,14 @@ services:
       DB_HOST: postgres
       DB_NAME: streaming
       DB_USER: streamuser
-      DB_PASS: streampass  # Fixed: matching postgres password
+      DB_PASS: ${DB_PASSWORD}
       REDIS_HOST: redis
       REDIS_PORT: 6379
-      JWT_SECRET: your-jwt-secret
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
+      JWT_SECRET: ${JWT_SECRET}
       OME_API_URL: http://ovenmediaengine:8081
-      OME_API_TOKEN: your-api-token
+      OME_API_TOKEN: ${OME_API_TOKEN}
     volumes:
       - ./backend/config.json:/app/config.json
       - uploads:/app/uploads
@@ -81,46 +81,136 @@ services:
     networks:
       - backend
 
+  chat-service:
+    build: ./chat-service
+    depends_on:
+      redis:
+        condition: service_healthy
+      drogon-backend:
+        condition: service_healthy
+    environment:
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
+      JWT_SECRET: ${JWT_SECRET}
+    volumes:
+      - ./chat-service/config.json:/app/config.json
+    healthcheck:
+      test: ["CMD-SHELL", "curl -s http://localhost:8081/ > /dev/null 2>&1 || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
+    networks:
+      - backend
+
+  nakama:
+    image: registry.heroiclabs.com/heroiclabs/nakama:3.21.1
+    depends_on:
+      postgres:
+        condition: service_healthy
+    entrypoint:
+      - "/bin/sh"
+      - "-c"
+      - |
+        set -e
+        apt-get update >/dev/null 2>&1 && apt-get install -y postgresql-client >/dev/null 2>&1 || true
+        PGPASSWORD=$DB_PASSWORD psql -h postgres -U streamuser -d postgres -tc "SELECT 1 FROM pg_database WHERE datname = 'nakama'" | grep -q 1 || PGPASSWORD=$DB_PASSWORD psql -h postgres -U streamuser -d postgres -c "CREATE DATABASE nakama"
+        /nakama/nakama migrate up --database.address "streamuser:$DB_PASSWORD@postgres:5432/nakama?sslmode=disable"
+        exec /nakama/nakama \
+          --name realms-nakama \
+          --database.address "streamuser:$DB_PASSWORD@postgres:5432/nakama?sslmode=disable" \
+          --socket.server_key "$NAKAMA_SERVER_KEY" \
+          --session.token_expiry_sec 86400 \
+          --runtime.js_entrypoint main.js \
+          --runtime.env "JWT_SECRET=$JWT_SECRET" \
+          --console.username admin \
+          --console.password "$NAKAMA_CONSOLE_PASSWORD" \
+          --logger.level INFO
+    environment:
+      - JWT_SECRET=${JWT_SECRET}
+      - NAKAMA_CONSOLE_PASSWORD=${NAKAMA_CONSOLE_PASSWORD}
+      - NAKAMA_SERVER_KEY=${NAKAMA_SERVER_KEY}
+      - DB_PASSWORD=${DB_PASSWORD}
+    volumes:
+      - ./nakama/modules/build:/nakama/data/modules:ro
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7350/healthcheck"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    networks:
+      - backend
+      - frontend
+
   openresty:
     build: ./openresty
     ports:
       - "80:80"
       - "443:443"
+      - "8088:8088"           # HLS/LLHLS proxy with CORS
     depends_on:
       drogon-backend:
         condition: service_healthy
+      chat-service:
+        condition: service_healthy
       ovenmediaengine:
         condition: service_started
       redis:
         condition: service_healthy
+      nakama:
+        condition: service_started
     environment:
       REDIS_HOST: redis
       REDIS_PORT: 6379
+      REDIS_DB: 1
+      REDIS_PASS: ${REDIS_PASSWORD}
       BACKEND_URL: http://drogon-backend:8080
+      CHAT_URL: http://chat-service:8081
       OME_URL: http://ovenmediaengine:8081
+      JWT_SECRET: ${JWT_SECRET}
     volumes:
       - ./openresty/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
       - ./openresty/lua:/usr/local/openresty/nginx/lua
+      - ./openresty/conf.d:/usr/local/openresty/nginx/conf/conf.d:ro
       - uploads:/app/uploads:ro  # Mount uploads volume to the same path
+      - letsencrypt_data:/etc/letsencrypt:ro
+      - certbot_webroot:/var/www/certbot:ro
     networks:
       - frontend
       - backend
 
   sveltekit:
-    build: ./frontend
+    build:
+      context: ./frontend
+      args:
+        VITE_NAKAMA_SERVER_KEY: ${NAKAMA_SERVER_KEY}
+        VITE_NAKAMA_HOST: localhost
+        VITE_NAKAMA_PORT: "80"
+        VITE_NAKAMA_USE_SSL: "false"
     depends_on:
       openresty:
         condition: service_started
     environment:
-      # Fixed: Added VITE_ prefix for client-side access
-      VITE_API_URL: http://localhost/api
-      VITE_WS_URL: ws://localhost/ws
-      VITE_STREAM_PORT: 8088
-      # Server-side only variables (no prefix needed)
       NODE_ENV: production
     networks:
       - frontend
 
+  certbot:
+    image: certbot/certbot:latest
+    volumes:
+      - letsencrypt_data:/etc/letsencrypt
+      - certbot_webroot:/var/www/certbot
+      - ./scripts/certbot-entrypoint.sh:/entrypoint.sh:ro
+    entrypoint: ["/bin/sh", "/entrypoint.sh"]
+    environment:
+      - CERTBOT_EMAIL=${CERTBOT_EMAIL:-admin@example.com}
+    networks:
+      - backend
+    restart: unless-stopped
+
 networks:
   frontend:
     driver: bridge
@@ -131,4 +221,6 @@ volumes:
   postgres_data:
   redis_data:
   ome_logs:
-  uploads:  # Named volume for uploads
\ No newline at end of file
+  uploads:  # Named volume for uploads
+  letsencrypt_data:  # Let's Encrypt certificates
+  certbot_webroot:   # ACME challenge webroot
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index e58253c..923121e 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -5,10 +5,10 @@ WORKDIR /app
 
 # Copy package files
 COPY package*.json ./
-COPY bun.lockb* ./
+COPY bun.lock* ./
 
 # Install dependencies with Bun
-RUN bun install --frozen-lockfile
+RUN bun install
 
 # Copy source files
 COPY . .
@@ -18,6 +18,16 @@ ENV VITE_API_URL=http://localhost/api
 ENV VITE_WS_URL=ws://localhost/ws
 ENV VITE_STREAM_PORT=8088
 
+# Nakama game server config
+ARG VITE_NAKAMA_SERVER_KEY=defaultkey
+ARG VITE_NAKAMA_HOST=localhost
+ARG VITE_NAKAMA_PORT=80
+ARG VITE_NAKAMA_USE_SSL=false
+ENV VITE_NAKAMA_SERVER_KEY=${VITE_NAKAMA_SERVER_KEY}
+ENV VITE_NAKAMA_HOST=${VITE_NAKAMA_HOST}
+ENV VITE_NAKAMA_PORT=${VITE_NAKAMA_PORT}
+ENV VITE_NAKAMA_USE_SSL=${VITE_NAKAMA_USE_SSL}
+
 # Build the application
 RUN bun run build
 
@@ -26,9 +36,10 @@ FROM oven/bun:1-alpine
 
 WORKDIR /app
 
-# Copy built application
+# Copy built application and lockfile
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/bun.lock* ./
 
 # Install production dependencies only
 RUN bun install --production
diff --git a/frontend/package.json b/frontend/package.json
index 59d9577..4689e6d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,11 +21,18 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
+    "@heroiclabs/nakama-js": "^2.8.0",
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
+    "chess.js": "^1.0.0-beta.8",
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@types/dompurify": "^3.0.5",
+    "dompurify": "^3.3.0",
+    "foliate-js": "^1.0.1",
     "hls.js": "^1.6.7",
+    "marked": "^17.0.1",
     "mdb-ui-kit": "^9.1.0",
-    "openpgp": "^6.0.0-alpha.0",  
+    "openpgp": "^6.0.0-alpha.0",
     "ovenplayer": "^0.10.43"
   },
   "type": "module"
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 1dbfd04..cd27d7c 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -15,11 +15,30 @@
     --border: #333;
 }
 
+html {
+    background: var(--black) !important;
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: var(--black);
+    background: var(--black) !important;
     color: var(--white);
     line-height: 1.6;
+    min-height: 100vh;
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+}
+
+body::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+}
+
+/* Ensure all page wrappers maintain dark background */
+#svelte,
+[data-svelte],
+:root {
+    background: var(--black);
 }
 
 .container {
@@ -129,7 +148,6 @@ button:disabled {
 }
 
 .nav-container {
-    max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
     display: flex;
@@ -274,9 +292,9 @@ button:disabled {
     color: var(--white);
 }
 
-/* Ensure stream pages have black background */
-html {
-    background: var(--black);
+/* Ensure all pages have black background */
+html, body, #app {
+    background: var(--black) !important;
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/src/app.html b/frontend/src/app.html
index c8573a2..52b85f2 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="data:,">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <title>Live Streaming Platform</title>
+    <title>Stream</title>
     
     <style>
         /* Global reset for better player scaling */
diff --git a/frontend/src/hooks.server.js b/frontend/src/hooks.server.js
new file mode 100644
index 0000000..be9aad1
--- /dev/null
+++ b/frontend/src/hooks.server.js
@@ -0,0 +1,23 @@
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+    // SECURITY FIX #25: Server-side session validation
+    const authToken = event.cookies.get('auth_token');
+
+    if (authToken) {
+        // Token is present - attach to locals for use in load functions
+        // JWT validation happens on API calls; here we just pass it through
+        event.locals.authToken = authToken;
+        event.locals.isAuthenticated = true;
+    } else {
+        event.locals.isAuthenticated = false;
+    }
+
+    const response = await resolve(event);
+
+    // Add security headers to responses
+    response.headers.set('X-Content-Type-Options', 'nosniff');
+    response.headers.set('X-Frame-Options', 'SAMEORIGIN');
+    response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+
+    return response;
+}
diff --git a/frontend/src/lib/chat/chatStore.js b/frontend/src/lib/chat/chatStore.js
new file mode 100644
index 0000000..d6faa68
--- /dev/null
+++ b/frontend/src/lib/chat/chatStore.js
@@ -0,0 +1,326 @@
+import { writable, derived, get } from 'svelte/store';
+import { browser } from '$app/environment';
+import { speakMessage } from './ttsStore.js';
+
+// Chat messages store
+export const messages = writable([]);
+
+// Current realm ID
+export const currentRealmId = writable(null);
+
+// WebSocket connection status
+export const connectionStatus = writable('disconnected'); // 'connected', 'connecting', 'disconnected'
+
+// User info
+export const chatUserInfo = writable({
+	username: '',
+	userId: '',
+	isGuest: true,
+	isModerator: false,
+	isSiteModerator: false,  // Site-wide moderator (from is_moderator JWT claim)
+	isStreamer: false,
+	isAdmin: false,
+	avatarUrl: ''
+});
+
+// Active channels filter
+export const activeChannels = writable(['global']);
+
+// Participants in current realm
+export const participants = writable([]);
+
+// Message visibility filter: 'all' | 'registered' | 'guests'
+export const messageVisibilityFilter = writable('all');
+
+// Set of hidden user IDs (individual user hiding)
+export const hiddenUsers = writable(new Set());
+
+// Global chat: selected realms filter (empty Set = all realms / global view)
+export const selectedRealms = writable(new Set());
+
+// Available realms with participant counts [{realmId, realmName, participantCount}]
+export const availableRealms = writable([]);
+
+// Filtered messages based on active channels, realm filter, and visibility settings
+// Also computes showHeader for each message to avoid render-time index volatility
+export const filteredMessages = derived(
+	[messages, activeChannels, messageVisibilityFilter, hiddenUsers, selectedRealms],
+	([$messages, $activeChannels, $visibilityFilter, $hiddenUsers, $selectedRealms]) => {
+		let filtered = $messages;
+
+		// Filter by realm (global chat filtering)
+		// Empty selectedRealms means show all (global view)
+		if ($selectedRealms.size > 0) {
+			filtered = filtered.filter((msg) => $selectedRealms.has(msg.realmId));
+		}
+
+		// Filter by channel (legacy - may be deprecated)
+		if (!$activeChannels.includes('global')) {
+			filtered = filtered.filter((msg) =>
+				$activeChannels.some((channel) => msg.channel === channel)
+			);
+		}
+
+		// Filter by visibility (guest/registered)
+		if ($visibilityFilter === 'registered') {
+			filtered = filtered.filter((msg) => !msg.isGuest);
+		} else if ($visibilityFilter === 'guests') {
+			filtered = filtered.filter((msg) => msg.isGuest);
+		}
+
+		// Filter out individually hidden users
+		if ($hiddenUsers.size > 0) {
+			filtered = filtered.filter((msg) => !$hiddenUsers.has(msg.userId));
+		}
+
+		// Compute showHeader for each message based on filtered results
+		// This is computed here (not at render time) to avoid index volatility during rapid updates
+		// Use String() coercion for defensive comparison (handles number vs string IDs)
+		return filtered.map((msg, i) => {
+			if (i === 0) {
+				return { ...msg, showHeader: true };
+			}
+			const prev = filtered[i - 1];
+			const sameUser = String(prev.userId) === String(msg.userId);
+			const sameRealm = String(prev.realmId) === String(msg.realmId);
+			const showHeader = !sameUser || !sameRealm || msg.usedRoll || msg.usedRtd;
+			return { ...msg, showHeader };
+		});
+	}
+);
+
+// Add message to store
+export function addMessage(message) {
+	messages.update((msgs) => {
+		// Prevent duplicate messages (can happen with rapid sends or race conditions)
+		if (msgs.some((m) => m.messageId === message.messageId)) {
+			return msgs;
+		}
+		// Insert message in correct position by timestamp to handle out-of-order arrivals
+		const newMsgs = [...msgs, message];
+		// Only sort if needed (message timestamp is older than the last message)
+		if (msgs.length > 0 && message.timestamp < msgs[msgs.length - 1].timestamp) {
+			newMsgs.sort((a, b) => a.timestamp - b.timestamp);
+		}
+		return newMsgs;
+	});
+	// Trigger TTS for new messages
+	speakMessage(message);
+}
+
+// Remove message by ID
+export function removeMessage(messageId) {
+	messages.update((msgs) => msgs.filter((m) => m.messageId !== messageId));
+}
+
+// Clear all messages
+export function clearMessages() {
+	messages.set([]);
+}
+
+// Set message history
+export function setMessageHistory(messageList) {
+	messages.set(messageList);
+}
+
+// Toggle channel
+export function toggleChannel(channel) {
+	activeChannels.update((channels) => {
+		if (channels.includes(channel)) {
+			// Don't remove if it's the last channel
+			if (channels.length === 1) return channels;
+			return channels.filter((c) => c !== channel);
+		} else {
+			return [...channels, channel];
+		}
+	});
+}
+
+// Add channel
+export function addChannel(channel) {
+	activeChannels.update((channels) => {
+		if (!channels.includes(channel)) {
+			return [...channels, channel];
+		}
+		return channels;
+	});
+}
+
+// === Global Chat Realm Filtering ===
+
+// Join a realm (add to filter - like checking a checkbox)
+export function joinRealmFilter(realmId) {
+	selectedRealms.update((realms) => {
+		const newRealms = new Set(realms);
+		newRealms.add(realmId);
+		return newRealms;
+	});
+	saveRealmFilter();
+}
+
+// Leave a realm (remove from filter - like unchecking a checkbox)
+export function leaveRealmFilter(realmId) {
+	selectedRealms.update((realms) => {
+		const newRealms = new Set(realms);
+		newRealms.delete(realmId);
+		return newRealms;
+	});
+	saveRealmFilter();
+}
+
+// Toggle a realm in the filter
+export function toggleRealmFilter(realmId) {
+	selectedRealms.update((realms) => {
+		const newRealms = new Set(realms);
+		if (newRealms.has(realmId)) {
+			newRealms.delete(realmId);
+		} else {
+			newRealms.add(realmId);
+		}
+		return newRealms;
+	});
+	saveRealmFilter();
+}
+
+// Reset to global view (show all realms)
+export function resetToGlobal() {
+	selectedRealms.set(new Set());
+	saveRealmFilter();
+}
+
+// Check if currently in global mode (no filter)
+export function isGlobalMode() {
+	return get(selectedRealms).size === 0;
+}
+
+// Save realm filter to localStorage
+function saveRealmFilter() {
+	if (!browser) return;
+	const realms = Array.from(get(selectedRealms));
+	localStorage.setItem('chat_realm_filter', JSON.stringify(realms));
+}
+
+// Load realm filter from localStorage
+export function loadRealmFilter() {
+	if (!browser) return;
+	const saved = localStorage.getItem('chat_realm_filter');
+	if (saved) {
+		try {
+			const realms = JSON.parse(saved);
+			selectedRealms.set(new Set(realms));
+		} catch (e) {
+			console.error('Failed to load realm filter:', e);
+			selectedRealms.set(new Set());
+		}
+	}
+}
+
+// Fetch available realms with participant counts
+export async function fetchRealmStats() {
+	try {
+		const res = await fetch('/api/chat/realms/stats');
+		if (res.ok) {
+			const stats = await res.json();
+			availableRealms.set(stats);
+			return stats;
+		}
+	} catch (e) {
+		console.error('Failed to fetch realm stats:', e);
+	}
+	return [];
+}
+
+// Initialize realm filter on load
+if (browser) {
+	loadRealmFilter();
+}
+
+// Toggle hiding a specific user's messages
+export function toggleHideUser(userId) {
+	hiddenUsers.update((hidden) => {
+		const newHidden = new Set(hidden);
+		if (newHidden.has(userId)) {
+			newHidden.delete(userId);
+		} else {
+			newHidden.add(userId);
+		}
+		return newHidden;
+	});
+	saveVisibilitySettings();
+}
+
+// Check if a user is hidden
+export function isUserHidden(userId) {
+	return get(hiddenUsers).has(userId);
+}
+
+// Clear all hidden users
+export function clearHiddenUsers() {
+	hiddenUsers.set(new Set());
+	saveVisibilitySettings();
+}
+
+// Save visibility settings to localStorage
+let currentVisibilityRealmId = null;
+
+function saveVisibilitySettings() {
+	if (!browser || !currentVisibilityRealmId) return;
+
+	const data = {
+		filter: get(messageVisibilityFilter),
+		hiddenUsers: Array.from(get(hiddenUsers))
+	};
+
+	localStorage.setItem(`chat_visibility_${currentVisibilityRealmId}`, JSON.stringify(data));
+}
+
+// Load visibility settings from localStorage
+export function loadVisibilitySettings(realmId) {
+	currentVisibilityRealmId = realmId;
+
+	if (!browser || !realmId) return;
+
+	const saved = localStorage.getItem(`chat_visibility_${realmId}`);
+	if (!saved) {
+		// Reset to defaults for new realm
+		messageVisibilityFilter.set('all');
+		hiddenUsers.set(new Set());
+		return;
+	}
+
+	try {
+		const data = JSON.parse(saved);
+		messageVisibilityFilter.set(data.filter || 'all');
+		hiddenUsers.set(new Set(data.hiddenUsers || []));
+	} catch (e) {
+		console.error('Failed to load visibility settings:', e);
+	}
+}
+
+// Subscribe to store changes to auto-save
+if (browser) {
+	messageVisibilityFilter.subscribe(() => saveVisibilitySettings());
+}
+
+// Reset store
+export function resetChatStore() {
+	messages.set([]);
+	currentRealmId.set(null);
+	connectionStatus.set('disconnected');
+	chatUserInfo.set({
+		username: '',
+		userId: '',
+		isGuest: true,
+		isModerator: false,
+		isSiteModerator: false,
+		isStreamer: false,
+		isAdmin: false
+	});
+	activeChannels.set(['global']);
+	participants.set([]);
+	messageVisibilityFilter.set('all');
+	hiddenUsers.set(new Set());
+	// Note: selectedRealms is NOT reset here to preserve user's global chat filter preference
+	// Use resetToGlobal() explicitly if you want to reset the realm filter
+	availableRealms.set([]);
+}
diff --git a/frontend/src/lib/chat/chatWebSocket.js b/frontend/src/lib/chat/chatWebSocket.js
new file mode 100644
index 0000000..5440a17
--- /dev/null
+++ b/frontend/src/lib/chat/chatWebSocket.js
@@ -0,0 +1,425 @@
+import {
+	connectionStatus,
+	chatUserInfo,
+	addMessage,
+	removeMessage,
+	setMessageHistory,
+	currentRealmId,
+	participants
+} from './chatStore';
+import { get } from 'svelte/store';
+import { getGuestFingerprint } from '$lib/fingerprint';
+
+class ChatWebSocket {
+	constructor() {
+		this.ws = null;
+		this.realmId = null;
+		this.token = null;
+		this.reconnectAttempts = 0;
+		this.maxReconnectAttempts = 5;
+		this.reconnectDelay = 1000;
+		this.maxReconnectDelay = 30000; // Cap delay at 30 seconds
+		this.messageHandlers = [];
+		this.reconnectResetTimer = null;
+	}
+
+	async connect(realmId, token = null) {
+		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+			// Already connected, just switch realm
+			if (this.realmId !== realmId) {
+				this.joinRealm(realmId);
+			}
+			return;
+		}
+
+		this.realmId = realmId;
+		this.token = token;
+
+		// SECURITY FIX #9: Don't include token in URL query params
+		// Token will be sent as first message after connection to avoid logging/exposure
+		let wsUrl = `ws://${window.location.host}/chat/ws?realmId=${encodeURIComponent(realmId)}`;
+
+		// Guest connection - generate fingerprint for ban enforcement
+		// Only guests are fingerprinted, registered users are NOT fingerprinted for privacy
+		if (!token) {
+			try {
+				const fingerprint = await getGuestFingerprint();
+				if (fingerprint) {
+					wsUrl += `&fp=${encodeURIComponent(fingerprint)}`;
+				}
+			} catch (e) {
+				console.warn('Failed to generate fingerprint:', e);
+			}
+		}
+
+		console.log('[ChatWebSocket] Connecting to:', wsUrl, 'Token present:', !!token);
+
+		connectionStatus.set('connecting');
+
+		try {
+			this.ws = new WebSocket(wsUrl);
+
+			this.ws.onopen = () => {
+				console.log('Chat WebSocket connected');
+				connectionStatus.set('connected');
+				this.reconnectAttempts = 0;
+				currentRealmId.set(realmId);
+
+				// SECURITY FIX #9: Send auth token as first message (not in URL)
+				if (this.token) {
+					this.ws.send(JSON.stringify({ type: 'auth', token: this.token }));
+				}
+
+				// Send join message to subscribe to the realm
+				this.joinRealm(realmId);
+			};
+
+			this.ws.onmessage = (event) => {
+				try {
+					const data = JSON.parse(event.data);
+					this.handleMessage(data);
+				} catch (error) {
+					console.error('Failed to parse WebSocket message:', error);
+				}
+			};
+
+			this.ws.onerror = (error) => {
+				console.error('Chat WebSocket error:', error);
+			};
+
+			this.ws.onclose = () => {
+				console.log('Chat WebSocket closed');
+				connectionStatus.set('disconnected');
+				this.attemptReconnect();
+			};
+		} catch (error) {
+			console.error('Failed to create WebSocket:', error);
+			connectionStatus.set('disconnected');
+		}
+	}
+
+	handleMessage(data) {
+		switch (data.type) {
+			case 'welcome':
+				// If we have a token, we're about to authenticate - don't set guest info
+				// The auth_success message will set the correct user info
+				if (!this.token) {
+					chatUserInfo.set({
+						username: data.username,
+						userId: data.userId,
+						isGuest: data.isGuest,
+						isModerator: data.isModerator,
+						isSiteModerator: data.isSiteModerator || false,
+						isStreamer: data.isStreamer || false,
+						isAdmin: data.isAdmin || false,
+						avatarUrl: data.avatarUrl || ''
+					});
+
+					// If guest and has saved name in localStorage, rename immediately
+					if (data.isGuest && typeof localStorage !== 'undefined') {
+						const savedGuestName = localStorage.getItem('guestName');
+						if (savedGuestName && savedGuestName !== data.username) {
+							console.log('Restoring saved guest name:', savedGuestName);
+							// Delay slightly to ensure connection is fully established
+							setTimeout(() => {
+								this.sendRename(savedGuestName);
+							}, 100);
+						}
+					}
+				}
+				break;
+
+			case 'history':
+				setMessageHistory(data.messages || []);
+				break;
+
+			case 'new_message':
+				addMessage(data);
+				break;
+
+			case 'message_deleted':
+				removeMessage(data.messageId);
+				break;
+
+			case 'message_sent':
+				// Confirmation that message was sent
+				break;
+
+			case 'rename_success':
+				chatUserInfo.update((info) => ({
+					...info,
+					username: data.newName
+				}));
+				console.log('Rename successful:', data.newName);
+				break;
+
+			case 'auth_success':
+				// Update user info after successful authentication
+				chatUserInfo.set({
+					username: data.username,
+					userId: data.userId,
+					isGuest: false,
+					isModerator: data.isModerator || false,
+					isSiteModerator: data.isSiteModerator || false,
+					isStreamer: data.isStreamer || false,
+					isAdmin: data.isAdmin || false,
+					avatarUrl: data.avatarUrl || '',
+					userColor: data.userColor || '#FFFFFF'
+				});
+				console.log('Authentication successful:', data.username);
+				break;
+
+			case 'error':
+				console.error('Chat error:', data.error);
+				// Optionally show error to user
+				break;
+
+			case 'mod_action_success':
+				console.log('Moderation action successful:', data.action);
+				break;
+
+			case 'participants_list':
+				participants.set(data.participants || []);
+				console.log(`Participants in realm: ${data.count}`);
+				break;
+
+			case 'participant_joined':
+				// Add new participant to the list
+				participants.update((list) => {
+					// Check if already in list (avoid duplicates)
+					const exists = list.some((p) => p.userId === data.participant.userId);
+					if (!exists) {
+						return [...list, data.participant];
+					}
+					return list;
+				});
+				console.log(`Participant joined: ${data.participant.username} (${data.participantCount} total)`);
+				break;
+
+			case 'participant_left':
+				// Remove participant from the list
+				participants.update((list) => list.filter((p) => p.userId !== data.userId));
+				console.log(`Participant left: ${data.username} (${data.participantCount} total)`);
+				break;
+
+			default:
+				console.log('Unknown message type:', data.type);
+		}
+
+		// Call custom handlers
+		this.messageHandlers.forEach((handler) => handler(data));
+	}
+
+	sendMessage(content, userColor = '#FFFFFF', selfDestructSeconds = 0) {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'message',
+			content,
+			userColor
+		};
+
+		// Only include selfDestructSeconds if set (> 0)
+		if (selfDestructSeconds > 0) {
+			message.selfDestructSeconds = selfDestructSeconds;
+		}
+
+		this.ws.send(JSON.stringify(message));
+		return true;
+	}
+
+	joinRealm(realmId) {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'join',
+			realmId
+		};
+
+		this.ws.send(JSON.stringify(message));
+		this.realmId = realmId;
+		currentRealmId.set(realmId);
+		return true;
+	}
+
+	deleteMessage(messageId) {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'mod_action',
+			action: 'delete',
+			messageId
+		};
+
+		this.ws.send(JSON.stringify(message));
+		return true;
+	}
+
+	// Site-wide fingerprint ban (admins + site moderators only)
+	uberbanUser(targetUserId, fingerprint = '', reason = '') {
+		return this.sendModAction('uberban', targetUserId, reason, 0, fingerprint);
+	}
+
+	// Remove site-wide fingerprint ban
+	unUberbanUser(fingerprint, reason = '') {
+		return this.sendModAction('ununberban', '', reason, 0, fingerprint);
+	}
+
+	// Per-realm ban
+	banUser(targetUserId, reason = '') {
+		return this.sendModAction('ban', targetUserId, reason);
+	}
+
+	// Remove per-realm ban
+	unbanUser(targetUserId, fingerprint = '') {
+		return this.sendModAction('unban', targetUserId, '', 0, fingerprint);
+	}
+
+	// Kick (disconnect + 1 min rejoin block)
+	kickUser(targetUserId, duration = 60, reason = '') {
+		return this.sendModAction('kick', targetUserId, reason, duration);
+	}
+
+	// duration: 0 = permanent (default), >0 = temporary with auto-expire
+	muteUser(targetUserId, duration = 0, reason = '') {
+		return this.sendModAction('mute', targetUserId, reason, duration);
+	}
+
+	sendModAction(action, targetUserId, reason = '', duration = 0, fingerprint = '') {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'mod_action',
+			action,
+			targetUserId,
+			reason,
+			duration
+		};
+
+		// Include fingerprint if provided (for uberban/unban)
+		if (fingerprint) {
+			message.fingerprint = fingerprint;
+		}
+
+		this.ws.send(JSON.stringify(message));
+		return true;
+	}
+
+	getParticipants() {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'get_participants'
+		};
+
+		this.ws.send(JSON.stringify(message));
+		return true;
+	}
+
+	sendRename(newName) {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.error('WebSocket not connected');
+			return false;
+		}
+
+		const message = {
+			type: 'rename',
+			newName
+		};
+
+		this.ws.send(JSON.stringify(message));
+		return true;
+	}
+
+	onMessage(handler) {
+		this.messageHandlers.push(handler);
+		return () => {
+			this.messageHandlers = this.messageHandlers.filter((h) => h !== handler);
+		};
+	}
+
+	attemptReconnect() {
+		if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+			console.error('Max reconnect attempts reached. Use manualReconnect() to try again.');
+			connectionStatus.set('failed');
+
+			// Schedule automatic reset of reconnect attempts after 60 seconds
+			// This allows the system to try again later without user intervention
+			if (this.reconnectResetTimer) {
+				clearTimeout(this.reconnectResetTimer);
+			}
+			this.reconnectResetTimer = setTimeout(() => {
+				console.log('Resetting reconnect attempts after timeout');
+				this.reconnectAttempts = 0;
+				if (this.realmId) {
+					this.connect(this.realmId, this.token);
+				}
+			}, 60000); // Try again after 1 minute
+			return;
+		}
+
+		this.reconnectAttempts++;
+		// Cap the delay at maxReconnectDelay
+		const delay = Math.min(
+			this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
+			this.maxReconnectDelay
+		);
+
+		console.log(`Attempting to reconnect in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+
+		setTimeout(() => {
+			if (this.realmId) {
+				this.connect(this.realmId, this.token);
+			}
+		}, delay);
+	}
+
+	/**
+	 * Manually trigger reconnection - resets attempt counter and tries immediately
+	 */
+	manualReconnect() {
+		console.log('Manual reconnect triggered');
+		if (this.reconnectResetTimer) {
+			clearTimeout(this.reconnectResetTimer);
+			this.reconnectResetTimer = null;
+		}
+		this.reconnectAttempts = 0;
+		if (this.realmId) {
+			this.connect(this.realmId, this.token);
+		}
+	}
+
+	disconnect() {
+		// Clear any pending reconnect timers
+		if (this.reconnectResetTimer) {
+			clearTimeout(this.reconnectResetTimer);
+			this.reconnectResetTimer = null;
+		}
+		if (this.ws) {
+			this.ws.close();
+			this.ws = null;
+		}
+		this.realmId = null;
+		this.token = null;
+		this.reconnectAttempts = 0;
+		connectionStatus.set('disconnected');
+	}
+}
+
+// Singleton instance
+export const chatWebSocket = new ChatWebSocket();
diff --git a/frontend/src/lib/chat/stickerFavorites.js b/frontend/src/lib/chat/stickerFavorites.js
new file mode 100644
index 0000000..c4d1b4a
--- /dev/null
+++ b/frontend/src/lib/chat/stickerFavorites.js
@@ -0,0 +1,66 @@
+import { writable } from 'svelte/store';
+
+// Load favorites from localStorage
+function loadFavorites() {
+	if (typeof localStorage === 'undefined') return [];
+	try {
+		const stored = localStorage.getItem('stickerFavorites');
+		return stored ? JSON.parse(stored) : [];
+	} catch (e) {
+		console.error('Failed to load sticker favorites:', e);
+		return [];
+	}
+}
+
+// Save favorites to localStorage
+function saveFavorites(favorites) {
+	if (typeof localStorage === 'undefined') return;
+	try {
+		localStorage.setItem('stickerFavorites', JSON.stringify(favorites));
+	} catch (e) {
+		console.error('Failed to save sticker favorites:', e);
+	}
+}
+
+// Create the store
+function createStickerFavoritesStore() {
+	const { subscribe, set, update } = writable(loadFavorites());
+
+	return {
+		subscribe,
+		add: (stickerName) => {
+			update(favorites => {
+				if (!favorites.includes(stickerName)) {
+					const updated = [...favorites, stickerName];
+					saveFavorites(updated);
+					return updated;
+				}
+				return favorites;
+			});
+		},
+		remove: (stickerName) => {
+			update(favorites => {
+				const updated = favorites.filter(f => f !== stickerName);
+				saveFavorites(updated);
+				return updated;
+			});
+		},
+		toggle: (stickerName) => {
+			update(favorites => {
+				let updated;
+				if (favorites.includes(stickerName)) {
+					updated = favorites.filter(f => f !== stickerName);
+				} else {
+					updated = [...favorites, stickerName];
+				}
+				saveFavorites(updated);
+				return updated;
+			});
+		},
+		isFavorite: (stickerName, favorites) => {
+			return favorites.includes(stickerName);
+		}
+	};
+}
+
+export const stickerFavorites = createStickerFavoritesStore();
diff --git a/frontend/src/lib/chat/ttsStore.js b/frontend/src/lib/chat/ttsStore.js
new file mode 100644
index 0000000..af9bcbb
--- /dev/null
+++ b/frontend/src/lib/chat/ttsStore.js
@@ -0,0 +1,220 @@
+import { writable, get } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// TTS enabled state (default: false)
+export const ttsEnabled = writable(false);
+
+// TTS settings
+export const ttsSettings = writable({
+	voice: null,      // SpeechSynthesisVoice object
+	voiceName: '',    // Voice name for persistence
+	rate: 1,          // 0.5 - 2
+	pitch: 1,         // 0.5 - 2
+	volume: 1         // 0 - 1
+});
+
+// User filter: 'all' | 'guests' | 'registered'
+export const ttsUserFilter = writable('all');
+
+// Set of muted user IDs
+export const ttsMutedUsers = writable(new Set());
+
+// Available voices from browser
+export const availableVoices = writable([]);
+
+// Current realm ID for per-realm settings
+let currentRealmId = null;
+
+// Initialize voices from browser
+export function initVoices() {
+	if (!browser || !window.speechSynthesis) return;
+
+	const loadVoices = () => {
+		const voices = window.speechSynthesis.getVoices();
+		availableVoices.set(voices);
+
+		// Restore saved voice if available
+		const settings = get(ttsSettings);
+		if (settings.voiceName && voices.length > 0) {
+			const savedVoice = voices.find(v => v.name === settings.voiceName);
+			if (savedVoice) {
+				ttsSettings.update(s => ({ ...s, voice: savedVoice }));
+			}
+		}
+	};
+
+	// Chrome needs this event, Firefox loads immediately
+	if (window.speechSynthesis.onvoiceschanged !== undefined) {
+		window.speechSynthesis.onvoiceschanged = loadVoices;
+	}
+	loadVoices();
+}
+
+// Set voice by name
+export function setVoice(voiceName) {
+	const voices = get(availableVoices);
+	const voice = voices.find(v => v.name === voiceName);
+	if (voice) {
+		ttsSettings.update(s => ({ ...s, voice, voiceName }));
+		saveSettings();
+	}
+}
+
+// Check if message should be spoken
+function shouldSpeak(message) {
+	if (!get(ttsEnabled)) return false;
+
+	// Check if user is muted
+	const mutedUsers = get(ttsMutedUsers);
+	if (mutedUsers.has(message.userId)) return false;
+
+	// Check user filter
+	const filter = get(ttsUserFilter);
+	if (filter === 'guests' && !message.isGuest) return false;
+	if (filter === 'registered' && message.isGuest) return false;
+
+	return true;
+}
+
+// Strip HTML/markdown and clean text for TTS
+function cleanTextForTTS(text) {
+	if (!text) return '';
+
+	// Remove HTML tags
+	let clean = text.replace(/<[^>]*>/g, '');
+
+	// Remove markdown formatting
+	clean = clean.replace(/\*\*(.+?)\*\*/g, '$1');  // bold
+	clean = clean.replace(/\*(.+?)\*/g, '$1');      // italic
+	clean = clean.replace(/__(.+?)__/g, '$1');      // underline
+	clean = clean.replace(/~~(.+?)~~/g, '$1');      // strikethrough
+	clean = clean.replace(/`(.+?)`/g, '$1');        // code
+
+	// Remove URLs
+	clean = clean.replace(/https?:\/\/\S+/g, 'link');
+
+	// Limit length to prevent very long TTS
+	if (clean.length > 200) {
+		clean = clean.substring(0, 200) + '...';
+	}
+
+	return clean.trim();
+}
+
+// Speak a message
+export function speakMessage(message) {
+	if (!browser || !window.speechSynthesis) return;
+	if (!shouldSpeak(message)) return;
+
+	const settings = get(ttsSettings);
+	const text = cleanTextForTTS(message.content);
+
+	if (!text) return;
+
+	// Add username prefix
+	const fullText = `${message.username} says: ${text}`;
+
+	const utterance = new SpeechSynthesisUtterance(fullText);
+
+	if (settings.voice) {
+		utterance.voice = settings.voice;
+	}
+	utterance.rate = settings.rate;
+	utterance.pitch = settings.pitch;
+	utterance.volume = settings.volume;
+
+	window.speechSynthesis.speak(utterance);
+}
+
+// Toggle mute for a user
+export function toggleUserMute(userId, username) {
+	ttsMutedUsers.update(muted => {
+		const newMuted = new Set(muted);
+		if (newMuted.has(userId)) {
+			newMuted.delete(userId);
+		} else {
+			newMuted.add(userId);
+		}
+		return newMuted;
+	});
+	saveSettings();
+}
+
+// Check if user is muted
+export function isUserMuted(userId) {
+	return get(ttsMutedUsers).has(userId);
+}
+
+// Clear all muted users
+export function clearMutedUsers() {
+	ttsMutedUsers.set(new Set());
+	saveSettings();
+}
+
+// Save settings to localStorage
+function saveSettings() {
+	if (!browser || !currentRealmId) return;
+
+	const settings = get(ttsSettings);
+	const data = {
+		enabled: get(ttsEnabled),
+		voiceName: settings.voiceName,
+		rate: settings.rate,
+		pitch: settings.pitch,
+		volume: settings.volume,
+		userFilter: get(ttsUserFilter),
+		mutedUsers: Array.from(get(ttsMutedUsers))
+	};
+
+	localStorage.setItem(`tts_settings_${currentRealmId}`, JSON.stringify(data));
+}
+
+// Load settings from localStorage
+export function loadSettings(realmId) {
+	currentRealmId = realmId;
+
+	if (!browser || !realmId) return;
+
+	const saved = localStorage.getItem(`tts_settings_${realmId}`);
+	if (!saved) {
+		// Reset to defaults for new realm
+		ttsEnabled.set(false);
+		ttsUserFilter.set('all');
+		ttsMutedUsers.set(new Set());
+		return;
+	}
+
+	try {
+		const data = JSON.parse(saved);
+
+		ttsEnabled.set(data.enabled || false);
+		ttsUserFilter.set(data.userFilter || 'all');
+		ttsMutedUsers.set(new Set(data.mutedUsers || []));
+
+		ttsSettings.update(s => ({
+			...s,
+			voiceName: data.voiceName || '',
+			rate: data.rate ?? 1,
+			pitch: data.pitch ?? 1,
+			volume: data.volume ?? 1
+		}));
+
+		// Restore voice object if voices are loaded
+		if (data.voiceName) {
+			const voices = get(availableVoices);
+			const voice = voices.find(v => v.name === data.voiceName);
+			if (voice) {
+				ttsSettings.update(s => ({ ...s, voice }));
+			}
+		}
+	} catch (e) {
+		console.error('Failed to load TTS settings:', e);
+	}
+}
+
+// Subscribe to store changes to auto-save
+if (browser) {
+	ttsEnabled.subscribe(() => saveSettings());
+	ttsSettings.subscribe(() => saveSettings());
+	ttsUserFilter.subscribe(() => saveSettings());
+}
diff --git a/frontend/src/lib/components/AudioPlayer.svelte b/frontend/src/lib/components/AudioPlayer.svelte
new file mode 100644
index 0000000..7b4d232
--- /dev/null
+++ b/frontend/src/lib/components/AudioPlayer.svelte
@@ -0,0 +1,667 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { audioPlaylist, currentTrack, hasNext, hasPrevious } from '$lib/stores/audioPlaylist';
+
+    let seekBar;
+    let volumeBar;
+    let isDraggingSeek = false;
+    let isDraggingVolume = false;
+    let seekPosition = 0;
+
+    // Format time in mm:ss
+    function formatTime(seconds) {
+        if (!seconds || isNaN(seconds)) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    // Seek bar handling
+    function handleSeekStart(e) {
+        isDraggingSeek = true;
+        handleSeekMove(e);
+    }
+
+    function handleSeekMove(e) {
+        if (!isDraggingSeek || !seekBar) return;
+        const rect = seekBar.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        seekPosition = Math.max(0, Math.min(1, x / rect.width));
+    }
+
+    function handleSeekEnd() {
+        if (isDraggingSeek) {
+            const newTime = seekPosition * $audioPlaylist.duration;
+            audioPlaylist.seek(newTime);
+        }
+        isDraggingSeek = false;
+    }
+
+    // Volume bar handling
+    function handleVolumeStart(e) {
+        isDraggingVolume = true;
+        handleVolumeMove(e);
+    }
+
+    function handleVolumeMove(e) {
+        if (!isDraggingVolume || !volumeBar) return;
+        const rect = volumeBar.getBoundingClientRect();
+        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
+        const volume = Math.max(0, Math.min(1, x / rect.width));
+        audioPlaylist.setVolume(volume);
+    }
+
+    function handleVolumeEnd() {
+        isDraggingVolume = false;
+    }
+
+    // Keyboard shortcuts
+    function handleKeydown(e) {
+        if (!$audioPlaylist.enabled) return;
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+        switch (e.code) {
+            case 'Space':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    audioPlaylist.togglePlay();
+                }
+                break;
+            case 'ArrowRight':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    audioPlaylist.next();
+                }
+                break;
+            case 'ArrowLeft':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    audioPlaylist.previous();
+                }
+                break;
+        }
+    }
+
+    onMount(() => {
+        if (browser) {
+            window.addEventListener('mousemove', handleSeekMove);
+            window.addEventListener('mouseup', handleSeekEnd);
+            window.addEventListener('touchmove', handleSeekMove);
+            window.addEventListener('touchend', handleSeekEnd);
+            window.addEventListener('mousemove', handleVolumeMove);
+            window.addEventListener('mouseup', handleVolumeEnd);
+            window.addEventListener('touchmove', handleVolumeMove);
+            window.addEventListener('touchend', handleVolumeEnd);
+            window.addEventListener('keydown', handleKeydown);
+        }
+    });
+
+    onDestroy(() => {
+        if (browser) {
+            window.removeEventListener('mousemove', handleSeekMove);
+            window.removeEventListener('mouseup', handleSeekEnd);
+            window.removeEventListener('touchmove', handleSeekMove);
+            window.removeEventListener('touchend', handleSeekEnd);
+            window.removeEventListener('mousemove', handleVolumeMove);
+            window.removeEventListener('mouseup', handleVolumeEnd);
+            window.removeEventListener('touchmove', handleVolumeMove);
+            window.removeEventListener('touchend', handleVolumeEnd);
+            window.removeEventListener('keydown', handleKeydown);
+        }
+    });
+
+    // Calculate progress percentage
+    $: progress = $audioPlaylist.duration > 0
+        ? (isDraggingSeek ? seekPosition : $audioPlaylist.currentTime / $audioPlaylist.duration) * 100
+        : 0;
+</script>
+
+{#if $audioPlaylist.enabled && ($audioPlaylist.queue.length > 0 || $audioPlaylist.nowPlaying)}
+
+    <div class="audio-player" class:minimized={$audioPlaylist.minimized}>
+        {#if $audioPlaylist.minimized}
+            <!-- Minimized view -->
+            <div class="mini-player">
+                <div class="mini-thumb" on:click={() => audioPlaylist.toggleMinimized()}>
+                    {#if $currentTrack?.thumbnailPath}
+                        <img src={$currentTrack.thumbnailPath} alt="" />
+                    {:else}
+                        <div class="mini-thumb-placeholder">
+                            <span>{$currentTrack?.title?.charAt(0) || '?'}</span>
+                        </div>
+                    {/if}
+                    <div class="mini-progress" style="width: {progress}%"></div>
+                </div>
+                <button class="mini-play" on:click={() => audioPlaylist.togglePlay()}>
+                    {$audioPlaylist.isPlaying ? '⏸' : '▶'}
+                </button>
+            </div>
+        {:else}
+            <!-- Full player view -->
+            <div class="player-header">
+                <span class="queue-count">{$audioPlaylist.currentIndex + 1} / {$audioPlaylist.queue.length}</span>
+                <div class="header-controls">
+                    <button class="header-btn" on:click={() => audioPlaylist.toggleMinimized()} title="Minimize">
+                        ─
+                    </button>
+                    <button class="header-btn close" on:click={() => audioPlaylist.hide()} title="Close">
+                        ×
+                    </button>
+                </div>
+            </div>
+
+            <div class="player-content">
+                <!-- Track info -->
+                <div class="track-info">
+                    <div class="track-thumb">
+                        {#if $currentTrack?.thumbnailPath}
+                            <img src={$currentTrack.thumbnailPath} alt="" />
+                        {:else}
+                            <div class="thumb-placeholder">
+                                <span>{$currentTrack?.title?.charAt(0) || '?'}</span>
+                            </div>
+                        {/if}
+                    </div>
+                    <div class="track-details">
+                        <div class="track-title" title={$currentTrack?.title || 'Unknown'}>
+                            {$currentTrack?.title || 'Unknown'}
+                        </div>
+                        <div class="track-artist">
+                            {$currentTrack?.username || 'Unknown Artist'}
+                            {#if $currentTrack?.realmName}
+                                <span class="track-realm">in {$currentTrack.realmName}</span>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Progress bar -->
+                <div class="progress-container">
+                    <span class="time">{formatTime(isDraggingSeek ? seekPosition * $audioPlaylist.duration : $audioPlaylist.currentTime)}</span>
+                    <div
+                        class="progress-bar"
+                        bind:this={seekBar}
+                        on:mousedown={handleSeekStart}
+                        on:touchstart={handleSeekStart}
+                    >
+                        <div class="progress-fill" style="width: {progress}%"></div>
+                        <div class="progress-thumb" style="left: {progress}%"></div>
+                    </div>
+                    <span class="time">{formatTime($audioPlaylist.duration)}</span>
+                </div>
+
+                <!-- Main controls -->
+                <div class="main-controls">
+                    <button
+                        class="control-btn secondary"
+                        class:active={$audioPlaylist.shuffle}
+                        on:click={() => audioPlaylist.toggleShuffle()}
+                        title="Shuffle"
+                    >
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="16 3 21 3 21 8"></polyline>
+                            <line x1="4" y1="20" x2="21" y2="3"></line>
+                            <polyline points="21 16 21 21 16 21"></polyline>
+                            <line x1="15" y1="15" x2="21" y2="21"></line>
+                            <line x1="4" y1="4" x2="9" y2="9"></line>
+                        </svg>
+                    </button>
+
+                    <button
+                        class="control-btn"
+                        disabled={!$hasPrevious}
+                        on:click={() => audioPlaylist.previous()}
+                        title="Previous"
+                    >
+                        <svg viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M6 6h2v12H6v-12zm3.5 6l8.5 6V6l-8.5 6z"/>
+                        </svg>
+                    </button>
+
+                    <button class="control-btn play" on:click={() => audioPlaylist.togglePlay()}>
+                        {#if $audioPlaylist.isPlaying}
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+                            </svg>
+                        {:else}
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M8 5v14l11-7z"/>
+                            </svg>
+                        {/if}
+                    </button>
+
+                    <button
+                        class="control-btn"
+                        disabled={!$hasNext}
+                        on:click={() => audioPlaylist.next()}
+                        title="Next"
+                    >
+                        <svg viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z"/>
+                        </svg>
+                    </button>
+
+                    <button
+                        class="control-btn secondary"
+                        class:active={$audioPlaylist.repeat !== 'none'}
+                        on:click={() => audioPlaylist.cycleRepeat()}
+                        title={`Repeat: ${$audioPlaylist.repeat}`}
+                    >
+                        {#if $audioPlaylist.repeat === 'one'}
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="17 1 21 5 17 9"></polyline>
+                                <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                                <polyline points="7 23 3 19 7 15"></polyline>
+                                <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+                                <text x="12" y="14" font-size="7" fill="currentColor" stroke="none" text-anchor="middle" dominant-baseline="middle">1</text>
+                            </svg>
+                        {:else}
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="17 1 21 5 17 9"></polyline>
+                                <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                                <polyline points="7 23 3 19 7 15"></polyline>
+                                <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+                            </svg>
+                        {/if}
+                    </button>
+                </div>
+
+                <!-- Volume control -->
+                <div class="volume-container">
+                    <button
+                        class="control-btn secondary"
+                        on:click={() => audioPlaylist.toggleMute()}
+                        title={$audioPlaylist.muted ? 'Unmute' : 'Mute'}
+                    >
+                        {#if $audioPlaylist.muted || $audioPlaylist.volume === 0}
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+                            </svg>
+                        {:else if $audioPlaylist.volume < 0.5}
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
+                            </svg>
+                        {:else}
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+                            </svg>
+                        {/if}
+                    </button>
+                    <div
+                        class="volume-bar"
+                        bind:this={volumeBar}
+                        on:mousedown={handleVolumeStart}
+                        on:touchstart={handleVolumeStart}
+                    >
+                        <div class="volume-fill" style="width: {$audioPlaylist.muted ? 0 : $audioPlaylist.volume * 100}%"></div>
+                        <div class="volume-thumb" style="left: {$audioPlaylist.muted ? 0 : $audioPlaylist.volume * 100}%"></div>
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .audio-player {
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        width: 320px;
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 12px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 9998;
+        overflow: hidden;
+    }
+
+    .audio-player.minimized {
+        width: auto;
+        border-radius: 50px;
+    }
+
+    /* Mini player */
+    .mini-player {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem;
+    }
+
+    .mini-thumb {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+        flex-shrink: 0;
+    }
+
+    .mini-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .mini-thumb-placeholder {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #561d5e, #8b3a92);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: bold;
+        font-size: 1rem;
+    }
+
+    .mini-progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        background: #8b3a92;
+        border-radius: 0 0 0 50%;
+        transition: width 0.1s linear;
+    }
+
+    .mini-play {
+        width: 36px;
+        height: 36px;
+        border: none;
+        background: #8b3a92;
+        color: white;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+        flex-shrink: 0;
+        transition: transform 0.15s ease, background 0.15s ease;
+    }
+
+    .mini-play:hover {
+        background: #a64daf;
+        transform: scale(1.05);
+    }
+
+    /* Full player */
+    .player-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .queue-count {
+        color: #8b949e;
+        font-size: 0.75rem;
+    }
+
+    .header-controls {
+        display: flex;
+        gap: 0.25rem;
+    }
+
+    .header-btn {
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: none;
+        color: #8b949e;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-size: 1rem;
+        transition: all 0.15s ease;
+    }
+
+    .header-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+    }
+
+    .header-btn.close:hover {
+        color: #f85149;
+    }
+
+    .player-content {
+        padding: 0.75rem;
+    }
+
+    /* Track info */
+    .track-info {
+        display: flex;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .track-thumb {
+        width: 48px;
+        height: 48px;
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .track-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .thumb-placeholder {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #561d5e, #8b3a92);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: bold;
+        font-size: 1.2rem;
+    }
+
+    .track-details {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .track-title {
+        color: #c9d1d9;
+        font-size: 0.9rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .track-artist {
+        color: #8b949e;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .track-realm {
+        color: #6e7681;
+    }
+
+    /* Progress bar */
+    .progress-container {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .time {
+        color: #8b949e;
+        font-size: 0.7rem;
+        font-family: monospace;
+        min-width: 32px;
+    }
+
+    .time:last-child {
+        text-align: right;
+    }
+
+    .progress-bar {
+        flex: 1;
+        height: 4px;
+        background: #30363d;
+        border-radius: 2px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: #8b3a92;
+        border-radius: 2px;
+        transition: width 0.1s linear;
+    }
+
+    .progress-thumb {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 12px;
+        height: 12px;
+        background: white;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+    }
+
+    .progress-bar:hover .progress-thumb {
+        opacity: 1;
+    }
+
+    /* Main controls */
+    .main-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .control-btn {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: none;
+        color: #c9d1d9;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: all 0.15s ease;
+    }
+
+    .control-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .control-btn:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+    }
+
+    .control-btn:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+
+    .control-btn.secondary {
+        color: #8b949e;
+    }
+
+    .control-btn.secondary svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .control-btn.secondary.active {
+        color: #8b3a92;
+    }
+
+    .control-btn.play {
+        width: 40px;
+        height: 40px;
+        background: #8b3a92;
+        color: white;
+    }
+
+    .control-btn.play:hover {
+        background: #a64daf;
+        transform: scale(1.05);
+    }
+
+    .control-btn.play svg {
+        width: 24px;
+        height: 24px;
+    }
+
+    /* Volume control */
+    .volume-container {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .volume-bar {
+        flex: 1;
+        min-width: 100px;
+        height: 4px;
+        background: #30363d;
+        border-radius: 2px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .volume-fill {
+        height: 100%;
+        background: #8b3a92;
+        border-radius: 2px;
+        transition: width 0.1s linear;
+    }
+
+    .volume-thumb {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 10px;
+        height: 10px;
+        background: white;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+    }
+
+    .volume-bar:hover .volume-thumb {
+        opacity: 1;
+    }
+
+    @media (max-width: 400px) {
+        .audio-player {
+            width: calc(100vw - 2rem);
+            right: 1rem;
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/ChessGameOverlay.svelte b/frontend/src/lib/components/ChessGameOverlay.svelte
new file mode 100644
index 0000000..fc4cfe7
--- /dev/null
+++ b/frontend/src/lib/components/ChessGameOverlay.svelte
@@ -0,0 +1,919 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { gamesOverlay, hasGame, currentGame, gameMode } from '$lib/stores/gamesOverlay';
+    import { nakama, ChessOpCode } from '$lib/stores/nakama';
+    import { auth } from '$lib/stores/auth';
+
+    // Chess state
+    let game = null;
+    let Chess = null;
+    let boardSquares = [];
+    let selectedSquare = null;
+    let legalMoves = [];
+    let moveHistory = [];
+
+    // Match state from overlay store
+    let myColor = null;
+
+    // Drag state
+    let isDragging = false;
+    let dragOffset = { x: 0, y: 0 };
+    let position = { x: null, y: null };
+    let isResizing = false;
+    let resizeDirection = '';
+    let dimensions = { width: 450, height: 520 };
+    let startDimensions = { width: 0, height: 0 };
+    let startPos = { x: 0, y: 0 };
+
+    // Callbacks cleanup
+    let unsubscribeMatch = null;
+    let isDestroyed = false;
+
+    // Load/save position
+    function loadPosition() {
+        if (!browser) return;
+        try {
+            const saved = localStorage.getItem('chessGameOverlayPosition');
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                position = parsed.position || { x: null, y: null };
+                dimensions = parsed.dimensions || { width: 450, height: 520 };
+            }
+        } catch (e) {}
+    }
+
+    function savePosition() {
+        if (!browser) return;
+        try {
+            localStorage.setItem('chessGameOverlayPosition', JSON.stringify({
+                position,
+                dimensions
+            }));
+        } catch (e) {}
+    }
+
+    // Computed position (default to center-right if not set)
+    $: computedPosition = {
+        right: position.x === null ? '1rem' : 'auto',
+        top: position.y === null ? '50%' : 'auto',
+        left: position.x !== null ? `${position.x}px` : 'auto',
+        bottom: position.y !== null ? `${position.y}px` : 'auto',
+        transform: position.y === null ? 'translateY(-50%)' : 'none'
+    };
+
+    // Calculate chess board cell size based on container dimensions
+    // Account for header (~45px), footer (~45px), board border/padding (~20px)
+    $: cellSize = Math.floor(Math.min(dimensions.width - 30, dimensions.height - 120) / 8);
+
+    async function initChess() {
+        console.log('[ChessOverlay] initChess called, matchId:', $gamesOverlay.matchId);
+        if (!browser) return;
+
+        try {
+            const chessModule = await import('chess.js');
+            Chess = chessModule.Chess;
+            game = new Chess();
+
+            // Set up match event handler
+            console.log('[ChessOverlay] Registering match event handler...');
+            unsubscribeMatch = nakama.onMatchEvent(handleMatchEvent);
+            console.log('[ChessOverlay] Handler registered');
+
+            updateBoardDisplay();
+        } catch (e) {
+            console.error('[ChessOverlay] Failed to initialize chess:', e);
+        }
+    }
+
+    function handleMatchEvent(type, data) {
+        if (isDestroyed) return;
+
+        console.log('[Chess] handleMatchEvent:', type, 'op_code:', data?.op_code);
+
+        if (type === 'disconnect') {
+            gamesOverlay.setMode('finished');
+            gamesOverlay.updateState({ result: 'disconnect', reason: 'Disconnected from server' });
+            return;
+        }
+
+        if (type !== 'matchdata') return;
+
+        try {
+            const payload = JSON.parse(new TextDecoder().decode(data.data));
+            // Convert op_code to number for safe comparison (Nakama SDK uses snake_case)
+            const opCode = Number(data.op_code);
+
+            console.log('[Chess] Received op_code:', opCode, 'payload:', payload);
+
+            if (opCode === ChessOpCode.GAME_STATE) {
+                console.log('[Chess] Processing GAME_STATE with status:', payload.status);
+                handleGameState(payload);
+            } else if (opCode === ChessOpCode.MOVE) {
+                handleOpponentMove(payload);
+            } else if (opCode === ChessOpCode.GAME_OVER) {
+                handleGameOver(payload);
+            } else {
+                console.log('[Chess] Unknown opCode:', opCode);
+            }
+        } catch (e) {
+            console.error('Error handling match event:', e, data);
+        }
+    }
+
+    function handleGameState(payload) {
+        if (payload.status === 'waiting') {
+            myColor = payload.yourColor;
+            gamesOverlay.setMode('waiting');
+            gamesOverlay.updateState({
+                positionId: payload.positionId,
+                whiteName: payload.whiteName,
+                blackName: payload.blackName
+            });
+        } else if (payload.status === 'playing') {
+            const session = nakama.getSession();
+            myColor = payload.whiteId === session?.user_id ? 'w' : 'b';
+
+            if (game) {
+                game.load(payload.fen);
+            }
+
+            gamesOverlay.setMode('playing');
+            gamesOverlay.updateState({
+                positionId: payload.positionId,
+                fen: payload.fen,
+                turn: payload.turn || game?.turn(),
+                whiteId: payload.whiteId,
+                blackId: payload.blackId,
+                whiteName: payload.whiteName,
+                blackName: payload.blackName,
+                myColor
+            });
+
+            updateBoardDisplay();
+        } else if (payload.status === 'spectating') {
+            myColor = null; // Spectator has no color
+
+            if (game) {
+                game.load(payload.fen);
+            }
+
+            gamesOverlay.setMode('spectating');
+            gamesOverlay.updateState({
+                positionId: payload.positionId,
+                fen: payload.fen,
+                turn: payload.turn || game?.turn(),
+                whiteId: payload.whiteId,
+                blackId: payload.blackId,
+                whiteName: payload.whiteName,
+                blackName: payload.blackName
+            });
+
+            updateBoardDisplay();
+        }
+    }
+
+    function handleOpponentMove(payload) {
+        if (game) {
+            game.load(payload.fen);
+        }
+        moveHistory = [...moveHistory, payload.move];
+
+        gamesOverlay.updateState({
+            fen: payload.fen,
+            turn: game?.turn()
+        });
+
+        updateBoardDisplay();
+    }
+
+    function handleGameOver(payload) {
+        gamesOverlay.setMode('finished');
+        gamesOverlay.updateState({
+            result: payload.result,
+            reason: payload.reason
+        });
+    }
+
+    function updateBoardDisplay() {
+        if (!game) return;
+
+        const board2d = [];
+        const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+        // Spectators see from white's perspective, players see from their own side
+        const viewColor = myColor || 'w';
+        const ranks = viewColor === 'b' ? ['1', '2', '3', '4', '5', '6', '7', '8'] : ['8', '7', '6', '5', '4', '3', '2', '1'];
+
+        for (const rank of ranks) {
+            const row = [];
+            for (const file of files) {
+                const square = file + rank;
+                const piece = game.get(square);
+                row.push({
+                    square,
+                    piece: piece ? getPieceSymbol(piece) : null,
+                    color: piece?.color || null,
+                    isLight: (files.indexOf(file) + parseInt(rank)) % 2 === 1
+                });
+            }
+            board2d.push(row);
+        }
+
+        boardSquares = board2d;
+    }
+
+    function getPieceSymbol(piece) {
+        const symbols = {
+            'wk': '\u2654', 'wq': '\u2655', 'wr': '\u2656', 'wb': '\u2657', 'wn': '\u2658', 'wp': '\u2659',
+            'bk': '\u265A', 'bq': '\u265B', 'br': '\u265C', 'bb': '\u265D', 'bn': '\u265E', 'bp': '\u265F'
+        };
+        return symbols[piece.color + piece.type] || '';
+    }
+
+    function handleSquareClick(square) {
+        if ($gameMode !== 'playing') return;
+        if (!game || game.turn() !== myColor) return;
+
+        const piece = game.get(square);
+
+        if (selectedSquare) {
+            if (legalMoves.includes(square)) {
+                makeMove(selectedSquare, square);
+            }
+            selectedSquare = null;
+            legalMoves = [];
+        } else if (piece && piece.color === myColor) {
+            selectedSquare = square;
+            const moves = game.moves({ square, verbose: true });
+            legalMoves = moves.map(m => m.to);
+        }
+
+        updateBoardDisplay();
+    }
+
+    async function makeMove(from, to) {
+        if (!game) return;
+
+        const piece = game.get(from);
+        const isPromotion = piece.type === 'p' &&
+            ((piece.color === 'w' && to[1] === '8') || (piece.color === 'b' && to[1] === '1'));
+
+        const moveData = { from, to };
+        if (isPromotion) {
+            moveData.promotion = 'q';
+        }
+
+        const result = game.move(moveData);
+        if (!result) {
+            console.error('Invalid move');
+            return;
+        }
+
+        await nakama.sendMatchData($gamesOverlay.matchId, ChessOpCode.MOVE, moveData);
+
+        moveHistory = [...moveHistory, result];
+        gamesOverlay.updateState({
+            fen: game.fen(),
+            turn: game.turn()
+        });
+        updateBoardDisplay();
+    }
+
+    async function resign() {
+        if ($gameMode !== 'playing') return;
+        if (confirm('Are you sure you want to resign?')) {
+            await nakama.sendMatchData($gamesOverlay.matchId, ChessOpCode.RESIGN, {});
+        }
+    }
+
+    function copyInviteLink() {
+        const url = `${window.location.origin}/games/chess?match=${$gamesOverlay.matchId}`;
+        navigator.clipboard.writeText(url).then(() => {
+            alert('Invite link copied!');
+        });
+    }
+
+    function handleClose() {
+        if ($gamesOverlay.matchId) {
+            nakama.leaveMatch($gamesOverlay.matchId);
+        }
+
+        if (unsubscribeMatch) {
+            unsubscribeMatch();
+            unsubscribeMatch = null;
+        }
+
+        game = null;
+        boardSquares = [];
+        selectedSquare = null;
+        legalMoves = [];
+        moveHistory = [];
+        myColor = null;
+
+        gamesOverlay.closeGame();
+    }
+
+    function handleMinimize() {
+        gamesOverlay.toggleMinimized();
+    }
+
+    // Drag handling
+    function startDrag(e) {
+        if (e.target.closest('button')) return;
+
+        isDragging = true;
+        const rect = e.currentTarget.closest('.chess-overlay').getBoundingClientRect();
+        dragOffset = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+        e.preventDefault();
+    }
+
+    function handleMouseMove(e) {
+        if (isDragging) {
+            position = {
+                x: e.clientX - dragOffset.x,
+                y: window.innerHeight - (e.clientY - dragOffset.y) - dimensions.height
+            };
+        } else if (isResizing) {
+            const dx = e.clientX - startPos.x;
+            const dy = e.clientY - startPos.y;
+
+            let newWidth = startDimensions.width;
+            let newHeight = startDimensions.height;
+
+            if (resizeDirection.includes('e')) {
+                newWidth = Math.max(400, startDimensions.width + dx);
+            }
+            if (resizeDirection.includes('w')) {
+                newWidth = Math.max(400, startDimensions.width - dx);
+            }
+            if (resizeDirection.includes('s')) {
+                newHeight = Math.max(450, startDimensions.height + dy);
+            }
+            if (resizeDirection.includes('n')) {
+                newHeight = Math.max(450, startDimensions.height - dy);
+            }
+
+            dimensions = { width: newWidth, height: newHeight };
+        }
+    }
+
+    function stopDrag() {
+        if (isDragging || isResizing) {
+            savePosition();
+        }
+        isDragging = false;
+        isResizing = false;
+        resizeDirection = '';
+    }
+
+    function startResize(e, direction) {
+        e.preventDefault();
+        e.stopPropagation();
+        isResizing = true;
+        resizeDirection = direction;
+        startPos = { x: e.clientX, y: e.clientY };
+        startDimensions = { ...dimensions };
+    }
+
+    // Watch for overlay changes
+    let currentMatchId = null;
+    $: if (browser && $gamesOverlay.enabled && $gamesOverlay.matchId && $gamesOverlay.matchId !== currentMatchId) {
+        console.log('[ChessOverlay] Reactive: matchId changed from', currentMatchId, 'to', $gamesOverlay.matchId);
+        currentMatchId = $gamesOverlay.matchId;
+        initChess();
+    }
+
+    // Cleanup when game is closed
+    $: if (!$hasGame) {
+        currentMatchId = null;
+        if (unsubscribeMatch) {
+            unsubscribeMatch();
+            unsubscribeMatch = null;
+        }
+        game = null;
+        boardSquares = [];
+        moveHistory = [];
+        myColor = null;
+    }
+
+    onMount(() => {
+        loadPosition();
+        if (browser) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', stopDrag);
+
+            if ($gamesOverlay.enabled && $gamesOverlay.matchId) {
+                currentMatchId = $gamesOverlay.matchId;
+                initChess();
+            }
+        }
+    });
+
+    onDestroy(() => {
+        isDestroyed = true;
+        if (unsubscribeMatch) {
+            unsubscribeMatch();
+        }
+        if (browser) {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', stopDrag);
+        }
+    });
+
+    // Computed values for display
+    $: statusMessage = (() => {
+        switch ($gameMode) {
+            case 'waiting': return 'Waiting for opponent...';
+            case 'playing':
+                if (!game) return 'Loading...';
+                return game.turn() === myColor ? 'Your turn' : "Opponent's turn";
+            case 'spectating':
+                if (!$currentGame) return 'Spectating...';
+                return `${$currentGame.turn === 'w' ? 'White' : 'Black'} to move`;
+            case 'finished':
+                return getResultText();
+            default: return 'Connecting...';
+        }
+    })();
+
+    function getResultText() {
+        if (!$currentGame) return 'Game over';
+        const result = $currentGame.result;
+        const reason = $currentGame.reason || '';
+
+        if ($gameMode === 'spectating') {
+            if (result === '1-0') return `White wins${reason ? ` (${reason})` : ''}`;
+            if (result === '0-1') return `Black wins${reason ? ` (${reason})` : ''}`;
+            return `Draw${reason ? ` (${reason})` : ''}`;
+        }
+
+        if (result === '1-0') {
+            return myColor === 'w' ? 'You win!' : 'You lose';
+        } else if (result === '0-1') {
+            return myColor === 'b' ? 'You win!' : 'You lose';
+        } else if (result === 'timeout') {
+            return reason || 'Match timed out';
+        }
+        return `Draw${reason ? ` (${reason})` : ''}`;
+    }
+
+    $: headerTitle = (() => {
+        if (!$currentGame) return 'Chess960';
+        const white = $currentGame.whiteName || 'Waiting...';
+        const black = $currentGame.blackName || 'Waiting...';
+        return `${white} vs ${black}`;
+    })();
+
+    $: positionLabel = $currentGame?.positionId !== undefined
+        ? `#${$currentGame.positionId}`
+        : '';
+</script>
+
+{#if $gamesOverlay.enabled && $gamesOverlay.matchId}
+    <div
+        class="chess-overlay"
+        class:minimized={$gamesOverlay.minimized}
+        style="
+            {computedPosition.right !== 'auto' ? `right: ${computedPosition.right};` : ''}
+            {computedPosition.top !== 'auto' ? `top: ${computedPosition.top};` : ''}
+            {computedPosition.left !== 'auto' ? `left: ${computedPosition.left};` : ''}
+            {computedPosition.bottom !== 'auto' ? `bottom: ${computedPosition.bottom};` : ''}
+            {computedPosition.transform !== 'none' ? `transform: ${computedPosition.transform};` : ''}
+            width: {dimensions.width}px;
+            {!$gamesOverlay.minimized ? `height: ${dimensions.height}px;` : ''}
+        "
+    >
+        <div class="overlay-header" on:mousedown={startDrag}>
+            <div class="header-left">
+                <span class="header-icon">♛</span>
+                <div class="header-info">
+                    <span class="header-title">{headerTitle}</span>
+                    {#if positionLabel}
+                        <span class="header-meta">Position {positionLabel}</span>
+                    {/if}
+                </div>
+            </div>
+            <div class="header-controls">
+                {#if $gameMode === 'spectating'}
+                    <span class="mode-badge spectator">Spectating</span>
+                {/if}
+                <button class="control-btn" on:click={handleMinimize} title={$gamesOverlay.minimized ? 'Expand' : 'Minimize'}>
+                    {$gamesOverlay.minimized ? '□' : '−'}
+                </button>
+                <button class="control-btn close" on:click={handleClose} title="Close">×</button>
+            </div>
+        </div>
+
+        {#if !$gamesOverlay.minimized}
+            <div class="overlay-body">
+                <!-- Status Bar -->
+                <div class="status-bar" class:your-turn={$gameMode === 'playing' && game?.turn() === myColor}>
+                    {#if $gameMode === 'playing' && myColor}
+                        <span class="color-indicator" class:white={myColor === 'w'} class:black={myColor === 'b'}>
+                            {myColor === 'w' ? 'White' : 'Black'}
+                        </span>
+                    {/if}
+                    <span class="status-text">{statusMessage}</span>
+                </div>
+
+                <!-- Chess Board -->
+                <div class="board-wrapper">
+                    <div class="chess-board">
+                        {#each boardSquares as row}
+                            <div class="board-row">
+                                {#each row as cell}
+                                    <div
+                                        class="board-cell"
+                                        class:light={cell.isLight}
+                                        class:dark={!cell.isLight}
+                                        class:selected={selectedSquare === cell.square}
+                                        class:legal-move={legalMoves.includes(cell.square)}
+                                        class:clickable={$gameMode === 'playing'}
+                                        style="width: {cellSize}px; height: {cellSize}px;"
+                                        on:click={() => handleSquareClick(cell.square)}
+                                    >
+                                        {#if cell.piece}
+                                            <span class="piece" style="font-size: {cellSize * 0.7}px;" class:white-piece={cell.color === 'w'} class:black-piece={cell.color === 'b'}>
+                                                {cell.piece}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                {/each}
+                            </div>
+                        {/each}
+                    </div>
+                </div>
+            </div>
+
+            <div class="overlay-footer">
+                {#if $gameMode === 'waiting'}
+                    <button class="action-btn" on:click={copyInviteLink}>Copy Invite Link</button>
+                {:else if $gameMode === 'playing'}
+                    <button class="action-btn danger" on:click={resign}>Resign</button>
+                {:else if $gameMode === 'finished'}
+                    <button class="action-btn" on:click={handleClose}>Close</button>
+                {/if}
+
+                <div class="move-count">
+                    {moveHistory.length} moves
+                </div>
+            </div>
+
+            <!-- Resize handles -->
+            <div class="resize-handle resize-e" on:mousedown={(e) => startResize(e, 'e')}></div>
+            <div class="resize-handle resize-s" on:mousedown={(e) => startResize(e, 's')}></div>
+            <div class="resize-handle resize-se" on:mousedown={(e) => startResize(e, 'se')}></div>
+            <div class="resize-handle resize-w" on:mousedown={(e) => startResize(e, 'w')}></div>
+            <div class="resize-handle resize-sw" on:mousedown={(e) => startResize(e, 'sw')}></div>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .chess-overlay {
+        position: fixed;
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 9998;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        min-width: 400px;
+        min-height: 450px;
+        max-width: calc(100vw - 2rem);
+        max-height: calc(100vh - 2rem);
+    }
+
+    .chess-overlay.minimized {
+        height: auto !important;
+        min-height: auto;
+    }
+
+    .overlay-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-bottom: 1px solid #30363d;
+        cursor: move;
+        flex-shrink: 0;
+    }
+
+    .header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        min-width: 0;
+        flex: 1;
+    }
+
+    .header-icon {
+        font-size: 1.2rem;
+        color: #f59e0b;
+    }
+
+    .header-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+        min-width: 0;
+    }
+
+    .header-title {
+        color: #c9d1d9;
+        font-size: 0.75rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .header-meta {
+        color: #6e7681;
+        font-size: 0.65rem;
+    }
+
+    .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        flex-shrink: 0;
+    }
+
+    .mode-badge {
+        font-size: 0.6rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-weight: 500;
+    }
+
+    .mode-badge.spectator {
+        background: rgba(139, 92, 246, 0.2);
+        color: #a78bfa;
+    }
+
+    .control-btn {
+        width: 22px;
+        height: 22px;
+        border: none;
+        background: none;
+        color: #8b949e;
+        font-size: 1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .control-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+    }
+
+    .control-btn.close:hover {
+        color: #f85149;
+    }
+
+    .overlay-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0.5rem;
+        gap: 0.5rem;
+    }
+
+    .status-bar {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.4rem 0.6rem;
+        background: #1a1a2e;
+        border-radius: 4px;
+        flex-shrink: 0;
+    }
+
+    .status-bar.your-turn {
+        background: #2a4a2a;
+    }
+
+    .color-indicator {
+        font-weight: bold;
+        font-size: 0.7rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+    }
+
+    .color-indicator.white {
+        background: #fff;
+        color: #000;
+    }
+
+    .color-indicator.black {
+        background: #333;
+        color: #fff;
+    }
+
+    .status-text {
+        color: #ccc;
+        font-size: 0.75rem;
+    }
+
+    .board-wrapper {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 0;
+    }
+
+    .chess-board {
+        display: flex;
+        flex-direction: column;
+        border: 3px solid #333;
+        background: #333;
+    }
+
+    .board-row {
+        display: flex;
+    }
+
+    .board-cell {
+        width: 42px;
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+
+    .board-cell.clickable {
+        cursor: pointer;
+    }
+
+    .board-cell.light {
+        background: #f0d9b5;
+    }
+
+    .board-cell.dark {
+        background: #b58863;
+    }
+
+    .board-cell.selected {
+        background: #7fc97f !important;
+    }
+
+    .board-cell.legal-move::after {
+        content: '';
+        position: absolute;
+        width: 30%;
+        height: 30%;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    .board-cell.legal-move:hover {
+        background: #aad4aa !important;
+    }
+
+    .piece {
+        font-size: 2rem;
+        line-height: 1;
+        user-select: none;
+    }
+
+    .white-piece {
+        color: #fff;
+        text-shadow: 0 0 2px #000;
+    }
+
+    .black-piece {
+        color: #000;
+        text-shadow: 0 0 2px #fff;
+    }
+
+    .overlay-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-top: 1px solid #30363d;
+        flex-shrink: 0;
+    }
+
+    .action-btn {
+        padding: 0.4rem 0.8rem;
+        border: 1px solid #30363d;
+        background: #161b22;
+        color: #c9d1d9;
+        font-size: 0.7rem;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .action-btn:hover {
+        background: #21262d;
+        border-color: #484f58;
+    }
+
+    .action-btn.danger {
+        border-color: rgba(248, 81, 73, 0.4);
+        color: #f85149;
+    }
+
+    .action-btn.danger:hover {
+        background: rgba(248, 81, 73, 0.15);
+        border-color: #f85149;
+    }
+
+    .move-count {
+        color: #6e7681;
+        font-size: 0.65rem;
+    }
+
+    /* Resize handles */
+    .resize-handle {
+        position: absolute;
+        background: transparent;
+    }
+
+    .resize-e {
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: ew-resize;
+    }
+
+    .resize-w {
+        top: 0;
+        left: 0;
+        width: 6px;
+        height: 100%;
+        cursor: ew-resize;
+    }
+
+    .resize-s {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        cursor: ns-resize;
+    }
+
+    .resize-se {
+        bottom: 0;
+        right: 0;
+        width: 12px;
+        height: 12px;
+        cursor: se-resize;
+    }
+
+    .resize-sw {
+        bottom: 0;
+        left: 0;
+        width: 12px;
+        height: 12px;
+        cursor: sw-resize;
+    }
+
+    .resize-handle:hover {
+        background: rgba(245, 158, 11, 0.3);
+    }
+
+    @media (max-width: 500px) {
+        .chess-overlay {
+            right: 0.5rem !important;
+            left: 0.5rem !important;
+            top: auto !important;
+            bottom: 0.5rem !important;
+            width: auto !important;
+            transform: none !important;
+            max-width: none;
+        }
+
+        .board-cell {
+            width: 36px;
+            height: 36px;
+        }
+
+        .piece {
+            font-size: 1.7rem;
+        }
+
+        .resize-handle {
+            display: none;
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/EbookReaderOverlay.svelte b/frontend/src/lib/components/EbookReaderOverlay.svelte
new file mode 100644
index 0000000..501b70d
--- /dev/null
+++ b/frontend/src/lib/components/EbookReaderOverlay.svelte
@@ -0,0 +1,1180 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { ebookReader, currentBook, hasBook } from '$lib/stores/ebookReader';
+
+    let readerContainer;
+    let book = null;
+    let rendition = null;
+    let toc = [];
+    let loading = true;
+    let error = null;
+    let progress = 0;
+    let showToc = false;
+    let isDragging = false;
+    let dragOffset = { x: 0, y: 0 };
+    let position = { x: null, y: null };
+    let isResizing = false;
+    let resizeDirection = '';
+    let dimensions = { width: 500, height: 600 };
+    let startDimensions = { width: 0, height: 0 };
+    let startPos = { x: 0, y: 0 };
+    let readerTheme = 'light'; // 'light' or 'dark'
+    let readerFormat = 'comfortable'; // 'compact', 'comfortable', or 'spacious'
+
+    // Cleanup tracking
+    let currentView = null;           // Reference to current foliate-view element
+    let abortController = null;       // For cancelling fetch requests
+    let timeoutIds = [];              // Track all setTimeout IDs for cleanup
+    let isDestroyed = false;          // Track if component is destroyed
+
+    // Helper to create tracked timeouts that auto-cleanup
+    function safeTimeout(callback, delay) {
+        if (isDestroyed) return null;
+        const id = setTimeout(() => {
+            timeoutIds = timeoutIds.filter(tid => tid !== id);
+            if (!isDestroyed) callback();
+        }, delay);
+        timeoutIds.push(id);
+        return id;
+    }
+
+    // Clear all pending timeouts
+    function clearAllTimeouts() {
+        timeoutIds.forEach(id => clearTimeout(id));
+        timeoutIds = [];
+    }
+
+    // Cleanup current view and its event listeners
+    function cleanupCurrentView() {
+        if (currentView) {
+            // Remove event listeners (they were added with bound functions stored on the element)
+            if (currentView._relocateHandler) {
+                currentView.removeEventListener('relocate', currentView._relocateHandler);
+            }
+            if (currentView._loadHandler) {
+                currentView.removeEventListener('load', currentView._loadHandler);
+            }
+            currentView = null;
+        }
+    }
+
+    // Theme configurations
+    const themes = {
+        light: {
+            background: '#f5f0e6',  // Manila/cream
+            text: '#1a1a1a',
+            link: '#2563eb'
+        },
+        dark: {
+            background: '#1a1a1a',  // Dark charcoal
+            text: '#d4d4d4',
+            link: '#60a5fa'
+        }
+    };
+
+    // Format presets for readability
+    const formatPresets = {
+        compact: {
+            name: 'Compact',
+            lineHeight: '1.4',
+            paragraphSpacing: '0.5em',
+            icon: '≡'
+        },
+        comfortable: {
+            name: 'Comfortable',
+            lineHeight: '1.6',
+            paragraphSpacing: '1em',
+            icon: '☰'
+        },
+        spacious: {
+            name: 'Spacious',
+            lineHeight: '1.8',
+            paragraphSpacing: '1.5em',
+            icon: '≣'
+        }
+    };
+
+    // Load saved position, theme, and format from localStorage
+    function loadPosition() {
+        if (!browser) return;
+        try {
+            const saved = localStorage.getItem('ebookReaderPosition');
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                position = parsed.position || { x: null, y: null };
+                dimensions = parsed.dimensions || { width: 500, height: 600 };
+                readerTheme = parsed.theme || 'light';
+                readerFormat = parsed.format || 'comfortable';
+            }
+        } catch (e) {
+            console.warn('Failed to load reader position:', e);
+        }
+    }
+
+    function savePosition() {
+        if (!browser) return;
+        try {
+            localStorage.setItem('ebookReaderPosition', JSON.stringify({
+                position,
+                dimensions,
+                theme: readerTheme,
+                format: readerFormat
+            }));
+        } catch (e) {
+            console.warn('Failed to save reader position:', e);
+        }
+    }
+
+    function toggleTheme() {
+        readerTheme = readerTheme === 'light' ? 'dark' : 'light';
+        savePosition();
+        applyThemeToRendition();
+    }
+
+    function cycleFormat() {
+        const formats = ['compact', 'comfortable', 'spacious'];
+        const currentIndex = formats.indexOf(readerFormat);
+        readerFormat = formats[(currentIndex + 1) % formats.length];
+        savePosition();
+        applyThemeToRendition();
+    }
+
+    function applyThemeToRendition() {
+        if (!rendition) return;
+        const theme = themes[readerTheme];
+
+        // Apply theme to foliate-view's shadow root (for #header, #footer, #background)
+        applyThemeToShadowRoot();
+
+        // Get all loaded content and apply theme
+        try {
+            const contents = rendition.renderer?.getContents?.() || [];
+            for (const content of contents) {
+                if (content.doc) {
+                    applyThemeToDocument(content.doc);
+                }
+            }
+        } catch (e) {
+            console.warn('Could not apply theme to existing content:', e);
+        }
+    }
+
+    function applyThemeToShadowRoot() {
+        if (!rendition || !rendition.shadowRoot) return;
+        const theme = themes[readerTheme];
+        const shadowRoot = rendition.shadowRoot;
+
+        // Create or update style element in shadow root
+        let styleEl = shadowRoot.querySelector('#ebook-reader-shadow-theme');
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = 'ebook-reader-shadow-theme';
+            shadowRoot.prepend(styleEl);
+        }
+
+        // Style the foliate-view internal elements
+        styleEl.textContent = `
+            :host {
+                background: ${theme.background} !important;
+            }
+            #header, #footer, #background, [id="header"], [id="footer"], [id="background"] {
+                background: ${theme.background} !important;
+                background-color: ${theme.background} !important;
+                border-color: ${theme.background} !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+            *, *::before, *::after {
+                background-color: ${theme.background} !important;
+                border-color: ${theme.background} !important;
+            }
+            div, section, article, iframe {
+                background: ${theme.background} !important;
+                border: none !important;
+            }
+        `;
+    }
+
+    function applyThemeToDocument(doc) {
+        if (!doc) return;
+        const theme = themes[readerTheme];
+        const format = formatPresets[readerFormat];
+
+        // Create or update style element
+        let styleEl = doc.getElementById('ebook-reader-theme');
+        if (!styleEl) {
+            styleEl = doc.createElement('style');
+            styleEl.id = 'ebook-reader-theme';
+            doc.head.appendChild(styleEl);
+        }
+
+        // Theme and format CSS
+        styleEl.textContent = `
+            :root, html, body {
+                background: ${theme.background} !important;
+                background-color: ${theme.background} !important;
+                color: ${theme.text} !important;
+            }
+            *, *::before, *::after {
+                background-color: transparent !important;
+                color: inherit !important;
+            }
+            body, article, section, div, p, span, main, aside, header, footer, nav {
+                background: transparent !important;
+                background-color: transparent !important;
+            }
+            a, a:link, a:visited, a:hover, a:active {
+                color: ${theme.link} !important;
+            }
+            img, svg, picture, figure {
+                max-width: 100% !important;
+                height: auto !important;
+            }
+            pre, code {
+                background: ${readerTheme === 'dark' ? '#2d2d2d' : '#f0ebe0'} !important;
+            }
+
+            /* Format styles */
+            body, p, div, section, article {
+                line-height: ${format.lineHeight} !important;
+            }
+            p {
+                margin-bottom: ${format.paragraphSpacing} !important;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                margin-top: calc(${format.paragraphSpacing} * 1.5) !important;
+                margin-bottom: calc(${format.paragraphSpacing} * 0.75) !important;
+            }
+        `;
+    }
+
+    // Update view dimensions after resize
+    function updateViewDimensions() {
+        if (!rendition || !readerContainer) return;
+
+        const rect = readerContainer.getBoundingClientRect();
+        if (rect.width < 10 || rect.height < 10) return;
+
+        rendition.style.width = `${rect.width}px`;
+        rendition.style.height = `${rect.height}px`;
+
+        // Trigger re-render by going to current location
+        if (rendition.renderer?.setSize) {
+            rendition.renderer.setSize({ width: rect.width, height: rect.height });
+        }
+    }
+
+    // Get computed position (default to bottom-right if not set)
+    $: computedPosition = {
+        right: position.x === null ? '1rem' : 'auto',
+        bottom: position.y === null ? '1rem' : 'auto',
+        left: position.x !== null ? `${position.x}px` : 'auto',
+        top: position.y !== null ? `${position.y}px` : 'auto'
+    };
+
+    async function loadBook() {
+        if (!browser || !$currentBook) return;
+
+        // Cancel any in-flight fetch requests
+        if (abortController) {
+            abortController.abort();
+        }
+        abortController = new AbortController();
+        const signal = abortController.signal;
+
+        // Capture current book ID to detect stale responses
+        const loadingBookId = $currentBook.id;
+
+        // Clean up previous view
+        cleanupCurrentView();
+
+        loading = true;
+        error = null;
+
+        try {
+            const { makeBook } = await import('foliate-js/view.js');
+
+            const fileRes = await fetch($currentBook.filePath, { signal });
+
+            // Check if this request is stale (user switched books)
+            if ($currentBook?.id !== loadingBookId || isDestroyed) {
+                return;
+            }
+
+            if (!fileRes.ok) {
+                error = 'Failed to load ebook file';
+                loading = false;
+                return;
+            }
+
+            const blob = await fileRes.blob();
+
+            // Check again for stale response
+            if ($currentBook?.id !== loadingBookId || isDestroyed) {
+                return;
+            }
+
+            const file = new File([blob], $currentBook.title + '.epub', { type: 'application/epub+zip' });
+
+            book = await makeBook(file);
+            toc = book.toc || [];
+
+            loading = false;
+
+            // Wait for the loading overlay to be removed and container to have dimensions
+            await new Promise(resolve => safeTimeout(resolve, 100));
+
+            // Check for stale state after timeout
+            if ($currentBook?.id !== loadingBookId || isDestroyed) {
+                return;
+            }
+
+            if (readerContainer) {
+                readerContainer.innerHTML = '';
+
+                const view = document.createElement('foliate-view');
+                view.style.display = 'block';
+                view.style.width = '100%';
+                view.style.height = '100%';
+
+                readerContainer.appendChild(view);
+
+                // Wait for layout to compute (double RAF ensures paint completes)
+                await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+                const rect = readerContainer.getBoundingClientRect();
+
+                if (rect.width < 10 || rect.height < 10) {
+                    error = 'Reader container has no dimensions';
+                    return;
+                }
+
+                view.style.width = `${rect.width}px`;
+                view.style.height = `${rect.height}px`;
+
+                // Create and store event handlers so they can be removed later
+                view._relocateHandler = (e) => {
+                    progress = e.detail.fraction ? Math.round(e.detail.fraction * 100) : 0;
+                    ebookReader.setProgress(progress);
+
+                    if (e.detail.cfi) {
+                        ebookReader.savePosition(e.detail.cfi);
+                    }
+                };
+                view._loadHandler = (e) => {
+                    if (e.detail?.doc) {
+                        applyThemeToDocument(e.detail.doc);
+                    }
+                };
+
+                // Add event listeners
+                view.addEventListener('relocate', view._relocateHandler);
+                view.addEventListener('load', view._loadHandler);
+
+                // Store reference for cleanup
+                currentView = view;
+
+                await view.open(book);
+                rendition = view;
+
+                // Use init() with saved position or go to text start
+                const savedPosition = ebookReader.getPosition($currentBook.id);
+                try {
+                    await view.init({
+                        lastLocation: savedPosition || null,
+                        showTextStart: !savedPosition
+                    });
+                } catch (e) {
+                    try {
+                        await view.goToFraction(0);
+                    } catch (e2) {
+                        console.warn('Could not navigate to start:', e2);
+                    }
+                }
+
+                // Apply theme after initialization
+                safeTimeout(() => applyThemeToRendition(), 100);
+            }
+        } catch (e) {
+            // Ignore abort errors - they're expected when switching books
+            if (e.name === 'AbortError') {
+                return;
+            }
+            console.error('Failed to load ebook:', e);
+            error = 'Failed to load ebook: ' + e.message;
+            loading = false;
+        }
+    }
+
+    function goToTocItem(href) {
+        if (rendition && href) {
+            rendition.goTo(href);
+            showToc = false;
+        }
+    }
+
+    function prevPage() {
+        if (rendition) {
+            rendition.prev();
+        }
+    }
+
+    function nextPage() {
+        if (rendition) {
+            rendition.next();
+        }
+    }
+
+    function handleKeydown(event) {
+        if (!$ebookReader.enabled || $ebookReader.minimized) return;
+
+        if (event.key === 'ArrowLeft') {
+            prevPage();
+            event.preventDefault();
+        } else if (event.key === 'ArrowRight') {
+            nextPage();
+            event.preventDefault();
+        }
+    }
+
+    function handleClose() {
+        // Get current CFI if available
+        let cfi = null;
+        if (rendition && rendition.location?.cfi) {
+            cfi = rendition.location.cfi;
+        }
+
+        // Cancel any in-flight requests
+        if (abortController) {
+            abortController.abort();
+            abortController = null;
+        }
+
+        // Clear pending timeouts
+        clearAllTimeouts();
+
+        // Clean up view and its event listeners
+        cleanupCurrentView();
+
+        // Cleanup book
+        if (book) {
+            book.destroy?.();
+            book = null;
+        }
+        rendition = null;
+        toc = [];
+        loading = true;
+        error = null;
+
+        ebookReader.closeBook(cfi);
+    }
+
+    function handleMinimize() {
+        ebookReader.toggleMinimized();
+    }
+
+    // Drag handling
+    function startDrag(e) {
+        if (e.target.closest('button') || e.target.closest('.toc-sidebar')) return;
+
+        isDragging = true;
+        const rect = e.currentTarget.closest('.reader-overlay').getBoundingClientRect();
+        dragOffset = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+        e.preventDefault();
+    }
+
+    function handleMouseMove(e) {
+        if (isDragging) {
+            position = {
+                x: e.clientX - dragOffset.x,
+                y: e.clientY - dragOffset.y
+            };
+        } else if (isResizing) {
+            const dx = e.clientX - startPos.x;
+            const dy = e.clientY - startPos.y;
+
+            let newWidth = startDimensions.width;
+            let newHeight = startDimensions.height;
+
+            if (resizeDirection.includes('e')) {
+                newWidth = Math.max(350, startDimensions.width + dx);
+            }
+            if (resizeDirection.includes('w')) {
+                newWidth = Math.max(350, startDimensions.width - dx);
+            }
+            if (resizeDirection.includes('s')) {
+                newHeight = Math.max(200, startDimensions.height + dy);
+            }
+            if (resizeDirection.includes('n')) {
+                newHeight = Math.max(200, startDimensions.height - dy);
+            }
+
+            dimensions = { width: newWidth, height: newHeight };
+        }
+    }
+
+    function stopDrag() {
+        const wasResizing = isResizing;
+        if (isDragging || isResizing) {
+            savePosition();
+        }
+        isDragging = false;
+        isResizing = false;
+        resizeDirection = '';
+
+        // Update view dimensions after resize completes
+        if (wasResizing) {
+            safeTimeout(() => updateViewDimensions(), 50);
+        }
+    }
+
+    function startResize(e, direction) {
+        e.preventDefault();
+        e.stopPropagation();
+        isResizing = true;
+        resizeDirection = direction;
+        startPos = { x: e.clientX, y: e.clientY };
+        startDimensions = { ...dimensions };
+    }
+
+    // Watch for book changes - use a variable to track current book id
+    let currentBookId = null;
+    $: if (browser && $currentBook && $ebookReader.enabled && !$ebookReader.minimized) {
+        // Only load if book changed or not yet loaded
+        if ($currentBook.id !== currentBookId) {
+            currentBookId = $currentBook.id;
+            // Use safeTimeout to ensure DOM is ready
+            safeTimeout(() => loadBook(), 0);
+        }
+    }
+
+    // Cleanup when book is closed
+    $: if (!$hasBook) {
+        // Reset currentBookId so the same book can be reopened
+        currentBookId = null;
+
+        // Cancel any in-flight requests
+        if (abortController) {
+            abortController.abort();
+            abortController = null;
+        }
+
+        // Clean up view and its event listeners
+        cleanupCurrentView();
+
+        if (book) {
+            book.destroy?.();
+            book = null;
+        }
+        rendition = null;
+        toc = [];
+        loading = true;
+        error = null;
+    }
+
+    onMount(() => {
+        loadPosition();
+        if (browser) {
+            window.addEventListener('keydown', handleKeydown);
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', stopDrag);
+
+            // Try to load book on mount if conditions are met
+            if ($currentBook && $ebookReader.enabled && !$ebookReader.minimized) {
+                currentBookId = $currentBook.id;
+                loadBook();
+            }
+        }
+    });
+
+    onDestroy(() => {
+        // Mark as destroyed to prevent any callbacks from running
+        isDestroyed = true;
+
+        // Cancel any in-flight requests
+        if (abortController) {
+            abortController.abort();
+            abortController = null;
+        }
+
+        // Clear all pending timeouts
+        clearAllTimeouts();
+
+        // Clean up view and its event listeners
+        cleanupCurrentView();
+
+        if (browser) {
+            window.removeEventListener('keydown', handleKeydown);
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', stopDrag);
+        }
+        if (book) {
+            book.destroy?.();
+        }
+    });
+</script>
+
+{#if $ebookReader.enabled && $currentBook}
+    <div
+        class="reader-overlay"
+        class:minimized={$ebookReader.minimized}
+        style="
+            {computedPosition.right !== 'auto' ? `right: ${computedPosition.right};` : ''}
+            {computedPosition.bottom !== 'auto' ? `bottom: ${computedPosition.bottom};` : ''}
+            {computedPosition.left !== 'auto' ? `left: ${computedPosition.left};` : ''}
+            {computedPosition.top !== 'auto' ? `top: ${computedPosition.top};` : ''}
+            width: {dimensions.width}px;
+            {!$ebookReader.minimized ? `height: ${dimensions.height}px;` : ''}
+        "
+    >
+        <div class="reader-header" on:mousedown={startDrag}>
+            <div class="header-left">
+                {#if $currentBook.coverPath}
+                    <img src={$currentBook.coverPath} alt="" class="header-cover" />
+                {:else}
+                    <span class="header-cover-placeholder">◇</span>
+                {/if}
+                <div class="header-info">
+                    <span class="header-title">{$currentBook.title}</span>
+                    <span class="header-meta">{$currentBook.realmName} · @{$currentBook.username}</span>
+                </div>
+            </div>
+            <div class="header-controls">
+                <span class="progress-badge">{progress}%</span>
+                <button class="control-btn theme-btn" on:click={toggleTheme} title={readerTheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}>
+                    {readerTheme === 'light' ? '◐' : '◑'}
+                </button>
+                <button class="control-btn" on:click={handleMinimize} title={$ebookReader.minimized ? 'Expand' : 'Minimize'}>
+                    {$ebookReader.minimized ? '□' : '−'}
+                </button>
+                <button class="control-btn close" on:click={handleClose} title="Close">×</button>
+            </div>
+        </div>
+
+        {#if !$ebookReader.minimized}
+            <div class="reader-body">
+                <div class="reader-content">
+                    <!-- Container always in DOM for binding -->
+                    <div
+                        bind:this={readerContainer}
+                        class="reader-container"
+                        style="background: {themes[readerTheme].background};"
+                    ></div>
+
+                    <!-- Loading overlay -->
+                    {#if loading}
+                        <div class="reader-loading-overlay">
+                            <div class="loading-spinner"></div>
+                            <span>Loading ebook...</span>
+                        </div>
+                    {/if}
+
+                    <!-- Error overlay -->
+                    {#if error}
+                        <div class="reader-error-overlay">
+                            <span class="error-icon">!</span>
+                            <span>{error}</span>
+                        </div>
+                    {/if}
+
+                    <!-- TOC Sidebar -->
+                    <div class="toc-sidebar" class:open={showToc}>
+                        <div class="toc-header">
+                            <span>Contents</span>
+                            <button class="toc-close" on:click={() => showToc = false}>×</button>
+                        </div>
+                        <div class="toc-list">
+                            {#each toc as item}
+                                <button class="toc-item" on:click={() => goToTocItem(item.href)}>
+                                    {item.label}
+                                </button>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="reader-footer">
+                <button class="nav-btn" on:click={prevPage} title="Previous page">◂</button>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: {progress}%"></div>
+                </div>
+                <button class="nav-btn" on:click={nextPage} title="Next page">▸</button>
+                <button class="format-btn" on:click={cycleFormat} title="{formatPresets[readerFormat].name} format (click to cycle)">
+                    {formatPresets[readerFormat].icon}
+                </button>
+                {#if toc.length > 0}
+                    <button class="toc-btn" class:active={showToc} on:click={() => showToc = !showToc} title="Table of Contents">
+                        ☰
+                    </button>
+                {/if}
+            </div>
+
+            <!-- Resize handles -->
+            <div class="resize-handle resize-e" on:mousedown={(e) => startResize(e, 'e')}></div>
+            <div class="resize-handle resize-s" on:mousedown={(e) => startResize(e, 's')}></div>
+            <div class="resize-handle resize-se" on:mousedown={(e) => startResize(e, 'se')}></div>
+            <div class="resize-handle resize-w" on:mousedown={(e) => startResize(e, 'w')}></div>
+            <div class="resize-handle resize-sw" on:mousedown={(e) => startResize(e, 'sw')}></div>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .reader-overlay {
+        position: fixed;
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 9998;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        min-width: 350px;
+        min-height: 200px;
+        max-width: calc(100vw - 2rem);
+        max-height: calc(100vh - 2rem);
+    }
+
+    .reader-overlay.minimized {
+        height: auto !important;
+        min-height: auto;
+    }
+
+    .reader-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-bottom: 1px solid #30363d;
+        cursor: move;
+        flex-shrink: 0;
+    }
+
+    .header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        min-width: 0;
+        flex: 1;
+    }
+
+    .header-cover {
+        width: 24px;
+        height: 36px;
+        object-fit: cover;
+        border-radius: 2px;
+        flex-shrink: 0;
+    }
+
+    .header-cover-placeholder {
+        width: 24px;
+        height: 36px;
+        background: #21262d;
+        border: 1px solid #30363d;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.8rem;
+        color: #3b82f6;
+        flex-shrink: 0;
+    }
+
+    .header-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+        min-width: 0;
+    }
+
+    .header-title {
+        color: #c9d1d9;
+        font-size: 0.75rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .header-meta {
+        color: #6e7681;
+        font-size: 0.65rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        flex-shrink: 0;
+    }
+
+    .progress-badge {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+        font-size: 0.65rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-weight: 500;
+    }
+
+    .control-btn {
+        width: 22px;
+        height: 22px;
+        border: none;
+        background: none;
+        color: #8b949e;
+        font-size: 1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .control-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+    }
+
+    .control-btn.close:hover {
+        color: #f85149;
+    }
+
+    .control-btn.theme-btn {
+        font-size: 0.9rem;
+    }
+
+    .control-btn.theme-btn:hover {
+        background: rgba(251, 191, 36, 0.15);
+        color: #fbbf24;
+    }
+
+    .reader-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .reader-loading-overlay,
+    .reader-error-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+        color: #6e7681;
+        font-size: 0.8rem;
+        background: #0d1117;
+        z-index: 5;
+    }
+
+    .loading-spinner {
+        width: 24px;
+        height: 24px;
+        border: 2px solid #30363d;
+        border-top-color: #3b82f6;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    .reader-error-overlay {
+        color: #f85149;
+    }
+
+    .error-icon {
+        width: 32px;
+        height: 32px;
+        border: 2px solid #f85149;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+    }
+
+    .reader-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .reader-container {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        transition: background 0.2s ease;
+    }
+
+    .reader-container :global(foliate-view) {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    /* TOC Sidebar */
+    .toc-sidebar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 200px;
+        height: 100%;
+        background: #0d1117;
+        border-left: 1px solid #30363d;
+        transform: translateX(100%);
+        transition: transform 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        z-index: 10;
+    }
+
+    .toc-sidebar.open {
+        transform: translateX(0);
+    }
+
+    .toc-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #30363d;
+        color: #c9d1d9;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .toc-close {
+        background: none;
+        border: none;
+        color: #8b949e;
+        font-size: 1rem;
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+    }
+
+    .toc-close:hover {
+        color: #c9d1d9;
+    }
+
+    .toc-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.25rem 0;
+    }
+
+    .toc-list::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    .toc-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .toc-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+        border-radius: 2px;
+    }
+
+    .toc-item {
+        display: block;
+        width: 100%;
+        padding: 0.4rem 0.75rem;
+        background: none;
+        border: none;
+        color: #8b949e;
+        font-size: 0.7rem;
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .toc-item:hover {
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+    }
+
+    .reader-footer {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-top: 1px solid #30363d;
+        flex-shrink: 0;
+    }
+
+    .nav-btn {
+        width: 28px;
+        height: 24px;
+        border: 1px solid #30363d;
+        background: #161b22;
+        color: #8b949e;
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .nav-btn:hover {
+        background: #21262d;
+        color: #c9d1d9;
+        border-color: #484f58;
+    }
+
+    .progress-bar {
+        flex: 1;
+        height: 6px;
+        background: #21262d;
+        border-radius: 3px;
+        overflow: hidden;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: #3b82f6;
+        transition: width 0.2s ease;
+    }
+
+    .toc-btn {
+        width: 28px;
+        height: 24px;
+        border: 1px solid #30363d;
+        background: #161b22;
+        color: #8b949e;
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .toc-btn:hover {
+        background: #21262d;
+        color: #c9d1d9;
+        border-color: #484f58;
+    }
+
+    .toc-btn.active {
+        background: rgba(59, 130, 246, 0.15);
+        border-color: #3b82f6;
+        color: #3b82f6;
+    }
+
+    .format-btn {
+        width: 28px;
+        height: 24px;
+        border: 1px solid #30363d;
+        background: #161b22;
+        color: #8b949e;
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .format-btn:hover {
+        background: #21262d;
+        color: #c9d1d9;
+        border-color: #484f58;
+    }
+
+    /* Resize handles */
+    .resize-handle {
+        position: absolute;
+        background: transparent;
+    }
+
+    .resize-e {
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: ew-resize;
+    }
+
+    .resize-w {
+        top: 0;
+        left: 0;
+        width: 6px;
+        height: 100%;
+        cursor: ew-resize;
+    }
+
+    .resize-s {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        cursor: ns-resize;
+    }
+
+    .resize-se {
+        bottom: 0;
+        right: 0;
+        width: 12px;
+        height: 12px;
+        cursor: se-resize;
+    }
+
+    .resize-sw {
+        bottom: 0;
+        left: 0;
+        width: 12px;
+        height: 12px;
+        cursor: sw-resize;
+    }
+
+    .resize-handle:hover {
+        background: rgba(59, 130, 246, 0.3);
+    }
+
+    @media (max-width: 600px) {
+        .reader-overlay {
+            right: 0.5rem !important;
+            bottom: 0.5rem !important;
+            left: 0.5rem !important;
+            width: auto !important;
+            max-width: none;
+        }
+
+        .resize-handle {
+            display: none;
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/GlobalAudioPlayer.svelte b/frontend/src/lib/components/GlobalAudioPlayer.svelte
new file mode 100644
index 0000000..819f548
--- /dev/null
+++ b/frontend/src/lib/components/GlobalAudioPlayer.svelte
@@ -0,0 +1,112 @@
+<script>
+    import { browser } from '$app/environment';
+    import { audioPlaylist, currentTrack } from '$lib/stores/audioPlaylist';
+
+    let audioElement;
+
+    // Track the current source to detect changes
+    let currentSrc = '';
+
+    // Audio playback handlers
+    function handleTimeUpdate() {
+        if (audioElement) {
+            audioPlaylist.updateTime(audioElement.currentTime, audioElement.duration);
+        }
+    }
+
+    function handleAudioEnded() {
+        const playlist = $audioPlaylist;
+        if (playlist.repeat === 'one') {
+            audioElement.currentTime = 0;
+            audioElement.play().then(() => {
+                audioPlaylist.confirmPlaying();
+            }).catch(() => {});
+        } else if (playlist.nowPlaying) {
+            // NowPlaying track ended - go to queue or stop
+            if (playlist.queue.length > 0) {
+                audioPlaylist.next();
+            } else {
+                audioPlaylist.clearNowPlaying();
+                audioPlaylist.setPlaying(false);
+            }
+        } else {
+            audioPlaylist.next();
+        }
+    }
+
+    // Handle shouldPlay signal - play when audio is ready
+    function handleCanPlay() {
+        if ($audioPlaylist.shouldPlay && audioElement) {
+            audioElement.play().then(() => {
+                audioPlaylist.confirmPlaying();
+            }).catch(e => {
+                console.error('Failed to play:', e);
+            });
+        }
+    }
+
+    // Handle audio errors
+    function handleError(e) {
+        console.error('Audio playback error:', e);
+        audioPlaylist.setPlaying(false);
+    }
+
+    // Watch for track changes - load new track when source changes
+    $: if (browser && audioElement && $currentTrack) {
+        const filePath = $currentTrack.filePath;
+        if (currentSrc !== filePath) {
+            currentSrc = filePath;
+            audioElement.src = filePath;
+            audioElement.load();
+        } else if ($audioPlaylist.shouldPlay && $audioPlaylist.currentTime === 0) {
+            // Same track but shouldPlay is true and time is 0 - restart from beginning
+            audioElement.currentTime = 0;
+        }
+    }
+
+    // Watch for shouldPlay changes - handles case where audio is already loaded
+    $: if (browser && audioElement && $audioPlaylist.shouldPlay) {
+        // If audio is ready (readyState >= 3 = HAVE_FUTURE_DATA), play immediately
+        if (audioElement.readyState >= 3) {
+            audioElement.play().then(() => {
+                audioPlaylist.confirmPlaying();
+            }).catch(e => {
+                console.error('Failed to play:', e);
+            });
+        }
+    }
+
+    // Watch for play/pause state changes
+    $: if (browser && audioElement) {
+        if ($audioPlaylist.isPlaying && audioElement.paused) {
+            audioElement.play().catch(() => {});
+        } else if (!$audioPlaylist.isPlaying && !audioElement.paused) {
+            audioElement.pause();
+        }
+    }
+
+    // Watch for volume changes
+    $: if (browser && audioElement) {
+        audioElement.volume = $audioPlaylist.muted ? 0 : $audioPlaylist.volume;
+    }
+
+    // Watch for seek (from external controls)
+    $: if (browser && audioElement && $currentTrack) {
+        const diff = Math.abs(audioElement.currentTime - $audioPlaylist.currentTime);
+        // Only seek if difference is significant (more than 1 second) to avoid feedback loops
+        if (diff > 1 && !audioElement.seeking) {
+            audioElement.currentTime = $audioPlaylist.currentTime;
+        }
+    }
+</script>
+
+<!-- Hidden audio element for global playback - persists across terminal open/close -->
+<audio
+    bind:this={audioElement}
+    on:timeupdate={handleTimeUpdate}
+    on:ended={handleAudioEnded}
+    on:canplay={handleCanPlay}
+    on:error={handleError}
+    preload="auto"
+    style="display: none;"
+></audio>
diff --git a/frontend/src/lib/components/GraffitiEditor.svelte b/frontend/src/lib/components/GraffitiEditor.svelte
new file mode 100644
index 0000000..318f0a8
--- /dev/null
+++ b/frontend/src/lib/components/GraffitiEditor.svelte
@@ -0,0 +1,871 @@
+<script>
+    import { createEventDispatcher, onMount } from 'svelte';
+
+    export let initialData = null; // JSON pixel data for editing existing graffiti
+    export let existingUrl = ''; // URL of existing graffiti GIF
+
+    const dispatch = createEventDispatcher();
+
+    const WIDTH = 88;
+    const HEIGHT = 33;
+    const PIXEL_SIZE = 8; // Display size per pixel
+
+    let canvas;
+    let ctx;
+    let pixels = []; // 2D array of {r, g, b, a} or null (transparent)
+    let currentColor = { r: 255, g: 255, b: 255, a: 255 };
+    let colorHex = '#ffffff';
+    let isDrawing = false;
+    let tool = 'pencil'; // pencil, eraser, fill, eyedropper
+    let penSize = 1; // Brush width: 1=1x1, 2=2x2, 3=3x3, 5=5x5
+    let showGrid = true;
+    let hasChanges = false;
+    let saving = false;
+
+    // Brush sizes: 1x1=1px, 2x2=4px, 3x3=9px, 5x5=25px
+    const penSizes = [1, 2, 3, 5];
+
+    // Undo history (stores pixel array snapshots)
+    let history = [];
+    const MAX_HISTORY = 50;
+    let isStrokeActive = false;
+
+    // Color palette - 16 terminal colors (ANSI) + transparency
+    const palette = [
+        '#000000', '#aa0000', '#00aa00', '#aa5500',  // 0-3: Black, Red, Green, Yellow/Brown
+        '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa',  // 4-7: Blue, Magenta, Cyan, White (light gray)
+        '#555555', '#ff5555', '#55ff55', '#ffff55',  // 8-11: Bright Black, Bright Red, Bright Green, Bright Yellow
+        '#5555ff', '#ff55ff', '#55ffff', '#ffffff'   // 12-15: Bright Blue, Bright Magenta, Bright Cyan, Bright White
+    ];
+
+    onMount(() => {
+        initCanvas();
+        if (initialData) {
+            loadFromJson(initialData);
+        } else {
+            clearCanvas();
+        }
+
+        // Keyboard shortcuts
+        function handleKeyDown(e) {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+                e.preventDefault();
+                undo();
+            }
+        }
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    });
+
+    function initCanvas() {
+        if (!canvas) return;
+        ctx = canvas.getContext('2d');
+        canvas.width = WIDTH * PIXEL_SIZE;
+        canvas.height = HEIGHT * PIXEL_SIZE;
+    }
+
+    function clearCanvas() {
+        pixels = Array(HEIGHT).fill(null).map(() =>
+            Array(WIDTH).fill(null)
+        );
+        redraw();
+        hasChanges = true;
+    }
+
+    function redraw() {
+        if (!ctx) return;
+
+        // Clear with transparent background
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw checkerboard background for transparency
+        for (let y = 0; y < HEIGHT; y++) {
+            for (let x = 0; x < WIDTH; x++) {
+                const isLight = (x + y) % 2 === 0;
+                ctx.fillStyle = isLight ? '#2a2a2a' : '#1a1a1a';
+                ctx.fillRect(x * PIXEL_SIZE, y * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
+            }
+        }
+
+        // Draw pixels
+        for (let y = 0; y < HEIGHT; y++) {
+            for (let x = 0; x < WIDTH; x++) {
+                const pixel = pixels[y]?.[x];
+                if (pixel) {
+                    ctx.fillStyle = `rgba(${pixel.r}, ${pixel.g}, ${pixel.b}, ${pixel.a / 255})`;
+                    ctx.fillRect(x * PIXEL_SIZE, y * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
+                }
+            }
+        }
+
+        // Draw grid (on top of everything)
+        if (showGrid) {
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
+            ctx.lineWidth = 1;
+            for (let x = 0; x <= WIDTH; x++) {
+                ctx.beginPath();
+                ctx.moveTo(x * PIXEL_SIZE, 0);
+                ctx.lineTo(x * PIXEL_SIZE, HEIGHT * PIXEL_SIZE);
+                ctx.stroke();
+            }
+            for (let y = 0; y <= HEIGHT; y++) {
+                ctx.beginPath();
+                ctx.moveTo(0, y * PIXEL_SIZE);
+                ctx.lineTo(WIDTH * PIXEL_SIZE, y * PIXEL_SIZE);
+                ctx.stroke();
+            }
+        }
+    }
+
+    function getPixelCoords(e) {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.floor((e.clientX - rect.left) / PIXEL_SIZE);
+        const y = Math.floor((e.clientY - rect.top) / PIXEL_SIZE);
+        return { x: Math.max(0, Math.min(WIDTH - 1, x)), y: Math.max(0, Math.min(HEIGHT - 1, y)) };
+    }
+
+    // Deep clone the pixel array for undo history
+    function clonePixels() {
+        return pixels.map(row => row.map(p => p ? { ...p } : null));
+    }
+
+    // Save current state to history (call before making changes)
+    function saveToHistory() {
+        history.push(clonePixels());
+        if (history.length > MAX_HISTORY) {
+            history.shift(); // Remove oldest
+        }
+    }
+
+    // Undo last stroke
+    function undo() {
+        if (history.length === 0) return;
+        pixels = history.pop();
+        redraw();
+        hasChanges = history.length > 0 || pixels.some(row => row.some(p => p !== null));
+    }
+
+    function handleMouseDown(e) {
+        // Save state at start of stroke
+        if (!isStrokeActive) {
+            saveToHistory();
+            isStrokeActive = true;
+        }
+        isDrawing = true;
+        handleDraw(e);
+    }
+
+    function handleMouseMove(e) {
+        if (!isDrawing) return;
+        handleDraw(e);
+    }
+
+    function handleMouseUp() {
+        isDrawing = false;
+        isStrokeActive = false;
+    }
+
+    function drawPixelsInRadius(centerX, centerY, value) {
+        // Draw a square brush of penSize x penSize pixels
+        // Offset so brush is centered on cursor
+        const offset = Math.floor(penSize / 2);
+        for (let dy = 0; dy < penSize; dy++) {
+            for (let dx = 0; dx < penSize; dx++) {
+                const px = centerX - offset + dx;
+                const py = centerY - offset + dy;
+                // Check bounds
+                if (px >= 0 && px < WIDTH && py >= 0 && py < HEIGHT) {
+                    pixels[py][px] = value;
+                }
+            }
+        }
+    }
+
+    function handleDraw(e) {
+        const { x, y } = getPixelCoords(e);
+
+        if (tool === 'pencil') {
+            drawPixelsInRadius(x, y, { ...currentColor });
+            hasChanges = true;
+        } else if (tool === 'eraser') {
+            drawPixelsInRadius(x, y, null);
+            hasChanges = true;
+        } else if (tool === 'fill') {
+            // Save history before fill (it's a single action, not a stroke)
+            saveToHistory();
+            floodFill(x, y);
+            hasChanges = true;
+        } else if (tool === 'eyedropper') {
+            const pixel = pixels[y]?.[x];
+            if (pixel) {
+                currentColor = { ...pixel };
+                colorHex = rgbToHex(pixel.r, pixel.g, pixel.b);
+            }
+            tool = 'pencil'; // Switch back to pencil after picking
+            // Don't save history for eyedropper - it doesn't modify pixels
+            return;
+        }
+
+        redraw();
+    }
+
+    function floodFill(startX, startY) {
+        const targetPixel = pixels[startY]?.[startX];
+        const targetKey = targetPixel ? `${targetPixel.r},${targetPixel.g},${targetPixel.b},${targetPixel.a}` : 'null';
+        const fillKey = `${currentColor.r},${currentColor.g},${currentColor.b},${currentColor.a}`;
+
+        if (targetKey === fillKey) return;
+
+        const stack = [[startX, startY]];
+        const visited = new Set();
+
+        while (stack.length > 0) {
+            const [x, y] = stack.pop();
+            const key = `${x},${y}`;
+
+            if (visited.has(key)) continue;
+            if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) continue;
+
+            const pixel = pixels[y]?.[x];
+            const pixelKey = pixel ? `${pixel.r},${pixel.g},${pixel.b},${pixel.a}` : 'null';
+
+            if (pixelKey !== targetKey) continue;
+
+            visited.add(key);
+            pixels[y][x] = { ...currentColor };
+
+            stack.push([x + 1, y]);
+            stack.push([x - 1, y]);
+            stack.push([x, y + 1]);
+            stack.push([x, y - 1]);
+        }
+    }
+
+    function rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+    }
+
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: 255
+        } : null;
+    }
+
+    function handleColorChange(e) {
+        colorHex = e.target.value;
+        const rgb = hexToRgb(colorHex);
+        if (rgb) {
+            currentColor = rgb;
+        }
+    }
+
+    function selectPaletteColor(hex) {
+        colorHex = hex;
+        const rgb = hexToRgb(hex);
+        if (rgb) {
+            currentColor = rgb;
+        }
+    }
+
+    function exportJson() {
+        const data = {
+            version: 1,
+            width: WIDTH,
+            height: HEIGHT,
+            pixels: pixels
+        };
+        const json = JSON.stringify(data);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'graffiti.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+
+    function importJson(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        // Security: Limit file size to 100KB
+        if (file.size > 100 * 1024) {
+            alert('File too large (max 100KB)');
+            e.target.value = '';
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            try {
+                const data = JSON.parse(event.target.result);
+                if (!loadFromJson(data)) {
+                    alert('Invalid graffiti file format');
+                }
+            } catch (err) {
+                alert('Invalid graffiti file');
+            }
+        };
+        reader.readAsText(file);
+        e.target.value = '';
+    }
+
+    // Sanitize a single pixel value - prevent prototype pollution and validate structure
+    function sanitizePixel(pixel) {
+        if (pixel === null || pixel === undefined) {
+            return null;
+        }
+        // Must be a plain object with r, g, b, a properties
+        if (typeof pixel !== 'object' || Array.isArray(pixel)) {
+            return null;
+        }
+        // Explicitly extract and validate color values (prevents prototype pollution)
+        const r = Number(pixel.r);
+        const g = Number(pixel.g);
+        const b = Number(pixel.b);
+        const a = Number(pixel.a);
+        // Validate ranges (0-255)
+        if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {
+            return null;
+        }
+        return {
+            r: Math.max(0, Math.min(255, Math.floor(r))),
+            g: Math.max(0, Math.min(255, Math.floor(g))),
+            b: Math.max(0, Math.min(255, Math.floor(b))),
+            a: Math.max(0, Math.min(255, Math.floor(a)))
+        };
+    }
+
+    function loadFromJson(data) {
+        // Validate version
+        if (data.version !== 1) {
+            return false;
+        }
+        // Validate pixels array exists and is an array
+        if (!Array.isArray(data.pixels)) {
+            return false;
+        }
+        // Validate dimensions
+        if (data.pixels.length !== HEIGHT) {
+            return false;
+        }
+        // Sanitize and validate each row
+        const sanitizedPixels = [];
+        for (let y = 0; y < HEIGHT; y++) {
+            const row = data.pixels[y];
+            if (!Array.isArray(row) || row.length !== WIDTH) {
+                return false;
+            }
+            const sanitizedRow = [];
+            for (let x = 0; x < WIDTH; x++) {
+                sanitizedRow.push(sanitizePixel(row[x]));
+            }
+            sanitizedPixels.push(sanitizedRow);
+        }
+        pixels = sanitizedPixels;
+        redraw();
+        hasChanges = true;
+        return true;
+    }
+
+    // Generate GIF using a simple GIF encoder
+    async function generateGif() {
+        // Create an offscreen canvas at actual size
+        const offCanvas = document.createElement('canvas');
+        offCanvas.width = WIDTH;
+        offCanvas.height = HEIGHT;
+        const offCtx = offCanvas.getContext('2d');
+
+        // Draw pixels at 1:1 scale
+        const imageData = offCtx.createImageData(WIDTH, HEIGHT);
+        for (let y = 0; y < HEIGHT; y++) {
+            for (let x = 0; x < WIDTH; x++) {
+                const idx = (y * WIDTH + x) * 4;
+                const pixel = pixels[y]?.[x];
+                if (pixel) {
+                    imageData.data[idx] = pixel.r;
+                    imageData.data[idx + 1] = pixel.g;
+                    imageData.data[idx + 2] = pixel.b;
+                    imageData.data[idx + 3] = pixel.a;
+                } else {
+                    imageData.data[idx] = 0;
+                    imageData.data[idx + 1] = 0;
+                    imageData.data[idx + 2] = 0;
+                    imageData.data[idx + 3] = 0;
+                }
+            }
+        }
+        offCtx.putImageData(imageData, 0, 0);
+
+        // Convert to PNG blob (GIF requires external library, using PNG for now)
+        return new Promise((resolve) => {
+            offCanvas.toBlob((blob) => {
+                resolve(blob);
+            }, 'image/png');
+        });
+    }
+
+    async function saveGraffiti() {
+        saving = true;
+        try {
+            const blob = await generateGif();
+
+            const formData = new FormData();
+            formData.append('graffiti', blob, 'graffiti.png');
+
+            const response = await fetch('/api/user/graffiti', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                hasChanges = false;
+                dispatch('save', { url: data.graffitiUrl });
+            } else {
+                alert(data.error || 'Failed to save graffiti');
+            }
+        } catch (err) {
+            console.error('Failed to save graffiti:', err);
+            alert('Failed to save graffiti');
+        } finally {
+            saving = false;
+        }
+    }
+
+    async function deleteGraffiti() {
+        if (!confirm('Are you sure you want to delete your graffiti?')) return;
+
+        saving = true;
+        try {
+            const response = await fetch('/api/user/graffiti', {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                clearCanvas();
+                hasChanges = false;
+                dispatch('delete');
+            } else {
+                alert(data.error || 'Failed to delete graffiti');
+            }
+        } catch (err) {
+            console.error('Failed to delete graffiti:', err);
+            alert('Failed to delete graffiti');
+        } finally {
+            saving = false;
+        }
+    }
+</script>
+
+<div class="graffiti-editor">
+    <div class="toolbar">
+        <div class="tool-group">
+            <button
+                class="tool-btn"
+                class:active={tool === 'pencil'}
+                on:click={() => tool = 'pencil'}
+                title="Pencil (P)"
+            >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 19l7-7 3 3-7 7-3-3z"/>
+                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
+                    <path d="M2 2l7.586 7.586"/>
+                </svg>
+            </button>
+            <button
+                class="tool-btn"
+                class:active={tool === 'eraser'}
+                on:click={() => tool = 'eraser'}
+                title="Eraser (E)"
+            >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 20H7L3 16a1 1 0 0 1 0-1.41l11-11a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41L9 22"/>
+                </svg>
+            </button>
+            <button
+                class="tool-btn"
+                class:active={tool === 'fill'}
+                on:click={() => tool = 'fill'}
+                title="Fill (F)"
+            >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2L5 12l6 6 3-3"/>
+                    <path d="M2 22l5-5"/>
+                    <path d="M5.5 12.5L11 18"/>
+                    <path d="M19 22c1.5 0 3-1 3-2.5s-1.5-2.5-3-4.5c-1.5 2-3 3-3 4.5s1.5 2.5 3 2.5z" fill="currentColor"/>
+                </svg>
+            </button>
+            <button
+                class="tool-btn"
+                class:active={tool === 'eyedropper'}
+                on:click={() => tool = 'eyedropper'}
+                title="Eyedropper (I)"
+            >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M2 22l1-1h3l9-9"/>
+                    <path d="M3 21v-3l9-9"/>
+                    <circle cx="17" cy="7" r="4"/>
+                </svg>
+            </button>
+        </div>
+
+        <div class="tool-group pen-sizes">
+            <span class="pen-label">Size:</span>
+            {#each penSizes as size}
+                <button
+                    class="pen-size-btn"
+                    class:active={penSize === size}
+                    on:click={() => penSize = size}
+                    title="{size}x{size} ({size * size}px)"
+                >
+                    <span class="pen-dot" style="width: {4 + size * 3}px; height: {4 + size * 3}px;"></span>
+                </button>
+            {/each}
+        </div>
+
+        <div class="tool-group">
+            <label class="grid-toggle">
+                <input type="checkbox" bind:checked={showGrid} on:change={redraw} />
+                Grid
+            </label>
+        </div>
+
+        <div class="tool-group">
+            <button class="tool-btn" on:click={undo} disabled={history.length === 0} title="Undo (Ctrl+Z)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 7v6h6"/>
+                    <path d="M3 13a9 9 0 1 0 3-7.5L3 7"/>
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <div class="canvas-container">
+        <canvas
+            bind:this={canvas}
+            on:mousedown={handleMouseDown}
+            on:mousemove={handleMouseMove}
+            on:mouseup={handleMouseUp}
+            on:mouseleave={handleMouseUp}
+        ></canvas>
+        <div class="canvas-size">{WIDTH}x{HEIGHT}</div>
+    </div>
+
+    <div class="color-section">
+        <div class="current-color">
+            <div class="color-swatch" style="background: {colorHex};"></div>
+            <input
+                type="color"
+                value={colorHex}
+                on:input={handleColorChange}
+                title="Pick custom color"
+            />
+        </div>
+        <div class="palette">
+            {#each palette as color}
+                <button
+                    class="palette-color"
+                    class:selected={colorHex === color}
+                    style="background: {color};"
+                    on:click={() => selectPaletteColor(color)}
+                ></button>
+            {/each}
+            <button
+                class="palette-color transparent-btn"
+                class:selected={currentColor.a === 0}
+                on:click={() => { currentColor = { r: 0, g: 0, b: 0, a: 0 }; }}
+                title="Transparent"
+            >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="4" y1="4" x2="20" y2="20"/>
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <div class="actions">
+        <div class="file-actions">
+            <button class="btn btn-secondary" on:click={exportJson}>
+                Export JSON
+            </button>
+            <label class="btn btn-secondary import-btn">
+                Import JSON
+                <input type="file" accept=".json" on:change={importJson} />
+            </label>
+        </div>
+        <div class="save-actions">
+            {#if existingUrl}
+                <button class="btn btn-danger" on:click={deleteGraffiti} disabled={saving}>
+                    Delete
+                </button>
+            {/if}
+            <button class="btn btn-primary" on:click={saveGraffiti} disabled={saving || !hasChanges}>
+                {saving ? 'Saving...' : 'Save Graffiti'}
+            </button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .graffiti-editor {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .toolbar {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .tool-group {
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+    }
+
+    .tool-btn {
+        padding: 0.5rem;
+        background: var(--bg-secondary, #1a1a1a);
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        color: var(--text, #fff);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        transition: all 0.15s;
+    }
+
+    .tool-btn:hover {
+        background: var(--bg-hover, #2a2a2a);
+    }
+
+    .tool-btn.active {
+        background: var(--primary, #561D5E);
+        border-color: var(--primary, #561D5E);
+    }
+
+    .tool-btn:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    .tool-btn:disabled:hover {
+        background: var(--bg-secondary, #1a1a1a);
+    }
+
+    .grid-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        color: var(--gray, #888);
+        cursor: pointer;
+    }
+
+    .canvas-container {
+        position: relative;
+        display: block;
+        width: fit-content;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        overflow: hidden;
+        line-height: 0;
+    }
+
+    canvas {
+        display: block;
+        cursor: crosshair;
+        image-rendering: pixelated;
+    }
+
+    .canvas-size {
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        font-size: 0.75rem;
+        color: var(--gray, #888);
+        background: rgba(0, 0, 0, 0.7);
+        padding: 2px 6px;
+        border-radius: 2px;
+    }
+
+    .color-section {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .current-color {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .color-swatch {
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+    }
+
+    .current-color input[type="color"] {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .palette {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+    }
+
+    .palette-color {
+        width: 24px;
+        height: 24px;
+        border: 1px solid var(--border, #333);
+        border-radius: 2px;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .palette-color:hover {
+        transform: scale(1.1);
+    }
+
+    .palette-color.selected {
+        outline: 2px solid var(--primary, #561D5E);
+        outline-offset: 1px;
+    }
+
+    .transparent-btn {
+        background: repeating-conic-gradient(#333 0% 25%, #1a1a1a 0% 50%) 50% / 8px 8px;
+    }
+
+    .actions {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .file-actions, .save-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .import-btn {
+        cursor: pointer;
+    }
+
+    .import-btn input {
+        display: none;
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border-radius: 4px;
+        border: 1px solid var(--border, #333);
+        cursor: pointer;
+        font-size: 0.875rem;
+        transition: all 0.15s;
+    }
+
+    .btn-secondary {
+        background: var(--bg-secondary, #1a1a1a);
+        color: var(--text, #fff);
+    }
+
+    .btn-secondary:hover {
+        background: var(--bg-hover, #2a2a2a);
+    }
+
+    .btn-primary {
+        background: var(--primary, #561D5E);
+        color: white;
+        border-color: var(--primary, #561D5E);
+    }
+
+    .btn-primary:hover:not(:disabled) {
+        background: var(--primary-hover, #6d2575);
+    }
+
+    .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .btn-danger {
+        background: #a33;
+        color: white;
+        border-color: #a33;
+    }
+
+    .btn-danger:hover:not(:disabled) {
+        background: #c44;
+    }
+
+    .pen-sizes {
+        gap: 0.25rem;
+    }
+
+    .pen-label {
+        font-size: 0.75rem;
+        color: var(--gray, #888);
+        margin-right: 0.25rem;
+    }
+
+    .pen-size-btn {
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        background: var(--bg-secondary, #1a1a1a);
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s;
+    }
+
+    .pen-size-btn:hover {
+        background: var(--bg-hover, #2a2a2a);
+    }
+
+    .pen-size-btn.active {
+        background: var(--primary, #561D5E);
+        border-color: var(--primary, #561D5E);
+    }
+
+    .pen-dot {
+        background: var(--text, #fff);
+        border-radius: 50%;
+    }
+</style>
diff --git a/frontend/src/lib/components/StreamPlayer.svelte b/frontend/src/lib/components/StreamPlayer.svelte
new file mode 100644
index 0000000..60ca496
--- /dev/null
+++ b/frontend/src/lib/components/StreamPlayer.svelte
@@ -0,0 +1,485 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { streamTiles } from '$lib/stores/streamTiles';
+
+    /** @type {{ streamKey: string, name: string, username: string, realmId: number, offlineImageUrl?: string, muted?: boolean, volume?: number }} */
+    export let stream;
+    /** @type {boolean} Whether to show close button */
+    export let showClose = true;
+    /** @type {boolean} Whether this is the main stream (not a tile) */
+    export let isMain = false;
+
+    const STREAM_PORT = import.meta.env.VITE_STREAM_PORT || '8088';
+
+    let player;
+    let playerElement;
+    let viewerToken = null;
+    let actualStreamKey = null;  // The real stream key (not realm name)
+    let isLive = false;
+    let loading = true;
+    let error = '';
+    let playerId = `player-${stream.realmId}-${Math.random().toString(36).substr(2, 9)}`;
+    let showControls = false;
+    let showVolumeSlider = false;
+
+    // Get muted/volume from stream object with defaults
+    $: muted = stream.muted !== undefined ? stream.muted : true;
+    $: volume = stream.volume !== undefined ? stream.volume : 0.5;
+
+    onMount(async () => {
+        if (!browser) return;
+
+        // Wait for OvenPlayer to be available
+        const waitForPlayer = async () => {
+            let attempts = 0;
+            while (!window.OvenPlayer && attempts < 30) {
+                await new Promise(r => setTimeout(r, 100));
+                attempts++;
+            }
+            return !!window.OvenPlayer;
+        };
+
+        const playerReady = await waitForPlayer();
+        if (!playerReady) {
+            error = 'Player not available';
+            loading = false;
+            return;
+        }
+
+        // Get viewer token first
+        await getViewerToken();
+
+        // Then get stream key (requires valid viewer token)
+        if (viewerToken) {
+            await getStreamKey();
+        }
+
+        if (viewerToken && actualStreamKey) {
+            initializePlayer();
+        } else {
+            error = 'Could not get stream access';
+        }
+
+        loading = false;
+    });
+
+    onDestroy(() => {
+        if (player) {
+            try {
+                player.remove();
+            } catch (e) {
+                console.error('Error removing player:', e);
+            }
+        }
+    });
+
+    async function getViewerToken() {
+        try {
+            // Use realm ID to get viewer token (same as main player)
+            const response = await fetch(`/api/realms/${stream.realmId}/viewer-token`, {
+                credentials: 'include'
+            });
+            if (response.ok) {
+                const data = await response.json();
+                viewerToken = data.viewer_token;
+            } else {
+                console.error('Failed to get viewer token for tile:', stream.name, response.status);
+            }
+        } catch (e) {
+            console.error('Failed to get viewer token:', e);
+        }
+    }
+
+    async function getStreamKey() {
+        try {
+            // Get the actual stream key (requires valid viewer token cookie)
+            const response = await fetch(`/api/realms/${stream.realmId}/stream-key`, {
+                credentials: 'include'
+            });
+            if (response.ok) {
+                const data = await response.json();
+                actualStreamKey = data.stream_key;
+            } else {
+                console.error('Failed to get stream key for tile:', stream.name, response.status);
+            }
+        } catch (e) {
+            console.error('Failed to get stream key:', e);
+        }
+    }
+
+    function initializePlayer() {
+        if (!playerElement || !window.OvenPlayer || !viewerToken || !actualStreamKey) return;
+
+        const sources = [
+            {
+                type: 'hls',
+                file: `http://localhost:${STREAM_PORT}/app/${actualStreamKey}/llhls.m3u8?token=${viewerToken}`,
+                label: 'LLHLS'
+            }
+        ];
+
+        const config = {
+            autoStart: true,
+            autoFallback: true,
+            controls: false,
+            showBigPlayButton: false,
+            watermark: false,
+            mute: muted,
+            volume: volume * 100,
+            aspectRatio: "16:9",
+            sources: sources,
+            hlsConfig: {
+                debug: false,
+                enableWorker: true,
+                lowLatencyMode: true,
+                backBufferLength: 90,
+                xhrSetup: function(xhr, url) {
+                    // Only add token if not already present (segments don't have it)
+                    if (viewerToken && url.includes('/app/') && !url.includes('token=')) {
+                        const separator = url.includes('?') ? '&' : '?';
+                        xhr.open('GET', url + separator + 'token=' + viewerToken, true);
+                    }
+                    xhr.withCredentials = true;
+                }
+            }
+        };
+
+        try {
+            player = window.OvenPlayer.create(playerId, config);
+
+            player.on('stateChanged', (data) => {
+                if (data.newstate === 'playing') {
+                    isLive = true;
+                } else if (data.newstate === 'idle' || data.newstate === 'error') {
+                    isLive = false;
+                }
+            });
+
+            player.on('error', (err) => {
+                console.error('Tile player error:', err);
+                isLive = false;
+            });
+        } catch (e) {
+            console.error('Failed to create tile player:', e);
+            error = 'Failed to initialize player';
+        }
+    }
+
+    function handleClose() {
+        streamTiles.removeStream(stream.streamKey);
+    }
+
+    function handleMuteToggle() {
+        streamTiles.toggleMute(stream.streamKey);
+    }
+
+    function handleVolumeChange(e) {
+        const newVolume = parseFloat(e.target.value);
+        streamTiles.setVolume(stream.streamKey, newVolume);
+        // Unmute if adjusting volume while muted
+        if (muted && newVolume > 0) {
+            streamTiles.setMuted(stream.streamKey, false);
+        }
+    }
+
+    // Update player mute/volume when props change
+    $: if (player) {
+        try {
+            player.setMute(muted);
+            player.setVolume(volume * 100);
+        } catch (e) {}
+    }
+</script>
+
+<div
+    class="stream-tile"
+    class:main={isMain}
+    on:mouseenter={() => showControls = true}
+    on:mouseleave={() => { showControls = false; showVolumeSlider = false; }}
+>
+    <div class="tile-player">
+        {#if loading}
+            <div class="tile-loading">Loading...</div>
+        {:else if error}
+            <div class="tile-error">{error}</div>
+        {:else}
+            <div id={playerId} bind:this={playerElement} class="player"></div>
+            {#if !isLive}
+                <div class="tile-offline">
+                    {#if stream.offlineImageUrl}
+                        <img src={stream.offlineImageUrl} alt="{stream.name} offline" />
+                    {:else}
+                        <div class="offline-placeholder">
+                            <span class="offline-letter">{stream.name.charAt(0).toUpperCase()}</span>
+                            <span class="offline-text">OFFLINE</span>
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+        {/if}
+    </div>
+
+    <!-- Overlay controls - always visible when offline, hover when live -->
+    {#if showControls || !isLive}
+        <div class="tile-overlay" class:always-visible={!isLive}>
+            <!-- Top bar with title and close -->
+            <div class="overlay-top">
+                <a href="/{stream.name}/live" class="tile-name" target="_blank">{stream.name}</a>
+                {#if showClose}
+                    <button class="overlay-btn close" on:click={handleClose} title="Remove">✕</button>
+                {/if}
+            </div>
+
+            <!-- Bottom bar with volume (only when live or hovering) -->
+            {#if isLive && showControls}
+                <div class="overlay-bottom">
+                    <div class="volume-control"
+                        on:mouseenter={() => showVolumeSlider = true}
+                        on:mouseleave={() => showVolumeSlider = false}
+                    >
+                        <button class="overlay-btn" on:click={handleMuteToggle} title={muted ? 'Unmute' : 'Mute'}>
+                            {#if muted || volume === 0}
+                                🔇
+                            {:else if volume < 0.5}
+                                🔉
+                            {:else}
+                                🔊
+                            {/if}
+                        </button>
+                        {#if showVolumeSlider}
+                            <div class="volume-slider-container">
+                                <input
+                                    type="range"
+                                    class="volume-slider"
+                                    min="0"
+                                    max="1"
+                                    step="0.05"
+                                    value={volume}
+                                    on:input={handleVolumeChange}
+                                />
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .stream-tile {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        background: #000;
+        border-radius: 4px;
+        overflow: hidden;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .stream-tile.main {
+        /* Main tile styling if needed */
+    }
+
+    .tile-player {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        background: #000;
+    }
+
+    .tile-player .player {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tile-loading,
+    .tile-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #888;
+        font-size: 0.85rem;
+    }
+
+    .tile-error {
+        color: #f85149;
+    }
+
+    .tile-offline {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        background: #000;
+    }
+
+    .tile-offline img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .offline-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
+    }
+
+    .offline-letter {
+        font-size: 2rem;
+        font-weight: 600;
+        color: #444;
+    }
+
+    .offline-text {
+        font-size: 0.7rem;
+        color: #555;
+        letter-spacing: 0.1em;
+        margin-top: 0.25rem;
+    }
+
+    /* Overlay controls */
+    .tile-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        pointer-events: none;
+        background: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.7) 0%,
+            transparent 30%,
+            transparent 70%,
+            rgba(0, 0, 0, 0.7) 100%
+        );
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    .stream-tile:hover .tile-overlay,
+    .tile-overlay.always-visible {
+        opacity: 1;
+    }
+
+    .overlay-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        pointer-events: auto;
+    }
+
+    .overlay-bottom {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        pointer-events: auto;
+    }
+
+    .tile-name {
+        color: #fff;
+        font-size: 0.85rem;
+        font-weight: 500;
+        text-decoration: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+    }
+
+    .tile-name:hover {
+        color: var(--primary, #8b5cf6);
+    }
+
+    .overlay-btn {
+        width: 28px;
+        height: 28px;
+        border: none;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: 4px;
+        color: #fff;
+        font-size: 0.75rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.15s;
+        flex-shrink: 0;
+    }
+
+    .overlay-btn:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .overlay-btn.close:hover {
+        background: rgba(248, 81, 73, 0.6);
+        color: #fff;
+    }
+
+    .volume-control {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .volume-slider-container {
+        display: flex;
+        align-items: center;
+        background: rgba(0, 0, 0, 0.6);
+        padding: 0.35rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .volume-slider {
+        width: 80px;
+        height: 4px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 2px;
+        cursor: pointer;
+    }
+
+    .volume-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+
+    .volume-slider::-moz-range-thumb {
+        width: 12px;
+        height: 12px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        border: none;
+    }
+</style>
diff --git a/frontend/src/lib/components/StreamTileOverlay.svelte b/frontend/src/lib/components/StreamTileOverlay.svelte
new file mode 100644
index 0000000..cc4d0d6
--- /dev/null
+++ b/frontend/src/lib/components/StreamTileOverlay.svelte
@@ -0,0 +1,535 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { streamTiles } from '$lib/stores/streamTiles';
+    import { goto } from '$app/navigation';
+
+    const STREAM_PORT = import.meta.env.VITE_STREAM_PORT || '8088';
+
+    let players = {};
+    let viewerTokens = {};
+    let offlineStreams = {}; // Track which streams are offline
+    let streamInfo = {}; // Cache stream info including offlineImageUrl
+    let statusCheckInterval = null;
+    let Hls;
+    let OvenPlayer;
+
+    $: tileCount = $streamTiles.streams.length;
+    $: gridClass = tileCount === 1 ? 'grid-1' : tileCount === 2 ? 'grid-2' : 'grid-4';
+
+    onMount(async () => {
+        if (!browser) return;
+
+        // Load player dependencies
+        try {
+            const hlsModule = await import('hls.js');
+            Hls = hlsModule.default;
+            window.Hls = Hls;
+
+            const ovenModule = await import('ovenplayer');
+            OvenPlayer = ovenModule.default;
+            window.OvenPlayer = OvenPlayer;
+        } catch (e) {
+            console.error('Failed to load player dependencies:', e);
+        }
+
+        // Start checking stream status
+        checkStreamStatus();
+        statusCheckInterval = setInterval(checkStreamStatus, 10000);
+    });
+
+    onDestroy(() => {
+        // Cleanup all players
+        Object.values(players).forEach(p => {
+            if (p) p.remove();
+        });
+        players = {};
+
+        if (statusCheckInterval) {
+            clearInterval(statusCheckInterval);
+        }
+    });
+
+    async function checkStreamStatus() {
+        if (!browser || $streamTiles.streams.length === 0) return;
+
+        try {
+            const res = await fetch('/api/realms/live');
+            if (res.ok) {
+                const liveStreams = await res.json();
+                const liveStreamKeys = new Set(liveStreams.map(s => s.streamKey));
+
+                // Update offline status and cache stream info
+                liveStreams.forEach(s => {
+                    streamInfo[s.streamKey] = {
+                        offlineImageUrl: s.offlineImageUrl,
+                        name: s.name,
+                        username: s.username
+                    };
+                });
+
+                // Check each tiled stream
+                $streamTiles.streams.forEach(stream => {
+                    const wasOffline = offlineStreams[stream.streamKey];
+                    const isOffline = !liveStreamKeys.has(stream.streamKey);
+
+                    if (isOffline && !wasOffline) {
+                        // Stream went offline - destroy player
+                        if (players[stream.streamKey]) {
+                            players[stream.streamKey].remove();
+                            delete players[stream.streamKey];
+                        }
+                        offlineStreams[stream.streamKey] = true;
+                        offlineStreams = { ...offlineStreams }; // Trigger reactivity
+                    } else if (!isOffline && wasOffline) {
+                        // Stream came back online - reinit player
+                        delete offlineStreams[stream.streamKey];
+                        offlineStreams = { ...offlineStreams }; // Trigger reactivity
+                        const index = $streamTiles.streams.findIndex(s => s.streamKey === stream.streamKey);
+                        if (index !== -1) {
+                            initPlayer(stream, `tile-player-${index}`);
+                        }
+                    }
+                });
+            }
+        } catch (e) {
+            console.error('Failed to check stream status:', e);
+        }
+    }
+
+    async function getViewerToken(streamKey) {
+        if (viewerTokens[streamKey]) return viewerTokens[streamKey];
+
+        try {
+            const res = await fetch(`/api/stream/viewer-token/${streamKey}`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (res.ok) {
+                const data = await res.json();
+                viewerTokens[streamKey] = data.token;
+                return data.token;
+            }
+        } catch (e) {
+            console.error('Failed to get viewer token:', e);
+        }
+        return null;
+    }
+
+    async function initPlayer(stream, containerId) {
+        if (!browser || !window.OvenPlayer || !window.Hls) return;
+
+        const token = await getViewerToken(stream.streamKey);
+        if (!token) {
+            console.error('Failed to get viewer token for', stream.streamKey);
+            return;
+        }
+
+        const isMuted = $streamTiles.unmutedStream !== stream.streamKey;
+
+        const sources = [
+            {
+                type: 'hls',
+                file: `http://localhost:${STREAM_PORT}/app/${stream.streamKey}/llhls.m3u8?token=${token}`,
+                label: 'LLHLS'
+            }
+        ];
+
+        const config = {
+            autoStart: true,
+            autoFallback: true,
+            controls: false,
+            showBigPlayButton: false,
+            watermark: false,
+            mute: isMuted,
+            aspectRatio: "16:9",
+            sources: sources,
+            hlsConfig: {
+                debug: false,
+                enableWorker: true,
+                lowLatencyMode: true,
+                backBufferLength: 30,
+                xhrSetup: function(xhr, url) {
+                    if (token && url.includes('/app/')) {
+                        const separator = url.includes('?') ? '&' : '?';
+                        xhr.open('GET', url + separator + 'token=' + token, true);
+                    }
+                    xhr.withCredentials = true;
+                }
+            }
+        };
+
+        try {
+            // Clean up existing player
+            if (players[stream.streamKey]) {
+                players[stream.streamKey].remove();
+            }
+
+            const playerEl = document.getElementById(containerId);
+            if (!playerEl) return;
+
+            const player = window.OvenPlayer.create(containerId, config);
+            players[stream.streamKey] = player;
+
+            player.on('ready', () => {
+                player.setMute(isMuted);
+            });
+
+            player.on('error', (error) => {
+                console.error('Tile player error:', error);
+                // Mark stream as offline on persistent errors
+                if (error.code === 404 || error.code === 403 || error.message?.includes('not found')) {
+                    offlineStreams[stream.streamKey] = true;
+                    offlineStreams = { ...offlineStreams };
+                    if (players[stream.streamKey]) {
+                        players[stream.streamKey].remove();
+                        delete players[stream.streamKey];
+                    }
+                }
+            });
+        } catch (e) {
+            console.error('Failed to create player:', e);
+        }
+    }
+
+    function handleToggleMute(streamKey) {
+        streamTiles.toggleMute(streamKey);
+
+        // Update mute state for all players
+        Object.entries(players).forEach(([key, player]) => {
+            if (player) {
+                const shouldMute = key !== streamKey || $streamTiles.unmutedStream === streamKey;
+                player.setMute(shouldMute);
+            }
+        });
+    }
+
+    function handleRemoveStream(streamKey) {
+        if (players[streamKey]) {
+            players[streamKey].remove();
+            delete players[streamKey];
+        }
+        delete viewerTokens[streamKey];
+        streamTiles.removeStream(streamKey);
+    }
+
+    function handleGoToStream(stream) {
+        goto(`/${stream.name}/live`);
+    }
+
+    function handleClose() {
+        streamTiles.hide();
+    }
+
+    // Re-initialize players when streams change
+    $: if (browser && $streamTiles.enabled && window.OvenPlayer) {
+        // Small delay to ensure DOM is ready
+        setTimeout(() => {
+            $streamTiles.streams.forEach((stream, index) => {
+                const containerId = `tile-player-${index}`;
+                if (!players[stream.streamKey]) {
+                    initPlayer(stream, containerId);
+                }
+            });
+        }, 100);
+    }
+
+    // Update mute states when unmutedStream changes
+    $: if (browser && $streamTiles.enabled) {
+        Object.entries(players).forEach(([key, player]) => {
+            if (player) {
+                const shouldMute = $streamTiles.unmutedStream !== key;
+                try {
+                    player.setMute(shouldMute);
+                } catch (e) {}
+            }
+        });
+    }
+</script>
+
+{#if $streamTiles.enabled && $streamTiles.streams.length > 0}
+    <div class="tile-overlay">
+        <div class="tile-header">
+            <span class="tile-title">Stream Tiles ({$streamTiles.streams.length})</span>
+            <button class="close-btn" on:click={handleClose}>×</button>
+        </div>
+        <div class="tile-grid {gridClass}">
+            {#each $streamTiles.streams as stream, index (stream.streamKey)}
+                <div class="tile">
+                    {#if offlineStreams[stream.streamKey]}
+                        <div class="tile-offline">
+                            {#if stream.offlineImageUrl || streamInfo[stream.streamKey]?.offlineImageUrl}
+                                <img
+                                    src={stream.offlineImageUrl || streamInfo[stream.streamKey]?.offlineImageUrl}
+                                    alt="Stream offline"
+                                    class="offline-image"
+                                />
+                            {:else}
+                                <div class="offline-placeholder">
+                                    <div class="offline-initial">{stream.name.charAt(0).toUpperCase()}</div>
+                                    <span class="offline-text">Offline</span>
+                                </div>
+                            {/if}
+                        </div>
+                    {:else}
+                        <div class="tile-player" id="tile-player-{index}"></div>
+                    {/if}
+                    <div class="tile-controls" class:always-visible={offlineStreams[stream.streamKey]}>
+                        <span class="tile-name">
+                            {stream.name}
+                            {#if offlineStreams[stream.streamKey]}
+                                <span class="offline-badge">OFFLINE</span>
+                            {/if}
+                        </span>
+                        <div class="tile-buttons">
+                            {#if !offlineStreams[stream.streamKey]}
+                                <button
+                                    class="tile-control-btn"
+                                    class:unmuted={$streamTiles.unmutedStream === stream.streamKey}
+                                    on:click={() => handleToggleMute(stream.streamKey)}
+                                    title={$streamTiles.unmutedStream === stream.streamKey ? 'Mute' : 'Unmute'}
+                                >
+                                    {$streamTiles.unmutedStream === stream.streamKey ? '🔊' : '🔇'}
+                                </button>
+                            {/if}
+                            <button
+                                class="tile-control-btn"
+                                on:click={() => handleGoToStream(stream)}
+                                title="Go to stream"
+                            >
+                                ↗
+                            </button>
+                            <button
+                                class="tile-control-btn remove"
+                                on:click={() => handleRemoveStream(stream.streamKey)}
+                                title="Remove"
+                            >
+                                ×
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .tile-overlay {
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        width: 400px;
+        max-width: calc(100vw - 2rem);
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 9999;
+        overflow: hidden;
+    }
+
+    .tile-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .tile-title {
+        color: #c9d1d9;
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+
+    .close-btn {
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: none;
+        color: #8b949e;
+        font-size: 1.2rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .close-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #f85149;
+    }
+
+    .tile-grid {
+        display: grid;
+        gap: 2px;
+        background: #30363d;
+    }
+
+    .tile-grid.grid-1 {
+        grid-template-columns: 1fr;
+    }
+
+    .tile-grid.grid-2 {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .tile-grid.grid-4 {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+    }
+
+    .tile {
+        position: relative;
+        background: #0d1117;
+        aspect-ratio: 16/9;
+    }
+
+    .tile-player {
+        width: 100%;
+        height: 100%;
+    }
+
+    .tile-player :global(video) {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .tile-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.25rem 0.5rem;
+        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    .tile:hover .tile-controls {
+        opacity: 1;
+    }
+
+    .tile-name {
+        color: #c9d1d9;
+        font-size: 0.7rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 50%;
+    }
+
+    .tile-buttons {
+        display: flex;
+        gap: 0.25rem;
+    }
+
+    .tile-control-btn {
+        width: 22px;
+        height: 22px;
+        border: none;
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+        font-size: 0.7rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        transition: all 0.15s ease;
+    }
+
+    .tile-control-btn:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .tile-control-btn.unmuted {
+        background: rgba(126, 231, 135, 0.2);
+        color: #7ee787;
+    }
+
+    .tile-control-btn.remove:hover {
+        background: rgba(248, 81, 73, 0.3);
+        color: #f85149;
+    }
+
+    /* Offline state styles */
+    .tile-offline {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #0d1117;
+    }
+
+    .offline-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .offline-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        background: linear-gradient(135deg, #1a1a2e, #16213e);
+        width: 100%;
+        height: 100%;
+    }
+
+    .offline-initial {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #561d5e, #8b3a92);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: white;
+    }
+
+    .offline-text {
+        color: #6e7681;
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
+    .tile-controls.always-visible {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.6);
+    }
+
+    .offline-badge {
+        background: #6e7681;
+        color: #0d1117;
+        font-size: 0.5rem;
+        padding: 0.1rem 0.3rem;
+        border-radius: 2px;
+        margin-left: 0.3rem;
+        font-weight: 600;
+        vertical-align: middle;
+    }
+
+    @media (max-width: 500px) {
+        .tile-overlay {
+            width: calc(100vw - 1rem);
+            right: 0.5rem;
+            bottom: 0.5rem;
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/UbercoinTipModal.svelte b/frontend/src/lib/components/UbercoinTipModal.svelte
new file mode 100644
index 0000000..e80b4a7
--- /dev/null
+++ b/frontend/src/lib/components/UbercoinTipModal.svelte
@@ -0,0 +1,467 @@
+<script>
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { ubercoinBalance, previewTransaction, sendUbercoin, formatUbercoin } from '$lib/stores/ubercoin';
+
+    export let recipientUsername = '';
+    export let show = false;
+
+    const dispatch = createEventDispatcher();
+
+    let amount = '';
+    let preview = null;
+    let loading = false;
+    let previewLoading = false;
+    let error = '';
+    let success = false;
+    let panelElement;
+    let clickOutsideEnabled = false;
+
+    // Debounced preview
+    let previewTimeout;
+    $: if (show && amount && parseFloat(amount) > 0) {
+        clearTimeout(previewTimeout);
+        previewLoading = true;
+        previewTimeout = setTimeout(async () => {
+            preview = await previewTransaction(recipientUsername, parseFloat(amount));
+            previewLoading = false;
+        }, 300);
+    } else {
+        preview = null;
+        previewLoading = false;
+    }
+
+    // Reset state when panel opens
+    $: if (show) {
+        amount = '';
+        preview = null;
+        loading = false;
+        error = '';
+        success = false;
+        clickOutsideEnabled = false;
+        // Enable click-outside after a brief delay to prevent immediate closing
+        setTimeout(() => { clickOutsideEnabled = true; }, 100);
+    } else {
+        clickOutsideEnabled = false;
+    }
+
+    onMount(() => {
+        document.addEventListener('keydown', handleKeydown);
+        document.addEventListener('click', handleClickOutside);
+    });
+
+    onDestroy(() => {
+        document.removeEventListener('keydown', handleKeydown);
+        document.removeEventListener('click', handleClickOutside);
+        clearTimeout(previewTimeout);
+    });
+
+    function handleKeydown(event) {
+        if (!show) return;
+        if (event.key === 'Escape') {
+            handleClose();
+        }
+    }
+
+    function handleClickOutside(event) {
+        if (!show || loading || !clickOutsideEnabled) return;
+        if (panelElement && !panelElement.contains(event.target)) {
+            handleClose();
+        }
+    }
+
+    async function handleSend() {
+        const parsedAmount = parseFloat(amount);
+
+        if (!amount || parsedAmount <= 0) {
+            error = 'Enter a valid amount';
+            return;
+        }
+
+        if (parsedAmount > $ubercoinBalance) {
+            error = 'Insufficient balance';
+            return;
+        }
+
+        loading = true;
+        error = '';
+
+        const result = await sendUbercoin(recipientUsername, parsedAmount);
+
+        loading = false;
+
+        if (result.success) {
+            success = true;
+            setTimeout(() => {
+                dispatch('close');
+                dispatch('sent', result);
+            }, 1500);
+        } else {
+            error = result.error || 'Failed to send';
+        }
+    }
+
+    function handleClose() {
+        if (!loading) {
+            dispatch('close');
+        }
+    }
+</script>
+
+<style>
+    .tip-panel {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1000;
+        background: #1a1a1a;
+        border: 1px solid var(--border, #333);
+        border-radius: 8px;
+        width: 300px;
+        max-width: 90vw;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        animation: fadeIn 0.15s ease-out;
+        overflow: hidden;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(-50%, -50%) translateY(-5px);
+        }
+        to {
+            opacity: 1;
+            transform: translate(-50%, -50%) translateY(0);
+        }
+    }
+
+    .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--border, #333);
+        background: rgba(255, 215, 0, 0.05);
+    }
+
+    .panel-header h3 {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: white;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .header-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 0.6rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .close-btn {
+        background: transparent;
+        border: none;
+        color: #666;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 2px 6px;
+        line-height: 1;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .close-btn:hover {
+        color: white;
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .panel-body {
+        padding: 14px;
+    }
+
+    .recipient-info {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 12px;
+        font-size: 0.85rem;
+    }
+
+    .recipient-info span {
+        color: #888;
+    }
+
+    .recipient-info strong {
+        color: white;
+    }
+
+    .balance-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        margin-bottom: 12px;
+        font-size: 0.85rem;
+        color: #ccc;
+    }
+
+    .balance-row strong {
+        color: #ffd700;
+    }
+
+    .coin-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 0.6rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .input-group {
+        margin-bottom: 12px;
+    }
+
+    .input-group label {
+        display: block;
+        font-size: 0.8rem;
+        color: #888;
+        margin-bottom: 4px;
+    }
+
+    .input-group input {
+        width: 100%;
+        padding: 8px 10px;
+        background: #222;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        color: white;
+        font-size: 0.95rem;
+        outline: none;
+        transition: border-color 0.15s ease;
+    }
+
+    .input-group input:focus {
+        border-color: #ffd700;
+    }
+
+    .input-group input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .burn-info-box {
+        display: flex;
+        gap: 10px;
+        padding: 10px;
+        background: rgba(255, 152, 0, 0.1);
+        border: 1px solid rgba(255, 152, 0, 0.3);
+        border-radius: 6px;
+        margin-bottom: 12px;
+    }
+
+    .warning-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        background: #ff9800;
+        color: #000;
+        border-radius: 50%;
+        font-weight: bold;
+        font-size: 0.75rem;
+        flex-shrink: 0;
+    }
+
+    .burn-details {
+        flex: 1;
+    }
+
+    .burn-details strong {
+        display: block;
+        color: #ff9800;
+        font-size: 0.85rem;
+        margin-bottom: 2px;
+    }
+
+    .burn-details p {
+        margin: 0 0 2px 0;
+        font-size: 0.8rem;
+        color: #ccc;
+    }
+
+    .burn-details .detail-small {
+        font-size: 0.75rem;
+        color: #888;
+    }
+
+    .preview-loading {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        margin-bottom: 12px;
+        font-size: 0.8rem;
+        color: #888;
+    }
+
+    .error-message {
+        padding: 8px 10px;
+        background: rgba(244, 67, 54, 0.1);
+        border: 1px solid rgba(244, 67, 54, 0.3);
+        border-radius: 4px;
+        color: #f44336;
+        font-size: 0.8rem;
+        margin-bottom: 12px;
+    }
+
+    .success-message {
+        padding: 8px 10px;
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px solid rgba(76, 175, 80, 0.3);
+        border-radius: 4px;
+        color: #4caf50;
+        font-size: 0.8rem;
+        margin-bottom: 12px;
+        text-align: center;
+    }
+
+    .panel-footer {
+        display: flex;
+        gap: 10px;
+        padding: 12px 14px;
+        border-top: 1px solid var(--border, #333);
+    }
+
+    .panel-footer button {
+        flex: 1;
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-size: 0.85rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .cancel-btn {
+        background: transparent;
+        border: 1px solid var(--border, #333);
+        color: white;
+    }
+
+    .cancel-btn:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .send-btn {
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border: none;
+        color: #000;
+        font-weight: 600;
+    }
+
+    .send-btn:hover:not(:disabled) {
+        filter: brightness(1.1);
+    }
+
+    .send-btn:disabled,
+    .cancel-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>
+
+{#if show}
+    <div class="tip-panel" bind:this={panelElement} role="dialog" aria-modal="true">
+        <div class="panel-header">
+            <h3>
+                <span class="header-icon">Ü</span>
+                Send übercoin
+            </h3>
+            <button class="close-btn" on:click={handleClose} disabled={loading}>×</button>
+        </div>
+
+        <div class="panel-body">
+            <div class="recipient-info">
+                <span>To:</span>
+                <strong>{recipientUsername}</strong>
+            </div>
+
+            <div class="balance-row">
+                <span class="coin-icon">Ü</span>
+                <span>Balance: <strong>{formatUbercoin($ubercoinBalance)}</strong></span>
+            </div>
+
+            <div class="input-group">
+                <label for="tip-amount">Amount</label>
+                <input
+                    type="number"
+                    id="tip-amount"
+                    bind:value={amount}
+                    placeholder="0.000"
+                    step="0.001"
+                    min="0.001"
+                    disabled={loading || success}
+                />
+            </div>
+
+            {#if previewLoading}
+                <div class="preview-loading">
+                    Calculating burn rate...
+                </div>
+            {:else if preview && preview.success && preview.burnRatePercent > 0}
+                <div class="burn-info-box">
+                    <span class="warning-icon">!</span>
+                    <div class="burn-details">
+                        <strong>{preview.burnRatePercent.toFixed(1)}% burn rate</strong>
+                        <p>{recipientUsername} receives <strong>{formatUbercoin(preview.receivedAmount)}</strong> UC</p>
+                        <p class="detail-small">{formatUbercoin(preview.burnedAmount)} UC → Treasury ({preview.recipientAccountAgeDays}d old)</p>
+                    </div>
+                </div>
+            {/if}
+
+            {#if error}
+                <div class="error-message">{error}</div>
+            {/if}
+
+            {#if success}
+                <div class="success-message">Sent successfully!</div>
+            {/if}
+        </div>
+
+        <div class="panel-footer">
+            <button class="cancel-btn" on:click={handleClose} disabled={loading}>
+                Cancel
+            </button>
+            <button
+                class="send-btn"
+                on:click={handleSend}
+                disabled={loading || success || !amount || parseFloat(amount) <= 0}
+            >
+                {#if loading}
+                    Sending...
+                {:else}
+                    Send
+                {/if}
+            </button>
+        </div>
+    </div>
+{/if}
diff --git a/frontend/src/lib/components/chat/ChatInput.svelte b/frontend/src/lib/components/chat/ChatInput.svelte
new file mode 100644
index 0000000..5176d0e
--- /dev/null
+++ b/frontend/src/lib/components/chat/ChatInput.svelte
@@ -0,0 +1,711 @@
+<script>
+	import { createEventDispatcher, onMount, tick } from 'svelte';
+	import { stickerFavorites } from '$lib/chat/stickerFavorites';
+	import { stickers, stickersMap as sharedStickersMap, ensureLoaded } from '$lib/stores/stickers';
+
+	export let disabled = false;
+	export let username = '';
+
+	const dispatch = createEventDispatcher();
+
+	let message = '';
+	let maxLength = 500;
+	let selfDestructSeconds = 0; // 0 = permanent
+	let showTimerMenu = false;
+	let showFavoritesMenu = false;
+	let inputElement;
+	let favoriteContextMenu = null; // { stickerName, x, y }
+
+	// Autocomplete state
+	let showAutocomplete = false;
+	let autocompleteQuery = '';
+	let autocompleteSuggestions = [];
+	let selectedIndex = 0;
+	let lastSentMessage = '';
+
+	onMount(async () => {
+		// Ensure stickers are loaded (uses shared store - only fetches once across all components)
+		await ensureLoaded();
+	});
+
+	// Function to insert text at cursor or append to message
+	export function insertText(text) {
+		if (inputElement) {
+			const start = inputElement.selectionStart;
+			const end = inputElement.selectionEnd;
+			const before = message.slice(0, start);
+			const after = message.slice(end);
+			message = before + text + after;
+			// Focus and set cursor position after inserted text
+			setTimeout(() => {
+				inputElement.focus();
+				const newPos = start + text.length;
+				inputElement.setSelectionRange(newPos, newPos);
+			}, 0);
+		} else {
+			message += text;
+		}
+	}
+
+	const timerOptions = [
+		{ label: 'Off', value: 0 },
+		{ label: '5s', value: 5 },
+		{ label: '10s', value: 10 },
+		{ label: '30s', value: 30 },
+		{ label: '1m', value: 60 },
+		{ label: '5m', value: 300 }
+	];
+
+	// Autocomplete: detect :query pattern and filter stickers
+	function handleInput() {
+		if (!inputElement) return;
+
+		const cursorPos = inputElement.selectionStart;
+		const textBeforeCursor = message.slice(0, cursorPos);
+
+		// Find the last unmatched : before cursor
+		const lastColonIndex = textBeforeCursor.lastIndexOf(':');
+
+		if (lastColonIndex === -1) {
+			showAutocomplete = false;
+			return;
+		}
+
+		// Check if there's a closing : between the last : and cursor (means it's already complete)
+		const textAfterColon = textBeforeCursor.slice(lastColonIndex + 1);
+		if (textAfterColon.includes(':')) {
+			showAutocomplete = false;
+			return;
+		}
+
+		// Extract query (text after :)
+		const query = textAfterColon.toLowerCase();
+
+		// Only show autocomplete if there's at least 1 character after :
+		if (query.length < 1) {
+			showAutocomplete = false;
+			return;
+		}
+
+		autocompleteQuery = query;
+		updateAutocompleteSuggestions(query);
+	}
+
+	function updateAutocompleteSuggestions(query) {
+		if (!query || $stickers.length === 0) {
+			autocompleteSuggestions = [];
+			showAutocomplete = false;
+			return;
+		}
+
+		// Filter stickers that contain the query
+		const matches = $stickers.filter((s) =>
+			s.name.toLowerCase().includes(query)
+		);
+
+		// Sort: stickers starting with query first, then others
+		matches.sort((a, b) => {
+			const aStartsWith = a.name.toLowerCase().startsWith(query);
+			const bStartsWith = b.name.toLowerCase().startsWith(query);
+
+			if (aStartsWith && !bStartsWith) return -1;
+			if (!aStartsWith && bStartsWith) return 1;
+
+			// Secondary sort: alphabetically
+			return a.name.localeCompare(b.name);
+		});
+
+		// Limit to 8 suggestions
+		autocompleteSuggestions = matches.slice(0, 8);
+		selectedIndex = 0;
+		showAutocomplete = autocompleteSuggestions.length > 0;
+	}
+
+	function selectAutocomplete(sticker) {
+		if (!inputElement) return;
+
+		const cursorPos = inputElement.selectionStart;
+		const textBeforeCursor = message.slice(0, cursorPos);
+		const lastColonIndex = textBeforeCursor.lastIndexOf(':');
+
+		if (lastColonIndex === -1) return;
+
+		// Replace from : to cursor with :stickerName:
+		const before = message.slice(0, lastColonIndex);
+		const after = message.slice(cursorPos);
+		const stickerText = `:${sticker.name}:`;
+
+		message = before + stickerText + after;
+		showAutocomplete = false;
+
+		// Set cursor position after the inserted sticker
+		tick().then(() => {
+			const newPos = lastColonIndex + stickerText.length;
+			inputElement.focus();
+			inputElement.setSelectionRange(newPos, newPos);
+		});
+	}
+
+	$: activeTimerLabel = timerOptions.find(t => t.value === selfDestructSeconds)?.label || 'Off';
+
+	function handleSubmit(event) {
+		event.preventDefault();
+
+		if (!message.trim() || disabled) return;
+
+		const trimmedMessage = message.trim();
+		lastSentMessage = trimmedMessage;
+		dispatch('send', { message: trimmedMessage, selfDestructSeconds });
+		message = '';
+		selfDestructSeconds = 0; // Reset timer after sending
+	}
+
+	function handleKeyDown(event) {
+		// Handle autocomplete keyboard navigation
+		if (showAutocomplete && autocompleteSuggestions.length > 0) {
+			if (event.key === 'ArrowDown') {
+				event.preventDefault();
+				selectedIndex = (selectedIndex + 1) % autocompleteSuggestions.length;
+				return;
+			}
+			if (event.key === 'ArrowUp') {
+				event.preventDefault();
+				selectedIndex = (selectedIndex - 1 + autocompleteSuggestions.length) % autocompleteSuggestions.length;
+				return;
+			}
+			if (event.key === 'Enter' || event.key === 'Tab') {
+				event.preventDefault();
+				selectAutocomplete(autocompleteSuggestions[selectedIndex]);
+				return;
+			}
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				showAutocomplete = false;
+				return;
+			}
+		}
+
+		// Recall last sent message with up arrow when input is empty
+		if (event.key === 'ArrowUp' && message === '' && lastSentMessage) {
+			event.preventDefault();
+			message = lastSentMessage;
+			return;
+		}
+
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit(event);
+		}
+	}
+
+	function selectTimer(value) {
+		selfDestructSeconds = value;
+		showTimerMenu = false;
+	}
+
+	function handleClickOutside(event) {
+		if (showTimerMenu && !event.target.closest('.timer-container')) {
+			showTimerMenu = false;
+		}
+		if (showFavoritesMenu && !event.target.closest('.favorites-container')) {
+			showFavoritesMenu = false;
+		}
+		if (favoriteContextMenu && !event.target.closest('.favorite-context-menu')) {
+			favoriteContextMenu = null;
+		}
+		if (showAutocomplete && !event.target.closest('.autocomplete-dropdown') && !event.target.closest('.input-wrapper')) {
+			showAutocomplete = false;
+		}
+	}
+
+	function selectFavorite(stickerName) {
+		insertText(`:${stickerName}:`);
+		showFavoritesMenu = false;
+	}
+
+	function handleFavoriteContextMenu(event, stickerName) {
+		event.preventDefault();
+		favoriteContextMenu = {
+			stickerName,
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+
+	function removeFavorite() {
+		if (favoriteContextMenu && confirm(`Remove "${favoriteContextMenu.stickerName}" from favorites?`)) {
+			stickerFavorites.toggle(favoriteContextMenu.stickerName);
+		}
+		favoriteContextMenu = null;
+	}
+
+	function copyImageLink() {
+		if (favoriteContextMenu) {
+			const url = $sharedStickersMap[favoriteContextMenu.stickerName.toLowerCase()];
+			if (url) {
+				const fullUrl = window.location.origin + url;
+				navigator.clipboard.writeText(fullUrl);
+			}
+		}
+		favoriteContextMenu = null;
+	}
+
+	function openImageInNewTab() {
+		if (favoriteContextMenu) {
+			const url = $sharedStickersMap[favoriteContextMenu.stickerName.toLowerCase()];
+			if (url) {
+				window.open(url, '_blank');
+			}
+		}
+		favoriteContextMenu = null;
+	}
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<form class="chat-input" on:submit={handleSubmit}>
+	<div class="input-wrapper">
+		<div class="input-icons">
+			<div class="timer-container">
+				<button
+					type="button"
+					class="timer-btn"
+					class:active={selfDestructSeconds > 0}
+					on:click={() => showTimerMenu = !showTimerMenu}
+					title="Self-destruct timer"
+					{disabled}
+				>
+					<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+						<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+					</svg>
+					{#if selfDestructSeconds > 0}
+						<span class="timer-value">{activeTimerLabel}</span>
+					{/if}
+				</button>
+				{#if showTimerMenu}
+					<div class="timer-menu">
+						{#each timerOptions as option}
+							<button
+								type="button"
+								class="timer-option"
+								class:selected={selfDestructSeconds === option.value}
+								on:click={() => selectTimer(option.value)}
+							>
+								{option.label}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+			{#if $stickerFavorites.length > 0}
+				<div class="favorites-container">
+					<button
+						type="button"
+						class="favorites-btn"
+						on:click={() => showFavoritesMenu = !showFavoritesMenu}
+						title="Favorite stickers"
+						{disabled}
+					>
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+							<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+						</svg>
+					</button>
+					{#if showFavoritesMenu}
+						<div class="favorites-menu">
+							{#each $stickerFavorites as stickerName}
+								<button
+									type="button"
+									class="favorite-item"
+									on:click={() => selectFavorite(stickerName)}
+									on:contextmenu={(e) => handleFavoriteContextMenu(e, stickerName)}
+									title=":{stickerName}: (right-click for options)"
+								>
+									{#if $sharedStickersMap[stickerName.toLowerCase()]}
+										<img src={$sharedStickersMap[stickerName.toLowerCase()]} alt={stickerName} />
+									{:else}
+										<span class="sticker-name">:{stickerName}:</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		<input
+			type="text"
+			bind:this={inputElement}
+			bind:value={message}
+			on:keydown={handleKeyDown}
+			on:input={handleInput}
+			placeholder={disabled
+				? 'Connecting to chat...'
+				: `Chat as ${username || 'Guest'}...`}
+			{disabled}
+			maxlength={maxLength}
+		/>
+		<span class="char-count" class:warning={message.length > maxLength * 0.9}>
+			{message.length}/{maxLength}
+		</span>
+		{#if showAutocomplete && autocompleteSuggestions.length > 0}
+			<div class="autocomplete-dropdown">
+				{#each autocompleteSuggestions as sticker, index}
+					<button
+						type="button"
+						class="autocomplete-item"
+						class:selected={index === selectedIndex}
+						on:click={() => selectAutocomplete(sticker)}
+						on:mouseenter={() => selectedIndex = index}
+					>
+						<img
+							src={sticker.filePath}
+							alt={sticker.name}
+							class="autocomplete-preview"
+						/>
+						<span class="autocomplete-name">:{sticker.name}:</span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</form>
+
+{#if favoriteContextMenu}
+	<div
+		class="favorite-context-menu"
+		style="left: {favoriteContextMenu.x}px; top: {favoriteContextMenu.y}px;"
+	>
+		<button on:click={openImageInNewTab}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+				<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+			</svg>
+			Open in new tab
+		</button>
+		<button on:click={copyImageLink}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+				<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+			</svg>
+			Copy image link
+		</button>
+		<div class="context-menu-divider"></div>
+		<button class="danger" on:click={removeFavorite}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+			</svg>
+			Remove from favorites
+		</button>
+	</div>
+{/if}
+
+<style>
+	.chat-input {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0;
+		border-top: 1px solid #333;
+		background: #0d0d0d;
+		flex-shrink: 0; /* Prevent input from shrinking */
+	}
+
+	.input-wrapper {
+		flex: 1;
+		position: relative;
+		display: flex;
+		align-items: center;
+		background: #222;
+		border: 1px solid #333;
+		border-radius: 4px;
+		overflow: visible;
+	}
+
+	.input-wrapper:focus-within {
+		border-color: #4a9eff;
+	}
+
+	.input-icons {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding-left: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	input {
+		flex: 1;
+		padding: 0.75rem 0.5rem;
+		padding-right: 4rem;
+		background: transparent;
+		border: none;
+		color: #fff;
+		font-size: 0.875rem;
+	}
+
+	input:focus {
+		outline: none;
+	}
+
+	input:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.char-count {
+		position: absolute;
+		right: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 0.75rem;
+		color: #666;
+		pointer-events: none;
+	}
+
+	.char-count.warning {
+		color: #ff9800;
+	}
+
+	/* Sticker autocomplete dropdown */
+	.autocomplete-dropdown {
+		position: absolute;
+		bottom: 100%;
+		left: 0;
+		right: 0;
+		margin-bottom: 0.5rem;
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 6px;
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		max-height: 300px;
+		overflow-y: auto;
+	}
+
+	.autocomplete-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		background: none;
+		border: none;
+		color: #ccc;
+		font-size: 0.85rem;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.autocomplete-item:hover,
+	.autocomplete-item.selected {
+		background: rgba(74, 158, 255, 0.15);
+		color: #fff;
+	}
+
+	.autocomplete-preview {
+		width: 28px;
+		height: 28px;
+		object-fit: contain;
+		border-radius: 4px;
+		background: rgba(255, 255, 255, 0.05);
+	}
+
+	.autocomplete-name {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.timer-container {
+		position: relative;
+	}
+
+	.timer-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.35rem;
+		background: transparent;
+		border: none;
+		border-radius: 4px;
+		color: #666;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.timer-btn:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 0.1);
+		color: #999;
+	}
+
+	.timer-btn.active {
+		background: rgba(255, 152, 0, 0.15);
+		color: #ff9800;
+	}
+
+	.timer-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.timer-value {
+		font-size: 0.7rem;
+		font-weight: 600;
+	}
+
+	.timer-menu {
+		position: absolute;
+		bottom: 100%;
+		left: 0;
+		margin-bottom: 0.5rem;
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 6px;
+		overflow: hidden;
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+	}
+
+	.timer-option {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 1rem;
+		background: none;
+		border: none;
+		color: #ccc;
+		font-size: 0.8rem;
+		cursor: pointer;
+		text-align: left;
+		transition: all 0.15s;
+	}
+
+	.timer-option:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #fff;
+	}
+
+	.timer-option.selected {
+		background: rgba(255, 152, 0, 0.2);
+		color: #ff9800;
+	}
+
+	.favorites-container {
+		position: relative;
+	}
+
+	.favorites-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.35rem;
+		background: transparent;
+		border: none;
+		border-radius: 4px;
+		color: #666;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.favorites-btn:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f5c518;
+	}
+
+	.favorites-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.favorites-menu {
+		position: absolute;
+		bottom: 100%;
+		left: 0;
+		margin-bottom: 0.5rem;
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 6px;
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		max-width: 200px;
+	}
+
+	.favorite-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		background: none;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.favorite-item:hover {
+		background: rgba(255, 255, 255, 0.1);
+		border-color: #444;
+	}
+
+	.favorite-item img {
+		max-width: 32px;
+		max-height: 32px;
+		object-fit: contain;
+	}
+
+	.favorite-item .sticker-name {
+		font-size: 0.7rem;
+		color: #999;
+	}
+
+	.favorite-context-menu {
+		position: fixed;
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 6px;
+		z-index: 1000;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+		overflow: hidden;
+		min-width: 180px;
+	}
+
+	.favorite-context-menu button {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.6rem 0.75rem;
+		background: none;
+		border: none;
+		color: #ccc;
+		font-size: 0.85rem;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.favorite-context-menu button:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #fff;
+	}
+
+	.favorite-context-menu button.danger {
+		color: #ff6b6b;
+	}
+
+	.favorite-context-menu button.danger:hover {
+		background: rgba(255, 107, 107, 0.15);
+		color: #ff6b6b;
+	}
+
+	.context-menu-divider {
+		height: 1px;
+		background: #333;
+		margin: 0.25rem 0;
+	}
+</style>
diff --git a/frontend/src/lib/components/chat/ChatMessage.svelte b/frontend/src/lib/components/chat/ChatMessage.svelte
new file mode 100644
index 0000000..bd387be
--- /dev/null
+++ b/frontend/src/lib/components/chat/ChatMessage.svelte
@@ -0,0 +1,1026 @@
+<script>
+	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+	import { marked } from 'marked';
+	import DOMPurify from 'dompurify';
+	import { ttsEnabled, isUserMuted, toggleUserMute, ttsMutedUsers } from '$lib/chat/ttsStore';
+	import { stickerFavorites } from '$lib/chat/stickerFavorites';
+	import { stickersMap as sharedStickersMap, ensureLoaded } from '$lib/stores/stickers';
+
+	export let message;
+	export let currentUserId;
+	export let currentUsername = '';
+	export let isModerator = false;
+	export let isAdmin = false;
+	export let terminalMode = false; // When true, stickers render as small or text based on renderStickers
+	export let renderStickers = true; // Only used when terminalMode=true: false shows :stickername: as text
+	export let showHeader = true; // Show username/avatar header (false for consecutive messages from same user)
+	export let currentRealmId = null; // Current realm being viewed (to hide redundant realm tags)
+	export let headerBelow = false; // When true, show header below message content (for messages-from-bottom layout)
+
+	// Reactive check if this user is TTS muted
+	$: isTtsMuted = $ttsMutedUsers.has(message.userId);
+
+	const dispatch = createEventDispatcher();
+
+	// Admins and mods have moderation powers
+	$: hasModPowers = isModerator || isAdmin;
+	$: isOwnMessage = message.userId === currentUserId;
+	$: canModerate = hasModPowers && !isOwnMessage;
+	$: canDeleteOwn = hasModPowers && isOwnMessage;  // Mods/admins can delete their own messages
+	$: showRealmTag = message.realmId && message.realmId !== 'null' && currentRealmId && currentRealmId !== 'null' && String(message.realmId) !== String(currentRealmId);
+
+	let showModMenu = false;
+	let parsedContent = '';
+
+	// Sticker context menu
+	let stickerContextMenu = null; // { x, y, stickerName }
+
+	// Self-destruct countdown
+	let countdownSeconds = 0;
+	let countdownInterval = null;
+	$: hasSelfDestruct = message.selfDestructAt && message.selfDestructAt > 0;
+
+	function updateCountdown() {
+		if (!message.selfDestructAt) return;
+		const now = Date.now();
+		const remaining = Math.max(0, Math.ceil((message.selfDestructAt - now) / 1000));
+		countdownSeconds = remaining;
+		if (remaining <= 0 && countdownInterval) {
+			clearInterval(countdownInterval);
+			countdownInterval = null;
+		}
+	}
+
+	function formatCountdown(seconds) {
+		if (seconds >= 60) {
+			const m = Math.floor(seconds / 60);
+			const s = seconds % 60;
+			return `${m}:${s.toString().padStart(2, '0')}`;
+		}
+		return `${seconds}s`;
+	}
+
+	// Configure marked.js
+	marked.setOptions({
+		breaks: true,
+		gfm: true
+	});
+
+	onMount(async () => {
+		// Set up self-destruct countdown if applicable
+		if (message.selfDestructAt && message.selfDestructAt > 0) {
+			updateCountdown();
+			countdownInterval = setInterval(updateCountdown, 1000);
+		}
+
+		// Ensure stickers are loaded (uses shared store - only fetches once across all components)
+		await ensureLoaded();
+	});
+
+	onDestroy(() => {
+		if (countdownInterval) {
+			clearInterval(countdownInterval);
+		}
+	});
+
+	// Track if current user is mentioned
+	let isMentioned = false;
+	let hasFiredMentionEvent = false;
+
+	// Re-run when message.content, $sharedStickersMap, OR currentUsername changes
+	// The currentUsername dependency is critical for guests - their username is set async via WebSocket
+	$: {
+		// Pass currentUsername as parameter to ensure reactive updates when it changes
+		// Also pass terminalMode and renderStickers for terminal sticker handling
+		// Use $sharedStickersMap to trigger re-render when stickers are loaded
+		const result = $sharedStickersMap && parseMessage(message.content, currentUsername, terminalMode, renderStickers, $sharedStickersMap);
+		parsedContent = result.html;
+		// If user is mentioned, highlight and play honk (only fire event once)
+		if (result.mentioned) {
+			isMentioned = true;
+			console.log('[MENTION] Detected mention for', currentUsername, 'in message:', message.content);
+			if (!hasFiredMentionEvent) {
+				hasFiredMentionEvent = true;
+				console.log('[MENTION] Dispatching mentioned event:', { messageId: message.messageId, timestamp: message.timestamp });
+				// Use setTimeout to dispatch event outside reactive block (Svelte quirk)
+				setTimeout(() => {
+					console.log('[MENTION] Actually dispatching now...');
+					dispatch('mentioned', { messageId: message.messageId, timestamp: message.timestamp });
+				}, 0);
+			} else {
+				console.log('[MENTION] Already fired event for this message, skipping');
+			}
+		}
+	}
+
+	function parseMessage(content, username, isTerminal = false, showStickers = true, stickersMap = {}) {
+		if (!content) return { html: '', mentioned: false };
+
+		// Limit message length to 500 characters
+		let msg = content.slice(0, 500);
+		let mentioned = false;
+
+		// Check if current user is mentioned (case-insensitive)
+		if (username) {
+			const mentionPattern = new RegExp(`@${username.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`, 'i');
+			mentioned = mentionPattern.test(msg);
+		}
+
+		// Handle [graffiti] tags - user pixel art signatures (88x33, displayed at 1:1 scale)
+		msg = msg.replace(/\[graffiti\](\/uploads\/graffiti\/[a-f0-9]+\.png)\[\/graffiti\]/gi, (match, url) => {
+			return `<img src="${url}" alt="graffiti" class="graffiti-img" style="image-rendering: pixelated; width: 88px; height: 33px;" />`;
+		});
+
+		// Step 1: Replace stickers with img tags BEFORE markdown parsing
+		// In terminal mode with stickers disabled, skip all sticker replacement (show as :name: text)
+		// In terminal mode with stickers enabled, only do inline replacement (small stickers only)
+
+		if (!isTerminal || showStickers) {
+			// Normal mode OR terminal with stickers enabled
+
+			if (!isTerminal) {
+				// Only do h1/h2 sticker expansion in normal chat mode (not terminal)
+				// Replace # :sticker: with h1 containing img
+				msg = msg.replace(/^#\s+:(\w+):$/gm, (match, stickerName) => {
+					const stickerKey = stickerName.toLowerCase();
+					if (stickersMap[stickerKey]) {
+						return `# <img src="${stickersMap[stickerKey]}" alt="${stickerName}" title="${stickerName}" data-sticker="${stickerName}" class="sticker-img" />`;
+					}
+					return match;
+				});
+
+				// Replace ## :sticker: with h2 containing img
+				msg = msg.replace(/^##\s+:(\w+):$/gm, (match, stickerName) => {
+					const stickerKey = stickerName.toLowerCase();
+					if (stickersMap[stickerKey]) {
+						return `## <img src="${stickersMap[stickerKey]}" alt="${stickerName}" title="${stickerName}" data-sticker="${stickerName}" class="sticker-img" />`;
+					}
+					return match;
+				});
+			}
+
+			// Replace inline :sticker: with img tags (all modes with stickers enabled)
+			// In terminal mode, # :sticker: stays as text since we skip the h1/h2 processing above
+			msg = msg.replace(/:(\w+):/g, (match, stickerName) => {
+				const stickerKey = stickerName.toLowerCase();
+				if (stickersMap[stickerKey]) {
+					return `<img src="${stickersMap[stickerKey]}" alt="${stickerName}" title="${stickerName}" data-sticker="${stickerName}" class="sticker-img" />`;
+				}
+				return match;
+			});
+		}
+		// If isTerminal && !showStickers, we skip all sticker replacement - they stay as :name: text
+
+		// Step 2: Run marked.js to parse markdown (handles >greentext via blockquotes)
+		let html = marked.parse(msg);
+
+		// Step 3: Process redtext syntax (after markdown, before sanitization)
+		// Handle both single line and with newline - match entire paragraph content
+		html = html.replace(/<p>&lt;&lt;(.+?)<\/p>/gs, '<p class="redtext">&lt;&lt;$1</p>');
+
+		// Step 4: Highlight @mentions (before sanitization)
+		// Replace @username with highlighted span
+		html = html.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
+
+		// Step 5: Sanitize with DOMPurify - allow img tags and safe CSS
+		html = DOMPurify.sanitize(html, {
+			ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'img', 'br', 'strong', 'em', 'code', 'pre', 'del', 'span'],
+			ALLOWED_ATTR: ['src', 'alt', 'title', 'class', 'style', 'data-sticker'],
+			FORBID_TAGS: ['a', 'button', 'script'],
+			ALLOW_DATA_ATTR: false
+		});
+
+		return { html, mentioned };
+	}
+
+	function formatTime(timestamp) {
+		const date = new Date(timestamp);
+		return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+	}
+
+	function formatEpoch(timestamp) {
+		const epoch = new Date(timestamp).getTime();
+		// Get last 8 digits of epoch for maximum randomness
+		const last8 = String(epoch).slice(-8);
+		return `No.${last8}`;
+	}
+
+	function handleDelete() {
+		dispatch('delete');
+		showModMenu = false;
+	}
+
+	function handleModAction(action, duration = 0) {
+		dispatch('modAction', {
+			action,
+			userId: message.userId,
+			duration,
+			reason: ''
+		});
+		showModMenu = false;
+	}
+
+	function handleTtsMute() {
+		toggleUserMute(message.userId, message.username);
+	}
+
+	function handleUsernameClick(event) {
+		event.stopPropagation();
+		dispatch('showProfile', {
+			username: message.username,
+			userId: message.userId,
+			isGuest: message.isGuest,
+			messageId: message.id,
+			position: {
+				x: event.clientX,
+				y: event.clientY
+			}
+		});
+	}
+
+	function handleUsernameDoubleClick(event) {
+		event.stopPropagation();
+		dispatch('mention', { username: message.username });
+	}
+
+	/**
+	 * Sanitize color to prevent CSS injection
+	 * Only allows valid hex colors (#RGB or #RRGGBB format)
+	 */
+	function sanitizeColor(color) {
+		if (!color || typeof color !== 'string') {
+			return '#FFFFFF';
+		}
+		// Match #RGB or #RRGGBB format only
+		const hexPattern = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+		if (hexPattern.test(color)) {
+			return color;
+		}
+		return '#FFFFFF';
+	}
+
+	$: safeUserColor = sanitizeColor(message.userColor);
+
+	function handleContentDblClick(event) {
+		// Check if double-clicked element is a sticker image
+		const target = event.target;
+		if (target.tagName === 'IMG' && target.dataset.sticker) {
+			const stickerName = target.dataset.sticker;
+			dispatch('copySticker', { stickerName: `:${stickerName}:` });
+		}
+	}
+
+	function handleContentContextMenu(event) {
+		const target = event.target;
+		if (target.tagName === 'IMG' && target.dataset.sticker) {
+			event.preventDefault();
+			stickerContextMenu = {
+				x: event.clientX,
+				y: event.clientY,
+				stickerName: target.dataset.sticker
+			};
+		}
+	}
+
+	function closeStickerContextMenu() {
+		stickerContextMenu = null;
+	}
+
+	function openStickerInNewTab() {
+		if (stickerContextMenu) {
+			const url = $sharedStickersMap[stickerContextMenu.stickerName.toLowerCase()];
+			if (url) {
+				window.open(url, '_blank');
+			}
+		}
+		stickerContextMenu = null;
+	}
+
+	function copyStickerLink() {
+		if (stickerContextMenu) {
+			const url = $sharedStickersMap[stickerContextMenu.stickerName.toLowerCase()];
+			if (url) {
+				const fullUrl = window.location.origin + url;
+				navigator.clipboard.writeText(fullUrl);
+			}
+		}
+		stickerContextMenu = null;
+	}
+
+	function addStickerToFavorites() {
+		if (stickerContextMenu) {
+			stickerFavorites.toggle(stickerContextMenu.stickerName);
+		}
+		stickerContextMenu = null;
+	}
+
+	// Check if current context menu sticker is already in favorites
+	$: isStickerInFavorites = stickerContextMenu ? $stickerFavorites.includes(stickerContextMenu.stickerName) : false;
+</script>
+
+<div class="chat-message" class:own-message={isOwnMessage} class:mentioned={isMentioned} class:compact={!showHeader} class:header-below={headerBelow && showHeader}>
+	{#if showHeader}
+	<div class="message-header">
+		{#if message.avatarUrl}
+			<img src={message.avatarUrl} alt={message.username} class="user-avatar" />
+		{:else}
+			<div class="user-avatar-placeholder" style="background: {safeUserColor}">
+				{message.username.charAt(0).toUpperCase()}
+			</div>
+		{/if}
+		<button class="username-btn" style="color: {safeUserColor}" on:click={handleUsernameClick} on:dblclick={handleUsernameDoubleClick}>
+			{message.username}
+			{#if message.isStreamer}
+				<span class="badge streamer">STREAMER</span>
+			{/if}
+			{#if message.isGuest}
+				<span class="badge guest">GUEST</span>
+			{/if}
+		</button>
+		{#if message.usedRoll}
+			<span class="cmd-tag roll-tag">R</span>
+		{/if}
+		{#if message.usedRtd}
+			<span class="cmd-tag rtd-tag">D</span>
+		{/if}
+		{#if showRealmTag}
+			<a href="/{message.realmId}/live" class="realm-link" title="Go to {message.realmId}'s stream">
+				{message.realmId}
+			</a>
+		{/if}
+		{#if hasSelfDestruct && countdownSeconds > 0}
+			<span class="self-destruct-indicator" title="Self-destructing message">
+				<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+					<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+					<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+				</svg>
+				{formatCountdown(countdownSeconds)}
+			</span>
+		{/if}
+
+		{#if $ttsEnabled && !isOwnMessage}
+			<button
+				class="tts-mute-btn"
+				class:muted={isTtsMuted}
+				on:click={handleTtsMute}
+				title={isTtsMuted ? `Unmute ${message.username} TTS` : `Mute ${message.username} TTS`}
+			>
+				{#if isTtsMuted}
+					<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
+						<path d="M10.707 4.293a.5.5 0 0 1 0 .707L9.414 6.293l1.293 1.293a.5.5 0 0 1-.707.707L8.707 7 7.414 8.293a.5.5 0 0 1-.707-.707L8 6.293 6.707 5a.5.5 0 0 1 .707-.707L8.707 5.586l1.293-1.293a.5.5 0 0 1 .707 0z"/>
+					</svg>
+				{:else}
+					<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
+						<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
+						<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
+					</svg>
+				{/if}
+			</button>
+		{/if}
+
+		<div class="header-meta">
+			{#if canModerate}
+				<button class="mod-button" on:click={() => (showModMenu = !showModMenu)}>⋮</button>
+			{:else if canDeleteOwn}
+				<button class="self-delete-btn" on:click={handleDelete} title="Delete your message">
+					<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+						<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+					</svg>
+				</button>
+			{/if}
+			<span class="timestamp">{formatTime(message.timestamp)}</span>
+			<span class="epoch">{formatEpoch(message.timestamp)}</span>
+		</div>
+	</div>
+	{/if}
+
+	<div class="message-row">
+		<div class="message-content" on:dblclick={handleContentDblClick} on:contextmenu={handleContentContextMenu}>
+			{@html parsedContent}
+		</div>
+		{#if !showHeader}
+		<div class="compact-meta">
+			{#if canModerate}
+				<button class="mod-button" on:click={() => (showModMenu = !showModMenu)}>⋮</button>
+			{:else if canDeleteOwn}
+				<button class="self-delete-btn" on:click={handleDelete} title="Delete your message">
+					<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+						<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+					</svg>
+				</button>
+			{/if}
+			<span class="timestamp">{formatTime(message.timestamp)}</span>
+			<span class="epoch">{formatEpoch(message.timestamp)}</span>
+		</div>
+		{/if}
+	</div>
+
+	{#if showModMenu}
+		<div class="mod-menu">
+			<button on:click={handleDelete}>Delete Message</button>
+			<button on:click={() => handleModAction('mute', 0)}>Mute</button>
+			<button on:click={() => handleModAction('ban')}>Ban</button>
+		</div>
+	{/if}
+</div>
+
+<svelte:window on:click={closeStickerContextMenu} />
+
+{#if stickerContextMenu}
+	<div
+		class="sticker-context-menu"
+		style="left: {stickerContextMenu.x}px; top: {stickerContextMenu.y}px;"
+		on:click|stopPropagation
+	>
+		<button on:click={openStickerInNewTab}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+				<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+			</svg>
+			Open in new tab
+		</button>
+		<button on:click={copyStickerLink}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+				<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+			</svg>
+			Copy image link
+		</button>
+		{#if !isStickerInFavorites}
+			<button on:click={addStickerToFavorites}>
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+					<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zm2-1h8a1 1 0 0 1 1 1v12.566l-4.723-2.576a.5.5 0 0 0-.554 0L3 14.566V2a1 1 0 0 1 1-1z"/>
+					<path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4z"/>
+				</svg>
+				Add to favorites
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.chat-message {
+		display: flex;
+		flex-direction: column;
+		padding: 0.1rem 0.2rem;
+		border-radius: 2px;
+		background: #000;
+		transition: background 0.2s;
+		position: relative;
+	}
+
+	.chat-message:hover {
+		background: #111;
+	}
+
+	.chat-message.own-message {
+		background: #000;
+	}
+
+	.chat-message.compact {
+		padding-top: 0.05rem;
+		padding-bottom: 0.05rem;
+	}
+
+	/* Header below message content (for messages-from-bottom layout) */
+	.chat-message.header-below {
+		flex-direction: column-reverse;
+	}
+
+	.chat-message.header-below .message-header {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+
+	.message-header {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		margin-bottom: 0;
+		font-size: 0.75rem;
+	}
+
+	.user-avatar {
+		width: 18px;
+		height: 18px;
+		object-fit: cover;
+		flex-shrink: 0;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		position: relative;
+		z-index: 1;
+	}
+
+	.user-avatar:hover {
+		transform: scale(2.0);
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+	}
+
+	.user-avatar-placeholder {
+		width: 18px;
+		height: 18px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.55rem;
+		font-weight: 700;
+		color: #fff;
+		flex-shrink: 0;
+		background: #666;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		position: relative;
+		z-index: 1;
+	}
+
+	.user-avatar-placeholder:hover {
+		transform: scale(2.0);
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+	}
+
+	.username-btn {
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		font-size: inherit;
+		font-family: inherit;
+		transition: filter 0.15s ease;
+	}
+
+	.username-btn:hover {
+		filter: invert(1);
+	}
+
+	.badge {
+		font-size: 0.55rem;
+		padding: 0.05rem 0.25rem;
+		border-radius: 2px;
+		text-transform: uppercase;
+		font-weight: 700;
+		letter-spacing: 0.5px;
+	}
+
+	.badge.streamer {
+		background: #9b59b6;
+		color: #fff;
+	}
+
+	.badge.moderator {
+		background: #27ae60;
+		color: #fff;
+	}
+
+	.badge.guest {
+		background: #666;
+		color: #fff;
+	}
+
+	.cmd-tag {
+		font-size: 0.55rem;
+		padding: 0.05rem 0.25rem;
+		border-radius: 2px;
+		font-weight: 700;
+		background: #888;
+		color: #000;
+	}
+
+	.realm-link {
+		color: #888;
+		font-size: 0.6rem;
+		text-decoration: none;
+		padding: 0.05rem 0.25rem;
+		background: rgba(145, 70, 255, 0.15);
+		border-radius: 2px;
+		transition: all 0.15s ease;
+		margin-left: 0.15rem;
+	}
+
+	.realm-link:hover {
+		color: #9146ff;
+		background: rgba(145, 70, 255, 0.3);
+		text-decoration: none;
+	}
+
+	.header-meta {
+		display: flex;
+		align-items: center;
+		gap: 0.2rem;
+		margin-left: auto;
+	}
+
+	.timestamp {
+		color: #666;
+		font-size: 0.65rem;
+	}
+
+	.epoch {
+		color: #555;
+		font-size: 0.6rem;
+		font-family: monospace;
+	}
+
+	.self-destruct-indicator {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: #ff9800;
+		font-size: 0.7rem;
+		font-weight: 600;
+		padding: 0.125rem 0.375rem;
+		background: rgba(255, 152, 0, 0.15);
+		border-radius: 3px;
+		animation: pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.6; }
+	}
+
+	.mod-button {
+		background: none;
+		border: none;
+		color: #666;
+		cursor: pointer;
+		padding: 0 0.25rem;
+		font-size: 1rem;
+		line-height: 1;
+		opacity: 0;
+		transition: all 0.2s;
+	}
+
+	.chat-message:hover .mod-button {
+		opacity: 1;
+	}
+
+	.mod-button:hover {
+		color: #fff;
+	}
+
+	.message-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.3rem;
+	}
+
+	.compact-meta {
+		display: flex;
+		align-items: center;
+		gap: 0.2rem;
+		flex-shrink: 0;
+		margin-left: auto;
+	}
+
+	.message-content {
+		color: #ddd;
+		line-height: 1.25;
+		word-wrap: break-word;
+		flex: 1;
+		min-width: 0;
+		font-size: 0.8rem;
+	}
+
+	/* Heading styles */
+	.message-content :global(h1),
+	.message-content :global(h2),
+	.message-content :global(h3),
+	.message-content :global(h4),
+	.message-content :global(h5),
+	.message-content :global(h6) {
+		line-height: 1.0;
+		margin-bottom: 0 !important;
+		font-weight: 700;
+	}
+
+	.message-content :global(h1) {
+		font-size: 1.375rem;
+	}
+
+	.message-content :global(h2) {
+		font-size: 1.25rem;
+	}
+
+	.message-content :global(h3) {
+		font-size: 1rem;
+	}
+
+	.message-content :global(h4) {
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+
+	.message-content :global(h5) {
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.message-content :global(h6) {
+		font-size: 0.5rem;
+		font-weight: 500;
+	}
+
+	/* Greentext - markdown blockquotes */
+	.message-content :global(blockquote) {
+		margin: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		padding: 0;
+		display: block;
+		background-repeat: no-repeat;
+		overflow-wrap: break-word;
+	}
+
+	.message-content :global(blockquote p) {
+		font-weight: 500;
+		color: #789922;
+		margin: 0;
+		padding: 0;
+		display: block;
+		background-repeat: no-repeat;
+		overflow-wrap: break-word;
+	}
+
+	.message-content :global(blockquote p::before) {
+		content: '>';
+	}
+
+	.message-content :global(blockquote h1) {
+		font-weight: bold;
+		color: #789922;
+		margin: 0;
+		padding: 0;
+		display: block;
+		background-repeat: no-repeat;
+		overflow-wrap: break-word;
+	}
+
+	.message-content :global(blockquote h1::before) {
+		content: '>';
+	}
+
+	/* Redtext - custom syntax */
+	.message-content :global(.redtext) {
+		font-weight: 500;
+		color: #cc1105;
+		display: block;
+	}
+
+	/* Default size for all images (inline stickers) */
+	.message-content :global(img) {
+		max-height: 33px;
+		max-width: 200px;
+		height: auto;
+		width: auto;
+		vertical-align: middle;
+	}
+
+	/* Inline stickers in paragraphs */
+	.message-content :global(p img) {
+		max-height: 33px;
+		max-width: 200px;
+		height: auto;
+		width: auto;
+		vertical-align: middle;
+	}
+
+	.message-content :global(.sticker-inline) {
+		max-height: 33px;
+		max-width: 200px;
+		height: auto;
+		width: auto;
+		vertical-align: middle;
+		margin: 0 2px;
+	}
+
+	/* Full-size stickers in h1 */
+	.message-content :global(h1 img) {
+		max-width: 475px;
+		max-height: none;
+		height: auto;
+		width: auto;
+		vertical-align: bottom;
+	}
+
+	@media (max-width: 768px) {
+		.message-content :global(h1 img) {
+			max-width: 33vw;
+			max-height: none;
+			height: auto;
+			width: auto;
+		}
+	}
+
+	/* Horizontally flipped stickers in h2 */
+	.message-content :global(h2 img) {
+		max-width: 475px;
+		max-height: none;
+		height: auto;
+		width: auto;
+		transform: scaleX(-1);
+		vertical-align: bottom;
+	}
+
+	@media (max-width: 768px) {
+		.message-content :global(h2 img) {
+			max-width: 33vw;
+			max-height: none;
+			height: auto;
+			width: auto;
+		}
+	}
+
+	/* h3 stickers - small flipped */
+	.message-content :global(h3 img) {
+		max-height: 41px;
+		height: auto;
+		width: auto;
+		transform: scaleX(-1);
+		vertical-align: bottom;
+	}
+
+	/* h4 stickers - medium size */
+	.message-content :global(h4 img) {
+		max-height: 82px;
+		width: auto;
+		vertical-align: bottom;
+	}
+
+	/* h5 stickers - full size */
+	.message-content :global(h5 img) {
+		max-width: 475px;
+		max-height: none;
+		height: auto;
+		width: auto;
+		vertical-align: bottom;
+	}
+
+	/* h6 stickers - tiny */
+	.message-content :global(h6 img) {
+		width: auto;
+		height: 20.5px;
+		vertical-align: bottom;
+	}
+
+	.mod-menu {
+		position: absolute;
+		right: 0;
+		top: 100%;
+		background: #333;
+		border: 1px solid #444;
+		border-radius: 4px;
+		padding: 0.25rem;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		min-width: 150px;
+	}
+
+	.mod-menu button {
+		background: #444;
+		border: none;
+		color: #fff;
+		padding: 0.5rem;
+		border-radius: 3px;
+		cursor: pointer;
+		text-align: left;
+		font-size: 0.875rem;
+	}
+
+	.mod-menu button:hover {
+		background: #555;
+	}
+
+	/* TTS mute button */
+	.tts-mute-btn {
+		background: none;
+		border: none;
+		color: #666;
+		cursor: pointer;
+		padding: 2px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all 0.2s;
+		border-radius: 3px;
+	}
+
+	.chat-message:hover .tts-mute-btn {
+		opacity: 1;
+	}
+
+	.tts-mute-btn:hover {
+		color: #999;
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.tts-mute-btn.muted {
+		color: #f44336;
+		opacity: 1;
+	}
+
+	.tts-mute-btn.muted:hover {
+		color: #ff6659;
+	}
+
+	/* Self-delete button for mods */
+	.self-delete-btn {
+		background: none;
+		border: none;
+		color: #666;
+		cursor: pointer;
+		padding: 2px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all 0.2s;
+		border-radius: 3px;
+	}
+
+	.chat-message:hover .self-delete-btn {
+		opacity: 1;
+	}
+
+	.self-delete-btn:hover {
+		color: #f44336;
+		background: rgba(244, 67, 54, 0.1);
+	}
+
+	/* Sticker context menu - must be global since it's outside the component div */
+	:global(.sticker-context-menu) {
+		position: fixed;
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		z-index: 1000;
+		overflow: hidden;
+	}
+
+	:global(.sticker-context-menu button) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.6rem 0.75rem;
+		background: none;
+		border: none;
+		color: #ccc;
+		font-size: 0.85rem;
+		cursor: pointer;
+		text-align: left;
+		white-space: nowrap;
+	}
+
+	:global(.sticker-context-menu button:hover) {
+		background: rgba(255, 255, 255, 0.1);
+		color: #fff;
+	}
+
+	/* Mentioned message styling */
+	.chat-message.mentioned {
+		background: rgba(255, 215, 0, 0.1);
+		border-left: 2px solid #ffd700;
+	}
+
+	.chat-message.mentioned:hover {
+		background: rgba(255, 215, 0, 0.15);
+	}
+
+	.chat-message.mentioned .message-content {
+		color: #fff;
+		font-weight: 600;
+	}
+
+	/* @mention highlighting */
+	.message-content :global(.mention) {
+		color: #ffd700;
+		font-weight: 700;
+		background: rgba(255, 215, 0, 0.2);
+		padding: 0 0.25rem;
+		border-radius: 3px;
+	}
+
+	/* Graffiti images - override generic img rules to maintain exact size */
+	.message-content :global(.graffiti-img) {
+		width: 88px !important;
+		height: 33px !important;
+		max-width: none !important;
+		max-height: none !important;
+		image-rendering: pixelated;
+		vertical-align: middle;
+	}
+</style>
diff --git a/frontend/src/lib/components/chat/ChatPanel.svelte b/frontend/src/lib/components/chat/ChatPanel.svelte
new file mode 100644
index 0000000..cf4fef7
--- /dev/null
+++ b/frontend/src/lib/components/chat/ChatPanel.svelte
@@ -0,0 +1,1392 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import {
+		filteredMessages,
+		connectionStatus,
+		chatUserInfo,
+		participants,
+		messageVisibilityFilter,
+		hiddenUsers,
+		loadVisibilitySettings,
+		selectedRealms,
+		availableRealms,
+		toggleRealmFilter,
+		resetToGlobal,
+		fetchRealmStats
+	} from '$lib/chat/chatStore';
+	import { chatWebSocket } from '$lib/chat/chatWebSocket';
+	import { chatLayout } from '$lib/stores/chatLayout';
+	import {
+		ttsEnabled,
+		ttsSettings,
+		ttsUserFilter,
+		availableVoices,
+		initVoices,
+		loadSettings as loadTtsSettings,
+		setVoice
+	} from '$lib/chat/ttsStore';
+
+	import ChatMessage from './ChatMessage.svelte';
+	import ChatInput from './ChatInput.svelte';
+	import ProfilePreview from './ProfilePreview.svelte';
+
+	export let realmId;
+	export let userColor = '#FFFFFF';
+	export let chatEnabled = true;
+	export let chatGuestsAllowed = true;
+	export let hideHeader = false;
+	export let hideTheaterMode = false;
+
+	let messagesContainer;
+	let autoScroll = true;
+	let showMenu = false;  // Combined settings + participants menu
+	let configCollapsed = false;  // Track if config section is collapsed
+	let usersCollapsed = false;   // Track if users section is collapsed
+	let realmsCollapsed = false;  // Track if realms section is collapsed
+	let participantModMenuId = null;  // Track which participant's mod menu is open
+	let modMenuPosition = { x: 0, y: 0 };  // Position for fixed mod menu
+	let showRenameModal = false;
+	let newGuestName = '';
+	let hasNewMessage = false;
+	let fadeTimeout;
+	let activeProfilePreview = null;
+	let chatInputRef;
+	let honkAudio = null;
+	let honkSoundUrl = null;
+	let mentionedMessageIds = new Set(); // Track which messages have already played honk
+
+	$: isConnected = $connectionStatus === 'connected';
+
+	// Auto-load participants when connected
+	$: if (isConnected) {
+		chatWebSocket.getParticipants();
+	}
+
+	function toggleMenu() {
+		showMenu = !showMenu;
+		if (showMenu) {
+			chatWebSocket.getParticipants();
+			fetchRealmStats(); // Fetch realm stats for the REALMS section
+		}
+	}
+
+	function toggleParticipantModMenu(participantId, event) {
+		event.stopPropagation();
+		if (participantModMenuId === participantId) {
+			participantModMenuId = null;
+		} else {
+			const rect = event.target.getBoundingClientRect();
+			modMenuPosition = { x: rect.right, y: rect.bottom + 2 };
+			participantModMenuId = participantId;
+		}
+	}
+
+	async function handleParticipantModAction(participant, action) {
+		switch (action) {
+			case 'kick':
+				chatWebSocket.kickUser(participant.userId, 60, 'Kicked by moderator');
+				break;
+			case 'mute':
+				chatWebSocket.muteUser(participant.userId, 0, 'Muted by moderator'); // 0 = permanent
+				break;
+			case 'ban':
+				chatWebSocket.banUser(participant.userId, 'Banned by moderator');
+				break;
+			case 'promote':
+				await promoteToModerator(participant.userId);
+				break;
+			case 'demote':
+				await demoteFromModerator(participant.userId);
+				break;
+		}
+		participantModMenuId = null;
+	}
+
+	async function promoteToModerator(userId) {
+		if (!userId) return;
+		try {
+			const response = await fetch(`/api/admin/users/${userId}/promote-moderator`, {
+				method: 'POST',
+				credentials: 'include'
+			});
+			if (response.ok) {
+				chatWebSocket.getParticipants(); // Refresh participants list
+			}
+		} catch (e) {
+			console.error('Failed to promote user:', e);
+		}
+	}
+
+	async function demoteFromModerator(userId) {
+		if (!userId) return;
+		try {
+			const response = await fetch(`/api/admin/users/${userId}/demote-moderator`, {
+				method: 'POST',
+				credentials: 'include'
+			});
+			if (response.ok) {
+				chatWebSocket.getParticipants(); // Refresh participants list
+			}
+		} catch (e) {
+			console.error('Failed to demote user:', e);
+		}
+	}
+
+	// Check if current user has mod powers
+	$: hasModPowers = $chatUserInfo.isModerator || $chatUserInfo.isAdmin || $chatUserInfo.isStreamer;
+
+	let chatLoadedAt = Date.now();
+
+	async function loadActiveHonkSound() {
+		try {
+			const response = await fetch('/api/honk/active');
+			if (response.ok) {
+				const data = await response.json();
+				if (data.honk && data.honk.filePath) {
+					honkSoundUrl = data.honk.filePath;
+					honkAudio = new Audio(honkSoundUrl);
+					honkAudio.volume = 0.5;
+					honkAudio.load();
+				}
+			}
+		} catch (e) {
+			// Silently fail - honk is non-essential
+		}
+	}
+
+	function handleMentioned(event) {
+		const { messageId, timestamp } = event.detail;
+
+		// Only play honk once per message
+		if (mentionedMessageIds.has(messageId)) return;
+		mentionedMessageIds.add(messageId);
+
+		// Only play honk for messages that arrived after chat loaded (not historical messages)
+		const messageTime = timestamp ? new Date(timestamp).getTime() : Date.now();
+		if (messageTime < chatLoadedAt - 5000) return;
+
+		if (honkSoundUrl) {
+			const audio = new Audio(honkSoundUrl);
+			audio.volume = 0.5;
+			audio.play().catch(() => {});
+		}
+	}
+
+	onMount(() => {
+		// Initialize TTS voices and load realm settings
+		initVoices();
+		loadTtsSettings(realmId);
+		loadVisibilitySettings(realmId);
+
+		// Load active honk sound for mentions
+		loadActiveHonkSound();
+
+		// Only connect if chat is enabled
+		if (!chatEnabled) {
+			return;
+		}
+
+		// Get token from localStorage if available (for authenticated users)
+		const token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+		console.log('Chat connecting with realmId:', realmId, token ? '(authenticated)' : '(guest)');
+		chatWebSocket.connect(realmId, token);
+
+		// Function to scroll to bottom
+		const scrollToBottom = () => {
+			if (autoScroll && messagesContainer) {
+				requestAnimationFrame(() => {
+					messagesContainer.scrollTop = messagesContainer.scrollHeight;
+				});
+			}
+		};
+
+		// Scroll to bottom when new messages arrive
+		const unsubscribe = filteredMessages.subscribe((msgs) => {
+			scrollToBottom();
+			// Trigger new message indicator for theater mode
+			if ($chatLayout.theaterMode && msgs.length > 0) {
+				hasNewMessage = true;
+				clearTimeout(fadeTimeout);
+				fadeTimeout = setTimeout(() => {
+					hasNewMessage = false;
+				}, 5000);
+			}
+		});
+
+		// Watch for content size changes (e.g., when images load)
+		// This ensures autoscroll works even when images finish loading after message is added
+		let resizeObserver;
+		if (messagesContainer) {
+			resizeObserver = new ResizeObserver(() => {
+				scrollToBottom();
+			});
+			resizeObserver.observe(messagesContainer);
+		}
+
+		return () => {
+			unsubscribe();
+			if (resizeObserver) {
+				resizeObserver.disconnect();
+			}
+		};
+	});
+
+	onDestroy(() => {
+		// Keep connection alive for terminal usage
+		// chatWebSocket.disconnect();
+		if (fadeTimeout) clearTimeout(fadeTimeout);
+	});
+
+	function handleSendMessage(event) {
+		const { message, selfDestructSeconds } = event.detail;
+		chatWebSocket.sendMessage(message, userColor, selfDestructSeconds || 0);
+	}
+
+	function handleScroll() {
+		const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
+		autoScroll = scrollTop + clientHeight >= scrollHeight - 50;
+	}
+
+	function handleDeleteMessage(messageId) {
+		chatWebSocket.deleteMessage(messageId);
+	}
+
+	function handleModAction(event) {
+		const { action, userId, duration, reason } = event.detail;
+
+		switch (action) {
+			case 'ban':
+				chatWebSocket.banUser(userId, reason);
+				break;
+			case 'mute':
+				chatWebSocket.muteUser(userId, duration || 0, reason); // 0 = permanent by default
+				break;
+		}
+	}
+
+	function handleRename() {
+		if (!newGuestName || newGuestName.trim().length === 0) {
+			alert('Please enter a name');
+			return;
+		}
+
+		// Send rename message to server
+		if (chatWebSocket.sendRename(newGuestName.trim())) {
+			// Store in localStorage for persistence
+			localStorage.setItem('guestName', newGuestName.trim());
+
+			// Update local store
+			chatUserInfo.update(info => ({
+				...info,
+				username: newGuestName.trim()
+			}));
+
+			showRenameModal = false;
+			newGuestName = '';
+		} else {
+			alert('Failed to send rename request');
+		}
+	}
+
+	function handleClickOutside(event) {
+		// Close combined menu when clicking outside
+		if (showMenu) {
+			const menuContainer = event.target.closest('.menu-container');
+			const combinedMenu = event.target.closest('.combined-menu');
+			if (!menuContainer && !combinedMenu) {
+				showMenu = false;
+				participantModMenuId = null;
+			}
+		}
+		// Close participant mod menu when clicking outside
+		if (participantModMenuId !== null) {
+			const modContainer = event.target.closest('.participant-mod-container');
+			if (!modContainer) {
+				participantModMenuId = null;
+			}
+		}
+	}
+
+	function handleCopySticker(event) {
+		const { stickerName } = event.detail;
+		if (chatInputRef) {
+			chatInputRef.insertText(stickerName);
+		}
+	}
+
+	function handleMention(event) {
+		const { username } = event.detail;
+		if (chatInputRef) {
+			chatInputRef.insertText(`@${username} `);
+		}
+	}
+
+	function handleShowProfile(event) {
+		const { username, userId, isGuest, messageId, position } = event.detail;
+		activeProfilePreview = {
+			username,
+			userId,
+			isGuest,
+			messageId,
+			position
+		};
+	}
+
+	function handleProfileClose() {
+		activeProfilePreview = null;
+	}
+
+	function popoutChat() {
+		const realmParam = realmId ? `?realm=${realmId}` : '';
+		const popoutUrl = `/chat/popout${realmParam}`;
+		window.open(
+			popoutUrl,
+			'ChatPopout',
+			'width=400,height=700,menubar=no,toolbar=no,location=no,status=no'
+		);
+	}
+
+	// Check if currently showing global (all realms)
+	$: isGlobalMode = $selectedRealms.size === 0;
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div
+	class="chat-panel"
+	class:inverted={$chatLayout.inverted}
+	class:messages-from-top={$chatLayout.messagesFromTop}
+	class:theater-mode={$chatLayout.theaterMode && !hideTheaterMode}
+	class:has-new-message={hasNewMessage}
+	on:mouseenter={() => { if ($chatLayout.theaterMode && !hideTheaterMode) hasNewMessage = true; }}
+	on:mouseleave={() => { if ($chatLayout.theaterMode && !hideTheaterMode) { clearTimeout(fadeTimeout); fadeTimeout = setTimeout(() => hasNewMessage = false, 3000); } }}
+>
+
+
+	{#if showRenameModal}
+		<div class="modal-overlay" on:click={() => showRenameModal = false}>
+			<div class="modal-content small" on:click|stopPropagation>
+				<div class="modal-header">
+					<h3>Change Display Name</h3>
+					<button class="close-btn" on:click={() => showRenameModal = false}>×</button>
+				</div>
+				<div class="rename-form">
+					<p style="color: #999; font-size: 0.9rem; margin-bottom: 1rem;">
+						Current name: <span style="color: {userColor}; font-weight: 600;">{$chatUserInfo.username}</span>
+					</p>
+					<form on:submit|preventDefault={handleRename}>
+						<input
+							type="text"
+							bind:value={newGuestName}
+							placeholder="Enter new name..."
+							maxlength="30"
+							pattern="[a-zA-Z0-9_-]+"
+							title="Letters, numbers, underscores, and hyphens only"
+							style="width: 100%; padding: 0.75rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 1rem; margin-bottom: 1rem;"
+							required
+						/>
+						<div style="display: flex; gap: 0.5rem;">
+							<button type="submit" class="btn-primary" style="flex: 1; padding: 0.75rem; background: #4a9eff; border: none; border-radius: 4px; color: #fff; font-weight: 600; cursor: pointer;">
+								Change Name
+							</button>
+							<button type="button" class="btn-secondary" on:click={() => showRenameModal = false} style="flex: 1; padding: 0.75rem; background: #444; border: none; border-radius: 4px; color: #fff; font-weight: 600; cursor: pointer;">
+								Cancel
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	{#if !hideHeader}
+	<div class="chat-header" class:menu-open={showMenu}>
+		<h3 class="realm-title">{realmId || 'Global'}</h3>
+		<div class="header-actions">
+			{#if chatEnabled && isConnected && $chatUserInfo.isGuest}
+				<button class="header-btn" on:click={() => showRenameModal = true} title="Change Display Name">
+					<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+					</svg>
+				</button>
+			{/if}
+
+			<!-- Popout button -->
+			<button class="header-btn" on:click={popoutChat} title="Pop out chat">
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+					<path d="M6.5 1A.5.5 0 0 1 7 .5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0V1.5H7a.5.5 0 0 1-.5-.5z"/>
+					<path d="M13.5 1l-6 6H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9.5l6-6z"/>
+				</svg>
+			</button>
+
+			<!-- Combined Menu button (settings + participants) -->
+			{#if chatEnabled}
+				<div class="menu-container">
+					<button class="header-btn menu-btn" on:click={toggleMenu} title="Menu">
+						<span class="status-dot" class:connected={isConnected} class:disconnected={!isConnected}></span>
+						<span class="btn-count">{$participants.length}</span>
+					</button>
+				</div>
+			{/if}
+
+		</div>
+	</div>
+
+	<!-- Combined menu - positioned relative to chat-panel, outside chat-header -->
+	{#if showMenu}
+		<div class="combined-menu" on:click|stopPropagation>
+			<!-- Settings Section (Collapsible) -->
+			<div class="menu-section">
+				<button class="menu-section-header collapsible" on:click={() => configCollapsed = !configCollapsed}>
+					<span class="collapse-arrow" class:collapsed={configCollapsed}>▼</span>
+					-- CONFIG --
+				</button>
+				{#if !configCollapsed}
+				<div class="config-columns">
+					<!-- Left column: Layout options -->
+					<div class="config-column">
+						<button class="menu-option" on:click={() => chatLayout.togglePosition()}>
+							<span class="option-marker">></span>
+							<span class="option-label">position:</span>
+							<span class="option-value">{$chatLayout.position.toUpperCase()}</span>
+						</button>
+						<button class="menu-option" on:click={() => chatLayout.toggleInverted()}>
+							<span class="option-marker">></span>
+							<span class="option-label">input:</span>
+							<span class="option-value">{$chatLayout.inverted ? 'TOP' : 'BOTTOM'}</span>
+						</button>
+						<button class="menu-option" on:click={() => chatLayout.toggleMessagesFromTop()}>
+							<span class="option-marker">></span>
+							<span class="option-label">flow:</span>
+							<span class="option-value">{$chatLayout.messagesFromTop ? 'DOWN' : 'UP'}</span>
+						</button>
+						{#if !hideTheaterMode}
+							<button class="menu-option" on:click={() => chatLayout.toggleTheaterMode()}>
+								<span class="option-marker">></span>
+								<span class="option-label">theater:</span>
+								<span class="option-value" class:active-on={$chatLayout.theaterMode}>{$chatLayout.theaterMode ? 'ON' : 'OFF'}</span>
+							</button>
+						{/if}
+						<div class="menu-option-row">
+							<span class="option-marker">></span>
+							<span class="option-label">show:</span>
+							<select class="inline-select" value={$messageVisibilityFilter} on:change={(e) => messageVisibilityFilter.set(e.target.value)}>
+								<option value="all">ALL</option>
+								<option value="registered">REG</option>
+								<option value="guests">GUEST</option>
+							</select>
+						</div>
+					</div>
+					<!-- Right column: TTS options -->
+					<div class="config-column tts-column">
+						<button class="menu-option" on:click={() => ttsEnabled.update(v => !v)}>
+							<span class="option-marker">></span>
+							<span class="option-label">tts:</span>
+							<span class="option-value" class:active-on={$ttsEnabled}>{$ttsEnabled ? 'ON' : 'OFF'}</span>
+						</button>
+						<div class="menu-option-row">
+							<span class="option-marker"> </span>
+							<span class="option-label">voice:</span>
+							<select class="inline-select" value={$ttsSettings.voiceName} on:change={(e) => setVoice(e.target.value)}>
+								<option value="">default</option>
+								{#each $availableVoices as voice}
+									<option value={voice.name}>{voice.name}</option>
+								{/each}
+							</select>
+						</div>
+						<div class="menu-option-row">
+							<span class="option-marker"> </span>
+							<span class="option-label">speed:</span>
+							<input type="range" class="inline-range" min="0.1" max="4" step="0.1" value={$ttsSettings.rate} on:input={(e) => ttsSettings.update(s => ({ ...s, rate: parseFloat(e.target.value) }))} />
+							<span class="range-value">{$ttsSettings.rate.toFixed(1)}</span>
+						</div>
+						<div class="menu-option-row">
+							<span class="option-marker"> </span>
+							<span class="option-label">pitch:</span>
+							<input type="range" class="inline-range" min="0" max="2" step="0.1" value={$ttsSettings.pitch} on:input={(e) => ttsSettings.update(s => ({ ...s, pitch: parseFloat(e.target.value) }))} />
+							<span class="range-value">{$ttsSettings.pitch.toFixed(1)}</span>
+						</div>
+						<div class="menu-option-row">
+							<span class="option-marker"> </span>
+							<span class="option-label">volume:</span>
+							<input type="range" class="inline-range" min="0" max="1" step="0.1" value={$ttsSettings.volume} on:input={(e) => ttsSettings.update(s => ({ ...s, volume: parseFloat(e.target.value) }))} />
+							<span class="range-value">{$ttsSettings.volume.toFixed(1)}</span>
+						</div>
+					</div>
+				</div>
+				{/if}
+			</div>
+			<!-- Users Section (Collapsible) -->
+			<div class="menu-section">
+				<button class="menu-section-header collapsible" on:click={() => usersCollapsed = !usersCollapsed}>
+					<span class="collapse-arrow" class:collapsed={usersCollapsed}>▼</span>
+					-- USERS ({$participants.length}) --
+				</button>
+				{#if !usersCollapsed}
+				<div class="users-list">
+					{#each $participants as participant (participant.userId)}
+						<div class="user-row">
+							<span class="user-prefix">{participant.isStreamer ? '*' : participant.isModerator ? '+' : ' '}</span>
+							<button
+								class="user-name-btn"
+								class:guest={participant.isGuest}
+								style={participant.userColor && !participant.isGuest ? `color: ${participant.userColor}` : ''}
+								on:click={(e) => {
+									// Toggle: close if same user, open if different
+									if (activeProfilePreview && activeProfilePreview.userId === participant.userId) {
+										activeProfilePreview = null;
+									} else {
+										const rect = e.target.getBoundingClientRect();
+										activeProfilePreview = {
+											username: participant.username,
+											userId: participant.userId,
+											isGuest: participant.isGuest,
+											position: { x: rect.left, y: rect.bottom + 4 }
+										};
+									}
+								}}
+								on:auxclick={(e) => {
+									// Middle-click opens profile in new tab
+									if (e.button === 1 && !participant.isGuest) {
+										e.preventDefault();
+										window.open(`/profile/${participant.username}`, '_blank');
+									}
+								}}
+							>{participant.username}</button>
+							{#if hasModPowers && participant.userId !== $chatUserInfo.userId && !participant.isStreamer && ($chatUserInfo.isAdmin || !participant.isModerator)}
+								<div class="participant-mod-container">
+									<button class="user-mod-btn" on:click={(e) => toggleParticipantModMenu(participant.userId, e)}>...</button>
+									{#if participantModMenuId === participant.userId}
+										<div class="user-mod-menu" style="left: {modMenuPosition.x}px; top: {modMenuPosition.y}px; transform: translateX(-100%);" on:click|stopPropagation>
+											<button on:click={() => handleParticipantModAction(participant, 'kick')}>kick</button>
+											<button on:click={() => handleParticipantModAction(participant, 'mute')}>mute</button>
+											<button class="danger" on:click={() => handleParticipantModAction(participant, 'ban')}>ban</button>
+											{#if $chatUserInfo.isAdmin && !participant.isGuest}
+												{#if participant.isModerator}
+													<button class="warn" on:click={() => handleParticipantModAction(participant, 'demote')}>demote</button>
+												{:else}
+													<button class="success" on:click={() => handleParticipantModAction(participant, 'promote')}>promote</button>
+												{/if}
+											{/if}
+										</div>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					{/each}
+					{#if $participants.length === 0}
+						<div class="empty-users">no users online</div>
+					{/if}
+				</div>
+				{/if}
+			</div>
+			<!-- Realms Section (Collapsible) -->
+			<div class="menu-section">
+				<button class="menu-section-header collapsible" on:click={() => realmsCollapsed = !realmsCollapsed}>
+					<span class="collapse-arrow" class:collapsed={realmsCollapsed}>▼</span>
+					-- REALMS --
+				</button>
+				{#if !realmsCollapsed}
+				<div class="realms-list">
+					<div class="realm-row" class:active={isGlobalMode}>
+						<button class="realm-name-btn" on:click={() => resetToGlobal()}>
+							<span class="realm-marker">{isGlobalMode ? '>' : ' '}</span>
+							GLOBAL
+						</button>
+					</div>
+					{#each $availableRealms as realm (realm.realmId)}
+						<div class="realm-row" class:active={$selectedRealms.has(realm.realmId)}>
+							<button class="realm-name-btn" on:click={() => toggleRealmFilter(realm.realmId)}>
+								<span class="realm-marker">{$selectedRealms.has(realm.realmId) ? '>' : ' '}</span>
+								{realm.realmId}
+							</button>
+							<span class="realm-count">{realm.participantCount}</span>
+						</div>
+					{/each}
+					{#if $availableRealms.length === 0}
+						<div class="empty-realms">no realms</div>
+					{/if}
+				</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+	{/if}
+
+	{#if !chatEnabled}
+		<div class="chat-disabled-message">
+			<div class="disabled-icon">💬</div>
+			<p><strong>Chat Disabled</strong></p>
+			<p class="disabled-text">The streamer has disabled chat for this realm.</p>
+		</div>
+	{:else if !chatGuestsAllowed && $chatUserInfo.isGuest}
+		<div class="chat-disabled-message">
+			<div class="disabled-icon">🔒</div>
+			<p><strong>Guests Not Allowed</strong></p>
+			<p class="disabled-text">This chat requires authentication. Please log in to participate.</p>
+			<a href="/login" class="btn" style="margin-top: 1rem; padding: 0.75rem 1.5rem; background: var(--primary); color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
+				Login
+			</a>
+		</div>
+	{:else}
+		<div class="messages-container" bind:this={messagesContainer} on:scroll={handleScroll}>
+			{#each $filteredMessages as message (message.messageId)}
+				<ChatMessage
+					{message}
+					showHeader={message.showHeader ?? false}
+					headerBelow={$chatLayout.messagesFromTop}
+					currentUserId={$chatUserInfo.userId}
+					currentUsername={$chatUserInfo.username}
+					currentRealmId={realmId}
+					isModerator={$chatUserInfo.isModerator}
+					isAdmin={$chatUserInfo.isAdmin}
+					on:delete={() => handleDeleteMessage(message.messageId)}
+					on:modAction={handleModAction}
+					on:showProfile={handleShowProfile}
+					on:copySticker={handleCopySticker}
+					on:mentioned={handleMentioned}
+					on:mention={handleMention}
+				/>
+			{/each}
+
+			{#if $filteredMessages.length === 0}
+				<div class="empty-state">
+					<p>No messages yet. Be the first to chat!</p>
+				</div>
+			{/if}
+		</div>
+
+		<ChatInput
+			bind:this={chatInputRef}
+			disabled={!isConnected}
+			username={$chatUserInfo.username}
+			on:send={handleSendMessage}
+		/>
+	{/if}
+
+	{#if activeProfilePreview}
+		<ProfilePreview
+			username={activeProfilePreview.username}
+			userId={activeProfilePreview.userId}
+			isGuest={activeProfilePreview.isGuest}
+			position={activeProfilePreview.position}
+			on:close={handleProfileClose}
+		/>
+	{/if}
+</div>
+
+<style>
+	.chat-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-height: 100%;
+		min-height: 0;
+		background: #1a1a1a;
+		border-left: 1px solid #333;
+		position: relative;
+		overflow: hidden; /* Prevent panel itself from scrolling */
+	}
+
+	.chat-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.5rem;
+		border-bottom: 1px solid #333;
+		background: #0d0d0d;
+		flex-shrink: 0;
+		position: relative;
+	}
+
+	.chat-header h3 {
+		margin: 0;
+		font-size: 1rem;
+		color: #fff;
+	}
+
+	.realm-title {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	/* Unified slim header button style */
+	.header-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		height: 26px;
+		min-width: 26px;
+		padding: 0 0.375rem;
+		background: rgba(255, 255, 255, 0.08);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+		border-radius: 4px;
+		color: #aaa;
+		cursor: pointer;
+		font-size: 0.75rem;
+		transition: all 0.15s;
+	}
+
+	.header-btn:hover {
+		background: rgba(255, 255, 255, 0.12);
+		border-color: rgba(255, 255, 255, 0.25);
+		color: #fff;
+	}
+
+	.header-btn .status-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: #666;
+		flex-shrink: 0;
+	}
+
+	.header-btn .status-dot.connected {
+		background: #0f0;
+	}
+
+	.header-btn .status-dot.disconnected {
+		background: #f44336;
+	}
+
+	.btn-count {
+		font-weight: 500;
+	}
+
+	.messages-container {
+		flex: 1 1 0; /* Grow, shrink, base 0 */
+		background: #000;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 0.25rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-height: 0; /* Allow flex shrinking */
+		max-height: 100%; /* Don't exceed container */
+		width: 100%; /* Ensure full width */
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE/Edge */
+	}
+
+	.messages-container::-webkit-scrollbar {
+		display: none; /* Chrome/Safari/Opera */
+	}
+
+	.empty-state {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #666;
+		font-style: italic;
+	}
+
+	.chat-disabled-message {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem;
+		text-align: center;
+		color: #999;
+	}
+
+	.disabled-icon {
+		font-size: 3rem;
+		margin-bottom: 1rem;
+		opacity: 0.5;
+	}
+
+	.chat-disabled-message p {
+		margin: 0.5rem 0;
+	}
+
+	.chat-disabled-message strong {
+		color: #fff;
+		font-size: 1.1rem;
+	}
+
+	.disabled-text {
+		font-size: 0.9rem;
+		color: #666;
+	}
+
+	/* Combined Menu (Terminal Style) */
+	.menu-container {
+		position: static;
+	}
+
+	.combined-menu {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 38px; /* Height of header */
+		background: #0a0a0a;
+		border-bottom: 1px solid #333;
+		max-height: 50%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		z-index: 200;
+		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+		font-size: 0.75rem;
+	}
+
+	.menu-section {
+		border-bottom: 1px solid #222;
+	}
+
+	.menu-section:last-child {
+		border-bottom: none;
+	}
+
+	.menu-section-header {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		color: #888;
+		font-size: 0.7rem;
+		letter-spacing: 1px;
+		background: #0d0d0d;
+		text-align: center;
+		border: none;
+		font-family: inherit;
+	}
+
+	.menu-section-header.collapsible {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+
+	.menu-section-header.collapsible:hover {
+		color: #aaa;
+	}
+
+	.collapse-arrow {
+		position: absolute;
+		left: 0.75rem;
+		font-size: 0.55rem;
+		transition: transform 0.15s ease;
+		opacity: 0.6;
+	}
+
+	.collapse-arrow.collapsed {
+		transform: rotate(-90deg);
+	}
+
+	.config-columns {
+		display: flex;
+		gap: 1px;
+		background: #222;
+		min-width: 0;
+	}
+
+	.config-column {
+		flex: 1;
+		min-width: 0;
+		background: #0a0a0a;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.config-column.tts-column {
+		border-left: 1px solid #222;
+	}
+
+	.menu-option {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		background: none;
+		border: none;
+		color: #aaa;
+		font-family: inherit;
+		font-size: inherit;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.menu-option:hover {
+		background: #1a1a1a;
+		color: #fff;
+	}
+
+	.menu-option.active {
+		color: #a855f7;
+	}
+
+	.menu-option-row {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem 0.75rem;
+		color: #aaa;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.option-marker {
+		display: none;
+	}
+
+	.option-label {
+		color: #888;
+		margin-right: 0.5rem;
+	}
+
+	.option-value {
+		color: #a855f7;
+		margin-left: auto;
+	}
+
+	.option-value.active-on {
+		color: #f00;
+	}
+
+	.option-count {
+		color: #666;
+		margin-left: auto;
+		font-size: 0.65rem;
+	}
+
+	.inline-select {
+		background: #111;
+		border: 1px solid #333;
+		color: #a855f7;
+		font-family: inherit;
+		font-size: inherit;
+		padding: 0.125rem 0.25rem;
+		cursor: pointer;
+		margin-left: auto;
+		max-width: 164px;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.inline-select:hover {
+		border-color: #555;
+	}
+
+	.inline-range {
+		width: 60px;
+		height: 4px;
+		background: #333;
+		border: none;
+		margin-left: auto;
+		cursor: pointer;
+		-webkit-appearance: none;
+	}
+
+	.inline-range::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: 8px;
+		height: 8px;
+		background: #0f0;
+		cursor: pointer;
+	}
+
+	.range-value {
+		width: 24px;
+		text-align: right;
+		color: #0f0;
+		margin-left: 0.5rem;
+	}
+
+	/* Users Grid (3 columns) */
+	.users-list {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 1px;
+		background: #222;
+		max-height: none;
+		overflow-y: auto;
+	}
+
+	.user-row {
+		display: flex;
+		align-items: center;
+		padding: 0.35rem 0.5rem;
+		gap: 0.25rem;
+		background: #0a0a0a;
+		min-width: 0; /* Allow text truncation */
+	}
+
+	.user-row:hover {
+		background: #1a1a1a;
+	}
+
+	.user-prefix {
+		width: 0.75rem;
+		color: #ff0;
+		flex-shrink: 0;
+		text-align: center;
+		font-size: 0.7rem;
+	}
+
+	.user-name-btn {
+		background: none;
+		border: none;
+		color: #ccc;
+		font-family: inherit;
+		font-size: inherit;
+		padding: 0;
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+		text-align: left;
+		min-width: 0;
+	}
+
+	.user-name-btn:hover {
+		color: #fff;
+		text-decoration: underline;
+	}
+
+	.user-name-btn.guest {
+		color: #666;
+		font-style: italic;
+	}
+
+	.user-name-btn.guest:hover {
+		color: #888;
+	}
+
+	.user-mod-btn {
+		background: #222;
+		border: 1px solid #333;
+		color: #888;
+		font-family: inherit;
+		font-size: 0.6rem;
+		cursor: pointer;
+		padding: 0.1rem 0.25rem;
+		flex-shrink: 0;
+		line-height: 1;
+	}
+
+	.user-mod-btn:hover {
+		background: #333;
+		color: #fff;
+		border-color: #444;
+	}
+
+	.user-mod-menu {
+		position: fixed;
+		background: #111;
+		border: 1px solid #444;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		min-width: 80px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+	}
+
+	.user-mod-menu button {
+		background: none;
+		border: none;
+		color: #aaa;
+		font-family: inherit;
+		font-size: 0.7rem;
+		padding: 0.5rem 0.75rem;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.user-mod-menu button:hover {
+		background: #1a1a1a;
+		color: #fff;
+	}
+
+	.user-mod-menu button.danger {
+		color: #f44;
+	}
+
+	.user-mod-menu button.danger:hover {
+		background: #311;
+	}
+
+	.user-mod-menu button.warn {
+		color: #fa0;
+	}
+
+	.user-mod-menu button.success {
+		color: #0f0;
+	}
+
+	.empty-users {
+		grid-column: 1 / -1; /* Span all columns */
+		padding: 0.75rem;
+		color: #555;
+		text-align: center;
+		font-style: italic;
+		background: #0a0a0a;
+	}
+
+	/* Realms Grid (3 columns like users) */
+	.realms-list {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 1px;
+		background: #222;
+	}
+
+	.realm-row {
+		display: flex;
+		align-items: center;
+		padding: 0.35rem 0.5rem;
+		gap: 0.25rem;
+		background: #0a0a0a;
+		min-width: 0;
+	}
+
+	.realm-row:hover {
+		background: #1a1a1a;
+	}
+
+	.realm-row.active {
+		background: #1a1a1a;
+	}
+
+	.realm-name-btn {
+		background: none;
+		border: none;
+		color: #888;
+		font-family: inherit;
+		font-size: inherit;
+		padding: 0;
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+		text-align: left;
+		min-width: 0;
+	}
+
+	.realm-name-btn:hover {
+		color: #ccc;
+	}
+
+	.realm-row.active .realm-name-btn {
+		color: #0f0;
+	}
+
+	.realm-marker {
+		color: #0f0;
+		margin-right: 0.25rem;
+	}
+
+	.realm-count {
+		color: #555;
+		font-size: 0.65rem;
+		flex-shrink: 0;
+	}
+
+	.empty-realms {
+		grid-column: 1 / -1;
+		padding: 0.75rem;
+		color: #555;
+		text-align: center;
+		font-style: italic;
+		background: #0a0a0a;
+	}
+
+	.participant-mod-container {
+		position: relative;
+	}
+
+	.modal-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.9);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+	}
+
+	.modal-content {
+		background: #1a1a1a;
+		border: 1px solid #333;
+		border-radius: 8px;
+		width: 90%;
+		max-width: 500px;
+		max-height: 70vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.modal-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 1rem;
+		border-bottom: 1px solid #333;
+	}
+
+	.modal-header h3 {
+		margin: 0;
+		color: #fff;
+		font-size: 1.1rem;
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		color: #999;
+		font-size: 1.5rem;
+		cursor: pointer;
+		padding: 0;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: color 0.2s;
+	}
+
+	.close-btn:hover {
+		color: #fff;
+	}
+
+
+	.modal-content.small {
+		max-width: 300px;
+	}
+
+	/* Inverted layout - input on top, header on bottom */
+	.chat-panel.inverted .chat-header {
+		order: 3;
+		border-bottom: none;
+		border-top: 1px solid #333;
+	}
+
+	.chat-panel.inverted .messages-container {
+		order: 2;
+	}
+
+	.chat-panel.inverted :global(.chat-input) {
+		order: 1;
+	}
+
+	/* Messages from top - newest messages at top */
+	.chat-panel.messages-from-top .messages-container {
+		flex-direction: column-reverse;
+	}
+
+	/* Theater mode styles */
+	.chat-panel.theater-mode {
+		background: rgba(0, 0, 0, 0.001); /* Nearly invisible but captures hover events */
+		border: none;
+		pointer-events: auto; /* Ensure panel receives pointer events */
+	}
+
+	.chat-panel.theater-mode .chat-header {
+		background: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(8px);
+		border-color: rgba(255, 255, 255, 0.1);
+		opacity: 0;
+		transition: opacity 0.3s;
+		pointer-events: auto;
+		position: relative;
+		z-index: 100;
+		overflow: visible;
+	}
+
+	.chat-panel.theater-mode:hover .chat-header,
+	.chat-panel.theater-mode.has-new-message .chat-header,
+	.chat-panel.theater-mode .chat-header.menu-open {
+		opacity: 1;
+	}
+
+	.chat-panel.theater-mode .chat-header .header-btn {
+		pointer-events: auto;
+	}
+
+	.chat-panel.theater-mode .menu-container {
+		pointer-events: auto !important;
+		position: relative;
+		z-index: 300;
+	}
+
+	.chat-panel.theater-mode .combined-menu {
+		pointer-events: auto !important;
+		z-index: 400;
+	}
+
+	.chat-panel.theater-mode .combined-menu * {
+		pointer-events: auto !important;
+	}
+
+	.chat-panel.theater-mode .messages-container {
+		background: transparent;
+		mask-image: linear-gradient(to top, black 60%, transparent 100%);
+		-webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
+	}
+
+	.chat-panel.theater-mode .messages-container :global(.chat-message) {
+		background: rgba(0, 0, 0, 0.6);
+		backdrop-filter: blur(4px);
+		border-radius: 4px;
+		padding: 0.5rem;
+		opacity: 0;
+		transition: opacity 0.5s;
+	}
+
+	.chat-panel.theater-mode:hover .messages-container :global(.chat-message),
+	.chat-panel.theater-mode.has-new-message .messages-container :global(.chat-message) {
+		opacity: 1;
+	}
+
+	.chat-panel.theater-mode :global(.chat-input) {
+		background: rgba(0, 0, 0, 0.7);
+		backdrop-filter: blur(8px);
+		border-color: rgba(255, 255, 255, 0.1);
+		opacity: 0;
+		transition: opacity 0.3s;
+	}
+
+	.chat-panel.theater-mode:hover :global(.chat-input),
+	.chat-panel.theater-mode.has-new-message :global(.chat-input) {
+		opacity: 1;
+	}
+
+	/* Disabled/empty states in theater mode */
+	.chat-panel.theater-mode .chat-disabled-message,
+	.chat-panel.theater-mode .empty-state {
+		background: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(4px);
+		border-radius: 8px;
+		padding: 1rem;
+		opacity: 0.7;
+	}
+
+	/* Combined menu opens upward when chat is inverted (header at bottom) */
+	.chat-panel.inverted .combined-menu {
+		top: auto;
+		bottom: 38px; /* Height of header */
+		border-bottom: none;
+		border-top: 1px solid #333;
+	}
+</style>
diff --git a/frontend/src/lib/components/chat/ChatTerminal.svelte b/frontend/src/lib/components/chat/ChatTerminal.svelte
new file mode 100644
index 0000000..9c16e05
--- /dev/null
+++ b/frontend/src/lib/components/chat/ChatTerminal.svelte
@@ -0,0 +1,733 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { fly, fade, slide } from 'svelte/transition';
+    import { browser } from '$app/environment';
+    import { isAuthenticated } from '$lib/stores/auth';
+    import { connectionStatus } from '$lib/chat/chatStore';
+    import TerminalTabBar from '$lib/components/terminal/TerminalTabBar.svelte';
+    import TerminalCore from '$lib/components/terminal/TerminalCore.svelte';
+    import StreamsBrowser from '$lib/components/terminal/StreamsBrowser.svelte';
+    import WatchRoomsBrowser from '$lib/components/terminal/WatchRoomsBrowser.svelte';
+    import AudioBrowser from '$lib/components/terminal/AudioBrowser.svelte';
+    import EbookBrowser from '$lib/components/terminal/EbookBrowser.svelte';
+    import TreasuryBrowser from '$lib/components/terminal/TreasuryBrowser.svelte';
+    import GamesBrowser from '$lib/components/terminal/GamesBrowser.svelte';
+    import StickerBrowser from './StickerBrowser.svelte';
+    import ProfilePreview from './ProfilePreview.svelte';
+
+    export let isOpen = false;
+    export let defaultRealmId = null;
+
+    // Date/time state
+    let currentTime = new Date();
+    let showCalendar = false;
+    let calendarDate = new Date();
+    let timeInterval;
+
+    // Tab navigation - includes audio, ebooks, games, and treasury
+    let activeTab = 'terminal';
+    const tabs = [
+        { id: 'terminal', label: 'Terminal' },
+        { id: 'stickers', label: 'Stickers' },
+        { id: 'streams', label: 'Streams' },
+        { id: 'watch', label: 'Watch', color: '#10b981' },
+        { id: 'audio', label: 'Audio', color: '#ec4899' },
+        { id: 'ebooks', label: 'eBooks', color: '#3b82f6' },
+        { id: 'games', label: 'Games', color: '#f59e0b' },
+        { id: 'treasury', label: 'Treasury', color: '#ffd700' }
+    ];
+
+    // State
+    let selectedRealmId = defaultRealmId;
+    let renderStickers = false;
+    let isDocked = true;
+    let terminalHeight = 333;
+    let isResizing = false;
+    let terminalPosition = { x: 100, y: 100 };
+    let isDragging = false;
+    let terminalHotkey = '`';
+    let activeProfilePreview = null;
+    let terminalCore;
+
+    $: isConnected = $connectionStatus === 'connected';
+
+    // Global hotkey handler - only for authenticated users
+    function handleKeyDown(event) {
+        // Terminal is only available for authenticated users
+        if (!$isAuthenticated) return;
+
+        if (event.key === terminalHotkey && !event.ctrlKey && !event.altKey && !event.metaKey) {
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                if (!target.classList.contains('terminal-input')) {
+                    return;
+                }
+            }
+
+            event.preventDefault();
+            isOpen = !isOpen;
+
+            if (isOpen && terminalCore) {
+                terminalCore.focusInput();
+            }
+        }
+
+        if (event.key === 'Escape' && isOpen) {
+            isOpen = false;
+        }
+    }
+
+    // Resize handling (docked mode)
+    function startResize(e) {
+        if (!isDocked) return;
+        isResizing = true;
+        e.preventDefault();
+    }
+
+    function handleMouseMove(e) {
+        if (isResizing) {
+            const navHeight = 60;
+            const newHeight = e.clientY - navHeight;
+            terminalHeight = Math.max(200, Math.min(window.innerHeight - navHeight - 100, newHeight));
+        } else if (isDragging && !isDocked) {
+            terminalPosition.x += e.movementX;
+            terminalPosition.y += e.movementY;
+        }
+    }
+
+    function stopResize() {
+        isResizing = false;
+        isDragging = false;
+    }
+
+    // Drag handling (undocked mode)
+    function startDrag(e) {
+        if (!isDocked && !e.target.closest('button')) {
+            isDragging = true;
+            e.preventDefault();
+        }
+    }
+
+    function toggleDock() {
+        isDocked = !isDocked;
+        if (isDocked) {
+            terminalHeight = 500;
+        }
+    }
+
+    function popoutTerminal() {
+        const realmParam = selectedRealmId ? `?realm=${selectedRealmId}` : '';
+        const popoutUrl = `/chat/terminal${realmParam}`;
+        const popoutWindow = window.open(
+            popoutUrl,
+            'TerminalPopout',
+            'width=600,height=500,menubar=no,toolbar=no,location=no,status=no'
+        );
+
+        if (popoutWindow) {
+            isOpen = false;
+        }
+    }
+
+    // Tab change handler
+    function handleTabChange(event) {
+        activeTab = event.detail.tab;
+    }
+
+    // Sticker selection
+    function handleStickerSelect(stickerText) {
+        if (terminalCore) {
+            // Insert sticker text into terminal - need to access input through exposed method
+            // For now, switch to terminal tab and the user can paste
+        }
+        activeTab = 'terminal';
+        if (terminalCore) {
+            terminalCore.focusInput();
+        }
+    }
+
+    // Profile preview handlers
+    function handleShowProfile(event) {
+        const { username, userId, isGuest, messageId, position } = event.detail;
+        activeProfilePreview = { username, userId, isGuest, messageId, position };
+    }
+
+    function handleProfileClose() {
+        activeProfilePreview = null;
+    }
+
+    function handleRealmChange(event) {
+        selectedRealmId = event.detail.realmId;
+    }
+
+    function handleStickersToggled(event) {
+        renderStickers = event.detail.renderStickers;
+    }
+
+    // Date/time formatting
+    function formatTime(date) {
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+    }
+
+    function formatDate(date) {
+        return date.toLocaleDateString('en-US', {
+            weekday: 'short',
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+
+    function toggleCalendar() {
+        showCalendar = !showCalendar;
+        if (showCalendar) {
+            calendarDate = new Date();
+        }
+    }
+
+    // Calendar helpers
+    function getCalendarDays(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const daysInMonth = lastDay.getDate();
+        const startDayOfWeek = firstDay.getDay();
+
+        const days = [];
+        // Add empty slots for days before the first of the month
+        for (let i = 0; i < startDayOfWeek; i++) {
+            days.push(null);
+        }
+        // Add the days of the month
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(i);
+        }
+        return days;
+    }
+
+    function prevMonth() {
+        calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1);
+    }
+
+    function nextMonth() {
+        calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
+    }
+
+    function isToday(day) {
+        if (!day) return false;
+        const today = new Date();
+        return day === today.getDate() &&
+               calendarDate.getMonth() === today.getMonth() &&
+               calendarDate.getFullYear() === today.getFullYear();
+    }
+
+    $: calendarDays = getCalendarDays(calendarDate);
+    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+    // Timezone definitions
+    const timezones = [
+        { label: 'UTC', zone: 'UTC' },
+        { label: 'Germany', zone: 'Europe/Berlin' },
+        { label: 'India', zone: 'Asia/Kolkata' },
+        { label: 'Japan', zone: 'Asia/Tokyo' },
+        { label: 'Australia', zone: 'Australia/Sydney' },
+        { label: 'PST', zone: 'America/Los_Angeles' },
+        { label: 'MST', zone: 'America/Denver' },
+        { label: 'Central', zone: 'America/Chicago' },
+        { label: 'EST', zone: 'America/New_York' }
+    ];
+
+    function getTimezoneTime(zone) {
+        return currentTime.toLocaleTimeString('en-US', {
+            timeZone: zone,
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+    }
+
+    onMount(() => {
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', stopResize);
+
+        const savedHotkey = localStorage.getItem('terminalHotkey');
+        if (savedHotkey) {
+            terminalHotkey = savedHotkey;
+        }
+
+        // Update time every second
+        timeInterval = setInterval(() => {
+            currentTime = new Date();
+        }, 1000);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', stopResize);
+            if (timeInterval) clearInterval(timeInterval);
+        };
+    });
+
+    onDestroy(() => {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', stopResize);
+        if (timeInterval) clearInterval(timeInterval);
+    });
+</script>
+
+<svelte:window on:click={() => showCalendar = false} />
+
+{#if isOpen && $isAuthenticated}
+    <div
+        class="terminal-container"
+        class:docked={isDocked}
+        class:undocked={!isDocked}
+        transition:slide={{ duration: isDocked ? 300 : 0 }}
+        style={isDocked ? `height: ${terminalHeight}px;` : `left: ${terminalPosition.x}px; top: ${terminalPosition.y}px;`}
+    >
+        {#if isDocked}
+            <div class="resize-handle" on:mousedown={startResize}></div>
+        {/if}
+
+        <div class="terminal-header" on:mousedown={!isDocked ? startDrag : null}>
+            <TerminalTabBar {tabs} {activeTab} on:tabChange={handleTabChange} />
+            <div class="header-right">
+                <div class="datetime-container">
+                <button class="datetime-button" on:click|stopPropagation={toggleCalendar} title="Show calendar">
+                    <span class="datetime-date">{formatDate(currentTime)}</span>
+                    <span class="datetime-time">{formatTime(currentTime)}</span>
+                </button>
+                {#if showCalendar}
+                    <div class="calendar-dropdown" on:click|stopPropagation>
+                        <div class="calendar-panel">
+                            <div class="calendar-header">
+                                <button class="calendar-nav" on:click={prevMonth}>‹</button>
+                                <span class="calendar-month">{calendarMonthYear}</span>
+                                <button class="calendar-nav" on:click={nextMonth}>›</button>
+                            </div>
+                            <div class="calendar-weekdays">
+                                <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
+                            </div>
+                            <div class="calendar-days">
+                                {#each calendarDays as day}
+                                    <span class="calendar-day" class:today={isToday(day)} class:empty={!day}>
+                                        {day || ''}
+                                    </span>
+                                {/each}
+                            </div>
+                        </div>
+                        <div class="timezone-panel">
+                            {#each timezones as tz}
+                                <div class="timezone-row">
+                                    <span class="timezone-label">{tz.label}</span>
+                                    <span class="timezone-time">{getTimezoneTime(tz.zone)}</span>
+                                </div>
+                            {/each}
+                        </div>
+                    </div>
+                {/if}
+            </div>
+            <div class="status">
+                <span class="status-dot" class:connected={isConnected}></span>
+            </div>
+            <div class="terminal-controls">
+                <button class="control-button" on:click={popoutTerminal} title="Pop out terminal">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M6.5 1A.5.5 0 0 1 7 .5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0V1.5H7a.5.5 0 0 1-.5-.5z"/>
+                        <path d="M13.5 1l-6 6H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9.5l6-6z"/>
+                    </svg>
+                </button>
+                <button class="control-button" on:click={toggleDock} title={isDocked ? 'Undock' : 'Dock'}>
+                    {#if isDocked}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M14 2H2v12h12V2zM3 13V3h10v10H3z"/>
+                        </svg>
+                    {:else}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M2 10h12v4H2v-4zm0-8h12v6H2V2z"/>
+                        </svg>
+                    {/if}
+                </button>
+                <button class="close-button" on:click={() => (isOpen = false)}>×</button>
+            </div>
+            </div>
+        </div>
+
+        <div class="tab-content">
+            {#if activeTab === 'terminal'}
+                <TerminalCore
+                    bind:this={terminalCore}
+                    realmId={selectedRealmId}
+                    {renderStickers}
+                    showHotkeyHelp={true}
+                    {terminalHotkey}
+                    isActive={activeTab === 'terminal'}
+                    on:showProfile={handleShowProfile}
+                    on:realmChange={handleRealmChange}
+                    on:stickersToggled={handleStickersToggled}
+                />
+            {:else if activeTab === 'stickers'}
+                <StickerBrowser onSelect={handleStickerSelect} />
+            {:else if activeTab === 'streams'}
+                <StreamsBrowser isActive={activeTab === 'streams'} />
+            {:else if activeTab === 'watch'}
+                <WatchRoomsBrowser isActive={activeTab === 'watch'} />
+            {:else if activeTab === 'audio'}
+                <AudioBrowser isActive={activeTab === 'audio'} />
+            {:else if activeTab === 'ebooks'}
+                <EbookBrowser isActive={activeTab === 'ebooks'} />
+            {:else if activeTab === 'games'}
+                <GamesBrowser isActive={activeTab === 'games'} />
+            {:else if activeTab === 'treasury'}
+                <TreasuryBrowser isActive={activeTab === 'treasury'} />
+            {/if}
+        </div>
+
+        {#if activeProfilePreview}
+            <ProfilePreview
+                username={activeProfilePreview.username}
+                userId={activeProfilePreview.userId}
+                isGuest={activeProfilePreview.isGuest}
+                messageId={activeProfilePreview.messageId}
+                position={activeProfilePreview.position}
+                realmId={selectedRealmId}
+                on:close={handleProfileClose}
+            />
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .terminal-container {
+        position: fixed;
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        z-index: 9999;
+    }
+
+    .terminal-container.docked {
+        top: var(--nav-height, 60px);
+        left: 0;
+        right: 0;
+        border-bottom: 1px solid #333;
+    }
+
+    .terminal-container.undocked {
+        width: 600px;
+        height: 400px;
+        border: 1px solid #333;
+        border-radius: 8px;
+        resize: both;
+        overflow: hidden;
+    }
+
+    .resize-handle {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: #333;
+        cursor: ns-resize;
+        z-index: 10;
+    }
+
+    .resize-handle:hover,
+    .resize-handle:active {
+        background: #4caf50;
+    }
+
+    .terminal-header {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem;
+        background: #0d0d0d;
+        border-bottom: 1px solid #333;
+        gap: 0.375rem;
+        user-select: none;
+        flex-shrink: 0;
+    }
+
+    .docked .terminal-header {
+        cursor: default;
+    }
+
+    .undocked .terminal-header {
+        cursor: move;
+    }
+
+    .header-right {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        flex-shrink: 0;
+    }
+
+    .status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        min-width: 26px;
+        padding: 0 0.375rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+    }
+
+    .status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #f44336;
+    }
+
+    .status-dot.connected {
+        background: #4caf50;
+    }
+
+    .terminal-controls {
+        display: flex;
+        gap: 0.375rem;
+        align-items: center;
+    }
+
+    .control-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        min-width: 26px;
+        padding: 0 0.375rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .control-button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .close-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        min-width: 26px;
+        padding: 0 0.375rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        font-size: 1.1rem;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .close-button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .tab-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: rgb(13, 17, 23);
+        opacity: 0.9;
+    }
+
+    .datetime-container {
+        position: relative;
+    }
+
+    .datetime-button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: 26px;
+        padding: 0 0.5rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .datetime-button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .datetime-date {
+        color: #fff;
+    }
+
+    .datetime-time {
+        color: #4caf50;
+    }
+
+    .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: 0.5rem;
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        padding: 0.75rem;
+        z-index: 100;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .calendar-panel {
+        min-width: 200px;
+    }
+
+    .timezone-panel {
+        border-left: 1px solid #30363d;
+        padding-left: 0.75rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 100px;
+    }
+
+    .timezone-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.15rem 0;
+    }
+
+    .timezone-label {
+        color: #8b949e;
+        font-size: 0.7rem;
+    }
+
+    .timezone-time {
+        color: #7ee787;
+        font-size: 0.75rem;
+        font-weight: 600;
+        font-family: 'Consolas', 'Monaco', monospace;
+    }
+
+    .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.75rem;
+    }
+
+    .calendar-month {
+        color: #c9d1d9;
+        font-size: 0.9rem;
+        font-weight: 600;
+    }
+
+    .calendar-nav {
+        background: none;
+        border: none;
+        color: #8b949e;
+        font-size: 1.25rem;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        transition: all 0.15s;
+    }
+
+    .calendar-nav:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+    }
+
+    .calendar-weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+        margin-bottom: 0.25rem;
+    }
+
+    .calendar-weekdays span {
+        text-align: center;
+        color: #8b949e;
+        font-size: 0.7rem;
+        padding: 0.25rem;
+    }
+
+    .calendar-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+    }
+
+    .calendar-day {
+        text-align: center;
+        padding: 0.35rem;
+        font-size: 0.8rem;
+        color: #c9d1d9;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .calendar-day:not(.empty):not(.today):hover {
+        background: rgba(139, 148, 158, 0.2);
+    }
+
+    .calendar-day.empty {
+        color: transparent;
+        cursor: default;
+    }
+
+    .calendar-day.today {
+        background: #7ee787;
+        color: #0d1117;
+        font-weight: 600;
+    }
+
+    .calendar-day.today:hover {
+        background: #9eeea1;
+    }
+
+    .timezone-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.15rem 0.35rem;
+        margin: 0 -0.35rem;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background 0.15s;
+    }
+
+    .timezone-row:hover {
+        background: rgba(126, 231, 135, 0.15);
+    }
+
+    .timezone-row:hover .timezone-label {
+        color: #c9d1d9;
+    }
+</style>
diff --git a/frontend/src/lib/components/chat/ProfilePreview.svelte b/frontend/src/lib/components/chat/ProfilePreview.svelte
new file mode 100644
index 0000000..44ff0ee
--- /dev/null
+++ b/frontend/src/lib/components/chat/ProfilePreview.svelte
@@ -0,0 +1,685 @@
+<script>
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { hiddenUsers, toggleHideUser, chatUserInfo } from '$lib/chat/chatStore';
+    import { chatWebSocket as chatWs } from '$lib/chat/chatWebSocket';
+    import { formatUbercoin } from '$lib/stores/ubercoin';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+    import UbercoinTipModal from '$lib/components/UbercoinTipModal.svelte';
+
+    export let username = '';
+    export let userId = null;
+    export let isGuest = false;
+    export let position = { x: 0, y: 0 };
+    export let targetFingerprint = ''; // For guest bans
+
+    const dispatch = createEventDispatcher();
+
+    // Check current user's moderation permissions from chat connection
+    $: currentUser = $chatUserInfo;
+    $: canUberban = currentUser?.isAdmin || currentUser?.isSiteModerator;
+    $: canModerate = currentUser?.isModerator || currentUser?.isAdmin || currentUser?.isSiteModerator;
+    $: isSelf = currentUser?.userId === userId;
+
+    let profile = null;
+    let loading = true;
+    let error = null;
+    let popupElement;
+    let showTipModal = false;
+
+    // Check if this user is hidden
+    $: isHidden = userId && $hiddenUsers.has(userId);
+
+    onMount(async () => {
+        // Add click outside listener
+        document.addEventListener('click', handleClickOutside);
+
+        // Fetch profile for registered users
+        if (!isGuest && username) {
+            await fetchProfile();
+        } else {
+            loading = false;
+        }
+
+        // Adjust position to stay within viewport
+        requestAnimationFrame(adjustPosition);
+    });
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside);
+    });
+
+    function handleClickOutside(event) {
+        if (popupElement && !popupElement.contains(event.target)) {
+            dispatch('close');
+        }
+    }
+
+    async function fetchProfile() {
+        try {
+            const response = await fetch(`/api/users/${encodeURIComponent(username)}`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                if (data.success) {
+                    profile = data.profile;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to fetch profile:', e);
+            error = 'Failed to load profile';
+        }
+        loading = false;
+    }
+
+    function adjustPosition() {
+        if (!popupElement) return;
+
+        const rect = popupElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        // Adjust if goes off right edge
+        if (rect.right > viewportWidth - 10) {
+            position.x = viewportWidth - rect.width - 10;
+        }
+
+        // Adjust if goes off bottom edge
+        if (rect.bottom > viewportHeight - 10) {
+            position.y = position.y - rect.height - 20;
+        }
+
+        // Ensure not off left edge
+        if (position.x < 10) {
+            position.x = 10;
+        }
+
+        // Ensure not off top edge
+        if (position.y < 10) {
+            position.y = 10;
+        }
+    }
+
+    function handleViewProfile() {
+        // Navigate to profile page
+        window.location.href = `/profile/${encodeURIComponent(username)}`;
+    }
+
+    function handleToggleHide() {
+        if (userId) {
+            toggleHideUser(userId);
+        }
+    }
+
+    function formatDate(dateStr) {
+        if (!dateStr) return '';
+        const date = new Date(dateStr);
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short'
+        });
+    }
+
+    function handleOpenTipModal() {
+        showTipModal = true;
+    }
+
+    function handleTipModalClose() {
+        showTipModal = false;
+    }
+
+    function handleTipSent(event) {
+        // Tip was sent successfully
+        showTipModal = false;
+    }
+
+    // Check if user can send tips (authenticated and not viewing self)
+    $: canSendTip = $isAuthenticated && $auth.user && $auth.user.username !== username;
+
+    // Moderation action handlers
+    function handleUberban() {
+        if (!confirm(`Permanently ban ${username} from the entire site? This bans their browser fingerprint.`)) {
+            return;
+        }
+        chatWs.uberbanUser(userId, targetFingerprint, '');
+        dispatch('close');
+    }
+
+    function handleBan() {
+        if (!confirm(`Ban ${username} from this realm?`)) {
+            return;
+        }
+        chatWs.banUser(userId, '');
+        dispatch('close');
+    }
+
+    function handleKick() {
+        chatWs.kickUser(userId, 60, '');
+        dispatch('close');
+    }
+
+    function handleMute() {
+        chatWs.muteUser(userId, 0, ''); // 0 = permanent
+        dispatch('close');
+    }
+</script>
+
+<style>
+    .profile-preview {
+        position: fixed;
+        z-index: 1000;
+        background: #1a1a1a;
+        border: 1px solid var(--border, #333);
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        width: 280px;
+        overflow: hidden;
+        animation: fadeIn 0.15s ease-out;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-5px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .banner-container {
+        width: 100%;
+        height: 60px;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .banner {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .banner-placeholder {
+        width: 100%;
+        height: 60px;
+    }
+
+    .profile-content {
+        padding: 12px;
+    }
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        color: white;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .user-details {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .username-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .username {
+        font-weight: 600;
+        font-size: 1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .username:hover {
+        filter: invert(1);
+    }
+
+    .color-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .guest-badge {
+        font-size: 0.7rem;
+        padding: 2px 6px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        color: #888;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .member-since {
+        font-size: 0.8rem;
+        color: #888;
+        margin-top: 2px;
+    }
+
+    .bio {
+        font-size: 0.85rem;
+        color: #ccc;
+        line-height: 1.4;
+        margin-bottom: 12px;
+        max-height: 60px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    .graffiti-container {
+        margin-bottom: 12px;
+        padding: 8px;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .graffiti-img {
+        image-rendering: pixelated;
+        width: 88px;
+        height: 33px;
+    }
+
+    .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .action-btn {
+        padding: 8px 12px;
+        background: transparent;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+        color: white;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.15s ease;
+        text-align: left;
+    }
+
+    .action-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .loading, .error-state {
+        padding: 20px;
+        text-align: center;
+        color: #888;
+    }
+
+    .guest-card {
+        padding: 16px;
+    }
+
+    .guest-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .guest-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+        color: #666;
+    }
+
+    .hide-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: #999;
+    }
+
+    .hide-btn:hover {
+        color: #f44336;
+        background: rgba(244, 67, 54, 0.1);
+    }
+
+    .hide-btn.unhide {
+        color: #4caf50;
+    }
+
+    .hide-btn.unhide:hover {
+        color: #66bb6a;
+        background: rgba(76, 175, 80, 0.1);
+    }
+
+    .hide-btn svg {
+        flex-shrink: 0;
+    }
+
+    .ubercoin-section {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        background: rgba(255, 215, 0, 0.08);
+        border-radius: 6px;
+        margin-bottom: 12px;
+    }
+
+    .ubercoin-balance {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 0.9rem;
+        color: #ffd700;
+    }
+
+    .coin-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 0.7rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .tip-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border: none;
+        border-radius: 4px;
+        color: #000;
+        font-size: 0.8rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .tip-btn:hover {
+        filter: brightness(1.1);
+        transform: translateY(-1px);
+    }
+
+    .tip-btn .coin-icon {
+        width: 16px;
+        height: 16px;
+        font-size: 0.6rem;
+    }
+
+    /* Moderation Actions */
+    .mod-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid var(--border, #333);
+    }
+
+    .mod-btn {
+        flex: 1;
+        min-width: 60px;
+        padding: 6px 10px;
+        font-size: 0.75rem;
+        text-align: center;
+    }
+
+    .mod-btn.kick {
+        color: #ffc107;
+        border-color: #ffc107;
+    }
+
+    .mod-btn.kick:hover {
+        background: rgba(255, 193, 7, 0.15);
+    }
+
+    .mod-btn.mute {
+        color: #9c27b0;
+        border-color: #9c27b0;
+    }
+
+    .mod-btn.mute:hover {
+        background: rgba(156, 39, 176, 0.15);
+    }
+
+    .mod-btn.ban {
+        color: #f44336;
+        border-color: #f44336;
+    }
+
+    .mod-btn.ban:hover {
+        background: rgba(244, 67, 54, 0.15);
+    }
+
+    .mod-btn.uberban {
+        color: #b71c1c;
+        border-color: #b71c1c;
+        font-weight: bold;
+    }
+
+    .mod-btn.uberban:hover {
+        background: rgba(183, 28, 28, 0.2);
+    }
+</style>
+
+<div
+    class="profile-preview"
+    bind:this={popupElement}
+    style="left: {position.x}px; top: {position.y}px;"
+    on:click|stopPropagation
+>
+    {#if isGuest}
+        <!-- Guest User Card -->
+        <div class="guest-card">
+            <div class="guest-info">
+                <div class="guest-avatar">G</div>
+                <div class="user-details">
+                    <div class="username-row">
+                        <span class="username">{username}</span>
+                        <span class="guest-badge">Guest</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="actions">
+                <button class="action-btn hide-btn" class:unhide={isHidden} on:click={handleToggleHide}>
+                    {#if isHidden}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
+                            <path d="M2 8s3-5.5 6-5.5S14 8 14 8s-3 5.5-6 5.5S2 8 2 8zm-1 0a.5.5 0 0 0 0 1c0-.552.93-1.752 2.06-2.715.45-.383.937-.727 1.44-1.017C5.478 4.676 6.68 4 8 4c1.32 0 2.522.676 3.5 1.268.503.29.99.634 1.44 1.017C14.07 7.248 15 8.448 15 9a.5.5 0 0 0 0-1c0 .552-.93 1.752-2.06 2.715-.45.383-.937.727-1.44 1.017C10.522 12.324 9.32 13 8 13c-1.32 0-2.522-.676-3.5-1.268-.503-.29-.99-.634-1.44-1.017C1.93 9.752 1 8.552 1 8z"/>
+                        </svg>
+                        Show Messages
+                    {:else}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+                            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+                            <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+                        </svg>
+                        Hide Messages
+                    {/if}
+                </button>
+
+                <!-- Moderation Actions for Guests -->
+                {#if canModerate}
+                    <div class="mod-actions">
+                        <button class="action-btn mod-btn kick" on:click={handleKick} title="Kick (1 min block)">
+                            Kick
+                        </button>
+                        <button class="action-btn mod-btn mute" on:click={handleMute} title="Mute">
+                            Mute
+                        </button>
+                        <button class="action-btn mod-btn ban" on:click={handleBan} title="Ban from realm">
+                            Ban
+                        </button>
+                        {#if canUberban}
+                            <button class="action-btn mod-btn uberban" on:click={handleUberban} title="Site-wide fingerprint ban">
+                                Uberban
+                            </button>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {:else if loading}
+        <div class="loading">Loading profile...</div>
+    {:else if error}
+        <div class="error-state">{error}</div>
+    {:else if profile}
+        <!-- Registered User Card -->
+        {#if profile.bannerUrl}
+            <div class="banner-container">
+                <img
+                    src={profile.bannerUrl}
+                    alt="Banner"
+                    class="banner"
+                    style="object-position: {profile.bannerPositionX ?? 50}% {profile.bannerPosition ?? 50}%; transform: scale({(profile.bannerZoom ?? 100) / 100}); transform-origin: {profile.bannerPositionX ?? 50}% {profile.bannerPosition ?? 50}%;"
+                />
+            </div>
+        {:else}
+            <div
+                class="banner-placeholder"
+                style="background: linear-gradient(135deg, {profile.colorCode || '#561D5E'} 0%, {profile.colorCode || '#561D5E'}66 100%);"
+            ></div>
+        {/if}
+
+        <div class="profile-content">
+            <div class="user-info">
+                <div class="avatar">
+                    {#if profile.avatarUrl}
+                        <img src={profile.avatarUrl} alt={profile.username} />
+                    {:else}
+                        {profile.username.charAt(0).toUpperCase()}
+                    {/if}
+                </div>
+                <div class="user-details">
+                    <div class="username-row">
+                        <span class="username" style="color: {profile.colorCode || '#561D5E'};">{profile.username}</span>
+                        <div
+                            class="color-dot"
+                            style="background: {profile.colorCode || '#561D5E'};"
+                        ></div>
+                    </div>
+                    <div class="member-since">
+                        Member since {formatDate(profile.createdAt)}
+                    </div>
+                </div>
+            </div>
+
+            {#if profile.bio}
+                <div class="bio">{profile.bio}</div>
+            {/if}
+
+            {#if profile.graffitiUrl}
+                <div class="graffiti-container">
+                    <img
+                        src={profile.graffitiUrl}
+                        alt="{profile.username}'s graffiti"
+                        class="graffiti-img"
+                    />
+                </div>
+            {/if}
+
+            <!-- übercoin Section -->
+            <div class="ubercoin-section">
+                <div class="ubercoin-balance">
+                    <span class="coin-icon">Ü</span>
+                    <span>{formatUbercoin(profile.ubercoinBalance)}</span>
+                </div>
+                {#if canSendTip}
+                    <button class="tip-btn" on:click|stopPropagation={handleOpenTipModal}>
+                        <span class="coin-icon">Ü</span>
+                        Send
+                    </button>
+                {/if}
+            </div>
+
+            <div class="actions">
+                <button class="action-btn" on:click={handleViewProfile}>
+                    View Full Profile
+                </button>
+                <button class="action-btn hide-btn" class:unhide={isHidden} on:click={handleToggleHide}>
+                    {#if isHidden}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
+                            <path d="M2 8s3-5.5 6-5.5S14 8 14 8s-3 5.5-6 5.5S2 8 2 8zm-1 0a.5.5 0 0 0 0 1c0-.552.93-1.752 2.06-2.715.45-.383.937-.727 1.44-1.017C5.478 4.676 6.68 4 8 4c1.32 0 2.522.676 3.5 1.268.503.29.99.634 1.44 1.017C14.07 7.248 15 8.448 15 9a.5.5 0 0 0 0-1c0 .552-.93 1.752-2.06 2.715-.45.383-.937.727-1.44 1.017C10.522 12.324 9.32 13 8 13c-1.32 0-2.522-.676-3.5-1.268-.503-.29-.99-.634-1.44-1.017C1.93 9.752 1 8.552 1 8z"/>
+                        </svg>
+                        Show Messages
+                    {:else}
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+                            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+                            <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+                        </svg>
+                        Hide Messages
+                    {/if}
+                </button>
+
+                <!-- Moderation Actions for Registered Users -->
+                {#if canModerate && !isSelf}
+                    <div class="mod-actions">
+                        <button class="action-btn mod-btn kick" on:click={handleKick} title="Kick (1 min block)">
+                            Kick
+                        </button>
+                        <button class="action-btn mod-btn mute" on:click={handleMute} title="Mute">
+                            Mute
+                        </button>
+                        <button class="action-btn mod-btn ban" on:click={handleBan} title="Ban from realm">
+                            Ban
+                        </button>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {:else}
+        <div class="error-state">Profile not found</div>
+    {/if}
+</div>
+
+<!-- Ubercoin Tip Modal -->
+<UbercoinTipModal
+    show={showTipModal}
+    recipientUsername={username}
+    on:close={handleTipModalClose}
+    on:sent={handleTipSent}
+/>
diff --git a/frontend/src/lib/components/chat/StickerBrowser.svelte b/frontend/src/lib/components/chat/StickerBrowser.svelte
new file mode 100644
index 0000000..fed9ba4
--- /dev/null
+++ b/frontend/src/lib/components/chat/StickerBrowser.svelte
@@ -0,0 +1,515 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { stickerFavorites } from '$lib/chat/stickerFavorites';
+	import { stickers as sharedStickers, ensureLoaded, isLoaded } from '$lib/stores/stickers';
+
+	export let onSelect = null; // callback when sticker is selected for insertion
+
+	let filteredStickers = [];
+	let searchQuery = '';
+	let loading = true;
+	let error = null;
+
+	// Lazy loading state
+	let visibleStickers = [];
+	let batchSize = 50;
+	let loadedCount = 0;
+	let containerElement;
+	let sentinelElement;
+	let observer;
+
+	// Context menu state
+	let contextMenu = null; // { sticker, x, y }
+
+	onMount(async () => {
+		// Use shared sticker store - only fetches once across all components
+		loading = true;
+		try {
+			await ensureLoaded();
+			applyFilter();
+		} catch (e) {
+			error = 'Failed to load stickers';
+		} finally {
+			loading = false;
+		}
+		setupIntersectionObserver();
+	});
+
+	onDestroy(() => {
+		if (observer) {
+			observer.disconnect();
+		}
+	});
+
+	function applyFilter() {
+		const query = searchQuery.toLowerCase().trim();
+		if (query) {
+			filteredStickers = $sharedStickers.filter(s =>
+				s.name.toLowerCase().includes(query)
+			);
+		} else {
+			filteredStickers = [...$sharedStickers];
+		}
+		// Reset lazy loading
+		loadedCount = 0;
+		loadMoreStickers();
+	}
+
+	function loadMoreStickers() {
+		const nextBatch = filteredStickers.slice(loadedCount, loadedCount + batchSize);
+		if (nextBatch.length > 0) {
+			visibleStickers = [...visibleStickers.slice(0, loadedCount), ...nextBatch];
+			loadedCount += nextBatch.length;
+		}
+	}
+
+	function setupIntersectionObserver() {
+		if (!sentinelElement) return;
+
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting && loadedCount < filteredStickers.length) {
+					loadMoreStickers();
+				}
+			});
+		}, {
+			root: containerElement,
+			rootMargin: '100px',
+			threshold: 0
+		});
+
+		observer.observe(sentinelElement);
+	}
+
+	function handleSearch() {
+		visibleStickers = [];
+		applyFilter();
+	}
+
+	function handleStickerClick(sticker) {
+		if (onSelect) {
+			onSelect(`:${sticker.name}:`);
+		}
+	}
+
+	function handleContextMenu(event, sticker) {
+		event.preventDefault();
+		contextMenu = {
+			sticker,
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+
+	function closeContextMenu() {
+		contextMenu = null;
+	}
+
+	function handleClickOutside(event) {
+		if (contextMenu && !event.target.closest('.sticker-context-menu')) {
+			closeContextMenu();
+		}
+	}
+
+	function toggleFavorite() {
+		if (contextMenu) {
+			stickerFavorites.toggle(contextMenu.sticker.name);
+			closeContextMenu();
+		}
+	}
+
+	function openInNewTab() {
+		if (contextMenu) {
+			window.open(contextMenu.sticker.filePath, '_blank');
+			closeContextMenu();
+		}
+	}
+
+	function copyImageUrl() {
+		if (contextMenu) {
+			const fullUrl = window.location.origin + contextMenu.sticker.filePath;
+			navigator.clipboard.writeText(fullUrl).catch(() => {});
+			closeContextMenu();
+		}
+	}
+
+	$: isFavorite = contextMenu ? $stickerFavorites.includes(contextMenu.sticker.name) : false;
+
+	// Get favorite stickers from the loaded stickers
+	$: favoriteStickers = $sharedStickers.filter(s => $stickerFavorites.includes(s.name));
+
+	// Re-apply filter when search changes
+	$: if (searchQuery !== undefined) {
+		handleSearch();
+	}
+
+	function handleFavoriteClick(sticker) {
+		if (onSelect) {
+			onSelect(`:${sticker.name}:`);
+		}
+	}
+
+	function handleFavoriteContextMenu(event, sticker) {
+		event.preventDefault();
+		contextMenu = {
+			sticker,
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div class="sticker-browser">
+	<!-- Favorites Section -->
+	{#if favoriteStickers.length > 0}
+		<div class="favorites-section">
+			<div class="favorites-header">
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+					<path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
+				</svg>
+				<span>Favorites</span>
+				<span class="favorites-count">{favoriteStickers.length}</span>
+			</div>
+			<div class="favorites-grid">
+				{#each favoriteStickers as sticker (sticker.id)}
+					<button
+						class="favorite-sticker"
+						on:click={() => handleFavoriteClick(sticker)}
+						on:contextmenu={(e) => handleFavoriteContextMenu(e, sticker)}
+						title={`:${sticker.name}:`}
+					>
+						<img
+							src={sticker.filePath}
+							alt={sticker.name}
+							loading="lazy"
+						/>
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div class="search-bar">
+		<input
+			type="text"
+			placeholder="Search stickers..."
+			bind:value={searchQuery}
+			class="search-input"
+		/>
+		<span class="sticker-count">{filteredStickers.length} stickers</span>
+	</div>
+
+	{#if loading}
+		<div class="loading">Loading stickers...</div>
+	{:else if error}
+		<div class="error">{error}</div>
+	{:else if filteredStickers.length === 0}
+		<div class="empty">
+			{#if searchQuery}
+				No stickers found for "{searchQuery}"
+			{:else}
+				No stickers available
+			{/if}
+		</div>
+	{:else}
+		<div class="sticker-grid" bind:this={containerElement}>
+			{#each visibleStickers as sticker (sticker.id)}
+				<button
+					class="sticker-item"
+					class:favorite={$stickerFavorites.includes(sticker.name)}
+					on:click={() => handleStickerClick(sticker)}
+					on:contextmenu={(e) => handleContextMenu(e, sticker)}
+					title={`:${sticker.name}:`}
+				>
+					<img
+						src={sticker.filePath}
+						alt={sticker.name}
+						loading="lazy"
+						decoding="async"
+					/>
+					<span class="sticker-name">{sticker.name}</span>
+				</button>
+			{/each}
+
+			<!-- Sentinel for infinite scroll -->
+			<div bind:this={sentinelElement} class="sentinel"></div>
+
+			{#if loadedCount < filteredStickers.length}
+				<div class="loading-more">Loading more...</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- Context Menu -->
+{#if contextMenu}
+	<div
+		class="sticker-context-menu"
+		style="left: {contextMenu.x}px; top: {contextMenu.y}px;"
+	>
+		<button class="context-menu-item" on:click={toggleFavorite}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
+			</svg>
+			{isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
+		</button>
+		<button class="context-menu-item" on:click={openInNewTab}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+				<path d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+			</svg>
+			Open in New Tab
+		</button>
+		<button class="context-menu-item" on:click={copyImageUrl}>
+			<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+				<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+				<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+			</svg>
+			Copy Image URL
+		</button>
+	</div>
+{/if}
+
+<style>
+	.sticker-browser {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: #0d1117;
+	}
+
+	/* Favorites Section */
+	.favorites-section {
+		background: #161b22;
+		border-bottom: 1px solid #30363d;
+		padding: 0.5rem 0.75rem;
+	}
+
+	.favorites-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: #f85149;
+		font-size: 0.75rem;
+		font-weight: 600;
+		margin-bottom: 0.5rem;
+	}
+
+	.favorites-header svg {
+		opacity: 0.8;
+	}
+
+	.favorites-count {
+		color: #8b949e;
+		font-weight: 400;
+	}
+
+	.favorites-grid {
+		display: flex;
+		gap: 0.375rem;
+		overflow-x: auto;
+		padding-bottom: 0.25rem;
+	}
+
+	.favorites-grid::-webkit-scrollbar {
+		height: 4px;
+	}
+
+	.favorites-grid::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.favorites-grid::-webkit-scrollbar-thumb {
+		background: #30363d;
+		border-radius: 2px;
+	}
+
+	.favorite-sticker {
+		flex-shrink: 0;
+		width: 40px;
+		height: 40px;
+		padding: 0.25rem;
+		background: #0d1117;
+		border: 1px solid #30363d;
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.favorite-sticker:hover {
+		background: #21262d;
+		border-color: #f85149;
+		transform: scale(1.05);
+	}
+
+	.favorite-sticker img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.search-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		background: #161b22;
+		border-bottom: 1px solid #30363d;
+	}
+
+	.search-input {
+		flex: 1;
+		background: #0d1117;
+		border: 1px solid #30363d;
+		border-radius: 6px;
+		padding: 0.5rem 0.75rem;
+		color: #c9d1d9;
+		font-size: 0.875rem;
+		outline: none;
+	}
+
+	.search-input:focus {
+		border-color: #58a6ff;
+	}
+
+	.search-input::placeholder {
+		color: #6e7681;
+	}
+
+	.sticker-count {
+		color: #8b949e;
+		font-size: 0.75rem;
+		white-space: nowrap;
+	}
+
+	.sticker-grid {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+		gap: 0.5rem;
+		align-content: start;
+	}
+
+	.sticker-grid::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.sticker-grid::-webkit-scrollbar-track {
+		background: #0d1117;
+	}
+
+	.sticker-grid::-webkit-scrollbar-thumb {
+		background: #30363d;
+		border-radius: 4px;
+	}
+
+	.sticker-grid::-webkit-scrollbar-thumb:hover {
+		background: #484f58;
+	}
+
+	.sticker-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		background: #161b22;
+		border: 1px solid #30363d;
+		border-radius: 6px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.sticker-item:hover {
+		background: #21262d;
+		border-color: #484f58;
+		transform: scale(1.02);
+	}
+
+	.sticker-item.favorite {
+		border-color: #f85149;
+		background: rgba(248, 81, 73, 0.1);
+	}
+
+	.sticker-item img {
+		width: 48px;
+		height: 48px;
+		object-fit: contain;
+	}
+
+	.sticker-name {
+		font-size: 0.65rem;
+		color: #8b949e;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+	}
+
+	.sentinel {
+		height: 1px;
+		width: 100%;
+		grid-column: 1 / -1;
+	}
+
+	.loading,
+	.error,
+	.empty,
+	.loading-more {
+		padding: 2rem;
+		text-align: center;
+		color: #8b949e;
+	}
+
+	.error {
+		color: #f85149;
+	}
+
+	.loading-more {
+		grid-column: 1 / -1;
+		padding: 1rem;
+		font-size: 0.875rem;
+	}
+
+	/* Context Menu */
+	.sticker-context-menu {
+		position: fixed;
+		background: #161b22;
+		border: 1px solid #30363d;
+		border-radius: 6px;
+		padding: 0.25rem;
+		min-width: 180px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+		z-index: 10000;
+	}
+
+	.context-menu-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		background: none;
+		border: none;
+		color: #c9d1d9;
+		font-size: 0.875rem;
+		text-align: left;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: background 0.15s;
+	}
+
+	.context-menu-item:hover {
+		background: #30363d;
+	}
+
+	.context-menu-item svg {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+</style>
diff --git a/frontend/src/lib/components/terminal/AudioBrowser.svelte b/frontend/src/lib/components/terminal/AudioBrowser.svelte
new file mode 100644
index 0000000..65ea43d
--- /dev/null
+++ b/frontend/src/lib/components/terminal/AudioBrowser.svelte
@@ -0,0 +1,628 @@
+<script>
+    import { audioPlaylist, currentTrack } from '$lib/stores/audioPlaylist';
+
+    /** @type {boolean} Whether the audio tab is currently active */
+    export let isActive = false;
+
+    let progressBar;
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function handleProgressClick(e) {
+        if (!$currentTrack || !$audioPlaylist.duration) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        const newTime = percent * $audioPlaylist.duration;
+        audioPlaylist.seek(newTime);
+    }
+
+    function handleVolumeChange(e) {
+        const volume = parseFloat(e.target.value);
+        audioPlaylist.setVolume(volume);
+    }
+</script>
+
+<div class="audio-tab">
+    <!-- Player Section (terminal/pixel style) -->
+    <div class="player-section">
+        {#if $currentTrack}
+            <div class="player-header">
+                <span class="player-label">NOW PLAYING</span>
+                <span class="player-status">{$audioPlaylist.isPlaying ? '▶' : '■'}</span>
+            </div>
+
+            <div class="player-track-info">
+                <div class="player-thumb">
+                    {#if $currentTrack.thumbnailPath}
+                        <img src={$currentTrack.thumbnailPath} alt="" />
+                    {:else}
+                        <span class="placeholder">♫</span>
+                    {/if}
+                </div>
+                <div class="player-info">
+                    <span class="player-title">{$currentTrack.title}</span>
+                    <span class="player-artist">{$currentTrack.username}</span>
+                </div>
+            </div>
+
+            <!-- Progress bar (pixel style) -->
+            <div class="player-progress-wrap">
+                <span class="time-display">{formatDuration($audioPlaylist.currentTime)}</span>
+                <div class="player-progress" on:click={handleProgressClick} bind:this={progressBar}>
+                    <div class="progress-track">
+                        <div class="progress-fill" style="width: {$audioPlaylist.duration ? ($audioPlaylist.currentTime / $audioPlaylist.duration * 100) : 0}%"></div>
+                        <div class="progress-head" style="left: {$audioPlaylist.duration ? ($audioPlaylist.currentTime / $audioPlaylist.duration * 100) : 0}%"></div>
+                    </div>
+                </div>
+                <span class="time-display">{formatDuration($audioPlaylist.duration)}</span>
+            </div>
+
+            <!-- Controls (ASCII style) -->
+            <div class="player-controls">
+                <button class="ctrl-btn" class:active={$audioPlaylist.shuffle} on:click={() => audioPlaylist.toggleShuffle()} title="Shuffle">
+                    <span class="ctrl-icon">⟲</span>
+                </button>
+                <button class="ctrl-btn" on:click={() => audioPlaylist.previous()} title="Previous">
+                    <span class="ctrl-icon">◂◂</span>
+                </button>
+                <button class="ctrl-btn play" on:click={() => audioPlaylist.togglePlay()}>
+                    <span class="ctrl-icon">{$audioPlaylist.isPlaying ? '▮▮' : '▶'}</span>
+                </button>
+                <button class="ctrl-btn" on:click={() => audioPlaylist.next()} title="Next">
+                    <span class="ctrl-icon">▸▸</span>
+                </button>
+                <button class="ctrl-btn" class:active={$audioPlaylist.repeat !== 'none'} on:click={() => audioPlaylist.cycleRepeat()} title="Repeat: {$audioPlaylist.repeat}">
+                    <span class="ctrl-icon">{$audioPlaylist.repeat === 'one' ? '↺¹' : '↺'}</span>
+                </button>
+            </div>
+
+            <!-- Volume (pixel bar style) -->
+            <div class="player-volume">
+                <button class="vol-btn" on:click={() => audioPlaylist.toggleMute()}>
+                    {$audioPlaylist.muted || $audioPlaylist.volume === 0 ? '◁' : '◀'}
+                </button>
+                <div class="vol-bar-wrap">
+                    <input
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.01"
+                        value={$audioPlaylist.muted ? 0 : $audioPlaylist.volume}
+                        on:input={handleVolumeChange}
+                        class="volume-slider"
+                        style="--volume-percent: {($audioPlaylist.muted ? 0 : $audioPlaylist.volume) * 100}%"
+                    />
+                </div>
+                <span class="vol-pct">{Math.round(($audioPlaylist.muted ? 0 : $audioPlaylist.volume) * 100)}%</span>
+            </div>
+        {:else}
+            <div class="player-empty">
+                <div class="empty-icon">[ ♫ ]</div>
+                <span>No track loaded</span>
+                <span class="player-hint">Browse <a href="/audio">/audio</a> to add tracks</span>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Queue display -->
+    {#if $audioPlaylist.queue.length > 0}
+        <div class="queue-section">
+            <div class="queue-header">
+                <span>Queue ({$audioPlaylist.queue.length} tracks)</span>
+                <button class="clear-btn" on:click={() => audioPlaylist.clearQueue()}>Clear</button>
+            </div>
+            <div class="queue-list">
+                {#each $audioPlaylist.queue as track, index}
+                    <div
+                        class="queue-item"
+                        class:active={index === $audioPlaylist.currentIndex && !$audioPlaylist.nowPlaying}
+                        on:click={() => audioPlaylist.goToTrack(index)}
+                    >
+                        <span class="queue-index">{index + 1}</span>
+                        <span class="queue-title">{track.title}</span>
+                        <span class="queue-duration">{formatDuration(track.durationSeconds)}</span>
+                        <button class="remove-btn" on:click|stopPropagation={() => audioPlaylist.removeTrack(track.id)}>×</button>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {:else}
+        <div class="queue-empty">
+            <span>Queue is empty</span>
+            <span class="queue-hint">Add tracks from <a href="/audio">/audio</a> pages</span>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .audio-tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #0d1117;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+
+    /* Player section (terminal style) */
+    .player-section {
+        padding: 0.75rem;
+        background: #0d1117;
+        border-bottom: 1px solid #21262d;
+    }
+
+    .player-header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.35rem;
+        border-bottom: 1px dashed #30363d;
+    }
+
+    .player-label {
+        font-size: 0.65rem;
+        color: #ec4899;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+    }
+
+    .player-status {
+        font-size: 0.7rem;
+        color: #ec4899;
+    }
+
+    .player-track-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.4rem;
+        margin-bottom: 0.6rem;
+    }
+
+    .player-thumb {
+        width: 36px;
+        height: 36px;
+        overflow: hidden;
+        background: #161b22;
+        border: 1px solid #30363d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .player-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        image-rendering: pixelated;
+    }
+
+    .player-thumb .placeholder {
+        font-size: 1rem;
+        color: #484f58;
+    }
+
+    .player-info {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 0.1rem;
+    }
+
+    .player-title {
+        font-size: 0.75rem;
+        color: #e6edf3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .player-artist {
+        font-size: 0.65rem;
+        color: #6e7681;
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .player-artist:hover {
+        filter: invert(1);
+    }
+
+    /* Progress bar (pixel style) */
+    .player-progress-wrap {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .time-display {
+        font-size: 0.65rem;
+        color: #8b949e;
+        min-width: 32px;
+    }
+
+    .time-display:last-child {
+        text-align: right;
+    }
+
+    .player-progress {
+        flex: 1;
+        height: 8px;
+        background: #161b22;
+        border: 1px solid #30363d;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .progress-track {
+        position: absolute;
+        inset: 2px;
+        background: #21262d;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: #ec4899;
+        transition: width 0.1s linear;
+        box-shadow: 0 0 4px rgba(236, 72, 153, 0.5);
+    }
+
+    .progress-head {
+        position: absolute;
+        top: -1px;
+        width: 2px;
+        height: calc(100% + 2px);
+        background: #f472b6;
+        transform: translateX(-50%);
+        box-shadow: 0 0 6px rgba(236, 72, 153, 0.8);
+    }
+
+    /* Player controls (ASCII style) */
+    .player-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .ctrl-btn {
+        width: 28px;
+        height: 24px;
+        border: 1px solid #30363d;
+        background: #161b22;
+        color: #8b949e;
+        font-size: 0.7rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.1s ease;
+    }
+
+    .ctrl-btn:hover {
+        background: #21262d;
+        color: #e6edf3;
+        border-color: #484f58;
+    }
+
+    .ctrl-btn:active {
+        background: #30363d;
+    }
+
+    .ctrl-btn.active {
+        background: rgba(236, 72, 153, 0.15);
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .ctrl-btn.play {
+        width: 36px;
+        height: 26px;
+        background: #161b22;
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .ctrl-btn.play:hover {
+        background: rgba(236, 72, 153, 0.2);
+        color: #f472b6;
+    }
+
+    .ctrl-icon {
+        font-family: inherit;
+        letter-spacing: -1px;
+    }
+
+    /* Volume control (pixel style) */
+    .player-volume {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.4rem;
+    }
+
+    .vol-btn {
+        width: 20px;
+        height: 20px;
+        border: none;
+        background: transparent;
+        color: #6e7681;
+        font-size: 0.7rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .vol-btn:hover {
+        color: #ec4899;
+    }
+
+    .vol-bar-wrap {
+        position: relative;
+        width: 70px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+    }
+
+    .vol-fill {
+        display: none;
+    }
+
+    .volume-slider {
+        width: 100%;
+        height: 4px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: #30363d;
+        border-radius: 2px;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .volume-slider::-webkit-slider-runnable-track {
+        height: 4px;
+        background: linear-gradient(to right, #ec4899 0%, #ec4899 var(--volume-percent, 100%), #30363d var(--volume-percent, 100%), #30363d 100%);
+        border-radius: 2px;
+    }
+
+    .volume-slider::-moz-range-track {
+        height: 4px;
+        background: #30363d;
+        border-radius: 2px;
+    }
+
+    .volume-slider::-moz-range-progress {
+        height: 4px;
+        background: #ec4899;
+        border-radius: 2px;
+    }
+
+    .volume-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        margin-top: -4px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        transition: transform 0.1s ease;
+    }
+
+    .volume-slider::-moz-range-thumb {
+        width: 12px;
+        height: 12px;
+        background: #fff;
+        border: none;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    }
+
+    .volume-slider::-webkit-slider-thumb:hover {
+        transform: scale(1.15);
+    }
+
+    .volume-slider::-webkit-slider-thumb:active {
+        transform: scale(1.1);
+        background: #ec4899;
+    }
+
+    .vol-pct {
+        font-size: 0.6rem;
+        color: #6e7681;
+        min-width: 28px;
+        text-align: right;
+    }
+
+    /* Empty player state */
+    .player-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1.5rem;
+        color: #6e7681;
+        font-size: 0.75rem;
+        gap: 0.25rem;
+    }
+
+    .empty-icon {
+        font-size: 0.85rem;
+        color: #484f58;
+        margin-bottom: 0.25rem;
+    }
+
+    .player-hint {
+        font-size: 0.65rem;
+        color: #484f58;
+    }
+
+    /* Queue section (terminal list style) */
+    .queue-section {
+        border-bottom: 1px solid #21262d;
+    }
+
+    .queue-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.4rem 0.75rem;
+        background: #161b22;
+        border-bottom: 1px solid #21262d;
+        font-size: 0.65rem;
+        color: #6e7681;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .clear-btn {
+        padding: 0.15rem 0.35rem;
+        background: transparent;
+        border: 1px solid #30363d;
+        color: #6e7681;
+        font-size: 0.6rem;
+        font-family: inherit;
+        cursor: pointer;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .clear-btn:hover {
+        border-color: #f85149;
+        color: #f85149;
+    }
+
+    .queue-list {
+        max-height: 120px;
+        overflow-y: auto;
+    }
+
+    .queue-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .queue-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .queue-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+    }
+
+    .queue-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.3rem 0.75rem;
+        font-size: 0.7rem;
+        color: #8b949e;
+        cursor: pointer;
+        border-bottom: 1px solid #161b22;
+    }
+
+    .queue-item:hover {
+        background: #161b22;
+    }
+
+    .queue-item.active {
+        background: rgba(236, 72, 153, 0.1);
+        border-left: 2px solid #ec4899;
+        padding-left: calc(0.75rem - 2px);
+    }
+
+    .queue-index {
+        width: 18px;
+        text-align: right;
+        font-size: 0.6rem;
+        color: #484f58;
+    }
+
+    .queue-item.active .queue-index {
+        color: #ec4899;
+    }
+
+    .queue-title {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #c9d1d9;
+    }
+
+    .queue-item.active .queue-title {
+        color: #ec4899;
+    }
+
+    .queue-duration {
+        font-size: 0.6rem;
+        color: #484f58;
+    }
+
+    .remove-btn {
+        width: 16px;
+        height: 16px;
+        border: none;
+        background: transparent;
+        color: #484f58;
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.1s ease;
+    }
+
+    .queue-item:hover .remove-btn {
+        opacity: 1;
+    }
+
+    .remove-btn:hover {
+        color: #f85149;
+    }
+
+    /* Queue empty state */
+    .queue-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 1rem;
+        color: #6e7681;
+        font-size: 0.75rem;
+        flex: 1;
+        gap: 0.25rem;
+    }
+
+    .queue-hint {
+        font-size: 0.65rem;
+        color: #484f58;
+    }
+
+    .queue-hint a,
+    .player-hint a {
+        color: #ec4899;
+        text-decoration: none;
+    }
+
+    .queue-hint a:hover,
+    .player-hint a:hover {
+        text-decoration: underline;
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/EbookBrowser.svelte b/frontend/src/lib/components/terminal/EbookBrowser.svelte
new file mode 100644
index 0000000..3c48adf
--- /dev/null
+++ b/frontend/src/lib/components/terminal/EbookBrowser.svelte
@@ -0,0 +1,391 @@
+<script>
+    import { onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { ebookReader } from '$lib/stores/ebookReader';
+
+    /** @type {boolean} Whether the ebooks tab is currently active */
+    export let isActive = false;
+
+    let ebooks = [];
+    let loading = true;
+    let error = null;
+    let page = 1;
+    let hasMore = true;
+    let loadingMore = false;
+    let refreshInterval = null;
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + 'h';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + 'd';
+        return date.toLocaleDateString();
+    }
+
+    async function loadEbooks(append = false) {
+        if (!browser) return;
+
+        try {
+            error = null;
+            const res = await fetch(`/api/ebooks?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                const fetchedEbooks = data.ebooks || [];
+                if (append) {
+                    ebooks = [...ebooks, ...fetchedEbooks];
+                } else {
+                    ebooks = fetchedEbooks;
+                }
+                hasMore = fetchedEbooks.length >= 20;
+            } else {
+                error = 'Failed to load ebooks';
+            }
+        } catch (e) {
+            console.error('Failed to load ebooks:', e);
+            error = 'Failed to load ebooks';
+        } finally {
+            loading = false;
+            loadingMore = false;
+        }
+    }
+
+    function loadMore() {
+        if (loadingMore || !hasMore) return;
+        loadingMore = true;  // Set immediately to prevent race condition
+        page++;
+        loadEbooks(true);
+    }
+
+    function startRefresh() {
+        // Clear any existing interval first to prevent stacking
+        stopRefresh();
+        page = 1;
+        loading = true;
+        loadEbooks();
+        // Refresh every 30 seconds (ebooks don't change as often as streams)
+        refreshInterval = setInterval(() => {
+            page = 1;
+            loadEbooks();
+        }, 30000);
+    }
+
+    function stopRefresh() {
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+            refreshInterval = null;
+        }
+    }
+
+    // Start/stop refresh based on active state
+    $: if (browser && isActive) {
+        startRefresh();
+    } else {
+        stopRefresh();
+    }
+
+    function openBook(ebook) {
+        ebookReader.openBook({
+            id: ebook.id,
+            title: ebook.title,
+            filePath: ebook.filePath,
+            coverPath: ebook.coverPath,
+            chapterCount: ebook.chapterCount,
+            username: ebook.username,
+            realmName: ebook.realmName
+        });
+    }
+
+    function handleScroll(e) {
+        const target = e.target;
+        const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 100;
+        if (nearBottom && hasMore && !loadingMore) {
+            loadMore();
+        }
+    }
+
+    onDestroy(() => {
+        stopRefresh();
+    });
+</script>
+
+<div class="ebooks-tab">
+    <div class="ebooks-header">
+        <span class="ebooks-title">eBooks</span>
+        <span class="ebook-count">{ebooks.length} loaded</span>
+    </div>
+
+    <div class="ebooks-list" on:scroll={handleScroll}>
+        {#if loading}
+            <div class="ebooks-loading">Loading ebooks...</div>
+        {:else if error}
+            <div class="ebooks-error">{error}</div>
+        {:else if ebooks.length === 0}
+            <div class="ebooks-empty">
+                <div class="empty-icon">[ ◇ ]</div>
+                <span>No ebooks found</span>
+                <span class="empty-hint">Browse <a href="/ebooks">/ebooks</a> to upload</span>
+            </div>
+        {:else}
+            {#each ebooks as ebook (ebook.id)}
+                <div class="ebook-item">
+                    <div class="ebook-cover">
+                        {#if ebook.coverPath}
+                            <img src={ebook.coverPath} alt={ebook.title} />
+                        {:else}
+                            <span class="cover-placeholder">◇</span>
+                        {/if}
+                    </div>
+                    <div class="ebook-info">
+                        <span class="ebook-title">{ebook.title}</span>
+                        <span class="ebook-meta">
+                            <span class="ebook-realm">{ebook.realmName}</span>
+                            {#if ebook.chapterCount}
+                                <span class="ebook-stats">{ebook.chapterCount} chapters</span>
+                            {/if}
+                        </span>
+                        <span class="ebook-sub">
+                            <span class="ebook-user">@{ebook.username}</span>
+                            <span class="ebook-time">{timeAgo(ebook.createdAt)}</span>
+                        </span>
+                    </div>
+                    <button
+                        class="read-btn"
+                        on:click={() => openBook(ebook)}
+                        title="Open in reader"
+                    >Read</button>
+                </div>
+            {/each}
+            {#if loadingMore}
+                <div class="loading-more">Loading more...</div>
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .ebooks-tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #0d1117;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+
+    .ebooks-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .ebooks-title {
+        color: #3b82f6;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .ebook-count {
+        color: #6e7681;
+        font-size: 0.65rem;
+    }
+
+    .ebooks-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+    }
+
+    .ebooks-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .ebooks-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .ebooks-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+        border-radius: 3px;
+    }
+
+    .ebooks-loading,
+    .loading-more {
+        color: #8b949e;
+        font-size: 0.75rem;
+        text-align: center;
+        padding: 1.5rem 1rem;
+    }
+
+    .ebooks-error {
+        color: #f85149;
+        font-size: 0.75rem;
+        text-align: center;
+        padding: 1.5rem 1rem;
+    }
+
+    .ebooks-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 1rem;
+        color: #6e7681;
+        font-size: 0.75rem;
+        gap: 0.25rem;
+        flex: 1;
+    }
+
+    .empty-icon {
+        font-size: 0.85rem;
+        color: #3b82f6;
+        margin-bottom: 0.25rem;
+    }
+
+    .empty-hint {
+        font-size: 0.65rem;
+        color: #484f58;
+    }
+
+    .empty-hint a {
+        color: #3b82f6;
+        text-decoration: none;
+    }
+
+    .empty-hint a:hover {
+        text-decoration: underline;
+    }
+
+    .ebook-item {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+        transition: background 0.15s ease;
+        border-bottom: 1px solid #161b22;
+    }
+
+    .ebook-item:hover {
+        background: rgba(59, 130, 246, 0.05);
+    }
+
+    .ebook-item:last-child {
+        border-bottom: none;
+    }
+
+    .ebook-cover {
+        width: 36px;
+        height: 54px;
+        border-radius: 2px;
+        overflow: hidden;
+        background: #161b22;
+        border: 1px solid #30363d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .ebook-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .cover-placeholder {
+        font-size: 0.9rem;
+        color: #3b82f6;
+        opacity: 0.5;
+    }
+
+    .ebook-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.15rem;
+    }
+
+    .ebook-title {
+        color: #c9d1d9;
+        font-size: 0.75rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .ebook-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.65rem;
+    }
+
+    .ebook-realm {
+        color: #3b82f6;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 80px;
+    }
+
+    .ebook-stats {
+        color: #6e7681;
+    }
+
+    .ebook-sub {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.6rem;
+        color: #484f58;
+    }
+
+    .ebook-user {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .ebook-user:hover {
+        filter: invert(1);
+    }
+
+    .ebook-time {
+        white-space: nowrap;
+    }
+
+    .read-btn {
+        padding: 0.3rem 0.6rem;
+        background: rgba(59, 130, 246, 0.15);
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        border-radius: 4px;
+        color: #3b82f6;
+        font-size: 0.65rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .read-btn:hover {
+        background: rgba(59, 130, 246, 0.25);
+        border-color: #3b82f6;
+    }
+
+    .read-btn:active {
+        background: rgba(59, 130, 246, 0.35);
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/GamesBrowser.svelte b/frontend/src/lib/components/terminal/GamesBrowser.svelte
new file mode 100644
index 0000000..8b4c6d2
--- /dev/null
+++ b/frontend/src/lib/components/terminal/GamesBrowser.svelte
@@ -0,0 +1,495 @@
+<script>
+    import { onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { nakama, GAMES_POLL_INTERVAL } from '$lib/stores/nakama';
+    import { gamesOverlay } from '$lib/stores/gamesOverlay';
+    import { isAuthenticated, auth } from '$lib/stores/auth';
+
+    /** @type {boolean} Whether the games tab is currently active */
+    export let isActive = false;
+
+    let waitingMatches = [];
+    let liveMatches = [];
+    let loading = true;
+    let refreshInterval = null;
+    let creatingMatch = false;
+
+    function timeAgo(timestamp) {
+        if (!timestamp) return '';
+        const now = Math.floor(Date.now() / 1000);
+        const seconds = now - timestamp;
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + 'h';
+        return Math.floor(seconds / 86400) + 'd';
+    }
+
+    async function loadMatches() {
+        if (!browser) return;
+
+        try {
+            // Initialize nakama if needed
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+
+            if (!authResult.success) {
+                loading = false;
+                return;
+            }
+
+            // Load both waiting and playing matches
+            const [waitingResult, playingResult] = await Promise.all([
+                nakama.listChessMatches(10, 'waiting'),
+                nakama.listChessMatches(10, 'playing')
+            ]);
+
+            if (waitingResult.success) {
+                waitingMatches = waitingResult.matches || [];
+            }
+            if (playingResult.success) {
+                liveMatches = playingResult.matches || [];
+            }
+        } catch (e) {
+            console.error('Failed to load matches:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function startRefresh() {
+        stopRefresh();
+        loading = true;
+        loadMatches();
+        refreshInterval = setInterval(loadMatches, GAMES_POLL_INTERVAL);
+    }
+
+    function stopRefresh() {
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+            refreshInterval = null;
+        }
+    }
+
+    // Start/stop refresh based on active state
+    $: if (browser && isActive) {
+        startRefresh();
+    } else {
+        stopRefresh();
+    }
+
+    async function createNewGame() {
+        if (creatingMatch) return;
+
+        creatingMatch = true;
+        try {
+            const result = await nakama.createChallenge();
+            if (result.success) {
+                // Optimistic update - add to list immediately
+                const newMatch = {
+                    matchId: result.matchId,
+                    white: $auth.user?.username || 'You',
+                    black: null,
+                    status: 'waiting',
+                    createdAt: Math.floor(Date.now() / 1000),
+                    isCurrentUserMatch: true
+                };
+                waitingMatches = [newMatch, ...waitingMatches];
+                // Background refresh to sync with server
+                loadMatches();
+            } else {
+                console.error('Failed to create challenge:', result.error);
+            }
+        } catch (e) {
+            console.error('Failed to create match:', e);
+        } finally {
+            creatingMatch = false;
+        }
+    }
+
+    async function joinGame(matchId) {
+        try {
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+            if (!authResult.success) return;
+
+            await nakama.connectSocket();
+            const result = await nakama.joinMatch(matchId);
+
+            if (result.success) {
+                gamesOverlay.openGame(matchId, 'playing');
+            }
+        } catch (e) {
+            console.error('Failed to join match:', e);
+        }
+    }
+
+    async function watchGame(matchId) {
+        try {
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+            if (!authResult.success) return;
+
+            await nakama.connectSocket();
+            const result = await nakama.joinMatch(matchId);
+
+            if (result.success) {
+                gamesOverlay.openGame(matchId, 'spectating');
+            }
+        } catch (e) {
+            console.error('Failed to watch match:', e);
+        }
+    }
+
+    async function cancelChallenge(matchId) {
+        // Optimistic update - remove from list immediately
+        waitingMatches = waitingMatches.filter(m => m.matchId !== matchId);
+
+        try {
+            const result = await nakama.cancelChallenge(matchId);
+            if (!result.success) {
+                console.error('Failed to cancel challenge:', result.error);
+                loadMatches();  // Refresh to restore correct state
+            }
+        } catch (e) {
+            console.error('Failed to cancel challenge:', e);
+            loadMatches();  // Refresh to restore correct state
+        }
+    }
+
+    onDestroy(() => {
+        stopRefresh();
+    });
+</script>
+
+<div class="games-tab">
+    <div class="games-header">
+        <span class="games-title">Chess960</span>
+        {#if $isAuthenticated}
+            <button
+                class="create-btn"
+                on:click={createNewGame}
+                disabled={creatingMatch}
+            >
+                {creatingMatch ? '...' : '+ Challenge'}
+            </button>
+        {:else}
+            <span class="login-hint">Login to play</span>
+        {/if}
+    </div>
+
+    <div class="games-list">
+        {#if loading}
+            <div class="games-loading">Loading games...</div>
+        {:else}
+            <!-- Waiting matches (open challenges) -->
+            <div class="section-header">Open Challenges</div>
+            {#if waitingMatches.length === 0}
+                <div class="empty-section">No open challenges</div>
+            {:else}
+                {#each waitingMatches as match (match.matchId)}
+                    <div class="game-item waiting" class:own-match={match.isCurrentUserMatch}>
+                        <div class="game-info">
+                            <span class="player-name">{match.white || 'Unknown'}</span>
+                            {#if match.isCurrentUserMatch}
+                                <span class="own-badge">you</span>
+                            {:else}
+                                <span class="waiting-text">waiting...</span>
+                            {/if}
+                            <span class="game-time">{timeAgo(match.createdAt)}</span>
+                        </div>
+                        <div class="game-actions">
+                            {#if $isAuthenticated}
+                                {#if match.isCurrentUserMatch}
+                                    <button
+                                        class="action-btn view"
+                                        on:click={() => watchGame(match.matchId)}
+                                    >View</button>
+                                    <button
+                                        class="action-btn cancel"
+                                        on:click={() => cancelChallenge(match.matchId)}
+                                    >Cancel</button>
+                                {:else}
+                                    <button
+                                        class="action-btn join"
+                                        on:click={() => joinGame(match.matchId)}
+                                    >Join</button>
+                                {/if}
+                            {/if}
+                            {#if !match.isCurrentUserMatch}
+                                <button
+                                    class="action-btn popout"
+                                    on:click={() => watchGame(match.matchId)}
+                                    title="Open in popout"
+                                >⧉</button>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+
+            <!-- Live matches -->
+            <div class="section-header">Live Games</div>
+            {#if liveMatches.length === 0}
+                <div class="empty-section">No live games</div>
+            {:else}
+                {#each liveMatches as match (match.matchId)}
+                    <div class="game-item live">
+                        <div class="game-info">
+                            <span class="player-name">{match.white}</span>
+                            <span class="vs">vs</span>
+                            <span class="player-name">{match.black}</span>
+                            {#if match.spectatorCount > 0}
+                                <span class="spectators" title="{match.spectatorCount} watching">
+                                    {match.spectatorCount}
+                                </span>
+                            {/if}
+                        </div>
+                        <button
+                            class="action-btn popout"
+                            on:click={() => watchGame(match.matchId)}
+                            title="Watch in popout"
+                        >⧉</button>
+                    </div>
+                {/each}
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .games-tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #0d1117;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+
+    .games-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .games-title {
+        color: #f59e0b;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .create-btn {
+        padding: 0.3rem 0.6rem;
+        background: rgba(245, 158, 11, 0.15);
+        border: 1px solid rgba(245, 158, 11, 0.3);
+        border-radius: 4px;
+        color: #f59e0b;
+        font-size: 0.65rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .create-btn:hover:not(:disabled) {
+        background: rgba(245, 158, 11, 0.25);
+        border-color: #f59e0b;
+    }
+
+    .create-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .game-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        flex-shrink: 0;
+    }
+
+    .login-hint {
+        color: #6e7681;
+        font-size: 0.65rem;
+    }
+
+    .games-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+    }
+
+    .games-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .games-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .games-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+        border-radius: 3px;
+    }
+
+    .games-loading {
+        color: #8b949e;
+        font-size: 0.75rem;
+        text-align: center;
+        padding: 1.5rem 1rem;
+    }
+
+    .section-header {
+        color: #6e7681;
+        font-size: 0.65rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: 0.5rem 0.25rem 0.25rem;
+        margin-top: 0.5rem;
+        border-bottom: 1px solid #21262d;
+    }
+
+    .section-header:first-child {
+        margin-top: 0;
+    }
+
+    .empty-section {
+        color: #484f58;
+        font-size: 0.7rem;
+        padding: 0.5rem 0.25rem;
+        font-style: italic;
+    }
+
+    .game-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding: 0.4rem 0.25rem;
+        border-radius: 4px;
+        transition: background 0.15s ease;
+    }
+
+    .game-item:hover {
+        background: rgba(245, 158, 11, 0.05);
+    }
+
+    .game-info {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        flex: 1;
+        min-width: 0;
+        font-size: 0.7rem;
+    }
+
+    .player-name {
+        color: #c9d1d9;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 80px;
+    }
+
+    .vs {
+        color: #6e7681;
+        font-size: 0.6rem;
+    }
+
+    .waiting-text {
+        color: #f59e0b;
+        font-size: 0.6rem;
+        opacity: 0.8;
+    }
+
+    .own-badge {
+        color: #22c55e;
+        font-size: 0.6rem;
+        font-weight: 600;
+    }
+
+    .game-item.own-match {
+        background: rgba(34, 197, 94, 0.05);
+        border-left: 2px solid #22c55e;
+        padding-left: calc(0.25rem - 2px);
+    }
+
+    .game-time {
+        color: #484f58;
+        font-size: 0.6rem;
+    }
+
+    .spectators {
+        color: #6e7681;
+        font-size: 0.6rem;
+        padding: 0.1rem 0.3rem;
+        background: rgba(110, 118, 129, 0.15);
+        border-radius: 3px;
+    }
+
+    .spectators::before {
+        content: '\1F441 ';
+    }
+
+    .action-btn {
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.6rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .action-btn.join {
+        background: rgba(245, 158, 11, 0.15);
+        border: 1px solid rgba(245, 158, 11, 0.3);
+        color: #f59e0b;
+    }
+
+    .action-btn.join:hover {
+        background: rgba(245, 158, 11, 0.25);
+        border-color: #f59e0b;
+    }
+
+    .action-btn.view {
+        background: rgba(34, 197, 94, 0.15);
+        border: 1px solid rgba(34, 197, 94, 0.3);
+        color: #22c55e;
+    }
+
+    .action-btn.view:hover {
+        background: rgba(34, 197, 94, 0.25);
+        border-color: #22c55e;
+    }
+
+    .action-btn.cancel {
+        background: rgba(248, 81, 73, 0.15);
+        border: 1px solid rgba(248, 81, 73, 0.3);
+        color: #f85149;
+    }
+
+    .action-btn.cancel:hover {
+        background: rgba(248, 81, 73, 0.25);
+        border-color: #f85149;
+    }
+
+    .action-btn.popout {
+        background: rgba(110, 118, 129, 0.15);
+        border: 1px solid rgba(110, 118, 129, 0.3);
+        color: #f59e0b;
+        padding: 0.25rem 0.35rem;
+    }
+
+    .action-btn.popout:hover {
+        background: rgba(245, 158, 11, 0.15);
+        border-color: #f59e0b;
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/StreamsBrowser.svelte b/frontend/src/lib/components/terminal/StreamsBrowser.svelte
new file mode 100644
index 0000000..0890245
--- /dev/null
+++ b/frontend/src/lib/components/terminal/StreamsBrowser.svelte
@@ -0,0 +1,448 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { page } from '$app/stores';
+    import { streamTiles } from '$lib/stores/streamTiles';
+
+    /** @type {boolean} Whether the streams tab is currently active */
+    export let isActive = false;
+
+    let allRealms = [];
+    let loading = true;
+    let hoveredStream = null;
+    let refreshInterval = null;
+
+    $: liveRealms = allRealms.filter(r => r.isLive);
+    $: offlineRealms = allRealms.filter(r => !r.isLive);
+
+    // Get the current realm from URL if on a live page (e.g., /realmname/live)
+    $: currentLiveRealm = (() => {
+        const path = $page.url.pathname;
+        const match = path.match(/^\/([^/]+)\/live$/);
+        return match ? match[1] : null;
+    })();
+
+    // Reactive set of stream keys currently in tiles (for proper reactivity)
+    // Use streamKey if available, otherwise fall back to realm id
+    $: tiledStreamKeys = new Set($streamTiles.streams.map(s => s.streamKey || `realm-${s.realmId}`));
+
+    // Get a consistent identifier for a stream
+    function getStreamId(stream) {
+        return stream.streamKey || `realm-${stream.id}`;
+    }
+
+    async function loadAllRealms() {
+        if (!browser) return;
+        try {
+            const res = await fetch('/api/realms/all');
+            if (res.ok) {
+                const data = await res.json();
+                allRealms = data.realms || [];
+            }
+        } catch (e) {
+            console.error('Failed to load realms:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function startRefresh() {
+        // Clear any existing interval first to prevent stacking
+        stopRefresh();
+        loadAllRealms();
+        refreshInterval = setInterval(loadAllRealms, 10000);
+    }
+
+    function stopRefresh() {
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+            refreshInterval = null;
+        }
+    }
+
+    // Start/stop refresh based on active state
+    $: if (browser && isActive) {
+        startRefresh();
+    } else {
+        stopRefresh();
+    }
+
+    function addToTile(stream) {
+        streamTiles.addStream({
+            streamKey: getStreamId(stream),
+            name: stream.name,
+            username: stream.username,
+            realmId: stream.id,
+            offlineImageUrl: stream.offlineImageUrl || null
+        });
+    }
+
+    function removeFromTile(streamKey) {
+        streamTiles.removeStream(streamKey);
+    }
+
+    function toggleTile(stream, isTiled, isViewing) {
+        if (isViewing) return;
+        if (isTiled) {
+            removeFromTile(getStreamId(stream));
+        } else {
+            addToTile(stream);
+        }
+    }
+
+    onDestroy(() => {
+        stopRefresh();
+    });
+</script>
+
+<div class="streams-tab">
+    <div class="streams-header">
+        <span class="streams-title">Realms</span>
+        {#if $streamTiles.streams.length > 0}
+            <button class="tile-toggle" on:click={() => streamTiles.toggle()}>
+                {$streamTiles.enabled ? 'Hide Tiles' : 'Show Tiles'} ({$streamTiles.streams.length})
+            </button>
+        {/if}
+    </div>
+    <div class="streams-list">
+        {#if loading}
+            <div class="streams-loading">Loading realms...</div>
+        {:else if allRealms.length === 0}
+            <div class="streams-empty">No realms found</div>
+        {:else}
+            {#if liveRealms.length > 0}
+                <div class="streams-section-header">Live ({liveRealms.length})</div>
+                {#each liveRealms as stream (stream.id)}
+                    {@const isViewing = currentLiveRealm && stream.name.toLowerCase() === currentLiveRealm.toLowerCase()}
+                    {@const isTiled = tiledStreamKeys.has(getStreamId(stream))}
+                    <div
+                        class="stream-item"
+                        on:mouseenter={() => hoveredStream = stream.streamKey}
+                        on:mouseleave={() => hoveredStream = null}
+                    >
+                        <a href={`/${stream.name}/live`} class="stream-link" target="_blank">
+                            <div class="stream-preview">
+                                {#if hoveredStream === stream.streamKey && stream.streamKey}
+                                    <img src={`/thumb/${stream.streamKey}.webp`} alt={stream.name} />
+                                {:else}
+                                    <div class="preview-placeholder live">{stream.name.charAt(0).toUpperCase()}</div>
+                                {/if}
+                            </div>
+                            <div class="stream-info">
+                                <span class="stream-name">{stream.name}</span>
+                                <span class="stream-meta">
+                                    <span class="viewer-count">{stream.viewerCount || 0}</span>
+                                    <span class="stream-user">@{stream.username}</span>
+                                </span>
+                            </div>
+                        </a>
+                        <button
+                            class="tile-btn"
+                            class:remove={isTiled && !isViewing}
+                            class:viewing={isViewing}
+                            on:click|stopPropagation={() => toggleTile(stream, isTiled, isViewing)}
+                            title={isViewing ? 'Currently viewing' : isTiled ? 'Remove from tiles' : 'Add to tiles'}
+                            disabled={isViewing}
+                        >{isViewing ? '*' : isTiled ? '−' : '+'}</button>
+                    </div>
+                {/each}
+            {/if}
+            {#if offlineRealms.length > 0}
+                <div class="streams-section-header">Offline ({offlineRealms.length})</div>
+                {#each offlineRealms as stream (stream.id)}
+                    {@const isViewing = currentLiveRealm && stream.name.toLowerCase() === currentLiveRealm.toLowerCase()}
+                    {@const isTiled = tiledStreamKeys.has(getStreamId(stream))}
+                    <div
+                        class="stream-item offline"
+                        on:mouseenter={() => hoveredStream = stream.streamKey}
+                        on:mouseleave={() => hoveredStream = null}
+                    >
+                        <a href={`/${stream.name}/live`} class="stream-link" target="_blank">
+                            <div class="stream-preview">
+                                {#if stream.offlineImageUrl}
+                                    <img src={stream.offlineImageUrl} alt={stream.name} />
+                                {:else}
+                                    <div class="preview-placeholder offline">{stream.name.charAt(0).toUpperCase()}</div>
+                                {/if}
+                            </div>
+                            <div class="stream-info">
+                                <span class="stream-name">{stream.name}</span>
+                                <span class="stream-meta">
+                                    <span class="offline-badge">Offline</span>
+                                    <span class="stream-user">@{stream.username}</span>
+                                </span>
+                            </div>
+                        </a>
+                        <button
+                            class="tile-btn"
+                            class:remove={isTiled && !isViewing}
+                            class:viewing={isViewing}
+                            on:click|stopPropagation={() => toggleTile(stream, isTiled, isViewing)}
+                            title={isViewing ? 'Currently viewing' : isTiled ? 'Remove from tiles' : 'Add to tiles'}
+                            disabled={isViewing}
+                        >{isViewing ? '*' : isTiled ? '−' : '+'}</button>
+                    </div>
+                {/each}
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .streams-tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #0d1117;
+    }
+
+    .streams-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .streams-title {
+        color: #8b949e;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .tile-toggle {
+        padding: 0.25rem 0.5rem;
+        background: rgba(126, 231, 135, 0.15);
+        border: 1px solid rgba(126, 231, 135, 0.3);
+        border-radius: 4px;
+        color: #7ee787;
+        font-size: 0.7rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .tile-toggle:hover {
+        background: rgba(126, 231, 135, 0.25);
+    }
+
+    .streams-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+    }
+
+    .streams-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .streams-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .streams-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+        border-radius: 3px;
+    }
+
+    .streams-loading,
+    .streams-empty {
+        color: #8b949e;
+        font-size: 0.8rem;
+        text-align: center;
+        padding: 2rem 1rem;
+    }
+
+    .streams-section-header {
+        font-size: 0.7rem;
+        color: #8b949e;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 0.5rem 0.5rem 0.25rem;
+        border-bottom: 1px solid #30363d;
+        margin-top: 0.5rem;
+    }
+
+    .streams-section-header:first-child {
+        margin-top: 0;
+    }
+
+    .stream-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.4rem;
+        border-radius: 4px;
+        transition: background 0.15s ease;
+    }
+
+    .stream-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .stream-item.offline {
+        opacity: 0.7;
+    }
+
+    .stream-item.offline:hover {
+        opacity: 1;
+    }
+
+    .stream-link {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex: 1;
+        text-decoration: none;
+        color: inherit;
+        min-width: 0;
+    }
+
+    .stream-preview {
+        width: 48px;
+        height: 27px;
+        border-radius: 3px;
+        overflow: hidden;
+        background: #1a1a1a;
+        flex-shrink: 0;
+    }
+
+    .stream-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .preview-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #561d5e, #8b3a92);
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .preview-placeholder.live {
+        background: linear-gradient(135deg, #238636, #2ea043);
+    }
+
+    .preview-placeholder.offline {
+        background: linear-gradient(135deg, #30363d, #484f58);
+    }
+
+    .stream-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+    }
+
+    .stream-name {
+        color: #c9d1d9;
+        font-size: 0.8rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .stream-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.7rem;
+        color: #8b949e;
+    }
+
+    .viewer-count {
+        color: #f85149;
+        font-weight: 500;
+    }
+
+    .viewer-count::before {
+        content: '●';
+        margin-right: 0.2rem;
+        font-size: 0.5rem;
+        vertical-align: middle;
+    }
+
+    .stream-user {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .stream-user:hover {
+        filter: invert(1);
+    }
+
+    .offline-badge {
+        color: #8b949e;
+        font-size: 0.65rem;
+        background: rgba(139, 148, 158, 0.2);
+        padding: 0.1rem 0.3rem;
+        border-radius: 3px;
+    }
+
+    .tile-btn {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        border: 1px solid #30363d;
+        background: rgba(255, 255, 255, 0.05);
+        color: #8b949e;
+        font-size: 0.9rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+    }
+
+    .tile-btn:hover {
+        background: rgba(126, 231, 135, 0.15);
+        border-color: rgba(126, 231, 135, 0.3);
+        color: #7ee787;
+    }
+
+    .tile-btn.active {
+        background: rgba(126, 231, 135, 0.2);
+        border-color: #7ee787;
+        color: #7ee787;
+    }
+
+    .tile-btn.remove {
+        background: rgba(248, 81, 73, 0.15);
+        border-color: rgba(248, 81, 73, 0.3);
+        color: #f85149;
+    }
+
+    .tile-btn.remove:hover {
+        background: rgba(248, 81, 73, 0.25);
+        border-color: #f85149;
+        color: #f85149;
+    }
+
+    .tile-btn.viewing,
+    .tile-btn:disabled {
+        background: rgba(139, 92, 246, 0.2);
+        border-color: rgba(139, 92, 246, 0.4);
+        color: #a78bfa;
+        cursor: default;
+    }
+
+    .tile-btn:disabled:hover {
+        background: rgba(139, 92, 246, 0.2);
+        border-color: rgba(139, 92, 246, 0.4);
+        color: #a78bfa;
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/TerminalCore.svelte b/frontend/src/lib/components/terminal/TerminalCore.svelte
new file mode 100644
index 0000000..8921834
--- /dev/null
+++ b/frontend/src/lib/components/terminal/TerminalCore.svelte
@@ -0,0 +1,383 @@
+<script>
+    import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte';
+    import { browser } from '$app/environment';
+    import { filteredMessages, connectionStatus, chatUserInfo, fetchRealmStats, availableRealms } from '$lib/chat/chatStore';
+    import { chatWebSocket } from '$lib/chat/chatWebSocket';
+    import { auth, userColor } from '$lib/stores/auth';
+    import ChatMessage from '$lib/components/chat/ChatMessage.svelte';
+    import { parseCommand, executeCommand } from './terminalCommands.js';
+
+    const dispatch = createEventDispatcher();
+
+    /** @type {string|number|null} Currently connected realm ID */
+    export let realmId = null;
+
+    /** @type {boolean} Whether to render sticker images in messages */
+    export let renderStickers = false;
+
+    /** @type {boolean} Show hotkey help in /help command */
+    export let showHotkeyHelp = false;
+
+    /** @type {string} Terminal hotkey to display in help */
+    export let terminalHotkey = '`';
+
+    /** @type {boolean} Whether the terminal tab is active (for auto-scroll) */
+    export let isActive = true;
+
+    let terminalInput = '';
+    let inputElement;
+    let autoScrollEnabled = true;
+    let commandHistory = [];
+    let historyIndex = -1;
+    let systemMessages = [];
+    let scrollTimeout = null;
+    let focusTimeout = null;
+
+    $: isConnected = $connectionStatus === 'connected';
+    $: username = $auth.user?.username || $chatUserInfo.username || 'guest';
+
+    // Exposed methods
+    export function addSystemMessage(text) {
+        systemMessages = [...systemMessages, {
+            id: Date.now() + Math.random(),
+            text,
+            timestamp: new Date().toLocaleTimeString()
+        }];
+        tick().then(scrollToBottom);
+    }
+
+    export function scrollToBottom() {
+        if (!browser || !autoScrollEnabled || !isActive) return;
+
+        // Clear any pending scroll to avoid stacking
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+
+        scrollTimeout = setTimeout(() => {
+            const container = document.querySelector('.terminal-messages');
+            if (container) {
+                container.scrollTop = container.scrollHeight;
+            }
+            scrollTimeout = null;
+        }, 10);
+    }
+
+    export function focusInput() {
+        if (inputElement) {
+            // Clear any pending focus to avoid stacking
+            if (focusTimeout) clearTimeout(focusTimeout);
+            focusTimeout = setTimeout(() => {
+                inputElement?.focus();
+                focusTimeout = null;
+            }, 100);
+        }
+    }
+
+    export function clearMessages() {
+        systemMessages = [];
+    }
+
+    function handleScroll(event) {
+        const container = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        autoScrollEnabled = scrollTop + clientHeight >= scrollHeight - 50;
+    }
+
+    function handleInputKeyDown(event) {
+        // Arrow up for history
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
+                historyIndex++;
+                terminalInput = commandHistory[commandHistory.length - 1 - historyIndex];
+            }
+        }
+        // Arrow down for history
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (historyIndex > 0) {
+                historyIndex--;
+                terminalInput = commandHistory[commandHistory.length - 1 - historyIndex];
+            } else if (historyIndex === 0) {
+                historyIndex = -1;
+                terminalInput = '';
+            }
+        }
+    }
+
+    async function handleCommand(event) {
+        event.preventDefault();
+        const input = terminalInput.trim();
+
+        if (!input) return;
+
+        // Add to history
+        commandHistory.push(input);
+        historyIndex = -1;
+
+        // Parse commands
+        if (input.startsWith('/')) {
+            const parsed = parseCommand(input);
+            if (parsed) {
+                await executeCommand(parsed.command, parsed.args, {
+                    addSystemMessage,
+                    chatWebSocket,
+                    authUser: $auth.user,
+                    userColor: $userColor,
+                    realmId,
+                    isConnected,
+                    clearMessages,
+                    toggleStickers: () => {
+                        renderStickers = !renderStickers;
+                        dispatch('stickersToggled', { renderStickers });
+                    },
+                    renderStickers,
+                    setRealmId: (id) => {
+                        realmId = id;
+                        dispatch('realmChange', { realmId: id });
+                    },
+                    showHotkeyHelp,
+                    terminalHotkey
+                });
+            }
+        } else {
+            // Send as chat message
+            if (realmId && isConnected) {
+                chatWebSocket.sendMessage(input, $userColor);
+            } else {
+                addSystemMessage('Not connected to any realm. Use /join <realm> to connect.');
+            }
+        }
+
+        terminalInput = '';
+    }
+
+    function handleShowProfile(event) {
+        dispatch('showProfile', event.detail);
+    }
+
+    // Auto-scroll when messages change
+    $: if (browser) {
+        systemMessages.length;
+        $filteredMessages.length;
+        if (isActive) {
+            scrollToBottom();
+        }
+    }
+
+    // Scroll to bottom when terminal becomes active (opened)
+    $: if (browser && isActive) {
+        tick().then(scrollToBottom);
+    }
+
+    // Cleanup timeouts on destroy to prevent memory leaks
+    onDestroy(() => {
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        if (focusTimeout) clearTimeout(focusTimeout);
+    });
+
+    // Auto-connect to global chat on mount (like chat panel)
+    onMount(async () => {
+        const token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+
+        // If already connected, just use that connection
+        if (isConnected) {
+            // Already connected (e.g., from chat panel on stream page)
+        } else if (realmId) {
+            // Connect to the provided realm
+            chatWebSocket.connect(realmId, token);
+        } else {
+            // Auto-connect to global chat: fetch realms and connect to one
+            try {
+                const stats = await fetchRealmStats();
+                if (stats && stats.length > 0) {
+                    // Connect to the realm with most participants, or first available
+                    const sortedRealms = [...stats].sort((a, b) => b.participantCount - a.participantCount);
+                    const defaultRealm = sortedRealms[0];
+                    realmId = String(defaultRealm.realmId);
+                    chatWebSocket.connect(realmId, token);
+                    dispatch('realmChange', { realmId });
+                }
+            } catch (e) {
+                console.error('Failed to auto-connect terminal:', e);
+            }
+        }
+
+        // Scroll to bottom when component mounts (terminal opens)
+        tick().then(scrollToBottom);
+    });
+</script>
+
+<div class="terminal-messages" on:scroll={handleScroll}>
+    {#each systemMessages as sysMsg (sysMsg.id)}
+        <div class="system-message">
+            <span class="system-prefix">[{sysMsg.timestamp}]</span>
+            <span class="system-text">{sysMsg.text}</span>
+        </div>
+    {/each}
+
+    {#each $filteredMessages as message (message.messageId)}
+        <ChatMessage
+            {message}
+            showHeader={true}
+            currentUserId={$chatUserInfo.userId}
+            currentRealmId={realmId}
+            isModerator={$chatUserInfo.isModerator}
+            terminalMode={true}
+            {renderStickers}
+            on:delete={() => chatWebSocket.deleteMessage(message.messageId)}
+            on:showProfile={handleShowProfile}
+        />
+    {/each}
+
+    <!-- Inline command input at end of messages -->
+    <form class="terminal-input-line" on:submit={handleCommand}>
+        <span class="prompt">{username}@realms:~$</span>
+        <input
+            type="text"
+            class="terminal-input"
+            bind:this={inputElement}
+            bind:value={terminalInput}
+            on:keydown={handleInputKeyDown}
+            placeholder="/help"
+        />
+    </form>
+</div>
+
+<style>
+    .terminal-messages {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+        color: #c9d1d9;
+        background: transparent;
+        scrollbar-width: thin;
+        scrollbar-color: #30363d transparent;
+    }
+
+    .terminal-messages::-webkit-scrollbar {
+        width: 1px;
+    }
+
+    .terminal-messages::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .terminal-messages::-webkit-scrollbar-thumb {
+        background: #30363d;
+    }
+
+    /* Inline command input - appears at end of messages */
+    .terminal-input-line {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+        padding: 0.125rem 0;
+        margin-top: 0.25rem;
+    }
+
+    .prompt {
+        color: #7ee787;
+        font-weight: 600;
+        white-space: nowrap;
+        font-size: 0.8rem;
+    }
+
+    .terminal-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        color: #c9d1d9;
+        font-family: inherit;
+        font-size: 0.8rem;
+        outline: none;
+        caret-color: #7ee787;
+    }
+
+    .terminal-input::placeholder {
+        color: #484f58;
+    }
+
+    .terminal-input:disabled {
+        opacity: 0.5;
+    }
+
+    .system-message {
+        padding: 0.125rem 0;
+        color: #8b949e;
+        font-size: 0.8rem;
+        line-height: 1.3;
+        border-left: none;
+        padding-left: 0;
+        margin: 0;
+    }
+
+    .system-prefix {
+        color: #6e7681;
+        font-size: 0.75rem;
+        margin-right: 0.5rem;
+    }
+
+    .system-text {
+        color: #c9d1d9;
+    }
+
+    /* Terminal-style compact messages - override ChatMessage styles */
+    .terminal-messages :global(.chat-message) {
+        padding: 0.125rem 0;
+        margin: 0;
+        background: transparent;
+        border-radius: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+    }
+
+    .terminal-messages :global(.chat-message:hover) {
+        background: transparent;
+    }
+
+    .terminal-messages :global(.chat-message .message-header) {
+        margin-bottom: 0;
+        gap: 0.35rem;
+        font-size: 0.8rem;
+        flex-shrink: 0;
+    }
+
+    .terminal-messages :global(.chat-message .message-content) {
+        font-size: 0.8rem;
+        line-height: 1.3;
+        margin-left: 0;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .terminal-messages :global(.chat-message .message-content p) {
+        margin: 0;
+    }
+
+    .terminal-messages :global(.chat-message .user-avatar),
+    .terminal-messages :global(.chat-message .user-avatar-placeholder) {
+        width: 16px;
+        height: 16px;
+        font-size: 0.5rem;
+    }
+
+    .terminal-messages :global(.chat-message .timestamp) {
+        font-size: 0.7rem;
+    }
+
+    .terminal-messages :global(.chat-message .badge) {
+        font-size: 0.55rem;
+        padding: 0.05rem 0.25rem;
+    }
+
+    /* Terminal mode: scale graffiti down to match text height like stickers */
+    .terminal-messages :global(.graffiti-img) {
+        width: auto !important;
+        height: 16px !important;
+        max-width: 100px !important;
+        max-height: 16px !important;
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/TerminalTabBar.svelte b/frontend/src/lib/components/terminal/TerminalTabBar.svelte
new file mode 100644
index 0000000..d8f1549
--- /dev/null
+++ b/frontend/src/lib/components/terminal/TerminalTabBar.svelte
@@ -0,0 +1,172 @@
+<script>
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+    /**
+     * @typedef {Object} Tab
+     * @property {string} id - Unique tab identifier
+     * @property {string} label - Tab display label
+     * @property {string} [color] - Optional accent color for active state
+     */
+
+    /** @type {Tab[]} */
+    export let tabs = [];
+
+    /** @type {string} */
+    export let activeTab = '';
+
+    const dispatch = createEventDispatcher();
+
+    let tabsContainer;
+    let showLeftArrow = false;
+    let showRightArrow = false;
+    let resizeDebounceTimeout = null;
+
+    function handleTabClick(tabId) {
+        if (tabId !== activeTab) {
+            dispatch('tabChange', { tab: tabId });
+        }
+    }
+
+    function checkScrollArrows() {
+        if (!tabsContainer) return;
+        const { scrollLeft, scrollWidth, clientWidth } = tabsContainer;
+        showLeftArrow = scrollLeft > 0;
+        showRightArrow = scrollLeft + clientWidth < scrollWidth - 1;
+    }
+
+    function scrollLeft() {
+        if (!tabsContainer) return;
+        tabsContainer.scrollBy({ left: -100, behavior: 'smooth' });
+    }
+
+    function scrollRight() {
+        if (!tabsContainer) return;
+        tabsContainer.scrollBy({ left: 100, behavior: 'smooth' });
+    }
+
+    function debouncedCheckScrollArrows() {
+        if (resizeDebounceTimeout) clearTimeout(resizeDebounceTimeout);
+        resizeDebounceTimeout = setTimeout(() => {
+            checkScrollArrows();
+            resizeDebounceTimeout = null;
+        }, 100);
+    }
+
+    onMount(() => {
+        checkScrollArrows();
+        // Use ResizeObserver to detect container size changes with debounce
+        const resizeObserver = new ResizeObserver(debouncedCheckScrollArrows);
+        resizeObserver.observe(tabsContainer);
+        return () => resizeObserver.disconnect();
+    });
+
+    onDestroy(() => {
+        if (resizeDebounceTimeout) clearTimeout(resizeDebounceTimeout);
+    });
+</script>
+
+<div class="tab-bar-wrapper">
+    <div
+        class="tab-bar"
+        bind:this={tabsContainer}
+        on:scroll={checkScrollArrows}
+    >
+        {#each tabs as tab (tab.id)}
+            <button
+                class="tab-button"
+                class:active={activeTab === tab.id}
+                style={tab.color && activeTab === tab.id ? `--tab-color: ${tab.color}` : ''}
+                on:click={() => handleTabClick(tab.id)}
+            >
+                {tab.label}
+            </button>
+        {/each}
+    </div>
+    {#if showLeftArrow || showRightArrow}
+        <button class="scroll-arrow" on:click={showRightArrow ? scrollRight : scrollLeft} title="Scroll tabs">
+            &lt;&gt;
+        </button>
+    {/if}
+</div>
+
+<style>
+    .tab-bar-wrapper {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        flex: 1;
+        gap: 0.375rem;
+    }
+
+    .tab-bar {
+        display: flex;
+        gap: 0.375rem;
+        overflow-x: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        min-width: 0;
+        flex: 1;
+    }
+
+    .tab-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scroll-arrow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        min-width: 26px;
+        padding: 0 0.375rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s;
+        flex-shrink: 0;
+    }
+
+    .scroll-arrow:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .tab-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        padding: 0 0.5rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    .tab-button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .tab-button.active {
+        color: var(--tab-color, #4caf50);
+        background: rgba(76, 175, 80, 0.15);
+        border-color: rgba(76, 175, 80, 0.4);
+    }
+
+    /* Support custom tab colors */
+    .tab-button.active[style*="--tab-color"] {
+        background: color-mix(in srgb, var(--tab-color) 15%, transparent);
+        border-color: color-mix(in srgb, var(--tab-color) 40%, transparent);
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/TreasuryBrowser.svelte b/frontend/src/lib/components/terminal/TreasuryBrowser.svelte
new file mode 100644
index 0000000..c28a8d4
--- /dev/null
+++ b/frontend/src/lib/components/terminal/TreasuryBrowser.svelte
@@ -0,0 +1,350 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { treasury, fetchTreasury, formatUbercoin, getTimeUntilDistribution } from '$lib/stores/ubercoin';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+
+    export let isActive = false;
+
+    let countdownInterval;
+    let countdown = null;
+
+    $: if (isActive) {
+        loadTreasury();
+    }
+
+    async function loadTreasury() {
+        await fetchTreasury();
+        updateCountdown();
+    }
+
+    function updateCountdown() {
+        countdown = getTimeUntilDistribution($treasury.nextDistribution);
+    }
+
+    onMount(() => {
+        if (isActive) {
+            loadTreasury();
+        }
+        // Update countdown every minute
+        countdownInterval = setInterval(() => {
+            updateCountdown();
+        }, 60000);
+    });
+
+    onDestroy(() => {
+        if (countdownInterval) {
+            clearInterval(countdownInterval);
+        }
+    });
+
+    function formatCountdown(cd) {
+        if (!cd) return 'Calculating...';
+        const parts = [];
+        if (cd.days > 0) parts.push(`${cd.days}d`);
+        if (cd.hours > 0) parts.push(`${cd.hours}h`);
+        parts.push(`${cd.minutes}m`);
+        return parts.join(' ');
+    }
+
+    // Calculate user's estimated share after their personal burn
+    function calculatePersonalShare(share, userCreatedAt) {
+        if (!share || !userCreatedAt) return share;
+        // This is just an estimate - actual calculation happens on server
+        return share;
+    }
+</script>
+
+<style>
+    .treasury-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 1rem;
+        overflow-y: auto;
+        background: #0d1117;
+        color: #c9d1d9;
+    }
+
+    .treasury-header {
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .treasury-title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #ffd700;
+        margin-bottom: 0.5rem;
+    }
+
+    .coin-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 1rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .treasury-subtitle {
+        color: #8b949e;
+        font-size: 0.85rem;
+    }
+
+    .stat-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .stat-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        padding: 1rem;
+    }
+
+    .stat-card.highlight {
+        background: rgba(255, 215, 0, 0.05);
+        border-color: rgba(255, 215, 0, 0.3);
+    }
+
+    .stat-card.full-width {
+        grid-column: span 2;
+    }
+
+    .stat-label {
+        font-size: 0.75rem;
+        color: #8b949e;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.5rem;
+    }
+
+    .stat-value {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #ffd700;
+        font-family: 'Consolas', 'Monaco', monospace;
+    }
+
+    .stat-value.destroyed {
+        color: #f85149;
+    }
+
+    .stat-value.users {
+        color: #7ee787;
+    }
+
+    .stat-value.countdown {
+        color: #58a6ff;
+        font-size: 1.25rem;
+    }
+
+    .stat-suffix {
+        font-size: 0.9rem;
+        color: #8b949e;
+        margin-left: 0.25rem;
+    }
+
+    .countdown-section {
+        text-align: center;
+        padding: 1.25rem;
+        background: rgba(88, 166, 255, 0.08);
+        border: 1px solid rgba(88, 166, 255, 0.3);
+        border-radius: 8px;
+        margin-bottom: 1.5rem;
+    }
+
+    .countdown-label {
+        font-size: 0.85rem;
+        color: #8b949e;
+        margin-bottom: 0.5rem;
+    }
+
+    .countdown-value {
+        font-size: 1.75rem;
+        font-weight: 600;
+        color: #58a6ff;
+        font-family: 'Consolas', 'Monaco', monospace;
+    }
+
+    .info-section {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        padding: 1rem;
+    }
+
+    .info-title {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: #c9d1d9;
+        margin-bottom: 0.75rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .info-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 0.85rem;
+        color: #8b949e;
+    }
+
+    .info-list li {
+        padding: 0.4rem 0;
+        padding-left: 1.25rem;
+        position: relative;
+    }
+
+    .info-list li::before {
+        content: '>';
+        position: absolute;
+        left: 0;
+        color: #7ee787;
+    }
+
+    .your-share {
+        margin-top: 1.5rem;
+        padding: 1rem;
+        background: rgba(126, 231, 135, 0.08);
+        border: 1px solid rgba(126, 231, 135, 0.3);
+        border-radius: 8px;
+        text-align: center;
+    }
+
+    .your-share-label {
+        font-size: 0.8rem;
+        color: #8b949e;
+        margin-bottom: 0.5rem;
+    }
+
+    .your-share-value {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #7ee787;
+        font-family: 'Consolas', 'Monaco', monospace;
+    }
+
+    .your-share-note {
+        font-size: 0.75rem;
+        color: #8b949e;
+        margin-top: 0.5rem;
+    }
+
+    .refresh-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-top: 1rem;
+        padding: 0.5rem 1rem;
+        background: transparent;
+        border: 1px solid #30363d;
+        border-radius: 4px;
+        color: #8b949e;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: all 0.15s;
+        width: 100%;
+    }
+
+    .refresh-button:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #c9d1d9;
+        border-color: #8b949e;
+    }
+
+    /* Minimal 1px grey scrollbar */
+    .treasury-container::-webkit-scrollbar {
+        width: 1px;
+    }
+
+    .treasury-container::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .treasury-container::-webkit-scrollbar-thumb {
+        background: #30363d;
+    }
+
+    .treasury-container {
+        scrollbar-width: thin;
+        scrollbar-color: #30363d transparent;
+    }
+</style>
+
+<div class="treasury-container">
+    <div class="treasury-header">
+        <div class="treasury-title">
+            <span class="coin-icon">Ü</span>
+            übercoin Treasury
+        </div>
+        <div class="treasury-subtitle">Burned coins redistribute every Sunday</div>
+    </div>
+
+    <div class="countdown-section">
+        <div class="countdown-label">Next Distribution In</div>
+        <div class="countdown-value">{formatCountdown(countdown)}</div>
+    </div>
+
+    <div class="stat-grid">
+        <div class="stat-card highlight">
+            <div class="stat-label">Treasury Balance</div>
+            <div class="stat-value">{formatUbercoin($treasury.balance)}<span class="stat-suffix">UC</span></div>
+        </div>
+
+        <div class="stat-card">
+            <div class="stat-label">Total Destroyed</div>
+            <div class="stat-value destroyed">{formatUbercoin($treasury.totalDestroyed)}<span class="stat-suffix">UC</span></div>
+        </div>
+
+        <div class="stat-card">
+            <div class="stat-label">Total Users</div>
+            <div class="stat-value users">{$treasury.totalUsers}</div>
+        </div>
+
+        <div class="stat-card">
+            <div class="stat-label">Est. Share Per User</div>
+            <div class="stat-value">{formatUbercoin($treasury.estimatedShare)}<span class="stat-suffix">UC</span></div>
+        </div>
+    </div>
+
+    {#if $isAuthenticated}
+        <div class="your-share">
+            <div class="your-share-label">Your Estimated Share</div>
+            <div class="your-share-value">~{formatUbercoin($treasury.estimatedShare)} UC</div>
+            <div class="your-share-note">* Subject to your personal burn rate</div>
+        </div>
+    {/if}
+
+    <div class="info-section">
+        <div class="info-title">
+            <span>?</span> How It Works
+        </div>
+        <ul class="info-list">
+            <li>When users tip each other, a portion is burned (based on recipient's account age)</li>
+            <li>Burned coins go into the Treasury</li>
+            <li>Treasury grows 3.3% each day (Mon-Sat)</li>
+            <li>Every Sunday, the Treasury is distributed evenly to ALL users</li>
+            <li>Your share is taxed at your personal burn rate (destroyed forever)</li>
+            <li>Minimum burn rate is 1% (even for oldest accounts)</li>
+        </ul>
+    </div>
+
+    <button class="refresh-button" on:click={loadTreasury}>
+        Refresh Treasury Info
+    </button>
+</div>
diff --git a/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte b/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
new file mode 100644
index 0000000..660cc98
--- /dev/null
+++ b/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
@@ -0,0 +1,302 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+
+    /** @type {boolean} Whether the watch tab is currently active */
+    export let isActive = false;
+
+    let watchRooms = [];
+    let loading = true;
+    let refreshInterval = null;
+
+    $: onlineRooms = watchRooms.filter(r => r.currentVideoTitle);
+    $: offlineRooms = watchRooms.filter(r => !r.currentVideoTitle);
+
+    async function loadWatchRooms() {
+        if (!browser) return;
+        try {
+            const res = await fetch('/api/watch/rooms');
+            if (res.ok) {
+                const data = await res.json();
+                watchRooms = data.rooms || [];
+            }
+        } catch (e) {
+            console.error('Failed to load watch rooms:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function startRefresh() {
+        // Clear any existing interval first to prevent stacking
+        stopRefresh();
+        loadWatchRooms();
+        refreshInterval = setInterval(loadWatchRooms, 10000);
+    }
+
+    function stopRefresh() {
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+            refreshInterval = null;
+        }
+    }
+
+    // Start/stop refresh based on active state
+    $: if (browser && isActive) {
+        startRefresh();
+    } else {
+        stopRefresh();
+    }
+
+    onDestroy(() => {
+        stopRefresh();
+    });
+</script>
+
+<div class="watch-tab">
+    <div class="watch-header">
+        <span class="watch-title">Watch Rooms</span>
+    </div>
+    <div class="watch-list">
+        {#if loading}
+            <div class="watch-loading">Loading watch rooms...</div>
+        {:else if watchRooms.length === 0}
+            <div class="watch-empty">No watch rooms found</div>
+        {:else}
+            {#if onlineRooms.length > 0}
+                <div class="watch-section-header">Playing ({onlineRooms.length})</div>
+                {#each onlineRooms as room (room.id)}
+                    <a href={`/${room.name}/watch`} class="watch-item" target="_blank">
+                        <div class="watch-preview">
+                            {#if room.currentVideoThumbnail}
+                                <img src={room.currentVideoThumbnail} alt={room.name} />
+                            {:else}
+                                <div class="preview-placeholder online">{room.name.charAt(0).toUpperCase()}</div>
+                            {/if}
+                        </div>
+                        <div class="watch-info">
+                            <span class="watch-name">{room.name}</span>
+                            <span class="watch-video" title={room.currentVideoTitle}>
+                                {room.currentVideoTitle}
+                            </span>
+                            <span class="watch-meta">
+                                <span class="viewer-count">{room.viewerCount || 0}</span>
+                                <span class="watch-user" style="color: {room.colorCode}">@{room.username}</span>
+                            </span>
+                        </div>
+                    </a>
+                {/each}
+            {/if}
+            {#if offlineRooms.length > 0}
+                <div class="watch-section-header">Offline ({offlineRooms.length})</div>
+                {#each offlineRooms as room (room.id)}
+                    <a href={`/${room.name}/watch`} class="watch-item offline" target="_blank">
+                        <div class="watch-preview">
+                            {#if room.offlineImageUrl}
+                                <img src={room.offlineImageUrl} alt={room.name} />
+                            {:else}
+                                <div class="preview-placeholder offline">{room.name.charAt(0).toUpperCase()}</div>
+                            {/if}
+                        </div>
+                        <div class="watch-info">
+                            <span class="watch-name">{room.name}</span>
+                            <span class="watch-video empty">No video playing</span>
+                            <span class="watch-meta">
+                                <span class="offline-badge">Offline</span>
+                                <span class="watch-user" style="color: {room.colorCode}">@{room.username}</span>
+                            </span>
+                        </div>
+                    </a>
+                {/each}
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .watch-tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #0d1117;
+    }
+
+    .watch-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .watch-title {
+        color: #8b949e;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .watch-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+    }
+
+    .watch-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .watch-list::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    .watch-list::-webkit-scrollbar-thumb {
+        background: #30363d;
+        border-radius: 3px;
+    }
+
+    .watch-loading,
+    .watch-empty {
+        color: #8b949e;
+        font-size: 0.8rem;
+        text-align: center;
+        padding: 2rem 1rem;
+    }
+
+    .watch-section-header {
+        font-size: 0.7rem;
+        color: #8b949e;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 0.5rem 0.5rem 0.25rem;
+        border-bottom: 1px solid #30363d;
+        margin-top: 0.5rem;
+    }
+
+    .watch-section-header:first-child {
+        margin-top: 0;
+    }
+
+    .watch-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.4rem;
+        border-radius: 4px;
+        transition: background 0.15s ease;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .watch-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .watch-item.offline {
+        opacity: 0.7;
+    }
+
+    .watch-item.offline:hover {
+        opacity: 1;
+    }
+
+    .watch-preview {
+        width: 48px;
+        height: 27px;
+        border-radius: 3px;
+        overflow: hidden;
+        background: #1a1a1a;
+        flex-shrink: 0;
+    }
+
+    .watch-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .preview-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .preview-placeholder.online {
+        background: linear-gradient(135deg, #10b981, #059669);
+    }
+
+    .preview-placeholder.offline {
+        background: linear-gradient(135deg, #30363d, #484f58);
+    }
+
+    .watch-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+    }
+
+    .watch-name {
+        color: #c9d1d9;
+        font-size: 0.8rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-video {
+        color: #7ee787;
+        font-size: 0.7rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-video.empty {
+        color: #8b949e;
+        font-style: italic;
+    }
+
+    .watch-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.7rem;
+        color: #8b949e;
+    }
+
+    .viewer-count {
+        color: #f85149;
+        font-weight: 500;
+    }
+
+    .viewer-count::before {
+        content: '●';
+        margin-right: 0.2rem;
+        font-size: 0.5rem;
+        vertical-align: middle;
+    }
+
+    .watch-user {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .offline-badge {
+        color: #8b949e;
+        font-size: 0.65rem;
+        background: rgba(139, 148, 158, 0.2);
+        padding: 0.1rem 0.3rem;
+        border-radius: 3px;
+    }
+</style>
diff --git a/frontend/src/lib/components/terminal/terminalCommands.js b/frontend/src/lib/components/terminal/terminalCommands.js
new file mode 100644
index 0000000..45d4676
--- /dev/null
+++ b/frontend/src/lib/components/terminal/terminalCommands.js
@@ -0,0 +1,700 @@
+/**
+ * Terminal Commands Module
+ * Shared command handling for terminal and terminal popout
+ */
+
+import {
+    selectedRealms,
+    availableRealms,
+    joinRealmFilter,
+    leaveRealmFilter,
+    resetToGlobal,
+    fetchRealmStats,
+    chatUserInfo
+} from '$lib/chat/chatStore';
+import { get } from 'svelte/store';
+
+/**
+ * Available commands with their descriptions
+ */
+export const COMMANDS = {
+    help: {
+        aliases: ['help'],
+        description: 'Show available commands',
+        usage: '/help'
+    },
+    realms: {
+        aliases: ['realms', 'list'],
+        description: 'List all realms with filter status',
+        usage: '/realms'
+    },
+    join: {
+        aliases: ['join'],
+        description: 'Add realm to chat filter (check)',
+        usage: '/join <realm-name-or-id>'
+    },
+    leave: {
+        aliases: ['leave'],
+        description: 'Remove realm from chat filter (uncheck)',
+        usage: '/leave <realm-name-or-id>'
+    },
+    global: {
+        aliases: ['global'],
+        description: 'Show all realms (reset filter)',
+        usage: '/global'
+    },
+    disconnect: {
+        aliases: ['disconnect'],
+        description: 'Disconnect from WebSocket',
+        usage: '/disconnect'
+    },
+    stickers: {
+        aliases: ['stickers'],
+        description: 'Toggle sticker images in messages',
+        usage: '/stickers'
+    },
+    graffiti: {
+        aliases: ['graffiti'],
+        description: 'Post your graffiti to chat',
+        usage: '/graffiti'
+    },
+    cls: {
+        aliases: ['cls'],
+        description: 'Clear terminal messages',
+        usage: '/cls'
+    },
+    // Moderation commands
+    kick: {
+        aliases: ['kick'],
+        description: 'Kick user (disconnect + 1 min block)',
+        usage: '/kick <username> [reason]',
+        modOnly: true
+    },
+    ban: {
+        aliases: ['ban'],
+        description: 'Ban user from current realm',
+        usage: '/ban <username> [reason]',
+        modOnly: true
+    },
+    unban: {
+        aliases: ['unban'],
+        description: 'Unban user from current realm',
+        usage: '/unban <username>',
+        modOnly: true
+    },
+    mute: {
+        aliases: ['mute'],
+        description: 'Mute user (default 5 min)',
+        usage: '/mute <username> [duration-seconds] [reason]',
+        modOnly: true
+    },
+    timeout: {
+        aliases: ['timeout'],
+        description: 'Timeout user (default 1 min)',
+        usage: '/timeout <username> [duration-seconds] [reason]',
+        modOnly: true
+    },
+    uberban: {
+        aliases: ['uberban'],
+        description: 'Site-wide fingerprint ban (admin/site-mod only)',
+        usage: '/uberban <username> [reason]',
+        adminOnly: true
+    },
+    ununberban: {
+        aliases: ['ununberban'],
+        description: 'Remove site-wide ban (admin/site-mod only)',
+        usage: '/ununberban <fingerprint>',
+        adminOnly: true
+    }
+};
+
+/**
+ * Parse a command string into command name and arguments
+ * @param {string} input - Raw input string starting with /
+ * @returns {{ command: string, args: string[] } | null}
+ */
+export function parseCommand(input) {
+    if (!input || !input.startsWith('/')) {
+        return null;
+    }
+
+    const parts = input.slice(1).split(' ');
+    const command = parts[0].toLowerCase();
+    const args = parts.slice(1).filter(a => a.length > 0);
+
+    return { command, args };
+}
+
+/**
+ * Execute a terminal command
+ * @param {string} command - Command name
+ * @param {string[]} args - Command arguments
+ * @param {Object} context - Execution context
+ * @param {Function} context.addSystemMessage - Add a system message to terminal
+ * @param {Object} context.chatWebSocket - Chat websocket instance
+ * @param {Object|null} context.authUser - Current authenticated user or null
+ * @param {string} context.userColor - User's chosen color
+ * @param {string|number|null} context.realmId - Currently connected realm ID
+ * @param {boolean} context.isConnected - Whether connected to a realm
+ * @param {Function} context.clearMessages - Clear terminal messages
+ * @param {Function} context.toggleStickers - Toggle sticker rendering
+ * @param {boolean} context.renderStickers - Current sticker render state
+ * @param {Function} context.setRealmId - Set the current realm ID
+ * @param {boolean} context.showHotkeyHelp - Whether to show hotkey in help
+ * @param {string} context.terminalHotkey - Hotkey to show in help
+ * @returns {Promise<void>}
+ */
+export async function executeCommand(command, args, context) {
+    const {
+        addSystemMessage,
+        chatWebSocket,
+        authUser,
+        userColor,
+        realmId,
+        isConnected,
+        clearMessages,
+        toggleStickers,
+        renderStickers,
+        setRealmId,
+        showHotkeyHelp = false,
+        terminalHotkey = '`'
+    } = context;
+
+    switch (command) {
+        case 'help':
+            await showHelp(addSystemMessage, showHotkeyHelp, terminalHotkey);
+            break;
+
+        case 'realms':
+        case 'list':
+            await listRealms(addSystemMessage);
+            break;
+
+        case 'join':
+            if (args[0]) {
+                await joinRealmChat(args[0], addSystemMessage, chatWebSocket, setRealmId, authUser);
+            } else {
+                addSystemMessage('Usage: /join <realm-name-or-id>');
+            }
+            break;
+
+        case 'leave':
+            if (args[0]) {
+                await leaveRealmChat(args[0], addSystemMessage);
+            } else {
+                addSystemMessage('Usage: /leave <realm-name-or-id>');
+            }
+            break;
+
+        case 'global':
+            resetToGlobal();
+            if (realmId && isConnected) {
+                addSystemMessage('Showing messages from all realms (sending to current realm)');
+            } else {
+                addSystemMessage('Showing all realms (use /join <realm> to send messages)');
+            }
+            break;
+
+        case 'disconnect':
+            chatWebSocket.disconnect();
+            setRealmId(null);
+            addSystemMessage('Disconnected from chat');
+            break;
+
+        case 'stickers':
+            toggleStickers();
+            if (!renderStickers) {
+                addSystemMessage('Sticker images enabled in terminal');
+            } else {
+                addSystemMessage('Sticker images disabled (showing as text)');
+            }
+            break;
+
+        case 'graffiti':
+            if (!realmId || !isConnected) {
+                addSystemMessage('Not connected to any realm. Use /join <realm> to connect.');
+            } else if (authUser?.graffitiUrl) {
+                chatWebSocket.sendMessage(`[graffiti]${authUser.graffitiUrl}[/graffiti]`, userColor);
+            } else {
+                addSystemMessage('You don\'t have a graffiti yet. Create one in Settings > Appearance.');
+            }
+            break;
+
+        case 'cls':
+            clearMessages();
+            break;
+
+        // Moderation commands
+        case 'kick':
+            await handleKick(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'ban':
+            await handleBan(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'unban':
+            await handleUnban(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'mute':
+            await handleMute(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'timeout':
+            await handleTimeout(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'uberban':
+            await handleUberban(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        case 'ununberban':
+            await handleUnUberban(args, addSystemMessage, chatWebSocket, realmId, isConnected);
+            break;
+
+        default:
+            addSystemMessage(`Unknown command: ${command}. Type /help for available commands.`);
+    }
+}
+
+/**
+ * Show help text
+ */
+async function showHelp(addSystemMessage, showHotkeyHelp, terminalHotkey) {
+    addSystemMessage('=== Commands ===');
+    addSystemMessage('/realms, /list - List all realms with filter status');
+    addSystemMessage('/join <name> - Add realm to filter (show messages)');
+    addSystemMessage('/leave <name> - Remove realm from filter (hide messages)');
+    addSystemMessage('/global - Show all realms (reset filter)');
+    addSystemMessage('/disconnect - Disconnect from WebSocket');
+    addSystemMessage('/stickers - Toggle sticker images in messages');
+    addSystemMessage('/graffiti - Post your graffiti to chat');
+    addSystemMessage('/cls - Clear terminal');
+    addSystemMessage('/help - Show this help');
+
+    // Show moderation commands if user has permissions
+    const perms = getModPermissions();
+    if (perms.canMod) {
+        addSystemMessage('');
+        addSystemMessage('=== Moderation ===');
+        addSystemMessage('/kick <user> [reason] - Kick user (1 min rejoin block)');
+        addSystemMessage('/ban <user> [reason] - Ban from current realm');
+        addSystemMessage('/unban <user> - Unban from current realm');
+        addSystemMessage('/mute <user> [secs] [reason] - Mute user (default 5m)');
+        addSystemMessage('/timeout <user> [secs] [reason] - Timeout user (default 1m)');
+
+        if (perms.canUberban) {
+            addSystemMessage('/uberban <user> [reason] - Site-wide fingerprint ban');
+            addSystemMessage('/ununberban <fingerprint> - Remove site-wide ban');
+        }
+    }
+
+    if (showHotkeyHelp) {
+        addSystemMessage('');
+        addSystemMessage('=== Keys ===');
+        addSystemMessage(`${terminalHotkey} - Toggle terminal | Esc - Close`);
+        addSystemMessage('↑/↓ - Command history');
+    }
+}
+
+/**
+ * List all available realms with filter status
+ */
+async function listRealms(addSystemMessage) {
+    try {
+        // Fetch realm stats from chat service
+        await fetchRealmStats();
+        const realms = get(availableRealms);
+        const selected = get(selectedRealms);
+        const isGlobal = selected.size === 0;
+
+        addSystemMessage('=== Available Realms ===');
+        if (realms.length === 0) {
+            addSystemMessage('No active realms');
+        } else {
+            realms.forEach((realm) => {
+                const checked = isGlobal || selected.has(realm.realmId) ? '[✓]' : '[ ]';
+                const users = realm.participantCount || 0;
+                addSystemMessage(`${checked} ${realm.realmId} (${users} users)`);
+            });
+        }
+        addSystemMessage('');
+        if (isGlobal) {
+            addSystemMessage('Currently: Global (all realms)');
+        } else {
+            const names = Array.from(selected).join(', ');
+            addSystemMessage(`Filtered to: ${names}`);
+        }
+        addSystemMessage('========================');
+    } catch (error) {
+        console.error('Failed to list realms:', error);
+        addSystemMessage('Error fetching realms');
+    }
+}
+
+/**
+ * Join a realm chat (add to filter)
+ */
+async function joinRealmChat(nameOrId, addSystemMessage, chatWebSocket, setRealmId, authUser) {
+    try {
+        let targetRealmId = nameOrId;
+        let realmName = nameOrId;
+
+        // If it's not a number, search by name to get the ID
+        if (isNaN(nameOrId)) {
+            const response = await fetch(`/api/realms/by-name/${nameOrId}`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                targetRealmId = String(data.realm.id);
+                realmName = data.realm.name || nameOrId;
+            } else {
+                addSystemMessage(`Realm "${nameOrId}" not found`);
+                return;
+            }
+        }
+
+        // Add realm to filter
+        joinRealmFilter(targetRealmId);
+
+        // Get token for authenticated connection
+        const token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+
+        // Connect to the realm's WebSocket
+        await chatWebSocket.connect(targetRealmId, token);
+
+        // Set the realm ID so we can send messages to it
+        setRealmId(targetRealmId);
+
+        addSystemMessage(`Connected to ${realmName} - you can now send messages`);
+    } catch (error) {
+        console.error('Failed to join realm chat:', error);
+        addSystemMessage(`Error joining realm: ${nameOrId}`);
+    }
+}
+
+/**
+ * Leave a realm chat (remove from filter)
+ */
+async function leaveRealmChat(nameOrId, addSystemMessage) {
+    try {
+        let targetRealmId = nameOrId;
+
+        // If it's not a number, search by name to get the ID
+        if (isNaN(nameOrId)) {
+            const response = await fetch(`/api/realms/by-name/${nameOrId}`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                targetRealmId = String(data.realm.id);
+            } else {
+                addSystemMessage(`Realm "${nameOrId}" not found`);
+                return;
+            }
+        }
+
+        // Remove realm from filter
+        leaveRealmFilter(targetRealmId);
+
+        // Check if now in global mode
+        const selected = get(selectedRealms);
+        if (selected.size === 0) {
+            addSystemMessage(`Left ${nameOrId} chat (now showing all realms)`);
+        } else {
+            addSystemMessage(`Left ${nameOrId} chat (messages now hidden)`);
+        }
+    } catch (error) {
+        console.error('Failed to leave realm chat:', error);
+        addSystemMessage(`Error leaving realm: ${nameOrId}`);
+    }
+}
+
+// =====================
+// Moderation Commands
+// =====================
+
+/**
+ * Check if current user has moderation permissions
+ * @returns {{ canMod: boolean, canUberban: boolean, isAdmin: boolean, isSiteMod: boolean, isRealmMod: boolean, isStreamer: boolean }}
+ */
+function getModPermissions() {
+    const userInfo = get(chatUserInfo);
+    const isAdmin = userInfo.isAdmin || false;
+    const isSiteMod = userInfo.isSiteModerator || false;
+    const isRealmMod = userInfo.isModerator || false;
+    const isStreamer = userInfo.isStreamer || false;
+
+    return {
+        canMod: isAdmin || isSiteMod || isRealmMod || isStreamer,
+        canUberban: isAdmin || isSiteMod,
+        isAdmin,
+        isSiteMod,
+        isRealmMod,
+        isStreamer
+    };
+}
+
+/**
+ * Resolve a username to a userId by searching connected users
+ * For now, this uses the chat service's connected users list
+ */
+async function resolveUsername(username) {
+    // The chat service handles username resolution on the backend
+    // We just pass the username and let the backend resolve it
+    return username;
+}
+
+/**
+ * Handle /kick command
+ */
+async function handleKick(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canMod) {
+        addSystemMessage('Permission denied. You need moderator privileges to kick users.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /kick <username> [reason]');
+        return;
+    }
+
+    const targetUser = args[0];
+    const reason = args.slice(1).join(' ') || '';
+
+    try {
+        chatWebSocket.kickUser(targetUser, 60, reason);
+        addSystemMessage(`Kicked ${targetUser}${reason ? ` (${reason})` : ''}`);
+    } catch (error) {
+        addSystemMessage(`Error kicking user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /ban command (per-realm ban)
+ */
+async function handleBan(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canMod) {
+        addSystemMessage('Permission denied. You need moderator privileges to ban users.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /ban <username> [reason]');
+        return;
+    }
+
+    const targetUser = args[0];
+    const reason = args.slice(1).join(' ') || '';
+
+    try {
+        chatWebSocket.banUser(targetUser, reason);
+        addSystemMessage(`Banned ${targetUser} from this realm${reason ? ` (${reason})` : ''}`);
+    } catch (error) {
+        addSystemMessage(`Error banning user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /unban command
+ */
+async function handleUnban(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canMod) {
+        addSystemMessage('Permission denied. You need moderator privileges to unban users.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /unban <username>');
+        return;
+    }
+
+    const targetUser = args[0];
+
+    try {
+        chatWebSocket.unbanUser(targetUser);
+        addSystemMessage(`Unbanned ${targetUser} from this realm`);
+    } catch (error) {
+        addSystemMessage(`Error unbanning user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /mute command
+ */
+async function handleMute(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canMod) {
+        addSystemMessage('Permission denied. You need moderator privileges to mute users.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /mute <username> [duration-seconds] [reason]');
+        return;
+    }
+
+    const targetUser = args[0];
+    let duration = 300; // Default 5 minutes
+    let reason = '';
+
+    // Check if second arg is a number (duration)
+    if (args[1] && !isNaN(args[1])) {
+        duration = parseInt(args[1], 10);
+        reason = args.slice(2).join(' ');
+    } else {
+        reason = args.slice(1).join(' ');
+    }
+
+    try {
+        chatWebSocket.muteUser(targetUser, duration, reason);
+        const mins = Math.floor(duration / 60);
+        const secs = duration % 60;
+        const timeStr = mins > 0 ? `${mins}m${secs > 0 ? ` ${secs}s` : ''}` : `${secs}s`;
+        addSystemMessage(`Muted ${targetUser} for ${timeStr}${reason ? ` (${reason})` : ''}`);
+    } catch (error) {
+        addSystemMessage(`Error muting user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /timeout command
+ */
+async function handleTimeout(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canMod) {
+        addSystemMessage('Permission denied. You need moderator privileges to timeout users.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /timeout <username> [duration-seconds] [reason]');
+        return;
+    }
+
+    const targetUser = args[0];
+    let duration = 60; // Default 1 minute
+    let reason = '';
+
+    // Check if second arg is a number (duration)
+    if (args[1] && !isNaN(args[1])) {
+        duration = parseInt(args[1], 10);
+        reason = args.slice(2).join(' ');
+    } else {
+        reason = args.slice(1).join(' ');
+    }
+
+    try {
+        chatWebSocket.timeoutUser(targetUser, duration, reason);
+        const mins = Math.floor(duration / 60);
+        const secs = duration % 60;
+        const timeStr = mins > 0 ? `${mins}m${secs > 0 ? ` ${secs}s` : ''}` : `${secs}s`;
+        addSystemMessage(`Timed out ${targetUser} for ${timeStr}${reason ? ` (${reason})` : ''}`);
+    } catch (error) {
+        addSystemMessage(`Error timing out user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /uberban command (site-wide fingerprint ban)
+ */
+async function handleUberban(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canUberban) {
+        addSystemMessage('Permission denied. Only admins and site moderators can use uberban.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /uberban <username> [reason]');
+        addSystemMessage('Warning: This is a site-wide fingerprint ban that affects all realms.');
+        return;
+    }
+
+    const targetUser = args[0];
+    const reason = args.slice(1).join(' ') || '';
+
+    try {
+        // Note: For uberban, we pass the userId; the backend will resolve the fingerprint
+        chatWebSocket.uberbanUser(targetUser, '', reason);
+        addSystemMessage(`Site-wide banned ${targetUser}${reason ? ` (${reason})` : ''}`);
+        addSystemMessage('User is now banned from all realms by fingerprint.');
+    } catch (error) {
+        addSystemMessage(`Error uberbanning user: ${error.message}`);
+    }
+}
+
+/**
+ * Handle /ununberban command (remove site-wide ban)
+ */
+async function handleUnUberban(args, addSystemMessage, chatWebSocket, realmId, isConnected) {
+    const perms = getModPermissions();
+
+    if (!perms.canUberban) {
+        addSystemMessage('Permission denied. Only admins and site moderators can remove uberbans.');
+        return;
+    }
+
+    if (!isConnected || !realmId) {
+        addSystemMessage('Not connected to any realm. Use /join <realm> first.');
+        return;
+    }
+
+    if (!args[0]) {
+        addSystemMessage('Usage: /ununberban <fingerprint>');
+        addSystemMessage('Note: Use the fingerprint hash, not the username.');
+        return;
+    }
+
+    const fingerprint = args[0];
+
+    try {
+        chatWebSocket.unUberbanUser(fingerprint);
+        addSystemMessage(`Removed site-wide ban for fingerprint: ${fingerprint.substring(0, 16)}...`);
+    } catch (error) {
+        addSystemMessage(`Error removing uberban: ${error.message}`);
+    }
+}
diff --git a/frontend/src/lib/components/terminal/terminalStyles.css b/frontend/src/lib/components/terminal/terminalStyles.css
new file mode 100644
index 0000000..7413bf8
--- /dev/null
+++ b/frontend/src/lib/components/terminal/terminalStyles.css
@@ -0,0 +1,991 @@
+/* Terminal Shared Styles
+ * This file contains CSS shared between ChatTerminal overlay and terminal popout page
+ */
+
+/* ============================================
+   HEADER & TAB NAVIGATION
+   ============================================ */
+
+.terminal-header {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem 0.75rem;
+	background: #161b22;
+	border-bottom: 1px solid #30363d;
+	gap: 0.75rem;
+}
+
+.tab-bar {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.tab-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.35rem 0.5rem;
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid transparent;
+	border-radius: 4px;
+	color: #8b949e;
+	font-size: 0.875rem;
+	font-family: 'Consolas', 'Monaco', monospace;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.tab-button:hover {
+	color: #c9d1d9;
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.tab-button.active {
+	color: #0f0;
+	background: rgba(0, 255, 0, 0.1);
+	border-color: rgba(0, 255, 0, 0.25);
+}
+
+/* Audio tab special color */
+.tab-button.audio.active {
+	color: #ec4899;
+	background: rgba(236, 72, 153, 0.15);
+	border-color: rgba(236, 72, 153, 0.3);
+}
+
+.header-spacer {
+	flex: 1;
+}
+
+.status {
+	display: flex;
+	align-items: center;
+}
+
+.status-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #f85149;
+}
+
+.status-dot.connected {
+	background: #0f0;
+}
+
+.terminal-controls {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.control-button {
+	background: none;
+	border: none;
+	color: #8b949e;
+	cursor: pointer;
+	padding: 0.25rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	transition: all 0.2s;
+}
+
+.control-button:hover {
+	background: #30363d;
+	color: #c9d1d9;
+}
+
+.close-button {
+	background: none;
+	border: none;
+	color: #8b949e;
+	font-size: 1.5rem;
+	cursor: pointer;
+	padding: 0;
+	width: 2rem;
+	height: 2rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+}
+
+.close-button:hover {
+	background: #30363d;
+	color: #c9d1d9;
+}
+
+/* ============================================
+   TAB CONTENT CONTAINER
+   ============================================ */
+
+.tab-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	opacity: 0.9;
+}
+
+/* ============================================
+   TERMINAL MESSAGES
+   ============================================ */
+
+.terminal-messages {
+	flex: 1;
+	overflow-y: auto;
+	padding: 1rem;
+	color: #c9d1d9;
+	background: #0d1117;
+}
+
+.terminal-messages::-webkit-scrollbar {
+	width: 8px;
+}
+
+.terminal-messages::-webkit-scrollbar-track {
+	background: #0d1117;
+}
+
+.terminal-messages::-webkit-scrollbar-thumb {
+	background: #30363d;
+	border-radius: 4px;
+}
+
+.terminal-messages::-webkit-scrollbar-thumb:hover {
+	background: #484f58;
+}
+
+/* ============================================
+   TERMINAL INPUT
+   ============================================ */
+
+.terminal-input-line {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	padding: 0.125rem 0;
+	margin-top: 0.25rem;
+}
+
+.prompt {
+	color: #0f0;
+	font-weight: 600;
+	white-space: nowrap;
+	font-size: 0.8rem;
+}
+
+.terminal-input {
+	flex: 1;
+	background: transparent;
+	border: none;
+	color: #c9d1d9;
+	font-family: inherit;
+	font-size: 0.8rem;
+	outline: none;
+	caret-color: #0f0;
+}
+
+.terminal-input::placeholder {
+	color: #484f58;
+}
+
+.terminal-input:disabled {
+	opacity: 0.5;
+}
+
+/* ============================================
+   SYSTEM MESSAGES
+   ============================================ */
+
+.system-message {
+	padding: 0.125rem 0;
+	color: #8b949e;
+	font-size: 0.8rem;
+	line-height: 1.3;
+	border-left: none;
+	padding-left: 0;
+	margin: 0;
+}
+
+.system-prefix {
+	color: #6e7681;
+	font-size: 0.75rem;
+	margin-right: 0.5rem;
+}
+
+.system-text {
+	color: #c9d1d9;
+}
+
+/* ============================================
+   CHAT MESSAGE OVERRIDES (compact terminal mode)
+   ============================================ */
+
+.terminal-messages :global(.chat-message) {
+	padding: 0.125rem 0;
+	margin: 0;
+	background: transparent;
+	border-radius: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.terminal-messages :global(.chat-message:hover) {
+	background: transparent;
+}
+
+.terminal-messages :global(.chat-message .message-header) {
+	margin-bottom: 0;
+	gap: 0.35rem;
+	font-size: 0.8rem;
+	flex-shrink: 0;
+}
+
+.terminal-messages :global(.chat-message .message-content) {
+	font-size: 0.8rem;
+	line-height: 1.3;
+	margin-left: 0;
+	flex: 1;
+	min-width: 0;
+}
+
+.terminal-messages :global(.chat-message .message-content p) {
+	margin: 0;
+}
+
+.terminal-messages :global(.chat-message .user-avatar),
+.terminal-messages :global(.chat-message .user-avatar-placeholder) {
+	width: 16px;
+	height: 16px;
+	font-size: 0.5rem;
+}
+
+.terminal-messages :global(.chat-message .timestamp) {
+	font-size: 0.7rem;
+}
+
+.terminal-messages :global(.chat-message .badge) {
+	font-size: 0.55rem;
+	padding: 0.05rem 0.25rem;
+}
+
+/* Terminal mode: scale graffiti down to match text height */
+.terminal-messages :global(.graffiti-img) {
+	width: auto !important;
+	height: 16px !important;
+	max-width: 100px !important;
+	max-height: 16px !important;
+}
+
+/* ============================================
+   STREAMS TAB
+   ============================================ */
+
+.streams-tab {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	background: #0d1117;
+}
+
+.streams-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid #30363d;
+}
+
+.streams-title {
+	color: #8b949e;
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.tile-toggle {
+	padding: 0.25rem 0.5rem;
+	background: rgba(0, 255, 0, 0.1);
+	border: 1px solid rgba(0, 255, 0, 0.25);
+	border-radius: 4px;
+	color: #0f0;
+	font-size: 0.7rem;
+	font-family: inherit;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.tile-toggle:hover {
+	background: rgba(0, 255, 0, 0.2);
+}
+
+.streams-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0.5rem;
+}
+
+.streams-list::-webkit-scrollbar {
+	width: 6px;
+}
+
+.streams-list::-webkit-scrollbar-track {
+	background: #0d1117;
+}
+
+.streams-list::-webkit-scrollbar-thumb {
+	background: #30363d;
+	border-radius: 3px;
+}
+
+.streams-loading,
+.streams-empty {
+	color: #8b949e;
+	font-size: 0.8rem;
+	text-align: center;
+	padding: 2rem 1rem;
+}
+
+.streams-section-header {
+	font-size: 0.7rem;
+	color: #8b949e;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	padding: 0.5rem 0.25rem 0.25rem;
+	border-bottom: 1px solid #21262d;
+	margin-bottom: 0.25rem;
+}
+
+.streams-section-header:not(:first-child) {
+	margin-top: 0.75rem;
+}
+
+.stream-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.4rem;
+	border-radius: 4px;
+	transition: background 0.15s ease;
+}
+
+.stream-item:hover {
+	background: rgba(255, 255, 255, 0.05);
+}
+
+.stream-item.offline {
+	opacity: 0.7;
+}
+
+.stream-item.offline:hover {
+	opacity: 1;
+}
+
+.stream-link {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex: 1;
+	text-decoration: none;
+	color: inherit;
+	min-width: 0;
+}
+
+.stream-preview {
+	width: 48px;
+	height: 27px;
+	border-radius: 3px;
+	overflow: hidden;
+	background: #1a1a1a;
+	flex-shrink: 0;
+}
+
+.stream-preview img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.preview-placeholder {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #561d5e, #8b3a92);
+	color: white;
+	font-size: 0.75rem;
+	font-weight: 600;
+}
+
+.preview-placeholder.live {
+	background: linear-gradient(135deg, #da3633, #f85149);
+}
+
+.preview-placeholder.offline {
+	background: linear-gradient(135deg, #30363d, #484f58);
+}
+
+.stream-info {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.1rem;
+}
+
+.stream-name {
+	color: #c9d1d9;
+	font-size: 0.8rem;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.stream-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.7rem;
+	color: #8b949e;
+}
+
+.viewer-count {
+	color: #f85149;
+	font-weight: 500;
+}
+
+.viewer-count::before {
+	content: '';
+	margin-right: 0.2rem;
+	font-size: 0.5rem;
+	vertical-align: middle;
+}
+
+.stream-user {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.offline-badge {
+	color: #8b949e;
+	font-size: 0.65rem;
+	background: rgba(139, 148, 158, 0.2);
+	padding: 0.1rem 0.3rem;
+	border-radius: 3px;
+}
+
+.tile-btn {
+	width: 24px;
+	height: 24px;
+	border-radius: 4px;
+	border: 1px solid #30363d;
+	background: rgba(255, 255, 255, 0.05);
+	color: #8b949e;
+	font-size: 0.9rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.15s ease;
+	flex-shrink: 0;
+}
+
+.tile-btn:hover {
+	background: rgba(0, 255, 0, 0.15);
+	border-color: rgba(0, 255, 0, 0.3);
+	color: #0f0;
+}
+
+.tile-btn.active {
+	background: rgba(0, 255, 0, 0.2);
+	border-color: #0f0;
+	color: #0f0;
+}
+
+/* ============================================
+   AUDIO TAB
+   ============================================ */
+
+.audio-tab {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	background: #0d1117;
+}
+
+/* Player section (foobar/winamp style) */
+.player-section {
+	padding: 0.75rem;
+	background: linear-gradient(180deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05));
+	border-bottom: 1px solid rgba(236, 72, 153, 0.2);
+}
+
+.player-track-info {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 0.5rem;
+}
+
+.player-thumb {
+	width: 48px;
+	height: 48px;
+	border-radius: 4px;
+	overflow: hidden;
+	background: #222;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.player-thumb img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.player-thumb .placeholder {
+	font-size: 1.5rem;
+}
+
+.player-info {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.15rem;
+}
+
+.player-title {
+	font-size: 0.85rem;
+	color: #c9d1d9;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.player-artist {
+	font-size: 0.7rem;
+	color: #8b949e;
+}
+
+/* Progress bar */
+.player-progress {
+	height: 6px;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 3px;
+	cursor: pointer;
+	margin-bottom: 0.25rem;
+	overflow: hidden;
+}
+
+.progress-fill {
+	height: 100%;
+	background: linear-gradient(90deg, #ec4899, #f472b6);
+	border-radius: 3px;
+	transition: width 0.1s linear;
+}
+
+.player-times {
+	display: flex;
+	justify-content: space-between;
+	font-size: 0.65rem;
+	color: #8b949e;
+	font-family: monospace;
+	margin-bottom: 0.5rem;
+}
+
+/* Player controls */
+.player-controls {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
+.ctrl-btn {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: none;
+	background: rgba(255, 255, 255, 0.1);
+	color: #c9d1d9;
+	font-size: 0.75rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.15s ease;
+}
+
+.ctrl-btn:hover {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+.ctrl-btn.active {
+	background: rgba(236, 72, 153, 0.3);
+	color: #ec4899;
+}
+
+.ctrl-btn.play {
+	width: 36px;
+	height: 36px;
+	background: #ec4899;
+	font-size: 0.9rem;
+}
+
+.ctrl-btn.play:hover {
+	background: #f472b6;
+}
+
+/* Volume control */
+.player-volume {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.vol-btn {
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	color: #8b949e;
+	font-size: 0.8rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.vol-btn:hover {
+	color: #c9d1d9;
+}
+
+.volume-slider {
+	width: 80px;
+	height: 4px;
+	-webkit-appearance: none;
+	appearance: none;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background: #ec4899;
+	cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background: #ec4899;
+	cursor: pointer;
+	border: none;
+}
+
+/* Empty player state */
+.player-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 1.5rem;
+	color: #8b949e;
+	font-size: 0.85rem;
+}
+
+.player-hint {
+	font-size: 0.7rem;
+	color: #6e7681;
+	margin-top: 0.25rem;
+}
+
+/* Queue section */
+.queue-section {
+	border-bottom: 1px solid #30363d;
+}
+
+.queue-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 0.75rem;
+	background: rgba(0, 0, 0, 0.2);
+	font-size: 0.7rem;
+	color: #8b949e;
+}
+
+.clear-btn {
+	padding: 0.15rem 0.4rem;
+	background: rgba(248, 81, 73, 0.2);
+	border: 1px solid rgba(248, 81, 73, 0.3);
+	border-radius: 3px;
+	color: #f85149;
+	font-size: 0.65rem;
+	font-family: inherit;
+	cursor: pointer;
+}
+
+.clear-btn:hover {
+	background: rgba(248, 81, 73, 0.3);
+}
+
+.queue-list {
+	max-height: 120px;
+	overflow-y: auto;
+}
+
+.queue-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.35rem 0.75rem;
+	font-size: 0.75rem;
+	color: #8b949e;
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.queue-item:hover {
+	background: rgba(255, 255, 255, 0.05);
+}
+
+.queue-item.active {
+	background: rgba(236, 72, 153, 0.1);
+	color: #ec4899;
+}
+
+.queue-index {
+	width: 20px;
+	text-align: center;
+	font-size: 0.65rem;
+}
+
+.queue-title {
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: #c9d1d9;
+}
+
+.queue-item.active .queue-title {
+	color: #ec4899;
+}
+
+.queue-duration {
+	font-size: 0.65rem;
+	font-family: monospace;
+}
+
+.remove-btn {
+	width: 18px;
+	height: 18px;
+	border: none;
+	background: transparent;
+	color: #8b949e;
+	font-size: 0.9rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	opacity: 0;
+	transition: all 0.15s ease;
+}
+
+.queue-item:hover .remove-btn {
+	opacity: 1;
+}
+
+.remove-btn:hover {
+	background: rgba(248, 81, 73, 0.2);
+	color: #f85149;
+}
+
+/* Browse section */
+.audio-browse-header {
+	font-size: 0.7rem;
+	color: #8b949e;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid #21262d;
+}
+
+.audio-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0.5rem;
+}
+
+.audio-list::-webkit-scrollbar {
+	width: 6px;
+}
+
+.audio-list::-webkit-scrollbar-track {
+	background: #0d1117;
+}
+
+.audio-list::-webkit-scrollbar-thumb {
+	background: #30363d;
+	border-radius: 3px;
+}
+
+.audio-loading,
+.audio-empty {
+	color: #8b949e;
+	font-size: 0.8rem;
+	text-align: center;
+	padding: 2rem 1rem;
+}
+
+.audio-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.4rem;
+	border-radius: 4px;
+	transition: background 0.15s ease;
+}
+
+.audio-item:hover {
+	background: rgba(255, 255, 255, 0.05);
+}
+
+.audio-thumb {
+	width: 40px;
+	height: 40px;
+	border-radius: 4px;
+	overflow: hidden;
+	background: #1a1a1a;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+
+.audio-thumb img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.audio-thumb .placeholder {
+	font-size: 1rem;
+	opacity: 0.5;
+}
+
+.audio-thumb .duration {
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	background: rgba(0, 0, 0, 0.8);
+	color: white;
+	font-size: 0.5rem;
+	padding: 1px 3px;
+	border-radius: 2px;
+}
+
+.audio-info {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.1rem;
+}
+
+.audio-name {
+	color: #c9d1d9;
+	font-size: 0.8rem;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.audio-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.7rem;
+	color: #8b949e;
+}
+
+.audio-plays {
+	color: #ec4899;
+}
+
+.audio-user {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.audio-actions {
+	display: flex;
+	gap: 0.25rem;
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.audio-item:hover .audio-actions {
+	opacity: 1;
+}
+
+.audio-btn {
+	width: 26px;
+	height: 26px;
+	border-radius: 50%;
+	border: 1px solid #30363d;
+	background: rgba(255, 255, 255, 0.05);
+	color: #8b949e;
+	font-size: 0.75rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.15s ease;
+}
+
+.audio-btn:hover {
+	background: rgba(236, 72, 153, 0.15);
+	border-color: rgba(236, 72, 153, 0.3);
+	color: #ec4899;
+}
+
+.audio-btn.play {
+	background: rgba(236, 72, 153, 0.2);
+	border-color: rgba(236, 72, 153, 0.3);
+	color: #ec4899;
+}
+
+.audio-btn.play:hover {
+	background: #ec4899;
+	color: white;
+}
diff --git a/frontend/src/lib/components/watch/PlaybackControls.svelte b/frontend/src/lib/components/watch/PlaybackControls.svelte
new file mode 100644
index 0000000..4fe0c60
--- /dev/null
+++ b/frontend/src/lib/components/watch/PlaybackControls.svelte
@@ -0,0 +1,221 @@
+<script>
+    import { watchSync, isPlaying, canControl, currentVideo } from '$lib/stores/watchSync';
+
+    export let currentTime = 0;
+    export let duration = 0;
+
+    function formatTime(seconds) {
+        if (!seconds || isNaN(seconds)) return '0:00';
+        const hrs = Math.floor(seconds / 3600);
+        const mins = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        if (hrs > 0) {
+            return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function handlePlay() {
+        if ($canControl) {
+            watchSync.play();
+        }
+    }
+
+    function handlePause() {
+        if ($canControl) {
+            watchSync.pause();
+        }
+    }
+
+    function handleSkip() {
+        if ($canControl && confirm('Skip to the next video?')) {
+            watchSync.skip();
+        }
+    }
+
+    function handleSeek(event) {
+        if (!$canControl) return;
+
+        const progressBar = event.currentTarget;
+        const rect = progressBar.getBoundingClientRect();
+        const clickX = event.clientX - rect.left;
+        const percentage = clickX / rect.width;
+        const seekTime = percentage * duration;
+
+        watchSync.seek(seekTime);
+    }
+
+    $: progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+</script>
+
+<style>
+    .playback-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+    }
+
+    .progress-bar-container {
+        height: 6px;
+        background: #333;
+        border-radius: 3px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .progress-bar-container.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    .progress-bar {
+        height: 100%;
+        background: var(--primary);
+        border-radius: 3px;
+        transition: width 0.1s linear;
+    }
+
+    .controls-row {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .control-buttons {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .control-btn {
+        background: none;
+        border: none;
+        color: var(--white);
+        cursor: pointer;
+        padding: 0.5rem;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .control-btn:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .control-btn:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+
+    .control-btn.play-pause {
+        width: 40px;
+        height: 40px;
+    }
+
+    .time-display {
+        font-size: 0.85rem;
+        color: var(--gray);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .video-info {
+        flex: 1;
+        min-width: 0;
+        text-align: center;
+    }
+
+    .video-title {
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .no-control-hint {
+        font-size: 0.75rem;
+        color: var(--gray);
+        text-align: center;
+        margin-top: 0.25rem;
+    }
+</style>
+
+<div class="playback-controls">
+    <div
+        class="progress-bar-container"
+        class:disabled={!$canControl}
+        on:click={handleSeek}
+        role="progressbar"
+        aria-valuenow={currentTime}
+        aria-valuemin="0"
+        aria-valuemax={duration}
+    >
+        <div class="progress-bar" style="width: {progress}%"></div>
+    </div>
+
+    <div class="controls-row">
+        <div class="control-buttons">
+            {#if $isPlaying}
+                <button
+                    class="control-btn play-pause"
+                    on:click={handlePause}
+                    disabled={!$canControl}
+                    title={$canControl ? 'Pause' : 'You cannot control playback'}
+                >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+                    </svg>
+                </button>
+            {:else}
+                <button
+                    class="control-btn play-pause"
+                    on:click={handlePlay}
+                    disabled={!$canControl || !$currentVideo}
+                    title={$canControl ? 'Play' : 'You cannot control playback'}
+                >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"/>
+                    </svg>
+                </button>
+            {/if}
+
+            <button
+                class="control-btn"
+                on:click={handleSkip}
+                disabled={!$canControl}
+                title={$canControl ? 'Skip to next' : 'You cannot control playback'}
+            >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+                </svg>
+            </button>
+        </div>
+
+        <span class="time-display">
+            {formatTime(currentTime)} / {formatTime(duration)}
+        </span>
+
+        <div class="video-info">
+            {#if $currentVideo}
+                <div class="video-title" title={$currentVideo.title}>
+                    {$currentVideo.title}
+                </div>
+            {:else}
+                <div class="video-title" style="color: var(--gray)">
+                    No video playing
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    {#if !$canControl}
+        <div class="no-control-hint">
+            Only designated users can control playback
+        </div>
+    {/if}
+</div>
diff --git a/frontend/src/lib/components/watch/WatchPlaylist.svelte b/frontend/src/lib/components/watch/WatchPlaylist.svelte
new file mode 100644
index 0000000..7fba0e2
--- /dev/null
+++ b/frontend/src/lib/components/watch/WatchPlaylist.svelte
@@ -0,0 +1,1041 @@
+<script>
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { watchSync, canControl, currentVideo } from '$lib/stores/watchSync';
+    import { auth } from '$lib/stores/auth';
+    import { getGuestFingerprint } from '$lib/fingerprint';
+
+    export let realmId;
+    export let playlist = [];
+    export let userCanAdd = false;
+    export let isOwner = false;
+    export let playlistControlMode = 'owner';
+    export let playlistWhitelist = '[]';
+
+    const dispatch = createEventDispatcher();
+
+    let youtubeUrl = '';
+    let addingVideo = false;
+    let addError = '';
+    let activeTab = 'queue';  // 'queue', 'history', or 'settings'
+    let history = [];
+    let historyLoading = false;
+
+    // Cache for fetched YouTube titles (videoId -> title)
+    let titleCache = {};
+    // Track which titles are being fetched to avoid duplicate requests
+    let fetchingTitles = new Set();
+
+    // Settings state
+    let settingsMode = playlistControlMode;
+    let settingsWhitelist = '';
+    let savingSettings = false;
+    let settingsError = '';
+    let settingsSuccess = false;
+
+    // Initialize whitelist from prop
+    $: {
+        try {
+            const parsed = JSON.parse(playlistWhitelist);
+            settingsWhitelist = Array.isArray(parsed) ? parsed.join(', ') : '';
+        } catch {
+            settingsWhitelist = '';
+        }
+    }
+    $: settingsMode = playlistControlMode;
+
+    // Filter playlist to show only queued/playing items
+    $: queueItems = playlist.filter(item => item.status === 'queued' || item.status === 'playing');
+
+    // Load history on mount
+    onMount(() => {
+        loadHistory();
+    });
+
+    function formatDuration(seconds) {
+        if (!seconds || seconds <= 0) return '';  // Hide unknown durations
+        const hrs = Math.floor(seconds / 3600);
+        const mins = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        if (hrs > 0) {
+            return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatTimeAgo(dateStr) {
+        if (!dateStr) return '';
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMins / 60);
+
+        if (diffMins < 1) return 'just now';
+        if (diffMins < 60) return `${diffMins}m ago`;
+        if (diffHours < 24) return `${diffHours}h ago`;
+        return date.toLocaleDateString();
+    }
+
+    function extractVideoId(url) {
+        // Support various YouTube URL formats
+        const patterns = [
+            /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([a-zA-Z0-9_-]{11})/,
+            /^([a-zA-Z0-9_-]{11})$/
+        ];
+
+        for (const pattern of patterns) {
+            const match = url.match(pattern);
+            if (match) return match[1];
+        }
+        return null;
+    }
+
+    async function loadHistory() {
+        historyLoading = true;
+        try {
+            const response = await fetch(`/api/watch/${realmId}/playlist?history=true`, {
+                credentials: 'include'
+            });
+            if (response.ok) {
+                const data = await response.json();
+                history = data.history || [];
+            }
+        } catch (e) {
+            console.error('Failed to load history:', e);
+        } finally {
+            historyLoading = false;
+        }
+    }
+
+    function switchTab(tab) {
+        activeTab = tab;
+        if (tab === 'history') {
+            // Always reload history when switching to history tab
+            loadHistory();
+        }
+    }
+
+    async function fetchVideoTitle(videoId) {
+        try {
+            // Use YouTube oEmbed API to get video title (no API key needed)
+            const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;
+            const response = await fetch(oembedUrl);
+            if (response.ok) {
+                const data = await response.json();
+                return data.title || 'YouTube Video';
+            }
+        } catch (e) {
+            console.warn('Failed to fetch video title:', e);
+        }
+        return 'YouTube Video';
+    }
+
+    // Get display title - fetches from YouTube if needed
+    // Returns cached title, fetches in background if not cached
+    function getDisplayTitle(item) {
+        const videoId = item.youtubeVideoId;
+
+        // If we already have a cached title, use it
+        if (titleCache[videoId]) {
+            return titleCache[videoId];
+        }
+
+        // If title looks like it might be user-provided (not just video ID), use it
+        // But for security, we now store video ID as title, so fetch real title
+        const isVideoIdAsTitle = item.title === videoId || item.title === 'YouTube Video' || !item.title;
+
+        if (!isVideoIdAsTitle) {
+            // Legacy title from before the fix - still display it (already escaped by Svelte)
+            return item.title;
+        }
+
+        // Fetch title from YouTube if not already fetching
+        if (!fetchingTitles.has(videoId)) {
+            fetchingTitles.add(videoId);
+            fetchVideoTitle(videoId).then(title => {
+                titleCache[videoId] = title;
+                titleCache = titleCache;  // Trigger reactivity
+                fetchingTitles.delete(videoId);
+            });
+        }
+
+        // Return loading placeholder while fetching
+        return 'Loading...';
+    }
+
+    async function addVideo() {
+        const videoId = extractVideoId(youtubeUrl.trim());
+        if (!videoId) {
+            addError = 'Invalid YouTube URL';
+            return;
+        }
+
+        addingVideo = true;
+        addError = '';
+
+        try {
+            // Fetch video title from YouTube oEmbed API
+            const title = await fetchVideoTitle(videoId);
+
+            // Get fingerprint for guests
+            let fingerprint = null;
+            if (!$auth.user) {
+                fingerprint = await getGuestFingerprint();
+            }
+
+            const body = {
+                youtubeUrl: youtubeUrl.trim(),
+                title: title
+            };
+            if (fingerprint) {
+                body.fingerprint = fingerprint;
+            }
+
+            const response = await fetch(`/api/watch/${realmId}/playlist`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify(body)
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                youtubeUrl = '';
+                dispatch('videoAdded', data.video);
+            } else {
+                addError = data.error || 'Failed to add video';
+                // Auto-dismiss error after 5 seconds
+                setTimeout(() => { addError = ''; }, 5000);
+            }
+        } catch (e) {
+            console.error('Failed to add video:', e);
+            addError = 'Failed to add video';
+            setTimeout(() => { addError = ''; }, 5000);
+        } finally {
+            addingVideo = false;
+        }
+    }
+
+    async function saveSettings() {
+        savingSettings = true;
+        settingsError = '';
+        settingsSuccess = false;
+
+        try {
+            // Parse whitelist from comma-separated string
+            const whitelistArray = settingsWhitelist
+                .split(',')
+                .map(s => s.trim())
+                .filter(s => s.length > 0);
+
+            const response = await fetch(`/api/watch/${realmId}/settings`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    playlistControlMode: settingsMode,
+                    playlistWhitelist: whitelistArray
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                settingsSuccess = true;
+                dispatch('settingsChanged');
+                setTimeout(() => { settingsSuccess = false; }, 3000);
+            } else {
+                settingsError = data.error || 'Failed to save settings';
+            }
+        } catch (e) {
+            console.error('Failed to save settings:', e);
+            settingsError = 'Failed to save settings';
+        } finally {
+            savingSettings = false;
+        }
+    }
+
+    async function removeVideo(itemId) {
+        if (!confirm('Remove this video from the playlist?')) return;
+
+        try {
+            const response = await fetch(`/api/watch/${realmId}/playlist/${itemId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                dispatch('videoRemoved', { itemId });
+            }
+        } catch (e) {
+            console.error('Failed to remove video:', e);
+        }
+    }
+
+    async function toggleLock(itemId, locked) {
+        try {
+            const response = await fetch(`/api/watch/${realmId}/playlist/${itemId}/lock`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ locked })
+            });
+
+            if (response.ok) {
+                // Update local state optimistically
+                playlist = playlist.map(item =>
+                    item.id === itemId ? { ...item, isLocked: locked } : item
+                );
+                dispatch('playlistUpdated');
+            }
+        } catch (e) {
+            console.error('Failed to toggle lock:', e);
+        }
+    }
+
+    function handleKeyPress(event) {
+        if (event.key === 'Enter' && !addingVideo) {
+            addVideo();
+        }
+    }
+
+    // Track playlist length to detect when videos are played/removed
+    // Always reload history when playlist changes to keep the counter accurate
+    let lastPlaylistLength = 0;
+    $: if (playlist && playlist.length !== lastPlaylistLength) {
+        lastPlaylistLength = playlist.length;
+        loadHistory();
+    }
+</script>
+
+<style>
+    .playlist-container {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .tab {
+        flex: 1;
+        padding: 0.6rem 1rem;
+        background: none;
+        border: none;
+        color: var(--gray);
+        cursor: pointer;
+        font-size: 0.85rem;
+        font-weight: 500;
+        transition: all 0.2s;
+        position: relative;
+    }
+
+    .tab:hover {
+        color: var(--white);
+        background: rgba(255, 255, 255, 0.03);
+    }
+
+    .tab.active {
+        color: var(--primary);
+    }
+
+    .tab.active::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--primary);
+    }
+
+    .tab-badge {
+        background: rgba(86, 29, 94, 0.3);
+        color: var(--primary);
+        padding: 0.1rem 0.4rem;
+        border-radius: 10px;
+        font-size: 0.75rem;
+        margin-left: 0.4rem;
+    }
+
+    .add-video-form {
+        padding: 0.75rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .add-video-input-group {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .add-video-input {
+        flex: 1;
+        background: #0a0a0a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.5rem 0.75rem;
+        color: var(--white);
+        font-size: 0.9rem;
+    }
+
+    .add-video-input:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .add-video-input::placeholder {
+        color: var(--gray);
+    }
+
+    .add-btn {
+        background: var(--primary);
+        border: none;
+        border-radius: 6px;
+        padding: 0.5rem 1rem;
+        color: white;
+        cursor: pointer;
+        font-size: 0.9rem;
+        white-space: nowrap;
+    }
+
+    .add-btn:hover:not(:disabled) {
+        background: var(--primary-hover);
+    }
+
+    .add-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .add-error {
+        color: var(--error);
+        font-size: 0.8rem;
+        margin-top: 0.5rem;
+    }
+
+    .playlist-items {
+        flex: 1;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: #444 transparent;
+    }
+
+    .playlist-items::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .playlist-items::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .playlist-items::-webkit-scrollbar-thumb {
+        background: #444;
+        border-radius: 3px;
+    }
+
+    .playlist-items::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    .playlist-item {
+        display: flex;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        border-bottom: 1px solid var(--border);
+        transition: background 0.2s;
+    }
+
+    .playlist-item:hover {
+        background: rgba(255, 255, 255, 0.03);
+    }
+
+    .playlist-item.playing {
+        background: rgba(86, 29, 94, 0.2);
+        border-left: 3px solid var(--primary);
+    }
+
+    .playlist-item.played {
+        opacity: 0.7;
+    }
+
+    .item-thumbnail {
+        width: 80px;
+        height: 45px;
+        background: #222;
+        border-radius: 4px;
+        overflow: hidden;
+        flex-shrink: 0;
+        position: relative;
+    }
+
+    .item-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .item-duration {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        background: rgba(0, 0, 0, 0.8);
+        padding: 1px 4px;
+        border-radius: 2px;
+        font-size: 0.7rem;
+        color: white;
+    }
+
+    .item-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .item-title {
+        font-size: 0.9rem;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .item-meta {
+        font-size: 0.8rem;
+        color: var(--gray);
+    }
+
+    .item-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .item-action-btn {
+        background: none;
+        border: none;
+        color: var(--gray);
+        cursor: pointer;
+        padding: 0.25rem;
+        border-radius: 4px;
+        transition: all 0.2s;
+    }
+
+    .item-action-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--error);
+    }
+
+    .item-action-btn.lock-btn:hover {
+        color: #f59e0b;
+    }
+
+    .item-action-btn.lock-btn.locked {
+        color: #f59e0b;
+    }
+
+    .playlist-item.locked {
+        border-left: 3px solid #f59e0b;
+    }
+
+    .playlist-item.locked.playing {
+        border-left: 3px solid #f59e0b;
+        background: rgba(245, 158, 11, 0.1);
+    }
+
+    .locked-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.2rem;
+        background: rgba(245, 158, 11, 0.2);
+        color: #f59e0b;
+        padding: 0.1rem 0.4rem;
+        border-radius: 4px;
+        font-size: 0.65rem;
+        font-weight: 600;
+        margin-left: 0.4rem;
+    }
+
+    .now-playing-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        background: var(--primary);
+        color: white;
+        padding: 0.125rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.7rem;
+        font-weight: 600;
+    }
+
+    .played-time {
+        font-size: 0.75rem;
+        color: var(--gray);
+        opacity: 0.8;
+    }
+
+    .video-link {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 0.5rem;
+        color: var(--gray);
+        opacity: 0.7;
+        transition: all 0.2s;
+    }
+
+    .video-link:hover {
+        color: var(--primary);
+        opacity: 1;
+    }
+
+    .empty-playlist {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 1rem;
+        color: var(--gray);
+        text-align: center;
+        gap: 0.5rem;
+    }
+
+    .empty-playlist svg {
+        width: 48px;
+        height: 48px;
+        opacity: 0.5;
+    }
+
+    .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        color: var(--gray);
+    }
+
+    /* Settings Panel Styles */
+    .settings-panel {
+        padding: 1rem;
+        overflow-y: auto;
+        flex: 1;
+        scrollbar-width: thin;
+        scrollbar-color: #555 transparent;
+    }
+
+    .settings-panel::-webkit-scrollbar {
+        width: 1px;
+    }
+
+    .settings-panel::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .settings-panel::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    .settings-section h3 {
+        margin: 0 0 0.75rem 0;
+        font-size: 0.95rem;
+        color: var(--white);
+    }
+
+    .settings-options {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .radio-option {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+        padding: 0.6rem;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .radio-option:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: var(--primary);
+    }
+
+    .radio-option input[type="radio"] {
+        margin-top: 2px;
+        accent-color: var(--primary);
+    }
+
+    .radio-label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.15rem;
+    }
+
+    .radio-label strong {
+        font-size: 0.85rem;
+        color: var(--white);
+    }
+
+    .radio-label small {
+        font-size: 0.75rem;
+        color: var(--gray);
+    }
+
+    .whitelist-input {
+        margin-top: 0.75rem;
+    }
+
+    .whitelist-input label {
+        display: block;
+        font-size: 0.8rem;
+        color: var(--gray);
+        margin-bottom: 0.35rem;
+    }
+
+    .whitelist-input input {
+        width: 100%;
+        padding: 0.5rem;
+        background: #0a0a0a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--white);
+        font-size: 0.85rem;
+    }
+
+    .whitelist-input input:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .settings-info {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 1rem;
+        padding: 0.6rem;
+        background: rgba(86, 29, 94, 0.15);
+        border-radius: 6px;
+        font-size: 0.8rem;
+        color: var(--gray);
+    }
+
+    .settings-info svg {
+        flex-shrink: 0;
+        color: var(--primary);
+    }
+
+    .settings-error {
+        margin-top: 0.75rem;
+        padding: 0.5rem;
+        background: rgba(255, 68, 68, 0.15);
+        border-radius: 4px;
+        color: var(--error);
+        font-size: 0.85rem;
+    }
+
+    .settings-success {
+        margin-top: 0.75rem;
+        padding: 0.5rem;
+        background: rgba(68, 255, 68, 0.15);
+        border-radius: 4px;
+        color: #4ade80;
+        font-size: 0.85rem;
+    }
+
+    .save-btn {
+        margin-top: 1rem;
+        width: 100%;
+        padding: 0.6rem 1rem;
+        background: var(--primary);
+        border: none;
+        border-radius: 6px;
+        color: white;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .save-btn:hover:not(:disabled) {
+        background: var(--primary-hover);
+    }
+
+    .save-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>
+
+<div class="playlist-container">
+    <div class="tabs">
+        <button
+            class="tab"
+            class:active={activeTab === 'queue'}
+            on:click={() => switchTab('queue')}
+        >
+            Queue
+            {#if queueItems.length > 0}
+                <span class="tab-badge">{queueItems.length}</span>
+            {/if}
+        </button>
+        <button
+            class="tab"
+            class:active={activeTab === 'history'}
+            on:click={() => switchTab('history')}
+        >
+            History
+            {#if history.length > 0}
+                <span class="tab-badge">{history.length}</span>
+            {/if}
+        </button>
+        {#if isOwner}
+            <button
+                class="tab"
+                class:active={activeTab === 'settings'}
+                on:click={() => switchTab('settings')}
+            >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle; margin-right: 2px;">
+                    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
+                </svg>
+            </button>
+        {/if}
+    </div>
+
+    {#if activeTab === 'queue'}
+        {#if userCanAdd}
+            <div class="add-video-form">
+                <div class="add-video-input-group">
+                    <input
+                        type="text"
+                        class="add-video-input"
+                        placeholder="YouTube URL or video ID"
+                        bind:value={youtubeUrl}
+                        on:keypress={handleKeyPress}
+                        disabled={addingVideo}
+                    />
+                    <button
+                        class="add-btn"
+                        on:click={addVideo}
+                        disabled={addingVideo || !youtubeUrl.trim()}
+                    >
+                        {addingVideo ? 'Adding...' : 'Add'}
+                    </button>
+                </div>
+                {#if addError}
+                    <div class="add-error">{addError}</div>
+                {/if}
+            </div>
+        {/if}
+
+        <div class="playlist-items">
+            {#if queueItems.length === 0}
+                <div class="empty-playlist">
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
+                    </svg>
+                    <span>Queue is empty</span>
+                    {#if userCanAdd}
+                        <span style="font-size: 0.85rem;">Add a YouTube video to get started</span>
+                    {/if}
+                </div>
+            {:else}
+                {#each queueItems as item, index (item.id)}
+                    <div
+                        class="playlist-item"
+                        class:playing={item.status === 'playing' || $currentVideo?.id === item.id}
+                        class:locked={item.isLocked}
+                    >
+                        <div class="item-thumbnail">
+                            {#if item.thumbnailUrl}
+                                <img src={item.thumbnailUrl} alt={getDisplayTitle(item)} />
+                            {/if}
+                            <span class="item-duration">{formatDuration(item.durationSeconds)}</span>
+                        </div>
+
+                        <div class="item-info">
+                            <div class="item-title" title={getDisplayTitle(item)}>{getDisplayTitle(item)}</div>
+                            <div class="item-meta">
+                                Added by {item.addedBy || 'Unknown'}
+                                {#if item.status === 'playing' || $currentVideo?.id === item.id}
+                                    <span class="now-playing-badge">NOW PLAYING</span>
+                                {/if}
+                                {#if item.isLocked}
+                                    <span class="locked-badge">
+                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+                                        </svg>
+                                        LOOPED
+                                    </span>
+                                {/if}
+                            </div>
+                        </div>
+
+                        <div class="item-actions">
+                            {#if isOwner}
+                                <button
+                                    class="item-action-btn lock-btn"
+                                    class:locked={item.isLocked}
+                                    on:click={() => toggleLock(item.id, !item.isLocked)}
+                                    title={item.isLocked ? 'Unlock video (stop looping)' : 'Lock video (loop forever)'}
+                                >
+                                    {#if item.isLocked}
+                                        <!-- Locked icon -->
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+                                        </svg>
+                                    {:else}
+                                        <!-- Unlocked icon -->
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>
+                                        </svg>
+                                    {/if}
+                                </button>
+                            {/if}
+                            {#if userCanAdd}
+                                <button
+                                    class="item-action-btn"
+                                    on:click={() => removeVideo(item.id)}
+                                    title={item.status === 'playing' ? 'Remove and stop playback' : 'Remove from playlist'}
+                                >
+                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                                    </svg>
+                                </button>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+    {:else if activeTab === 'history'}
+        <!-- History Tab -->
+        <div class="playlist-items">
+            {#if historyLoading}
+                <div class="loading">Loading history...</div>
+            {:else if history.length === 0}
+                <div class="empty-playlist">
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+                    </svg>
+                    <span>No history yet</span>
+                    <span style="font-size: 0.85rem;">Played videos will appear here</span>
+                </div>
+            {:else}
+                {#each history as item (item.id)}
+                    <div class="playlist-item played">
+                        <div class="item-thumbnail">
+                            {#if item.thumbnailUrl}
+                                <img src={item.thumbnailUrl} alt={getDisplayTitle(item)} />
+                            {/if}
+                            <span class="item-duration">{formatDuration(item.durationSeconds)}</span>
+                        </div>
+
+                        <div class="item-info">
+                            <div class="item-title" title={getDisplayTitle(item)}>{getDisplayTitle(item)}</div>
+                            <div class="item-meta">
+                                Added by {item.addedBy || 'Unknown'}
+                                {#if item.playedAt}
+                                    <span class="played-time">• Played {formatTimeAgo(item.playedAt)}</span>
+                                {/if}
+                                <a
+                                    href="https://youtube.com/watch?v={item.youtubeVideoId}"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="video-link"
+                                    title="Open on YouTube"
+                                >
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+    {:else if activeTab === 'settings'}
+        <!-- Settings Tab (Owner Only) -->
+        <div class="settings-panel">
+            <div class="settings-section">
+                <h3>Who can add videos?</h3>
+                <div class="settings-options">
+                    <label class="radio-option">
+                        <input type="radio" bind:group={settingsMode} value="owner" />
+                        <span class="radio-label">
+                            <strong>Only me</strong>
+                            <small>Only you (the owner) can add videos</small>
+                        </span>
+                    </label>
+                    <label class="radio-option">
+                        <input type="radio" bind:group={settingsMode} value="guests" />
+                        <span class="radio-label">
+                            <strong>Everyone (limited)</strong>
+                            <small>Anyone can add videos, but guests limited to 1 in queue</small>
+                        </span>
+                    </label>
+                    <label class="radio-option">
+                        <input type="radio" bind:group={settingsMode} value="registered" />
+                        <span class="radio-label">
+                            <strong>Registered users</strong>
+                            <small>Only logged-in users can add videos</small>
+                        </span>
+                    </label>
+                    <label class="radio-option">
+                        <input type="radio" bind:group={settingsMode} value="whitelist" />
+                        <span class="radio-label">
+                            <strong>Whitelist</strong>
+                            <small>Only specific users can add videos</small>
+                        </span>
+                    </label>
+                </div>
+
+                {#if settingsMode === 'whitelist'}
+                    <div class="whitelist-input">
+                        <label for="whitelist">Allowed usernames (comma-separated):</label>
+                        <input
+                            id="whitelist"
+                            type="text"
+                            bind:value={settingsWhitelist}
+                            placeholder="user1, user2, user3"
+                        />
+                    </div>
+                {/if}
+
+                <div class="settings-info">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+                    </svg>
+                    <span>Users can always remove their own video submissions.</span>
+                </div>
+
+                {#if settingsError}
+                    <div class="settings-error">{settingsError}</div>
+                {/if}
+                {#if settingsSuccess}
+                    <div class="settings-success">Settings saved!</div>
+                {/if}
+
+                <button
+                    class="save-btn"
+                    on:click={saveSettings}
+                    disabled={savingSettings}
+                >
+                    {savingSettings ? 'Saving...' : 'Save Settings'}
+                </button>
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/frontend/src/lib/components/watch/YouTubePlayer.svelte b/frontend/src/lib/components/watch/YouTubePlayer.svelte
new file mode 100644
index 0000000..980d504
--- /dev/null
+++ b/frontend/src/lib/components/watch/YouTubePlayer.svelte
@@ -0,0 +1,368 @@
+<script>
+    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+    import { browser } from '$app/environment';
+    import { watchSync, isPlaying, canControl, isLeadIn } from '$lib/stores/watchSync';
+
+    export let videoId = null;
+    export let offlineImageUrl = null;
+
+    const dispatch = createEventDispatcher();
+
+    let player = null;
+    let playerReady = false;
+    let container;
+    let syncCheckInterval = null;
+    let lastSyncTime = 0;
+    let lastSyncCheck = 0;
+    let ignoreStateChange = false;
+    let apiReady = false;
+    let currentPlaylistItemId = null; // Track playlist item ID to detect changes even with same video
+    let durationReportedForItemId = null; // Track which playlist item we've reported duration for
+    let lastControllerSeekTime = 0; // Debounce controller seek updates
+
+    const SYNC_CHECK_INTERVAL = 1000; // Check sync every second (matches server sync interval)
+    const DRIFT_THRESHOLD = 2; // Seek if drift > 2 seconds (CyTube-style tight sync)
+    const MIN_SYNC_INTERVAL = 1000; // Minimum 1 second between sync checks (server pushes every 1s)
+    const CONTROLLER_SEEK_DEBOUNCE = 2000; // Debounce controller seeks by 2 seconds
+
+    // Load YouTube IFrame API
+    function loadYouTubeAPI() {
+        if (!browser) return;
+
+        if (window.YT && window.YT.Player) {
+            apiReady = true;
+            initPlayer();
+            return;
+        }
+
+        // Check if script is already loading
+        if (document.querySelector('script[src*="youtube.com/iframe_api"]')) {
+            window.onYouTubeIframeAPIReady = () => {
+                apiReady = true;
+                initPlayer();
+            };
+            return;
+        }
+
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        if (firstScriptTag && firstScriptTag.parentNode) {
+            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        } else {
+            document.head.appendChild(tag);
+        }
+
+        window.onYouTubeIframeAPIReady = () => {
+            apiReady = true;
+            initPlayer();
+        };
+    }
+
+    // Try to initialize when container becomes available
+    $: if (container && apiReady && !player) {
+        initPlayer();
+    }
+
+    function initPlayer() {
+        if (!container || player) return;
+        if (!window.YT || !window.YT.Player) return;
+
+        player = new window.YT.Player(container, {
+            height: '100%',
+            width: '100%',
+            videoId: videoId || '',
+            playerVars: {
+                autoplay: 0,
+                controls: 1,
+                disablekb: 0,
+                fs: 1,
+                modestbranding: 1,
+                rel: 0,
+                playsinline: 1,
+                origin: window.location.origin
+            },
+            events: {
+                onReady: onPlayerReady,
+                onStateChange: onPlayerStateChange,
+                onError: onPlayerError
+            }
+        });
+    }
+
+    function onPlayerReady(event) {
+        playerReady = true;
+        dispatch('ready');
+
+        // Start sync check interval
+        if (syncCheckInterval) clearInterval(syncCheckInterval);
+        syncCheckInterval = setInterval(checkAndSync, SYNC_CHECK_INTERVAL);
+    }
+
+    function onPlayerStateChange(event) {
+        const state = event.data;
+
+        // YT.PlayerState: UNSTARTED (-1), ENDED (0), PLAYING (1), PAUSED (2), BUFFERING (3), CUED (5)
+        // Always handle ENDED state - crucial for playlist advancement
+        if (state === window.YT.PlayerState.ENDED) {
+            dispatch('ended');
+            return;
+        }
+
+        // For other states, respect ignoreStateChange flag
+        if (ignoreStateChange) return;
+
+        if (state === window.YT.PlayerState.PLAYING) {
+            dispatch('play', { time: player.getCurrentTime() });
+            // If user clicked play and has control, notify server
+            if ($canControl) {
+                watchSync.play();
+            }
+
+            // Report duration when video starts playing (duration is now available)
+            // Only report if we haven't already for this playlist item
+            const storeState = $watchSync;
+            const playlistItemId = storeState.currentVideo?.id;
+            const storedDuration = storeState.currentVideo?.durationSeconds || 0;
+
+            if (playlistItemId &&
+                playlistItemId !== durationReportedForItemId &&
+                storedDuration === 0) {
+                const playerDuration = player.getDuration();
+                if (playerDuration > 0) {
+                    console.log(`Reporting duration for playlist item ${playlistItemId}: ${playerDuration}s`);
+                    watchSync.reportDuration(playlistItemId, playerDuration);
+                    durationReportedForItemId = playlistItemId;
+                }
+            }
+        } else if (state === window.YT.PlayerState.PAUSED) {
+            dispatch('pause', { time: player.getCurrentTime() });
+            // If user clicked pause and has control, notify server
+            if ($canControl) {
+                watchSync.pause();
+            }
+        }
+    }
+
+    function onPlayerError(event) {
+        console.error('YouTube player error:', event.data);
+        dispatch('error', { code: event.data });
+    }
+
+    function checkAndSync(force = false) {
+        if (!playerReady || !player) return;
+
+        const storeState = $watchSync;
+        if (!storeState.currentVideo) return;
+
+        // Only sync if we have server time
+        if (!storeState.serverTime) return;
+
+        // Rate limit sync checks (unless forced)
+        const now = Date.now();
+        if (!force && (now - lastSyncCheck) < MIN_SYNC_INTERVAL) {
+            return;
+        }
+        lastSyncCheck = now;
+
+        const playerState = player.getPlayerState();
+        const isPlayerPlaying = playerState === window.YT.PlayerState.PLAYING;
+        const isBuffering = playerState === window.YT.PlayerState.BUFFERING;
+        const shouldBePlaying = storeState.playbackState === 'playing';
+        const hasVideoEnded = playerState === window.YT.PlayerState.ENDED;
+
+        // During lead-in period, let video buffer without seeking
+        // Server sends leadIn=true for 3 seconds after play starts
+        if (storeState.leadIn) {
+            // During lead-in, just ensure video is loading/buffering
+            // Don't seek or sync position - wait for lead-in to complete
+            if (shouldBePlaying && !isPlayerPlaying && !isBuffering && !hasVideoEnded) {
+                ignoreStateChange = true;
+                player.playVideo();
+                setTimeout(() => { ignoreStateChange = false; }, 500);
+            }
+            return;
+        }
+
+        const expectedTime = watchSync.getExpectedTime();
+        const currentTime = player.getCurrentTime();
+        const drift = Math.abs(currentTime - expectedTime);
+
+        // Check if we need to sync (tight 2-second threshold like CyTube)
+        if (drift > DRIFT_THRESHOLD) {
+            if ($canControl) {
+                // Controller has seeked manually - update server with their position
+                // Debounce to prevent spamming server while waiting for response
+                const now = Date.now();
+                if (now - lastControllerSeekTime > CONTROLLER_SEEK_DEBOUNCE) {
+                    console.log(`Controller seek detected: drift=${drift.toFixed(2)}s, updating server to ${currentTime.toFixed(2)}s`);
+                    watchSync.seek(currentTime);
+                    lastControllerSeekTime = now;
+                }
+            } else {
+                // Non-controller - sync back to server time
+                console.log(`Sync drift detected: ${drift.toFixed(2)}s, seeking to ${expectedTime.toFixed(2)}s`);
+                ignoreStateChange = true;
+                player.seekTo(expectedTime, true);
+                setTimeout(() => { ignoreStateChange = false; }, 500);
+            }
+        }
+
+        // Sync play/pause state
+        // Don't try to restart a video that has naturally ended - wait for skip/next
+        if (shouldBePlaying && !isPlayerPlaying && !isBuffering && !hasVideoEnded) {
+            ignoreStateChange = true;
+            player.playVideo();
+            setTimeout(() => { ignoreStateChange = false; }, 500);
+        } else if (!shouldBePlaying && isPlayerPlaying) {
+            ignoreStateChange = true;
+            player.pauseVideo();
+            setTimeout(() => { ignoreStateChange = false; }, 500);
+        }
+    }
+
+    // React to video changes from the store - track by playlist item ID, not just YouTube video ID
+    // This handles the case where the same YouTube video appears multiple times in the playlist
+    $: if (playerReady && $watchSync.currentVideo?.id !== currentPlaylistItemId) {
+        currentPlaylistItemId = $watchSync.currentVideo?.id;
+        durationReportedForItemId = null; // Reset so we report duration for new video
+        const newVideoId = $watchSync.currentVideo?.youtubeVideoId;
+        if (newVideoId && player) {
+            videoId = newVideoId;
+            ignoreStateChange = true;
+            // Reset sync timing when video changes to avoid immediate re-sync
+            lastSyncCheck = Date.now();
+            lastSyncTime = 0;
+            player.loadVideoById({
+                videoId: newVideoId,
+                startSeconds: $watchSync.currentTime || 0
+            });
+            setTimeout(() => { ignoreStateChange = false; }, 1000);
+        }
+    }
+
+    // React to state changes from the store
+    $: if (playerReady && player && $watchSync.serverTime > lastSyncTime) {
+        lastSyncTime = $watchSync.serverTime;
+        checkAndSync();
+    }
+
+    // Handle window event for state changes from other users
+    function handleStateChange(event) {
+        if (!playerReady || !player) return;
+
+        const { event: action, currentTime, triggeredBy } = event.detail;
+
+        ignoreStateChange = true;
+
+        if (action === 'play') {
+            player.playVideo();
+            // Force sync after state change from another user
+            setTimeout(() => checkAndSync(true), 1000);
+        } else if (action === 'pause') {
+            player.pauseVideo();
+        } else if (action === 'seek' && currentTime !== undefined) {
+            player.seekTo(currentTime, true);
+        } else if (action === 'skip' || action === 'video_changed') {
+            // Video change will be handled by the reactive statement above
+            setTimeout(() => checkAndSync(true), 1000);
+        }
+
+        setTimeout(() => { ignoreStateChange = false; }, 1000);
+    }
+
+    // Public methods for external control
+    export function seekTo(time) {
+        if (playerReady && player) {
+            ignoreStateChange = true;
+            player.seekTo(time, true);
+            setTimeout(() => { ignoreStateChange = false; }, 500);
+        }
+    }
+
+    export function getCurrentTime() {
+        return playerReady && player ? player.getCurrentTime() : 0;
+    }
+
+    export function getDuration() {
+        return playerReady && player ? player.getDuration() : 0;
+    }
+
+    onMount(() => {
+        loadYouTubeAPI();
+
+        if (browser) {
+            window.addEventListener('watch-state-change', handleStateChange);
+        }
+    });
+
+    onDestroy(() => {
+        if (syncCheckInterval) {
+            clearInterval(syncCheckInterval);
+        }
+
+        if (browser) {
+            window.removeEventListener('watch-state-change', handleStateChange);
+        }
+
+        if (player) {
+            player.destroy();
+            player = null;
+        }
+    });
+</script>
+
+<style>
+    .youtube-player-container {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #000;
+        border-radius: 8px;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .youtube-player-container :global(iframe) {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    .no-video {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: var(--gray);
+        gap: 1rem;
+    }
+
+    .no-video svg {
+        width: 64px;
+        height: 64px;
+        opacity: 0.5;
+    }
+
+    .offline-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+</style>
+
+<div class="youtube-player-container">
+    {#if videoId || $watchSync.currentVideo}
+        <div bind:this={container}></div>
+    {:else if offlineImageUrl}
+        <img src={offlineImageUrl} alt="No video playing" class="offline-image" />
+    {:else}
+        <div class="no-video">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+            </svg>
+            <span>No video playing</span>
+            <span style="font-size: 0.85rem;">Add a video to the playlist to start watching</span>
+        </div>
+    {/if}
+</div>
diff --git a/frontend/src/lib/fingerprint.js b/frontend/src/lib/fingerprint.js
new file mode 100644
index 0000000..411fd2e
--- /dev/null
+++ b/frontend/src/lib/fingerprint.js
@@ -0,0 +1,63 @@
+// Guest-only fingerprinting module
+// Only guests are fingerprinted - registered users are NOT fingerprinted for privacy
+import { browser } from '$app/environment';
+
+let cachedFingerprint = null;
+let fingerprintPromise = null;
+
+export async function getGuestFingerprint() {
+    if (!browser) return null;
+
+    // Return cached fingerprint if available
+    if (cachedFingerprint) return cachedFingerprint;
+
+    // Return existing promise if fingerprint is being generated
+    if (fingerprintPromise) return fingerprintPromise;
+
+    fingerprintPromise = generateFingerprint();
+    cachedFingerprint = await fingerprintPromise;
+    fingerprintPromise = null;
+
+    return cachedFingerprint;
+}
+
+async function generateFingerprint() {
+    try {
+        const FingerprintJS = await import('@fingerprintjs/fingerprintjs');
+        const fp = await FingerprintJS.load();
+        const result = await fp.get();
+        return result.visitorId;
+    } catch (error) {
+        console.error('Failed to generate fingerprint:', error);
+        // Fallback: generate a simple fingerprint from available data
+        return generateFallbackFingerprint();
+    }
+}
+
+function generateFallbackFingerprint() {
+    // Fallback fingerprint using basic browser data
+    const data = [
+        navigator.userAgent,
+        navigator.language,
+        screen.width + 'x' + screen.height,
+        screen.colorDepth,
+        new Date().getTimezoneOffset(),
+        navigator.hardwareConcurrency || 0,
+        navigator.deviceMemory || 0
+    ].join('|');
+
+    // Simple hash function
+    let hash = 0;
+    for (let i = 0; i < data.length; i++) {
+        const char = data.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash;
+    }
+    return 'fallback_' + Math.abs(hash).toString(36);
+}
+
+// Clear cached fingerprint (useful for testing)
+export function clearCachedFingerprint() {
+    cachedFingerprint = null;
+    fingerprintPromise = null;
+}
diff --git a/frontend/src/lib/pgp.js b/frontend/src/lib/pgp.js
index 2b35eb2..ae0e965 100644
--- a/frontend/src/lib/pgp.js
+++ b/frontend/src/lib/pgp.js
@@ -4,6 +4,12 @@ const DB_NAME = 'pgp_storage';
 const DB_VERSION = 1;
 const STORE_NAME = 'encrypted_keys';
 
+// Rate limiting for unlock attempts
+let unlockAttempts = 0;
+let lockoutUntil = null;
+const MAX_ATTEMPTS = 5;
+const LOCKOUT_DURATION = 30 * 60 * 1000; // 30 minutes
+
 // Initialize IndexedDB
 async function initDB() {
     return new Promise((resolve, reject) => {
@@ -48,21 +54,23 @@ async function deriveKey(passphrase, salt) {
 
 // Validate passphrase strength
 export function validatePassphrase(passphrase) {
-    if (!passphrase || passphrase.length < 12) {
-        return 'Passphrase must be at least 12 characters';
+    if (!passphrase || passphrase.length < 16) {
+        return 'Passphrase must be at least 16 characters';
     }
-    
+
     // Check for complexity
     const hasUpper = /[A-Z]/.test(passphrase);
     const hasLower = /[a-z]/.test(passphrase);
     const hasNumber = /[0-9]/.test(passphrase);
-    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(passphrase);
-    
+    const hasSpecial = /[!@#$%^&*(),.?":{}|<>\-_=+\[\]\\;'`~]/.test(passphrase);
+
     const complexity = [hasUpper, hasLower, hasNumber, hasSpecial].filter(Boolean).length;
-    if (complexity < 3) {
-        return 'Passphrase must contain at least 3 of: uppercase, lowercase, numbers, special characters';
+
+    // Require all 4 types, OR 20+ characters with 3 types
+    if (complexity < 4 && !(passphrase.length >= 20 && complexity >= 3)) {
+        return 'Passphrase must contain uppercase, lowercase, numbers, AND special characters (or be 20+ chars with 3 types)';
     }
-    
+
     return null; // Valid
 }
 
@@ -165,34 +173,40 @@ export async function unlockPrivateKey(passphrase) {
     if (typeof window === 'undefined') {
         throw new Error('Storage operations can only be performed in the browser');
     }
-    
+
+    // Check lockout
+    if (lockoutUntil && Date.now() < lockoutUntil) {
+        const remaining = Math.ceil((lockoutUntil - Date.now()) / 60000);
+        throw new Error(`Too many failed attempts. Try again in ${remaining} minute${remaining !== 1 ? 's' : ''}.`);
+    }
+
     if (!passphrase) {
         throw new Error('Passphrase required');
     }
-    
+
     try {
         const db = await initDB();
         const transaction = db.transaction([STORE_NAME], 'readonly');
         const store = transaction.objectStore(STORE_NAME);
-        
+
         const data = await new Promise((resolve, reject) => {
             const request = store.get('primary_key');
             request.onsuccess = () => resolve(request.result);
             request.onerror = () => reject(request.error);
         });
-        
+
         if (!data) {
             throw new Error('No encrypted key found');
         }
-        
+
         // Reconstruct typed arrays
         const salt = new Uint8Array(data.salt);
         const iv = new Uint8Array(data.iv);
         const encrypted = new Uint8Array(data.encrypted);
-        
+
         // Derive decryption key
         const key = await deriveKey(passphrase, salt);
-        
+
         // Decrypt
         const decrypted = await crypto.subtle.decrypt(
             {
@@ -202,12 +216,25 @@ export async function unlockPrivateKey(passphrase) {
             key,
             encrypted
         );
-        
+
+        // Success - reset attempts
+        unlockAttempts = 0;
+        lockoutUntil = null;
+
         const dec = new TextDecoder();
         return dec.decode(decrypted);
     } catch (error) {
+        // Track failed attempts
+        unlockAttempts++;
+        if (unlockAttempts >= MAX_ATTEMPTS) {
+            lockoutUntil = Date.now() + LOCKOUT_DURATION;
+            unlockAttempts = 0;
+            console.error('Too many failed unlock attempts. Locked out for 30 minutes.');
+            throw new Error('Too many failed attempts. Locked out for 30 minutes.');
+        }
+
         console.error('Failed to unlock private key:', error);
-        throw new Error('Failed to unlock private key. Check your passphrase.');
+        throw new Error(`Failed to unlock private key. Check your passphrase. (${MAX_ATTEMPTS - unlockAttempts} attempts remaining)`);
     }
 }
 
diff --git a/frontend/src/lib/stores/audioPlaylist.js b/frontend/src/lib/stores/audioPlaylist.js
new file mode 100644
index 0000000..5049cea
--- /dev/null
+++ b/frontend/src/lib/stores/audioPlaylist.js
@@ -0,0 +1,515 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'audioPlaylist';
+
+// Simple debounce utility
+function debounce(fn, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn(...args), delay);
+    };
+}
+
+const defaultState = {
+    enabled: false,           // Player visibility
+    queue: [],                // Array of {id, title, username, filePath, thumbnailPath, durationSeconds, realmName}
+    currentIndex: 0,
+    nowPlaying: null,         // Track playing outside of queue (for instant play without adding to queue)
+    isPlaying: false,
+    shouldPlay: false,        // Signal to start playback (used to trigger play after load)
+    volume: 1.0,
+    muted: false,
+    shuffle: false,
+    repeat: 'none',           // 'none', 'one', 'all'
+    currentTime: 0,
+    duration: 0,
+    minimized: false          // Mini player mode
+};
+
+function loadState() {
+    if (!browser) return defaultState;
+
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Reset playback state on load (don't auto-resume)
+            return {
+                ...defaultState,
+                ...parsed,
+                nowPlaying: null,
+                isPlaying: false,
+                shouldPlay: false,
+                currentTime: 0,
+                duration: 0
+            };
+        }
+    } catch (e) {
+        console.error('Failed to load audio playlist:', e);
+    }
+
+    return defaultState;
+}
+
+function saveState(state) {
+    if (!browser) return;
+
+    try {
+        // Only persist certain fields
+        const toSave = {
+            enabled: state.enabled,
+            queue: state.queue,
+            currentIndex: state.currentIndex,
+            volume: state.volume,
+            muted: state.muted,
+            shuffle: state.shuffle,
+            repeat: state.repeat,
+            minimized: state.minimized
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+    } catch (e) {
+        console.error('Failed to save audio playlist:', e);
+    }
+}
+
+// Debounced version to prevent excessive writes during rapid state changes
+const debouncedSaveState = debounce(saveState, 300);
+
+function createAudioPlaylistStore() {
+    const { subscribe, set, update } = writable(loadState());
+
+    // Helper to update and save (debounced to reduce localStorage writes)
+    const updateAndSave = (fn) => {
+        update(state => {
+            const newState = fn(state);
+            debouncedSaveState(newState);
+            return newState;
+        });
+    };
+
+    return {
+        subscribe,
+
+        // Add a track to the end of the queue
+        addTrack(track) {
+            updateAndSave(state => {
+                const exists = state.queue.some(t => t.id === track.id);
+                if (exists) return state;
+
+                return {
+                    ...state,
+                    enabled: true,
+                    queue: [...state.queue, track]
+                };
+            });
+        },
+
+        // Play track immediately without adding to queue (sets nowPlaying)
+        playTrack(track) {
+            update(state => ({
+                ...state,
+                enabled: true,
+                nowPlaying: track,
+                isPlaying: false,  // Will be set true when audio loads
+                shouldPlay: true,  // Signal to start playback
+                currentTime: 0,
+                duration: 0
+            }));
+        },
+
+        // Add track to queue AND play it (for queue-based playback)
+        playFromQueue(track) {
+            updateAndSave(state => {
+                const existingIndex = state.queue.findIndex(t => t.id === track.id);
+                if (existingIndex >= 0) {
+                    // Track exists in queue, switch to it and clear nowPlaying
+                    return {
+                        ...state,
+                        enabled: true,
+                        nowPlaying: null,
+                        currentIndex: existingIndex,
+                        isPlaying: false,
+                        shouldPlay: true,
+                        currentTime: 0
+                    };
+                }
+
+                // Add track to queue and play it
+                return {
+                    ...state,
+                    enabled: true,
+                    nowPlaying: null,
+                    queue: [...state.queue, track],
+                    currentIndex: state.queue.length,
+                    isPlaying: false,
+                    shouldPlay: true,
+                    currentTime: 0
+                };
+            });
+        },
+
+        // Add multiple tracks
+        addTracks(tracks) {
+            updateAndSave(state => {
+                const newTracks = tracks.filter(t => !state.queue.some(q => q.id === t.id));
+                if (newTracks.length === 0) return state;
+
+                return {
+                    ...state,
+                    enabled: true,
+                    queue: [...state.queue, ...newTracks]
+                };
+            });
+        },
+
+        // Remove a track from the queue
+        removeTrack(trackId) {
+            updateAndSave(state => {
+                const index = state.queue.findIndex(t => t.id === trackId);
+                if (index === -1) return state;
+
+                const newQueue = state.queue.filter(t => t.id !== trackId);
+                let newIndex = state.currentIndex;
+                let shouldTriggerNext = false;
+
+                // Adjust current index if needed
+                if (index < state.currentIndex) {
+                    newIndex = state.currentIndex - 1;
+                } else if (index === state.currentIndex) {
+                    // Currently playing track was removed
+                    if (newQueue.length === 0) {
+                        return { ...defaultState };
+                    }
+                    newIndex = Math.min(state.currentIndex, newQueue.length - 1);
+                    shouldTriggerNext = true;
+                }
+
+                return {
+                    ...state,
+                    queue: newQueue,
+                    currentIndex: newIndex,
+                    enabled: newQueue.length > 0,
+                    // Reset playback state and trigger new track to load
+                    isPlaying: shouldTriggerNext ? false : state.isPlaying,
+                    shouldPlay: shouldTriggerNext,
+                    currentTime: shouldTriggerNext ? 0 : state.currentTime
+                };
+            });
+        },
+
+        // Clear the entire queue (but keep currently playing track as nowPlaying)
+        clearQueue() {
+            updateAndSave(state => {
+                // If something is playing, move it to nowPlaying so it keeps playing
+                const currentlyPlaying = state.isPlaying ?
+                    (state.nowPlaying || state.queue[state.currentIndex]) : null;
+
+                if (currentlyPlaying) {
+                    return {
+                        ...defaultState,
+                        enabled: true,
+                        nowPlaying: currentlyPlaying,
+                        isPlaying: state.isPlaying,
+                        currentTime: state.currentTime,
+                        duration: state.duration,
+                        volume: state.volume,
+                        muted: state.muted
+                    };
+                }
+
+                return { ...defaultState };
+            });
+        },
+
+        // Play/pause toggle
+        togglePlay() {
+            update(state => ({
+                ...state,
+                isPlaying: !state.isPlaying
+            }));
+        },
+
+        // Set playing state
+        setPlaying(playing) {
+            update(state => ({
+                ...state,
+                isPlaying: playing
+            }));
+        },
+
+        // Go to next track
+        next() {
+            updateAndSave(state => {
+                // If nowPlaying, clear it and go to queue (or stop)
+                if (state.nowPlaying) {
+                    if (state.queue.length > 0) {
+                        return {
+                            ...state,
+                            nowPlaying: null,
+                            currentIndex: 0,
+                            currentTime: 0,
+                            isPlaying: false,
+                            shouldPlay: true
+                        };
+                    }
+                    return { ...state, nowPlaying: null, isPlaying: false, shouldPlay: false };
+                }
+
+                if (state.queue.length === 0) return state;
+
+                let nextIndex;
+                if (state.shuffle) {
+                    // Random next (avoid current if possible)
+                    if (state.queue.length === 1) {
+                        nextIndex = 0;
+                    } else {
+                        do {
+                            nextIndex = Math.floor(Math.random() * state.queue.length);
+                        } while (nextIndex === state.currentIndex);
+                    }
+                } else {
+                    nextIndex = state.currentIndex + 1;
+                    if (nextIndex >= state.queue.length) {
+                        if (state.repeat === 'all') {
+                            nextIndex = 0;
+                        } else {
+                            // Stop at end
+                            return { ...state, isPlaying: false, shouldPlay: false };
+                        }
+                    }
+                }
+
+                return {
+                    ...state,
+                    currentIndex: nextIndex,
+                    currentTime: 0,
+                    isPlaying: false,
+                    shouldPlay: true
+                };
+            });
+        },
+
+        // Go to previous track
+        previous() {
+            updateAndSave(state => {
+                // If more than 3 seconds in, restart current track
+                if (state.currentTime > 3) {
+                    return { ...state, currentTime: 0 };
+                }
+
+                // If nowPlaying, restart it or go to end of queue
+                if (state.nowPlaying) {
+                    if (state.queue.length > 0) {
+                        return {
+                            ...state,
+                            nowPlaying: null,
+                            currentIndex: state.queue.length - 1,
+                            currentTime: 0,
+                            isPlaying: false,
+                            shouldPlay: true
+                        };
+                    }
+                    return { ...state, currentTime: 0 };
+                }
+
+                if (state.queue.length === 0) return state;
+
+                let prevIndex;
+                if (state.shuffle) {
+                    // Random previous
+                    if (state.queue.length === 1) {
+                        prevIndex = 0;
+                    } else {
+                        do {
+                            prevIndex = Math.floor(Math.random() * state.queue.length);
+                        } while (prevIndex === state.currentIndex);
+                    }
+                } else {
+                    prevIndex = state.currentIndex - 1;
+                    if (prevIndex < 0) {
+                        if (state.repeat === 'all') {
+                            prevIndex = state.queue.length - 1;
+                        } else {
+                            prevIndex = 0;
+                        }
+                    }
+                }
+
+                return {
+                    ...state,
+                    currentIndex: prevIndex,
+                    currentTime: 0,
+                    isPlaying: false,
+                    shouldPlay: true
+                };
+            });
+        },
+
+        // Jump to specific track in queue
+        goToTrack(index) {
+            updateAndSave(state => {
+                if (index < 0 || index >= state.queue.length) return state;
+
+                return {
+                    ...state,
+                    nowPlaying: null,  // Clear nowPlaying when jumping to queue
+                    currentIndex: index,
+                    currentTime: 0,
+                    isPlaying: false,
+                    shouldPlay: true
+                };
+            });
+        },
+
+        // Set volume (0-1)
+        setVolume(volume) {
+            updateAndSave(state => ({
+                ...state,
+                volume: Math.max(0, Math.min(1, volume)),
+                muted: volume === 0 ? true : state.muted
+            }));
+        },
+
+        // Toggle mute
+        toggleMute() {
+            updateAndSave(state => ({
+                ...state,
+                muted: !state.muted
+            }));
+        },
+
+        // Toggle shuffle
+        toggleShuffle() {
+            updateAndSave(state => ({
+                ...state,
+                shuffle: !state.shuffle
+            }));
+        },
+
+        // Cycle repeat mode
+        cycleRepeat() {
+            updateAndSave(state => {
+                const modes = ['none', 'all', 'one'];
+                const currentIdx = modes.indexOf(state.repeat);
+                const nextMode = modes[(currentIdx + 1) % modes.length];
+                return { ...state, repeat: nextMode };
+            });
+        },
+
+        // Update current time (from audio element)
+        updateTime(currentTime, duration) {
+            update(state => ({
+                ...state,
+                currentTime,
+                duration
+            }));
+        },
+
+        // Seek to time
+        seek(time) {
+            update(state => ({
+                ...state,
+                currentTime: time
+            }));
+        },
+
+        // Toggle minimized state
+        toggleMinimized() {
+            updateAndSave(state => ({
+                ...state,
+                minimized: !state.minimized
+            }));
+        },
+
+        // Show player
+        show() {
+            updateAndSave(state => ({
+                ...state,
+                enabled: true
+            }));
+        },
+
+        // Hide player
+        hide() {
+            updateAndSave(state => ({
+                ...state,
+                enabled: false,
+                isPlaying: false
+            }));
+        },
+
+        // Move track in queue (reorder)
+        moveTrack(fromIndex, toIndex) {
+            updateAndSave(state => {
+                if (fromIndex === toIndex) return state;
+                if (fromIndex < 0 || fromIndex >= state.queue.length) return state;
+                if (toIndex < 0 || toIndex >= state.queue.length) return state;
+
+                const newQueue = [...state.queue];
+                const [removed] = newQueue.splice(fromIndex, 1);
+                newQueue.splice(toIndex, 0, removed);
+
+                // Adjust current index
+                let newIndex = state.currentIndex;
+                if (state.currentIndex === fromIndex) {
+                    newIndex = toIndex;
+                } else if (fromIndex < state.currentIndex && toIndex >= state.currentIndex) {
+                    newIndex = state.currentIndex - 1;
+                } else if (fromIndex > state.currentIndex && toIndex <= state.currentIndex) {
+                    newIndex = state.currentIndex + 1;
+                }
+
+                return {
+                    ...state,
+                    queue: newQueue,
+                    currentIndex: newIndex
+                };
+            });
+        },
+
+        // Called when audio element starts playing (confirms playback started)
+        confirmPlaying() {
+            update(state => ({
+                ...state,
+                isPlaying: true,
+                shouldPlay: false
+            }));
+        },
+
+        // Clear nowPlaying (when track ends and not repeating)
+        clearNowPlaying() {
+            update(state => ({
+                ...state,
+                nowPlaying: null
+            }));
+        }
+    };
+}
+
+export const audioPlaylist = createAudioPlaylistStore();
+
+// Derived store for current track (nowPlaying takes precedence over queue)
+export const currentTrack = derived(audioPlaylist, $playlist => {
+    // If there's a nowPlaying track, that's the current track
+    if ($playlist.nowPlaying) return $playlist.nowPlaying;
+    // Otherwise use the queue
+    if ($playlist.queue.length === 0) return null;
+    if ($playlist.currentIndex < 0 || $playlist.currentIndex >= $playlist.queue.length) return null;
+    return $playlist.queue[$playlist.currentIndex];
+});
+
+// Derived store for whether there's a next track
+export const hasNext = derived(audioPlaylist, $playlist => {
+    if ($playlist.queue.length === 0) return false;
+    if ($playlist.repeat === 'all' || $playlist.shuffle) return true;
+    return $playlist.currentIndex < $playlist.queue.length - 1;
+});
+
+// Derived store for whether there's a previous track
+export const hasPrevious = derived(audioPlaylist, $playlist => {
+    if ($playlist.queue.length === 0) return false;
+    if ($playlist.repeat === 'all' || $playlist.shuffle) return true;
+    return $playlist.currentIndex > 0 || $playlist.currentTime > 3;
+});
diff --git a/frontend/src/lib/stores/auth.js b/frontend/src/lib/stores/auth.js
index 622edb1..617389b 100644
--- a/frontend/src/lib/stores/auth.js
+++ b/frontend/src/lib/stores/auth.js
@@ -39,16 +39,17 @@ function createAuthStore() {
                 credentials: 'include', // Receive httpOnly cookie
                 body: JSON.stringify(credentials)
             });
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
-                // Server sets httpOnly cookie, we just store user data
+                // Server sets httpOnly cookie for HTTP requests
+                // Token is NOT stored in localStorage to prevent XSS attacks
                 set({ user: data.user, loading: false });
                 goto('/');
                 return { success: true };
             }
-            
+
             return { success: false, error: data.error || 'Invalid credentials' };
         },
         
@@ -59,16 +60,17 @@ function createAuthStore() {
                 credentials: 'include', // Receive httpOnly cookie
                 body: JSON.stringify({ username, signature, challenge })
             });
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
-                // Server sets httpOnly cookie, we just store user data
+                // Server sets httpOnly cookie for HTTP requests
+                // Token is NOT stored in localStorage to prevent XSS attacks
                 set({ user: data.user, loading: false });
                 goto('/');
                 return { success: true };
             }
-            
+
             return { success: false, error: data.error || 'Invalid signature' };
         },
         
@@ -122,14 +124,25 @@ function createAuthStore() {
                 user: userData
             }));
         },
-        
+
+        getUser() {
+            let user = null;
+            subscribe(state => { user = state.user; })();
+            return user;
+        },
+
         async logout() {
             // Call logout endpoint to clear httpOnly cookie
             await fetch('/api/auth/logout', {
                 method: 'POST',
                 credentials: 'include'
             });
-            
+
+            // Clear token from localStorage
+            if (browser) {
+                localStorage.removeItem('token');
+            }
+
             set({ user: null, loading: false });
             goto('/login');
         }
@@ -148,11 +161,46 @@ export const isAdmin = derived(
     $auth => $auth.user?.isAdmin || false
 );
 
+export const isModerator = derived(
+    auth,
+    $auth => $auth.user?.isModerator || false
+);
+
 export const isStreamer = derived(
     auth,
     $auth => $auth.user?.isStreamer || false
 );
 
+export const isRestreamer = derived(
+    auth,
+    $auth => $auth.user?.isRestreamer || false
+);
+
+export const isBot = derived(
+    auth,
+    $auth => $auth.user?.isBot || false
+);
+
+export const isStickerCreator = derived(
+    auth,
+    $auth => $auth.user?.isStickerCreator || false
+);
+
+export const isUploader = derived(
+    auth,
+    $auth => $auth.user?.isUploader || false
+);
+
+export const isTexter = derived(
+    auth,
+    $auth => $auth.user?.isTexter || false
+);
+
+export const isWatchCreator = derived(
+    auth,
+    $auth => $auth.user?.isWatchCreator || false
+);
+
 export const userColor = derived(
     auth,
     $auth => $auth.user?.colorCode || '#561D5E'
diff --git a/frontend/src/lib/stores/chatLayout.js b/frontend/src/lib/stores/chatLayout.js
new file mode 100644
index 0000000..8a5a013
--- /dev/null
+++ b/frontend/src/lib/stores/chatLayout.js
@@ -0,0 +1,105 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'chatLayoutPrefs';
+
+const defaultPrefs = {
+    position: 'right',      // 'left' | 'right' - X axis
+    inverted: false,        // true = input on top, false = input on bottom
+    messagesFromTop: false, // true = messages stack from top, false = from bottom
+    theaterMode: false      // transparent overlay mode
+};
+
+function loadPrefs() {
+    if (!browser) return defaultPrefs;
+
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            return { ...defaultPrefs, ...JSON.parse(stored) };
+        }
+    } catch (e) {
+        console.error('Failed to load chat layout prefs:', e);
+    }
+
+    return defaultPrefs;
+}
+
+function createChatLayoutStore() {
+    const { subscribe, set, update } = writable(loadPrefs());
+
+    return {
+        subscribe,
+
+        togglePosition() {
+            update(prefs => {
+                const newPrefs = {
+                    ...prefs,
+                    position: prefs.position === 'right' ? 'left' : 'right'
+                };
+                if (browser) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPrefs));
+                }
+                return newPrefs;
+            });
+        },
+
+        toggleInverted() {
+            update(prefs => {
+                const newPrefs = {
+                    ...prefs,
+                    inverted: !prefs.inverted
+                };
+                if (browser) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPrefs));
+                }
+                return newPrefs;
+            });
+        },
+
+        toggleTheaterMode() {
+            update(prefs => {
+                const newPrefs = {
+                    ...prefs,
+                    theaterMode: !prefs.theaterMode
+                };
+                if (browser) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPrefs));
+                }
+                return newPrefs;
+            });
+        },
+
+        toggleMessagesFromTop() {
+            update(prefs => {
+                const newPrefs = {
+                    ...prefs,
+                    messagesFromTop: !prefs.messagesFromTop
+                };
+                if (browser) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPrefs));
+                }
+                return newPrefs;
+            });
+        },
+
+        setPosition(position) {
+            update(prefs => {
+                const newPrefs = { ...prefs, position };
+                if (browser) {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPrefs));
+                }
+                return newPrefs;
+            });
+        },
+
+        reset() {
+            set(defaultPrefs);
+            if (browser) {
+                localStorage.removeItem(STORAGE_KEY);
+            }
+        }
+    };
+}
+
+export const chatLayout = createChatLayoutStore();
diff --git a/frontend/src/lib/stores/ebookReader.js b/frontend/src/lib/stores/ebookReader.js
new file mode 100644
index 0000000..6ec5376
--- /dev/null
+++ b/frontend/src/lib/stores/ebookReader.js
@@ -0,0 +1,205 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'ebookReader';
+const POSITIONS_KEY = 'ebookPositions';
+
+const defaultState = {
+    enabled: false,           // Panel visibility
+    currentBook: null,        // { id, title, filePath, coverPath, chapterCount, username, realmName }
+    progress: 0,              // Reading progress percentage (0-100)
+    showToc: false,           // TOC sidebar visibility
+    minimized: false          // Minimized state
+};
+
+// Store reading positions separately (per ebook)
+function loadPositions() {
+    if (!browser) return {};
+    try {
+        const stored = localStorage.getItem(POSITIONS_KEY);
+        return stored ? JSON.parse(stored) : {};
+    } catch {
+        return {};
+    }
+}
+
+function persistPosition(ebookId, cfi) {
+    if (!browser || !ebookId) return;
+    try {
+        const positions = loadPositions();
+        positions[ebookId] = cfi;
+        localStorage.setItem(POSITIONS_KEY, JSON.stringify(positions));
+    } catch (e) {
+        console.error('Failed to save ebook position:', e);
+    }
+}
+
+function getPosition(ebookId) {
+    if (!browser || !ebookId) return null;
+    const positions = loadPositions();
+    return positions[ebookId] || null;
+}
+
+function loadState() {
+    if (!browser) return defaultState;
+
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return {
+                ...defaultState,
+                ...parsed,
+                // Don't persist currentBook or showToc
+                currentBook: null,
+                showToc: false
+            };
+        }
+    } catch (e) {
+        console.error('Failed to load ebook reader state:', e);
+    }
+
+    return defaultState;
+}
+
+function saveState(state) {
+    if (!browser) return;
+
+    try {
+        const toSave = {
+            enabled: state.enabled,
+            minimized: state.minimized
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+    } catch (e) {
+        console.error('Failed to save ebook reader state:', e);
+    }
+}
+
+function createEbookReaderStore() {
+    const { subscribe, set, update } = writable(loadState());
+
+    const updateAndSave = (fn) => {
+        update(state => {
+            const newState = fn(state);
+            saveState(newState);
+            return newState;
+        });
+    };
+
+    return {
+        subscribe,
+
+        // Open a book in the reader panel
+        openBook(book) {
+            if (!book?.id || !book?.filePath) {
+                console.error('Invalid book object - missing id or filePath');
+                return;
+            }
+            update(state => ({
+                ...state,
+                enabled: true,
+                currentBook: book,
+                progress: 0,
+                showToc: false,
+                minimized: false
+            }));
+        },
+
+        // Close the reader (optionally save position first)
+        closeBook(cfi = null) {
+            update(state => {
+                // Save position if provided
+                if (cfi && state.currentBook?.id) {
+                    persistPosition(state.currentBook.id, cfi);
+                }
+                return {
+                    ...state,
+                    enabled: false,
+                    currentBook: null,
+                    progress: 0,
+                    showToc: false
+                };
+            });
+        },
+
+        // Toggle panel visibility
+        toggle() {
+            updateAndSave(state => ({
+                ...state,
+                enabled: !state.enabled
+            }));
+        },
+
+        // Show panel
+        show() {
+            updateAndSave(state => ({
+                ...state,
+                enabled: true
+            }));
+        },
+
+        // Hide panel (keep book loaded)
+        hide() {
+            updateAndSave(state => ({
+                ...state,
+                enabled: false
+            }));
+        },
+
+        // Update reading progress
+        setProgress(percent) {
+            update(state => ({
+                ...state,
+                progress: Math.max(0, Math.min(100, percent))
+            }));
+        },
+
+        // Save reading position (CFI)
+        savePosition(cfi) {
+            update(state => {
+                if (state.currentBook?.id && cfi) {
+                    persistPosition(state.currentBook.id, cfi);
+                }
+                return state;
+            });
+        },
+
+        // Get saved position for an ebook
+        getPosition(ebookId) {
+            return getPosition(ebookId);
+        },
+
+        // Toggle TOC sidebar
+        toggleToc() {
+            update(state => ({
+                ...state,
+                showToc: !state.showToc
+            }));
+        },
+
+        // Toggle minimized state
+        toggleMinimized() {
+            updateAndSave(state => ({
+                ...state,
+                minimized: !state.minimized
+            }));
+        },
+
+        // Set minimized state
+        setMinimized(minimized) {
+            updateAndSave(state => ({
+                ...state,
+                minimized
+            }));
+        }
+    };
+}
+
+export const ebookReader = createEbookReaderStore();
+
+// Derived store for whether a book is currently open
+export const hasBook = derived(ebookReader, $reader => $reader.currentBook !== null);
+
+// Derived store for current book info
+export const currentBook = derived(ebookReader, $reader => $reader.currentBook);
diff --git a/frontend/src/lib/stores/gamesOverlay.js b/frontend/src/lib/stores/gamesOverlay.js
new file mode 100644
index 0000000..435707b
--- /dev/null
+++ b/frontend/src/lib/stores/gamesOverlay.js
@@ -0,0 +1,158 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'gamesOverlay';
+
+const defaultState = {
+    enabled: false,           // Overlay visibility
+    matchId: null,            // Current match ID
+    mode: null,               // 'waiting' | 'playing' | 'spectating' | 'finished'
+    minimized: false,         // Minimized to header only
+    gameState: null           // Current game state { fen, turn, players, etc. }
+};
+
+function loadState() {
+    if (!browser) return defaultState;
+
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Only persist minimized state - NEVER persist enabled/matchId
+            // This ensures overlay is always closed on page load
+            return {
+                enabled: false,
+                matchId: null,
+                mode: null,
+                gameState: null,
+                minimized: parsed.minimized || false
+            };
+        }
+    } catch (e) {
+        console.error('Failed to load games overlay state:', e);
+    }
+
+    return defaultState;
+}
+
+function saveState(state) {
+    if (!browser) return;
+
+    try {
+        const toSave = {
+            minimized: state.minimized
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+    } catch (e) {
+        console.error('Failed to save games overlay state:', e);
+    }
+}
+
+function createGamesOverlayStore() {
+    const { subscribe, set, update } = writable(loadState());
+
+    const updateAndSave = (fn) => {
+        update(state => {
+            const newState = fn(state);
+            saveState(newState);
+            return newState;
+        });
+    };
+
+    return {
+        subscribe,
+
+        // Open a game in the overlay (as player or spectator)
+        openGame(matchId, mode = 'waiting', gameState = null) {
+            update(state => ({
+                ...state,
+                enabled: true,
+                matchId,
+                mode,
+                gameState,
+                minimized: false
+            }));
+        },
+
+        // Close the game overlay
+        closeGame() {
+            update(state => ({
+                ...state,
+                enabled: false,
+                matchId: null,
+                mode: null,
+                gameState: null
+            }));
+        },
+
+        // Update game state from Nakama match data
+        updateState(gameState) {
+            update(state => ({
+                ...state,
+                gameState: {
+                    ...state.gameState,
+                    ...gameState
+                }
+            }));
+        },
+
+        // Update the mode
+        setMode(mode) {
+            update(state => ({
+                ...state,
+                mode
+            }));
+        },
+
+        // Toggle overlay visibility
+        toggle() {
+            update(state => ({
+                ...state,
+                enabled: !state.enabled
+            }));
+        },
+
+        // Show overlay
+        show() {
+            update(state => ({
+                ...state,
+                enabled: true
+            }));
+        },
+
+        // Hide overlay (keep game state)
+        hide() {
+            update(state => ({
+                ...state,
+                enabled: false
+            }));
+        },
+
+        // Toggle minimized state
+        toggleMinimized() {
+            updateAndSave(state => ({
+                ...state,
+                minimized: !state.minimized
+            }));
+        },
+
+        // Set minimized state
+        setMinimized(minimized) {
+            updateAndSave(state => ({
+                ...state,
+                minimized
+            }));
+        }
+    };
+}
+
+export const gamesOverlay = createGamesOverlayStore();
+
+// Derived store for whether a game is currently open
+export const hasGame = derived(gamesOverlay, $overlay => $overlay.matchId !== null);
+
+// Derived store for current game state
+export const currentGame = derived(gamesOverlay, $overlay => $overlay.gameState);
+
+// Derived store for current mode
+export const gameMode = derived(gamesOverlay, $overlay => $overlay.mode);
diff --git a/frontend/src/lib/stores/nakama.js b/frontend/src/lib/stores/nakama.js
new file mode 100644
index 0000000..a6963cb
--- /dev/null
+++ b/frontend/src/lib/stores/nakama.js
@@ -0,0 +1,500 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// Nakama configuration from environment
+const NAKAMA_SERVER_KEY = import.meta.env.VITE_NAKAMA_SERVER_KEY || 'defaultkey';
+const NAKAMA_HOST = import.meta.env.VITE_NAKAMA_HOST || 'localhost';
+const NAKAMA_PORT = import.meta.env.VITE_NAKAMA_PORT || '80';
+const NAKAMA_USE_SSL = import.meta.env.VITE_NAKAMA_USE_SSL === 'true';
+
+// Polling interval for games lists (ms)
+export const GAMES_POLL_INTERVAL = 30000;
+
+// Op codes for chess game messages
+export const ChessOpCode = {
+    MOVE: 1,
+    GAME_STATE: 2,
+    GAME_OVER: 3,
+    RESIGN: 4,
+    OFFER_DRAW: 5,
+    ACCEPT_DRAW: 6
+};
+
+// Helper to parse RPC response payload (handles both string and object)
+function parseRpcPayload(payload) {
+    if (typeof payload === 'string') {
+        return JSON.parse(payload);
+    }
+    return payload;
+}
+
+function createNakamaStore() {
+    const { subscribe, set, update } = writable({
+        client: null,
+        session: null,
+        socket: null,
+        connected: false,
+        error: null,
+        currentMatch: null
+    });
+
+    let client = null;
+    let session = null;
+    let socket = null;
+    let matchCallbacks = [];
+    let presenceCallbacks = [];
+
+    // Buffer for match events that arrive before any handler is registered
+    // This prevents race conditions where GAME_STATE is sent before the overlay loads
+    let matchEventBuffer = [];
+    const MAX_BUFFER_SIZE = 10;
+
+    return {
+        subscribe,
+
+        async init() {
+            if (!browser) return;
+
+            // If client already exists, don't reinitialize (idempotent)
+            if (client) {
+                return { success: true };
+            }
+
+            try {
+                // Dynamic import of nakama-js
+                const { Client } = await import('@heroiclabs/nakama-js');
+
+                client = new Client(
+                    NAKAMA_SERVER_KEY,
+                    NAKAMA_HOST,
+                    NAKAMA_PORT,
+                    NAKAMA_USE_SSL
+                );
+
+                set({
+                    client,
+                    session: null,
+                    socket: null,
+                    connected: false,
+                    error: null,
+                    currentMatch: null
+                });
+
+                console.log('Nakama client initialized');
+                return { success: true };
+            } catch (e) {
+                console.error('Failed to initialize Nakama client:', e);
+                update(s => ({ ...s, error: e.message }));
+                return { success: false, error: e.message };
+            }
+        },
+
+        async authenticate() {
+            if (!browser || !client) {
+                return { success: false, error: 'Client not initialized' };
+            }
+
+            // If already authenticated with a valid session, return it
+            if (session && !session.isexpired(Date.now() / 1000)) {
+                return { success: true, session };
+            }
+
+            // Fetch JWT token from API instead of localStorage (prevents XSS token theft)
+            let appToken;
+            try {
+                const tokenResp = await fetch('/api/user/token', { credentials: 'include' });
+                if (!tokenResp.ok) {
+                    return { success: false, error: 'Not logged in to main app' };
+                }
+                const tokenData = await tokenResp.json();
+                appToken = tokenData.token;
+            } catch (e) {
+                return { success: false, error: 'Failed to fetch auth token' };
+            }
+
+            if (!appToken) {
+                return { success: false, error: 'Not logged in to main app' };
+            }
+
+            try {
+                // Authenticate with Nakama using custom auth
+                // Pass app JWT as the custom ID - Nakama validates via hook
+                session = await client.authenticateCustom(appToken, true);
+
+                update(s => ({
+                    ...s,
+                    session,
+                    error: null
+                }));
+
+                return { success: true, session };
+
+            } catch (e) {
+                console.error('Nakama authentication failed:', e);
+                update(s => ({
+                    ...s,
+                    session: null,
+                    error: e.message
+                }));
+                return { success: false, error: e.message };
+            }
+        },
+
+        async connectSocket() {
+            if (!browser || !client || !session) {
+                return { success: false, error: 'Not authenticated' };
+            }
+
+            // If socket already connected, return success
+            if (socket) {
+                console.log('[Nakama] connectSocket: Socket already exists, returning early');
+                return { success: true };
+            }
+
+            console.log('[Nakama] connectSocket: Creating new socket...');
+
+            try {
+                socket = client.createSocket(NAKAMA_USE_SSL);
+
+                // Set up event handlers
+                socket.onmatchdata = (matchData) => {
+                    console.log('[Nakama] onmatchdata received, op_code:', matchData.op_code, 'callbacks:', matchCallbacks.length);
+                    if (matchCallbacks.length === 0) {
+                        // Buffer the event if no handlers registered yet
+                        // This handles race conditions where GAME_STATE arrives before overlay loads
+                        if (matchEventBuffer.length < MAX_BUFFER_SIZE) {
+                            matchEventBuffer.push({ type: 'matchdata', data: matchData });
+                            console.log('[Nakama] Buffered match event (no handlers yet):', matchData.op_code, 'buffer size:', matchEventBuffer.length);
+                        }
+                    } else {
+                        console.log('[Nakama] Dispatching to', matchCallbacks.length, 'callbacks');
+                        matchCallbacks.forEach(cb => cb('matchdata', matchData));
+                    }
+                };
+
+                socket.onmatchpresence = (matchPresence) => {
+                    presenceCallbacks.forEach(cb => cb(matchPresence));
+                };
+
+                socket.ondisconnect = () => {
+                    update(s => ({
+                        ...s,
+                        connected: false,
+                        socket: null
+                    }));
+                    matchCallbacks.forEach(cb => cb('disconnect', null));
+                };
+
+                socket.onerror = (error) => {
+                    console.error('Nakama socket error:', error);
+                    update(s => ({ ...s, error: error.message }));
+                };
+
+                // Connect
+                await socket.connect(session, true);
+
+                update(s => ({
+                    ...s,
+                    socket,
+                    connected: true,
+                    error: null
+                }));
+
+                console.log('Nakama socket connected');
+                return { success: true };
+
+            } catch (e) {
+                console.error('Nakama socket connection failed:', e);
+                update(s => ({
+                    ...s,
+                    socket: null,
+                    connected: false,
+                    error: e.message
+                }));
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Create a new chess match
+        async createChessMatch() {
+            if (!client || !session) {
+                return { success: false, error: 'Not authenticated' };
+            }
+
+            try {
+                const response = await client.rpc(
+                    session,
+                    'create_chess_match',
+                    '{}'
+                );
+                const result = parseRpcPayload(response.payload);
+
+                // Check if server returned an error (user already has active challenge)
+                if (result.error) {
+                    return {
+                        success: false,
+                        error: result.error,
+                        existingMatchId: result.existingMatchId
+                    };
+                }
+
+                return { success: true, matchId: result.matchId };
+            } catch (e) {
+                console.error('Failed to create match:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // List active chess matches
+        // status: 'waiting' | 'playing' | 'all'
+        async listChessMatches(limit = 20, status = 'all') {
+            if (!client || !session) {
+                console.warn('listChessMatches: Not authenticated', { client: !!client, session: !!session });
+                return { success: false, error: 'Not authenticated' };
+            }
+
+            try {
+                const response = await client.rpc(
+                    session,
+                    'list_chess_matches',
+                    JSON.stringify({ limit, status })
+                );
+                const result = parseRpcPayload(response.payload);
+                console.log('listChessMatches response:', { status, result });
+                return { success: true, matches: result.matches };
+            } catch (e) {
+                console.error('Failed to list matches:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Join a match
+        async joinMatch(matchId) {
+            console.log('[Nakama] joinMatch called for:', matchId, 'buffer size:', matchEventBuffer.length);
+            if (!socket) {
+                console.error('[Nakama] joinMatch: Socket not connected');
+                return { success: false, error: 'Socket not connected' };
+            }
+
+            try {
+                console.log('[Nakama] joinMatch: Calling socket.joinMatch...');
+                const match = await socket.joinMatch(matchId);
+                console.log('[Nakama] joinMatch: Success, presences:', match.presences?.length, 'buffer size after:', matchEventBuffer.length);
+                update(s => ({ ...s, currentMatch: match }));
+                return { success: true, match };
+            } catch (e) {
+                console.error('[Nakama] joinMatch failed:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Leave current match
+        async leaveMatch(matchId) {
+            if (!socket) {
+                return { success: false, error: 'Socket not connected' };
+            }
+
+            try {
+                await socket.leaveMatch(matchId);
+                matchEventBuffer = []; // Clear buffered events from this match
+                update(s => ({ ...s, currentMatch: null }));
+                return { success: true };
+            } catch (e) {
+                console.error('Failed to leave match:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Send match data (game moves)
+        async sendMatchData(matchId, opCode, data) {
+            if (!socket) {
+                return { success: false, error: 'Socket not connected' };
+            }
+
+            try {
+                const payload = typeof data === 'string' ? data : JSON.stringify(data);
+                await socket.sendMatchState(matchId, opCode, payload);
+                return { success: true };
+            } catch (e) {
+                console.error('Failed to send match data:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Get chess leaderboard
+        async getChessLeaderboard(limit = 20) {
+            if (!client || !session) {
+                return { success: false, error: 'Not authenticated' };
+            }
+
+            try {
+                const response = await client.rpc(
+                    session,
+                    'get_chess_leaderboard',
+                    JSON.stringify({ limit })
+                );
+                const result = parseRpcPayload(response.payload);
+                return { success: true, records: result.records };
+            } catch (e) {
+                console.error('Failed to get leaderboard:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // High-level helper: Create a new chess challenge
+        // Handles init, auth, socket, create, and join in one call
+        async createChallenge() {
+            const initResult = await this.init();
+            if (!initResult?.success) {
+                return { success: false, error: 'Failed to initialize' };
+            }
+
+            const authResult = await this.authenticate();
+            if (!authResult.success) {
+                return { success: false, error: authResult.error || 'Not authenticated' };
+            }
+
+            const socketResult = await this.connectSocket();
+            if (!socketResult.success) {
+                return { success: false, error: socketResult.error || 'Failed to connect' };
+            }
+
+            const createResult = await this.createChessMatch();
+            if (!createResult.success) {
+                // Handle existing match case
+                if (createResult.existingMatchId) {
+                    return {
+                        success: false,
+                        error: createResult.error,
+                        existingMatchId: createResult.existingMatchId
+                    };
+                }
+                return { success: false, error: createResult.error || 'Failed to create match' };
+            }
+
+            // Join the match to become the white player
+            await this.joinMatch(createResult.matchId);
+            // Delay to let Nakama update the match label
+            await new Promise(resolve => setTimeout(resolve, 400));
+
+            return { success: true, matchId: createResult.matchId };
+        },
+
+        // High-level helper: Cancel an existing challenge via RPC
+        // This uses an explicit RPC to terminate the match, rather than join+leave
+        // which allows page refresh without killing the match
+        async cancelChallenge(matchId) {
+            const initResult = await this.init();
+            if (!initResult?.success) {
+                return { success: false, error: 'Failed to initialize' };
+            }
+
+            const authResult = await this.authenticate();
+            if (!authResult.success) {
+                return { success: false, error: authResult.error || 'Not authenticated' };
+            }
+
+            try {
+                const response = await client.rpc(
+                    session,
+                    'cancel_chess_match',
+                    JSON.stringify({ matchId })
+                );
+                const result = parseRpcPayload(response.payload);
+
+                if (!result.success) {
+                    return { success: false, error: result.error || 'Failed to cancel' };
+                }
+
+                return { success: true };
+            } catch (e) {
+                console.error('Failed to cancel challenge:', e);
+                return { success: false, error: e.message };
+            }
+        },
+
+        // Register callback for match events
+        onMatchEvent(callback) {
+            console.log('[Nakama] onMatchEvent: registering callback, current callbacks:', matchCallbacks.length, 'buffer size:', matchEventBuffer.length);
+            matchCallbacks.push(callback);
+
+            // Replay any buffered events to this new handler
+            if (matchEventBuffer.length > 0) {
+                console.log(`[Nakama] Replaying ${matchEventBuffer.length} buffered match events`);
+                const bufferedEvents = [...matchEventBuffer];
+                matchEventBuffer = []; // Clear buffer
+
+                // Use setTimeout to ensure the handler is fully set up
+                setTimeout(() => {
+                    console.log('[Nakama] Executing replay of', bufferedEvents.length, 'events');
+                    bufferedEvents.forEach(event => {
+                        console.log('[Nakama] Replaying event type:', event.type, 'op_code:', event.data?.op_code);
+                        callback(event.type, event.data);
+                    });
+                }, 0);
+            }
+
+            return () => {
+                matchCallbacks = matchCallbacks.filter(cb => cb !== callback);
+                console.log('[Nakama] Callback unregistered, remaining:', matchCallbacks.length);
+            };
+        },
+
+        // Register callback for presence events
+        onPresence(callback) {
+            presenceCallbacks.push(callback);
+            return () => {
+                presenceCallbacks = presenceCallbacks.filter(cb => cb !== callback);
+            };
+        },
+
+        // Disconnect and cleanup
+        disconnect() {
+            if (socket) {
+                socket.disconnect(false);
+                socket = null;
+            }
+            session = null;
+            matchCallbacks = [];
+            presenceCallbacks = [];
+            matchEventBuffer = [];
+
+            set({
+                client,
+                session: null,
+                socket: null,
+                connected: false,
+                error: null,
+                currentMatch: null
+            });
+        },
+
+        // Get current session info
+        getSession() {
+            return session;
+        }
+    };
+}
+
+export const nakama = createNakamaStore();
+
+// Derived stores for convenience
+export const isNakamaConnected = derived(
+    nakama,
+    $nakama => $nakama.connected
+);
+
+export const nakamaSession = derived(
+    nakama,
+    $nakama => $nakama.session
+);
+
+export const currentMatch = derived(
+    nakama,
+    $nakama => $nakama.currentMatch
+);
+
+export const nakamaError = derived(
+    nakama,
+    $nakama => $nakama.error
+);
diff --git a/frontend/src/lib/stores/siteSettings.js b/frontend/src/lib/stores/siteSettings.js
new file mode 100644
index 0000000..4dd91f4
--- /dev/null
+++ b/frontend/src/lib/stores/siteSettings.js
@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+
+export const siteSettings = writable({
+    site_title: 'Stream',
+    logo_path: '',
+    logo_display_mode: 'text'
+});
diff --git a/frontend/src/lib/stores/stickers.js b/frontend/src/lib/stores/stickers.js
new file mode 100644
index 0000000..2b320ad
--- /dev/null
+++ b/frontend/src/lib/stores/stickers.js
@@ -0,0 +1,91 @@
+import { writable, derived, get } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// Writable store for sticker array
+export const stickers = writable([]);
+
+// Derived store for sticker map (name -> filePath lookup)
+export const stickersMap = derived(stickers, ($stickers) => {
+    const map = {};
+    $stickers.forEach((sticker) => {
+        map[sticker.name.toLowerCase()] = sticker.filePath;
+    });
+    return map;
+});
+
+// Loading state
+let loading = false;
+let loaded = false;
+let loadPromise = null;
+
+/**
+ * Load stickers from API (deduped - only fetches once)
+ * @returns {Promise<void>}
+ */
+export async function loadStickers() {
+    // Already loaded
+    if (loaded) return;
+
+    // Already loading - return existing promise
+    if (loading && loadPromise) return loadPromise;
+
+    // Not in browser
+    if (!browser) return;
+
+    loading = true;
+
+    loadPromise = (async () => {
+        try {
+            const response = await fetch('/api/admin/stickers');
+            if (response.ok) {
+                const data = await response.json();
+                stickers.set(data.stickers || []);
+                loaded = true;
+            }
+        } catch (e) {
+            console.error('Failed to load stickers:', e);
+        } finally {
+            loading = false;
+        }
+    })();
+
+    return loadPromise;
+}
+
+/**
+ * Ensure stickers are loaded before proceeding
+ * Use this in components that need stickers immediately
+ * @returns {Promise<void>}
+ */
+export async function ensureLoaded() {
+    if (loaded) return;
+    await loadStickers();
+}
+
+/**
+ * Check if stickers are loaded
+ * @returns {boolean}
+ */
+export function isLoaded() {
+    return loaded;
+}
+
+/**
+ * Get sticker file path by name (synchronous)
+ * @param {string} name - Sticker name (case-insensitive)
+ * @returns {string|undefined} - File path or undefined if not found
+ */
+export function getStickerPath(name) {
+    const map = get(stickersMap);
+    return map[name.toLowerCase()];
+}
+
+/**
+ * Reset store (for testing/hot reload)
+ */
+export function resetStickers() {
+    stickers.set([]);
+    loaded = false;
+    loading = false;
+    loadPromise = null;
+}
diff --git a/frontend/src/lib/stores/streamTiles.js b/frontend/src/lib/stores/streamTiles.js
new file mode 100644
index 0000000..e086f2b
--- /dev/null
+++ b/frontend/src/lib/stores/streamTiles.js
@@ -0,0 +1,149 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'streamTiles';
+
+const defaultState = {
+    enabled: false,
+    streams: [],  // Array of { streamKey, name, username, realmId, offlineImageUrl?, muted: true, volume: 0.5 }
+    // Grid sizing: percentage splits for resizable dividers
+    horizontalSplit: 50,  // Percentage for left/right split (2 streams side by side)
+    verticalSplit: 50     // Percentage for top/bottom split (2x2 grid)
+};
+
+function loadFromStorage() {
+    if (!browser) return defaultState;
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Migrate old format: ensure streams have muted/volume properties
+            if (parsed.streams) {
+                parsed.streams = parsed.streams.map(s => ({
+                    ...s,
+                    muted: s.muted !== undefined ? s.muted : true,
+                    volume: s.volume !== undefined ? s.volume : 0.5
+                }));
+            }
+            // Migrate: remove old unmutedStream if present
+            delete parsed.unmutedStream;
+            return { ...defaultState, ...parsed };
+        }
+    } catch (e) {
+        console.error('Failed to load streamTiles from storage:', e);
+    }
+    return defaultState;
+}
+
+function saveToStorage(state) {
+    if (!browser) return;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch (e) {
+        console.error('Failed to save streamTiles to storage:', e);
+    }
+}
+
+function createTileStore() {
+    const { subscribe, update, set } = writable(loadFromStorage());
+
+    return {
+        subscribe,
+
+        toggle: () => update(s => {
+            const newState = { ...s, enabled: !s.enabled };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        show: () => update(s => {
+            const newState = { ...s, enabled: true };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        hide: () => update(s => {
+            const newState = { ...s, enabled: false };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        addStream: (stream) => update(s => {
+            // Don't add duplicates
+            if (s.streams.some(st => st.streamKey === stream.streamKey)) {
+                return s;
+            }
+            // Max 4 streams, add with default audio settings
+            const newStream = {
+                ...stream,
+                muted: true,
+                volume: 0.5
+            };
+            const newStreams = [...s.streams.slice(-(3)), newStream];
+            const newState = { ...s, streams: newStreams, enabled: true };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        removeStream: (streamKey) => update(s => {
+            const newStreams = s.streams.filter(st => st.streamKey !== streamKey);
+            const newState = { ...s, streams: newStreams };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        toggleMute: (streamKey) => update(s => {
+            const newStreams = s.streams.map(st =>
+                st.streamKey === streamKey
+                    ? { ...st, muted: !st.muted }
+                    : st
+            );
+            const newState = { ...s, streams: newStreams };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        setVolume: (streamKey, volume) => update(s => {
+            const newStreams = s.streams.map(st =>
+                st.streamKey === streamKey
+                    ? { ...st, volume: Math.max(0, Math.min(1, volume)) }
+                    : st
+            );
+            const newState = { ...s, streams: newStreams };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        setMuted: (streamKey, muted) => update(s => {
+            const newStreams = s.streams.map(st =>
+                st.streamKey === streamKey
+                    ? { ...st, muted }
+                    : st
+            );
+            const newState = { ...s, streams: newStreams };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        // Update grid split percentages
+        setHorizontalSplit: (percent) => update(s => {
+            const newState = { ...s, horizontalSplit: Math.max(20, Math.min(80, percent)) };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        setVerticalSplit: (percent) => update(s => {
+            const newState = { ...s, verticalSplit: Math.max(20, Math.min(80, percent)) };
+            saveToStorage(newState);
+            return newState;
+        }),
+
+        clear: () => {
+            const newState = { ...defaultState };
+            saveToStorage(newState);
+            set(newState);
+        }
+    };
+}
+
+export const streamTiles = createTileStore();
diff --git a/frontend/src/lib/stores/ubercoin.js b/frontend/src/lib/stores/ubercoin.js
new file mode 100644
index 0000000..5ec92db
--- /dev/null
+++ b/frontend/src/lib/stores/ubercoin.js
@@ -0,0 +1,164 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+import { auth } from './auth';
+
+// Store for current user's übercoin balance
+export const ubercoinBalance = writable(0);
+
+// Store for treasury info
+export const treasury = writable({
+    balance: 0,
+    totalDestroyed: 0,
+    totalUsers: 0,
+    estimatedShare: 0,
+    nextDistribution: null,
+    lastGrowthAt: null,
+    lastDistributionAt: null
+});
+
+// Format übercoin amount for display (3 decimal places)
+export function formatUbercoin(amount) {
+    if (amount === null || amount === undefined) return '0.000';
+    const num = parseFloat(amount);
+    if (isNaN(num)) return '0.000';
+
+    // Format with exactly 3 decimal places
+    return num.toFixed(3);
+}
+
+// Format übercoin with compact notation for large numbers
+export function formatUbercoinCompact(amount) {
+    if (amount === null || amount === undefined) return '0.000';
+    const num = parseFloat(amount);
+    if (isNaN(num)) return '0.000';
+
+    if (num >= 1000000) {
+        return (num / 1000000).toFixed(2) + 'M';
+    } else if (num >= 1000) {
+        return (num / 1000).toFixed(2) + 'K';
+    }
+    return num.toFixed(3);
+}
+
+// Fetch current user's balance (called when user data is loaded)
+export async function fetchBalance() {
+    if (!browser) return;
+
+    try {
+        const response = await fetch('/api/user/me', {
+            credentials: 'include'
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            if (data.success && data.user) {
+                ubercoinBalance.set(data.user.ubercoinBalance || 0);
+            }
+        }
+    } catch (error) {
+        console.error('Failed to fetch übercoin balance:', error);
+    }
+}
+
+// Preview a transaction (get burn rate before sending)
+export async function previewTransaction(recipientUsername, amount) {
+    if (!browser) return { success: false, error: 'Not in browser' };
+
+    try {
+        const response = await fetch('/api/ubercoin/preview', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({
+                recipient: recipientUsername,
+                amount: parseFloat(amount)
+            })
+        });
+
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Failed to preview transaction:', error);
+        return { success: false, error: 'Network error' };
+    }
+}
+
+// Send übercoin to another user
+export async function sendUbercoin(recipientUsername, amount) {
+    if (!browser) return { success: false, error: 'Not in browser' };
+
+    try {
+        const response = await fetch('/api/ubercoin/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({
+                recipient: recipientUsername,
+                amount: parseFloat(amount)
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            // Update local balance
+            ubercoinBalance.set(data.newBalance);
+        }
+
+        return data;
+    } catch (error) {
+        console.error('Failed to send übercoin:', error);
+        return { success: false, error: 'Network error' };
+    }
+}
+
+// Fetch treasury info
+export async function fetchTreasury() {
+    if (!browser) return;
+
+    try {
+        const response = await fetch('/api/ubercoin/treasury', {
+            credentials: 'include'
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            if (data.success) {
+                treasury.set({
+                    balance: data.balance || 0,
+                    totalDestroyed: data.totalDestroyed || 0,
+                    totalUsers: data.totalUsers || 0,
+                    estimatedShare: data.estimatedShare || 0,
+                    nextDistribution: data.nextDistribution,
+                    lastGrowthAt: data.lastGrowthAt,
+                    lastDistributionAt: data.lastDistributionAt
+                });
+            }
+        }
+    } catch (error) {
+        console.error('Failed to fetch treasury:', error);
+    }
+}
+
+// Calculate time until next distribution
+export function getTimeUntilDistribution(nextDistribution) {
+    if (!nextDistribution) return null;
+
+    const now = new Date();
+    const next = new Date(nextDistribution);
+    const diff = next.getTime() - now.getTime();
+
+    if (diff <= 0) return { days: 0, hours: 0, minutes: 0 };
+
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+    return { days, hours, minutes };
+}
+
+// Derived store for user's übercoin from auth
+export const userUbercoin = derived(
+    auth,
+    $auth => $auth.user?.ubercoinBalance || 0
+);
diff --git a/frontend/src/lib/stores/user.js b/frontend/src/lib/stores/user.js
deleted file mode 100644
index bb795f8..0000000
--- a/frontend/src/lib/stores/user.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { writable, derived } from 'svelte/store';
-import { browser } from '$app/environment';
-
-function createUserStore() {
-    // Initialize from localStorage if in browser
-    const initialUser = browser ? JSON.parse(localStorage.getItem('user') || 'null') : null;
-    
-    const { subscribe, set, update } = writable(initialUser);
-
-    return {
-        subscribe,
-        set: (user) => {
-            if (browser && user) {
-                localStorage.setItem('user', JSON.stringify(user));
-            } else if (browser) {
-                localStorage.removeItem('user');
-            }
-            set(user);
-        },
-        update: (fn) => {
-            update(currentUser => {
-                const newUser = fn(currentUser);
-                if (browser && newUser) {
-                    localStorage.setItem('user', JSON.stringify(newUser));
-                }
-                return newUser;
-            });
-        },
-        updateColor: async (newColor) => {
-            const token = browser ? localStorage.getItem('token') : null;
-            if (!token) return false;
-
-            try {
-                const response = await fetch('/api/user/color', {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${token}`
-                    },
-                    body: JSON.stringify({ color: newColor })
-                });
-
-                const data = await response.json();
-                if (data.success) {
-                    // Update the store with new user data
-                    if (data.user) {
-                        // Full user data returned
-                        set(data.user);
-                    } else {
-                        // Only color returned, update existing user
-                        update(u => u ? { ...u, userColor: data.color } : null);
-                    }
-                    return true;
-                }
-                return false;
-            } catch (error) {
-                console.error('Failed to update color:', error);
-                return false;
-            }
-        },
-        refresh: async () => {
-            const token = browser ? localStorage.getItem('token') : null;
-            if (!token) return;
-
-            try {
-                const response = await fetch('/api/user/me', {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data.success && data.user) {
-                        set(data.user);
-                        return data.user;
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to refresh user:', error);
-            }
-            return null;
-        }
-    };
-}
-
-export const userStore = createUserStore();
-
-// Derived store for just the color
-export const userColor = derived(
-    userStore,
-    $user => $user?.userColor || '#561D5E'
-);
\ No newline at end of file
diff --git a/frontend/src/lib/stores/watchSync.js b/frontend/src/lib/stores/watchSync.js
new file mode 100644
index 0000000..e4ba1c0
--- /dev/null
+++ b/frontend/src/lib/stores/watchSync.js
@@ -0,0 +1,394 @@
+import { writable, derived, get } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
+const SYNC_INTERVAL = 5000; // Sync every 5 seconds (server pushes every 1s anyway)
+const DRIFT_THRESHOLD = 2; // Seek if drift > 2 seconds (CyTube-style tight sync)
+const LEAD_IN_DURATION = 3000; // 3 seconds lead-in for buffering
+
+function createWatchSyncStore() {
+    let ws = null;
+    let reconnectTimeout = null;
+    let reconnectAttempts = 0;
+    let syncInterval = null;
+    let currentRealmId = null;
+
+    const MAX_RECONNECT_ATTEMPTS = 10;
+    const BASE_RECONNECT_DELAY = 1000;
+    const MAX_RECONNECT_DELAY = 30000;
+
+    const { subscribe, set, update } = writable({
+        connected: false,
+        realmId: null,
+        realmName: '',
+        canAddToPlaylist: false,
+        canControlPlayback: false,
+        playbackState: 'paused', // 'playing', 'paused', 'ended'
+        currentTime: 0,
+        serverTime: 0,
+        currentVideo: null,
+        viewerCount: 0,
+        playlist: [],
+        error: null,
+        loading: true,
+        leadIn: false, // True during initial buffering period
+        repeatCount: 0, // Current repeat count for last video (0-3)
+        isRepeating: false // True when last video is repeating
+    });
+
+    function getReconnectDelay() {
+        const exponentialDelay = BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttempts);
+        const cappedDelay = Math.min(exponentialDelay, MAX_RECONNECT_DELAY);
+        const jitter = cappedDelay * 0.2 * (Math.random() - 0.5);
+        return Math.floor(cappedDelay + jitter);
+    }
+
+    function getExpectedTime(state) {
+        if (state.playbackState !== 'playing') {
+            return state.currentTime;
+        }
+        // Calculate expected position based on server time
+        const elapsed = (Date.now() - state.serverTime) / 1000;
+        return state.currentTime + elapsed;
+    }
+
+    function handleMessage(data) {
+        switch (data.type) {
+            case 'welcome':
+                update(state => ({
+                    ...state,
+                    connected: true,
+                    realmId: data.realmId,
+                    realmName: data.realmName || '',
+                    canAddToPlaylist: data.canAddToPlaylist || false,
+                    canControlPlayback: data.canControlPlayback || false,
+                    playbackState: data.playbackState || 'paused',
+                    currentTime: data.currentTime || 0,
+                    serverTime: data.serverTime || Date.now(),
+                    currentVideo: data.currentVideo || null,
+                    viewerCount: data.viewerCount || 1,
+                    loading: false,
+                    error: null,
+                    leadIn: data.leadIn || false
+                }));
+                break;
+
+            case 'sync':
+                update(state => ({
+                    ...state,
+                    playbackState: data.playbackState || state.playbackState,
+                    currentTime: data.currentTime ?? state.currentTime,
+                    serverTime: data.serverTime || Date.now(),
+                    currentVideo: data.currentVideo !== undefined ? data.currentVideo : state.currentVideo,
+                    leadIn: data.leadIn ?? state.leadIn
+                }));
+                break;
+
+            case 'state_change':
+                // Handle repeat event specifically
+                if (data.event === 'repeat') {
+                    update(state => ({
+                        ...state,
+                        playbackState: 'playing',
+                        currentTime: 0,
+                        serverTime: data.serverTime || Date.now(),
+                        currentVideo: data.currentVideo !== undefined ? data.currentVideo : state.currentVideo,
+                        leadIn: true,
+                        repeatCount: data.repeatCount || 0,
+                        isRepeating: true
+                    }));
+                } else if (data.event === 'skip') {
+                    // Skip resets repeat state
+                    update(state => ({
+                        ...state,
+                        playbackState: data.playbackState || state.playbackState,
+                        currentTime: data.currentTime ?? state.currentTime,
+                        serverTime: data.serverTime || Date.now(),
+                        currentVideo: data.currentVideo !== undefined ? data.currentVideo : state.currentVideo,
+                        leadIn: data.leadIn ?? state.leadIn,
+                        repeatCount: 0,
+                        isRepeating: false
+                    }));
+                } else {
+                    update(state => ({
+                        ...state,
+                        playbackState: data.playbackState || state.playbackState,
+                        currentTime: data.currentTime ?? state.currentTime,
+                        serverTime: data.serverTime || Date.now(),
+                        currentVideo: data.currentVideo !== undefined ? data.currentVideo : state.currentVideo,
+                        leadIn: data.leadIn ?? state.leadIn
+                    }));
+                }
+                // Notify listeners about the event
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new CustomEvent('watch-state-change', {
+                        detail: { ...data }
+                    }));
+                }
+                break;
+
+            case 'playlist_update':
+                update(state => ({
+                    ...state,
+                    playlist: data.playlist || state.playlist
+                }));
+                break;
+
+            case 'viewer_count':
+                update(state => ({
+                    ...state,
+                    viewerCount: data.count || 0
+                }));
+                break;
+
+            case 'duration_update':
+                // Server reports updated duration for a playlist item
+                update(state => {
+                    if (state.currentVideo && state.currentVideo.id === data.playlistItemId) {
+                        return {
+                            ...state,
+                            currentVideo: {
+                                ...state.currentVideo,
+                                durationSeconds: data.duration
+                            }
+                        };
+                    }
+                    return state;
+                });
+                break;
+
+            case 'error':
+                update(state => ({
+                    ...state,
+                    error: data.error || 'Unknown error'
+                }));
+                break;
+        }
+    }
+
+    function connect(realmId, token = null) {
+        if (!browser) return;
+        if (ws?.readyState === WebSocket.OPEN && currentRealmId === realmId) return;
+
+        // Disconnect from previous room if connected
+        if (ws) {
+            disconnect();
+        }
+
+        currentRealmId = realmId;
+        update(state => ({ ...state, loading: true, error: null }));
+
+        // Get token from localStorage if not provided
+        const authToken = token || localStorage.getItem('token');
+
+        // Build WebSocket URL
+        let wsUrl = `${WS_URL.replace('/ws', '')}/watch/ws?realmId=${encodeURIComponent(realmId)}`;
+        if (authToken) {
+            wsUrl += `&token=${encodeURIComponent(authToken)}`;
+        }
+
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+            console.log('Watch sync WebSocket connected');
+            reconnectAttempts = 0;
+            update(state => ({ ...state, connected: true }));
+
+            // Start sync interval
+            if (syncInterval) clearInterval(syncInterval);
+            syncInterval = setInterval(() => {
+                requestSync();
+            }, SYNC_INTERVAL);
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                handleMessage(data);
+            } catch (error) {
+                console.error('Failed to parse watch sync message:', error);
+            }
+        };
+
+        ws.onerror = (error) => {
+            console.error('Watch sync WebSocket error:', error);
+            update(state => ({ ...state, error: 'Connection error' }));
+        };
+
+        ws.onclose = () => {
+            console.log('Watch sync WebSocket disconnected');
+            update(state => ({ ...state, connected: false }));
+
+            if (syncInterval) {
+                clearInterval(syncInterval);
+                syncInterval = null;
+            }
+
+            // Only reconnect if we haven't explicitly disconnected
+            if (currentRealmId && reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                const delay = getReconnectDelay();
+                reconnectAttempts++;
+                console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
+                reconnectTimeout = setTimeout(() => {
+                    connect(currentRealmId);
+                }, delay);
+            }
+        };
+    }
+
+    function disconnect() {
+        currentRealmId = null;
+
+        if (reconnectTimeout) {
+            clearTimeout(reconnectTimeout);
+            reconnectTimeout = null;
+        }
+
+        if (syncInterval) {
+            clearInterval(syncInterval);
+            syncInterval = null;
+        }
+
+        if (ws) {
+            ws.close();
+            ws = null;
+        }
+
+        reconnectAttempts = 0;
+
+        set({
+            connected: false,
+            realmId: null,
+            realmName: '',
+            canAddToPlaylist: false,
+            canControlPlayback: false,
+            playbackState: 'paused',
+            currentTime: 0,
+            serverTime: 0,
+            currentVideo: null,
+            viewerCount: 0,
+            playlist: [],
+            error: null,
+            loading: true,
+            leadIn: false,
+            repeatCount: 0,
+            isRepeating: false
+        });
+    }
+
+    function send(message) {
+        if (ws?.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(message));
+        }
+    }
+
+    function requestSync() {
+        send({ type: 'sync_request' });
+    }
+
+    function play() {
+        send({ type: 'play' });
+    }
+
+    function pause() {
+        send({ type: 'pause' });
+    }
+
+    function seek(time) {
+        send({ type: 'seek', time });
+    }
+
+    function skip() {
+        send({ type: 'skip' });
+    }
+
+    // Report video duration to server (called when YouTube player loads a video)
+    function reportDuration(playlistItemId, duration) {
+        if (!playlistItemId || !duration || duration <= 0) return;
+        send({
+            type: 'update_duration',
+            playlistItemId: playlistItemId,
+            duration: Math.floor(duration)
+        });
+    }
+
+    // Check if local player needs to sync
+    function checkSync(localTime) {
+        let state;
+        subscribe(s => { state = s; })();
+
+        const expectedTime = getExpectedTime(state);
+        const drift = Math.abs(localTime - expectedTime);
+
+        if (drift > DRIFT_THRESHOLD) {
+            return { needsSeek: true, targetTime: expectedTime };
+        }
+        return { needsSeek: false, targetTime: expectedTime };
+    }
+
+    return {
+        subscribe,
+        connect,
+        disconnect,
+        play,
+        pause,
+        seek,
+        skip,
+        requestSync,
+        checkSync,
+        reportDuration,
+        getExpectedTime: () => {
+            let state;
+            subscribe(s => { state = s; })();
+            return getExpectedTime(state);
+        }
+    };
+}
+
+export const watchSync = createWatchSyncStore();
+
+// Derived stores for convenience
+export const isPlaying = derived(
+    watchSync,
+    $watchSync => $watchSync.playbackState === 'playing'
+);
+
+export const canControl = derived(
+    watchSync,
+    $watchSync => $watchSync.canControlPlayback
+);
+
+export const canAddToPlaylist = derived(
+    watchSync,
+    $watchSync => $watchSync.canAddToPlaylist
+);
+
+export const currentVideo = derived(
+    watchSync,
+    $watchSync => $watchSync.currentVideo
+);
+
+export const viewerCount = derived(
+    watchSync,
+    $watchSync => $watchSync.viewerCount
+);
+
+export const watchConnected = derived(
+    watchSync,
+    $watchSync => $watchSync.connected
+);
+
+export const isLeadIn = derived(
+    watchSync,
+    $watchSync => $watchSync.leadIn
+);
+
+export const isRepeating = derived(
+    watchSync,
+    $watchSync => $watchSync.isRepeating
+);
+
+export const repeatCount = derived(
+    watchSync,
+    $watchSync => $watchSync.repeatCount
+);
diff --git a/frontend/src/lib/utils/formatters.js b/frontend/src/lib/utils/formatters.js
new file mode 100644
index 0000000..2a57481
--- /dev/null
+++ b/frontend/src/lib/utils/formatters.js
@@ -0,0 +1,123 @@
+/**
+ * Shared formatting utilities for the frontend
+ */
+
+/**
+ * Format seconds to duration string (e.g., "1:23" or "1:23:45")
+ * @param {number} seconds - Duration in seconds
+ * @param {boolean} includeHours - Always include hours for long durations (auto-detected if false)
+ * @returns {string} Formatted duration
+ */
+export function formatDuration(seconds, includeHours = false) {
+    if (!seconds) return '0:00';
+    const hrs = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    if (includeHours || hrs > 0) {
+        return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Format view/play count with K/M suffix
+ * @param {number} count - The count to format
+ * @param {boolean} includeSuffix - Append " views" to the output
+ * @returns {string} Formatted count (e.g., "1.2K" or "1.2K views")
+ */
+export function formatViews(count, includeSuffix = false) {
+    if (count === null || count === undefined) count = 0;
+    const suffix = includeSuffix ? ' views' : '';
+    if (count >= 1000000) return (count / 1000000).toFixed(1) + 'M' + suffix;
+    if (count >= 1000) return (count / 1000).toFixed(1) + 'K' + suffix;
+    return count.toString() + suffix;
+}
+
+/**
+ * Format date as relative time (e.g., "5 min ago", "2 days ago")
+ * @param {string|Date} dateStr - Date string or Date object
+ * @param {boolean} short - Use abbreviated format (m, h, d instead of full text)
+ * @returns {string} Relative time string
+ */
+export function timeAgo(dateStr, short = false) {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const seconds = Math.floor((now - date) / 1000);
+
+    if (short) {
+        if (seconds < 60) return 'now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + 'h';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + 'd';
+        return date.toLocaleDateString();
+    }
+
+    if (seconds < 60) return 'just now';
+    if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+    if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+    if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+    return date.toLocaleDateString();
+}
+
+/**
+ * Format bytes to human-readable size
+ * @param {number} bytes - Size in bytes
+ * @returns {string} Formatted size (e.g., "1.5 GB")
+ */
+export function formatBytes(bytes) {
+    if (!bytes) return '0 bytes';
+    if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
+    if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB';
+    if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
+    return bytes + ' bytes';
+}
+
+/**
+ * Format bitrate to human-readable format
+ * @param {number} bps - Bitrate in bits per second
+ * @returns {string} Formatted bitrate (e.g., "2.5 Mbps")
+ */
+export function formatBitrate(bps) {
+    if (!bps) return '';
+    const kbps = Math.round(bps / 1000);
+    if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
+    return kbps + ' kbps';
+}
+
+/**
+ * Format codec name to human-readable format
+ * @param {string} codec - Raw codec name
+ * @returns {string} Human-readable codec name
+ */
+export function formatCodec(codec) {
+    if (!codec) return '';
+    const codecMap = {
+        'h264': 'H.264 (AVC)',
+        'hevc': 'H.265 (HEVC)',
+        'h265': 'H.265 (HEVC)',
+        'vp9': 'VP9',
+        'vp8': 'VP8',
+        'av1': 'AV1',
+        'aac': 'AAC',
+        'mp3': 'MP3',
+        'opus': 'Opus',
+        'vorbis': 'Vorbis',
+        'flac': 'FLAC',
+        'ac3': 'AC-3',
+        'eac3': 'E-AC-3'
+    };
+    return codecMap[codec.toLowerCase()] || codec.toUpperCase();
+}
+
+/**
+ * Format date to localized string
+ * @param {string|Date} dateStr - Date string or Date object
+ * @returns {string} Formatted date (e.g., "January 1, 2024")
+ */
+export function formatDate(dateStr) {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+}
diff --git a/frontend/src/lib/websocket.js b/frontend/src/lib/websocket.js
index 7cb9430..0c2f941 100644
--- a/frontend/src/lib/websocket.js
+++ b/frontend/src/lib/websocket.js
@@ -1,8 +1,25 @@
 let ws = null;
 let reconnectTimeout = null;
+let reconnectAttempts = 0;
+const MAX_RECONNECT_ATTEMPTS = 10;
+const BASE_RECONNECT_DELAY = 1000; // 1 second
+const MAX_RECONNECT_DELAY = 30000; // 30 seconds
 
 const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
 
+/**
+ * Calculate exponential backoff delay with jitter
+ * @returns {number} Delay in milliseconds
+ */
+function getReconnectDelay() {
+    // Exponential backoff: 1s, 2s, 4s, 8s, 16s, 30s, 30s...
+    const exponentialDelay = BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttempts);
+    const cappedDelay = Math.min(exponentialDelay, MAX_RECONNECT_DELAY);
+    // Add random jitter (±20%) to prevent thundering herd
+    const jitter = cappedDelay * 0.2 * (Math.random() - 0.5);
+    return Math.floor(cappedDelay + jitter);
+}
+
 export function connectWebSocket(onMessage) {
     if (ws?.readyState === WebSocket.OPEN) return;
 
@@ -12,6 +29,7 @@ export function connectWebSocket(onMessage) {
 
     ws.onopen = () => {
         console.log('WebSocket connected');
+        reconnectAttempts = 0; // Reset on successful connection
         ws?.send(JSON.stringify({ type: 'subscribe' }));
     };
 
@@ -30,10 +48,19 @@ export function connectWebSocket(onMessage) {
 
     ws.onclose = () => {
         console.log('WebSocket disconnected');
-        // Reconnect after 5 seconds
+
+        if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+            console.error('Max reconnect attempts reached, giving up');
+            return;
+        }
+
+        const delay = getReconnectDelay();
+        reconnectAttempts++;
+
+        console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
         reconnectTimeout = setTimeout(() => {
             connectWebSocket(onMessage);
-        }, 5000);
+        }, delay);
     };
 }
 
@@ -47,6 +74,15 @@ export function disconnectWebSocket() {
         ws.close();
         ws = null;
     }
+
+    reconnectAttempts = 0; // Reset attempts on explicit disconnect
+}
+
+/**
+ * Reset reconnect attempts counter (call this to allow reconnection after max attempts)
+ */
+export function resetReconnectAttempts() {
+    reconnectAttempts = 0;
 }
 
 export function sendMessage(message) {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 73244b8..ad7da15 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,26 +1,56 @@
 <script>
     import { onMount } from 'svelte';
-    import { auth, isAuthenticated, isAdmin, isStreamer, userColor } from '$lib/stores/auth';
+    import { auth, isAuthenticated, isAdmin, isModerator, isStreamer, isRestreamer, isUploader, isTexter, isStickerCreator, isWatchCreator, userColor } from '$lib/stores/auth';
+    import { ubercoinBalance, formatUbercoin, fetchBalance } from '$lib/stores/ubercoin';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import ChatTerminal from '$lib/components/chat/ChatTerminal.svelte';
+    import EbookReaderOverlay from '$lib/components/EbookReaderOverlay.svelte';
+    import ChessGameOverlay from '$lib/components/ChessGameOverlay.svelte';
+    import GlobalAudioPlayer from '$lib/components/GlobalAudioPlayer.svelte';
     import '../app.css';
-    
+
     let showDropdown = false;
-    
+
+    // Check if we're on a popout page (no nav/overlays needed)
+    $: isPopoutPage = $page.url.pathname.startsWith('/chat/popout') || $page.url.pathname.startsWith('/chat/terminal');
+
     // Close dropdown when route changes
     $: if ($page) {
         showDropdown = false;
     }
-    
+
+    async function loadSiteSettings() {
+        try {
+            const response = await fetch('/api/settings/site');
+            if (response.ok) {
+                const data = await response.json();
+                const settings = data.settings || {};
+                siteSettings.set({
+                    site_title: settings.site_title || 'Stream',
+                    logo_path: settings.logo_path || '',
+                    logo_display_mode: settings.logo_display_mode || 'text'
+                });
+            }
+        } catch (e) {
+            console.error('Failed to load site settings', e);
+        }
+    }
+
     onMount(() => {
-        auth.init();
-        
+        auth.init().then(() => {
+            fetchBalance();
+        });
+        loadSiteSettings();
+
         // Close dropdown when clicking outside
         const handleClickOutside = (event) => {
             if (!event.target.closest('.user-menu')) {
                 showDropdown = false;
             }
         };
-        
+
         document.addEventListener('click', handleClickOutside);
         return () => document.removeEventListener('click', handleClickOutside);
     });
@@ -30,54 +60,86 @@
     }
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title}</title>
+    {#if $siteSettings.logo_path}
+        <link rel="icon" type="image/png" href={$siteSettings.logo_path} />
+        <link rel="apple-touch-icon" href={$siteSettings.logo_path} />
+    {/if}
+</svelte:head>
+
 <style>
+    :global(:root) {
+        --nav-padding-y: 0.3rem;
+        --nav-margin-bottom: 0.33rem;
+        --nav-height: 2.66rem; /* content(32px/2rem) + padding(0.6rem) + border(1px) */
+    }
+
     .nav {
         background: #111;
         border-bottom: 1px solid var(--border);
-        padding: 1rem 0;
-        margin-bottom: 2rem;
+        padding: var(--nav-padding-y) 0;
+        margin-bottom: var(--nav-margin-bottom);
     }
-    
+
     .nav-container {
-        max-width: 1200px;
-        margin: 0 auto;
         padding: 0 2rem;
         display: flex;
-        justify-content: space-between;
         align-items: center;
     }
-    
+
     .nav-brand {
-        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.1rem;
         font-weight: 600;
         color: var(--white);
         text-decoration: none;
+        flex-shrink: 0;
     }
-    
+
+    .nav-brand-logo {
+        max-height: 32px;
+        max-width: 120px;
+        object-fit: contain;
+    }
+
+    .nav-brand-text {
+        background: linear-gradient(135deg, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
     .nav-links {
         display: flex;
         gap: 1rem;
         align-items: center;
+        flex-shrink: 0;
+        margin-left: auto;
     }
-    
+
     .nav-link {
         color: var(--white);
         text-decoration: none;
         transition: color 0.2s;
         padding: 0.5rem 1rem;
     }
-    
+
     .nav-link:hover {
         color: var(--primary);
     }
-    
+
     .user-menu {
         position: relative;
+        flex-shrink: 0;
+        margin-left: auto;
     }
     
     .user-avatar-btn {
-        width: 40px;
-        height: 40px;
+        width: 32px;
+        height: 32px;
         border-radius: 50%;
         background: var(--gray);
         border: 2px solid transparent;
@@ -87,6 +149,7 @@
         justify-content: center;
         color: var(--white);
         font-weight: 600;
+        font-size: 0.85rem;
         transition: all 0.2s;
         padding: 0;
         overflow: hidden;
@@ -98,6 +161,7 @@
     }
     
     .user-avatar-btn.has-color.with-image {
+        background: transparent;
         border-color: var(--user-color);
         border-width: 3px;
     }
@@ -121,80 +185,258 @@
         position: absolute;
         right: 0;
         top: calc(100% + 0.5rem);
-        background: #111;
+        background: #0a0a0a;
         border: 1px solid var(--border);
-        border-radius: 8px;
-        min-width: 200px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        z-index: 1000;
+        border-radius: 12px;
+        min-width: 220px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+        z-index: 10000;
+        overflow: hidden;
+        animation: dropdownFadeIn 0.15s ease-out;
+    }
+
+    @keyframes dropdownFadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-8px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .dropdown-header {
+        position: relative;
+        padding: 1rem 1rem 0.75rem;
+        border-bottom: 1px solid var(--border);
         overflow: hidden;
     }
-    
-    .dropdown-header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--border);
+
+    .dropdown-header-bg {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
     }
-    
+
+    .dropdown-header-bg img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0.7;
+    }
+
+    .dropdown-header-bg::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to bottom, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.6) 100%);
+    }
+
+    .dropdown-header-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .dropdown-ubercoin {
+        position: relative;
+        display: block;
+        text-align: center;
+        margin-top: 6px;
+        font-size: 0.85rem;
+        color: #ffd700;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+    }
+
+    .dropdown-ubercoin .coin-icon {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 0.65rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .dropdown-badges {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 4px;
+        margin-top: 8px;
+    }
+
+    .role-badge {
+        font-size: 0.65rem;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .role-badge.admin {
+        background: rgba(239, 68, 68, 0.2);
+        color: #ef4444;
+    }
+
+    .role-badge.moderator {
+        background: rgba(168, 85, 247, 0.2);
+        color: #a855f7;
+    }
+
+    .role-badge.streamer {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+    }
+
+    .role-badge.restreamer {
+        background: rgba(20, 184, 166, 0.2);
+        color: #14b8a6;
+    }
+
+    .role-badge.uploader {
+        background: rgba(34, 197, 94, 0.2);
+        color: #22c55e;
+    }
+
+    .role-badge.texter {
+        background: rgba(251, 146, 60, 0.2);
+        color: #fb923c;
+    }
+
+    .role-badge.sticker-creator {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+    }
+
+    .role-badge.watch-creator {
+        background: rgba(99, 102, 241, 0.2);
+        color: #6366f1;
+    }
+
     .dropdown-username {
+        position: relative;
         font-weight: 600;
         margin-bottom: 0.25rem;
-        color: var(--white);
         text-decoration: none;
+        display: block;
+        text-align: center;
+        transition: filter 0.2s;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+    }
+
+    .dropdown-username:hover {
+        filter: brightness(1.3);
+    }
+
+    .user-color-dot {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        box-shadow: 0 0 6px currentColor;
+    }
+
+    .dropdown-menu {
+        padding: 0.5rem;
+    }
+
+    .dropdown-item {
+        position: relative;
         display: flex;
         align-items: center;
-        transition: color 0.2s;
+        justify-content: center;
+        padding: 0.6rem 0.75rem;
+        color: var(--gray);
+        text-decoration: none;
+        transition: all 0.15s ease;
+        border-radius: 8px;
+        margin: 2px 0;
+        font-size: 0.9rem;
+        border: none;
+        background: transparent;
+        width: 100%;
+        cursor: pointer;
+        text-align: center;
     }
-    
-    .dropdown-username:hover {
+
+    .dropdown-item:hover {
+        background: rgba(139, 92, 246, 0.15);
+        color: var(--white);
+    }
+
+    .dropdown-item:hover :global(svg) {
         color: var(--primary);
     }
-    
-    .user-color-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        display: inline-block;
-        margin-right: 0.5rem;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    .dropdown-role {
-        font-size: 0.85rem;
+
+    .dropdown-item :global(svg) {
+        position: absolute;
+        left: 0.75rem;
+        width: 18px;
+        height: 18px;
         color: var(--gray);
+        transition: color 0.15s ease;
     }
-    
-    .dropdown-item {
-        display: block;
-        padding: 0.75rem 1rem;
-        color: var(--white);
-        text-decoration: none;
-        transition: background 0.2s;
-    }
-    
-    .dropdown-item:hover {
-        background: rgba(86, 29, 94, 0.2);
-    }
-    
+
     .dropdown-divider {
         height: 1px;
         background: var(--border);
-        margin: 0.5rem 0;
+        margin: 0.5rem 0.5rem;
     }
-    
+
     .dropdown-item.logout {
+        color: var(--gray);
+    }
+
+    .dropdown-item.logout:hover {
+        background: rgba(239, 68, 68, 0.15);
+        color: var(--error);
+    }
+
+    .dropdown-item.logout:hover :global(svg) {
         color: var(--error);
     }
 </style>
 
+{#if !isPopoutPage}
 <nav class="nav">
     <div class="nav-container">
-        <a href="/" class="nav-brand">Stream</a>
-        
+        <a href="/" class="nav-brand">
+            {#if $siteSettings.logo_display_mode === 'image' || $siteSettings.logo_display_mode === 'both'}
+                {#if $siteSettings.logo_path}
+                    <img src={$siteSettings.logo_path} alt={$siteSettings.site_title} class="nav-brand-logo" />
+                {/if}
+            {/if}
+            {#if $siteSettings.logo_display_mode === 'text' || $siteSettings.logo_display_mode === 'both'}
+                <span class="nav-brand-text">{$siteSettings.site_title}</span>
+            {/if}
+            {#if !$siteSettings.logo_display_mode || ($siteSettings.logo_display_mode === 'image' && !$siteSettings.logo_path)}
+                <span class="nav-brand-text">{$siteSettings.site_title}</span>
+            {/if}
+        </a>
+
         {#if !$auth.loading}
             {#if $isAuthenticated}
                 <div class="user-menu">
-                    <button 
-                        class="user-avatar-btn" 
+                    <button
+                        class="user-avatar-btn"
                         class:has-color={$userColor}
                         class:with-image={$auth.user.avatarUrl}
                         style="--user-color: {$userColor}"
@@ -206,47 +448,105 @@
                             {$auth.user.username.charAt(0).toUpperCase()}
                         {/if}
                     </button>
-                    
+
                     {#if showDropdown}
                         <div class="dropdown">
                             <div class="dropdown-header">
-                                <a href="/profile/{$auth.user.username}" class="dropdown-username">
-                                    <span 
-                                        class="user-color-dot" 
-                                        style="background: {$userColor}"
-                                    ></span>
-                                    {$auth.user.username}
-                                </a>
-                                <div class="dropdown-role">
-                                    {#if $isAdmin}
-                                        Admin
-                                    {:else if $isStreamer}
-                                        Streamer
-                                    {:else}
-                                        User
+                                {#if $auth.user.bannerUrl}
+                                    <div class="dropdown-header-bg">
+                                        <img
+                                            src={$auth.user.bannerUrl}
+                                            alt=""
+                                            style="object-position: {$auth.user.bannerPositionX ?? 50}% {$auth.user.bannerPosition ?? 50}%;"
+                                        />
+                                    </div>
+                                {:else}
+                                    <div
+                                        class="dropdown-header-bg"
+                                        style="background: linear-gradient(135deg, {$userColor} 0%, {$userColor}66 100%);"
+                                    ></div>
+                                {/if}
+                                <div class="dropdown-header-content">
+                                    <a href="/profile/{$auth.user.username}" class="dropdown-username" style="color: {$userColor};">
+                                        <span
+                                            class="user-color-dot"
+                                            style="background: {$userColor}; color: {$userColor}"
+                                        ></span>
+                                        {$auth.user.username}
+                                    </a>
+                                    <div class="dropdown-ubercoin">
+                                        <span class="coin-icon">Ü</span>
+                                        <span>{formatUbercoin($ubercoinBalance)}</span>
+                                    </div>
+                                    {#if $isAdmin || $isModerator || $isStreamer || $isRestreamer || $isUploader || $isTexter || $isStickerCreator || $isWatchCreator}
+                                        <div class="dropdown-badges">
+                                            {#if $isAdmin}<span class="role-badge admin">Admin</span>{/if}
+                                            {#if $isModerator}<span class="role-badge moderator">Mod</span>{/if}
+                                            {#if $isStreamer}<span class="role-badge streamer">Streamer</span>{/if}
+                                            {#if $isRestreamer}<span class="role-badge restreamer">Restreamer</span>{/if}
+                                            {#if $isUploader}<span class="role-badge uploader">Uploader</span>{/if}
+                                            {#if $isTexter}<span class="role-badge texter">Texter</span>{/if}
+                                            {#if $isStickerCreator}<span class="role-badge sticker-creator">Stickers</span>{/if}
+                                            {#if $isWatchCreator}<span class="role-badge watch-creator">Watch</span>{/if}
+                                        </div>
                                     {/if}
                                 </div>
                             </div>
-                            
-                            <a href="/settings" class="dropdown-item">
-                                Settings
-                            </a>
-                            {#if $isStreamer}
-                                <a href="/my-realms" class="dropdown-item">
-                                    My Realms
+
+                            <div class="dropdown-menu">
+                                <a href="/settings" class="dropdown-item">
+                                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <circle cx="12" cy="12" r="3"/>
+                                        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                                    </svg>
+                                    Settings
                                 </a>
-                            {/if}
-                            {#if $isAdmin}
-                                <a href="/admin" class="dropdown-item">
-                                    Admin
+                                <a href="/forums" class="dropdown-item">
+                                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                    </svg>
+                                    Forums
                                 </a>
-                            {/if}
-                            
-                            <div class="dropdown-divider"></div>
-                            
-                            <button class="dropdown-item logout" on:click={() => auth.logout()}>
-                                Logout
-                            </button>
+                                <a href="/games" class="dropdown-item">
+                                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <rect x="2" y="6" width="20" height="12" rx="2"/>
+                                        <path d="M6 12h4M8 10v4M15 11h.01M18 13h.01"/>
+                                    </svg>
+                                    Games
+                                </a>
+                                <a href="/stats" class="dropdown-item">
+                                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M18 20V10M12 20V4M6 20v-6"/>
+                                    </svg>
+                                    Stats
+                                </a>
+                                {#if $isStreamer || $isUploader}
+                                    <a href="/my-realms" class="dropdown-item">
+                                        <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <circle cx="12" cy="12" r="10"/>
+                                            <polygon points="10 8 16 12 10 16 10 8" fill="currentColor"/>
+                                        </svg>
+                                        My Realms
+                                    </a>
+                                {/if}
+                                {#if $isAdmin}
+                                    <a href="/admin" class="dropdown-item">
+                                        <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                                        </svg>
+                                        Admin
+                                    </a>
+                                {/if}
+
+                                <div class="dropdown-divider"></div>
+
+                                <button class="dropdown-item logout" on:click={() => auth.logout()}>
+                                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
                         </div>
                     {/if}
                 </div>
@@ -259,4 +559,12 @@
     </div>
 </nav>
 
+{#if browser}
+    <GlobalAudioPlayer />
+    <ChatTerminal />
+    <EbookReaderOverlay />
+    <ChessGameOverlay />
+{/if}
+{/if}
+
 <slot />
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 8e1d3c2..124ae60 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,14 +1,25 @@
 <script>
     import { onMount } from 'svelte';
     import { browser } from '$app/environment';
-    
+    import { audioPlaylist, currentTrack } from '$lib/stores/audioPlaylist';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { connectWebSocket, disconnectWebSocket } from '$lib/websocket.js';
+
     let streams = [];
+    let videos = [];
+    let audioFiles = [];
+    let ebookFiles = [];
+    let watchRooms = [];
     let interval;
     let loading = true;
-    
+    let videosLoading = true;
+    let audioLoading = true;
+    let ebooksLoading = true;
+    let watchRoomsLoading = true;
+
     async function loadStreams() {
         if (!browser) return;
-        
+
         try {
             const res = await fetch('/api/realms/live');
             if (res.ok) {
@@ -20,18 +31,177 @@
             loading = false;
         }
     }
-    
+
+    async function loadVideos() {
+        if (!browser) return;
+
+        try {
+            const res = await fetch('/api/videos/latest');
+            if (res.ok) {
+                const data = await res.json();
+                videos = data.videos || [];
+            }
+        } catch (e) {
+            console.error('Failed to load videos:', e);
+        } finally {
+            videosLoading = false;
+        }
+    }
+
+    async function loadAudio() {
+        if (!browser) return;
+
+        try {
+            const res = await fetch('/api/audio/latest');
+            if (res.ok) {
+                const data = await res.json();
+                audioFiles = data.audio || [];
+            }
+        } catch (e) {
+            console.error('Failed to load audio:', e);
+        } finally {
+            audioLoading = false;
+        }
+    }
+
+    async function loadEbooks() {
+        if (!browser) return;
+
+        try {
+            const res = await fetch('/api/ebooks/latest');
+            if (res.ok) {
+                const data = await res.json();
+                ebookFiles = data.ebooks || [];
+            }
+        } catch (e) {
+            console.error('Failed to load ebooks:', e);
+        } finally {
+            ebooksLoading = false;
+        }
+    }
+
+    async function loadWatchRooms() {
+        if (!browser) return;
+
+        try {
+            const res = await fetch('/api/watch/rooms');
+            if (res.ok) {
+                const data = await res.json();
+                watchRooms = data.rooms || [];
+            }
+        } catch (e) {
+            console.error('Failed to load watch rooms:', e);
+        } finally {
+            watchRoomsLoading = false;
+        }
+    }
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatViews(count) {
+        if (count >= 1000000) return (count / 1000000).toFixed(1) + 'M';
+        if (count >= 1000) return (count / 1000).toFixed(1) + 'K';
+        return count.toString();
+    }
+
+    function formatBitrate(bps) {
+        if (!bps) return '';
+        const kbps = Math.round(bps / 1000);
+        if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
+        return kbps + ' kbps';
+    }
+
+    function togglePlaylist(audio) {
+        // If already in playlist, remove it; otherwise add it
+        if (playlistIds.has(audio.id)) {
+            audioPlaylist.removeTrack(audio.id);
+        } else {
+            audioPlaylist.addTrack({
+                id: audio.id,
+                title: audio.title,
+                username: audio.username,
+                filePath: audio.filePath,
+                thumbnailPath: audio.thumbnailPath || '',
+                durationSeconds: audio.durationSeconds,
+                realmName: audio.realmName
+            });
+        }
+    }
+
+    function togglePlay(audio) {
+        // If this audio is currently playing, toggle play/pause
+        if ($currentTrack && $currentTrack.id === audio.id) {
+            audioPlaylist.togglePlay();
+        } else {
+            // Otherwise, play this track
+            audioPlaylist.playTrack({
+                id: audio.id,
+                title: audio.title,
+                username: audio.username,
+                filePath: audio.filePath,
+                thumbnailPath: audio.thumbnailPath || '',
+                durationSeconds: audio.durationSeconds,
+                realmName: audio.realmName
+            });
+        }
+    }
+
+    // Check if a specific audio is currently playing
+    function isCurrentlyPlaying(audioId) {
+        return $currentTrack && $currentTrack.id === audioId && $audioPlaylist.isPlaying;
+    }
+
+    // Reactive set of playlist IDs for checking if audio is in playlist
+    $: playlistIds = new Set($audioPlaylist.queue.map(t => t.id));
+
     onMount(() => {
         loadStreams();
-        // Refresh every 10 seconds
+        loadVideos();
+        loadAudio();
+        loadEbooks();
+        loadWatchRooms();
+        // Refresh streams every 10 seconds
         interval = setInterval(loadStreams, 10000);
-        
+
+        // Listen for stream status changes via WebSocket for instant refresh
+        connectWebSocket((data) => {
+            if (data.type === 'stream_live' || data.type === 'stream_offline') {
+                loadStreams(); // Immediate refresh when stream status changes
+            }
+        });
+
+        // Dev console easter egg
+        console.log(`%c
+⠀⠀⠀⣤⣄⡀⠀⠀⠀⠀∣⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+⠀⠀⢰⠈⣿⣿⣿⣦⡄⠀⠀⠀⠹⠿⠿⠿⢿⣿⣿⠟⠋⢁⢀⣿
+⠀⠀⠘⡆⠙⣿⣿⡄⠀⠀⠀⠈⢙⣀⡀⠀⣀⠀⠀⠠⠶⣡⣿⣿
+⣷⡄⠀⠙⣐⣬⠁⠀⠀⠐⡎⣊⣉⡍⠃⢸⣿⣷⢒⡒⢆⠙⣿⣿
+⠆⣁⠠⠀⣀⣒⠒⠂⢄⣐⣧⣉⣀⡴⢃⡼⢿⣧⣐⣠⡾⢠⣿⣿
+⡥⠒⠿⠧⢄⠀⠘⠛⠛⠛⣓⣦⣈⢤⣿⣿⣦⡍⣡⡧⡄⠀⣛⣻
+⡒⠶⠖⠒⠛⠋⠉⣋⣭⣿⣉⣀⠈⠳⠿⠟⠋⠘⣿⣯⠗⠠⢤⣐
+⢑⠊⠂⢀⠠⠒⢪⢉⣰⣦⣑⠋⣀⡀⢀⣀⠀⠀⠘⠀⣤⣛⠶⣾
+⠀⠠⠙⠚⡐⣼⣾⣿⣿⠿⣿⣆⠹⣿⣾⡏⣤⡇⣶⣿⣾⣿⣿⣿
+⠀⠢⢻⣀⠀⠙⡛⡛⠃⠀⢻⣮⠑⠈⣉⣠⠞⣴⣿⣿⣿⣿⣿⣿
+⠀⠒⠁⣐⠤⣱⢄⡒⡀⢀⠈⠛⠿⠒⠂⠀⣾⣿⣿⣿⣿⣿⣿⣿
+⠀⠂⠀⠀⡑⠈⠻⠻⠀⡀⠀⡀⠋⠁⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿
+`, 'color: #561D5E; font-size: 10px; font-family: monospace;');
+
         return () => {
             if (interval) clearInterval(interval);
+            disconnectWebSocket();
         };
     });
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title}</title>
+</svelte:head>
+
 <style>
     .hero {
         text-align: center;
@@ -84,7 +254,61 @@
         align-items: center;
         justify-content: center;
         position: relative;
+        overflow: hidden;
     }
+
+    .stream-thumbnail img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        z-index: 1;
+    }
+
+    .stream-thumbnail .placeholder-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        z-index: 0;
+    }
+
+    .stream-thumbnail .placeholder-initial {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--primary), #8b3a92);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: white;
+        position: relative;
+    }
+
+    .stream-thumbnail .live-pulse {
+        position: absolute;
+        inset: -4px;
+        border-radius: 50%;
+        border: 2px solid var(--primary);
+        animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+        50% {
+            opacity: 0.3;
+            transform: scale(1.1);
+        }
+    }
+
     
     .live-badge {
         position: absolute;
@@ -97,6 +321,7 @@
         font-size: 0.85rem;
         font-weight: 600;
         text-transform: uppercase;
+        z-index: 2;
     }
     
     .stream-info {
@@ -155,6 +380,586 @@
         margin-bottom: 1rem;
         opacity: 0.5;
     }
+
+    /* Videos section */
+    .videos-section {
+        margin-top: 4rem;
+        padding-top: 2rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .section-header h2 {
+        font-size: 1.75rem;
+        margin: 0;
+    }
+
+    .see-all-link {
+        color: var(--primary);
+        text-decoration: none;
+        font-size: 0.95rem;
+    }
+
+    .see-all-link:hover {
+        text-decoration: underline;
+    }
+
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .video-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .video-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(86, 29, 94, 0.25);
+        border-color: var(--primary);
+    }
+
+    .video-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 2.5rem;
+        opacity: 0.3;
+    }
+
+    .duration-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.85);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-info {
+        padding: 1rem;
+    }
+
+    .video-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 0.95rem;
+        line-height: 1.35;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .video-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .video-uploader {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+    }
+
+    .video-uploader-avatar {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--gray);
+    }
+
+    /* Audio section - Line item style */
+    .audio-section {
+        margin-top: 4rem;
+        padding-top: 2rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .audio-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .audio-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        transition: all 0.2s;
+    }
+
+    .audio-item:hover {
+        border-color: #ec4899;
+        background: rgba(236, 72, 153, 0.05);
+    }
+
+    .audio-number {
+        width: 24px;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.85rem;
+        flex-shrink: 0;
+    }
+
+    .audio-thumb {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .audio-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .audio-thumb .placeholder {
+        font-size: 1.2rem;
+        opacity: 0.5;
+    }
+
+    .audio-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .audio-title {
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: var(--white);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .audio-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--gray);
+        font-size: 0.75rem;
+        margin-top: 0.15rem;
+    }
+
+    .audio-realm-link {
+        color: #ec4899;
+        text-decoration: none;
+    }
+
+    .audio-realm-link:hover {
+        text-decoration: underline;
+    }
+
+    .audio-bitrate {
+        color: #ec4899;
+    }
+
+    .audio-duration {
+        font-family: monospace;
+        color: var(--gray);
+        font-size: 0.85rem;
+        min-width: 45px;
+        text-align: right;
+        flex-shrink: 0;
+    }
+
+    .audio-actions {
+        display: flex;
+        gap: 0.4rem;
+        flex-shrink: 0;
+    }
+
+    .audio-action-btn {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--gray);
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .audio-action-btn:hover {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .audio-action-btn.play {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: rgba(236, 72, 153, 0.4);
+        color: #ec4899;
+    }
+
+    .audio-action-btn.play:hover {
+        background: #ec4899;
+        color: white;
+    }
+
+    .audio-action-btn.added {
+        background: rgba(126, 231, 135, 0.2);
+        border-color: #7ee787;
+        color: #7ee787;
+    }
+
+    /* Watch rooms section */
+    .watch-rooms-section {
+        margin-top: 3rem;
+    }
+
+    .watch-rooms-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .watch-room-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        text-decoration: none;
+        color: var(--white);
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .watch-room-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(86, 29, 94, 0.3);
+        border-color: var(--primary);
+    }
+
+    .watch-room-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .watch-room-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .watch-room-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--gray);
+    }
+
+    .watch-room-live-badge {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        background: var(--primary);
+        color: white;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.7rem;
+        font-weight: 600;
+    }
+
+    .watch-room-queue-badge {
+        position: absolute;
+        bottom: 8px;
+        right: 8px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+    }
+
+    .watch-room-info {
+        padding: 1rem;
+    }
+
+    .watch-room-info h3 {
+        font-size: 1rem;
+        margin: 0 0 0.5rem 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-room-current {
+        font-size: 0.85rem;
+        color: var(--gray);
+        margin-bottom: 0.5rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-room-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+    }
+
+    .watch-room-owner {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.85rem;
+    }
+
+    .watch-room-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.7rem;
+        font-weight: 600;
+        color: white;
+    }
+
+    .watch-room-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    .watch-room-viewers {
+        font-size: 0.8rem;
+        color: var(--gray);
+    }
+
+    /* Ebooks section */
+    .ebooks-section {
+        margin-top: 3rem;
+    }
+
+    .ebooks-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .ebook-card {
+        text-decoration: none;
+        color: var(--white);
+        transition: transform 0.2s;
+    }
+
+    .ebook-card:hover {
+        transform: translateY(-4px);
+    }
+
+    .ebook-cover {
+        aspect-ratio: 2/3;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #1a1a1a;
+        margin-bottom: 0.75rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .ebook-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .ebook-cover-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+    }
+
+    .ebook-cover-placeholder span {
+        font-size: 3rem;
+        opacity: 0.5;
+    }
+
+    .ebook-info h3 {
+        font-size: 0.95rem;
+        margin: 0 0 0.25rem 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .ebook-author {
+        font-size: 0.85rem;
+        color: var(--gray);
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .ebook-meta {
+        font-size: 0.8rem;
+        color: #666;
+    }
+
+    .ebook-uploader {
+        color: #10b981;
+    }
+
+    /* Watch Realms Section */
+    .watch-realms-section {
+        margin-top: 3rem;
+        padding-top: 2rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .watch-realms-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .watch-realms-list.offline {
+        opacity: 0.6;
+    }
+
+    .watch-realms-offline-label {
+        margin-top: 1.5rem;
+        margin-bottom: 0.75rem;
+        font-size: 0.85rem;
+        color: var(--gray);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .watch-realm-item {
+        display: grid;
+        grid-template-columns: 12px 1fr 2fr auto;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        text-decoration: none;
+        color: var(--white);
+        transition: all 0.2s;
+    }
+
+    .watch-realm-item:hover {
+        background: #1a1a1a;
+        border-color: var(--primary);
+    }
+
+    .watch-realm-item.offline:hover {
+        border-color: var(--border);
+        background: #151515;
+    }
+
+    .watch-realm-status {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--gray);
+    }
+
+    .watch-realm-status.playing {
+        background: #22c55e;
+        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+    }
+
+    .watch-realm-name {
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-realm-video {
+        font-size: 0.9rem;
+        color: var(--gray);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .watch-realm-video.empty {
+        font-style: italic;
+        opacity: 0.5;
+    }
+
+    .watch-realm-owner {
+        font-size: 0.85rem;
+        white-space: nowrap;
+    }
+
+    @media (max-width: 768px) {
+        .watch-realm-item {
+            grid-template-columns: 12px 1fr;
+            grid-template-rows: auto auto;
+            gap: 0.25rem 0.75rem;
+        }
+
+        .watch-realm-video {
+            grid-column: 2;
+            font-size: 0.8rem;
+        }
+
+        .watch-realm-owner {
+            display: none;
+        }
+    }
 </style>
 
 <div class="container">
@@ -179,10 +984,21 @@
                 <a href={`/${stream.name}/live`} class="stream-card">
                     <div class="stream-thumbnail">
                         <div class="live-badge">LIVE</div>
-                        <span style="font-size: 3rem; opacity: 0.3;">🎮</span>
+                        {#if stream.streamKey}
+                            <img
+                                src={`/thumb/${stream.streamKey}.webp`}
+                                alt={stream.name}
+                            />
+                        {/if}
+                        <div class="placeholder-container">
+                            <div class="placeholder-initial">
+                                <div class="live-pulse"></div>
+                                {stream.name.charAt(0).toUpperCase()}
+                            </div>
+                        </div>
                     </div>
                     <div class="stream-info">
-                        <h3>{stream.name}</h3>
+                        <h3 style="color: {stream.titleColor || '#ffffff'};">{stream.name}</h3>
                         <div class="stream-meta">
                             <div class="streamer-info">
                                 {#if stream.avatarUrl}
@@ -201,4 +1017,190 @@
             {/each}
         </div>
     {/if}
+
+    <!-- Latest Videos Section -->
+    {#if !videosLoading && videos.length > 0}
+        <div class="videos-section">
+            <div class="section-header">
+                <h2>Latest Videos</h2>
+                <a href="/video" class="see-all-link">See all videos</a>
+            </div>
+            <div class="video-grid">
+                {#each videos as video}
+                    <a href={`/watch/${video.id}`} class="video-card">
+                        <div class="video-thumbnail">
+                            {#if video.thumbnailPath}
+                                <img src={video.thumbnailPath} alt={video.title} />
+                            {:else}
+                                <span class="placeholder">🎬</span>
+                            {/if}
+                            <span class="duration-badge">{formatDuration(video.durationSeconds)}</span>
+                        </div>
+                        <div class="video-info">
+                            <h3>{video.title}</h3>
+                            <div class="video-meta">
+                                <div class="video-uploader">
+                                    {#if video.avatarUrl}
+                                        <img src={video.avatarUrl} alt={video.username} class="video-uploader-avatar" />
+                                    {:else}
+                                        <div class="video-uploader-avatar"></div>
+                                    {/if}
+                                    <span>{video.username}</span>
+                                </div>
+                                <span>•</span>
+                                <span>{formatViews(video.viewCount)} views</span>
+                            </div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
+    <!-- Latest Audio Section -->
+    {#if !audioLoading && audioFiles.length > 0}
+        <div class="audio-section">
+            <div class="section-header">
+                <h2>Latest Audio</h2>
+                <a href="/audio" class="see-all-link">See all audio</a>
+            </div>
+            <div class="audio-list">
+                {#each audioFiles.slice(0, 5) as audio, index}
+                    <div class="audio-item">
+                        <span class="audio-number">{index + 1}</span>
+                        <div class="audio-thumb">
+                            {#if audio.thumbnailPath}
+                                <img src={audio.thumbnailPath} alt={audio.title} />
+                            {:else}
+                                <span class="placeholder">🎵</span>
+                            {/if}
+                        </div>
+                        <div class="audio-info">
+                            <div class="audio-title">{audio.title}</div>
+                            <div class="audio-meta">
+                                <span>{audio.username}</span>
+                                {#if audio.realmName}
+                                    <span>•</span>
+                                    <a href={`/audio/${encodeURIComponent(audio.realmName)}`} class="audio-realm-link">{audio.realmName}</a>
+                                {/if}
+                                {#if audio.bitrate}
+                                    <span>•</span>
+                                    <span class="audio-bitrate">{formatBitrate(audio.bitrate)}</span>
+                                {/if}
+                            </div>
+                        </div>
+                        <span class="audio-duration">{formatDuration(audio.durationSeconds)}</span>
+                        <div class="audio-actions">
+                            <button
+                                class="audio-action-btn play"
+                                class:playing={isCurrentlyPlaying(audio.id)}
+                                on:click={() => togglePlay(audio)}
+                                title={isCurrentlyPlaying(audio.id) ? 'Pause' : 'Play'}
+                            >
+                                {isCurrentlyPlaying(audio.id) ? '❚❚' : '▶'}
+                            </button>
+                            <button
+                                class="audio-action-btn"
+                                class:added={playlistIds.has(audio.id)}
+                                on:click={() => togglePlaylist(audio)}
+                                title={playlistIds.has(audio.id) ? 'Remove from playlist' : 'Add to playlist'}
+                            >
+                                {playlistIds.has(audio.id) ? '✓' : '+'}
+                            </button>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
+    <!-- Watch Rooms Section - Only show rooms with a video currently playing -->
+    {#if !watchRoomsLoading && watchRooms.filter(r => r.currentVideoTitle).length > 0}
+        <div class="watch-rooms-section">
+            <div class="section-header">
+                <h2>Watch Together</h2>
+            </div>
+            <div class="watch-rooms-grid">
+                {#each watchRooms.filter(r => r.currentVideoTitle) as room}
+                    <a href={`/${room.name}/watch`} class="watch-room-card">
+                        <div class="watch-room-thumbnail">
+                            {#if room.currentThumbnail}
+                                <img src={room.currentThumbnail} alt={room.currentVideoTitle || 'Now playing'} />
+                            {:else}
+                                <div class="watch-room-placeholder">
+                                    <svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48">
+                                        <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+                                    </svg>
+                                </div>
+                            {/if}
+                            {#if room.playbackState === 'playing'}
+                                <span class="watch-room-live-badge">PLAYING</span>
+                            {/if}
+                            {#if room.queuedCount > 0}
+                                <span class="watch-room-queue-badge">{room.queuedCount} in queue</span>
+                            {/if}
+                        </div>
+                        <div class="watch-room-info">
+                            <h3>{room.name}</h3>
+                            {#if room.currentVideoTitle}
+                                <div class="watch-room-current" title={room.currentVideoTitle}>
+                                    {room.currentVideoTitle}
+                                </div>
+                            {/if}
+                            <div class="watch-room-meta">
+                                <div class="watch-room-owner">
+                                    {#if room.avatarUrl}
+                                        <img src={room.avatarUrl} alt={room.username} class="watch-room-avatar" />
+                                    {:else}
+                                        <div class="watch-room-avatar" style="background: {room.colorCode}">
+                                            {room.username?.charAt(0).toUpperCase() || '?'}
+                                        </div>
+                                    {/if}
+                                    <span style="color: {room.colorCode}">{room.username}</span>
+                                </div>
+                                {#if room.viewerCount > 0}
+                                    <span class="watch-room-viewers">{room.viewerCount} watching</span>
+                                {/if}
+                            </div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
+    <!-- Latest Ebooks Section -->
+    {#if !ebooksLoading && ebookFiles.length > 0}
+        <div class="ebooks-section">
+            <div class="section-header">
+                <h2>Latest Ebooks</h2>
+                <a href="/ebooks" class="see-all-link">See all ebooks</a>
+            </div>
+            <div class="ebooks-grid">
+                {#each ebookFiles as ebook}
+                    <a href={`/read/${ebook.id}`} class="ebook-card">
+                        <div class="ebook-cover">
+                            {#if ebook.coverPath}
+                                <img src={ebook.coverPath} alt={ebook.title} />
+                            {:else}
+                                <div class="ebook-cover-placeholder">
+                                    <span>📚</span>
+                                </div>
+                            {/if}
+                        </div>
+                        <div class="ebook-info">
+                            <h3>{ebook.title}</h3>
+                            {#if ebook.author}
+                                <span class="ebook-author">{ebook.author}</span>
+                            {/if}
+                            <div class="ebook-meta">
+                                <span class="ebook-uploader">by @{ebook.username}</span>
+                            </div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/routes/[realm]/live/+page.svelte b/frontend/src/routes/[realm]/live/+page.svelte
index e2fdde2..c47dc94 100644
--- a/frontend/src/routes/[realm]/live/+page.svelte
+++ b/frontend/src/routes/[realm]/live/+page.svelte
@@ -1,14 +1,16 @@
 <script>
     import { onMount, onDestroy } from 'svelte';
     import { page } from '$app/stores';
-    import { auth } from '$lib/stores/auth';
+    import { browser } from '$app/environment';
+    import { auth, userColor } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { connectWebSocket, disconnectWebSocket } from '$lib/websocket';
     import { goto } from '$app/navigation';
-    
-    // Import CSS that's safe for SSR
-    import '@fortawesome/fontawesome-free/css/all.min.css';
-    import 'mdb-ui-kit/css/mdb.min.css';
-    
+    import ChatPanel from '$lib/components/chat/ChatPanel.svelte';
+    import { chatLayout } from '$lib/stores/chatLayout';
+    import { streamTiles } from '$lib/stores/streamTiles';
+    import StreamPlayer from '$lib/components/StreamPlayer.svelte';
+
     // Browser-only imports
     let Hls;
     let OvenPlayer;
@@ -35,10 +37,18 @@
     let error = '';
     let message = '';
     let isStreaming = false;
+    let playerPlaying = false;  // Most reliable indicator: true only when player.state === 'playing'
+    let playerInitializing = true;  // Grace period to prevent offline flash during player init
+    let playerBuffering = false;  // True when player is buffering/loading (intermediate state)
     let heartbeatInterval;
     let viewerToken = null;
     let statsInterval;
-    
+    let playerReconnectAttempts = 0;
+    const maxPlayerReconnects = 5;
+    let llhlsRetryAttempts = 0;
+    const maxLlhlsRetries = 3;  // Retry LLHLS 3 times before falling back to WebRTC
+    let llhlsRetryTimeout = null;
+
     // Stats
     let stats = {
         connections: 0,
@@ -128,6 +138,9 @@
         if (statsInterval) {
             clearInterval(statsInterval);
         }
+        if (llhlsRetryTimeout) {
+            clearTimeout(llhlsRetryTimeout);
+        }
         disconnectWebSocket();
     });
     
@@ -244,7 +257,7 @@
                     console.error('Failed to fetch stats:', error);
                 }
             }
-        }, 2000);
+        }, 5000);  // Match backend polling interval (5 seconds)
     }
     
     function updateStatsFromData(data) {
@@ -256,9 +269,13 @@
             fps: data.fps || 0,
             isLive: data.is_live || false
         };
-        
-        isStreaming = stats.isLive;
-        
+
+        // Only update isStreaming from stats if player isn't actively playing
+        // This prevents stats from overriding the player's live state during connection
+        if (!playerPlaying) {
+            isStreaming = stats.isLive;
+        }
+
         // Update viewer count in realm info if different
         if (realm && realm.viewerCount !== stats.connections) {
             realm.viewerCount = stats.connections;
@@ -280,29 +297,29 @@
         const sources = [];
         
         if (streamKey) {
-            // Add all sources
+            // Add all sources - LLHLS first (default), then HLS, then WebRTC as fallback
             sources.push(
-                {
-                    type: 'webrtc',
-                    file: `ws://localhost:3333/app/${streamKey}`,
-                    label: 'WebRTC (Ultra Low Latency)'
-                },
                 {
                     type: 'hls',
-                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/llhls.m3u8`,
+                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/llhls.m3u8?token=${viewerToken}`,
                     label: 'LLHLS (Low Latency)'
                 },
                 {
                     type: 'hls',
-                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/ts:playlist.m3u8`,
+                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/ts:playlist.m3u8?token=${viewerToken}`,
                     label: 'HLS (Standard)'
+                },
+                {
+                    type: 'webrtc',
+                    file: `ws://localhost:3333/app/${streamKey}`,
+                    label: 'WebRTC (Ultra Low Latency)'
                 }
             );
         }
         
         const config = {
             autoStart: true,
-            autoFallback: true,
+            autoFallback: false,  // Disable auto-fallback to control source priority manually
             controls: true,
             showBigPlayButton: true,
             watermark: false,
@@ -319,42 +336,123 @@
                 lowLatencyMode: true,
                 backBufferLength: 90,
                 xhrSetup: function(xhr, url) {
+                    // Add viewer token to HLS segment requests (not playlists, which already have it)
+                    // Only add if token is not already present in the URL
+                    if (viewerToken && url.includes('/app/') && !url.includes('token=')) {
+                        const separator = url.includes('?') ? '&' : '?';
+                        xhr.open('GET', url + separator + 'token=' + viewerToken, true);
+                    }
                     xhr.withCredentials = true;
                 }
             }
         };
-        
+
         try {
             player = window.OvenPlayer.create('player', config);
-            
+
             player.on('error', (error) => {
                 console.error('Player error:', error);
-                isStreaming = false;
-                
+                playerPlaying = false;
+
+                // Handle auth errors
                 if (error.code === 403 || error.code === 401) {
+                    playerReconnectAttempts++;
+                    console.log(`Player reconnect attempt ${playerReconnectAttempts}/${maxPlayerReconnects}`);
+
+                    if (playerReconnectAttempts >= maxPlayerReconnects) {
+                        console.error('Max player reconnect attempts reached');
+                        message = 'Unable to connect to stream. Please refresh the page to try again.';
+                        return;
+                    }
+
                     getViewerToken().then(() => {
                         if (player) {
                             player.remove();
                             setTimeout(initializePlayer, 500);
                         }
                     });
+                    return;
+                }
+
+                // Handle source errors - retry LLHLS before falling back to WebRTC
+                const currentSource = player.getCurrentSource();
+                console.log('Current source index:', currentSource, 'LLHLS retries:', llhlsRetryAttempts);
+
+                if (currentSource === 0) {
+                    // Currently on LLHLS (first source)
+                    llhlsRetryAttempts++;
+                    if (llhlsRetryAttempts <= maxLlhlsRetries) {
+                        // Retry LLHLS after a short delay (segments might not be ready yet)
+                        console.log(`LLHLS retry ${llhlsRetryAttempts}/${maxLlhlsRetries} in 2 seconds...`);
+                        if (llhlsRetryTimeout) clearTimeout(llhlsRetryTimeout);
+                        llhlsRetryTimeout = setTimeout(() => {
+                            if (player) {
+                                console.log('Retrying LLHLS...');
+                                player.setCurrentSource(0);  // Re-select LLHLS
+                            }
+                        }, 2000);
+                    } else {
+                        // Max LLHLS retries reached, try HLS (source 1)
+                        console.log('Max LLHLS retries reached, trying HLS...');
+                        player.setCurrentSource(1);
+                    }
+                } else if (currentSource === 1) {
+                    // HLS failed, fall back to WebRTC (source 2)
+                    console.log('HLS failed, falling back to WebRTC...');
+                    player.setCurrentSource(2);
+                } else {
+                    // WebRTC also failed - stream might be offline
+                    console.log('All sources failed - stream may be offline');
+                    isStreaming = false;
                 }
             });
-            
+
             player.on('stateChanged', (data) => {
+                console.log('Player state changed:', data.newstate);
+
+                // Track buffering state - player is trying to connect
+                if (data.newstate === 'loading' || data.newstate === 'buffering' || data.newstate === 'stalled') {
+                    playerBuffering = true;
+                } else {
+                    playerBuffering = false;
+                }
+
+                // End initialization grace period on first meaningful state
+                if (data.newstate === 'playing' || data.newstate === 'paused' || data.newstate === 'error') {
+                    playerInitializing = false;
+                }
+
                 if (data.newstate === 'playing') {
+                    playerPlaying = true;
                     isStreaming = true;
                     message = '';
-                } else if (data.newstate === 'error' || data.newstate === 'idle') {
-                    if (!stats.isLive) {
-                        isStreaming = false;
+                    playerReconnectAttempts = 0; // Reset on successful playback
+                    llhlsRetryAttempts = 0;  // Reset LLHLS retries on success
+                    if (llhlsRetryTimeout) {
+                        clearTimeout(llhlsRetryTimeout);
+                        llhlsRetryTimeout = null;
                     }
+                } else if (data.newstate === 'error' || data.newstate === 'idle') {
+                    playerPlaying = false;
+                    // Don't set isStreaming = false here - let stats decide when stream is truly offline
+                    // This prevents flickering when player temporarily enters idle/error states
                 }
             });
-            
+
             player.on('play', () => {
+                playerInitializing = false;
+                playerPlaying = true;
                 isStreaming = true;
+                playerReconnectAttempts = 0; // Reset on successful play
+                llhlsRetryAttempts = 0;  // Reset LLHLS retries on success
             });
+
+            // Fallback: end initialization grace period after 5 seconds
+            // This ensures offline overlay shows if stream truly isn't live
+            // 5s gives LLHLS enough time to buffer and start playing
+            setTimeout(() => {
+                playerInitializing = false;
+            }, 5000);
             
         } catch (e) {
             console.error('Failed to create player:', e);
@@ -371,22 +469,87 @@
             return bitrate + ' bps';
         }
     }
+
+    // Tiled streams (exclude current stream)
+    $: tiledStreams = $streamTiles.streams.filter(s => s.streamKey !== streamKey);
+    $: hasTiledStreams = tiledStreams.length > 0;
+    $: totalStreams = hasTiledStreams ? tiledStreams.length + 1 : 1; // +1 for main stream
+    $: gridClass = totalStreams === 2 ? 'grid-2' : totalStreams >= 3 ? 'grid-4' : '';
+
+    // Track previous layout to detect changes
+    let prevTotalStreams = 1;
+
+    // Reinitialize main player when layout changes (DOM element gets recreated)
+    $: if (browser && totalStreams !== prevTotalStreams && viewerToken && streamKey) {
+        prevTotalStreams = totalStreams;
+        // Wait for DOM to update, then reinitialize player
+        setTimeout(() => {
+            if (player) {
+                try {
+                    player.remove();
+                } catch (e) {}
+                player = null;
+            }
+            // Reset player states
+            llhlsRetryAttempts = 0;
+            playerInitializing = true;
+            initializePlayer();
+        }, 100);
+    }
+
+    // Resizable dividers
+    let isDraggingH = false;
+    let isDraggingV = false;
+    let gridContainer;
+
+    function startHorizontalDrag(e) {
+        isDraggingH = true;
+        e.preventDefault();
+        document.addEventListener('mousemove', handleHorizontalDrag);
+        document.addEventListener('mouseup', stopDrag);
+    }
+
+    function startVerticalDrag(e) {
+        isDraggingV = true;
+        e.preventDefault();
+        document.addEventListener('mousemove', handleVerticalDrag);
+        document.addEventListener('mouseup', stopDrag);
+    }
+
+    function handleHorizontalDrag(e) {
+        if (!isDraggingH || !gridContainer) return;
+        const rect = gridContainer.getBoundingClientRect();
+        const percent = ((e.clientX - rect.left) / rect.width) * 100;
+        streamTiles.setHorizontalSplit(percent);
+    }
+
+    function handleVerticalDrag(e) {
+        if (!isDraggingV || !gridContainer) return;
+        const rect = gridContainer.getBoundingClientRect();
+        const percent = ((e.clientY - rect.top) / rect.height) * 100;
+        streamTiles.setVerticalSplit(percent);
+    }
+
+    function stopDrag() {
+        isDraggingH = false;
+        isDraggingV = false;
+        document.removeEventListener('mousemove', handleHorizontalDrag);
+        document.removeEventListener('mousemove', handleVerticalDrag);
+        document.removeEventListener('mouseup', stopDrag);
+    }
 </script>
 
+<svelte:head>
+    <title>{realm ? `${$siteSettings.site_title} - ${realm.name}` : $siteSettings.site_title}</title>
+</svelte:head>
+
 <style>
-    /* Fix the background color issue */
-    :global(body) {
-        background: var(--black) !important;
-        color: var(--white) !important;
-    }
-    
     .stream-container {
-        max-width: 1400px;
+        max-width: 100%;
         margin: 0 auto;
-        padding: 2rem;
         display: grid;
-        grid-template-columns: 1fr 320px;
-        gap: 2rem;
+        grid-template-columns: 1fr 22.2%;
+        gap: 0.33rem;
         background: var(--black);
         color: var(--white);
     }
@@ -410,20 +573,6 @@
         position: relative;
     }
     
-    .player-wrapper::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, 
-            var(--user-color, var(--primary)) 0%, 
-            var(--user-color, var(--primary)) 50%, 
-            rgba(255, 255, 255, 0.1) 100%
-        );
-        z-index: 1;
-    }
     
     .player-area {
         position: relative;
@@ -453,11 +602,11 @@
         background: #111;
         border: 1px solid var(--border);
         border-radius: 8px;
-        padding: 1.5rem;
+        padding: 1rem;
         position: relative;
         overflow: hidden;
     }
-    
+
     .stream-info-section::before {
         content: '';
         position: absolute;
@@ -468,14 +617,52 @@
         background: var(--user-color, var(--primary));
         opacity: 0.6;
     }
-    
+
     .stream-header {
-        margin-bottom: 1.5rem;
         padding-left: 1rem;
     }
-    
+
+    .header-top {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .live-status-badge {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .badge-segment {
+        font-size: 0.8rem;
+        color: var(--gray);
+        padding: 0.3rem 0.6rem;
+    }
+
+    .badge-segment.status {
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 0.75rem;
+        letter-spacing: 0.5px;
+    }
+
+    .badge-segment.status.live {
+        color: #ff4444;
+    }
+
+    .badge-divider {
+        width: 1px;
+        height: 1rem;
+        background: rgba(255, 255, 255, 0.15);
+    }
+
     .stream-header h1 {
-        margin: 0 0 0.5rem 0;
+        margin: 0;
         font-size: 1.5rem;
         color: var(--white);
     }
@@ -484,7 +671,10 @@
         display: flex;
         align-items: center;
         gap: 0.75rem;
-        margin-bottom: 1rem;
+    }
+
+    .streamer-details {
+        flex: 1;
     }
     
     .streamer-avatar {
@@ -524,24 +714,72 @@
         font-weight: 600;
         color: var(--white);
         font-size: 1.1rem;
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+
+    .streamer-name:hover {
+        color: var(--primary);
     }
     
     .viewer-count {
-        font-size: 0.9rem;
+        font-size: 0.875rem;
         color: var(--gray);
     }
-    
+
+    .compact-stats {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        color: var(--gray);
+        margin-top: 0.25rem;
+    }
+
+    .stat-compact {
+        color: var(--gray);
+    }
+
+    .stat-separator {
+        color: rgba(255, 255, 255, 0.3);
+        font-weight: bold;
+    }
+
+    .stream-description {
+        margin-top: 1rem;
+        padding: 0.75rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 4px;
+        color: var(--gray);
+        font-size: 0.9rem;
+        line-height: 1.5;
+        white-space: pre-wrap;
+    }
+
     .sidebar {
         display: flex;
         flex-direction: column;
-        gap: 1.5rem;
+        gap: 0;
+        overflow: hidden;
     }
-    
+
     .stats-section {
         background: #111;
         border: 1px solid var(--border);
         border-radius: 8px;
         padding: 1.5rem;
+        flex-shrink: 0; /* Don't shrink stats section */
+    }
+
+    .chat-section {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        overflow: hidden;
+        flex: 1 1 0; /* Grow and shrink to fill remaining space */
+        min-height: 0; /* Allow shrinking below content size */
+        display: flex;
+        flex-direction: column;
     }
     
     .stats-section h3 {
@@ -554,64 +792,106 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        padding: 0.5rem 1rem;
+        padding: 0.35rem 0.75rem;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 20px;
-        font-size: 0.9rem;
-        margin-bottom: 1rem;
-    }
-    
-    .status-indicator.active {
-        background: rgba(40, 167, 69, 0.2);
-        color: var(--success);
-    }
-    
-    .status-indicator.inactive {
-        background: rgba(220, 53, 69, 0.2);
-        color: var(--error);
-    }
-    
-    .stats-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-    
-    .stat-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .stat-item:last-child {
-        border-bottom: none;
-    }
-    
-    .stat-label {
-        color: var(--gray);
-        font-size: 0.9rem;
-    }
-    
-    .stat-value {
+        font-size: 0.75rem;
         font-weight: 600;
-        font-family: monospace;
-        color: var(--white);
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
     }
-    
+
+    .status-indicator.active {
+        background: rgba(255, 0, 0, 0.15);
+        color: #ff4444;
+    }
+
+    .status-indicator.inactive {
+        background: rgba(128, 128, 128, 0.2);
+        color: var(--gray);
+    }
+
+    .status-indicator.active::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background: #ff0000;
+        border-radius: 50%;
+        animation: pulse 2s infinite;
+    }
+
+
     .offline-message {
         text-align: center;
         padding: 4rem 2rem;
         color: var(--gray);
     }
-    
+
     .offline-icon {
         font-size: 4rem;
         margin-bottom: 1rem;
         opacity: 0.5;
     }
-    
+
+    .offline-image-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10;
+        background: #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none; /* Allow clicks to pass through to chat sidebar */
+    }
+
+    .offline-image-overlay img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .offline-image-overlay .offline-badge {
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        padding: 0.5rem 1rem;
+        background: rgba(0, 0, 0, 0.7);
+        color: var(--gray);
+        border-radius: 4px;
+        font-size: 0.9rem;
+        font-weight: 600;
+    }
+
+    .offline-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
+    }
+
+    .offline-icon {
+        font-size: 4rem;
+        color: #444;
+        margin-bottom: 1rem;
+    }
+
+    .offline-text {
+        font-size: 1.5rem;
+        color: #555;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
     .error-container {
         text-align: center;
         padding: 4rem 2rem;
@@ -645,16 +925,252 @@
             opacity: 1;
         }
     }
-    
-    .status-indicator.active::before {
+
+    /* Chat on left side */
+    .stream-container.chat-left {
+        grid-template-columns: 22.2% 1fr;
+    }
+
+    .stream-container.chat-left .player-section {
+        order: 2;
+    }
+
+    .stream-container.chat-left .sidebar {
+        order: 1;
+    }
+
+    .stream-container.chat-left .chat-section {
+        border-radius: 8px;
+    }
+
+    /* Theater mode - overlay chat on video */
+    .stream-container.theater-mode {
+        grid-template-columns: 1fr;
+        position: relative;
+    }
+
+    .stream-container.theater-mode .player-section {
+        grid-column: 1;
+    }
+
+    .stream-container.theater-mode .player-wrapper {
+        /* Use nearly full viewport height since stream info is hidden */
+        max-width: min(100%, calc(95vh * 16 / 9));
+        max-height: 95vh;
+        margin: 0 auto; /* Center the video */
+    }
+
+    .stream-container.theater-mode .player-area {
+        max-height: 95vh;
+    }
+
+    .stream-container.theater-mode .dummy-player {
+        max-height: 95vh;
+    }
+
+    .stream-container.theater-mode .sidebar {
+        position: absolute;
+        top: 0;
+        width: 350px;
+        height: 100%;
+        z-index: 20; /* Higher than offline-overlay (z-index: 10) */
+    }
+
+    .stream-container.theater-mode .sidebar {
+        right: 0;
+    }
+
+    .stream-container.theater-mode.chat-left .sidebar {
+        right: auto;
+        left: 0;
+    }
+
+    .stream-container.theater-mode .chat-section {
+        background: transparent;
+        border: none;
+        pointer-events: auto; /* Ensure chat section receives pointer events */
+    }
+
+    /* Ensure offline overlay matches player constraints in theater mode */
+    .stream-container.theater-mode .offline-image-overlay {
+        border-radius: 12px; /* Match player-wrapper border-radius */
+        max-height: 95vh;
+    }
+
+    /* Hide stream info/description bar in theater mode for more video space */
+    .stream-container.theater-mode .stream-info-section {
+        display: none;
+    }
+
+    @media (max-width: 1024px) {
+        .stream-container.chat-left {
+            grid-template-columns: 1fr;
+        }
+
+        .stream-container.chat-left .player-section,
+        .stream-container.chat-left .sidebar {
+            order: unset;
+        }
+
+        .stream-container.theater-mode .sidebar {
+            position: relative;
+            width: 100%;
+        }
+    }
+
+    /* Stream grid layout for multiple streams - Resizable */
+    /* Grid fills the player-wrapper using absolute positioning */
+    .stream-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* When stream-grid is present, player-wrapper needs the dummy for aspect ratio */
+    .player-wrapper:has(.stream-grid) {
+        position: relative;
+    }
+
+    .player-wrapper:has(.stream-grid)::after {
         content: '';
-        display: inline-block;
+        display: block;
+        padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    }
+
+    .stream-grid-row {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .stream-tile-cell {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+    }
+
+    .stream-tile-wrapper {
+        position: relative;
+        background: #000;
+        border-radius: 4px;
+        overflow: hidden;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .stream-tile-wrapper.main-tile {
+        /* Main tile has subtle highlight */
+    }
+
+    .tile-player-area {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+    }
+
+    /* Nested player-area within tiles */
+    .stream-tile-wrapper .player-area {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .stream-tile-wrapper .dummy-player {
+        display: none; /* Not needed when parent has absolute positioning */
+    }
+
+    .stream-tile-wrapper .player-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    /* Resizable dividers */
+    .resize-divider-h {
         width: 8px;
+        cursor: col-resize;
+        background: transparent;
+        position: relative;
+        flex-shrink: 0;
+        z-index: 10;
+    }
+
+    .resize-divider-h::before {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: #333;
+        transition: background 0.15s;
+    }
+
+    .resize-divider-h:hover::before,
+    .resize-divider-h.dragging::before {
+        background: var(--primary, #8b5cf6);
+    }
+
+    .resize-divider-v {
         height: 8px;
-        background: #ff0000;
-        border-radius: 50%;
-        margin-right: 0.5rem;
-        animation: pulse 2s infinite;
+        cursor: row-resize;
+        background: transparent;
+        position: relative;
+        flex-shrink: 0;
+        z-index: 10;
+    }
+
+    .resize-divider-v::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #333;
+        transition: background 0.15s;
+    }
+
+    .resize-divider-v:hover::before,
+    .resize-divider-v.dragging::before {
+        background: var(--primary, #8b5cf6);
+    }
+
+    /* Empty tile placeholder */
+    .stream-tile-wrapper.empty-tile {
+        background: #0a0a0a;
+        border: 1px dashed #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .empty-tile-content {
+        color: #444;
+        font-size: 0.85rem;
+        text-align: center;
+    }
+
+    @media (max-width: 768px) {
+        .stream-grid {
+            flex-direction: column;
+        }
+        .stream-grid-row {
+            flex-direction: column;
+        }
+        .resize-divider-h,
+        .resize-divider-v {
+            display: none;
+        }
     }
 </style>
 
@@ -669,22 +1185,152 @@
         <a href="/" class="btn" style="margin-top: 2rem;">Back to Home</a>
     </div>
 {:else if realm}
-    <div class="stream-container">
+    <div
+        class="stream-container"
+        class:chat-left={$chatLayout.position === 'left'}
+        class:theater-mode={$chatLayout.theaterMode}
+    >
         <div class="player-section">
-            <div class="player-wrapper" style="--user-color: {realm.colorCode || '#561D5E'}">
-                <div class="player-area">
-                    <div class="dummy-player"></div>
-                    <div class="player-container">
-                        <div id="player"></div>
+            <!-- Player wrapper maintains consistent sizing for both single and multi-stream -->
+            <div class="player-wrapper">
+                {#if hasTiledStreams}
+                    <!-- Multi-stream resizable grid layout inside the wrapper -->
+                    <div class="stream-grid" bind:this={gridContainer}>
+                        {#if totalStreams === 2}
+                            <!-- 2 streams: side by side with horizontal divider -->
+                            <div class="stream-grid-row">
+                                <div class="stream-tile-cell" style="flex: {$streamTiles.horizontalSplit};">
+                                    <div class="stream-tile-wrapper main-tile">
+                                        <div class="tile-player-area">
+                                            <div class="player-area">
+                                                <div class="dummy-player"></div>
+                                                <div class="player-container">
+                                                    <div id="player"></div>
+                                                </div>
+                                                {#if !stats.isLive && !isStreaming && !playerPlaying && !playerInitializing && !playerBuffering}
+                                                    <div class="offline-image-overlay">
+                                                        {#if realm.offlineImageUrl}
+                                                            <img src={realm.offlineImageUrl} alt="Stream offline" />
+                                                        {:else}
+                                                            <div class="offline-placeholder">
+                                                                <div class="offline-icon">⏸</div>
+                                                                <div class="offline-text">{realm.name}</div>
+                                                            </div>
+                                                        {/if}
+                                                        <div class="offline-badge">OFFLINE</div>
+                                                    </div>
+                                                {/if}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="resize-divider-h" class:dragging={isDraggingH} on:mousedown={startHorizontalDrag}></div>
+                                <div class="stream-tile-cell" style="flex: {100 - $streamTiles.horizontalSplit};">
+                                    <StreamPlayer stream={tiledStreams[0]} showClose={true} />
+                                </div>
+                            </div>
+                        {:else if totalStreams >= 3}
+                            <!-- 3-4 streams: 2x2 grid with both dividers -->
+                            <div class="stream-grid-row" style="flex: {$streamTiles.verticalSplit};">
+                                <div class="stream-tile-cell" style="flex: {$streamTiles.horizontalSplit};">
+                                    <div class="stream-tile-wrapper main-tile">
+                                        <div class="tile-player-area">
+                                            <div class="player-area">
+                                                <div class="dummy-player"></div>
+                                                <div class="player-container">
+                                                    <div id="player"></div>
+                                                </div>
+                                                {#if !stats.isLive && !isStreaming && !playerPlaying && !playerInitializing && !playerBuffering}
+                                                    <div class="offline-image-overlay">
+                                                        {#if realm.offlineImageUrl}
+                                                            <img src={realm.offlineImageUrl} alt="Stream offline" />
+                                                        {:else}
+                                                            <div class="offline-placeholder">
+                                                                <div class="offline-icon">⏸</div>
+                                                                <div class="offline-text">{realm.name}</div>
+                                                            </div>
+                                                        {/if}
+                                                        <div class="offline-badge">OFFLINE</div>
+                                                    </div>
+                                                {/if}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="resize-divider-h" class:dragging={isDraggingH} on:mousedown={startHorizontalDrag}></div>
+                                <div class="stream-tile-cell" style="flex: {100 - $streamTiles.horizontalSplit};">
+                                    {#if tiledStreams[0]}
+                                        <StreamPlayer stream={tiledStreams[0]} showClose={true} />
+                                    {/if}
+                                </div>
+                            </div>
+                            <div class="resize-divider-v" class:dragging={isDraggingV} on:mousedown={startVerticalDrag}></div>
+                            <div class="stream-grid-row" style="flex: {100 - $streamTiles.verticalSplit};">
+                                <div class="stream-tile-cell" style="flex: {$streamTiles.horizontalSplit};">
+                                    {#if tiledStreams[1]}
+                                        <StreamPlayer stream={tiledStreams[1]} showClose={true} />
+                                    {:else}
+                                        <div class="stream-tile-wrapper empty-tile">
+                                            <div class="empty-tile-content">Add stream from terminal</div>
+                                        </div>
+                                    {/if}
+                                </div>
+                                <div class="resize-divider-h" class:dragging={isDraggingH} on:mousedown={startHorizontalDrag}></div>
+                                <div class="stream-tile-cell" style="flex: {100 - $streamTiles.horizontalSplit};">
+                                    {#if tiledStreams[2]}
+                                        <StreamPlayer stream={tiledStreams[2]} showClose={true} />
+                                    {:else}
+                                        <div class="stream-tile-wrapper empty-tile">
+                                            <div class="empty-tile-content">Add stream from terminal</div>
+                                        </div>
+                                    {/if}
+                                </div>
+                            </div>
+                        {/if}
                     </div>
-                </div>
+                {:else}
+                    <!-- Single stream layout -->
+                    <div class="player-area">
+                        <div class="dummy-player"></div>
+                        <div class="player-container">
+                            <div id="player"></div>
+                        </div>
+                        {#if !stats.isLive && !isStreaming && !playerPlaying && !playerInitializing && !playerBuffering}
+                            <div class="offline-image-overlay">
+                                {#if realm.offlineImageUrl}
+                                    <img src={realm.offlineImageUrl} alt="Stream offline" />
+                                {:else}
+                                    <div class="offline-placeholder">
+                                        <div class="offline-icon">⏸</div>
+                                        <div class="offline-text">{realm.name}</div>
+                                    </div>
+                                {/if}
+                                <div class="offline-badge">OFFLINE</div>
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
             </div>
             
             <div class="stream-info-section" style="--user-color: {realm.colorCode || '#561D5E'}">
                 <div class="stream-header">
-                    <h1>{realm.name}</h1>
+                    <div class="header-top">
+                        <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+                        <div class="live-status-badge" class:live={stats.isLive}>
+                            <span class="badge-segment">{stats.isLive ? stats.connections : realm.viewerCount} viewers</span>
+                            {#if stats.isLive && stats.bitrate > 0}
+                                <span class="badge-divider"></span>
+                                <span class="badge-segment">{formatBitrate(stats.bitrate)}</span>
+                            {/if}
+                            <span class="badge-divider"></span>
+                            <span class="badge-segment status" class:live={stats.isLive}>
+                                {stats.isLive ? 'LIVE' : 'Offline'}
+                            </span>
+                        </div>
+                    </div>
+
                     <div class="streamer-info">
-                        <div 
+                        <div
                             class="streamer-avatar"
                             class:has-color={realm.colorCode}
                             class:with-image={realm.avatarUrl}
@@ -696,65 +1342,28 @@
                                 {realm.username?.charAt(0).toUpperCase() || '?'}
                             {/if}
                         </div>
-                        <div>
-                            <div class="streamer-name">{realm.username}</div>
-                            <div class="viewer-count">
-                                {realm.viewerCount} {realm.viewerCount === 1 ? 'viewer' : 'viewers'}
-                            </div>
+                        <div class="streamer-details">
+                            <a href="/profile/{realm.username}" class="streamer-name">{realm.username}</a>
+                            {#if stats.isLive && stats.resolution !== 'N/A'}
+                                <div class="compact-stats">
+                                    <span class="stat-compact">{stats.resolution}</span>
+                                </div>
+                            {/if}
                         </div>
                     </div>
+
+                    {#if realm.description}
+                        <div class="stream-description">
+                            {realm.description}
+                        </div>
+                    {/if}
                 </div>
             </div>
         </div>
         
         <div class="sidebar">
-            <div class="stats-section">
-                <div class="color-accent-bar" style="--user-color: {realm.colorCode || '#561D5E'}"></div>
-                <h3>Stream Stats</h3>
-                
-                <div class="status-indicator" class:active={stats.isLive} class:inactive={!stats.isLive}>
-                    {#if stats.isLive}
-                        Live
-                    {:else}
-                        Offline
-                    {/if}
-                </div>
-                
-                {#if stats.isLive}
-                    <div class="stats-list">
-                        <div class="stat-item">
-                            <span class="stat-label">Viewers</span>
-                            <span class="stat-value">{stats.connections}</span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-label">Bitrate</span>
-                            <span class="stat-value">{formatBitrate(stats.bitrate)}</span>
-                        </div>
-                        {#if stats.resolution !== 'N/A'}
-                            <div class="stat-item">
-                                <span class="stat-label">Resolution</span>
-                                <span class="stat-value">{stats.resolution}</span>
-                            </div>
-                        {/if}
-                        {#if stats.fps > 0}
-                            <div class="stat-item">
-                                <span class="stat-label">Frame Rate</span>
-                                <span class="stat-value">{stats.fps.toFixed(1)} fps</span>
-                            </div>
-                        {/if}
-                        {#if stats.codec && stats.codec !== 'N/A'}
-                            <div class="stat-item">
-                                <span class="stat-label">Codec</span>
-                                <span class="stat-value">{stats.codec}</span>
-                            </div>
-                        {/if}
-                    </div>
-                {:else}
-                    <div class="offline-message">
-                        <div class="offline-icon">📺</div>
-                        <p>Stream is currently offline</p>
-                    </div>
-                {/if}
+            <div class="chat-section">
+                <ChatPanel realmId={realm.name} userColor={$userColor} chatEnabled={realm.chatEnabled !== false} chatGuestsAllowed={realm.chatGuestsAllowed !== false} />
             </div>
         </div>
     </div>
diff --git a/frontend/src/routes/[realm]/watch/+page.svelte b/frontend/src/routes/[realm]/watch/+page.svelte
new file mode 100644
index 0000000..3301d7b
--- /dev/null
+++ b/frontend/src/routes/[realm]/watch/+page.svelte
@@ -0,0 +1,513 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { auth, userColor } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { watchSync, viewerCount, canControl, canAddToPlaylist, currentVideo } from '$lib/stores/watchSync';
+    import { chatLayout } from '$lib/stores/chatLayout';
+    import ChatPanel from '$lib/components/chat/ChatPanel.svelte';
+    import YouTubePlayer from '$lib/components/watch/YouTubePlayer.svelte';
+    import WatchPlaylist from '$lib/components/watch/WatchPlaylist.svelte';
+    import PlaybackControls from '$lib/components/watch/PlaybackControls.svelte';
+
+    let realm = null;
+    let loading = true;
+    let error = '';
+    let playlist = [];
+    let isOwner = false;
+    let playerComponent;
+    let currentTime = 0;
+    let duration = 0;
+    let playlistRefreshInterval;
+    let skipInProgress = false;
+
+    $: realmName = $page.params.realm;
+
+    // Re-check ownership when auth state changes (login/logout)
+    $: {
+        $auth; // Track auth store changes
+        if (realm) {
+            checkOwnership();
+        }
+    }
+
+    onMount(async () => {
+        await loadRealm(realmName);
+
+        if (!realm) {
+            error = 'Realm not found';
+            loading = false;
+            return;
+        }
+
+        if (realm.type !== 'watch') {
+            error = 'This is not a watch room';
+            loading = false;
+            return;
+        }
+
+        // Connect to watch sync WebSocket
+        const token = localStorage.getItem('token');
+        watchSync.connect(realm.id, token);
+
+        // Load playlist
+        await loadPlaylist();
+
+        // Check if user is owner (for settings access)
+        checkOwnership();
+
+        // Refresh playlist periodically
+        playlistRefreshInterval = setInterval(loadPlaylist, 10000);
+
+        loading = false;
+    });
+
+    onDestroy(() => {
+        watchSync.disconnect();
+        if (playlistRefreshInterval) {
+            clearInterval(playlistRefreshInterval);
+        }
+    });
+
+    async function loadRealm(name) {
+        try {
+            const response = await fetch(`/api/realms/by-name/${name}`);
+            if (response.ok) {
+                const data = await response.json();
+                realm = data.realm;
+            } else if (response.status === 404) {
+                error = 'Realm not found';
+            }
+        } catch (e) {
+            console.error('Failed to load realm:', e);
+            error = 'Failed to load realm';
+        }
+    }
+
+    async function loadPlaylist() {
+        if (!realm) return;
+
+        try {
+            const response = await fetch(`/api/watch/${realm.id}/playlist`, {
+                credentials: 'include'
+            });
+            if (response.ok) {
+                const data = await response.json();
+                playlist = data.playlist || [];
+            }
+        } catch (e) {
+            console.error('Failed to load playlist:', e);
+        }
+    }
+
+    function checkOwnership() {
+        if (!realm) return;
+        const user = $auth.user;
+        // Check if user is owner/admin (used for settings access)
+        isOwner = (user?.id === realm.ownerId) || user?.isAdmin;
+    }
+
+    function handleVideoAdded(event) {
+        loadPlaylist();
+        // Request sync to get updated current video state (video may have auto-started)
+        setTimeout(() => {
+            watchSync.requestSync();
+        }, 500);
+    }
+
+    function handleVideoRemoved(event) {
+        loadPlaylist();
+        // Request sync to get updated state (current video may have been cleared)
+        setTimeout(() => {
+            watchSync.requestSync();
+        }, 500);
+    }
+
+    function handlePlayerReady() {
+        // Player is ready
+    }
+
+    function handleVideoEnded() {
+        // Prevent duplicate skip calls
+        if (skipInProgress) return;
+
+        // When a video ends, skip to the next one
+        if ($canControl) {
+            skipInProgress = true;
+            watchSync.skip();
+            // Reset flag after a delay and refresh playlist
+            setTimeout(() => {
+                skipInProgress = false;
+                loadPlaylist();
+            }, 2000);
+        } else {
+            // Non-controllers just request sync to get the updated state
+            // (the server auto-advances after a short delay or owner skips)
+            setTimeout(() => {
+                watchSync.requestSync();
+                loadPlaylist();
+            }, 1000);
+        }
+    }
+
+    // Update current time from player for progress display
+    function updateTime() {
+        if (playerComponent) {
+            currentTime = playerComponent.getCurrentTime() || 0;
+            duration = playerComponent.getDuration() || 0;
+        }
+        requestAnimationFrame(updateTime);
+    }
+
+    $: if (browser && playerComponent) {
+        requestAnimationFrame(updateTime);
+    }
+</script>
+
+<svelte:head>
+    <title>{realm ? `${$siteSettings.site_title} - ${realm.name} Watch` : $siteSettings.site_title}</title>
+</svelte:head>
+
+<style>
+    .watch-container {
+        max-width: 100%;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: 1fr 22%;
+        gap: 0.33rem;
+        background: var(--black);
+        color: var(--white);
+    }
+
+    @media (max-width: 1200px) {
+        .watch-container {
+            grid-template-columns: 1fr 28%;
+        }
+    }
+
+    @media (max-width: 1024px) {
+        .watch-container {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .main-section {
+        display: flex;
+        flex-direction: column;
+        gap: 0.33rem;
+    }
+
+    .player-wrapper {
+        background: #000;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+        position: relative;
+    }
+
+
+    .room-info-section {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 0.6rem 1rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .room-info-section::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        background: var(--user-color, var(--primary));
+        opacity: 0.6;
+    }
+
+    .room-header {
+        padding-left: 1rem;
+    }
+
+    .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .header-top > * {
+        flex: 1;
+    }
+
+    .room-header h1 {
+        margin: 0;
+        font-size: 1.5rem;
+        color: var(--white);
+        text-align: center;
+    }
+
+    .header-top .viewer-badge {
+        justify-content: flex-end;
+    }
+
+    .viewer-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.35rem 0.75rem;
+        background: rgba(86, 29, 94, 0.2);
+        border-radius: 20px;
+        font-size: 0.85rem;
+        color: var(--primary);
+        flex-shrink: 0;
+    }
+
+    .viewer-badge svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .owner-info {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .owner-avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: var(--gray);
+        overflow: hidden;
+        border: 2px solid var(--border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: var(--white);
+        flex-shrink: 0;
+    }
+
+    .owner-avatar.has-color {
+        background: var(--user-color);
+        border-color: var(--user-color);
+    }
+
+    .owner-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .owner-name {
+        font-weight: 500;
+        color: var(--white);
+        font-size: 0.95rem;
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+
+    .owner-name:hover {
+        color: var(--primary);
+    }
+
+    .room-description {
+        margin-top: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 4px;
+        color: var(--gray);
+        font-size: 0.85rem;
+        line-height: 1.4;
+        white-space: pre-wrap;
+    }
+
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.33rem;
+        position: sticky;
+        top: 0;
+        height: calc(100vh - var(--nav-height));
+        max-height: calc(100vh - var(--nav-height));
+        overflow: hidden;
+    }
+
+    .playlist-section {
+        flex: 0 0 auto;
+        max-height: 240px;
+        overflow: hidden;
+    }
+
+    .chat-section {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        overflow: hidden;
+        flex: 1 1 0;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .loading-container, .error-container {
+        text-align: center;
+        padding: 4rem 2rem;
+        color: var(--gray);
+    }
+
+    .error-container h1 {
+        color: var(--white);
+        margin-bottom: 1rem;
+    }
+
+    .btn {
+        display: inline-block;
+        padding: 0.75rem 1.5rem;
+        background: var(--primary);
+        color: white;
+        text-decoration: none;
+        border-radius: 8px;
+        transition: background 0.2s;
+    }
+
+    .btn:hover {
+        background: var(--primary-hover);
+    }
+
+    /* Chat position variants */
+    .watch-container.chat-left {
+        grid-template-columns: 22% 1fr;
+    }
+
+    .watch-container.chat-left .main-section {
+        order: 2;
+    }
+
+    .watch-container.chat-left .sidebar {
+        order: 1;
+    }
+
+    @media (max-width: 1024px) {
+        .watch-container.chat-left {
+            grid-template-columns: 1fr;
+        }
+
+        .watch-container.chat-left .main-section,
+        .watch-container.chat-left .sidebar {
+            order: unset;
+        }
+
+        .sidebar {
+            height: auto;
+            max-height: none;
+        }
+
+        .playlist-section {
+            flex: none;
+            max-height: 260px;
+        }
+
+        .chat-section {
+            min-height: 400px;
+        }
+    }
+</style>
+
+{#if loading}
+    <div class="loading-container">
+        <p>Loading watch room...</p>
+    </div>
+{:else if error}
+    <div class="error-container">
+        <h1>Error</h1>
+        <p>{error}</p>
+        <a href="/" class="btn" style="margin-top: 2rem;">Back to Home</a>
+    </div>
+{:else if realm}
+    <div
+        class="watch-container"
+        class:chat-left={$chatLayout.position === 'left'}
+    >
+        <div class="main-section">
+            <div class="player-wrapper" style="--user-color: {realm.colorCode || '#561D5E'}">
+                <YouTubePlayer
+                    bind:this={playerComponent}
+                    videoId={$currentVideo?.youtubeVideoId}
+                    offlineImageUrl={realm.offlineImageUrl}
+                    on:ready={handlePlayerReady}
+                    on:ended={handleVideoEnded}
+                />
+            </div>
+
+            <PlaybackControls
+                {currentTime}
+                duration={$currentVideo?.durationSeconds || duration}
+            />
+
+            <div class="room-info-section" style="--user-color: {realm.colorCode || '#561D5E'}">
+                <div class="room-header">
+                    <div class="header-top">
+                        <div class="owner-info">
+                            <div
+                                class="owner-avatar"
+                                class:has-color={realm.colorCode}
+                                style="--user-color: {realm.colorCode || '#561D5E'}"
+                            >
+                                {#if realm.avatarUrl}
+                                    <img src={realm.avatarUrl} alt={realm.username} />
+                                {:else}
+                                    {realm.username?.charAt(0).toUpperCase() || '?'}
+                                {/if}
+                            </div>
+                            <a href="/profile/{realm.username}" class="owner-name">{realm.username}</a>
+                        </div>
+                        <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+                        <div class="viewer-badge">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+                            </svg>
+                            {$viewerCount} watching
+                        </div>
+                    </div>
+
+                    {#if realm.description}
+                        <div class="room-description">
+                            {realm.description}
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+
+        <div class="sidebar">
+            <div class="playlist-section">
+                <WatchPlaylist
+                    realmId={realm.id}
+                    {playlist}
+                    userCanAdd={$canAddToPlaylist}
+                    {isOwner}
+                    playlistControlMode={realm.playlistControlMode || 'owner'}
+                    playlistWhitelist={realm.playlistWhitelist || '[]'}
+                    on:videoAdded={handleVideoAdded}
+                    on:videoRemoved={handleVideoRemoved}
+                    on:settingsChanged={checkOwnership}
+                />
+            </div>
+
+            <div class="chat-section">
+                <ChatPanel
+                    realmId={realm.name}
+                    userColor={$userColor}
+                    chatEnabled={realm.chatEnabled !== false}
+                    chatGuestsAllowed={realm.chatGuestsAllowed !== false}
+                    hideTheaterMode={true}
+                />
+            </div>
+        </div>
+    </div>
+{/if}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index bd2f550..51b995d 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1,15 +1,117 @@
 <script>
     import { onMount } from 'svelte';
     import { auth, isAuthenticated, isAdmin } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { goto } from '$app/navigation';
     
     let users = [];
     let streams = [];
+    let stickers = [];
+    let honkSounds = [];
+    let realms = [];
+    let videos = [];
+    let audios = [];
+    let ebooks = [];
+    let stickerSubmissions = [];
     let loading = true;
+    let editingSticker = null;
+    let newStickerName = '';
     let message = '';
     let error = '';
-    let activeTab = 'users';
-    
+    let activeTab = 'settings';
+    let stickerFiles = [];
+    let stickerNames = {};
+    let honkFile = null;
+    let honkName = '';
+    let chatSettings = {
+        guestPrefix: 'Guest',
+        defaultRetentionHours: 24,
+        guestsAllowedSiteWide: true,
+        registrationEnabled: true,
+        referralSystemEnabled: false
+    };
+    let settingsSaving = false;
+    let siteSettingsForm = {
+        site_title: 'Stream',
+        logo_path: '',
+        logo_display_mode: 'text'
+    };
+    let logoFile = null;
+    let logoUploading = false;
+    let siteSaving = false;
+    let censoredWords = '';
+    let censoredWordsSaving = false;
+    let defaultAvatars = [];
+    let avatarFiles = null;
+    let avatarsUploading = false;
+    let botApiKeys = [];
+    let downloadingStickers = false;
+
+    // SSL Settings
+    let sslSettings = {
+        domain: '',
+        acmeEmail: '',
+        certificateStatus: 'none',
+        certificateExpiry: null,
+        lastRenewalAttempt: null,
+        lastRenewalError: null,
+        autoRenewalEnabled: true
+    };
+    let sslLoading = false;
+    let sslSaving = false;
+    let sslRequesting = false;
+
+    // Helper function for role toggles with confirmation
+    // Prevents checkbox from toggling before confirm dialog is answered
+    function handleRoleToggle(event, isCurrentlyEnabled, confirmMessage, promoteFunc, demoteFunc, userId) {
+        event.preventDefault();
+
+        if (isCurrentlyEnabled) {
+            // Removing role - needs confirmation
+            if (confirm(confirmMessage)) {
+                demoteFunc(userId);
+            }
+            // If cancelled, checkbox stays in original state (no action needed)
+        } else {
+            // Adding role - no confirmation needed
+            promoteFunc(userId);
+        }
+    }
+
+    // Sort realms by type: stream first (with live ones at top), then video, audio, ebook
+    const typeOrder = { stream: 0, video: 1, audio: 2, ebook: 3 };
+    $: sortedRealms = [...realms].sort((a, b) => {
+        const typeA = a.realmType || 'stream';
+        const typeB = b.realmType || 'stream';
+        // First sort by type
+        if (typeOrder[typeA] !== typeOrder[typeB]) {
+            return typeOrder[typeA] - typeOrder[typeB];
+        }
+        // For streams, put live ones first
+        if (typeA === 'stream') {
+            if (a.isLive && !b.isLive) return -1;
+            if (!a.isLive && b.isLive) return 1;
+        }
+        // Then by name
+        return a.name.localeCompare(b.name);
+    });
+
+    // Censored words validation - computed values
+    const MAX_WORDS = 500;
+    const MAX_BYTES = 10240;
+    $: censoredWordsArray = censoredWords
+        .split(',')
+        .map(w => w.trim())
+        .filter(w => w.length > 0);
+    $: censoredWordCount = censoredWordsArray.length;
+    $: censoredByteSize = new TextEncoder().encode(censoredWords).length;
+    $: censoredWordCountExceeded = censoredWordCount > MAX_WORDS;
+    $: censoredByteSizeExceeded = censoredByteSize > MAX_BYTES;
+    $: censoredWordsValid = !censoredWordCountExceeded && !censoredByteSizeExceeded;
+    $: duplicateCensoredWords = censoredWordsArray.filter((word, index) =>
+        censoredWordsArray.findIndex(w => w.toLowerCase() === word.toLowerCase()) !== index
+    );
+
     onMount(async () => {
         await auth.init();
         
@@ -28,16 +130,16 @@
     
     async function loadData() {
         loading = true;
-        await Promise.all([loadUsers(), loadStreams()]);
+        await Promise.all([loadUsers(), loadStreams(), loadStickers(), loadHonkSounds(), loadChatSettings(), loadSiteSettings(), loadRealms(), loadStickerSubmissions(), loadVideos(), loadAudios(), loadEbooks(), loadDefaultAvatars(), loadBotApiKeys(), loadSSLSettings()]);
         loading = false;
     }
     
     async function loadUsers() {
         try {
             const response = await fetch('/api/admin/users', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 const data = await response.json();
                 users = data.users;
@@ -53,9 +155,9 @@
     async function loadStreams() {
         try {
             const response = await fetch('/api/admin/streams', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 const data = await response.json();
                 streams = data.streams || [];
@@ -72,9 +174,9 @@
         try {
             const response = await fetch(`/api/admin/users/${userId}/promote`, {
                 method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 message = 'User promoted to streamer';
                 await loadUsers();
@@ -85,21 +187,17 @@
             error = 'Error promoting user';
             console.error(e);
         }
-        
+
         setTimeout(() => { message = ''; error = ''; }, 3000);
     }
     
     async function demoteFromStreamer(userId) {
-        if (!confirm('Remove streamer privileges from this user? Their realms will remain but they cannot create new ones.')) {
-            return;
-        }
-        
         try {
             const response = await fetch(`/api/admin/users/${userId}/demote`, {
                 method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 message = 'User demoted from streamer';
                 await loadUsers();
@@ -110,19 +208,313 @@
             error = 'Error demoting user';
             console.error(e);
         }
-        
+
         setTimeout(() => { message = ''; error = ''; }, 3000);
     }
-    
+
+    async function promoteToRestreamer(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-restreamer`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted restreamer privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to promote user to restreamer';
+            }
+        } catch (e) {
+            error = 'Error promoting user to restreamer';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromRestreamer(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-restreamer`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User removed from restreamer role';
+                await loadUsers();
+            } else {
+                error = 'Failed to demote user from restreamer';
+            }
+        } catch (e) {
+            error = 'Error demoting user from restreamer';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToBot(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-bot`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted bot API access';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant bot access';
+            }
+        } catch (e) {
+            error = 'Error granting bot access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromBot(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-bot`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User bot API access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove bot access';
+            }
+        } catch (e) {
+            error = 'Error removing bot access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToStickerCreator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-sticker-creator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted sticker creator privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant sticker creator access';
+            }
+        } catch (e) {
+            error = 'Error granting sticker creator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromStickerCreator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-sticker-creator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User sticker creator access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove sticker creator access';
+            }
+        } catch (e) {
+            error = 'Error removing sticker creator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToUploader(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-uploader`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted uploader privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant uploader access';
+            }
+        } catch (e) {
+            error = 'Error granting uploader access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromUploader(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-uploader`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User uploader access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove uploader access';
+            }
+        } catch (e) {
+            error = 'Error removing uploader access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToTexter(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-texter`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted texter privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant texter access';
+            }
+        } catch (e) {
+            error = 'Error granting texter access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromTexter(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-texter`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User texter access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove texter access';
+            }
+        } catch (e) {
+            error = 'Error removing texter access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToWatchCreator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-watch-creator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted watch creator privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant watch creator access';
+            }
+        } catch (e) {
+            error = 'Error granting watch creator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromWatchCreator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-watch-creator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User watch creator access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove watch creator access';
+            }
+        } catch (e) {
+            error = 'Error removing watch creator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function promoteToModerator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/promote-moderator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User granted site-wide moderator privileges';
+                await loadUsers();
+            } else {
+                error = 'Failed to grant moderator access';
+            }
+        } catch (e) {
+            error = 'Error granting moderator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function demoteFromModerator(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/demote-moderator`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'User moderator access removed';
+                await loadUsers();
+            } else {
+                error = 'Failed to remove moderator access';
+            }
+        } catch (e) {
+            error = 'Error removing moderator access';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
     async function disconnectStream(streamKey) {
         if (!confirm(`Disconnect stream ${streamKey}?`)) return;
-        
+
         try {
             const response = await fetch(`/api/admin/streams/${streamKey}/disconnect`, {
                 method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 message = 'Stream disconnected';
                 await loadStreams();
@@ -133,47 +525,1367 @@
             error = 'Error disconnecting stream';
             console.error(e);
         }
-        
+
         setTimeout(() => { message = ''; error = ''; }, 3000);
     }
     
     function formatDate(dateStr) {
         return new Date(dateStr).toLocaleString();
     }
+
+    function formatDateOnly(dateStr) {
+        return new Date(dateStr).toLocaleDateString();
+    }
+
+    function formatTimeOnly(dateStr) {
+        return new Date(dateStr).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+    }
+
+    async function incrementReferrals(userId) {
+        try {
+            const response = await fetch(`/api/admin/users/${userId}/increment-referrals`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (response.ok) {
+                users = users.map(u => u.id === userId ? {...u, referralCodeCount: (u.referralCodeCount || 0) + 1} : u);
+                error = ''; // Clear any previous error
+            } else {
+                error = 'Failed to increment referrals';
+            }
+        } catch (err) {
+            console.error('Failed to increment referrals:', err);
+            error = 'Failed to increment referrals';
+        }
+    }
+
+    async function loadStickers() {
+        try {
+            const response = await fetch('/api/admin/stickers', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                stickers = data.stickers || [];
+            } else {
+                error = 'Failed to load stickers';
+            }
+        } catch (e) {
+            error = 'Error loading stickers';
+            console.error(e);
+        }
+    }
+
+    function handleFileSelect(event) {
+        const files = Array.from(event.target.files);
+        const maxSize = 4 * 1024 * 1024; // 4MB limit for stickers
+
+        // Check file sizes
+        const oversizedFiles = files.filter(f => f.size > maxSize);
+        if (oversizedFiles.length > 0) {
+            error = `File(s) too large (max 4MB): ${oversizedFiles.map(f => f.name).join(', ')}`;
+            event.target.value = '';
+            return;
+        }
+
+        stickerFiles = files;
+
+        // Initialize names for each file (use filename without extension as default)
+        files.forEach(file => {
+            const nameWithoutExt = file.name.substring(0, file.name.lastIndexOf('.'));
+            stickerNames[file.name] = nameWithoutExt;
+        });
+    }
+
+    async function uploadStickers() {
+        if (stickerFiles.length === 0) {
+            error = 'Please select at least one file';
+            return;
+        }
+
+        const formData = new FormData();
+        stickerFiles.forEach((file, index) => {
+            formData.append('stickers', file);
+            formData.append(`name_${file.name}`, stickerNames[file.name] || file.name);
+        });
+
+        try {
+            const response = await fetch('/api/admin/stickers/upload', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = `Uploaded ${data.count} sticker(s)`;
+                stickerFiles = [];
+                stickerNames = {};
+                await loadStickers();
+            } else {
+                error = 'Failed to upload stickers';
+            }
+        } catch (e) {
+            error = 'Error uploading stickers';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteSticker(stickerId) {
+        if (!confirm('Are you sure you want to PERMANENTLY delete this sticker? This will remove the file from the server and cannot be undone.')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/stickers/${stickerId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Sticker deleted';
+                await loadStickers();
+            } else {
+                error = 'Failed to delete sticker';
+            }
+        } catch (e) {
+            error = 'Error deleting sticker';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function startEditingSticker(sticker) {
+        editingSticker = sticker.id;
+        newStickerName = sticker.name;
+    }
+
+    function cancelEditingSticker() {
+        editingSticker = null;
+        newStickerName = '';
+    }
+
+    async function renameSticker(stickerId) {
+        if (!newStickerName.trim()) {
+            error = 'Name cannot be empty';
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/stickers/${stickerId}/rename`, {
+                method: 'PUT',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: newStickerName.trim() })
+            });
+
+            if (response.ok) {
+                message = 'Sticker renamed';
+                editingSticker = null;
+                newStickerName = '';
+                await loadStickers();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to rename sticker';
+            }
+        } catch (e) {
+            error = 'Error renaming sticker';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function downloadAllStickers() {
+        if (stickers.length === 0) {
+            error = 'No stickers to download';
+            setTimeout(() => { error = ''; }, 3000);
+            return;
+        }
+
+        downloadingStickers = true;
+
+        try {
+            const response = await fetch('/api/admin/stickers/download-all', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                // Get filename from Content-Disposition header or use default
+                const disposition = response.headers.get('Content-Disposition');
+                let filename = 'stickers.zip';
+                if (disposition) {
+                    const match = disposition.match(/filename="?([^"]+)"?/);
+                    if (match) filename = match[1];
+                }
+
+                // Download the blob
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+
+                message = `Downloaded ${stickers.length} stickers`;
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to download stickers';
+            }
+        } catch (e) {
+            error = 'Error downloading stickers';
+            console.error(e);
+        } finally {
+            downloadingStickers = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // SSL Settings Functions
+    async function loadSSLSettings() {
+        sslLoading = true;
+        try {
+            const response = await fetch('/api/admin/settings/ssl', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                sslSettings = {
+                    domain: data.domain || '',
+                    acmeEmail: data.acmeEmail || '',
+                    certificateStatus: data.certificateStatus || 'none',
+                    certificateExpiry: data.certificateExpiry,
+                    lastRenewalAttempt: data.lastRenewalAttempt,
+                    lastRenewalError: data.lastRenewalError,
+                    autoRenewalEnabled: data.autoRenewalEnabled !== false
+                };
+            }
+        } catch (e) {
+            console.error('Error loading SSL settings', e);
+        } finally {
+            sslLoading = false;
+        }
+    }
+
+    async function saveSSLSettings() {
+        sslSaving = true;
+        try {
+            const response = await fetch('/api/admin/settings/ssl', {
+                method: 'PUT',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    domain: sslSettings.domain,
+                    acmeEmail: sslSettings.acmeEmail,
+                    autoRenewalEnabled: sslSettings.autoRenewalEnabled
+                })
+            });
+
+            if (response.ok) {
+                message = 'SSL settings saved';
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to save SSL settings';
+            }
+        } catch (e) {
+            error = 'Error saving SSL settings';
+            console.error(e);
+        } finally {
+            sslSaving = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function requestCertificate() {
+        if (!sslSettings.domain || !sslSettings.acmeEmail) {
+            error = 'Please configure domain and email first';
+            setTimeout(() => { error = ''; }, 3000);
+            return;
+        }
+
+        if (!confirm(`Request SSL certificate for ${sslSettings.domain}? Make sure your DNS is pointed to this server.`)) {
+            return;
+        }
+
+        sslRequesting = true;
+        try {
+            const response = await fetch('/api/admin/ssl/request', {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = data.message || 'Certificate request initiated';
+                sslSettings.certificateStatus = 'pending';
+                // Start polling for status
+                pollSSLStatus();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to request certificate';
+            }
+        } catch (e) {
+            error = 'Error requesting certificate';
+            console.error(e);
+        } finally {
+            sslRequesting = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function pollSSLStatus() {
+        // Poll status every 5 seconds while pending
+        const checkStatus = async () => {
+            try {
+                const response = await fetch('/api/admin/ssl/status', {
+                    credentials: 'include'
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    sslSettings.certificateStatus = data.status || 'none';
+                    sslSettings.certificateExpiry = data.expiry;
+                    sslSettings.lastRenewalAttempt = data.lastAttempt;
+                    sslSettings.lastRenewalError = data.lastError;
+
+                    if (data.status === 'pending') {
+                        // Keep polling
+                        setTimeout(checkStatus, 5000);
+                    } else if (data.status === 'active') {
+                        message = 'Certificate successfully issued!';
+                        setTimeout(() => { message = ''; }, 5000);
+                    } else if (data.status === 'error') {
+                        error = data.lastError || 'Certificate request failed';
+                        setTimeout(() => { error = ''; }, 10000);
+                    }
+                }
+            } catch (e) {
+                console.error('Error polling SSL status', e);
+            }
+        };
+
+        checkStatus();
+    }
+
+    async function loadStickerSubmissions() {
+        try {
+            const response = await fetch('/api/admin/sticker-submissions', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                stickerSubmissions = data.submissions || [];
+            } else {
+                // Non-critical, just log it
+                console.error('Failed to load sticker submissions');
+            }
+        } catch (e) {
+            console.error('Error loading sticker submissions', e);
+        }
+    }
+
+    async function approveSubmission(submissionId, customName = null) {
+        try {
+            const body = customName ? { name: customName } : {};
+            const response = await fetch(`/api/admin/sticker-submissions/${submissionId}/approve`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            });
+
+            if (response.ok) {
+                message = 'Sticker approved and added';
+                await Promise.all([loadStickers(), loadStickerSubmissions()]);
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to approve sticker';
+            }
+        } catch (e) {
+            error = 'Error approving sticker';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function denySubmission(submissionId) {
+        const reason = prompt('Reason for denial (optional):');
+
+        try {
+            const response = await fetch(`/api/admin/sticker-submissions/${submissionId}/deny`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ reason: reason || '' })
+            });
+
+            if (response.ok) {
+                message = 'Sticker submission denied';
+                await loadStickerSubmissions();
+            } else {
+                error = 'Failed to deny submission';
+            }
+        } catch (e) {
+            error = 'Error denying submission';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadHonkSounds() {
+        try {
+            const response = await fetch('/api/admin/honks', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                honkSounds = data.honks || [];
+            } else {
+                error = 'Failed to load honk sounds';
+            }
+        } catch (e) {
+            error = 'Error loading honk sounds';
+            console.error(e);
+        }
+    }
+
+    function handleHonkFileSelect(event) {
+        const file = event.target.files[0];
+        if (file) {
+            honkFile = file;
+            if (!honkName) {
+                honkName = file.name.substring(0, file.name.lastIndexOf('.'));
+            }
+        }
+    }
+
+    async function uploadHonkSound() {
+        if (!honkFile) {
+            error = 'Please select a file';
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', honkFile);
+        formData.append('name', honkName || honkFile.name);
+
+        try {
+            const response = await fetch('/api/admin/honks/upload', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            if (response.ok) {
+                message = 'Honk sound uploaded successfully';
+                honkFile = null;
+                honkName = '';
+                await loadHonkSounds();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to upload honk sound';
+            }
+        } catch (e) {
+            error = 'Error uploading honk sound';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteHonkSound(honkId) {
+        if (!confirm('Are you sure you want to delete this honk sound?')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/honks/${honkId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Honk sound deleted';
+                await loadHonkSounds();
+            } else {
+                error = 'Failed to delete honk sound';
+            }
+        } catch (e) {
+            error = 'Error deleting honk sound';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function setActiveHonk(honkId) {
+        try {
+            const response = await fetch(`/api/admin/honks/${honkId}/activate`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Honk sound activated';
+                await loadHonkSounds();
+            } else {
+                error = 'Failed to activate honk sound';
+            }
+        } catch (e) {
+            error = 'Error activating honk sound';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadChatSettings() {
+        try {
+            const response = await fetch('/api/admin/settings/chat', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                chatSettings = {
+                    guestPrefix: data.guestPrefix || 'Guest',
+                    defaultRetentionHours: data.defaultRetentionHours || 24,
+                    guestsAllowedSiteWide: data.guestsAllowedSiteWide !== undefined ? data.guestsAllowedSiteWide : true,
+                    registrationEnabled: data.registrationEnabled !== undefined ? data.registrationEnabled : true,
+                    referralSystemEnabled: data.referralSystemEnabled !== undefined ? data.referralSystemEnabled : false
+                };
+            } else {
+                error = 'Failed to load chat settings';
+            }
+        } catch (e) {
+            error = 'Error loading chat settings';
+            console.error(e);
+        }
+    }
+
+    async function updateChatSettings() {
+        settingsSaving = true;
+        try {
+            const response = await fetch('/api/admin/settings/chat', {
+                method: 'PUT',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(chatSettings)
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = 'Chat settings updated successfully';
+                if (data.settings) {
+                    chatSettings = {
+                        guestPrefix: data.settings.guestPrefix,
+                        defaultRetentionHours: data.settings.defaultRetentionHours,
+                        guestsAllowedSiteWide: data.settings.guestsAllowedSiteWide,
+                        registrationEnabled: data.settings.registrationEnabled,
+                        referralSystemEnabled: data.settings.referralSystemEnabled
+                    };
+                }
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to update chat settings';
+            }
+        } catch (e) {
+            error = 'Error updating chat settings';
+            console.error(e);
+        }
+        settingsSaving = false;
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadSiteSettings() {
+        try {
+            const response = await fetch('/api/admin/settings/site', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                const settings = data.settings || {};
+                siteSettingsForm = {
+                    site_title: settings.site_title || 'Stream',
+                    logo_path: settings.logo_path || '',
+                    logo_display_mode: settings.logo_display_mode || 'text'
+                };
+                censoredWords = settings.censored_words || '';
+            } else {
+                console.error('Failed to load site settings');
+            }
+        } catch (e) {
+            console.error('Error loading site settings', e);
+        }
+    }
+
+    async function updateSiteSettings() {
+        siteSaving = true;
+        try {
+            const response = await fetch('/api/admin/settings/site', {
+                method: 'PUT',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    site_title: siteSettingsForm.site_title,
+                    logo_display_mode: siteSettingsForm.logo_display_mode
+                })
+            });
+
+            if (response.ok) {
+                message = 'Site settings updated successfully';
+            } else {
+                error = 'Failed to update site settings';
+            }
+        } catch (e) {
+            error = 'Error updating site settings';
+            console.error(e);
+        }
+        siteSaving = false;
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function saveCensoredWords() {
+        // Validate before saving
+        if (censoredWordCountExceeded) {
+            error = `Too many words: ${censoredWordCount}/${MAX_WORDS} maximum`;
+            setTimeout(() => { error = ''; }, 3000);
+            return;
+        }
+        if (censoredByteSizeExceeded) {
+            error = `Content too large: ${(censoredByteSize / 1024).toFixed(1)}KB/${MAX_BYTES / 1024}KB maximum`;
+            setTimeout(() => { error = ''; }, 3000);
+            return;
+        }
+
+        censoredWordsSaving = true;
+        try {
+            const response = await fetch('/api/admin/settings/site', {
+                method: 'PUT',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    censored_words: censoredWords
+                })
+            });
+
+            if (response.ok) {
+                message = 'Censored words updated successfully';
+            } else if (response.status === 429) {
+                error = 'Rate limit exceeded. Please wait before trying again.';
+            } else {
+                error = 'Failed to update censored words';
+            }
+        } catch (e) {
+            error = 'Error updating censored words';
+            console.error(e);
+        }
+        censoredWordsSaving = false;
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadDefaultAvatars() {
+        try {
+            const response = await fetch('/api/admin/default-avatars', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                defaultAvatars = data.avatars || [];
+            } else {
+                console.error('Failed to load default avatars');
+            }
+        } catch (e) {
+            console.error('Error loading default avatars', e);
+        }
+    }
+
+    function handleAvatarFilesSelect(event) {
+        avatarFiles = event.target.files;
+    }
+
+    async function uploadDefaultAvatars() {
+        if (!avatarFiles || avatarFiles.length === 0) {
+            error = 'Please select at least one file';
+            return;
+        }
+
+        avatarsUploading = true;
+        const formData = new FormData();
+        for (let i = 0; i < avatarFiles.length; i++) {
+            formData.append('avatars', avatarFiles[i]);
+        }
+
+        try {
+            const response = await fetch('/api/admin/default-avatars/upload', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = `Uploaded ${data.count} avatar(s) successfully`;
+                avatarFiles = null;
+                // Reset file input
+                const fileInput = document.querySelector('input[name="avatarFiles"]');
+                if (fileInput) fileInput.value = '';
+                await loadDefaultAvatars();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to upload avatars';
+            }
+        } catch (e) {
+            error = 'Error uploading avatars';
+            console.error(e);
+        }
+        avatarsUploading = false;
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteDefaultAvatar(avatarId) {
+        if (!confirm('Delete this default avatar?')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/default-avatars/${avatarId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Avatar deleted';
+                await loadDefaultAvatars();
+            } else {
+                error = 'Failed to delete avatar';
+            }
+        } catch (e) {
+            error = 'Error deleting avatar';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadBotApiKeys() {
+        try {
+            const response = await fetch('/api/admin/bot-keys', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                botApiKeys = data.keys || [];
+            } else {
+                console.error('Failed to load bot API keys');
+            }
+        } catch (e) {
+            console.error('Error loading bot API keys', e);
+        }
+    }
+
+    async function deleteBotApiKey(keyId, keyName, ownerUsername) {
+        if (!confirm(`Delete API key "${keyName}" owned by ${ownerUsername}? This will immediately disconnect any bot using this key.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/bot-keys/${keyId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'API key deleted';
+                await loadBotApiKeys();
+            } else {
+                error = 'Failed to delete API key';
+            }
+        } catch (e) {
+            error = 'Error deleting API key';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function handleLogoSelect(event) {
+        const file = event.target.files[0];
+        if (file) {
+            // Validate file size (max 2MB)
+            if (file.size > 2 * 1024 * 1024) {
+                error = 'Logo file must be under 2MB';
+                event.target.value = '';
+                setTimeout(() => { error = ''; }, 3000);
+                return;
+            }
+            logoFile = file;
+        }
+    }
+
+    async function uploadSiteLogo() {
+        if (!logoFile) {
+            error = 'Please select a file';
+            return;
+        }
+
+        logoUploading = true;
+        const formData = new FormData();
+        formData.append('logo', logoFile);
+
+        try {
+            const response = await fetch('/api/admin/settings/site/logo', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            if (response.ok) {
+                message = 'Logo uploaded successfully';
+                logoFile = null;
+                await loadSiteSettings();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to upload logo';
+            }
+        } catch (e) {
+            error = 'Error uploading logo';
+            console.error(e);
+        }
+        logoUploading = false;
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadRealms() {
+        try {
+            const response = await fetch('/api/admin/realms', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                realms = data.realms || [];
+            } else {
+                error = 'Failed to load realms';
+            }
+        } catch (e) {
+            error = 'Error loading realms';
+            console.error(e);
+        }
+    }
+
+    async function deleteRealm(realmId) {
+        if (!confirm('Are you sure you want to delete this realm? This action cannot be undone.')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/realms/${realmId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Realm deleted successfully';
+                await loadRealms();
+            } else {
+                error = 'Failed to delete realm';
+            }
+        } catch (e) {
+            error = 'Error deleting realm';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function setViewerMultiplier(realmId, multiplier) {
+        // Clamp to valid range
+        if (multiplier < 1) multiplier = 1;
+        if (multiplier > 1000) multiplier = 1000;
+
+        try {
+            const response = await fetch(`/api/admin/realms/${realmId}/viewer-multiplier`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ multiplier })
+            });
+
+            if (response.ok) {
+                // Update local state
+                const realm = realms.find(r => r.id === realmId);
+                if (realm) {
+                    realm.viewerMultiplier = multiplier;
+                    realms = realms; // Trigger reactivity
+                }
+                message = `Viewer multiplier set to ${multiplier}×`;
+            } else {
+                error = 'Failed to update multiplier';
+            }
+        } catch (e) {
+            error = 'Error updating multiplier';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteUser(userId, username) {
+        const deleteUploads = confirm(
+            `Delete user "${username}"?\n\n` +
+            `Click OK to also DELETE all their uploaded videos.\n` +
+            `Click Cancel to keep uploads (they will be hidden).`
+        );
+
+        const confirmDelete = confirm(
+            deleteUploads
+                ? `FINAL CONFIRMATION: Delete "${username}" AND all their uploads? This cannot be undone.`
+                : `FINAL CONFIRMATION: Delete "${username}"? Their uploads will be hidden but preserved.`
+        );
+
+        if (!confirmDelete) return;
+
+        try {
+            const response = await fetch(`/api/admin/users/${userId}?deleteUploads=${deleteUploads}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = data.message || 'User deleted successfully';
+                await Promise.all([loadUsers(), loadVideos()]);
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to delete user';
+            }
+        } catch (e) {
+            error = 'Error deleting user';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function toggleDisabled(user) {
+        const action = user.isDisabled ? 'enable' : 'disable';
+        const confirmMsg = user.isDisabled
+            ? `Enable login for "${user.username}"?`
+            : `Disable login for "${user.username}"? They will not be able to log in.`;
+
+        if (!confirm(confirmMsg)) return;
+
+        try {
+            const response = await fetch(`/api/admin/users/${user.id}/${action}`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = data.message || `User ${action}d successfully`;
+                user.isDisabled = !user.isDisabled;
+                users = users; // Trigger reactivity
+            } else {
+                const data = await response.json();
+                error = data.error || `Failed to ${action} user`;
+            }
+        } catch (e) {
+            error = `Error ${action}ing user`;
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function uberbanUser(user) {
+        const confirmMsg = `UBERBAN "${user.username}"?\n\n` +
+            `This will:\n` +
+            `• Ban their device fingerprint site-wide\n` +
+            `• Disable their account\n` +
+            `• Block them from all site access\n\n` +
+            `This action cannot be easily reversed.`;
+
+        if (!confirm(confirmMsg)) return;
+
+        try {
+            const response = await fetch(`/api/admin/users/${user.id}/uberban`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                message = data.message || 'User uberbanned successfully';
+                user.isDisabled = true;
+                user.pendingUberban = !data.immediate;
+                users = users; // Trigger reactivity
+                // Refresh bans list if we're showing it
+                if (uberbannedFingerprints.length > 0 || activeTab === 'bans') {
+                    await loadUberbannedFingerprints();
+                }
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to uberban user';
+            }
+        } catch (e) {
+            error = 'Error uberbanning user';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Uberbanned fingerprints management
+    let uberbannedFingerprints = [];
+
+    async function loadUberbannedFingerprints() {
+        try {
+            const response = await fetch('/api/chat/uberbanned', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                uberbannedFingerprints = data.uberbannedFingerprints || [];
+            } else {
+                console.error('Failed to load uberbanned fingerprints');
+            }
+        } catch (e) {
+            console.error('Error loading uberbanned fingerprints:', e);
+        }
+    }
+
+    async function removeUberban(fingerprint) {
+        const truncated = fingerprint.substring(0, 16) + '...';
+        if (!confirm(`Remove uberban for fingerprint ${truncated}?\n\nThis will allow this device to access the site again.`)) return;
+
+        try {
+            const response = await fetch('/api/chat/unuberban', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ fingerprint })
+            });
+
+            if (response.ok) {
+                message = 'Uberban removed successfully';
+                await loadUberbannedFingerprints();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to remove uberban';
+            }
+        } catch (e) {
+            error = 'Error removing uberban';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadVideos() {
+        try {
+            const response = await fetch('/api/admin/videos', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                videos = data.videos || [];
+            } else {
+                console.error('Failed to load videos');
+            }
+        } catch (e) {
+            console.error('Error loading videos', e);
+        }
+    }
+
+    async function deleteVideo(videoId, videoTitle) {
+        if (!confirm(`Delete video "${videoTitle}"? This will remove the file from disk.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/videos/${videoId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Video deleted successfully';
+                await loadVideos();
+            } else {
+                error = 'Failed to delete video';
+            }
+        } catch (e) {
+            error = 'Error deleting video';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadAudios() {
+        try {
+            const response = await fetch('/api/admin/audios', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                audios = data.audios || [];
+            } else {
+                console.error('Failed to load audios');
+            }
+        } catch (e) {
+            console.error('Error loading audios', e);
+        }
+    }
+
+    async function deleteAudio(audioId, audioTitle) {
+        if (!confirm(`Delete audio "${audioTitle}"? This will remove the file from disk.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/audios/${audioId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Audio deleted successfully';
+                await loadAudios();
+            } else {
+                error = 'Failed to delete audio';
+            }
+        } catch (e) {
+            error = 'Error deleting audio';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function loadEbooks() {
+        try {
+            const response = await fetch('/api/admin/ebooks', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                ebooks = data.ebooks || [];
+            } else {
+                console.error('Failed to load ebooks');
+            }
+        } catch (e) {
+            console.error('Error loading ebooks', e);
+        }
+    }
+
+    async function deleteEbook(ebookId, ebookTitle) {
+        if (!confirm(`Delete ebook "${ebookTitle}"? This will remove the file from disk.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/admin/ebooks/${ebookId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Ebook deleted successfully';
+                await loadEbooks();
+            } else {
+                error = 'Failed to delete ebook';
+            }
+        } catch (e) {
+            error = 'Error deleting ebook';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function formatFileSize(bytes) {
+        if (!bytes) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title} - Admin</title>
+</svelte:head>
+
 <style>
     .admin-header {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-bottom: 2rem;
-    }
-    
-    .stats-cards {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1rem;
         margin-bottom: 2rem;
     }
+
+    .admin-header h1 {
+        margin: 0;
+    }
+
+    .admin-header button {
+        margin-left: auto;
+    }
+
+    .refresh-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem;
+        min-width: 36px;
+        min-height: 36px;
+    }
+
+    .refresh-icon {
+        transition: transform 0.3s ease;
+    }
+
+    .refresh-icon.spinning {
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+
+    .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+        display: inline-block;
+    }
+
+    .header-message {
+        font-size: 0.9rem;
+        padding: 0.25rem 0.75rem;
+        border-radius: 4px;
+    }
+
+    .header-message.success {
+        color: #4caf50;
+        background: rgba(76, 175, 80, 0.1);
+    }
+
+    .header-message.error {
+        color: #f44336;
+        background: rgba(244, 67, 54, 0.1);
+    }
     
-    .stat-card {
-        background: #111;
-        border: 1px solid var(--border);
-        padding: 1.5rem;
+    .stats-inline {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        padding: 0.75rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        justify-content: center;
+    }
+
+    .tabs {
+        display: flex;
+        justify-content: center;
+        gap: 0.25rem;
+        flex-wrap: wrap;
+        padding: 0.5rem;
+        background: rgba(0, 0, 0, 0.3);
         border-radius: 8px;
-        text-align: center;
+        border: 1px solid rgba(255, 255, 255, 0.08);
     }
-    
-    .stat-value {
-        font-size: 2rem;
+
+    .tab {
+        padding: 0.5rem 1rem;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+
+    .tab:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #fff;
+    }
+
+    .tab.active {
+        background: var(--primary);
+        color: #fff;
+        border-color: var(--primary);
+    }
+
+    .stat-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+        padding: 0.35rem 0.6rem;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+        font-size: 0.8rem;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .stat-badge .count {
         font-weight: 600;
-        color: var(--primary);
+        font-size: 0.85rem;
     }
-    
-    .stat-label {
-        color: var(--gray);
-        margin-top: 0.5rem;
+
+    .stat-badge .label {
+        opacity: 0.9;
     }
     
     .data-table {
@@ -185,6 +1897,10 @@
         width: 100%;
         min-width: 800px;
     }
+
+    .data-table td {
+        vertical-align: middle;
+    }
     
     .stream-key-cell {
         font-family: monospace;
@@ -204,64 +1920,429 @@
         padding: 0.25rem 0.75rem;
         font-size: 0.85rem;
     }
-    
+
+    /* Role toggles with checkboxes */
+    .role-toggles {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .role-toggle {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .role-toggle input[type="checkbox"] {
+        display: none;
+    }
+
+    .role-label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        font-size: 0.65rem;
+        font-weight: 700;
+        background: #2d2d2d;
+        color: #666;
+        border: 2px solid #444;
+        transition: all 0.15s ease;
+    }
+
+    .role-toggle input:checked + .role-label.streamer {
+        background: #28a745;
+        color: white;
+        border-color: #28a745;
+    }
+
+    .role-toggle input:checked + .role-label.restreamer {
+        background: #17a2b8;
+        color: white;
+        border-color: #17a2b8;
+    }
+
+    .role-toggle input:checked + .role-label.bot {
+        background: #9b59b6;
+        color: white;
+        border-color: #9b59b6;
+    }
+
+    .role-toggle input:checked + .role-label.creator {
+        background: #e67e22;
+        color: white;
+        border-color: #e67e22;
+    }
+
+    .role-toggle input:checked + .role-label.uploader {
+        background: #e91e63;
+        color: white;
+        border-color: #e91e63;
+    }
+
+    .role-toggle input:checked + .role-label.texter {
+        background: #00bcd4;
+        color: white;
+        border-color: #00bcd4;
+    }
+
+    .role-toggle input:checked + .role-label.watch {
+        background: #ff9800;
+        color: white;
+        border-color: #ff9800;
+    }
+
+    .role-toggle input:checked + .role-label.mod {
+        background: #8e44ad;
+        color: white;
+        border-color: #8e44ad;
+    }
+
+    .role-label:hover {
+        border-color: #888;
+    }
+
+    .view-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        color: #8b949e;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+    }
+
+    .view-link:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #c9d1d9;
+    }
+
     .role-badges {
         display: flex;
-        gap: 0.5rem;
+        gap: 0.25rem;
         flex-wrap: wrap;
     }
+
+    .role-text {
+        font-size: 0.7rem;
+        font-weight: 600;
+    }
+
+    .delete-user-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        color: #dc3545;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .delete-user-btn:hover {
+        background: rgba(220, 53, 69, 0.2);
+        color: #ff6b6b;
+    }
+
+    .disable-user-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        color: #ffc107;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .disable-user-btn:hover {
+        background: rgba(255, 193, 7, 0.2);
+        color: #ffda44;
+    }
+
+    .disable-user-btn.disabled {
+        color: #28a745;
+    }
+
+    .disable-user-btn.disabled:hover {
+        background: rgba(40, 167, 69, 0.2);
+        color: #48d068;
+    }
+
+    /* Moderation Dropdown */
+    .mod-dropdown {
+        position: relative;
+        display: inline-block;
+        margin-left: 0.5rem;
+        vertical-align: middle;
+    }
+
+    .mod-dropdown-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.35rem 0.6rem;
+        background: rgba(139, 92, 246, 0.15);
+        color: #a78bfa;
+        border: 1px solid rgba(139, 92, 246, 0.3);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.75rem;
+        font-weight: 500;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+    }
+
+    .mod-dropdown-btn:hover {
+        background: rgba(139, 92, 246, 0.25);
+        border-color: rgba(139, 92, 246, 0.5);
+    }
+
+    .mod-dropdown-btn.pending-ban {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+        border-color: rgba(239, 68, 68, 0.3);
+    }
+
+    .mod-dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        min-width: 160px;
+        background: #1a1a1a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+        z-index: 1000;
+        overflow: hidden;
+    }
+
+    .mod-dropdown:hover .mod-dropdown-content {
+        display: block;
+    }
+
+    .mod-action {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        padding: 0.6rem 0.75rem;
+        background: transparent;
+        border: none;
+        color: #ccc;
+        font-size: 0.8rem;
+        cursor: pointer;
+        text-align: left;
+        transition: background 0.15s ease;
+    }
+
+    .mod-action:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .mod-action.uberban {
+        color: #ef4444;
+    }
+
+    .mod-action.uberban:hover {
+        background: rgba(239, 68, 68, 0.15);
+    }
+
+    .mod-action.disable {
+        color: #f59e0b;
+    }
+
+    .mod-action.disable:hover {
+        background: rgba(245, 158, 11, 0.15);
+    }
+
+    .mod-action.delete {
+        color: #dc2626;
+    }
+
+    .mod-action.delete:hover {
+        background: rgba(220, 38, 38, 0.15);
+    }
+
+    .pending-badge {
+        font-size: 0.65rem;
+        background: rgba(239, 68, 68, 0.3);
+        color: #fca5a5;
+        padding: 0.1rem 0.35rem;
+        border-radius: 3px;
+        margin-left: 0.25rem;
+    }
+
+    /* Referrals cell with +1 button */
+    .refs-cell {
+        white-space: nowrap;
+    }
+
+    .refs-cell span {
+        margin-right: 0.35rem;
+    }
+
+    .increment-btn {
+        padding: 0.15rem 0.35rem;
+        font-size: 0.7rem;
+        background: rgba(40, 167, 69, 0.2);
+        color: #28a745;
+        border: 1px solid rgba(40, 167, 69, 0.3);
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        vertical-align: middle;
+    }
+
+    .increment-btn:hover {
+        background: rgba(40, 167, 69, 0.35);
+        border-color: rgba(40, 167, 69, 0.5);
+    }
+
+    /* Created date/time cell */
+    .created-cell {
+        font-size: 0.8rem;
+        color: #888;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    .created-cell .time {
+        font-size: 0.7rem;
+        color: #666;
+    }
+
+    .copy-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        background: transparent;
+        border: none;
+        color: var(--gray);
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+        margin-left: 0.5rem;
+    }
+
+    .copy-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+    }
+
+    .realm-type-badge {
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        background: rgba(128, 128, 128, 0.2);
+        color: #888;
+    }
+
+    .realm-type-badge.stream {
+        background: rgba(145, 70, 255, 0.2);
+        color: #9146ff;
+    }
+
+    .realm-type-badge.video {
+        background: rgba(66, 153, 225, 0.2);
+        color: #4299e1;
+    }
+
+    .realm-type-badge.audio {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+    }
+
+    .realm-type-badge.ebook {
+        background: rgba(16, 185, 129, 0.2);
+        color: #10b981;
+    }
 </style>
 
 <div class="container">
     <div class="admin-header">
         <h1>Admin Dashboard</h1>
-        <button on:click={loadData} disabled={loading}>
-            {loading ? 'Refreshing...' : 'Refresh'}
+        {#if message}
+            <span class="header-message success">{message}</span>
+        {/if}
+        {#if error}
+            <span class="header-message error">{error}</span>
+        {/if}
+        <button class="refresh-btn" on:click={loadData} disabled={loading} title="Refresh">
+            <svg class="refresh-icon" class:spinning={loading} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+                <path d="M3 3v5h5"/>
+                <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
+                <path d="M21 21v-5h-5"/>
+            </svg>
         </button>
     </div>
     
-    {#if message}
-        <div class="success" style="margin-bottom: 1rem;">{message}</div>
-    {/if}
-    
-    {#if error}
-        <div class="error" style="margin-bottom: 1rem;">{error}</div>
-    {/if}
-    
-    <div class="stats-cards">
-        <div class="stat-card">
-            <div class="stat-value">{users.length}</div>
-            <div class="stat-label">Total Users</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{users.filter(u => u.isAdmin).length}</div>
-            <div class="stat-label">Admins</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{users.filter(u => u.isStreamer).length}</div>
-            <div class="stat-label">Streamers</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{streams.length}</div>
-            <div class="stat-label">Active Streams</div>
-        </div>
-    </div>
-    
     <div class="tab-container">
         <div class="tabs">
-            <button 
-                class="tab" 
+            <button
+                class="tab"
+                class:active={activeTab === 'botkeys'}
+                on:click={() => activeTab = 'botkeys'}
+            >
+                Bot Keys
+            </button>
+            <button
+                class="tab"
+                class:active={activeTab === 'realms'}
+                on:click={() => activeTab = 'realms'}
+            >
+                Realms
+            </button>
+            <button
+                class="tab"
+                class:active={activeTab === 'settings'}
+                on:click={() => activeTab = 'settings'}
+            >
+                Settings
+            </button>
+            <button
+                class="tab"
+                class:active={activeTab === 'stickers'}
+                on:click={() => activeTab = 'stickers'}
+            >
+                Stickers
+            </button>
+            <button
+                class="tab"
+                class:active={activeTab === 'uploads'}
+                on:click={() => activeTab = 'uploads'}
+            >
+                Uploads
+            </button>
+            <button
+                class="tab"
                 class:active={activeTab === 'users'}
                 on:click={() => activeTab = 'users'}
             >
                 Users
             </button>
-            <button 
-                class="tab" 
-                class:active={activeTab === 'streams'}
-                on:click={() => activeTab = 'streams'}
+            <button
+                class="tab"
+                class:active={activeTab === 'bans'}
+                on:click={() => { activeTab = 'bans'; loadUberbannedFingerprints(); }}
             >
-                Active Streams
+                Bans
             </button>
         </div>
     </div>
@@ -270,6 +2351,18 @@
         <p>Loading...</p>
     {:else if activeTab === 'users'}
         <div class="card">
+            <div class="stats-inline">
+                <span class="stat-badge" style="color: #6c757d;"><span class="count">{users.length}</span><span class="label">Users</span></span>
+                <span class="stat-badge" style="color: #ff4444;"><span class="count">{users.filter(u => u.isAdmin).length}</span><span class="label">Admins</span></span>
+                <span class="stat-badge" style="color: #8e44ad;"><span class="count">{users.filter(u => u.isModerator).length}</span><span class="label">Mods</span></span>
+                <span class="stat-badge" style="color: #28a745;"><span class="count">{users.filter(u => u.isStreamer).length}</span><span class="label">Streamers</span></span>
+                <span class="stat-badge" style="color: #17a2b8;"><span class="count">{users.filter(u => u.isRestreamer).length}</span><span class="label">Restreamers</span></span>
+                <span class="stat-badge" style="color: #9b59b6;"><span class="count">{users.filter(u => u.isBot).length}</span><span class="label">Bots</span></span>
+                <span class="stat-badge" style="color: #e67e22;"><span class="count">{users.filter(u => u.isStickerCreator).length}</span><span class="label">Creators</span></span>
+                <span class="stat-badge" style="color: #e91e63;"><span class="count">{users.filter(u => u.isUploader).length}</span><span class="label">Uploaders</span></span>
+                <span class="stat-badge" style="color: #00bcd4;"><span class="count">{users.filter(u => u.isTexter).length}</span><span class="label">Texters</span></span>
+                <span class="stat-badge" style="color: #ff9800;"><span class="count">{users.filter(u => u.isWatchCreator).length}</span><span class="label">Watch</span></span>
+            </div>
             <div class="data-table">
                 <table class="table">
                     <thead>
@@ -278,8 +2371,9 @@
                             <th>Username</th>
                             <th>Roles</th>
                             <th>Realms</th>
+                            <th>Refs</th>
                             <th>Created</th>
-                            <th>Actions</th>
+                            <th>Manage</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -294,40 +2388,153 @@
                                 <td>
                                     <div class="role-badges">
                                         {#if user.isAdmin}
-                                            <span class="badge badge-admin">Admin</span>
+                                            <span class="role-text" style="color: #ff4444;">Admin</span>
                                         {/if}
                                         {#if user.isStreamer}
-                                            <span class="badge" style="background: #28a745;">Streamer</span>
+                                            <span class="role-text" style="color: #28a745;">Streamer</span>
                                         {/if}
-                                        {#if !user.isAdmin && !user.isStreamer}
-                                            <span class="badge" style="background: #6c757d;">User</span>
+                                        {#if user.isRestreamer}
+                                            <span class="role-text" style="color: #17a2b8;">Restreamer</span>
+                                        {/if}
+                                        {#if user.isBot}
+                                            <span class="role-text" style="color: #9b59b6;">Bot</span>
+                                        {/if}
+                                        {#if user.isStickerCreator}
+                                            <span class="role-text" style="color: #e67e22;">Creator</span>
+                                        {/if}
+                                        {#if user.isUploader}
+                                            <span class="role-text" style="color: #e91e63;">Uploader</span>
+                                        {/if}
+                                        {#if user.isTexter}
+                                            <span class="role-text" style="color: #00bcd4;">Texter</span>
+                                        {/if}
+                                        {#if user.isWatchCreator}
+                                            <span class="role-text" style="color: #ff9800;">Watch</span>
+                                        {/if}
+                                        {#if user.isModerator}
+                                            <span class="role-text" style="color: #8e44ad;">Mod</span>
+                                        {/if}
+                                        {#if !user.isAdmin && !user.isStreamer && !user.isRestreamer && !user.isBot && !user.isStickerCreator && !user.isUploader && !user.isTexter && !user.isWatchCreator && !user.isModerator}
+                                            <span class="role-text" style="color: #6c757d;">User</span>
                                         {/if}
                                     </div>
                                 </td>
                                 <td>{user.realmCount || 0}</td>
-                                <td>{formatDate(user.createdAt)}</td>
+                                <td class="refs-cell">
+                                    <span>{user.referralCodeCount || 0}</span>
+                                    <button class="increment-btn" on:click={() => incrementReferrals(user.id)} title="Add referral">+1</button>
+                                </td>
+                                <td class="created-cell">
+                                    <div>{formatDateOnly(user.createdAt)}</div>
+                                    <div class="time">{formatTimeOnly(user.createdAt)}</div>
+                                </td>
                                 <td>
-                                    <div class="actions">
-                                        <a href="/profile/{user.username}" class="btn btn-secondary action-btn">
-                                            View
-                                        </a>
+                                    <div class="role-toggles">
+                                        <label class="role-toggle" title="Streamer">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isStreamer}
+                                                on:click={(e) => handleRoleToggle(e, user.isStreamer, 'Remove streamer privileges from this user? Their realms will remain but they cannot create new ones.', promoteToStreamer, demoteFromStreamer, user.id)}
+                                            />
+                                            <span class="role-label streamer">S</span>
+                                        </label>
+                                        <label class="role-toggle" title="Restreamer">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isRestreamer}
+                                                on:click={(e) => handleRoleToggle(e, user.isRestreamer, 'Remove restreamer privileges from this user?', promoteToRestreamer, demoteFromRestreamer, user.id)}
+                                            />
+                                            <span class="role-label restreamer">R</span>
+                                        </label>
+                                        <label class="role-toggle" title="Bot">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isBot}
+                                                on:click={(e) => handleRoleToggle(e, user.isBot, 'Remove bot API access from this user? Their existing API keys will be deactivated.', promoteToBot, demoteFromBot, user.id)}
+                                            />
+                                            <span class="role-label bot">B</span>
+                                        </label>
+                                        <label class="role-toggle" title="Sticker Creator">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isStickerCreator}
+                                                on:click={(e) => handleRoleToggle(e, user.isStickerCreator, 'Remove sticker creator access from this user?', promoteToStickerCreator, demoteFromStickerCreator, user.id)}
+                                            />
+                                            <span class="role-label creator">C</span>
+                                        </label>
+                                        <label class="role-toggle" title="Video Uploader">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isUploader}
+                                                on:click={(e) => handleRoleToggle(e, user.isUploader, 'Remove uploader access from this user?', promoteToUploader, demoteFromUploader, user.id)}
+                                            />
+                                            <span class="role-label uploader">U</span>
+                                        </label>
+                                        <label class="role-toggle" title="Texter (Forum Creator)">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isTexter}
+                                                on:click={(e) => handleRoleToggle(e, user.isTexter, 'Remove texter access from this user? They will no longer be able to create forums.', promoteToTexter, demoteFromTexter, user.id)}
+                                            />
+                                            <span class="role-label texter">T</span>
+                                        </label>
+                                        <label class="role-toggle" title="Watch Creator">
+                                            <input
+                                                type="checkbox"
+                                                checked={user.isWatchCreator}
+                                                on:click={(e) => handleRoleToggle(e, user.isWatchCreator, 'Remove watch creator access from this user? They will no longer be able to create watch rooms.', promoteToWatchCreator, demoteFromWatchCreator, user.id)}
+                                            />
+                                            <span class="role-label watch">W</span>
+                                        </label>
                                         {#if !user.isAdmin}
-                                            {#if !user.isStreamer}
-                                                <button 
-                                                    class="btn action-btn"
-                                                    style="background: #28a745;"
-                                                    on:click={() => promoteToStreamer(user.id)}
-                                                >
-                                                    Make Streamer
+                                            <label class="role-toggle" title="Site Moderator">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={user.isModerator}
+                                                    on:click={(e) => handleRoleToggle(e, user.isModerator, 'Remove site-wide moderator access from this user?', promoteToModerator, demoteFromModerator, user.id)}
+                                                />
+                                                <span class="role-label mod">M</span>
+                                            </label>
+                                        {/if}
+                                        {#if !user.isAdmin}
+                                            <div class="mod-dropdown">
+                                                <button class="mod-dropdown-btn" class:pending-ban={user.pendingUberban}>
+                                                    Moderate ▼
                                                 </button>
-                                            {:else}
-                                                <button 
-                                                    class="btn btn-danger action-btn"
-                                                    on:click={() => demoteFromStreamer(user.id)}
-                                                >
-                                                    Remove Streamer
-                                                </button>
-                                            {/if}
+                                                <div class="mod-dropdown-content">
+                                                    <button class="mod-action uberban" on:click={() => uberbanUser(user)}>
+                                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                                                            <path d="M11.354 4.646a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                                                        </svg>
+                                                        Uberban
+                                                        {#if user.pendingUberban}
+                                                            <span class="pending-badge">pending</span>
+                                                        {/if}
+                                                    </button>
+                                                    <button class="mod-action disable" on:click={() => toggleDisabled(user)}>
+                                                        {#if user.isDisabled}
+                                                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                                                <path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019z"/>
+                                                            </svg>
+                                                            Enable Account
+                                                        {:else}
+                                                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                                                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+                                                            </svg>
+                                                            Disable Account
+                                                        {/if}
+                                                    </button>
+                                                    <button class="mod-action delete" on:click={() => deleteUser(user.id, user.username)}>
+                                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                                                        </svg>
+                                                        Delete Account
+                                                    </button>
+                                                </div>
+                                            </div>
                                         {/if}
                                     </div>
                                 </td>
@@ -337,39 +2544,260 @@
                 </table>
             </div>
         </div>
-    {:else if activeTab === 'streams'}
+    {:else if activeTab === 'stickers'}
         <div class="card">
-            {#if streams.length > 0}
+            <!-- Sticker Submissions Queue -->
+            {#if stickerSubmissions.length > 0}
+                <div style="margin-bottom: 2rem; padding: 1rem; border: 2px solid #e67e22; border-radius: 8px; background: rgba(230, 126, 34, 0.1);">
+                    <h2 style="color: #e67e22; margin-bottom: 1rem;">
+                        Pending Submissions ({stickerSubmissions.length})
+                    </h2>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;">
+                        {#each stickerSubmissions as submission}
+                            <div style="border: 1px solid var(--border); padding: 1rem; border-radius: 8px; text-align: center; background: #111;">
+                                <img
+                                    src={submission.filePath}
+                                    alt={submission.name}
+                                    style="max-width: 100%; max-height: 120px; margin-bottom: 0.5rem;"
+                                />
+                                <div style="font-weight: 600; margin-bottom: 0.25rem;">:{submission.name}:</div>
+                                <div style="font-size: 0.75rem; color: var(--gray); margin-bottom: 0.5rem;">
+                                    by {submission.submitterUsername} • {formatDate(submission.createdAt)}
+                                </div>
+                                <div style="display: flex; gap: 0.5rem; justify-content: center;">
+                                    <button
+                                        class="btn action-btn"
+                                        style="background: #28a745;"
+                                        on:click={() => approveSubmission(submission.id)}
+                                    >
+                                        Approve
+                                    </button>
+                                    <button
+                                        class="btn action-btn"
+                                        style="background: #17a2b8;"
+                                        on:click={() => {
+                                            const newName = prompt('Rename sticker (or cancel to keep current name):', submission.name);
+                                            if (newName !== null) approveSubmission(submission.id, newName || null);
+                                        }}
+                                    >
+                                        Rename & Approve
+                                    </button>
+                                    <button
+                                        class="btn btn-danger action-btn"
+                                        on:click={() => denySubmission(submission.id)}
+                                    >
+                                        Deny
+                                    </button>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+
+            <h2>Upload Stickers</h2>
+            <div style="margin-bottom: 2rem;">
+                <input
+                    type="file"
+                    multiple
+                    accept="image/*"
+                    on:change={handleFileSelect}
+                    style="margin-bottom: 1rem;"
+                />
+
+                {#if stickerFiles.length > 0}
+                    <div style="margin-bottom: 1rem;">
+                        <h3>Selected Files ({stickerFiles.length})</h3>
+                        {#each stickerFiles as file}
+                            <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 0.5rem;">
+                                <span style="flex: 1;">{file.name}</span>
+                                <input
+                                    type="text"
+                                    placeholder="Sticker name"
+                                    bind:value={stickerNames[file.name]}
+                                    style="flex: 2; padding: 0.5rem;"
+                                />
+                            </div>
+                        {/each}
+                        <button class="btn btn-primary" on:click={uploadStickers}>
+                            Upload {stickerFiles.length} Sticker(s)
+                        </button>
+                    </div>
+                {/if}
+            </div>
+
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                <h2 style="margin: 0;">Existing Stickers ({stickers.length})</h2>
+                {#if stickers.length > 0}
+                    <button
+                        class="btn btn-secondary"
+                        on:click={downloadAllStickers}
+                        disabled={downloadingStickers}
+                        style="display: flex; align-items: center; gap: 0.5rem;"
+                    >
+                        {#if downloadingStickers}
+                            <span class="spinner"></span>
+                            Downloading...
+                        {:else}
+                            Download All as ZIP
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+            {#if stickers.length > 0}
+                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
+                    {#each stickers as sticker}
+                        <div style="border: 1px solid var(--border); padding: 1rem; border-radius: 8px; text-align: center;">
+                            <img
+                                src={sticker.filePath}
+                                alt={sticker.name}
+                                style="max-width: 100%; max-height: 150px; margin-bottom: 0.5rem;"
+                            />
+                            {#if editingSticker === sticker.id}
+                                <div style="margin-bottom: 0.5rem;">
+                                    <input
+                                        type="text"
+                                        bind:value={newStickerName}
+                                        style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem;"
+                                        placeholder="New name"
+                                    />
+                                    <div style="display: flex; gap: 0.25rem; justify-content: center;">
+                                        <button
+                                            class="btn action-btn"
+                                            style="background: #28a745;"
+                                            on:click={() => renameSticker(sticker.id)}
+                                        >
+                                            Save
+                                        </button>
+                                        <button
+                                            class="btn action-btn"
+                                            on:click={cancelEditingSticker}
+                                        >
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </div>
+                            {:else}
+                                <div style="font-weight: 600; margin-bottom: 0.5rem;">:{sticker.name}:</div>
+                            {/if}
+                            <div style="font-size: 0.85rem; color: var(--gray); margin-bottom: 0.5rem;">
+                                Added {formatDate(sticker.createdAt)}
+                            </div>
+                            {#if editingSticker !== sticker.id}
+                                <div style="display: flex; gap: 0.25rem; justify-content: center;">
+                                    <button
+                                        class="btn action-btn"
+                                        style="background: #17a2b8;"
+                                        on:click={() => startEditingSticker(sticker)}
+                                    >
+                                        Rename
+                                    </button>
+                                    <button
+                                        class="btn btn-danger action-btn"
+                                        on:click={() => deleteSticker(sticker.id)}
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            {:else}
+                <p style="color: var(--gray);">No stickers uploaded yet</p>
+            {/if}
+        </div>
+    {:else if activeTab === 'realms'}
+        <div class="card">
+            <div class="stats-inline">
+                <span class="stat-badge" style="color: #6c757d;"><span class="count">{realms.length}</span><span class="label">Realms</span></span>
+                <span class="stat-badge" style="color: #28a745;"><span class="count">{realms.filter(r => !r.realmType || r.realmType === 'stream').length}</span><span class="label">Streams</span></span>
+                <span class="stat-badge" style="color: #f85149;"><span class="count">{realms.filter(r => r.isLive).length}</span><span class="label">Live</span></span>
+                <span class="stat-badge" style="color: #e91e63;"><span class="count">{realms.filter(r => r.realmType === 'video').length}</span><span class="label">Video</span></span>
+                <span class="stat-badge" style="color: #ec4899;"><span class="count">{realms.filter(r => r.realmType === 'audio').length}</span><span class="label">Audio</span></span>
+                <span class="stat-badge" style="color: #3b82f6;"><span class="count">{realms.filter(r => r.realmType === 'ebook').length}</span><span class="label">eBook</span></span>
+            </div>
+            {#if sortedRealms.length > 0}
                 <div class="data-table">
-                    <table class="table">
+                    <table>
                         <thead>
                             <tr>
-                                <th>Realm</th>
-                                <th>Streamer</th>
-                                <th>Stream Key</th>
+                                <th style="width: 40px;"></th>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Owner</th>
                                 <th>Viewers</th>
+                                <th>Multiplier</th>
+                                <th>Created</th>
                                 <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {#each streams as stream}
+                            {#each sortedRealms as realm}
                                 <tr>
-                                    <td>
-                                        <a href="/{stream.name}/live" style="color: var(--primary);">
-                                            {stream.name}
-                                        </a>
+                                    <td style="text-align: center;">
+                                        {#if realm.realmType === 'stream' || !realm.realmType}
+                                            {#if realm.isLive}
+                                                <span style="color: #22c55e; font-size: 1.2rem;" title="Live">●</span>
+                                            {:else}
+                                                <span style="color: #484f58; font-size: 1.2rem;" title="Offline">○</span>
+                                            {/if}
+                                        {:else}
+                                            <span style="color: #484f58;">—</span>
+                                        {/if}
                                     </td>
-                                    <td>{stream.username}</td>
-                                    <td class="stream-key-cell" title={stream.streamKey}>
-                                        {stream.streamKey}
-                                    </td>
-                                    <td>{stream.viewerCount}</td>
                                     <td>
-                                        <button 
+                                        <div style="font-weight: 600;">{realm.name}</div>
+                                        {#if realm.description}
+                                            <div style="font-size: 0.85rem; color: var(--gray); margin-top: 0.25rem;">
+                                                {realm.description}
+                                            </div>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        <span class="realm-type-badge" class:stream={realm.realmType === 'stream'} class:video={realm.realmType === 'video'} class:audio={realm.realmType === 'audio'} class:ebook={realm.realmType === 'ebook'}>
+                                            {realm.realmType || 'stream'}
+                                        </span>
+                                    </td>
+                                    <td>
+                                        {realm.username}
+                                        {#if realm.originalCreatorUsername}
+                                            <div style="font-size: 0.75rem; color: var(--gray); margin-top: 0.15rem;">
+                                                (created by @{realm.originalCreatorUsername})
+                                            </div>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        {#if realm.realmType === 'stream' || !realm.realmType}
+                                            {realm.viewerCount}{#if realm.viewerMultiplier > 1}<span style="color: var(--gray); font-size: 0.8rem;"> (×{realm.viewerMultiplier} = {realm.viewerCount * realm.viewerMultiplier})</span>{/if}
+                                        {:else}
+                                            <span style="color: var(--gray);">—</span>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        {#if realm.realmType === 'stream' || !realm.realmType}
+                                            <div style="display: flex; align-items: center; gap: 0.25rem;">
+                                                <input
+                                                    type="number"
+                                                    min="1"
+                                                    max="1000"
+                                                    value={realm.viewerMultiplier || 1}
+                                                    on:change={(e) => setViewerMultiplier(realm.id, parseInt(e.target.value))}
+                                                    style="width: 60px; padding: 0.25rem; background: #111; border: 1px solid var(--border); border-radius: 4px; color: var(--white); text-align: center;"
+                                                />
+                                                <span style="color: var(--gray); font-size: 0.75rem;">×</span>
+                                            </div>
+                                        {:else}
+                                            <span style="color: var(--gray);">—</span>
+                                        {/if}
+                                    </td>
+                                    <td>{formatDate(realm.createdAt)}</td>
+                                    <td>
+                                        <button
                                             class="btn btn-danger action-btn"
-                                            on:click={() => disconnectStream(stream.streamKey)}
+                                            on:click={() => deleteRealm(realm.id)}
                                         >
-                                            Disconnect
+                                            Delete
                                         </button>
                                     </td>
                                 </tr>
@@ -378,7 +2806,920 @@
                     </table>
                 </div>
             {:else}
-                <p style="color: var(--gray);">No active streams</p>
+                <p style="color: var(--gray);">No realms created yet</p>
+            {/if}
+        </div>
+    {:else if activeTab === 'uploads'}
+        <!-- Videos Section -->
+        <div class="card" style="margin-bottom: 1.5rem;">
+            <h2>Videos ({videos.length})</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Manage all uploaded videos on the platform
+            </p>
+            {#if videos.length > 0}
+                <div class="data-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Thumbnail</th>
+                                <th>Title</th>
+                                <th>Uploader</th>
+                                <th>Duration</th>
+                                <th>Size</th>
+                                <th>Views</th>
+                                <th>Uploaded</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each videos as video}
+                                <tr>
+                                    <td>{video.id}</td>
+                                    <td>
+                                        {#if video.thumbnailPath}
+                                            <img
+                                                src={video.thumbnailPath}
+                                                alt={video.title}
+                                                style="width: 80px; height: 45px; object-fit: cover; border-radius: 4px;"
+                                            />
+                                        {:else}
+                                            <div style="width: 80px; height: 45px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0.5;">
+                                                🎬
+                                            </div>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        <a href="/watch/{video.id}" style="color: var(--primary);">
+                                            {video.title}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        {#if video.userId}
+                                            <a href="/profile/{video.username}" style="color: var(--primary);">
+                                                {video.username}
+                                            </a>
+                                        {:else}
+                                            <span style="color: var(--gray);">{video.username}</span>
+                                        {/if}
+                                    </td>
+                                    <td>{formatDuration(video.durationSeconds)}</td>
+                                    <td>{formatFileSize(video.fileSizeBytes)}</td>
+                                    <td>{video.viewCount}</td>
+                                    <td>{formatDate(video.createdAt)}</td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger action-btn"
+                                            on:click={() => deleteVideo(video.id, video.title)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <p style="color: var(--gray);">No videos uploaded yet</p>
+            {/if}
+        </div>
+
+        <!-- Audio Section -->
+        <div class="card" style="margin-bottom: 1.5rem;">
+            <h2>Audio ({audios.length})</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Manage all uploaded audio files on the platform
+            </p>
+            {#if audios.length > 0}
+                <div class="data-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Thumbnail</th>
+                                <th>Title</th>
+                                <th>Uploader</th>
+                                <th>Duration</th>
+                                <th>Size</th>
+                                <th>Plays</th>
+                                <th>Uploaded</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each audios as audio}
+                                <tr>
+                                    <td>{audio.id}</td>
+                                    <td>
+                                        {#if audio.thumbnailPath}
+                                            <img
+                                                src={audio.thumbnailPath}
+                                                alt={audio.title}
+                                                style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;"
+                                            />
+                                        {:else}
+                                            <div style="width: 50px; height: 50px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; opacity: 0.5;">
+                                                🎵
+                                            </div>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        <a href="/audio/{audio.realmName}" style="color: var(--primary);">
+                                            {audio.title}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        {#if audio.userId}
+                                            <a href="/profile/{audio.username}" style="color: var(--primary);">
+                                                {audio.username}
+                                            </a>
+                                        {:else}
+                                            <span style="color: var(--gray);">{audio.username}</span>
+                                        {/if}
+                                    </td>
+                                    <td>{formatDuration(audio.durationSeconds)}</td>
+                                    <td>{formatFileSize(audio.fileSizeBytes)}</td>
+                                    <td>{audio.playCount || 0}</td>
+                                    <td>{formatDate(audio.createdAt)}</td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger action-btn"
+                                            on:click={() => deleteAudio(audio.id, audio.title)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <p style="color: var(--gray);">No audio files uploaded yet</p>
+            {/if}
+        </div>
+
+        <!-- eBooks Section -->
+        <div class="card">
+            <h2>eBooks ({ebooks.length})</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Manage all uploaded eBooks on the platform
+            </p>
+            {#if ebooks.length > 0}
+                <div class="data-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Cover</th>
+                                <th>Title</th>
+                                <th>Chapters</th>
+                                <th>Uploader</th>
+                                <th>Size</th>
+                                <th>Reads</th>
+                                <th>Uploaded</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each ebooks as ebook}
+                                <tr>
+                                    <td>{ebook.id}</td>
+                                    <td>
+                                        {#if ebook.coverPath}
+                                            <img
+                                                src={ebook.coverPath}
+                                                alt={ebook.title}
+                                                style="width: 40px; height: 60px; object-fit: cover; border-radius: 4px;"
+                                            />
+                                        {:else}
+                                            <div style="width: 40px; height: 60px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; opacity: 0.5;">
+                                                📚
+                                            </div>
+                                        {/if}
+                                    </td>
+                                    <td>
+                                        <a href="/read/{ebook.realmName}" style="color: var(--primary);">
+                                            {ebook.title}
+                                        </a>
+                                    </td>
+                                    <td>{ebook.chapterCount || '—'}</td>
+                                    <td>
+                                        {#if ebook.userId}
+                                            <a href="/profile/{ebook.username}" style="color: var(--primary);">
+                                                {ebook.username}
+                                            </a>
+                                        {:else}
+                                            <span style="color: var(--gray);">{ebook.username}</span>
+                                        {/if}
+                                    </td>
+                                    <td>{formatFileSize(ebook.fileSizeBytes)}</td>
+                                    <td>{ebook.readCount || 0}</td>
+                                    <td>{formatDate(ebook.createdAt)}</td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger action-btn"
+                                            on:click={() => deleteEbook(ebook.id, ebook.title)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <p style="color: var(--gray);">No ebooks uploaded yet</p>
+            {/if}
+        </div>
+    {:else if activeTab === 'settings'}
+        <div class="card" style="margin-bottom: 2rem;">
+            <h2>Site Branding</h2>
+            <p style="color: var(--gray); margin-bottom: 2rem;">
+                Customize your site logo and title that appears in the navigation
+            </p>
+
+            <div style="display: grid; gap: 1.5rem; max-width: 600px;">
+                <!-- Logo Preview -->
+                <div>
+                    <label style="display: block; margin-bottom: 0.5rem;">Current Logo</label>
+                    <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #1a1a1a; border-radius: 8px; border: 1px solid var(--border);">
+                        {#if siteSettingsForm.logo_display_mode === 'image' || siteSettingsForm.logo_display_mode === 'both'}
+                            {#if siteSettingsForm.logo_path}
+                                <img
+                                    src={siteSettingsForm.logo_path}
+                                    alt="Site Logo"
+                                    style="max-height: 40px; max-width: 150px; object-fit: contain;"
+                                />
+                            {:else}
+                                <span style="color: var(--gray); font-style: italic;">No logo uploaded</span>
+                            {/if}
+                        {/if}
+                        {#if siteSettingsForm.logo_display_mode === 'text' || siteSettingsForm.logo_display_mode === 'both'}
+                            <span style="font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, #8b5cf6, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                                {siteSettingsForm.site_title}
+                            </span>
+                        {/if}
+                        {#if siteSettingsForm.logo_display_mode !== 'image' && siteSettingsForm.logo_display_mode !== 'text' && siteSettingsForm.logo_display_mode !== 'both'}
+                            <span style="color: var(--gray);">Preview will appear here</span>
+                        {/if}
+                    </div>
+                </div>
+
+                <!-- Upload Logo -->
+                <div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
+                    <label style="display: block; margin-bottom: 0.5rem;">Upload Logo</label>
+                    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
+                        <input
+                            type="file"
+                            accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
+                            on:change={handleLogoSelect}
+                        />
+                        <button
+                            class="btn btn-primary"
+                            on:click={uploadSiteLogo}
+                            disabled={!logoFile || logoUploading}
+                        >
+                            {logoUploading ? 'Uploading...' : 'Upload Logo'}
+                        </button>
+                    </div>
+                    <small style="color: var(--gray); display: block; margin-top: 0.5rem;">
+                        Supported formats: PNG, JPEG, GIF, WebP, SVG (max 2MB). Recommended height: 40px
+                    </small>
+                </div>
+
+                <!-- Site Title -->
+                <div>
+                    <label for="siteTitle">Site Title</label>
+                    <input
+                        id="siteTitle"
+                        type="text"
+                        bind:value={siteSettingsForm.site_title}
+                        placeholder="Stream"
+                        style="margin-top: 0.5rem;"
+                    />
+                    <small style="color: var(--gray); display: block; margin-top: 0.25rem;">
+                        Text title displayed in the navigation bar
+                    </small>
+                </div>
+
+                <!-- Display Mode -->
+                <div>
+                    <label style="display: block; margin-bottom: 0.5rem;">Display Mode</label>
+                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input
+                                type="radio"
+                                name="logoDisplayMode"
+                                value="text"
+                                bind:group={siteSettingsForm.logo_display_mode}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Text only</span>
+                            <span style="color: var(--gray); font-size: 0.85rem;">- Display site title text</span>
+                        </label>
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input
+                                type="radio"
+                                name="logoDisplayMode"
+                                value="image"
+                                bind:group={siteSettingsForm.logo_display_mode}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Image only</span>
+                            <span style="color: var(--gray); font-size: 0.85rem;">- Display logo image</span>
+                        </label>
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input
+                                type="radio"
+                                name="logoDisplayMode"
+                                value="both"
+                                bind:group={siteSettingsForm.logo_display_mode}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Both</span>
+                            <span style="color: var(--gray); font-size: 0.85rem;">- Display logo image and text</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div>
+                    <button
+                        class="btn btn-primary"
+                        on:click={updateSiteSettings}
+                        disabled={siteSaving}
+                    >
+                        {siteSaving ? 'Saving...' : 'Save Branding Settings'}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Chat Settings</h2>
+            <p style="color: var(--gray); margin-bottom: 2rem;">
+                Configure global chat settings that apply site-wide
+            </p>
+
+            <form on:submit|preventDefault={updateChatSettings}>
+                <div style="display: grid; gap: 1.5rem; max-width: 600px;">
+                    <div>
+                        <label for="guestPrefix">
+                            Default Guest Name Prefix
+                        </label>
+                        <input
+                            id="guestPrefix"
+                            type="text"
+                            bind:value={chatSettings.guestPrefix}
+                            placeholder="Guest"
+                            required
+                            style="margin-top: 0.5rem;"
+                        />
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem;">
+                            Prefix for auto-generated guest usernames. A 5-character Base62 string will be appended (e.g., "Guest3xYzA", "Visitor7kPmL")
+                        </small>
+                    </div>
+
+                    <div>
+                        <label for="defaultRetentionHours">
+                            Default Chat Retention Hours
+                        </label>
+                        <input
+                            id="defaultRetentionHours"
+                            type="number"
+                            min="1"
+                            max="720"
+                            bind:value={chatSettings.defaultRetentionHours}
+                            required
+                            style="margin-top: 0.5rem;"
+                        />
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem;">
+                            Default retention period for new realms. Each realm can override this in their own settings (1-720 hours)
+                        </small>
+                    </div>
+
+                    <div>
+                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                            <input
+                                type="checkbox"
+                                bind:checked={chatSettings.guestsAllowedSiteWide}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Allow guests to chat site-wide</span>
+                        </label>
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem; margin-left: 1.75rem;">
+                            When disabled, only registered users can participate in chat (overrides individual realm settings)
+                        </small>
+                    </div>
+
+                    <div>
+                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                            <input
+                                type="checkbox"
+                                bind:checked={chatSettings.registrationEnabled}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Enable site registration</span>
+                        </label>
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem; margin-left: 1.75rem;">
+                            When disabled, new users cannot create accounts
+                        </small>
+                    </div>
+
+                    <div>
+                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: {chatSettings.registrationEnabled ? 'not-allowed' : 'pointer'}; opacity: {chatSettings.registrationEnabled ? '0.5' : '1'};">
+                            <input
+                                type="checkbox"
+                                bind:checked={chatSettings.referralSystemEnabled}
+                                disabled={chatSettings.registrationEnabled}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Enable referral code registration</span>
+                        </label>
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem; margin-left: 1.75rem;">
+                            {#if chatSettings.registrationEnabled}
+                                Disable registration first to enable referral codes
+                            {:else}
+                                Users can purchase referral codes (500 übercoin) to invite others
+                            {/if}
+                        </small>
+                    </div>
+
+                    <div style="margin-top: 1rem;">
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            disabled={settingsSaving}
+                        >
+                            {settingsSaving ? 'Saving...' : 'Save Settings'}
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+            <!-- Guest Avatars Section -->
+            <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border);">
+                <h3 style="margin-bottom: 0.5rem;">Guest Avatars</h3>
+                <p style="color: var(--gray); margin-bottom: 1rem; font-size: 0.9rem;">
+                    Upload avatars that will be randomly assigned to guest users in chat
+                </p>
+
+                <div style="display: grid; gap: 1rem; max-width: 600px;">
+                    <div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
+                        <label style="display: block; margin-bottom: 0.5rem;">Upload Avatars</label>
+                        <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
+                            <input
+                                type="file"
+                                name="avatarFiles"
+                                accept="image/png,image/jpeg,image/gif,image/webp"
+                                multiple
+                                on:change={handleAvatarFilesSelect}
+                            />
+                            <button
+                                class="btn btn-primary"
+                                on:click={uploadDefaultAvatars}
+                                disabled={!avatarFiles || avatarsUploading}
+                            >
+                                {avatarsUploading ? 'Uploading...' : 'Upload Avatars'}
+                            </button>
+                        </div>
+                        <small style="color: var(--gray); display: block; margin-top: 0.5rem;">
+                            Select multiple images (PNG, JPEG, GIF, WebP). These will be randomly assigned to guests.
+                        </small>
+                    </div>
+
+                    {#if defaultAvatars.length > 0}
+                        <div>
+                            <label style="display: block; margin-bottom: 0.5rem;">Current Avatars ({defaultAvatars.length})</label>
+                            <div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
+                                {#each defaultAvatars as avatar}
+                                    <div style="position: relative; display: inline-block;">
+                                        <img
+                                            src={avatar.filePath}
+                                            alt="Default avatar"
+                                            style="width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border);"
+                                        />
+                                        <button
+                                            style="position: absolute; top: -6px; right: -6px; background: #dc3545; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;"
+                                            on:click={() => deleteDefaultAvatar(avatar.id)}
+                                            title="Delete avatar"
+                                        >×</button>
+                                    </div>
+                                {/each}
+                            </div>
+                        </div>
+                    {:else}
+                        <p style="color: var(--gray); font-style: italic;">
+                            No default avatars uploaded. Guests will use a colored placeholder.
+                        </p>
+                    {/if}
+                </div>
+            </div>
+
+            <!-- Honk Sounds Section -->
+            <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border);">
+                <h3 style="margin-bottom: 0.5rem;">Mention Sounds</h3>
+                <p style="color: var(--gray); margin-bottom: 1rem; font-size: 0.9rem;">
+                    Upload MP3/WAV/OGG files for @mention notifications. Only one can be active at a time.
+                </p>
+
+                <div style="max-width: 600px;">
+                    <div style="margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
+                        <label style="display: block; margin-bottom: 0.5rem;">Upload New Sound</label>
+                        <div style="display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;">
+                            <div>
+                                <input
+                                    id="honkFile"
+                                    type="file"
+                                    accept=".mp3,.wav,.ogg,audio/mpeg,audio/wav,audio/ogg"
+                                    on:change={handleHonkFileSelect}
+                                />
+                            </div>
+                            <div style="flex: 1; min-width: 150px;">
+                                <input
+                                    id="honkName"
+                                    type="text"
+                                    placeholder="Sound name"
+                                    bind:value={honkName}
+                                />
+                            </div>
+                            <button class="btn btn-primary" on:click={uploadHonkSound} disabled={!honkFile}>
+                                Upload
+                            </button>
+                        </div>
+                    </div>
+
+                    {#if honkSounds.length > 0}
+                        <div style="display: grid; gap: 0.75rem;">
+                            {#each honkSounds as honk}
+                                <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: {honk.isActive ? 'rgba(40, 167, 69, 0.1)' : 'transparent'};">
+                                    <div style="flex: 1;">
+                                        <div style="font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
+                                            {honk.name}
+                                            {#if honk.isActive}
+                                                <span class="badge" style="background: #28a745;">Active</span>
+                                            {/if}
+                                        </div>
+                                        <div style="font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem;">
+                                            {formatDate(honk.createdAt)}
+                                        </div>
+                                    </div>
+                                    <audio controls style="height: 28px;">
+                                        <source src={honk.filePath} type="audio/mpeg" />
+                                    </audio>
+                                    <div style="display: flex; gap: 0.5rem;">
+                                        {#if !honk.isActive}
+                                            <button
+                                                class="btn action-btn"
+                                                style="background: #28a745; font-size: 0.8rem; padding: 0.35rem 0.6rem;"
+                                                on:click={() => setActiveHonk(honk.id)}
+                                            >
+                                                Activate
+                                            </button>
+                                        {/if}
+                                        <button
+                                            class="btn btn-danger action-btn"
+                                            style="font-size: 0.8rem; padding: 0.35rem 0.6rem;"
+                                            on:click={() => deleteHonkSound(honk.id)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <p style="color: var(--gray); font-style: italic;">
+                            No mention sounds uploaded yet.
+                        </p>
+                    {/if}
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Content Moderation</h2>
+            <p style="color: var(--gray); margin-bottom: 2rem;">
+                Configure words that should be automatically censored (replaced with ***) from all user-generated content
+            </p>
+
+            <div style="display: grid; gap: 1.5rem; max-width: 600px;">
+                <div>
+                    <label for="censoredWords">
+                        Censored Words
+                    </label>
+                    <textarea
+                        id="censoredWords"
+                        bind:value={censoredWords}
+                        placeholder="word1, word2, phrase to censor, another word"
+                        rows="6"
+                        style="margin-top: 0.5rem; width: 100%; resize: vertical; font-family: monospace; border-color: {censoredWordsValid ? 'var(--border)' : '#ef4444'};"
+                    ></textarea>
+
+                    <!-- Validation Stats -->
+                    <div style="display: flex; gap: 1.5rem; margin-top: 0.5rem; font-size: 0.85rem;">
+                        <span style="color: {censoredWordCountExceeded ? '#ef4444' : 'var(--gray)'};">
+                            Words: {censoredWordCount}/{MAX_WORDS}
+                        </span>
+                        <span style="color: {censoredByteSizeExceeded ? '#ef4444' : 'var(--gray)'};">
+                            Size: {(censoredByteSize / 1024).toFixed(1)}KB/{MAX_BYTES / 1024}KB
+                        </span>
+                    </div>
+
+                    <!-- Warnings -->
+                    {#if censoredWordCountExceeded}
+                        <p style="color: #ef4444; font-size: 0.85rem; margin-top: 0.5rem;">
+                            Too many words. Maximum is {MAX_WORDS}.
+                        </p>
+                    {/if}
+                    {#if censoredByteSizeExceeded}
+                        <p style="color: #ef4444; font-size: 0.85rem; margin-top: 0.5rem;">
+                            Content too large. Maximum is {MAX_BYTES / 1024}KB.
+                        </p>
+                    {/if}
+                    {#if duplicateCensoredWords.length > 0}
+                        <p style="color: #f59e0b; font-size: 0.85rem; margin-top: 0.5rem;">
+                            Duplicate words found: {duplicateCensoredWords.slice(0, 5).join(', ')}{duplicateCensoredWords.length > 5 ? '...' : ''}
+                        </p>
+                    {/if}
+
+                    <small style="color: var(--gray); display: block; margin-top: 0.5rem;">
+                        Enter words or phrases separated by commas. These will be replaced with *** in chat messages, bios, forum content, and descriptions. Usernames and realm names containing these words will be blocked during registration/creation. Case-insensitive matching.
+                    </small>
+                </div>
+
+                <div style="margin-top: 0.5rem;">
+                    <button
+                        class="btn btn-primary"
+                        on:click={saveCensoredWords}
+                        disabled={censoredWordsSaving || !censoredWordsValid}
+                    >
+                        {censoredWordsSaving ? 'Saving...' : 'Save Censored Words'}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- SSL/HTTPS Settings -->
+        <div class="card">
+            <h2>SSL/HTTPS Certificate</h2>
+            <p style="color: var(--gray); margin-bottom: 2rem;">
+                Manage Let's Encrypt SSL certificates for HTTPS. Certificates auto-renew every 60-90 days.
+            </p>
+
+            {#if sslLoading}
+                <p style="color: var(--gray);">Loading SSL settings...</p>
+            {:else}
+                <div style="display: grid; gap: 1.5rem; max-width: 600px;">
+                    <!-- Certificate Status -->
+                    <div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: {
+                        sslSettings.certificateStatus === 'active' ? 'rgba(40, 167, 69, 0.1)' :
+                        sslSettings.certificateStatus === 'pending' ? 'rgba(255, 193, 7, 0.1)' :
+                        sslSettings.certificateStatus === 'error' ? 'rgba(220, 53, 69, 0.1)' :
+                        'transparent'
+                    };">
+                        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
+                            <span style="font-weight: 600;">Certificate Status:</span>
+                            <span class="badge" style="background: {
+                                sslSettings.certificateStatus === 'active' ? '#28a745' :
+                                sslSettings.certificateStatus === 'pending' ? '#ffc107' :
+                                sslSettings.certificateStatus === 'error' ? '#dc3545' :
+                                '#6c757d'
+                            }; color: {sslSettings.certificateStatus === 'pending' ? '#000' : '#fff'};">
+                                {sslSettings.certificateStatus === 'none' ? 'Not Configured' :
+                                 sslSettings.certificateStatus.charAt(0).toUpperCase() + sslSettings.certificateStatus.slice(1)}
+                            </span>
+                            {#if sslSettings.certificateStatus === 'pending'}
+                                <span class="spinner" style="width: 14px; height: 14px;"></span>
+                            {/if}
+                        </div>
+                        {#if sslSettings.certificateExpiry}
+                            <div style="font-size: 0.9rem; color: var(--gray);">
+                                Expires: {new Date(sslSettings.certificateExpiry).toLocaleDateString()}
+                            </div>
+                        {/if}
+                        {#if sslSettings.lastRenewalError}
+                            <div style="font-size: 0.9rem; color: #dc3545; margin-top: 0.5rem;">
+                                Error: {sslSettings.lastRenewalError}
+                            </div>
+                        {/if}
+                    </div>
+
+                    <!-- Domain -->
+                    <div>
+                        <label for="sslDomain">Domain</label>
+                        <input
+                            id="sslDomain"
+                            type="text"
+                            bind:value={sslSettings.domain}
+                            placeholder="beeta.realms.pub"
+                            style="margin-top: 0.5rem;"
+                        />
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem;">
+                            The domain for which to request the SSL certificate. Must point to this server.
+                        </small>
+                    </div>
+
+                    <!-- ACME Email -->
+                    <div>
+                        <label for="acmeEmail">Let's Encrypt Email</label>
+                        <input
+                            id="acmeEmail"
+                            type="email"
+                            bind:value={sslSettings.acmeEmail}
+                            placeholder="admin@example.com"
+                            style="margin-top: 0.5rem;"
+                        />
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem;">
+                            Email for certificate expiration warnings. Required by Let's Encrypt.
+                        </small>
+                    </div>
+
+                    <!-- Auto Renewal -->
+                    <div>
+                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                            <input
+                                type="checkbox"
+                                bind:checked={sslSettings.autoRenewalEnabled}
+                                style="width: auto; margin: 0;"
+                            />
+                            <span>Enable automatic certificate renewal</span>
+                        </label>
+                        <small style="color: var(--gray); display: block; margin-top: 0.25rem; margin-left: 1.75rem;">
+                            Certificates will automatically renew before expiration
+                        </small>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+                        <button
+                            class="btn btn-primary"
+                            on:click={saveSSLSettings}
+                            disabled={sslSaving}
+                        >
+                            {sslSaving ? 'Saving...' : 'Save SSL Settings'}
+                        </button>
+                        <button
+                            class="btn"
+                            style="background: #28a745;"
+                            on:click={requestCertificate}
+                            disabled={sslRequesting || sslSettings.certificateStatus === 'pending' || !sslSettings.domain || !sslSettings.acmeEmail}
+                        >
+                            {#if sslRequesting || sslSettings.certificateStatus === 'pending'}
+                                <span class="spinner" style="width: 14px; height: 14px; margin-right: 0.5rem;"></span>
+                                Requesting...
+                            {:else}
+                                Request Certificate
+                            {/if}
+                        </button>
+                    </div>
+
+                    {#if sslSettings.certificateStatus === 'none'}
+                        <div style="padding: 1rem; background: rgba(139, 92, 246, 0.1); border-radius: 8px; border: 1px solid rgba(139, 92, 246, 0.3);">
+                            <p style="margin: 0; font-size: 0.9rem;">
+                                <strong>Getting Started:</strong><br/>
+                                1. Enter your domain and email above<br/>
+                                2. Make sure your DNS points to this server<br/>
+                                3. Click "Save SSL Settings" then "Request Certificate"<br/>
+                                4. Wait for Let's Encrypt to verify your domain
+                            </p>
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+        </div>
+
+    {:else if activeTab === 'botkeys'}
+        <div class="card">
+            <h2>Bot API Keys</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                View and manage all bot API keys. Deleting a key will immediately disconnect any bot using it.
+            </p>
+
+            {#if botApiKeys.length === 0}
+                <p style="color: var(--gray); font-style: italic;">
+                    No bot API keys have been created yet.
+                </p>
+            {:else}
+                <div class="data-table">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Name</th>
+                                <th>Owner</th>
+                                <th>Scopes</th>
+                                <th>Created</th>
+                                <th>Last Used</th>
+                                <th>Expires</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each botApiKeys as key}
+                                <tr>
+                                    <td>{key.id}</td>
+                                    <td>
+                                        <code style="background: rgba(139, 92, 246, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px;">
+                                            {key.name}
+                                        </code>
+                                    </td>
+                                    <td>
+                                        <a href="/profile/{key.username}" style="color: var(--primary);">
+                                            {key.username}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <span style="background: rgba(34, 197, 94, 0.2); color: #22c55e; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">
+                                            {key.scopes || 'chat:rw'}
+                                        </span>
+                                    </td>
+                                    <td style="font-size: 0.85rem; color: var(--gray);">
+                                        {formatDate(key.createdAt)}
+                                    </td>
+                                    <td style="font-size: 0.85rem; color: var(--gray);">
+                                        {key.lastUsedAt ? formatDate(key.lastUsedAt) : 'Never'}
+                                    </td>
+                                    <td style="font-size: 0.85rem; color: var(--gray);">
+                                        {formatDate(key.expiresAt)}
+                                    </td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger btn-sm"
+                                            on:click={() => deleteBotApiKey(key.id, key.name, key.username)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+
+                <p style="color: var(--gray); font-size: 0.85rem; margin-top: 1rem;">
+                    Total: {botApiKeys.length} API key{botApiKeys.length !== 1 ? 's' : ''}
+                </p>
+            {/if}
+        </div>
+
+    {:else if activeTab === 'bans'}
+        <div class="card">
+            <h2>Uberbanned Fingerprints</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Site-wide fingerprint bans. These fingerprints are blocked from accessing the entire website.
+            </p>
+
+            {#if uberbannedFingerprints.length === 0}
+                <p style="color: var(--gray); font-style: italic;">
+                    No fingerprints are currently uberbanned.
+                </p>
+            {:else}
+                <div class="data-table">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Fingerprint</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each uberbannedFingerprints as fingerprint}
+                                <tr>
+                                    <td>
+                                        <code style="background: rgba(239, 68, 68, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.85rem;">
+                                            {fingerprint.substring(0, 16)}...{fingerprint.substring(fingerprint.length - 8)}
+                                        </code>
+                                        <button
+                                            class="copy-btn"
+                                            title="Copy full fingerprint"
+                                            on:click={() => navigator.clipboard.writeText(fingerprint)}
+                                        >
+                                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+                                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger btn-sm"
+                                            on:click={() => removeUberban(fingerprint)}
+                                        >
+                                            Remove Ban
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+
+                <p style="color: var(--gray); font-size: 0.85rem; margin-top: 1rem;">
+                    Total: {uberbannedFingerprints.length} banned fingerprint{uberbannedFingerprints.length !== 1 ? 's' : ''}
+                </p>
             {/if}
         </div>
     {/if}
diff --git a/frontend/src/routes/audio/+page.svelte b/frontend/src/routes/audio/+page.svelte
new file mode 100644
index 0000000..7003fa2
--- /dev/null
+++ b/frontend/src/routes/audio/+page.svelte
@@ -0,0 +1,440 @@
+<script>
+    import { onMount } from 'svelte';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { audioPlaylist } from '$lib/stores/audioPlaylist';
+
+    let audioFiles = [];
+    let loading = true;
+    let page = 1;
+    let hasMore = true;
+
+    // Group audio by realm
+    $: groupedAudio = audioFiles.reduce((acc, audio) => {
+        const realmKey = audio.realmId || 'unknown';
+        if (!acc[realmKey]) {
+            acc[realmKey] = {
+                realmId: audio.realmId,
+                realmName: audio.realmName || 'Unknown Realm',
+                audio: []
+            };
+        }
+        acc[realmKey].audio.push(audio);
+        return acc;
+    }, {});
+
+    $: realmGroups = Object.values(groupedAudio);
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatBitrate(bps) {
+        if (!bps) return '';
+        const kbps = Math.round(bps / 1000);
+        if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
+        return kbps + ' kbps';
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    function isInPlaylist(audioId) {
+        return $audioPlaylist.queue.some(t => t.id === audioId);
+    }
+
+    function togglePlaylist(audio, realmName) {
+        if (isInPlaylist(audio.id)) {
+            audioPlaylist.removeTrack(audio.id);
+        } else {
+            audioPlaylist.addTrack({
+                id: audio.id,
+                title: audio.title,
+                username: audio.username,
+                filePath: audio.filePath,
+                thumbnailPath: audio.thumbnailPath || '',
+                durationSeconds: audio.durationSeconds,
+                realmName: realmName
+            });
+        }
+    }
+
+    function playNow(audio, realmName) {
+        audioPlaylist.playTrack({
+            id: audio.id,
+            title: audio.title,
+            username: audio.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realmName
+        });
+    }
+
+    async function loadAudio(append = false) {
+        if (!browser) return;
+
+        try {
+            const res = await fetch(`/api/audio?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                const fetchedAudio = data.audio || [];
+                if (append) {
+                    audioFiles = [...audioFiles, ...fetchedAudio];
+                } else {
+                    audioFiles = fetchedAudio;
+                }
+                hasMore = fetchedAudio.length === 20;
+            }
+        } catch (e) {
+            console.error('Failed to load audio:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function loadMore() {
+        page++;
+        loadAudio(true);
+    }
+
+    onMount(() => {
+        loadAudio();
+    });
+</script>
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Audio</title>
+</svelte:head>
+
+<style>
+    .hero {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #ec4899, #f472b6);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .hero p {
+        font-size: 1.1rem;
+        color: var(--gray);
+    }
+
+    /* Realm group styles */
+    .realm-group {
+        margin-bottom: 3rem;
+    }
+
+    .realm-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .realm-title h2 {
+        margin: 0;
+        font-size: 1.3rem;
+    }
+
+    .realm-badge {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .view-realm-link {
+        color: #ec4899;
+        text-decoration: none;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        transition: opacity 0.2s;
+    }
+
+    .view-realm-link:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+
+    /* Audio list styles */
+    .audio-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .audio-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        transition: all 0.2s;
+    }
+
+    .audio-item:hover {
+        border-color: #ec4899;
+        background: rgba(236, 72, 153, 0.05);
+    }
+
+    .audio-number {
+        width: 24px;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.85rem;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .audio-thumbnail .placeholder {
+        font-size: 1.2rem;
+        opacity: 0.5;
+    }
+
+    .audio-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .audio-title {
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: var(--white);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .audio-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--gray);
+        font-size: 0.75rem;
+        margin-top: 0.15rem;
+    }
+
+    .audio-bitrate {
+        color: #ec4899;
+    }
+
+    .audio-duration {
+        font-family: monospace;
+        color: var(--gray);
+        font-size: 0.85rem;
+        min-width: 45px;
+        text-align: right;
+        flex-shrink: 0;
+    }
+
+    .audio-actions {
+        display: flex;
+        gap: 0.4rem;
+        flex-shrink: 0;
+    }
+
+    .action-btn {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--gray);
+        font-size: 0.8rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .action-btn:hover {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .action-btn.play {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: rgba(236, 72, 153, 0.4);
+        color: #ec4899;
+    }
+
+    .action-btn.play:hover {
+        background: #ec4899;
+        color: white;
+    }
+
+    .action-btn.added {
+        background: rgba(126, 231, 135, 0.2);
+        border-color: #7ee787;
+        color: #7ee787;
+    }
+
+    .no-audio {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-audio-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .load-more {
+        display: flex;
+        justify-content: center;
+        padding: 2rem 0;
+    }
+
+    .load-more-btn {
+        padding: 0.75rem 2rem;
+        background: #ec4899;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .load-more-btn:hover {
+        background: #db2777;
+    }
+</style>
+
+<div class="container">
+    <div class="hero">
+        <h1>Audio Realms</h1>
+        <p>Browse uploaded audio from our community</p>
+    </div>
+
+    {#if loading}
+        <div style="text-align: center; padding: 2rem;">
+            <p>Loading audio...</p>
+        </div>
+    {:else if audioFiles.length === 0}
+        <div class="no-audio">
+            <div class="no-audio-icon">🎵</div>
+            <h2>No audio yet</h2>
+            <p>Be the first to upload audio!</p>
+        </div>
+    {:else}
+        {#each realmGroups as group}
+            <div class="realm-group">
+                <div class="realm-header">
+                    <div class="realm-title">
+                        <h2>{group.realmName}</h2>
+                        <span class="realm-badge">{group.audio.length} tracks</span>
+                    </div>
+                    <a href={`/audio/${encodeURIComponent(group.realmName)}`} class="view-realm-link">
+                        View all
+                    </a>
+                </div>
+                <div class="audio-list">
+                    {#each group.audio.slice(0, 5) as audio, index}
+                        <div class="audio-item">
+                            <span class="audio-number">{index + 1}</span>
+                            <div class="audio-thumbnail">
+                                {#if audio.thumbnailPath}
+                                    <img src={audio.thumbnailPath} alt={audio.title} />
+                                {:else}
+                                    <span class="placeholder">🎵</span>
+                                {/if}
+                            </div>
+                            <div class="audio-info">
+                                <div class="audio-title">{audio.title}</div>
+                                <div class="audio-meta">
+                                    <span>{audio.username}</span>
+                                    {#if audio.bitrate}
+                                        <span>•</span>
+                                        <span class="audio-bitrate">{formatBitrate(audio.bitrate)}</span>
+                                    {/if}
+                                    <span>•</span>
+                                    <span>{timeAgo(audio.createdAt)}</span>
+                                </div>
+                            </div>
+                            <span class="audio-duration">{formatDuration(audio.durationSeconds)}</span>
+                            <div class="audio-actions">
+                                <button
+                                    class="action-btn play"
+                                    on:click={() => playNow(audio, group.realmName)}
+                                    title="Play now"
+                                >
+                                    ▶
+                                </button>
+                                <button
+                                    class="action-btn"
+                                    class:added={isInPlaylist(audio.id)}
+                                    on:click={() => togglePlaylist(audio, group.realmName)}
+                                    title={isInPlaylist(audio.id) ? 'Remove from playlist' : 'Add to playlist'}
+                                >
+                                    {isInPlaylist(audio.id) ? '✓' : '+'}
+                                </button>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        {#if hasMore}
+            <div class="load-more">
+                <button class="load-more-btn" on:click={loadMore}>Load More</button>
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/audio/[name]/+page.svelte b/frontend/src/routes/audio/[name]/+page.svelte
new file mode 100644
index 0000000..81084d2
--- /dev/null
+++ b/frontend/src/routes/audio/[name]/+page.svelte
@@ -0,0 +1,492 @@
+<script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { audioPlaylist } from '$lib/stores/audioPlaylist';
+
+    let realm = null;
+    let audioFiles = [];
+    let loading = true;
+    let error = null;
+
+    $: realmName = $page.params.name;
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatBitrate(bps) {
+        if (!bps) return '';
+        const kbps = Math.round(bps / 1000);
+        if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
+        return kbps + ' kbps';
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    function isInPlaylist(audioId) {
+        return $audioPlaylist.queue.some(t => t.id === audioId);
+    }
+
+    function togglePlaylist(audio) {
+        if (isInPlaylist(audio.id)) {
+            audioPlaylist.removeTrack(audio.id);
+        } else {
+            audioPlaylist.addTrack({
+                id: audio.id,
+                title: audio.title,
+                username: audio.username || realm?.username,
+                filePath: audio.filePath,
+                thumbnailPath: audio.thumbnailPath || '',
+                durationSeconds: audio.durationSeconds,
+                realmName: realm?.name
+            });
+        }
+    }
+
+    function addToPlaylist(audio) {
+        audioPlaylist.addTrack({
+            id: audio.id,
+            title: audio.title,
+            username: audio.username || realm?.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm?.name
+        });
+    }
+
+    function playNow(audio) {
+        audioPlaylist.playTrack({
+            id: audio.id,
+            title: audio.title,
+            username: audio.username || realm?.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm?.name
+        });
+    }
+
+    function addAllToPlaylist() {
+        audioFiles.forEach(audio => {
+            if (!isInPlaylist(audio.id)) {
+                addToPlaylist(audio);
+            }
+        });
+    }
+
+    async function loadRealmAudio() {
+        if (!browser || !realmName) return;
+
+        try {
+            const res = await fetch(`/api/audio/realm/name/${encodeURIComponent(realmName)}`);
+            if (res.ok) {
+                const data = await res.json();
+                realm = data.realm || null;
+                audioFiles = data.audio || [];
+            } else if (res.status === 404) {
+                error = 'Realm not found';
+            } else {
+                error = 'Failed to load realm';
+            }
+        } catch (e) {
+            console.error('Failed to load realm audio:', e);
+            error = 'Failed to load realm';
+        } finally {
+            loading = false;
+        }
+    }
+
+    let prevRealmName = null;
+
+    onMount(() => {
+        prevRealmName = realmName;
+        loadRealmAudio();
+    });
+
+    // Re-load only when realmName actually changes (not on initial mount)
+    $: if (browser && realmName && prevRealmName !== null && prevRealmName !== realmName) {
+        prevRealmName = realmName;
+        loading = true;
+        error = null;
+        loadRealmAudio();
+    }
+</script>
+
+<style>
+    .realm-header {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #ec4899, #f472b6);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .realm-description {
+        font-size: 1.1rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .realm-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    .realm-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .owner-link {
+        color: #ec4899;
+        text-decoration: none;
+    }
+
+    .owner-link:hover {
+        text-decoration: underline;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #ec4899;
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        text-decoration: underline;
+    }
+
+    .audio-count-badge {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+        padding: 0.3rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.85rem;
+    }
+
+    .realm-actions {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+    }
+
+    .add-all-btn {
+        padding: 0.6rem 1.5rem;
+        background: rgba(236, 72, 153, 0.2);
+        border: 1px solid rgba(236, 72, 153, 0.4);
+        border-radius: 8px;
+        color: #ec4899;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .add-all-btn:hover {
+        background: rgba(236, 72, 153, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .audio-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .audio-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        transition: all 0.2s;
+    }
+
+    .audio-item:hover {
+        border-color: #ec4899;
+        background: rgba(236, 72, 153, 0.05);
+    }
+
+    .audio-number {
+        width: 30px;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.9rem;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail {
+        width: 48px;
+        height: 48px;
+        border-radius: 4px;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .audio-thumbnail .placeholder {
+        font-size: 1.5rem;
+        opacity: 0.5;
+    }
+
+    .audio-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .audio-title {
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--white);
+        margin-bottom: 0.25rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .audio-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .audio-bitrate {
+        color: #ec4899;
+    }
+
+    .audio-duration {
+        font-family: monospace;
+        color: var(--gray);
+        font-size: 0.9rem;
+        min-width: 50px;
+        text-align: right;
+    }
+
+    .audio-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--gray);
+        font-size: 0.9rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .action-btn:hover {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .action-btn.play {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: rgba(236, 72, 153, 0.4);
+        color: #ec4899;
+    }
+
+    .action-btn.play:hover {
+        background: #ec4899;
+        color: white;
+    }
+
+    .action-btn.added {
+        background: rgba(126, 231, 135, 0.2);
+        border-color: #7ee787;
+        color: #7ee787;
+    }
+
+    .no-audio {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-audio-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .error-message {
+        text-align: center;
+        padding: 4rem 0;
+        color: #ef4444;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .terminal-hint {
+        text-align: center;
+        margin-top: 2rem;
+        padding: 1rem;
+        background: rgba(236, 72, 153, 0.1);
+        border: 1px solid rgba(236, 72, 153, 0.2);
+        border-radius: 8px;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .terminal-hint strong {
+        color: #ec4899;
+    }
+</style>
+
+<div class="container">
+    <a href="/audio" class="back-link">
+        <span>&#8592;</span> Back to all audio
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading realm...</p>
+        </div>
+    {:else if error}
+        <div class="error-message">
+            <h2>{error}</h2>
+            <p>The audio realm you're looking for doesn't exist or has been removed.</p>
+        </div>
+    {:else if realm}
+        <div class="realm-header">
+            <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+            {#if realm.description}
+                <p class="realm-description">{realm.description}</p>
+            {/if}
+            <div class="realm-meta">
+                <div class="realm-meta-item">
+                    <span>by</span>
+                    <a href={`/profile/${realm.username}`} class="owner-link">@{realm.username}</a>
+                </div>
+                <div class="audio-count-badge">
+                    {audioFiles.length} {audioFiles.length === 1 ? 'track' : 'tracks'}
+                </div>
+            </div>
+            {#if audioFiles.length > 0}
+                <div class="realm-actions">
+                    <button class="add-all-btn" on:click={addAllToPlaylist}>
+                        <span>+</span> Add All to Playlist
+                    </button>
+                </div>
+            {/if}
+        </div>
+
+        {#if audioFiles.length === 0}
+            <div class="no-audio">
+                <div class="no-audio-icon">🎵</div>
+                <h2>No audio yet</h2>
+                <p>This realm doesn't have any audio files yet.</p>
+            </div>
+        {:else}
+            <div class="audio-list">
+                {#each audioFiles as audio, index}
+                    <div class="audio-item">
+                        <span class="audio-number">{index + 1}</span>
+                        <div class="audio-thumbnail">
+                            {#if audio.thumbnailPath}
+                                <img src={audio.thumbnailPath} alt={audio.title} />
+                            {:else}
+                                <span class="placeholder">🎵</span>
+                            {/if}
+                        </div>
+                        <div class="audio-info">
+                            <div class="audio-title">{audio.title}</div>
+                            <div class="audio-meta">
+                                {#if audio.bitrate}
+                                    <span class="audio-bitrate">{formatBitrate(audio.bitrate)}</span>
+                                    <span>•</span>
+                                {/if}
+                                <span>{timeAgo(audio.createdAt)}</span>
+                            </div>
+                        </div>
+                        <span class="audio-duration">{formatDuration(audio.durationSeconds)}</span>
+                        <div class="audio-actions">
+                            <button
+                                class="action-btn play"
+                                on:click={() => playNow(audio)}
+                                title="Play now"
+                            >
+                                ▶
+                            </button>
+                            <button
+                                class="action-btn"
+                                class:added={$audioPlaylist.queue.some(t => t.id === audio.id)}
+                                on:click={() => togglePlaylist(audio)}
+                                title={$audioPlaylist.queue.some(t => t.id === audio.id) ? 'Remove from playlist' : 'Add to playlist'}
+                            >
+                                {$audioPlaylist.queue.some(t => t.id === audio.id) ? '✓' : '+'}
+                            </button>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+
+            <div class="terminal-hint">
+                Tracks added to playlist will play in the <strong>Terminal Audio tab</strong>. Press <strong>`</strong> to open the terminal.
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/audio/realm/[id]/+page.svelte b/frontend/src/routes/audio/realm/[id]/+page.svelte
new file mode 100644
index 0000000..7102d7f
--- /dev/null
+++ b/frontend/src/routes/audio/realm/[id]/+page.svelte
@@ -0,0 +1,492 @@
+<script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { audioPlaylist } from '$lib/stores/audioPlaylist';
+
+    let realm = null;
+    let audioFiles = [];
+    let loading = true;
+    let error = null;
+
+    $: realmId = $page.params.id;
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatBitrate(bps) {
+        if (!bps) return '';
+        const kbps = Math.round(bps / 1000);
+        if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
+        return kbps + ' kbps';
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    function isInPlaylist(audioId) {
+        return $audioPlaylist.queue.some(t => t.id === audioId);
+    }
+
+    function togglePlaylist(audio) {
+        if (isInPlaylist(audio.id)) {
+            audioPlaylist.removeTrack(audio.id);
+        } else {
+            audioPlaylist.addTrack({
+                id: audio.id,
+                title: audio.title,
+                username: audio.username || realm?.username,
+                filePath: audio.filePath,
+                thumbnailPath: audio.thumbnailPath || '',
+                durationSeconds: audio.durationSeconds,
+                realmName: realm?.name
+            });
+        }
+    }
+
+    function addToPlaylist(audio) {
+        audioPlaylist.addTrack({
+            id: audio.id,
+            title: audio.title,
+            username: audio.username || realm?.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm?.name
+        });
+    }
+
+    function playNow(audio) {
+        audioPlaylist.playTrack({
+            id: audio.id,
+            title: audio.title,
+            username: audio.username || realm?.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm?.name
+        });
+    }
+
+    function addAllToPlaylist() {
+        audioFiles.forEach(audio => {
+            if (!isInPlaylist(audio.id)) {
+                addToPlaylist(audio);
+            }
+        });
+    }
+
+    async function loadRealmAudio() {
+        if (!browser || !realmId) return;
+
+        try {
+            const res = await fetch(`/api/audio/realm/${realmId}`);
+            if (res.ok) {
+                const data = await res.json();
+                realm = data.realm || null;
+                audioFiles = data.audio || [];
+            } else if (res.status === 404) {
+                error = 'Realm not found';
+            } else {
+                error = 'Failed to load realm';
+            }
+        } catch (e) {
+            console.error('Failed to load realm audio:', e);
+            error = 'Failed to load realm';
+        } finally {
+            loading = false;
+        }
+    }
+
+    let prevRealmId = null;
+
+    onMount(() => {
+        prevRealmId = realmId;
+        loadRealmAudio();
+    });
+
+    // Re-load only when realmId actually changes (not on initial mount)
+    $: if (browser && realmId && prevRealmId !== null && prevRealmId !== realmId) {
+        prevRealmId = realmId;
+        loading = true;
+        error = null;
+        loadRealmAudio();
+    }
+</script>
+
+<style>
+    .realm-header {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #ec4899, #f472b6);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .realm-description {
+        font-size: 1.1rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .realm-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    .realm-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .owner-link {
+        color: #ec4899;
+        text-decoration: none;
+    }
+
+    .owner-link:hover {
+        text-decoration: underline;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #ec4899;
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        text-decoration: underline;
+    }
+
+    .audio-count-badge {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+        padding: 0.3rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.85rem;
+    }
+
+    .realm-actions {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+    }
+
+    .add-all-btn {
+        padding: 0.6rem 1.5rem;
+        background: rgba(236, 72, 153, 0.2);
+        border: 1px solid rgba(236, 72, 153, 0.4);
+        border-radius: 8px;
+        color: #ec4899;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .add-all-btn:hover {
+        background: rgba(236, 72, 153, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .audio-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .audio-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        transition: all 0.2s;
+    }
+
+    .audio-item:hover {
+        border-color: #ec4899;
+        background: rgba(236, 72, 153, 0.05);
+    }
+
+    .audio-number {
+        width: 30px;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.9rem;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail {
+        width: 48px;
+        height: 48px;
+        border-radius: 4px;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .audio-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .audio-thumbnail .placeholder {
+        font-size: 1.5rem;
+        opacity: 0.5;
+    }
+
+    .audio-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .audio-title {
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--white);
+        margin-bottom: 0.25rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .audio-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .audio-bitrate {
+        color: #ec4899;
+    }
+
+    .audio-duration {
+        font-family: monospace;
+        color: var(--gray);
+        font-size: 0.9rem;
+        min-width: 50px;
+        text-align: right;
+    }
+
+    .audio-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--gray);
+        font-size: 0.9rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .action-btn:hover {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: #ec4899;
+        color: #ec4899;
+    }
+
+    .action-btn.play {
+        background: rgba(236, 72, 153, 0.2);
+        border-color: rgba(236, 72, 153, 0.4);
+        color: #ec4899;
+    }
+
+    .action-btn.play:hover {
+        background: #ec4899;
+        color: white;
+    }
+
+    .action-btn.added {
+        background: rgba(126, 231, 135, 0.2);
+        border-color: #7ee787;
+        color: #7ee787;
+    }
+
+    .no-audio {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-audio-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .error-message {
+        text-align: center;
+        padding: 4rem 0;
+        color: #ef4444;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .terminal-hint {
+        text-align: center;
+        margin-top: 2rem;
+        padding: 1rem;
+        background: rgba(236, 72, 153, 0.1);
+        border: 1px solid rgba(236, 72, 153, 0.2);
+        border-radius: 8px;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .terminal-hint strong {
+        color: #ec4899;
+    }
+</style>
+
+<div class="container">
+    <a href="/audio" class="back-link">
+        <span>&#8592;</span> Back to all audio
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading realm...</p>
+        </div>
+    {:else if error}
+        <div class="error-message">
+            <h2>{error}</h2>
+            <p>The audio realm you're looking for doesn't exist or has been removed.</p>
+        </div>
+    {:else if realm}
+        <div class="realm-header">
+            <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+            {#if realm.description}
+                <p class="realm-description">{realm.description}</p>
+            {/if}
+            <div class="realm-meta">
+                <div class="realm-meta-item">
+                    <span>by</span>
+                    <a href={`/profile/${realm.username}`} class="owner-link">@{realm.username}</a>
+                </div>
+                <div class="audio-count-badge">
+                    {audioFiles.length} {audioFiles.length === 1 ? 'track' : 'tracks'}
+                </div>
+            </div>
+            {#if audioFiles.length > 0}
+                <div class="realm-actions">
+                    <button class="add-all-btn" on:click={addAllToPlaylist}>
+                        <span>+</span> Add All to Playlist
+                    </button>
+                </div>
+            {/if}
+        </div>
+
+        {#if audioFiles.length === 0}
+            <div class="no-audio">
+                <div class="no-audio-icon">🎵</div>
+                <h2>No audio yet</h2>
+                <p>This realm doesn't have any audio files yet.</p>
+            </div>
+        {:else}
+            <div class="audio-list">
+                {#each audioFiles as audio, index}
+                    <div class="audio-item">
+                        <span class="audio-number">{index + 1}</span>
+                        <div class="audio-thumbnail">
+                            {#if audio.thumbnailPath}
+                                <img src={audio.thumbnailPath} alt={audio.title} />
+                            {:else}
+                                <span class="placeholder">🎵</span>
+                            {/if}
+                        </div>
+                        <div class="audio-info">
+                            <div class="audio-title">{audio.title}</div>
+                            <div class="audio-meta">
+                                {#if audio.bitrate}
+                                    <span class="audio-bitrate">{formatBitrate(audio.bitrate)}</span>
+                                    <span>•</span>
+                                {/if}
+                                <span>{timeAgo(audio.createdAt)}</span>
+                            </div>
+                        </div>
+                        <span class="audio-duration">{formatDuration(audio.durationSeconds)}</span>
+                        <div class="audio-actions">
+                            <button
+                                class="action-btn play"
+                                on:click={() => playNow(audio)}
+                                title="Play now"
+                            >
+                                ▶
+                            </button>
+                            <button
+                                class="action-btn"
+                                class:added={$audioPlaylist.queue.some(t => t.id === audio.id)}
+                                on:click={() => togglePlaylist(audio)}
+                                title={$audioPlaylist.queue.some(t => t.id === audio.id) ? 'Remove from playlist' : 'Add to playlist'}
+                            >
+                                {$audioPlaylist.queue.some(t => t.id === audio.id) ? '✓' : '+'}
+                            </button>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+
+            <div class="terminal-hint">
+                Tracks added to playlist will play in the <strong>Terminal Audio tab</strong>. Press <strong>`</strong> to open the terminal.
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/chat/popout/+layout@.svelte b/frontend/src/routes/chat/popout/+layout@.svelte
new file mode 100644
index 0000000..f174304
--- /dev/null
+++ b/frontend/src/routes/chat/popout/+layout@.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { onMount } from 'svelte';
+	import { siteSettings } from '$lib/stores/siteSettings';
+	import '../../../app.css';
+
+	async function loadSiteSettings() {
+		try {
+			const response = await fetch('/api/settings/site');
+			if (response.ok) {
+				const data = await response.json();
+				const settings = data.settings || {};
+				siteSettings.set({
+					site_title: settings.site_title || 'Stream',
+					logo_path: settings.logo_path || '',
+					logo_display_mode: settings.logo_display_mode || 'text'
+				});
+			}
+		} catch (e) {
+			console.error('Failed to load site settings', e);
+		}
+	}
+
+	onMount(() => {
+		loadSiteSettings();
+	});
+</script>
+
+<slot />
diff --git a/frontend/src/routes/chat/popout/+page.svelte b/frontend/src/routes/chat/popout/+page.svelte
new file mode 100644
index 0000000..ba3a924
--- /dev/null
+++ b/frontend/src/routes/chat/popout/+page.svelte
@@ -0,0 +1,67 @@
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { siteSettings } from '$lib/stores/siteSettings';
+	import ChatPanel from '$lib/components/chat/ChatPanel.svelte';
+
+	let realmId = null;
+
+	onMount(() => {
+		// Parse realm ID from URL parameter
+		const params = new URLSearchParams(window.location.search);
+		realmId = params.get('realm');
+	});
+</script>
+
+<svelte:head>
+	<title>{$siteSettings.site_title} - Chat</title>
+</svelte:head>
+
+<div class="popout-container">
+	<ChatPanel {realmId} chatEnabled={true} chatGuestsAllowed={true} hideTheaterMode={true} />
+</div>
+
+<style>
+	:global(html),
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+		height: 100%;
+		width: 100%;
+		min-height: 0 !important;
+		max-height: 100%;
+	}
+
+	.popout-container {
+		width: 100%;
+		height: 100%;
+		background: #0a0a0a;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.popout-container :global(.chat-panel) {
+		flex: 1 1 0;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		max-height: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-left: none;
+	}
+
+	.popout-container :global(.messages-container) {
+		flex: 1 1 0;
+		min-height: 0;
+		overflow-y: auto;
+		background: #000;
+	}
+
+	.popout-container :global(.chat-input) {
+		flex-shrink: 0;
+	}
+</style>
diff --git a/frontend/src/routes/chat/terminal/+layout@.svelte b/frontend/src/routes/chat/terminal/+layout@.svelte
new file mode 100644
index 0000000..f174304
--- /dev/null
+++ b/frontend/src/routes/chat/terminal/+layout@.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { onMount } from 'svelte';
+	import { siteSettings } from '$lib/stores/siteSettings';
+	import '../../../app.css';
+
+	async function loadSiteSettings() {
+		try {
+			const response = await fetch('/api/settings/site');
+			if (response.ok) {
+				const data = await response.json();
+				const settings = data.settings || {};
+				siteSettings.set({
+					site_title: settings.site_title || 'Stream',
+					logo_path: settings.logo_path || '',
+					logo_display_mode: settings.logo_display_mode || 'text'
+				});
+			}
+		} catch (e) {
+			console.error('Failed to load site settings', e);
+		}
+	}
+
+	onMount(() => {
+		loadSiteSettings();
+	});
+</script>
+
+<slot />
diff --git a/frontend/src/routes/chat/terminal/+page.svelte b/frontend/src/routes/chat/terminal/+page.svelte
new file mode 100644
index 0000000..c276439
--- /dev/null
+++ b/frontend/src/routes/chat/terminal/+page.svelte
@@ -0,0 +1,564 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { connectionStatus } from '$lib/chat/chatStore';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import TerminalTabBar from '$lib/components/terminal/TerminalTabBar.svelte';
+    import TerminalCore from '$lib/components/terminal/TerminalCore.svelte';
+    import StreamsBrowser from '$lib/components/terminal/StreamsBrowser.svelte';
+    import WatchRoomsBrowser from '$lib/components/terminal/WatchRoomsBrowser.svelte';
+    import AudioBrowser from '$lib/components/terminal/AudioBrowser.svelte';
+    import EbookBrowser from '$lib/components/terminal/EbookBrowser.svelte';
+    import TreasuryBrowser from '$lib/components/terminal/TreasuryBrowser.svelte';
+    import GamesBrowser from '$lib/components/terminal/GamesBrowser.svelte';
+    import StickerBrowser from '$lib/components/chat/StickerBrowser.svelte';
+    import ProfilePreview from '$lib/components/chat/ProfilePreview.svelte';
+
+    let realmId = null;
+    let authInitialized = false;
+    let activeTab = 'terminal';
+    let renderStickers = false;
+    let activeProfilePreview = null;
+    let terminalCore;
+
+    // Date/time state
+    let currentTime = new Date();
+    let showCalendar = false;
+    let calendarDate = new Date();
+    let timeInterval;
+
+    const tabs = [
+        { id: 'terminal', label: 'Terminal' },
+        { id: 'stickers', label: 'Stickers' },
+        { id: 'streams', label: 'Streams' },
+        { id: 'watch', label: 'Watch', color: '#10b981' },
+        { id: 'audio', label: 'Audio', color: '#ec4899' },
+        { id: 'ebooks', label: 'eBooks', color: '#3b82f6' },
+        { id: 'games', label: 'Games', color: '#f59e0b' },
+        { id: 'treasury', label: 'Treasury', color: '#ffd700' }
+    ];
+
+    $: isConnected = $connectionStatus === 'connected';
+
+    function handleTabChange(event) {
+        activeTab = event.detail.tab;
+    }
+
+    function handleStickerSelect(stickerText) {
+        activeTab = 'terminal';
+        if (terminalCore) {
+            terminalCore.focusInput();
+        }
+    }
+
+    function handleShowProfile(event) {
+        const { username, userId, isGuest, messageId, position } = event.detail;
+        activeProfilePreview = { username, userId, isGuest, messageId, position };
+    }
+
+    function handleProfileClose() {
+        activeProfilePreview = null;
+    }
+
+    function handleRealmChange(event) {
+        realmId = event.detail.realmId;
+        document.title = realmId ? `Terminal - ${realmId}` : 'Terminal';
+    }
+
+    function handleStickersToggled(event) {
+        renderStickers = event.detail.renderStickers;
+    }
+
+    // Date/time formatting
+    function formatTime(date) {
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+    }
+
+    function formatDate(date) {
+        return date.toLocaleDateString('en-US', {
+            weekday: 'short',
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+
+    function toggleCalendar() {
+        showCalendar = !showCalendar;
+        if (showCalendar) {
+            calendarDate = new Date();
+        }
+    }
+
+    // Calendar helpers
+    function getCalendarDays(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const daysInMonth = lastDay.getDate();
+        const startDayOfWeek = firstDay.getDay();
+
+        const days = [];
+        for (let i = 0; i < startDayOfWeek; i++) {
+            days.push(null);
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(i);
+        }
+        return days;
+    }
+
+    function prevMonth() {
+        calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1);
+    }
+
+    function nextMonth() {
+        calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
+    }
+
+    function isToday(day) {
+        if (!day) return false;
+        const today = new Date();
+        return day === today.getDate() &&
+               calendarDate.getMonth() === today.getMonth() &&
+               calendarDate.getFullYear() === today.getFullYear();
+    }
+
+    $: calendarDays = getCalendarDays(calendarDate);
+    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+    // Timezone definitions
+    const timezones = [
+        { label: 'UTC', zone: 'UTC' },
+        { label: 'Germany', zone: 'Europe/Berlin' },
+        { label: 'India', zone: 'Asia/Kolkata' },
+        { label: 'Japan', zone: 'Asia/Tokyo' },
+        { label: 'Australia', zone: 'Australia/Sydney' },
+        { label: 'PST', zone: 'America/Los_Angeles' },
+        { label: 'MST', zone: 'America/Denver' },
+        { label: 'Central', zone: 'America/Chicago' },
+        { label: 'EST', zone: 'America/New_York' }
+    ];
+
+    function getTimezoneTime(zone) {
+        return currentTime.toLocaleTimeString('en-US', {
+            timeZone: zone,
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+    }
+
+    onMount(async () => {
+        // Initialize auth first
+        await auth.init();
+        authInitialized = true;
+
+        const params = new URLSearchParams(window.location.search);
+        const urlRealmId = params.get('realm');
+
+        document.title = urlRealmId ? `Terminal - ${urlRealmId}` : 'Terminal';
+
+        if (urlRealmId) {
+            realmId = urlRealmId;
+        }
+
+        if (terminalCore) {
+            terminalCore.focusInput();
+        }
+
+        // Update time every second
+        timeInterval = setInterval(() => {
+            currentTime = new Date();
+        }, 1000);
+    });
+
+    onDestroy(() => {
+        if (timeInterval) clearInterval(timeInterval);
+    });
+</script>
+
+<svelte:window on:click={() => showCalendar = false} />
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Terminal</title>
+</svelte:head>
+
+{#if !authInitialized}
+    <div class="terminal-popout auth-loading">
+        <div class="auth-message">Loading...</div>
+    </div>
+{:else if !$isAuthenticated}
+    <div class="terminal-popout auth-required">
+        <div class="auth-message">
+            <h2>Login Required</h2>
+            <p>Please log in to access the terminal.</p>
+            <a href="/login" class="login-btn">Login</a>
+        </div>
+    </div>
+{:else}
+<div class="terminal-popout">
+    <div class="popout-header">
+        <TerminalTabBar {tabs} {activeTab} on:tabChange={handleTabChange} />
+        <div class="header-right">
+            <div class="datetime-container">
+            <button class="datetime-button" on:click|stopPropagation={toggleCalendar} title="Show calendar">
+                <span class="datetime-date">{formatDate(currentTime)}</span>
+                <span class="datetime-time">{formatTime(currentTime)}</span>
+            </button>
+            {#if showCalendar}
+                <div class="calendar-dropdown" on:click|stopPropagation>
+                    <div class="calendar-panel">
+                        <div class="calendar-header">
+                            <button class="calendar-nav" on:click={prevMonth}>‹</button>
+                            <span class="calendar-month">{calendarMonthYear}</span>
+                            <button class="calendar-nav" on:click={nextMonth}>›</button>
+                        </div>
+                        <div class="calendar-weekdays">
+                            <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
+                        </div>
+                        <div class="calendar-days">
+                            {#each calendarDays as day}
+                                <span class="calendar-day" class:today={isToday(day)} class:empty={!day}>
+                                    {day || ''}
+                                </span>
+                            {/each}
+                        </div>
+                    </div>
+                    <div class="timezone-panel">
+                        {#each timezones as tz}
+                            <div class="timezone-row">
+                                <span class="timezone-label">{tz.label}</span>
+                                <span class="timezone-time">{getTimezoneTime(tz.zone)}</span>
+                            </div>
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+        </div>
+            <div class="status">
+                <span class="status-dot" class:connected={isConnected}></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-content">
+        {#if activeTab === 'terminal'}
+            <TerminalCore
+                bind:this={terminalCore}
+                {realmId}
+                {renderStickers}
+                showHotkeyHelp={false}
+                isActive={activeTab === 'terminal'}
+                on:showProfile={handleShowProfile}
+                on:realmChange={handleRealmChange}
+                on:stickersToggled={handleStickersToggled}
+            />
+        {:else if activeTab === 'stickers'}
+            <StickerBrowser onSelect={handleStickerSelect} />
+        {:else if activeTab === 'streams'}
+            <StreamsBrowser isActive={activeTab === 'streams'} />
+        {:else if activeTab === 'watch'}
+            <WatchRoomsBrowser isActive={activeTab === 'watch'} />
+        {:else if activeTab === 'audio'}
+            <AudioBrowser isActive={activeTab === 'audio'} />
+        {:else if activeTab === 'ebooks'}
+            <EbookBrowser isActive={activeTab === 'ebooks'} />
+        {:else if activeTab === 'games'}
+            <GamesBrowser isActive={activeTab === 'games'} />
+        {:else if activeTab === 'treasury'}
+            <TreasuryBrowser isActive={activeTab === 'treasury'} />
+        {/if}
+    </div>
+
+    {#if activeProfilePreview}
+        <ProfilePreview
+            username={activeProfilePreview.username}
+            userId={activeProfilePreview.userId}
+            isGuest={activeProfilePreview.isGuest}
+            position={activeProfilePreview.position}
+            {realmId}
+            on:close={handleProfileClose}
+        />
+    {/if}
+</div>
+{/if}
+
+<style>
+    :global(html), :global(body) {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        min-height: 0 !important;
+        max-height: 100%;
+    }
+
+    .terminal-popout {
+        width: 100%;
+        height: 100%;
+        background: #111;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        overflow: hidden;
+    }
+
+    .terminal-popout.auth-loading,
+    .terminal-popout.auth-required {
+        justify-content: center;
+        align-items: center;
+    }
+
+    .auth-message {
+        text-align: center;
+        color: #aaa;
+    }
+
+    .auth-message h2 {
+        margin: 0 0 0.5rem 0;
+        color: #fff;
+    }
+
+    .auth-message p {
+        margin: 0 0 1rem 0;
+    }
+
+    .login-btn {
+        display: inline-block;
+        padding: 0.5rem 1.5rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #fff;
+        text-decoration: none;
+        transition: all 0.15s;
+    }
+
+    .login-btn:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+    }
+
+    .popout-header {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem;
+        background: #0d0d0d;
+        border-bottom: 1px solid #333;
+        gap: 0.375rem;
+        flex-shrink: 0;
+    }
+
+    .header-right {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        flex-shrink: 0;
+    }
+
+    .status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 26px;
+        min-width: 26px;
+        padding: 0 0.375rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+    }
+
+    .status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #f44336;
+    }
+
+    .status-dot.connected {
+        background: #4caf50;
+    }
+
+    .datetime-container {
+        position: relative;
+    }
+
+    .datetime-button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: 26px;
+        padding: 0 0.5rem;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        color: #aaa;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .datetime-button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .datetime-date {
+        color: #fff;
+    }
+
+    .datetime-time {
+        color: #4caf50;
+    }
+
+    .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: 0.5rem;
+        background: #111;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 0.75rem;
+        z-index: 100;
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .calendar-panel {
+        min-width: 200px;
+    }
+
+    .timezone-panel {
+        border-left: 1px solid #333;
+        padding-left: 0.75rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 100px;
+    }
+
+    .timezone-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.15rem 0;
+    }
+
+    .timezone-label {
+        color: #888;
+        font-size: 0.7rem;
+    }
+
+    .timezone-time {
+        color: #4caf50;
+        font-size: 0.75rem;
+        font-weight: 600;
+        font-family: 'Consolas', 'Monaco', monospace;
+    }
+
+    .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.75rem;
+    }
+
+    .calendar-month {
+        color: #fff;
+        font-size: 0.9rem;
+        font-weight: 600;
+    }
+
+    .calendar-nav {
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        color: #aaa;
+        font-size: 1rem;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        transition: all 0.15s;
+    }
+
+    .calendar-nav:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.25);
+        color: #fff;
+    }
+
+    .calendar-weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+        margin-bottom: 0.25rem;
+    }
+
+    .calendar-weekdays span {
+        text-align: center;
+        color: #888;
+        font-size: 0.7rem;
+        padding: 0.25rem;
+    }
+
+    .calendar-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+    }
+
+    .calendar-day {
+        text-align: center;
+        padding: 0.35rem;
+        font-size: 0.8rem;
+        color: #ccc;
+        border-radius: 4px;
+    }
+
+    .calendar-day.empty {
+        color: transparent;
+    }
+
+    .calendar-day.today {
+        background: #4caf50;
+        color: #111;
+        font-weight: 600;
+    }
+
+    .tab-content {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 0;
+        opacity: 0.9;
+    }
+
+    /* Minimal 1px grey scrollbar */
+    .terminal-popout :global(*::-webkit-scrollbar) {
+        width: 1px;
+        height: 1px;
+    }
+
+    .terminal-popout :global(*::-webkit-scrollbar-track) {
+        background: transparent;
+    }
+
+    .terminal-popout :global(*::-webkit-scrollbar-thumb) {
+        background: #333;
+    }
+
+    .terminal-popout :global(*) {
+        scrollbar-width: thin;
+        scrollbar-color: #333 transparent;
+    }
+</style>
diff --git a/frontend/src/routes/ebooks/+page.svelte b/frontend/src/routes/ebooks/+page.svelte
new file mode 100644
index 0000000..5d06536
--- /dev/null
+++ b/frontend/src/routes/ebooks/+page.svelte
@@ -0,0 +1,481 @@
+<script>
+    import { onMount } from 'svelte';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { ebookReader } from '$lib/stores/ebookReader';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+
+    let ebooks = [];
+    let loading = true;
+    let page = 1;
+    let hasMore = true;
+
+    // Group ebooks by realm
+    $: groupedEbooks = ebooks.reduce((acc, ebook) => {
+        const realmKey = ebook.realmId || 'unknown';
+        if (!acc[realmKey]) {
+            acc[realmKey] = {
+                realmId: ebook.realmId,
+                realmName: ebook.realmName || 'Unknown Realm',
+                ebooks: []
+            };
+        }
+        acc[realmKey].ebooks.push(ebook);
+        return acc;
+    }, {});
+
+    $: realmGroups = Object.values(groupedEbooks);
+
+    function formatFileSize(bytes) {
+        if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+        if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        return bytes + ' B';
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    async function loadEbooks(append = false) {
+        if (!browser) return;
+
+        try {
+            const res = await fetch(`/api/ebooks?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                const fetchedEbooks = data.ebooks || [];
+                if (append) {
+                    ebooks = [...ebooks, ...fetchedEbooks];
+                } else {
+                    ebooks = fetchedEbooks;
+                }
+                // Use >= for safer pagination (handles edge case where server returns fewer)
+                hasMore = fetchedEbooks.length >= 20;
+            }
+        } catch (e) {
+            console.error('Failed to load ebooks:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function loadMore() {
+        page++;
+        loadEbooks(true);
+    }
+
+    function openBook(ebook) {
+        ebookReader.openBook({
+            id: ebook.id,
+            title: ebook.title,
+            filePath: ebook.filePath,
+            coverPath: ebook.coverPath,
+            chapterCount: ebook.chapterCount,
+            username: ebook.username,
+            realmName: ebook.realmName
+        });
+    }
+
+    async function downloadEbook(e, ebook) {
+        e.stopPropagation(); // Prevent card click from opening book
+
+        if (!$isAuthenticated) {
+            alert('Please log in to download ebooks');
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/ebooks/${ebook.id}/download`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                // Sanitize filename - remove special characters
+                const safeTitle = ebook.title.replace(/[<>:"/\\|?*]/g, '_').substring(0, 100);
+                a.download = `${safeTitle || 'ebook'}.epub`;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } else if (response.status === 401) {
+                alert('Please log in to download ebooks');
+            } else {
+                alert('Download failed');
+            }
+        } catch (err) {
+            console.error('Download error:', err);
+            alert('Download failed');
+        }
+    }
+
+    onMount(() => {
+        auth.init();
+        loadEbooks();
+    });
+</script>
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Ebooks</title>
+</svelte:head>
+
+<style>
+    .hero {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #3b82f6, #60a5fa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .hero p {
+        font-size: 1.1rem;
+        color: var(--gray);
+    }
+
+    /* Realm group styles */
+    .realm-group {
+        margin-bottom: 3rem;
+    }
+
+    .realm-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .realm-title h2 {
+        margin: 0;
+        font-size: 1.3rem;
+    }
+
+    .realm-badge {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .view-realm-link {
+        color: #3b82f6;
+        text-decoration: none;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        transition: opacity 0.2s;
+    }
+
+    .view-realm-link:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+
+    .ebook-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .ebook-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+        cursor: pointer;
+    }
+
+    .ebook-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
+        border-color: #3b82f6;
+    }
+
+    .ebook-cover {
+        width: 100%;
+        aspect-ratio: 2/3;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .ebook-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .ebook-cover .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .chapter-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .format-badge {
+        position: absolute;
+        top: 0.5rem;
+        left: 0.5rem;
+        background: rgba(59, 130, 246, 0.9);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+
+    .ebook-info {
+        padding: 1rem;
+    }
+
+    .ebook-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .ebook-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .uploader-info {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .uploader-avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--gray);
+    }
+
+    .uploader-name {
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .uploader-name:hover {
+        filter: invert(1);
+    }
+
+    .chapter-count {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        color: #3b82f6;
+        font-size: 0.8rem;
+    }
+
+    .upload-date {
+        color: #666;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+    }
+
+    .ebook-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+    }
+
+    .ebook-btn {
+        flex: 1;
+        padding: 0.5rem 0.75rem;
+        border: none;
+        border-radius: 4px;
+        font-size: 0.85rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s ease, transform 0.1s ease;
+    }
+
+    .ebook-btn:hover {
+        transform: translateY(-1px);
+    }
+
+    .read-btn {
+        background: #3b82f6;
+        color: white;
+    }
+
+    .read-btn:hover {
+        background: #2563eb;
+    }
+
+    .download-btn {
+        background: #1a1a1a;
+        color: white;
+        border: 1px solid var(--border);
+    }
+
+    .download-btn:hover {
+        background: #2a2a2a;
+    }
+
+    .no-ebooks {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-ebooks-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .load-more {
+        display: flex;
+        justify-content: center;
+        padding: 2rem 0;
+    }
+
+    .load-more-btn {
+        padding: 0.75rem 2rem;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .load-more-btn:hover {
+        background: #2563eb;
+    }
+</style>
+
+<div class="container">
+    <div class="hero">
+        <h1>Ebook Realms</h1>
+        <p>Browse uploaded ebooks from our community</p>
+    </div>
+
+    {#if loading}
+        <div style="text-align: center; padding: 2rem;">
+            <p>Loading ebooks...</p>
+        </div>
+    {:else if ebooks.length === 0}
+        <div class="no-ebooks">
+            <div class="no-ebooks-icon">📖</div>
+            <h2>No ebooks yet</h2>
+            <p>Be the first to upload an ebook!</p>
+        </div>
+    {:else}
+        {#each realmGroups as group}
+            <div class="realm-group">
+                <div class="realm-header">
+                    <div class="realm-title">
+                        <h2>{group.realmName}</h2>
+                        <span class="realm-badge">{group.ebooks.length} {group.ebooks.length === 1 ? 'book' : 'books'}</span>
+                    </div>
+                    <a href={`/ebooks/realm/${group.realmId}`} class="view-realm-link">
+                        View all
+                    </a>
+                </div>
+                <div class="ebook-grid">
+                    {#each group.ebooks.slice(0, 6) as ebook}
+                        <div class="ebook-card">
+                            <div class="ebook-cover" on:click={() => openBook(ebook)}>
+                                {#if ebook.coverPath}
+                                    <img src={ebook.coverPath} alt={ebook.title} />
+                                {:else}
+                                    <span class="placeholder">📖</span>
+                                {/if}
+                                <span class="format-badge">EPUB</span>
+                                {#if ebook.chapterCount}
+                                    <span class="chapter-badge">{ebook.chapterCount} ch</span>
+                                {/if}
+                            </div>
+                            <div class="ebook-info">
+                                <h3>{ebook.title}</h3>
+                                <div class="ebook-meta">
+                                    <div class="uploader-info">
+                                        {#if ebook.avatarUrl}
+                                            <img src={ebook.avatarUrl} alt={ebook.username} class="uploader-avatar" />
+                                        {:else}
+                                            <div class="uploader-avatar"></div>
+                                        {/if}
+                                        <span class="uploader-name">{ebook.username}</span>
+                                    </div>
+                                    {#if ebook.chapterCount}
+                                        <div class="chapter-count">{ebook.chapterCount} chapters</div>
+                                    {/if}
+                                </div>
+                                <div class="upload-date">{timeAgo(ebook.createdAt)}</div>
+                                <div class="ebook-actions">
+                                    <button class="ebook-btn read-btn" on:click={() => openBook(ebook)}>Read</button>
+                                    {#if $isAuthenticated}
+                                        <button class="ebook-btn download-btn" on:click={(e) => downloadEbook(e, ebook)}>Download</button>
+                                    {/if}
+                                </div>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        {#if hasMore}
+            <div class="load-more">
+                <button class="load-more-btn" on:click={loadMore}>Load More</button>
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/ebooks/realm/[id]/+page.svelte b/frontend/src/routes/ebooks/realm/[id]/+page.svelte
new file mode 100644
index 0000000..3d5f200
--- /dev/null
+++ b/frontend/src/routes/ebooks/realm/[id]/+page.svelte
@@ -0,0 +1,428 @@
+<script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { ebookReader } from '$lib/stores/ebookReader';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+
+    let realm = null;
+    let ebooks = [];
+    let loading = true;
+    let error = null;
+
+    $: realmId = $page.params.id;
+
+    function formatFileSize(bytes) {
+        if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+        if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        return bytes + ' B';
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    async function loadRealmEbooks() {
+        if (!browser || !realmId) return;
+
+        try {
+            const res = await fetch(`/api/ebooks/realm/${realmId}`);
+            if (res.ok) {
+                const data = await res.json();
+                realm = data.realm || null;
+                ebooks = data.ebooks || [];
+            } else if (res.status === 404) {
+                error = 'Realm not found';
+            } else {
+                error = 'Failed to load realm';
+            }
+        } catch (e) {
+            console.error('Failed to load realm ebooks:', e);
+            error = 'Failed to load realm';
+        } finally {
+            loading = false;
+        }
+    }
+
+    onMount(() => {
+        auth.init();
+        loadRealmEbooks();
+    });
+
+    $: if (browser && realmId) {
+        loading = true;
+        error = null;
+        loadRealmEbooks();
+    }
+
+    function openBook(ebook) {
+        ebookReader.openBook({
+            id: ebook.id,
+            title: ebook.title,
+            filePath: ebook.filePath,
+            coverPath: ebook.coverPath,
+            chapterCount: ebook.chapterCount,
+            username: realm?.username || '',
+            realmName: realm?.name || ''
+        });
+    }
+
+    async function downloadEbook(e, ebook) {
+        e.stopPropagation();
+
+        if (!$isAuthenticated) {
+            alert('Please log in to download ebooks');
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/ebooks/${ebook.id}/download`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${ebook.title}.epub`;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } else if (response.status === 401) {
+                alert('Please log in to download ebooks');
+            } else {
+                alert('Download failed');
+            }
+        } catch (err) {
+            console.error('Download error:', err);
+            alert('Download failed');
+        }
+    }
+</script>
+
+<style>
+    .realm-header {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #3b82f6, #60a5fa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .realm-description {
+        font-size: 1.1rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .realm-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    .realm-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .owner-link {
+        color: #3b82f6;
+        text-decoration: none;
+    }
+
+    .owner-link:hover {
+        text-decoration: underline;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #3b82f6;
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        text-decoration: underline;
+    }
+
+    .ebook-count-badge {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+        padding: 0.3rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.85rem;
+    }
+
+    .ebook-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .ebook-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .ebook-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
+        border-color: #3b82f6;
+    }
+
+    .ebook-cover {
+        width: 100%;
+        aspect-ratio: 2/3;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .ebook-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .ebook-cover .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .chapter-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .format-badge {
+        position: absolute;
+        top: 0.5rem;
+        left: 0.5rem;
+        background: rgba(59, 130, 246, 0.9);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+
+    .ebook-info {
+        padding: 1rem;
+    }
+
+    .ebook-title {
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: var(--white);
+        margin-bottom: 0.5rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .ebook-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .chapter-count {
+        color: #3b82f6;
+    }
+
+    .file-size {
+        color: #666;
+    }
+
+    .ebook-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+    }
+
+    .read-btn {
+        flex: 1;
+        padding: 0.6rem;
+        background: rgba(59, 130, 246, 0.2);
+        border: 1px solid rgba(59, 130, 246, 0.4);
+        border-radius: 6px;
+        color: #3b82f6;
+        text-align: center;
+        text-decoration: none;
+        font-size: 0.85rem;
+        font-family: inherit;
+        transition: all 0.2s;
+        cursor: pointer;
+    }
+
+    .read-btn:hover {
+        background: #3b82f6;
+        color: white;
+    }
+
+    .download-btn {
+        flex: 1;
+        padding: 0.6rem;
+        background: #1a1a1a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: white;
+        text-align: center;
+        font-size: 0.85rem;
+        font-family: inherit;
+        transition: all 0.2s;
+        cursor: pointer;
+    }
+
+    .download-btn:hover {
+        background: #2a2a2a;
+    }
+
+    .no-ebooks {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-ebooks-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .error-message {
+        text-align: center;
+        padding: 4rem 0;
+        color: #ef4444;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+</style>
+
+<div class="container">
+    <a href="/ebooks" class="back-link">
+        <span>&#8592;</span> Back to all ebooks
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading realm...</p>
+        </div>
+    {:else if error}
+        <div class="error-message">
+            <h2>{error}</h2>
+            <p>The ebook realm you're looking for doesn't exist or has been removed.</p>
+        </div>
+    {:else if realm}
+        <div class="realm-header">
+            <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+            {#if realm.description}
+                <p class="realm-description">{realm.description}</p>
+            {/if}
+            <div class="realm-meta">
+                <div class="realm-meta-item">
+                    <span>by</span>
+                    <a href={`/profile/${realm.username}`} class="owner-link">@{realm.username}</a>
+                </div>
+                <div class="ebook-count-badge">
+                    {ebooks.length} {ebooks.length === 1 ? 'book' : 'books'}
+                </div>
+            </div>
+        </div>
+
+        {#if ebooks.length === 0}
+            <div class="no-ebooks">
+                <div class="no-ebooks-icon">📖</div>
+                <h2>No ebooks yet</h2>
+                <p>This realm doesn't have any ebooks yet.</p>
+            </div>
+        {:else}
+            <div class="ebook-grid">
+                {#each ebooks as ebook}
+                    <div class="ebook-card">
+                        <div class="ebook-cover">
+                            {#if ebook.coverPath}
+                                <img src={ebook.coverPath} alt={ebook.title} />
+                            {:else}
+                                <span class="placeholder">📖</span>
+                            {/if}
+                            <span class="format-badge">EPUB</span>
+                            {#if ebook.chapterCount}
+                                <span class="chapter-badge">{ebook.chapterCount} ch</span>
+                            {/if}
+                        </div>
+                        <div class="ebook-info">
+                            <div class="ebook-title">{ebook.title}</div>
+                            <div class="ebook-meta">
+                                {#if ebook.chapterCount}
+                                    <span class="chapter-count">{ebook.chapterCount} chapters</span>
+                                {/if}
+                                <span class="file-size">{formatFileSize(ebook.fileSizeBytes)}</span>
+                                <span>{timeAgo(ebook.createdAt)}</span>
+                            </div>
+                            <div class="ebook-actions">
+                                <button class="read-btn" on:click={() => openBook(ebook)}>Read</button>
+                                {#if $isAuthenticated}
+                                    <button class="download-btn" on:click={(e) => downloadEbook(e, ebook)}>Download</button>
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/forums/+page.svelte b/frontend/src/routes/forums/+page.svelte
new file mode 100644
index 0000000..62fafca
--- /dev/null
+++ b/frontend/src/routes/forums/+page.svelte
@@ -0,0 +1,1030 @@
+<script>
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { auth, isAuthenticated, isTexter, isAdmin, isModerator } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import ProfilePreview from '$lib/components/chat/ProfilePreview.svelte';
+
+    let forums = [];
+    let loading = true;
+    let error = '';
+
+    // Create forum modal
+    let showCreateModal = false;
+    let newForum = { name: '', description: '', titleColor: '#ffffff' };
+    let creating = false;
+    let createError = '';
+
+    // Banner upload in create modal
+    let bannerFile = null;
+    let bannerPreview = null;
+    let bannerInput;
+
+    // Banner position editor in create modal
+    let bannerPosition = 50;
+    let bannerPositionX = 50;
+    let bannerZoom = 100;
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let dragStartPosX = 0;
+    let dragStartPosY = 0;
+    let bannerEditorRef;
+
+    // Profile preview state
+    let activeProfilePreview = null;
+
+    // Delete state
+    let deleteConfirmForum = null;
+    let deleting = false;
+
+    onMount(async () => {
+        // Wait for auth to initialize
+        const unsubscribe = auth.subscribe(async (state) => {
+            if (!state.loading) {
+                if (!state.user) {
+                    goto('/login');
+                    return;
+                }
+                await loadForums();
+                unsubscribe();
+            }
+        });
+    });
+
+    async function loadForums() {
+        loading = true;
+        error = '';
+        try {
+            const response = await fetch('/api/forums', {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                forums = data.forums || [];
+            } else if (response.status === 401) {
+                goto('/login');
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to load forums';
+            }
+        } catch (e) {
+            error = 'Network error';
+        }
+        loading = false;
+    }
+
+    function handleBannerSelect(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        // Validate file type
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        if (!allowedTypes.includes(file.type)) {
+            createError = 'Please upload a JPG, PNG, GIF, or WebP image';
+            return;
+        }
+
+        // Validate file size (5MB max)
+        if (file.size > 5 * 1024 * 1024) {
+            createError = 'Banner image must be under 5MB';
+            return;
+        }
+
+        bannerFile = file;
+        // Create preview URL
+        bannerPreview = URL.createObjectURL(file);
+        createError = '';
+    }
+
+    function removeBannerPreview() {
+        if (bannerPreview) {
+            URL.revokeObjectURL(bannerPreview);
+        }
+        bannerFile = null;
+        bannerPreview = null;
+        bannerPosition = 50;
+        bannerPositionX = 50;
+        bannerZoom = 100;
+        if (bannerInput) bannerInput.value = '';
+    }
+
+    function startDrag(e) {
+        if (!bannerPreview) return;
+        isDragging = true;
+        const { clientX, clientY } = e.touches ? e.touches[0] : e;
+        dragStartX = clientX;
+        dragStartY = clientY;
+        dragStartPosX = bannerPositionX;
+        dragStartPosY = bannerPosition;
+        e.preventDefault();
+    }
+
+    function onDrag(e) {
+        if (!isDragging || !bannerEditorRef) return;
+        const { clientX, clientY } = e.touches ? e.touches[0] : e;
+        const rect = bannerEditorRef.getBoundingClientRect();
+
+        const deltaX = clientX - dragStartX;
+        const deltaY = clientY - dragStartY;
+
+        const scaleFactor = 100 / bannerZoom;
+        const newPosX = dragStartPosX - (deltaX / rect.width) * 100 * scaleFactor;
+        const newPosY = dragStartPosY - (deltaY / rect.height) * 100 * scaleFactor;
+
+        bannerPositionX = Math.max(0, Math.min(100, newPosX));
+        bannerPosition = Math.max(0, Math.min(100, newPosY));
+
+        e.preventDefault();
+    }
+
+    function endDrag() {
+        isDragging = false;
+    }
+
+    async function createForum() {
+        if (!newForum.name.trim()) {
+            createError = 'Forum name is required';
+            return;
+        }
+
+        creating = true;
+        createError = '';
+
+        try {
+            // Step 1: Create the forum
+            const response = await fetch('/api/forums', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    name: newForum.name.trim(),
+                    description: newForum.description.trim(),
+                    titleColor: newForum.titleColor
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                const forumId = data.forum.id;
+
+                // Step 2: Upload banner if selected
+                if (bannerFile) {
+                    const formData = new FormData();
+                    formData.append('banner', bannerFile);
+
+                    const bannerResp = await fetch(`/api/forums/${forumId}/banner`, {
+                        method: 'POST',
+                        credentials: 'include',
+                        body: formData
+                    });
+
+                    // Step 3: Save banner position if upload succeeded
+                    if (bannerResp.ok) {
+                        await fetch(`/api/forums/${forumId}/banner/position`, {
+                            method: 'PUT',
+                            headers: { 'Content-Type': 'application/json' },
+                            credentials: 'include',
+                            body: JSON.stringify({
+                                bannerPosition,
+                                bannerPositionX,
+                                bannerZoom
+                            })
+                        });
+                    }
+                }
+
+                // Reset and close
+                showCreateModal = false;
+                newForum = { name: '', description: '', titleColor: '#ffffff' };
+                removeBannerPreview();
+                await loadForums();
+            } else {
+                createError = data.error || 'Failed to create forum';
+            }
+        } catch (e) {
+            createError = 'Network error';
+        }
+
+        creating = false;
+    }
+
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    }
+
+    function formatRelativeTime(dateString) {
+        if (!dateString) return '';
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffSecs = Math.floor(diffMs / 1000);
+        const diffMins = Math.floor(diffSecs / 60);
+        const diffHours = Math.floor(diffMins / 60);
+        const diffDays = Math.floor(diffHours / 24);
+
+        if (diffSecs < 60) return 'just now';
+        if (diffMins < 60) return `${diffMins}m ago`;
+        if (diffHours < 24) return `${diffHours}h ago`;
+        if (diffDays < 7) return `${diffDays}d ago`;
+        return formatDate(dateString);
+    }
+
+    function handleUsernameClick(event, forum) {
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.target.getBoundingClientRect();
+        activeProfilePreview = {
+            username: forum.username,
+            userId: forum.userId,
+            isGuest: false,
+            position: { x: rect.left, y: rect.bottom + 5 }
+        };
+    }
+
+    function handleProfileClose() {
+        activeProfilePreview = null;
+    }
+
+    function canDeleteForum(forum) {
+        const user = $auth.user;
+        if (!user) return false;
+        return $isAdmin || $isModerator || forum.userId === user.id;
+    }
+
+    function confirmDelete(event, forum) {
+        event.preventDefault();
+        event.stopPropagation();
+        deleteConfirmForum = forum;
+    }
+
+    async function deleteForum() {
+        if (!deleteConfirmForum) return;
+
+        deleting = true;
+        try {
+            const response = await fetch(`/api/forums/${deleteConfirmForum.id}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                deleteConfirmForum = null;
+                await loadForums();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to delete forum';
+            }
+        } catch (e) {
+            error = 'Network error';
+        }
+        deleting = false;
+    }
+</script>
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Forums</title>
+</svelte:head>
+
+<style>
+    .realm-nav {
+        display: flex;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .realm-nav::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-link {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.5rem 1rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--gray);
+        text-decoration: none;
+        font-size: 0.85rem;
+        white-space: nowrap;
+        transition: all 0.2s;
+    }
+
+    .nav-link:hover {
+        border-color: var(--primary);
+        color: var(--white);
+        background: rgba(86, 29, 94, 0.1);
+    }
+
+    .nav-link.active {
+        border-color: var(--primary);
+        color: var(--primary);
+        background: rgba(86, 29, 94, 0.15);
+    }
+
+    .nav-link svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    .forums-container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    .forums-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2rem;
+    }
+
+    .forums-header h1 {
+        font-size: 1.75rem;
+        color: var(--white);
+        margin: 0;
+    }
+
+    .forums-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .forum-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1.25rem;
+        transition: border-color 0.2s;
+    }
+
+    .forum-card:hover {
+        border-color: var(--primary);
+    }
+
+    .forum-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .forum-title-row {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+        flex: 1;
+    }
+
+    .forum-link {
+        text-decoration: none;
+        color: inherit;
+        flex: 1;
+    }
+
+    .btn-delete {
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 0.5rem;
+        cursor: pointer;
+        color: var(--gray);
+        transition: all 0.2s;
+        flex-shrink: 0;
+    }
+
+    .btn-delete:hover {
+        background: var(--error);
+        border-color: var(--error);
+        color: white;
+    }
+
+    .btn-delete svg {
+        width: 16px;
+        height: 16px;
+        display: block;
+    }
+
+    .forum-name {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+
+    .forum-description {
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+        line-height: 1.5;
+    }
+
+    .forum-meta {
+        display: flex;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+        flex-wrap: wrap;
+    }
+
+    .forum-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .forum-card-banner {
+        display: block;
+        position: relative;
+        height: 50px;
+        aspect-ratio: 900 / 200;
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+        background: #111;
+    }
+
+    .forum-card-banner img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .forum-last-post {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.15rem;
+        flex-shrink: 0;
+        text-align: right;
+    }
+
+    .last-thread-link {
+        color: var(--text);
+        font-size: 0.8rem;
+        text-decoration: none;
+        white-space: nowrap;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .last-thread-link:hover {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+
+    .last-post-time {
+        color: var(--gray);
+        font-size: 0.75rem;
+        white-space: nowrap;
+    }
+
+    .forum-created {
+        margin-left: auto;
+    }
+
+    .forum-owner {
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .forum-owner:hover {
+        filter: invert(1);
+    }
+
+    .loading, .error, .empty {
+        text-align: center;
+        padding: 3rem;
+        color: var(--gray);
+    }
+
+    .error {
+        color: var(--error);
+    }
+
+    .form-hint {
+        font-size: 0.85rem;
+        color: var(--gray);
+        margin-top: 0.5rem;
+    }
+
+    .banner-upload-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        border: 2px dashed var(--border);
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        color: var(--gray);
+    }
+
+    .banner-upload-area:hover {
+        border-color: var(--primary);
+        background: rgba(255, 255, 255, 0.02);
+    }
+
+    .banner-upload-area svg {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 0.5rem;
+        opacity: 0.5;
+    }
+
+    .banner-preview {
+        position: relative;
+        width: 100%;
+        height: 120px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+    }
+
+    .banner-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .banner-remove {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.7);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.2s;
+    }
+
+    .banner-remove:hover {
+        background: var(--error);
+    }
+
+    .banner-remove svg {
+        width: 16px;
+        height: 16px;
+        color: white;
+    }
+
+    /* Banner editor styles */
+    .banner-editor {
+        position: relative;
+        width: 100%;
+        height: 200px;
+        overflow: hidden;
+        border-radius: 8px;
+        cursor: grab;
+        background: #111;
+        border: 1px solid var(--border);
+    }
+
+    .banner-editor:active {
+        cursor: grabbing;
+    }
+
+    .banner-editor-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    .banner-editor-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.3);
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+    }
+
+    .banner-editor:hover .banner-editor-overlay {
+        opacity: 1;
+    }
+
+    .banner-editor-hint {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 4px;
+        font-size: 0.85rem;
+    }
+
+    .position-controls {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-top: 0.75rem;
+    }
+
+    .zoom-control {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .zoom-control label {
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .zoom-control input[type="range"] {
+        width: 100%;
+        accent-color: var(--primary);
+    }
+
+    .reset-btn {
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--gray);
+        padding: 0.4rem 0.75rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.8rem;
+        white-space: nowrap;
+    }
+
+    .reset-btn:hover {
+        border-color: var(--primary);
+        color: var(--white);
+    }
+
+    /* Color picker styles */
+    .color-picker-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .color-input {
+        width: 44px;
+        height: 36px;
+        padding: 2px;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        background: var(--bg-dark);
+        cursor: pointer;
+    }
+
+    .color-input::-webkit-color-swatch-wrapper {
+        padding: 2px;
+    }
+
+    .color-input::-webkit-color-swatch {
+        border-radius: 2px;
+        border: none;
+    }
+
+    .color-text-input {
+        width: 90px;
+        font-family: monospace;
+        text-transform: uppercase;
+    }
+
+    .color-preview-text {
+        font-size: 1.1rem;
+        font-weight: 600;
+    }
+</style>
+
+<!-- Realm Navigation Bar -->
+<nav class="realm-nav">
+    <a href="/video" class="nav-link">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="4" width="20" height="16" rx="2"/>
+            <path d="M10 9l5 3-5 3V9z" fill="currentColor"/>
+        </svg>
+        Videos
+    </a>
+    <a href="/audio" class="nav-link">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 18V5l12-2v13"/>
+            <circle cx="6" cy="18" r="3"/>
+            <circle cx="18" cy="16" r="3"/>
+        </svg>
+        Audio
+    </a>
+    <a href="/ebooks" class="nav-link">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+        </svg>
+        eBooks
+    </a>
+</nav>
+
+<div class="forums-container">
+    <div class="forums-header">
+        <h1>Forums</h1>
+        {#if $isTexter || $isAdmin}
+            <button class="btn" on:click={() => showCreateModal = true}>
+                Create Forum
+            </button>
+        {/if}
+    </div>
+
+    {#if loading}
+        <div class="loading">Loading forums...</div>
+    {:else if error}
+        <div class="error">{error}</div>
+    {:else if forums.length === 0}
+        <div class="empty">
+            No forums yet.
+            {#if $isTexter || $isAdmin}
+                <br>Create the first one!
+            {/if}
+        </div>
+    {:else}
+        <div class="forums-list">
+            {#each forums as forum}
+                <div class="forum-card">
+                    <div class="forum-header">
+                        <div class="forum-title-row">
+                            <a href="/forums/{forum.slug}" class="forum-link">
+                                <div class="forum-name" style="color: {forum.titleColor || '#ffffff'};">{forum.name}</div>
+                                {#if forum.description}
+                                    <div class="forum-description">{forum.description}</div>
+                                {/if}
+                            </a>
+                            {#if canDeleteForum(forum)}
+                                <button
+                                    class="btn-delete"
+                                    on:click={(e) => confirmDelete(e, forum)}
+                                    title="Delete forum"
+                                >
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                                    </svg>
+                                </button>
+                            {/if}
+                        </div>
+                        {#if forum.lastPostAt}
+                            <div class="forum-last-post" title="Last activity">
+                                {#if forum.lastThreadTitle}
+                                    <a href="/forums/{forum.slug}/thread/{forum.lastThreadId}" class="last-thread-link">
+                                        {forum.lastThreadTitle.length > 30 ? forum.lastThreadTitle.slice(0, 30) + '...' : forum.lastThreadTitle}
+                                    </a>
+                                {/if}
+                                <span class="last-post-time">{formatRelativeTime(forum.lastPostAt)}</span>
+                            </div>
+                        {/if}
+                        {#if forum.bannerUrl}
+                            <a href="/forums/{forum.slug}" class="forum-card-banner">
+                                <img
+                                    src={forum.bannerUrl}
+                                    alt="{forum.name} banner"
+                                    style="object-position: {forum.bannerPositionX ?? 50}% {forum.bannerPosition ?? 50}%; transform: scale({(forum.bannerZoom ?? 100) / 100}); transform-origin: {forum.bannerPositionX ?? 50}% {forum.bannerPosition ?? 50}%;"
+                                />
+                            </a>
+                        {/if}
+                    </div>
+                    <div class="forum-meta">
+                        <span class="forum-meta-item">
+                            <span
+                                class="forum-owner"
+                                style="color: {forum.userColor || 'var(--primary)'};"
+                                on:click={(e) => handleUsernameClick(e, forum)}
+                            >
+                                @{forum.username}
+                            </span>
+                        </span>
+                        <span class="forum-meta-item">
+                            {forum.threadCount || 0} threads
+                        </span>
+                        <span class="forum-meta-item">
+                            {forum.postCount || 0} posts
+                        </span>
+                        <span class="forum-meta-item forum-created">
+                            Created {formatDate(forum.createdAt)}
+                        </span>
+                    </div>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+{#if showCreateModal}
+    <div class="modal" on:click={() => showCreateModal = false}>
+        <div class="modal-content" style="max-width: 800px;" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Create Forum</h2>
+                <button class="modal-close" on:click={() => showCreateModal = false}>&times;</button>
+            </div>
+
+            {#if createError}
+                <div class="error" style="margin-bottom: 1rem;">{createError}</div>
+            {/if}
+
+            <form on:submit|preventDefault={createForum}>
+                <div class="form-group">
+                    <label for="forum-name">Forum Name</label>
+                    <input
+                        id="forum-name"
+                        type="text"
+                        bind:value={newForum.name}
+                        placeholder="Enter forum name"
+                        maxlength="100"
+                        required
+                    />
+                    <p class="form-hint">Up to 100 characters</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="forum-description">Description (optional)</label>
+                    <textarea
+                        id="forum-description"
+                        bind:value={newForum.description}
+                        placeholder="Describe your forum"
+                        rows="3"
+                    ></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="forum-title-color">Title Color</label>
+                    <div class="color-picker-row">
+                        <input
+                            id="forum-title-color"
+                            type="color"
+                            bind:value={newForum.titleColor}
+                            class="color-input"
+                        />
+                        <input
+                            type="text"
+                            bind:value={newForum.titleColor}
+                            placeholder="#ffffff"
+                            maxlength="7"
+                            class="color-text-input"
+                        />
+                        <span class="color-preview-text" style="color: {newForum.titleColor};">
+                            {newForum.name || 'Forum Title'}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Banner Image (optional)</label>
+                    <input
+                        type="file"
+                        accept="image/jpeg,image/png,image/gif,image/webp"
+                        bind:this={bannerInput}
+                        on:change={handleBannerSelect}
+                        style="display: none;"
+                    />
+                    {#if bannerPreview}
+                        <div
+                            class="banner-editor"
+                            bind:this={bannerEditorRef}
+                            on:mousedown={startDrag}
+                            on:mousemove={onDrag}
+                            on:mouseup={endDrag}
+                            on:mouseleave={endDrag}
+                            on:touchstart={startDrag}
+                            on:touchmove={onDrag}
+                            on:touchend={endDrag}
+                            role="slider"
+                            aria-label="Drag to position banner"
+                            tabindex="0"
+                        >
+                            <img
+                                src={bannerPreview}
+                                alt="Banner preview"
+                                class="banner-editor-img"
+                                style="object-position: {bannerPositionX}% {bannerPosition}%; transform: scale({bannerZoom / 100}); transform-origin: {bannerPositionX}% {bannerPosition}%;"
+                            />
+                            <div class="banner-editor-overlay">
+                                <span class="banner-editor-hint">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M5 9l-3 3l3 3M9 5l3-3l3 3M15 19l3 3l-3 3M19 9l3 3l-3 3M2 12h20M12 2v20"/>
+                                    </svg>
+                                    Drag to position
+                                </span>
+                            </div>
+                            <button type="button" class="banner-remove" on:click={removeBannerPreview}>
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M18 6L6 18M6 6l12 12"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="position-controls">
+                            <div class="zoom-control">
+                                <label for="create-banner-zoom">Zoom: {bannerZoom}%</label>
+                                <input
+                                    id="create-banner-zoom"
+                                    type="range"
+                                    min="100"
+                                    max="200"
+                                    step="5"
+                                    bind:value={bannerZoom}
+                                />
+                            </div>
+                            <button
+                                type="button"
+                                class="reset-btn"
+                                on:click={() => {
+                                    bannerZoom = 100;
+                                    bannerPosition = 50;
+                                    bannerPositionX = 50;
+                                }}
+                            >
+                                Reset Position
+                            </button>
+                        </div>
+                    {:else}
+                        <div class="banner-upload-area" on:click={() => bannerInput.click()}>
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <rect x="3" y="3" width="18" height="18" rx="2" />
+                                <circle cx="8.5" cy="8.5" r="1.5" />
+                                <path d="M21 15l-5-5L5 21" />
+                            </svg>
+                            <span>Click to select a banner image</span>
+                        </div>
+                    {/if}
+                    <p class="form-hint">JPG, PNG, GIF, or WebP. Max 5MB. Drag to position.</p>
+                </div>
+
+                <button type="submit" class="btn btn-block" disabled={creating}>
+                    {creating ? 'Creating...' : 'Create Forum'}
+                </button>
+            </form>
+        </div>
+    </div>
+{/if}
+
+{#if activeProfilePreview}
+    <ProfilePreview
+        username={activeProfilePreview.username}
+        userId={activeProfilePreview.userId}
+        isGuest={activeProfilePreview.isGuest}
+        position={activeProfilePreview.position}
+        on:close={handleProfileClose}
+    />
+{/if}
+
+{#if deleteConfirmForum}
+    <div class="modal" on:click={() => deleteConfirmForum = null}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Delete Forum</h2>
+                <button class="modal-close" on:click={() => deleteConfirmForum = null}>&times;</button>
+            </div>
+
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Are you sure you want to delete <strong style="color: var(--white);">{deleteConfirmForum.name}</strong>?
+                <br><br>
+                This will permanently delete all threads and posts in this forum. This action cannot be undone.
+            </p>
+
+            <div style="display: flex; gap: 1rem;">
+                <button
+                    class="btn"
+                    style="flex: 1; background: var(--bg-dark);"
+                    on:click={() => deleteConfirmForum = null}
+                    disabled={deleting}
+                >
+                    Cancel
+                </button>
+                <button
+                    class="btn"
+                    style="flex: 1; background: var(--error);"
+                    on:click={deleteForum}
+                    disabled={deleting}
+                >
+                    {deleting ? 'Deleting...' : 'Delete Forum'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
diff --git a/frontend/src/routes/forums/[slug]/+page.svelte b/frontend/src/routes/forums/[slug]/+page.svelte
new file mode 100644
index 0000000..c8da091
--- /dev/null
+++ b/frontend/src/routes/forums/[slug]/+page.svelte
@@ -0,0 +1,1411 @@
+<script>
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { auth, isAuthenticated, isAdmin, isModerator } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { marked } from 'marked';
+    import DOMPurify from 'dompurify';
+    import { stickersMap, ensureLoaded } from '$lib/stores/stickers';
+    import ProfilePreview from '$lib/components/chat/ProfilePreview.svelte';
+
+    let forum = null;
+    let threads = [];
+    let loading = true;
+    let error = '';
+    let isBanned = false;
+
+    // Create thread modal
+    let showCreateModal = false;
+    let newThread = { title: '', content: '' };
+    let creating = false;
+    let createError = '';
+
+    // Banner upload
+    let bannerInput;
+    let uploadingBanner = false;
+    let bannerError = '';
+    let showBannerMenu = false;
+
+    // Banner position editor
+    let showPositionEditor = false;
+    let bannerPosition = 50;
+    let bannerPositionX = 50;
+    let bannerZoom = 100;
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let dragStartPosX = 0;
+    let dragStartPosY = 0;
+    let bannerEditorRef;
+    let savingPosition = false;
+
+    // Title color editor
+    let showTitleColorEditor = false;
+    let titleColor = '#ffffff';
+    let savingTitleColor = false;
+
+    // Description editor
+    let showDescriptionEditor = false;
+    let editedDescription = '';
+    let savingDescription = false;
+
+    // Profile preview state
+    let activeProfilePreview = null;
+
+    // Check if current user is forum owner
+    $: isOwner = forum && $auth.user && forum.userId === $auth.user.id;
+    $: canModerate = isOwner || $isAdmin || $isModerator;
+
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+
+    onMount(async () => {
+        await ensureLoaded();
+
+        const unsubscribe = auth.subscribe(async (state) => {
+            if (!state.loading) {
+                if (!state.user) {
+                    goto('/login');
+                    return;
+                }
+                await loadForum();
+                unsubscribe();
+            }
+        });
+    });
+
+    async function loadForum() {
+        loading = true;
+        error = '';
+        const forumId = $page.params.slug;
+
+        try {
+            // Load forum details
+            const forumResponse = await fetch(`/api/forums/${forumId}`, {
+                credentials: 'include'
+            });
+
+            if (forumResponse.ok) {
+                const forumData = await forumResponse.json();
+                forum = forumData.forum;
+                // Initialize banner position values
+                bannerPosition = forum.bannerPosition ?? 50;
+                bannerPositionX = forum.bannerPositionX ?? 50;
+                bannerZoom = forum.bannerZoom ?? 100;
+                // Initialize title color
+                titleColor = forum.titleColor ?? '#ffffff';
+            } else if (forumResponse.status === 401) {
+                goto('/login');
+                return;
+            } else if (forumResponse.status === 404) {
+                error = 'Forum not found';
+                loading = false;
+                return;
+            }
+
+            // Load threads
+            const threadsResponse = await fetch(`/api/forums/${forumId}/threads`, {
+                credentials: 'include'
+            });
+
+            if (threadsResponse.ok) {
+                const threadsData = await threadsResponse.json();
+                threads = threadsData.threads || [];
+            } else if (threadsResponse.status === 403) {
+                const data = await threadsResponse.json();
+                if (data.error && data.error.includes('banned')) {
+                    isBanned = true;
+                    error = 'You are banned from this forum';
+                }
+            }
+        } catch (e) {
+            error = 'Network error';
+        }
+        loading = false;
+    }
+
+    function parsePreview(content, stickerMap) {
+        if (!content) return '';
+
+        // Truncate to preview length
+        let preview = content.slice(0, 200);
+        if (content.length > 200) preview += '...';
+
+        // Replace stickers
+        preview = preview.replace(/:(\w+):/g, (match, name) => {
+            const key = name.toLowerCase();
+            if (stickerMap && stickerMap[key]) {
+                return `<img src="${stickerMap[key]}" alt="${name}" class="sticker-img-small" />`;
+            }
+            return match;
+        });
+
+        let html = marked.parse(preview);
+
+        return DOMPurify.sanitize(html, {
+            ALLOWED_TAGS: ['p', 'img', 'br', 'strong', 'em', 'code', 'del', 'span'],
+            ALLOWED_ATTR: ['src', 'alt', 'class'],
+            FORBID_TAGS: ['a', 'button', 'script']
+        });
+    }
+
+    // Reactive parsed previews - re-run when stickers load
+    $: parsedThreadPreviews = threads.reduce((acc, thread) => {
+        acc[thread.id] = parsePreview(thread.content, $stickersMap);
+        return acc;
+    }, {});
+
+    async function createThread() {
+        if (!newThread.title.trim()) {
+            createError = 'Thread title is required';
+            return;
+        }
+        if (!newThread.content.trim()) {
+            createError = 'Thread content is required';
+            return;
+        }
+
+        creating = true;
+        createError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    title: newThread.title.trim(),
+                    content: newThread.content.trim()
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                showCreateModal = false;
+                newThread = { title: '', content: '' };
+                // Navigate to the new thread
+                goto(`/forums/${$page.params.slug}/thread/${data.thread.id}`);
+            } else {
+                createError = data.error || 'Failed to create thread';
+            }
+        } catch (e) {
+            createError = 'Network error';
+        }
+
+        creating = false;
+    }
+
+    async function deleteThread(threadId) {
+        if (!confirm('Are you sure you want to delete this thread?')) return;
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${threadId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                threads = threads.filter(t => t.id !== threadId);
+            }
+        } catch (e) {
+            console.error('Failed to delete thread:', e);
+        }
+    }
+
+    function triggerBannerUpload() {
+        bannerInput.click();
+    }
+
+    async function handleBannerUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        // Validate file type
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        if (!allowedTypes.includes(file.type)) {
+            bannerError = 'Please upload a JPG, PNG, GIF, or WebP image';
+            return;
+        }
+
+        // Validate file size (5MB max)
+        if (file.size > 5 * 1024 * 1024) {
+            bannerError = 'Image must be under 5MB';
+            return;
+        }
+
+        uploadingBanner = true;
+        bannerError = '';
+
+        try {
+            const formData = new FormData();
+            formData.append('banner', file);
+
+            const response = await fetch(`/api/forums/${$page.params.slug}/banner`, {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                forum.bannerUrl = data.bannerUrl;
+                forum = forum; // Trigger reactivity
+            } else {
+                bannerError = data.error || 'Failed to upload banner';
+            }
+        } catch (e) {
+            bannerError = 'Network error';
+        }
+
+        uploadingBanner = false;
+        // Reset input so same file can be selected again
+        event.target.value = '';
+    }
+
+    async function deleteBanner() {
+        if (!confirm('Remove the forum banner?')) return;
+
+        uploadingBanner = true;
+        bannerError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/banner`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                forum.bannerUrl = '';
+                forum = forum; // Trigger reactivity
+            } else {
+                const data = await response.json();
+                bannerError = data.error || 'Failed to remove banner';
+            }
+        } catch (e) {
+            bannerError = 'Network error';
+        }
+
+        uploadingBanner = false;
+    }
+
+    function openPositionEditor() {
+        showBannerMenu = false;
+        // Reset to current saved values
+        bannerPosition = forum.bannerPosition ?? 50;
+        bannerPositionX = forum.bannerPositionX ?? 50;
+        bannerZoom = forum.bannerZoom ?? 100;
+        showPositionEditor = true;
+    }
+
+    function closePositionEditor() {
+        showPositionEditor = false;
+        // Reset to saved values
+        bannerPosition = forum.bannerPosition ?? 50;
+        bannerPositionX = forum.bannerPositionX ?? 50;
+        bannerZoom = forum.bannerZoom ?? 100;
+    }
+
+    function startDrag(e) {
+        if (!forum.bannerUrl) return;
+        isDragging = true;
+        const { clientX, clientY } = e.touches ? e.touches[0] : e;
+        dragStartX = clientX;
+        dragStartY = clientY;
+        dragStartPosX = bannerPositionX;
+        dragStartPosY = bannerPosition;
+        e.preventDefault();
+    }
+
+    function onDrag(e) {
+        if (!isDragging || !bannerEditorRef) return;
+        const { clientX, clientY } = e.touches ? e.touches[0] : e;
+        const rect = bannerEditorRef.getBoundingClientRect();
+
+        // Calculate movement as percentage of container size
+        const deltaX = clientX - dragStartX;
+        const deltaY = clientY - dragStartY;
+
+        // Scale factor adjusted by zoom
+        const scaleFactor = 100 / bannerZoom;
+        const newPosX = dragStartPosX - (deltaX / rect.width) * 100 * scaleFactor;
+        const newPosY = dragStartPosY - (deltaY / rect.height) * 100 * scaleFactor;
+
+        // Clamp values
+        bannerPositionX = Math.max(0, Math.min(100, newPosX));
+        bannerPosition = Math.max(0, Math.min(100, newPosY));
+
+        e.preventDefault();
+    }
+
+    function endDrag() {
+        isDragging = false;
+    }
+
+    async function saveBannerPosition() {
+        savingPosition = true;
+        bannerError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/banner/position`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    bannerPosition,
+                    bannerPositionX,
+                    bannerZoom
+                })
+            });
+
+            if (response.ok) {
+                // Update forum object with new values
+                forum.bannerPosition = bannerPosition;
+                forum.bannerPositionX = bannerPositionX;
+                forum.bannerZoom = bannerZoom;
+                forum = forum; // Trigger reactivity
+                showPositionEditor = false;
+            } else {
+                const data = await response.json();
+                bannerError = data.error || 'Failed to save position';
+            }
+        } catch (e) {
+            bannerError = 'Network error';
+        }
+
+        savingPosition = false;
+    }
+
+    function openTitleColorEditor() {
+        showBannerMenu = false;
+        titleColor = forum.titleColor ?? '#ffffff';
+        showTitleColorEditor = true;
+    }
+
+    function closeTitleColorEditor() {
+        showTitleColorEditor = false;
+        titleColor = forum.titleColor ?? '#ffffff';
+    }
+
+    async function saveTitleColor() {
+        savingTitleColor = true;
+        bannerError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/title-color`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ titleColor })
+            });
+
+            if (response.ok) {
+                forum.titleColor = titleColor;
+                forum = forum; // Trigger reactivity
+                showTitleColorEditor = false;
+            } else {
+                const data = await response.json();
+                bannerError = data.error || 'Failed to save title color';
+            }
+        } catch (e) {
+            bannerError = 'Network error';
+        }
+
+        savingTitleColor = false;
+    }
+
+    function openDescriptionEditor() {
+        showBannerMenu = false;
+        editedDescription = forum.description ?? '';
+        showDescriptionEditor = true;
+    }
+
+    function closeDescriptionEditor() {
+        showDescriptionEditor = false;
+        editedDescription = '';
+    }
+
+    async function saveDescription() {
+        savingDescription = true;
+        bannerError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${forum.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ description: editedDescription })
+            });
+
+            if (response.ok) {
+                forum.description = editedDescription;
+                forum = forum; // Trigger reactivity
+                showDescriptionEditor = false;
+            } else {
+                const data = await response.json();
+                bannerError = data.error || 'Failed to save description';
+            }
+        } catch (e) {
+            bannerError = 'Network error';
+        }
+
+        savingDescription = false;
+    }
+
+    async function togglePin(thread) {
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${thread.id}/pin`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                thread.isPinned = data.isPinned;
+                // Re-sort threads (pinned first)
+                threads = [...threads].sort((a, b) => {
+                    if (a.isPinned && !b.isPinned) return -1;
+                    if (!a.isPinned && b.isPinned) return 1;
+                    return new Date(b.lastPostAt) - new Date(a.lastPostAt);
+                });
+            }
+        } catch (e) {
+            console.error('Failed to toggle pin:', e);
+        }
+    }
+
+    async function toggleLock(thread) {
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${thread.id}/lock`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                thread.isLocked = data.isLocked;
+                threads = threads;
+            }
+        } catch (e) {
+            console.error('Failed to toggle lock:', e);
+        }
+    }
+
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    function timeAgo(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        const minutes = Math.floor(seconds / 60);
+        if (minutes < 60) return `${minutes}m ago`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24) return `${hours}h ago`;
+        const days = Math.floor(hours / 24);
+        if (days < 30) return `${days}d ago`;
+        return formatDate(dateString);
+    }
+
+    function handleUsernameClick(event, username, userId) {
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.target.getBoundingClientRect();
+        activeProfilePreview = {
+            username,
+            userId,
+            isGuest: false,
+            position: { x: rect.left, y: rect.bottom + 5 }
+        };
+    }
+
+    function handleProfileClose() {
+        activeProfilePreview = null;
+    }
+</script>
+
+<svelte:head>
+    <title>{forum ? `${$siteSettings.site_title} - ${forum.name}` : $siteSettings.site_title}</title>
+</svelte:head>
+
+<svelte:window on:click={() => showBannerMenu = false} />
+
+<style>
+    .forum-container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    .breadcrumb {
+        margin-bottom: 1.5rem;
+    }
+
+    .breadcrumb a {
+        color: var(--gray);
+        text-decoration: none;
+    }
+
+    .breadcrumb a:hover {
+        color: var(--primary);
+    }
+
+    .breadcrumb span {
+        color: var(--gray);
+    }
+
+    .forum-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 2rem;
+        gap: 1rem;
+    }
+
+    .forum-info h1 {
+        font-size: 1.75rem;
+        margin: 0 0 0.5rem 0;
+    }
+
+    .forum-description {
+        color: var(--gray);
+        font-size: 0.95rem;
+    }
+
+    .forum-owner {
+        font-size: 0.85rem;
+        margin-top: 0.5rem;
+    }
+
+    .forum-owner-name {
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .forum-owner-name:hover {
+        filter: invert(1);
+    }
+
+    .threads-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .thread-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1rem 1.25rem;
+        transition: border-color 0.2s;
+    }
+
+    .thread-card:hover {
+        border-color: var(--primary);
+    }
+
+    .thread-card.pinned {
+        border-color: #f59e0b;
+        background: rgba(245, 158, 11, 0.05);
+    }
+
+    .thread-card.locked {
+        opacity: 0.7;
+    }
+
+    .thread-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .thread-badge {
+        font-size: 0.7rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 4px;
+        font-weight: 500;
+    }
+
+    .badge-pinned {
+        background: #f59e0b;
+        color: #000;
+    }
+
+    .badge-locked {
+        background: var(--gray);
+        color: #000;
+    }
+
+    .thread-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--white);
+        text-decoration: none;
+        display: block;
+        flex: 1;
+    }
+
+    .thread-title:hover {
+        color: var(--primary);
+    }
+
+    .thread-preview {
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 0.75rem;
+        line-height: 1.5;
+        max-height: 3em;
+        overflow: hidden;
+    }
+
+    .thread-preview :global(p) {
+        margin: 0;
+    }
+
+    .thread-preview :global(.sticker-img-small) {
+        height: 1.2em;
+        vertical-align: middle;
+    }
+
+    .thread-meta {
+        display: flex;
+        gap: 1rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .thread-author {
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .thread-author:hover {
+        filter: invert(1);
+    }
+
+    .thread-actions {
+        margin-left: auto;
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--gray);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.75rem;
+    }
+
+    .action-btn:hover {
+        border-color: var(--primary);
+        color: var(--white);
+    }
+
+    .action-btn.danger:hover {
+        border-color: var(--error);
+        color: var(--error);
+    }
+
+    .loading, .error, .empty {
+        text-align: center;
+        padding: 3rem;
+        color: var(--gray);
+    }
+
+    .error {
+        color: var(--error);
+    }
+
+    .banned-notice {
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid var(--error);
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        color: var(--error);
+        text-align: center;
+    }
+
+    .form-hint {
+        font-size: 0.85rem;
+        color: var(--gray);
+        margin-top: 0.5rem;
+    }
+
+    /* Banner styles */
+    .forum-banner {
+        position: relative;
+        width: 100%;
+        height: 200px;
+        margin-bottom: 1.5rem;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #111;
+        border: 1px solid var(--border);
+    }
+
+    .forum-banner img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .banner-actions {
+        position: absolute;
+        bottom: 1rem;
+        right: 1rem;
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .banner-btn {
+        background: rgba(0, 0, 0, 0.7);
+        border: 1px solid var(--border);
+        color: var(--white);
+        padding: 0.5rem 0.75rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.2s;
+    }
+
+    .banner-btn:hover {
+        background: rgba(0, 0, 0, 0.9);
+        border-color: var(--primary);
+    }
+
+    .banner-btn.danger:hover {
+        border-color: var(--error);
+        color: var(--error);
+    }
+
+    .banner-error {
+        color: var(--error);
+        font-size: 0.85rem;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+
+    .forum-title-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        position: relative;
+    }
+
+    .btn-banner-menu {
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 0.4rem;
+        cursor: pointer;
+        color: var(--gray);
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-banner-menu:hover {
+        border-color: var(--primary);
+        color: var(--primary);
+    }
+
+    .btn-banner-menu:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .btn-banner-menu svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .banner-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: 0.5rem;
+        background: #1a1a1a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.25rem;
+        z-index: 100;
+        min-width: 150px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .banner-menu button {
+        display: block;
+        width: 100%;
+        background: transparent;
+        border: none;
+        color: var(--white);
+        padding: 0.5rem 0.75rem;
+        text-align: left;
+        cursor: pointer;
+        border-radius: 4px;
+        font-size: 0.9rem;
+    }
+
+    .banner-menu button:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .banner-menu button.danger {
+        color: var(--error);
+    }
+
+    .banner-menu button.danger:hover {
+        background: rgba(239, 68, 68, 0.1);
+    }
+
+    .menu-divider {
+        height: 1px;
+        background: var(--border);
+        margin: 0.25rem 0;
+    }
+
+    /* Position editor styles */
+    .position-editor-modal {
+        max-width: 600px;
+    }
+
+    .banner-editor {
+        position: relative;
+        width: 100%;
+        height: 200px;
+        overflow: hidden;
+        border-radius: 8px;
+        cursor: grab;
+        background: #111;
+        border: 1px solid var(--border);
+        margin-bottom: 1rem;
+    }
+
+    .banner-editor:active {
+        cursor: grabbing;
+    }
+
+    .banner-editor-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    .banner-editor-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.3);
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .banner-editor:hover .banner-editor-overlay {
+        opacity: 1;
+    }
+
+    .banner-editor-hint {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 4px;
+        font-size: 0.9rem;
+    }
+
+    .position-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .zoom-control {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .zoom-control label {
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    .zoom-control input[type="range"] {
+        width: 100%;
+        accent-color: var(--primary);
+    }
+
+    .position-display {
+        display: flex;
+        gap: 1rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .reset-btn {
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--gray);
+        padding: 0.5rem 1rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.85rem;
+        align-self: flex-start;
+    }
+
+    .reset-btn:hover {
+        border-color: var(--primary);
+        color: var(--white);
+    }
+
+    .position-actions {
+        display: flex;
+        gap: 1rem;
+        justify-content: flex-end;
+    }
+
+    .btn-secondary {
+        background: var(--bg-dark);
+    }
+
+    /* Color picker styles */
+    .color-picker-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .color-input {
+        width: 44px;
+        height: 36px;
+        padding: 2px;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        background: var(--bg-dark);
+        cursor: pointer;
+    }
+
+    .color-input::-webkit-color-swatch-wrapper {
+        padding: 2px;
+    }
+
+    .color-input::-webkit-color-swatch {
+        border-radius: 2px;
+        border: none;
+    }
+
+    .color-text-input {
+        width: 90px;
+        font-family: monospace;
+        text-transform: uppercase;
+    }
+
+    .color-preview-text {
+        font-size: 1.25rem;
+        font-weight: 600;
+    }
+</style>
+
+<div class="forum-container">
+    <div class="breadcrumb">
+        <a href="/forums">Forums</a>
+        <span> / </span>
+        <span>{forum?.name || 'Loading...'}</span>
+    </div>
+
+    {#if loading}
+        <div class="loading">Loading...</div>
+    {:else if error && !forum}
+        <div class="error">{error}</div>
+    {:else if forum}
+        <!-- Hidden file input for banner upload -->
+        <input
+            type="file"
+            accept="image/jpeg,image/png,image/gif,image/webp"
+            bind:this={bannerInput}
+            on:change={handleBannerUpload}
+            style="display: none;"
+        />
+
+        {#if bannerError}
+            <div class="banner-error">{bannerError}</div>
+        {/if}
+
+        <!-- Banner display -->
+        {#if forum.bannerUrl}
+            <div class="forum-banner">
+                <img
+                    src={forum.bannerUrl}
+                    alt="{forum.name} banner"
+                    style="object-position: {forum.bannerPositionX ?? 50}% {forum.bannerPosition ?? 50}%; transform: scale({(forum.bannerZoom ?? 100) / 100}); transform-origin: {forum.bannerPositionX ?? 50}% {forum.bannerPosition ?? 50}%;"
+                />
+            </div>
+        {/if}
+
+        <div class="forum-header">
+            <div class="forum-info">
+                <div class="forum-title-row">
+                    <h1 style="color: {forum.titleColor || '#ffffff'};">{forum.name}</h1>
+                    {#if canModerate}
+                        <button
+                            class="btn-banner-menu"
+                            on:click|stopPropagation={() => showBannerMenu = !showBannerMenu}
+                            disabled={uploadingBanner}
+                            title={forum.bannerUrl ? "Edit banner" : "Add banner"}
+                        >
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="3" width="18" height="18" rx="2" />
+                                <circle cx="8.5" cy="8.5" r="1.5" />
+                                <path d="M21 15l-5-5L5 21" />
+                            </svg>
+                        </button>
+                        {#if showBannerMenu}
+                            <div class="banner-menu" on:click|stopPropagation>
+                                <button on:click={() => { showBannerMenu = false; triggerBannerUpload(); }}>
+                                    {forum.bannerUrl ? 'Change Banner' : 'Add Banner'}
+                                </button>
+                                {#if forum.bannerUrl}
+                                    <button on:click={openPositionEditor}>
+                                        Adjust Position
+                                    </button>
+                                    <button class="danger" on:click={() => { showBannerMenu = false; deleteBanner(); }}>
+                                        Remove Banner
+                                    </button>
+                                {/if}
+                                <div class="menu-divider"></div>
+                                <button on:click={openDescriptionEditor}>
+                                    Edit Description
+                                </button>
+                                <button on:click={openTitleColorEditor}>
+                                    Set Title Color
+                                </button>
+                            </div>
+                        {/if}
+                    {/if}
+                </div>
+                {#if forum.description}
+                    <div class="forum-description">{forum.description}</div>
+                {/if}
+                <div class="forum-owner">
+                    by <span
+                        class="forum-owner-name"
+                        style="color: {forum.userColor || 'var(--primary)'};"
+                        on:click={(e) => handleUsernameClick(e, forum.username, forum.userId)}
+                    >@{forum.username}</span>
+                </div>
+            </div>
+
+            {#if !isBanned}
+                <button class="btn" on:click={() => showCreateModal = true}>
+                    New Thread
+                </button>
+            {/if}
+        </div>
+
+        {#if isBanned}
+            <div class="banned-notice">
+                You are banned from this forum and cannot create threads or post replies.
+            </div>
+        {/if}
+
+        {#if threads.length === 0}
+            <div class="empty">
+                No threads yet.
+                {#if !isBanned}
+                    Start the first discussion!
+                {/if}
+            </div>
+        {:else}
+            <div class="threads-list">
+                {#each threads as thread}
+                    <div class="thread-card" class:pinned={thread.isPinned} class:locked={thread.isLocked}>
+                        <div class="thread-header">
+                            {#if thread.isPinned}
+                                <span class="thread-badge badge-pinned">PINNED</span>
+                            {/if}
+                            {#if thread.isLocked}
+                                <span class="thread-badge badge-locked">LOCKED</span>
+                            {/if}
+                            <a href="/forums/{forum.slug}/thread/{thread.id}" class="thread-title">
+                                {thread.title}
+                            </a>
+                        </div>
+
+                        <div class="thread-preview">
+                            {@html parsedThreadPreviews[thread.id] || ''}
+                        </div>
+
+                        <div class="thread-meta">
+                            <span>
+                                by <span
+                                    class="thread-author"
+                                    style="color: {thread.userColor || 'var(--primary)'};"
+                                    on:click={(e) => handleUsernameClick(e, thread.username, thread.userId)}
+                                >@{thread.username}</span>
+                            </span>
+                            <span>{thread.postCount || 0} replies</span>
+                            <span>Last activity {timeAgo(thread.lastPostAt)}</span>
+
+                            {#if canModerate || ($auth.user && thread.userId === $auth.user.id)}
+                                <div class="thread-actions">
+                                    {#if canModerate}
+                                        <button class="action-btn" on:click|stopPropagation={() => togglePin(thread)}>
+                                            {thread.isPinned ? 'Unpin' : 'Pin'}
+                                        </button>
+                                        <button class="action-btn" on:click|stopPropagation={() => toggleLock(thread)}>
+                                            {thread.isLocked ? 'Unlock' : 'Lock'}
+                                        </button>
+                                    {/if}
+                                    <button class="action-btn danger" on:click|stopPropagation={() => deleteThread(thread.id)}>
+                                        Delete
+                                    </button>
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    {/if}
+</div>
+
+{#if showCreateModal}
+    <div class="modal" on:click={() => showCreateModal = false}>
+        <div class="modal-content" style="max-width: 600px;" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Create Thread</h2>
+                <button class="modal-close" on:click={() => showCreateModal = false}>&times;</button>
+            </div>
+
+            {#if createError}
+                <div class="error" style="margin-bottom: 1rem;">{createError}</div>
+            {/if}
+
+            <form on:submit|preventDefault={createThread}>
+                <div class="form-group">
+                    <label for="thread-title">Title</label>
+                    <input
+                        id="thread-title"
+                        type="text"
+                        bind:value={newThread.title}
+                        placeholder="Enter thread title"
+                        maxlength="255"
+                        required
+                    />
+                </div>
+
+                <div class="form-group">
+                    <label for="thread-content">Content</label>
+                    <textarea
+                        id="thread-content"
+                        bind:value={newThread.content}
+                        placeholder="Write your post... (Markdown and :stickers: supported)"
+                        rows="8"
+                        required
+                    ></textarea>
+                    <p class="form-hint">
+                        Supports Markdown formatting and :sticker: syntax
+                    </p>
+                </div>
+
+                <button type="submit" class="btn btn-block" disabled={creating}>
+                    {creating ? 'Creating...' : 'Create Thread'}
+                </button>
+            </form>
+        </div>
+    </div>
+{/if}
+
+{#if activeProfilePreview}
+    <ProfilePreview
+        username={activeProfilePreview.username}
+        userId={activeProfilePreview.userId}
+        isGuest={activeProfilePreview.isGuest}
+        position={activeProfilePreview.position}
+        on:close={handleProfileClose}
+    />
+{/if}
+
+{#if showPositionEditor && forum?.bannerUrl}
+    <div class="modal" on:click={closePositionEditor}>
+        <div class="modal-content position-editor-modal" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Adjust Banner Position</h2>
+                <button class="modal-close" on:click={closePositionEditor}>&times;</button>
+            </div>
+
+            <div
+                class="banner-editor"
+                bind:this={bannerEditorRef}
+                on:mousedown={startDrag}
+                on:mousemove={onDrag}
+                on:mouseup={endDrag}
+                on:mouseleave={endDrag}
+                on:touchstart={startDrag}
+                on:touchmove={onDrag}
+                on:touchend={endDrag}
+                role="slider"
+                aria-label="Drag to position banner"
+                aria-valuenow={bannerPosition}
+                tabindex="0"
+            >
+                <img
+                    src={forum.bannerUrl}
+                    alt="Banner preview"
+                    class="banner-editor-img"
+                    style="object-position: {bannerPositionX}% {bannerPosition}%; transform: scale({bannerZoom / 100}); transform-origin: {bannerPositionX}% {bannerPosition}%;"
+                />
+                <div class="banner-editor-overlay">
+                    <span class="banner-editor-hint">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M5 9l-3 3l3 3M9 5l3-3l3 3M15 19l3 3l-3 3M19 9l3 3l-3 3M2 12h20M12 2v20"/>
+                        </svg>
+                        Drag to position
+                    </span>
+                </div>
+            </div>
+
+            <div class="position-controls">
+                <div class="zoom-control">
+                    <label for="banner-zoom">Zoom: {bannerZoom}%</label>
+                    <input
+                        id="banner-zoom"
+                        type="range"
+                        min="100"
+                        max="200"
+                        step="5"
+                        bind:value={bannerZoom}
+                    />
+                </div>
+
+                <div class="position-display">
+                    <span>X: {Math.round(bannerPositionX)}%</span>
+                    <span>Y: {Math.round(bannerPosition)}%</span>
+                </div>
+
+                <button
+                    type="button"
+                    class="reset-btn"
+                    on:click={() => {
+                        bannerZoom = 100;
+                        bannerPosition = 50;
+                        bannerPositionX = 50;
+                    }}
+                >
+                    Reset to Default
+                </button>
+            </div>
+
+            <div class="position-actions">
+                <button class="btn btn-secondary" on:click={closePositionEditor} disabled={savingPosition}>
+                    Cancel
+                </button>
+                <button class="btn" on:click={saveBannerPosition} disabled={savingPosition}>
+                    {savingPosition ? 'Saving...' : 'Save Position'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+{#if showTitleColorEditor}
+    <div class="modal" on:click={closeTitleColorEditor}>
+        <div class="modal-content" style="max-width: 400px;" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Set Title Color</h2>
+                <button class="modal-close" on:click={closeTitleColorEditor}>&times;</button>
+            </div>
+
+            <div class="form-group">
+                <label for="title-color-input">Forum Title Color</label>
+                <div class="color-picker-row">
+                    <input
+                        id="title-color-input"
+                        type="color"
+                        bind:value={titleColor}
+                        class="color-input"
+                    />
+                    <input
+                        type="text"
+                        bind:value={titleColor}
+                        placeholder="#ffffff"
+                        maxlength="7"
+                        class="color-text-input"
+                    />
+                </div>
+                <span class="color-preview-text" style="color: {titleColor};">
+                    {forum?.name || 'Forum Title'}
+                </span>
+            </div>
+
+            <div class="position-actions">
+                <button class="btn btn-secondary" on:click={closeTitleColorEditor} disabled={savingTitleColor}>
+                    Cancel
+                </button>
+                <button class="btn" on:click={saveTitleColor} disabled={savingTitleColor}>
+                    {savingTitleColor ? 'Saving...' : 'Save Color'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+{#if showDescriptionEditor}
+    <div class="modal" on:click={closeDescriptionEditor}>
+        <div class="modal-content" style="max-width: 500px;" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Edit Description</h2>
+                <button class="modal-close" on:click={closeDescriptionEditor}>&times;</button>
+            </div>
+
+            <div class="form-group">
+                <label for="description-input">Forum Description</label>
+                <textarea
+                    id="description-input"
+                    bind:value={editedDescription}
+                    placeholder="Enter a description for this forum..."
+                    rows="4"
+                ></textarea>
+            </div>
+
+            <div class="position-actions">
+                <button class="btn btn-secondary" on:click={closeDescriptionEditor} disabled={savingDescription}>
+                    Cancel
+                </button>
+                <button class="btn" on:click={saveDescription} disabled={savingDescription}>
+                    {savingDescription ? 'Saving...' : 'Save Description'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
diff --git a/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte b/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
new file mode 100644
index 0000000..cbf0299
--- /dev/null
+++ b/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
@@ -0,0 +1,771 @@
+<script>
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { auth, isAuthenticated, isAdmin, isModerator } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { marked } from 'marked';
+    import DOMPurify from 'dompurify';
+    import { stickersMap, ensureLoaded } from '$lib/stores/stickers';
+    import ProfilePreview from '$lib/components/chat/ProfilePreview.svelte';
+
+    let forum = null;
+    let thread = null;
+    let posts = [];
+    let loading = true;
+    let error = '';
+    let isBanned = false;
+
+    // Reply state
+    let replyContent = '';
+    let submittingReply = false;
+    let replyError = '';
+
+    // Edit state
+    let editingPostId = null;
+    let editContent = '';
+    let editingThread = false;
+    let editThreadContent = '';
+
+    // Profile preview state
+    let activeProfilePreview = null;
+
+    $: isOwner = forum && $auth.user && forum.userId === $auth.user.id;
+    $: canModerate = isOwner || $isAdmin || $isModerator;
+    $: isThreadAuthor = thread && $auth.user && thread.userId === $auth.user.id;
+
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+
+    onMount(async () => {
+        await ensureLoaded();
+
+        const unsubscribe = auth.subscribe(async (state) => {
+            if (!state.loading) {
+                if (!state.user) {
+                    goto('/login');
+                    return;
+                }
+                await loadThread();
+                unsubscribe();
+            }
+        });
+    });
+
+    async function loadThread() {
+        loading = true;
+        error = '';
+        const { slug, threadId } = $page.params;
+
+        try {
+            // Load forum details
+            const forumResponse = await fetch(`/api/forums/${slug}`, {
+                credentials: 'include'
+            });
+
+            if (forumResponse.ok) {
+                const forumData = await forumResponse.json();
+                forum = forumData.forum;
+            }
+
+            // Load thread with posts
+            const threadResponse = await fetch(`/api/forums/${slug}/threads/${threadId}`, {
+                credentials: 'include'
+            });
+
+            if (threadResponse.ok) {
+                const threadData = await threadResponse.json();
+                thread = threadData.thread;
+            } else if (threadResponse.status === 404) {
+                error = 'Thread not found';
+                loading = false;
+                return;
+            }
+
+            // Load posts
+            const postsResponse = await fetch(`/api/forums/${slug}/threads/${threadId}/posts`, {
+                credentials: 'include'
+            });
+
+            if (postsResponse.ok) {
+                const postsData = await postsResponse.json();
+                posts = postsData.posts || [];
+            } else if (postsResponse.status === 403) {
+                const data = await postsResponse.json();
+                if (data.error && data.error.includes('banned')) {
+                    isBanned = true;
+                }
+            }
+        } catch (e) {
+            error = 'Network error';
+        }
+        loading = false;
+    }
+
+    function parseContent(content, stickerMap) {
+        if (!content) return '';
+
+        let msg = content;
+
+        // Replace stickers
+        msg = msg.replace(/:(\w+):/g, (match, name) => {
+            const key = name.toLowerCase();
+            if (stickerMap && stickerMap[key]) {
+                return `<img src="${stickerMap[key]}" alt="${name}" title="${name}" class="sticker-img" />`;
+            }
+            return match;
+        });
+
+        let html = marked.parse(msg);
+
+        // Handle redtext
+        html = html.replace(/<p>&lt;&lt;(.+?)<\/p>/gs, '<p class="redtext">&lt;&lt;$1</p>');
+
+        return DOMPurify.sanitize(html, {
+            ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'img', 'br', 'strong', 'em', 'code', 'pre', 'del', 'span'],
+            ALLOWED_ATTR: ['src', 'alt', 'title', 'class', 'style'],
+            FORBID_TAGS: ['a', 'button', 'script']
+        });
+    }
+
+    // Reactive parsed content - re-run when stickers load
+    $: parsedThreadContent = thread ? parseContent(thread.content, $stickersMap) : '';
+    $: parsedPostsContent = posts.reduce((acc, post) => {
+        acc[post.id] = parseContent(post.content, $stickersMap);
+        return acc;
+    }, {});
+
+    async function submitReply() {
+        if (!replyContent.trim()) {
+            replyError = 'Reply cannot be empty';
+            return;
+        }
+
+        submittingReply = true;
+        replyError = '';
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${$page.params.threadId}/posts`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ content: replyContent.trim() })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Add username info to new post
+                data.post.username = $auth.user.username;
+                data.post.userColor = $auth.user.colorCode || '#561D5E';
+                posts = [...posts, data.post];
+                replyContent = '';
+            } else {
+                replyError = data.error || 'Failed to post reply';
+            }
+        } catch (e) {
+            replyError = 'Network error';
+        }
+
+        submittingReply = false;
+    }
+
+    async function deletePost(postId) {
+        if (!confirm('Are you sure you want to delete this post?')) return;
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${$page.params.threadId}/posts/${postId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                posts = posts.filter(p => p.id !== postId);
+            }
+        } catch (e) {
+            console.error('Failed to delete post:', e);
+        }
+    }
+
+    async function deleteThread() {
+        if (!confirm('Are you sure you want to delete this entire thread?')) return;
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${$page.params.threadId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                goto(`/forums/${$page.params.slug}`);
+            }
+        } catch (e) {
+            console.error('Failed to delete thread:', e);
+        }
+    }
+
+    function startEditPost(post) {
+        editingPostId = post.id;
+        editContent = post.content;
+    }
+
+    function cancelEditPost() {
+        editingPostId = null;
+        editContent = '';
+    }
+
+    async function saveEditPost(postId) {
+        if (!editContent.trim()) return;
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${$page.params.threadId}/posts/${postId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ content: editContent.trim() })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                const idx = posts.findIndex(p => p.id === postId);
+                if (idx !== -1) {
+                    posts[idx].content = editContent.trim();
+                    posts[idx].isEdited = true;
+                    posts = posts;
+                }
+                cancelEditPost();
+            }
+        } catch (e) {
+            console.error('Failed to edit post:', e);
+        }
+    }
+
+    function startEditThread() {
+        editingThread = true;
+        editThreadContent = thread.content;
+    }
+
+    function cancelEditThread() {
+        editingThread = false;
+        editThreadContent = '';
+    }
+
+    async function saveEditThread() {
+        if (!editThreadContent.trim()) return;
+
+        try {
+            const response = await fetch(`/api/forums/${$page.params.slug}/threads/${$page.params.threadId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    title: thread.title,
+                    content: editThreadContent.trim()
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                thread.content = editThreadContent.trim();
+                cancelEditThread();
+            }
+        } catch (e) {
+            console.error('Failed to edit thread:', e);
+        }
+    }
+
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    function handleUsernameClick(event, username, userId) {
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.target.getBoundingClientRect();
+        activeProfilePreview = {
+            username,
+            userId,
+            isGuest: false,
+            position: { x: rect.left, y: rect.bottom + 5 }
+        };
+    }
+
+    function handleProfileClose() {
+        activeProfilePreview = null;
+    }
+</script>
+
+<svelte:head>
+    <title>{thread ? `${$siteSettings.site_title} - ${thread.title}` : $siteSettings.site_title}</title>
+</svelte:head>
+
+<style>
+    .thread-container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    .breadcrumb {
+        margin-bottom: 1.5rem;
+        font-size: 0.9rem;
+    }
+
+    .breadcrumb a {
+        color: var(--gray);
+        text-decoration: none;
+    }
+
+    .breadcrumb a:hover {
+        color: var(--primary);
+    }
+
+    .breadcrumb span {
+        color: var(--gray);
+    }
+
+    .thread-header {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .thread-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--white);
+        margin: 0 0 0.5rem 0;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+    }
+
+    .thread-badge {
+        font-size: 0.7rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 4px;
+        font-weight: 500;
+    }
+
+    .badge-pinned {
+        background: #f59e0b;
+        color: #000;
+    }
+
+    .badge-locked {
+        background: var(--gray);
+        color: #000;
+    }
+
+    .thread-meta {
+        font-size: 0.85rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+    }
+
+    .thread-author {
+        cursor: pointer;
+        transition: filter 0.15s ease;
+    }
+
+    .thread-author:hover {
+        filter: invert(1);
+    }
+
+    .thread-content {
+        color: var(--white);
+        line-height: 1.7;
+    }
+
+    .thread-content :global(p) {
+        margin: 0.75rem 0;
+    }
+
+    .thread-content :global(blockquote) {
+        border-left: 3px solid #4ade80;
+        padding-left: 1rem;
+        margin: 0.75rem 0;
+        color: #4ade80;
+    }
+
+    .thread-content :global(.redtext) {
+        color: #ef4444;
+    }
+
+    .thread-content :global(.sticker-img) {
+        max-height: 128px;
+        vertical-align: middle;
+    }
+
+    .thread-content :global(code) {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+
+    .thread-content :global(pre) {
+        background: #0a0a0a;
+        padding: 1rem;
+        border-radius: 6px;
+        overflow-x: auto;
+    }
+
+    .thread-actions {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .posts-section {
+        margin-bottom: 2rem;
+    }
+
+    .posts-header {
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    .post-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .post-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+    }
+
+    .post-author {
+        cursor: pointer;
+        font-weight: 500;
+        transition: filter 0.15s ease;
+    }
+
+    .post-author:hover {
+        filter: invert(1);
+    }
+
+    .post-date {
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .post-edited {
+        color: var(--gray);
+        font-size: 0.75rem;
+        font-style: italic;
+    }
+
+    .post-content {
+        color: var(--white);
+        line-height: 1.6;
+    }
+
+    .post-content :global(p) {
+        margin: 0.5rem 0;
+    }
+
+    .post-content :global(blockquote) {
+        border-left: 3px solid #4ade80;
+        padding-left: 1rem;
+        margin: 0.5rem 0;
+        color: #4ade80;
+    }
+
+    .post-content :global(.redtext) {
+        color: #ef4444;
+    }
+
+    .post-content :global(.sticker-img) {
+        max-height: 96px;
+        vertical-align: middle;
+    }
+
+    .post-actions {
+        margin-top: 0.75rem;
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--gray);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.75rem;
+    }
+
+    .action-btn:hover {
+        border-color: var(--primary);
+        color: var(--white);
+    }
+
+    .action-btn.danger:hover {
+        border-color: var(--error);
+        color: var(--error);
+    }
+
+    .reply-section {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1.5rem;
+    }
+
+    .reply-section h3 {
+        margin: 0 0 1rem 0;
+        color: var(--white);
+        font-size: 1.1rem;
+    }
+
+    .reply-textarea {
+        width: 100%;
+        min-height: 120px;
+        background: #0a0a0a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.75rem;
+        color: var(--white);
+        font-family: inherit;
+        font-size: 1rem;
+        resize: vertical;
+    }
+
+    .reply-textarea:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .reply-actions {
+        margin-top: 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .reply-help {
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .reply-error {
+        color: var(--error);
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    .locked-notice {
+        text-align: center;
+        padding: 2rem;
+        color: var(--gray);
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+    }
+
+    .banned-notice {
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid var(--error);
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        color: var(--error);
+        text-align: center;
+    }
+
+    .edit-textarea {
+        width: 100%;
+        min-height: 100px;
+        background: #0a0a0a;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.75rem;
+        color: var(--white);
+        font-family: inherit;
+        font-size: 1rem;
+        resize: vertical;
+        margin-bottom: 0.5rem;
+    }
+
+    .edit-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .loading, .error {
+        text-align: center;
+        padding: 3rem;
+        color: var(--gray);
+    }
+
+    .error {
+        color: var(--error);
+    }
+</style>
+
+<div class="thread-container">
+    <div class="breadcrumb">
+        <a href="/forums">Forums</a>
+        <span> / </span>
+        <a href="/forums/{$page.params.slug}">{forum?.name || 'Forum'}</a>
+        <span> / </span>
+        <span>{thread?.title || 'Thread'}</span>
+    </div>
+
+    {#if loading}
+        <div class="loading">Loading...</div>
+    {:else if error}
+        <div class="error">{error}</div>
+    {:else if thread}
+        <div class="thread-header">
+            <h1 class="thread-title">
+                {#if thread.isPinned}
+                    <span class="thread-badge badge-pinned">PINNED</span>
+                {/if}
+                {#if thread.isLocked}
+                    <span class="thread-badge badge-locked">LOCKED</span>
+                {/if}
+                {thread.title}
+            </h1>
+            <div class="thread-meta">
+                Posted by <span
+                    class="thread-author"
+                    style="color: {thread.userColor || 'var(--primary)'};"
+                    on:click={(e) => handleUsernameClick(e, thread.username, thread.userId)}
+                >@{thread.username}</span> on {formatDate(thread.createdAt)}
+            </div>
+
+            {#if editingThread}
+                <textarea class="edit-textarea" bind:value={editThreadContent}></textarea>
+                <div class="edit-actions">
+                    <button class="action-btn" on:click={saveEditThread}>Save</button>
+                    <button class="action-btn" on:click={cancelEditThread}>Cancel</button>
+                </div>
+            {:else}
+                <div class="thread-content">
+                    {@html parsedThreadContent}
+                </div>
+            {/if}
+
+            {#if (canModerate || isThreadAuthor) && !editingThread}
+                <div class="thread-actions">
+                    {#if isThreadAuthor}
+                        <button class="action-btn" on:click={startEditThread}>Edit</button>
+                    {/if}
+                    <button class="action-btn danger" on:click={deleteThread}>Delete Thread</button>
+                </div>
+            {/if}
+        </div>
+
+        {#if posts.length > 0}
+            <div class="posts-section">
+                <div class="posts-header">{posts.length} {posts.length === 1 ? 'reply' : 'replies'}</div>
+
+                {#each posts as post}
+                    <div class="post-card">
+                        <div class="post-header">
+                            <span>
+                                <span
+                                    class="post-author"
+                                    style="color: {post.userColor || 'var(--primary)'};"
+                                    on:click={(e) => handleUsernameClick(e, post.username, post.userId)}
+                                >@{post.username}</span>
+                                {#if post.isEdited}
+                                    <span class="post-edited">(edited)</span>
+                                {/if}
+                            </span>
+                            <span class="post-date">{formatDate(post.createdAt)}</span>
+                        </div>
+
+                        {#if editingPostId === post.id}
+                            <textarea class="edit-textarea" bind:value={editContent}></textarea>
+                            <div class="edit-actions">
+                                <button class="action-btn" on:click={() => saveEditPost(post.id)}>Save</button>
+                                <button class="action-btn" on:click={cancelEditPost}>Cancel</button>
+                            </div>
+                        {:else}
+                            <div class="post-content">
+                                {@html parsedPostsContent[post.id] || ''}
+                            </div>
+
+                            {#if $auth.user && (post.userId === $auth.user.id || canModerate)}
+                                <div class="post-actions">
+                                    {#if post.userId === $auth.user.id}
+                                        <button class="action-btn" on:click={() => startEditPost(post)}>Edit</button>
+                                    {/if}
+                                    <button class="action-btn danger" on:click={() => deletePost(post.id)}>Delete</button>
+                                </div>
+                            {/if}
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        {/if}
+
+        {#if isBanned}
+            <div class="banned-notice">
+                You are banned from this forum and cannot post replies.
+            </div>
+        {:else if thread.isLocked}
+            <div class="locked-notice">
+                This thread is locked. No new replies can be posted.
+            </div>
+        {:else}
+            <div class="reply-section">
+                <h3>Post a Reply</h3>
+
+                {#if replyError}
+                    <div class="reply-error">{replyError}</div>
+                {/if}
+
+                <textarea
+                    class="reply-textarea"
+                    bind:value={replyContent}
+                    placeholder="Write your reply... (Markdown and :stickers: supported)"
+                ></textarea>
+
+                <div class="reply-actions">
+                    <span class="reply-help">Supports Markdown and :sticker: syntax</span>
+                    <button class="btn" on:click={submitReply} disabled={submittingReply}>
+                        {submittingReply ? 'Posting...' : 'Post Reply'}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    {/if}
+</div>
+
+{#if activeProfilePreview}
+    <ProfilePreview
+        username={activeProfilePreview.username}
+        userId={activeProfilePreview.userId}
+        isGuest={activeProfilePreview.isGuest}
+        position={activeProfilePreview.position}
+        on:close={handleProfileClose}
+    />
+{/if}
diff --git a/frontend/src/routes/games/+page.svelte b/frontend/src/routes/games/+page.svelte
new file mode 100644
index 0000000..6f5d5f5
--- /dev/null
+++ b/frontend/src/routes/games/+page.svelte
@@ -0,0 +1,205 @@
+<script>
+    import { onMount } from 'svelte';
+    import { auth } from '$lib/stores/auth';
+    import { nakama } from '$lib/stores/nakama';
+    import { goto } from '$app/navigation';
+
+    let leaderboard = [];
+    let loading = true;
+    let error = null;
+
+    onMount(async () => {
+        // Check if user is logged in
+        if (!$auth.user) {
+            goto('/login');
+            return;
+        }
+
+        try {
+            // Initialize Nakama
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+
+            if (!authResult.success) {
+                error = 'Failed to connect to game server';
+                loading = false;
+                return;
+            }
+
+            // Get leaderboard
+            const lbResult = await nakama.getChessLeaderboard(10);
+            if (lbResult.success) {
+                leaderboard = lbResult.records || [];
+            }
+
+            loading = false;
+        } catch (e) {
+            console.error('Games page error:', e);
+            error = e.message;
+            loading = false;
+        }
+    });
+</script>
+
+<svelte:head>
+    <title>Games - Realms</title>
+</svelte:head>
+
+<div class="games-page">
+    <header class="games-header">
+        <h1>Games</h1>
+        <p class="subtitle">Play turn-based games with other users</p>
+    </header>
+
+    {#if loading}
+        <div class="loading">Loading games...</div>
+    {:else if error}
+        <div class="error">{error}</div>
+    {:else}
+        <div class="games-grid">
+            <!-- Chess960 Game Card -->
+            <a href="/games/chess" class="game-card">
+                <div class="game-icon">&#9822;</div>
+                <h2>Chess960</h2>
+                <p>Classic two-player strategy game with randomized starting positions</p>
+            </a>
+        </div>
+
+        <!-- Leaderboard Section -->
+        {#if leaderboard.length > 0}
+            <section class="leaderboard-section">
+                <h2>Chess ELO Leaderboard</h2>
+                <table class="leaderboard-table">
+                    <thead>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Player</th>
+                            <th>ELO</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each leaderboard as record, i}
+                            <tr class:highlight={record.userId === $auth.user?.id}>
+                                <td>#{record.rank || i + 1}</td>
+                                <td>{record.username}</td>
+                                <td>{record.elo}</td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </section>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .games-page {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    .games-header {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+
+    .games-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+        color: #888;
+        font-size: 1.1rem;
+    }
+
+    .loading, .error {
+        text-align: center;
+        padding: 2rem;
+        font-size: 1.2rem;
+    }
+
+    .error {
+        color: #ff4444;
+    }
+
+    .games-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    .game-card {
+        background: #1a1a2e;
+        border-radius: 12px;
+        padding: 2rem;
+        text-align: center;
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .game-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        border-color: #561D5E;
+    }
+
+    a.game-card {
+        text-decoration: none;
+        color: inherit;
+        border: 2px solid transparent;
+        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    }
+
+    .game-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+    }
+
+    .game-card h2 {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .game-card p {
+        color: #888;
+        margin-bottom: 0;
+    }
+
+    .leaderboard-section {
+        margin-top: 2rem;
+    }
+
+    .leaderboard-section h2 {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #333;
+        padding-bottom: 0.5rem;
+    }
+
+    .leaderboard-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .leaderboard-table th,
+    .leaderboard-table td {
+        padding: 0.75rem 1rem;
+        text-align: left;
+        border-bottom: 1px solid #333;
+    }
+
+    .leaderboard-table th {
+        background: #1a1a2e;
+        font-weight: 600;
+    }
+
+    .leaderboard-table tr.highlight {
+        background: rgba(86, 29, 94, 0.3);
+    }
+
+    .leaderboard-table tr:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+</style>
diff --git a/frontend/src/routes/games/chess/+page.svelte b/frontend/src/routes/games/chess/+page.svelte
new file mode 100644
index 0000000..b47f45c
--- /dev/null
+++ b/frontend/src/routes/games/chess/+page.svelte
@@ -0,0 +1,891 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { browser } from '$app/environment';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { auth } from '$lib/stores/auth';
+    import { nakama, ChessOpCode, GAMES_POLL_INTERVAL } from '$lib/stores/nakama';
+    import { gamesOverlay } from '$lib/stores/gamesOverlay';
+
+    // Lobby state
+    let openChallenges = [];
+    let liveGames = [];
+    let leaderboard = [];
+    let loading = true;
+    let error = null;
+    let refreshInterval = null;
+    let creatingGame = false;
+    let authReady = false; // Track when auth store has finished loading
+    let initialLoadDone = false; // Prevent multiple initial loads
+
+    // When ?match= param is present, redirect to overlay
+    $: matchIdFromUrl = $page.url.searchParams.get('match');
+    let joinAttempted = false;
+    $: if (browser && matchIdFromUrl && $auth.user && !$auth.loading && !joinAttempted) {
+        // Wait for auth to finish loading before joining
+        joinAttempted = true;
+        joinGameFromUrl(matchIdFromUrl);
+    }
+
+    // Wait for auth to finish loading before loading lobby data
+    $: if (browser && !$auth.loading && !initialLoadDone) {
+        authReady = true;
+        initialLoadDone = true;
+        loadLobbyData();
+    }
+
+    // Refresh lobby when game overlay closes (game finished)
+    let wasOverlayEnabled = false;
+    $: {
+        if (browser && wasOverlayEnabled && !$gamesOverlay.enabled) {
+            // Overlay just closed - refresh the lobby data
+            loadLobbyData();
+        }
+        wasOverlayEnabled = $gamesOverlay.enabled;
+    }
+
+    async function joinGameFromUrl(matchId) {
+        try {
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+            if (!authResult.success) {
+                error = 'Failed to authenticate with game server';
+                return;
+            }
+
+            const socketResult = await nakama.connectSocket();
+            if (!socketResult.success) {
+                error = 'Failed to connect to game server';
+                return;
+            }
+
+            // Join the match
+            const joinResult = await nakama.joinMatch(matchId);
+            if (joinResult.success) {
+                // Open in overlay - don't force mode, let server GAME_STATE determine role
+                gamesOverlay.openGame(matchId, null);
+                // Clear URL param
+                goto('/games/chess', { replaceState: true });
+            } else {
+                error = `Failed to join match: ${joinResult.error}`;
+            }
+        } catch (e) {
+            error = `Error joining game: ${e.message}`;
+        }
+    }
+
+    // Helper to add timeout to promises
+    function withTimeout(promise, ms, fallback) {
+        return Promise.race([
+            promise,
+            new Promise(resolve => setTimeout(() => resolve(fallback), ms))
+        ]);
+    }
+
+    async function loadLobbyData() {
+        if (!browser) return;
+
+        try {
+            // Initialize Nakama
+            await nakama.init();
+
+            // Always try to authenticate - nakama.authenticate() checks for token internally
+            const authResult = await nakama.authenticate();
+            if (!authResult.success) {
+                console.warn('Nakama auth failed:', authResult.error);
+                // Continue anyway to show public data, but matches won't load
+            }
+
+            // Fetch matches
+            const [waitingResult, playingResult, leaderboardResult] = await Promise.all([
+                withTimeout(nakama.listChessMatches(20, 'waiting'), 5000, { success: false, matches: [] }),
+                withTimeout(nakama.listChessMatches(20, 'playing'), 5000, { success: false, matches: [] }),
+                $auth.user
+                    ? withTimeout(nakama.getChessLeaderboard(10), 5000, { success: false, records: [] })
+                    : { success: false }
+            ]);
+
+            console.log('Chess lobby data:', { waitingResult, playingResult });
+
+            if (waitingResult.success) {
+                // Include all challenges (including user's own)
+                openChallenges = waitingResult.matches || [];
+            } else {
+                console.warn('Failed to fetch waiting matches:', waitingResult.error);
+            }
+
+            if (playingResult.success) {
+                // Filter out user's own match from live games
+                liveGames = (playingResult.matches || []).filter(m => !m.isCurrentUserMatch);
+            }
+
+            if (leaderboardResult.success) {
+                leaderboard = leaderboardResult.records || [];
+            }
+
+            loading = false;
+        } catch (e) {
+            console.error('Failed to load lobby data:', e);
+            error = 'Failed to load game data';
+            loading = false;
+        }
+    }
+
+    async function cancelChallenge(matchId) {
+        // Optimistic update - remove from list immediately
+        openChallenges = openChallenges.filter(c => c.matchId !== matchId);
+
+        try {
+            const result = await nakama.cancelChallenge(matchId);
+            if (!result.success) {
+                error = result.error || 'Failed to cancel challenge';
+                loadLobbyData();  // Refresh to restore correct state
+            }
+        } catch (e) {
+            error = `Error canceling game: ${e.message}`;
+            loadLobbyData();  // Refresh to restore correct state
+        }
+    }
+
+    async function createNewGame() {
+        if (!$auth.user) {
+            goto('/login');
+            return;
+        }
+
+        creatingGame = true;
+        try {
+            const result = await nakama.createChallenge();
+            if (result.success) {
+                // Optimistic update - add to list immediately
+                // Don't call loadLobbyData() right away as the server may not have
+                // updated the match label yet, causing a flash. The poll interval
+                // will sync with server data.
+                const newChallenge = {
+                    matchId: result.matchId,
+                    white: $auth.user.username,
+                    black: null,
+                    status: 'waiting',
+                    createdAt: Math.floor(Date.now() / 1000),
+                    isCurrentUserMatch: true
+                };
+                openChallenges = [newChallenge, ...openChallenges];
+            } else if (result.existingMatchId) {
+                // User already has an active challenge - refresh to show it
+                error = result.error;
+                loadLobbyData();
+            } else {
+                error = result.error || 'Failed to create game';
+            }
+        } catch (e) {
+            error = `Error creating game: ${e.message}`;
+        }
+        creatingGame = false;
+    }
+
+    async function joinChallenge(matchId) {
+        console.log('[ChessPage] joinChallenge:', matchId);
+        if (!$auth.user) {
+            goto('/login');
+            return;
+        }
+
+        try {
+            await nakama.init();
+            const authResult = await nakama.authenticate();
+            if (!authResult.success) {
+                error = 'Failed to authenticate';
+                return;
+            }
+
+            const socketResult = await nakama.connectSocket();
+            if (!socketResult.success) {
+                error = 'Failed to connect to server';
+                return;
+            }
+
+            console.log('[ChessPage] About to joinMatch...');
+            const joinResult = await nakama.joinMatch(matchId);
+            console.log('[ChessPage] joinMatch result:', joinResult.success);
+            if (joinResult.success) {
+                // Open overlay without setting mode - wait for server GAME_STATE to confirm role
+                // Server will send 'playing' if we're a player or 'spectating' if game is full
+                console.log('[ChessPage] Opening overlay for match:', matchId);
+                gamesOverlay.openGame(matchId, null);
+            } else {
+                error = `Failed to join: ${joinResult.error}`;
+            }
+        } catch (e) {
+            error = `Error joining game: ${e.message}`;
+        }
+    }
+
+    async function spectateGame(matchId) {
+        try {
+            await nakama.init();
+
+            // Spectating might work without full auth
+            if ($auth.user) {
+                await nakama.authenticate();
+            }
+
+            const socketResult = await nakama.connectSocket();
+            if (!socketResult.success) {
+                error = 'Failed to connect to server';
+                return;
+            }
+
+            const joinResult = await nakama.joinMatch(matchId);
+            if (joinResult.success) {
+                // Don't force mode - let server GAME_STATE determine if spectator or player
+                gamesOverlay.openGame(matchId, null);
+            } else {
+                error = `Failed to spectate: ${joinResult.error}`;
+            }
+        } catch (e) {
+            error = `Error spectating game: ${e.message}`;
+        }
+    }
+
+    function formatTime(timestamp) {
+        if (!timestamp) return '';
+        const date = new Date(timestamp * 1000);
+        const now = new Date();
+        const diff = Math.floor((now - date) / 1000);
+
+        if (diff < 60) return 'Just now';
+        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+        return `${Math.floor(diff / 3600)}h ago`;
+    }
+
+    onMount(() => {
+        if (!matchIdFromUrl) {
+            // Close any stale overlay when visiting lobby without a match param
+            gamesOverlay.closeGame();
+            // Note: Initial loadLobbyData is triggered by the reactive statement when auth finishes loading
+            refreshInterval = setInterval(loadLobbyData, GAMES_POLL_INTERVAL);
+        }
+    });
+
+    onDestroy(() => {
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+        }
+    });
+</script>
+
+<svelte:head>
+    <title>Chess960 - Realms</title>
+</svelte:head>
+
+<div class="chess-lobby">
+    <header class="lobby-header">
+        <div class="header-left">
+            <a href="/games" class="back-link">&larr; Games</a>
+        </div>
+        <div class="header-center">
+            <h1>Chess960</h1>
+            <span class="subtitle">Fischer Random</span>
+        </div>
+        <div class="header-right">
+            {#if !$auth.user}
+                <a href="/login" class="login-link">Login to Play</a>
+            {/if}
+        </div>
+    </header>
+
+    {#if error}
+        <div class="error-banner">
+            <span>{error}</span>
+            <button on:click={() => error = null}>×</button>
+        </div>
+    {/if}
+
+    {#if loading}
+        <div class="loading">
+            <div class="spinner"></div>
+            <span>Loading lobby...</span>
+        </div>
+    {:else}
+        <div class="lobby-content">
+            <!-- Open Challenges -->
+            <section class="lobby-section">
+                <div class="section-header">
+                    <h2>Open Challenges</h2>
+                    {#if $auth.user}
+                        <button class="create-challenge-btn" on:click={createNewGame} disabled={creatingGame}>
+                            {creatingGame ? 'Creating...' : '+ Create Challenge'}
+                        </button>
+                    {/if}
+                </div>
+                {#if openChallenges.length === 0}
+                    <div class="empty-state">
+                        <p>No open challenges right now</p>
+                    </div>
+                {:else}
+                    <div class="challenge-list">
+                        {#each openChallenges as challenge}
+                            <div class="challenge-card" class:own-challenge={challenge.isCurrentUserMatch}>
+                                <div class="challenge-info">
+                                    <span class="player-name">{challenge.white || 'Anonymous'}</span>
+                                    {#if challenge.isCurrentUserMatch}
+                                        <span class="own-badge">you</span>
+                                    {:else}
+                                        <span class="waiting-text">is waiting...</span>
+                                    {/if}
+                                    <span class="created-time">{formatTime(challenge.createdAt)}</span>
+                                </div>
+                                <div class="challenge-actions">
+                                    {#if $auth.user}
+                                        {#if challenge.isCurrentUserMatch}
+                                            <button class="view-btn" on:click={() => joinChallenge(challenge.matchId)}>
+                                                Enter
+                                            </button>
+                                            <button class="cancel-btn" on:click={() => cancelChallenge(challenge.matchId)}>
+                                                Cancel
+                                            </button>
+                                        {:else}
+                                            <button class="join-btn" on:click={() => joinChallenge(challenge.matchId)}>
+                                                Join
+                                            </button>
+                                        {/if}
+                                    {:else}
+                                        <a href="/login" class="join-btn disabled">Login</a>
+                                    {/if}
+                                    {#if !challenge.isCurrentUserMatch}
+                                        <button class="popout-btn" on:click={() => spectateGame(challenge.matchId)} title="Open in popout">
+                                            ⧉
+                                        </button>
+                                    {/if}
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </section>
+
+            <!-- Live Games -->
+            <section class="lobby-section">
+                <h2>Live Games</h2>
+                {#if liveGames.length === 0}
+                    <div class="empty-state">
+                        <p>No games in progress</p>
+                    </div>
+                {:else}
+                    <div class="game-list">
+                        {#each liveGames as game}
+                            <div class="game-card">
+                                <div class="game-players">
+                                    <span class="player white">{game.white || '?'}</span>
+                                    <span class="vs">vs</span>
+                                    <span class="player black">{game.black || '?'}</span>
+                                </div>
+                                <div class="game-meta">
+                                    {#if game.spectatorCount > 0}
+                                        <span class="spectators">
+                                            <span class="icon">👁</span>
+                                            {game.spectatorCount}
+                                        </span>
+                                    {/if}
+                                    <button class="popout-btn" on:click={() => spectateGame(game.matchId)} title="Watch in popout">
+                                        ⧉
+                                    </button>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </section>
+
+            <!-- Leaderboard -->
+            {#if $auth.user && leaderboard.length > 0}
+                <section class="lobby-section leaderboard-section">
+                    <h2>Leaderboard</h2>
+                    <div class="leaderboard">
+                        {#each leaderboard as record, i}
+                            <div class="leaderboard-row" class:top3={i < 3}>
+                                <span class="rank">#{i + 1}</span>
+                                <span class="username">{record.username || record.owner_id?.slice(0, 8)}</span>
+                                <span class="elo">{record.score || 1200}</span>
+                            </div>
+                        {/each}
+                    </div>
+                </section>
+            {/if}
+
+            <!-- Chess960 Info -->
+            <section class="lobby-section info-section">
+                <h2>About Chess960</h2>
+                <p>
+                    Chess960, also known as Fischer Random Chess, is a variant where the starting
+                    position of pieces on the home rank is randomized. This creates 960 possible
+                    starting positions, emphasizing creativity and understanding over memorized
+                    opening theory.
+                </p>
+                <div class="rules">
+                    <h3>Rules:</h3>
+                    <ul>
+                        <li>Bishops must start on opposite colored squares</li>
+                        <li>The King must start between the two Rooks</li>
+                        <li>Black's pieces mirror White's setup</li>
+                        <li>All other standard chess rules apply</li>
+                    </ul>
+                </div>
+            </section>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .chess-lobby {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 1rem;
+    }
+
+    .lobby-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid #30363d;
+    }
+
+    .header-left,
+    .header-right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    .header-left {
+        justify-content: flex-start;
+    }
+
+    .header-right {
+        justify-content: flex-end;
+    }
+
+    .header-center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .back-link {
+        color: #8b949e;
+        text-decoration: none;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        color: #c9d1d9;
+    }
+
+    .lobby-header h1 {
+        margin: 0;
+        font-size: 1.5rem;
+        color: #c9d1d9;
+    }
+
+    .subtitle {
+        color: #6e7681;
+        font-size: 0.85rem;
+    }
+
+    .login-link {
+        color: #8b949e;
+        text-decoration: none;
+        padding: 0.6rem 1.2rem;
+        border: 1px solid #30363d;
+        border-radius: 6px;
+    }
+
+    .login-link:hover {
+        color: #c9d1d9;
+        border-color: #484f58;
+    }
+
+    .error-banner {
+        background: rgba(248, 81, 73, 0.15);
+        border: 1px solid rgba(248, 81, 73, 0.4);
+        color: #f85149;
+        padding: 0.75rem 1rem;
+        border-radius: 6px;
+        margin-bottom: 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .error-banner button {
+        background: none;
+        border: none;
+        color: #f85149;
+        cursor: pointer;
+        font-size: 1.2rem;
+        padding: 0;
+    }
+
+    .loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        gap: 1rem;
+        color: #8b949e;
+    }
+
+    .spinner {
+        width: 32px;
+        height: 32px;
+        border: 3px solid #30363d;
+        border-top-color: #f59e0b;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    .lobby-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    .lobby-section {
+        background: #161b22;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        padding: 1rem;
+    }
+
+    .cancel-btn {
+        background: rgba(248, 81, 73, 0.15);
+        border: 1px solid rgba(248, 81, 73, 0.3);
+        color: #f85149;
+        padding: 0.4rem 0.8rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.8rem;
+        transition: all 0.15s ease;
+    }
+
+    .cancel-btn:hover {
+        background: rgba(248, 81, 73, 0.25);
+        border-color: #f85149;
+    }
+
+    .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+
+    .section-header h2 {
+        margin: 0;
+    }
+
+    .lobby-section h2 {
+        margin: 0 0 1rem 0;
+        font-size: 1rem;
+        color: #c9d1d9;
+        font-weight: 600;
+    }
+
+    .create-challenge-btn {
+        background: #f59e0b;
+        color: #000;
+        border: none;
+        padding: 0.4rem 0.8rem;
+        border-radius: 4px;
+        font-weight: 600;
+        font-size: 0.8rem;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .create-challenge-btn:hover:not(:disabled) {
+        background: #fbbf24;
+    }
+
+    .create-challenge-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .empty-state {
+        text-align: center;
+        padding: 1.5rem;
+        color: #6e7681;
+    }
+
+    .empty-state p {
+        margin: 0;
+    }
+
+    .challenge-list,
+    .game-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .challenge-card,
+    .game-card {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        background: #0d1117;
+        border-radius: 6px;
+    }
+
+    .challenge-card.own-challenge {
+        background: rgba(34, 197, 94, 0.05);
+        border-left: 3px solid #22c55e;
+    }
+
+    .own-badge {
+        color: #22c55e;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .view-btn {
+        background: rgba(34, 197, 94, 0.15);
+        border: 1px solid rgba(34, 197, 94, 0.3);
+        color: #22c55e;
+        padding: 0.4rem 0.8rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.8rem;
+    }
+
+    .view-btn:hover {
+        background: rgba(34, 197, 94, 0.25);
+        border-color: #22c55e;
+    }
+
+    .challenge-info {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .challenge-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .player-name {
+        color: #c9d1d9;
+        font-weight: 500;
+    }
+
+    .waiting-text {
+        color: #8b949e;
+        font-size: 0.85rem;
+    }
+
+    .created-time {
+        color: #6e7681;
+        font-size: 0.75rem;
+    }
+
+    .join-btn,
+    .watch-btn {
+        background: #21262d;
+        border: 1px solid #30363d;
+        color: #c9d1d9;
+        padding: 0.4rem 0.8rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.8rem;
+        text-decoration: none;
+    }
+
+    .join-btn:hover {
+        background: #30363d;
+        border-color: #484f58;
+    }
+
+    .join-btn.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .popout-btn {
+        background: #21262d;
+        border: 1px solid #30363d;
+        color: #f59e0b;
+        padding: 0.4rem 0.6rem;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        transition: all 0.15s ease;
+    }
+
+    .popout-btn:hover {
+        background: #30363d;
+        border-color: #f59e0b;
+    }
+
+    .game-players {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .player {
+        font-weight: 500;
+    }
+
+    .player.white {
+        color: #f0d9b5;
+    }
+
+    .player.black {
+        color: #b58863;
+    }
+
+    .vs {
+        color: #6e7681;
+        font-size: 0.8rem;
+    }
+
+    .game-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .spectators {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        color: #8b949e;
+        font-size: 0.8rem;
+    }
+
+    .spectators .icon {
+        font-size: 0.9rem;
+    }
+
+    .leaderboard-section {
+        max-width: 400px;
+    }
+
+    .leaderboard {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .leaderboard-row {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        background: #0d1117;
+        border-radius: 4px;
+    }
+
+    .leaderboard-row.top3 {
+        background: rgba(245, 158, 11, 0.1);
+    }
+
+    .rank {
+        width: 40px;
+        color: #6e7681;
+        font-size: 0.85rem;
+    }
+
+    .leaderboard-row.top3 .rank {
+        color: #f59e0b;
+        font-weight: 600;
+    }
+
+    .username {
+        flex: 1;
+        color: #c9d1d9;
+    }
+
+    .elo {
+        color: #8b949e;
+        font-family: monospace;
+        font-size: 0.9rem;
+    }
+
+    .info-section {
+        background: #0d1117;
+    }
+
+    .info-section p {
+        color: #8b949e;
+        font-size: 0.9rem;
+        line-height: 1.6;
+        margin: 0 0 1rem 0;
+    }
+
+    .rules h3 {
+        font-size: 0.85rem;
+        color: #c9d1d9;
+        margin: 0 0 0.5rem 0;
+    }
+
+    .rules ul {
+        margin: 0;
+        padding-left: 1.25rem;
+        color: #8b949e;
+        font-size: 0.85rem;
+    }
+
+    .rules li {
+        margin-bottom: 0.25rem;
+    }
+
+    @media (max-width: 600px) {
+        .lobby-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 1rem;
+        }
+
+        .header-right {
+            width: 100%;
+        }
+
+        .section-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .create-challenge-btn {
+            width: 100%;
+        }
+
+        .challenge-card,
+        .game-card {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .challenge-actions {
+            width: 100%;
+        }
+
+        .join-btn {
+            flex: 1;
+            text-align: center;
+        }
+    }
+</style>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 5922e96..3fe4890 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { auth, isAuthenticated } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { goto } from '$app/navigation';
     import * as pgp from '$lib/pgp';
     import '../../app.css';
@@ -28,14 +29,35 @@
     
     // Show PGP command example
     let showPgpExample = false;
-    
+
     // For unlocking stored key
     let storedKeyPassphrase = '';
-    
+
+    // Referral registration
+    let referralMode = false;
+    let referralCode = '';
+    let referralValidating = false;
+    let referralValid = false;
+    let registrationEnabled = true;
+    let referralSystemEnabled = false;
+
     onMount(async () => {
         await auth.init();
         if ($isAuthenticated) {
             goto('/');
+            return;
+        }
+
+        // Check registration and referral settings
+        try {
+            const response = await fetch('/api/settings/referral');
+            const data = await response.json();
+            if (data.success) {
+                registrationEnabled = data.registrationEnabled;
+                referralSystemEnabled = data.referralSystemEnabled;
+            }
+        } catch (e) {
+            console.error('Error loading registration settings', e);
         }
     });
     
@@ -152,11 +174,103 @@
         
         loading = false;
     }
-    
+
+    // Referral code functions
+    async function validateReferralCode() {
+        if (!referralCode.trim()) {
+            error = 'Please enter a referral code';
+            return;
+        }
+
+        referralValidating = true;
+        error = '';
+
+        try {
+            const response = await fetch('/api/auth/validate-referral', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ code: referralCode.trim() })
+            });
+
+            const data = await response.json();
+
+            if (data.success && data.valid) {
+                referralValid = true;
+                mode = 'register';
+            } else {
+                error = 'Invalid or already used referral code';
+            }
+        } catch (e) {
+            error = 'Error validating code';
+            console.error(e);
+        }
+
+        referralValidating = false;
+    }
+
+    async function handleReferralRegister() {
+        error = '';
+
+        if (password !== confirmPassword) {
+            error = 'Passwords do not match';
+            return;
+        }
+
+        const passwordError = validatePassword(password);
+        if (passwordError) {
+            error = passwordError;
+            return;
+        }
+
+        if (keyPassphrase !== confirmKeyPassphrase) {
+            error = 'Key passphrases do not match';
+            return;
+        }
+
+        const passphraseError = pgp.validatePassphrase(keyPassphrase);
+        if (passphraseError) {
+            error = passphraseError;
+            return;
+        }
+
+        loading = true;
+
+        try {
+            const keyPair = await pgp.generateKeyPair(username, keyPassphrase);
+
+            const response = await fetch('/api/auth/register-referral', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    code: referralCode.trim(),
+                    username,
+                    password,
+                    publicKey: keyPair.publicKey,
+                    fingerprint: keyPair.fingerprint
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                generatedPrivateKey = keyPair.privateKey;
+                generatedPublicKey = keyPair.publicKey;
+                showGeneratedKeys = true;
+            } else {
+                error = data.error || 'Registration failed';
+            }
+        } catch (e) {
+            error = e.message || 'Failed to register';
+            console.error(e);
+        }
+
+        loading = false;
+    }
+
     async function initiatePgpLogin() {
         error = '';
         pgpLoading = true;
-        
+
         try {
             const response = await fetch('/api/auth/pgp-challenge', {
                 method: 'POST',
@@ -258,6 +372,10 @@
     }
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title} - Login</title>
+</svelte:head>
+
 <div class="auth-container">
     {#if showGeneratedKeys}
         <h1>Your PGP Keys</h1>
@@ -493,8 +611,52 @@ iQEcBAABCAAGBQJe...
                     Back
                 </button>
             </form>
+        {:else if referralMode && !referralValid}
+            <!-- Referral code entry screen -->
+            <div class="card" style="max-width: 400px; margin: 0 auto;">
+                <h2 style="margin-bottom: 1rem;">Enter Referral Code</h2>
+                <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                    Registration is invite-only. Please enter your referral code to continue.
+                </p>
+
+                <div class="form-group">
+                    <label for="referral-code">Referral Code</label>
+                    <input
+                        type="text"
+                        id="referral-code"
+                        bind:value={referralCode}
+                        placeholder="Enter code (e.g., ABC123DEF456)"
+                        style="font-family: monospace; text-transform: uppercase; letter-spacing: 2px;"
+                        disabled={referralValidating}
+                    />
+                </div>
+
+                {#if error}
+                    <div class="error" style="margin-bottom: 1rem;">{error}</div>
+                {/if}
+
+                <button
+                    class="btn-block"
+                    on:click={validateReferralCode}
+                    disabled={referralValidating || !referralCode.trim()}
+                >
+                    {referralValidating ? 'Validating...' : 'Continue'}
+                </button>
+
+                <div style="margin-top: 1rem; text-align: center;">
+                    <button class="btn-link" on:click={() => { referralMode = false; error = ''; referralCode = ''; }}>
+                        Back to Login
+                    </button>
+                </div>
+            </div>
         {:else}
-            <form on:submit|preventDefault={handleRegister}>
+            <form on:submit|preventDefault={referralValid ? handleReferralRegister : handleRegister}>
+                {#if referralValid}
+                    <div class="referral-badge" style="background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="color: #28a745;">Registering with code:</span>
+                        <code style="font-family: monospace; letter-spacing: 2px; background: var(--black); padding: 0.25rem 0.5rem; border-radius: 4px;">{referralCode.toUpperCase()}</code>
+                    </div>
+                {/if}
                 <div class="form-group">
                     <label for="reg-username">Username</label>
                     <input
@@ -507,7 +669,7 @@ iQEcBAABCAAGBQJe...
                         title="Letters, numbers, and underscores only"
                     />
                 </div>
-                
+
                 <div class="form-group">
                     <label for="reg-password">Password</label>
                     <input
@@ -583,11 +745,23 @@ iQEcBAABCAAGBQJe...
         
         <div style="margin-top: 2rem; text-align: center;">
             {#if mode === 'login'}
-                <button class="btn-link" on:click={() => { mode = 'register'; error = ''; username = ''; password = ''; }}>
-                    Need an account? Register
+                {#if registrationEnabled}
+                    <button class="btn-link" on:click={() => { mode = 'register'; error = ''; username = ''; password = ''; }}>
+                        Need an account? Register
+                    </button>
+                {:else if referralSystemEnabled}
+                    <button class="btn-link" on:click={() => { mode = 'register'; referralMode = true; error = ''; }}>
+                        Have a referral code? Register
+                    </button>
+                {:else}
+                    <p style="color: var(--gray);">Registration is currently closed</p>
+                {/if}
+            {:else if !referralMode}
+                <button class="btn-link" on:click={() => { mode = 'login'; error = ''; username = ''; password = ''; keyPassphrase = ''; confirmKeyPassphrase = ''; referralValid = false; referralCode = ''; }}>
+                    Already have an account? Login
                 </button>
             {:else}
-                <button class="btn-link" on:click={() => { mode = 'login'; error = ''; username = ''; password = ''; keyPassphrase = ''; confirmKeyPassphrase = ''; }}>
+                <button class="btn-link" on:click={() => { mode = 'login'; referralMode = false; error = ''; username = ''; password = ''; keyPassphrase = ''; confirmKeyPassphrase = ''; referralValid = false; referralCode = ''; }}>
                     Already have an account? Login
                 </button>
             {/if}
diff --git a/frontend/src/routes/my-realms/+page.svelte b/frontend/src/routes/my-realms/+page.svelte
index 48a9979..f01768a 100644
--- a/frontend/src/routes/my-realms/+page.svelte
+++ b/frontend/src/routes/my-realms/+page.svelte
@@ -1,42 +1,144 @@
 <script>
     import { onMount, onDestroy } from 'svelte';
-    import { auth, isAuthenticated, isStreamer } from '$lib/stores/auth';
+    import { auth, isAuthenticated, isStreamer, isRestreamer, isUploader, isWatchCreator } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { goto } from '$app/navigation';
     import { connectWebSocket, disconnectWebSocket } from '$lib/websocket';
-    
+
     let realms = [];
     let loading = true;
     let error = '';
     let message = '';
     let showCreateModal = false;
     let statsInterval;
-    
+
     // Create form
     let newRealmName = '';
+    let newRealmDescription = '';
+    let newRealmType = 'stream'; // 'stream', 'video', or 'audio'
+    let selectedVideoRealm = null; // For upload modal
+    let selectedAudioRealm = null; // For audio upload modal
+
+    // Edit state
+    let editingDescriptionId = null;
+    let editDescriptionValue = '';
+    let editingNameId = null;
+    let editNameValue = '';
+
+    // Restream state
+    let restreamDestinations = {}; // realmId -> destinations[]
+    let showRestreamModal = false;
+    let restreamRealmId = null;
+    let newRestreamName = '';
+    let newRestreamUrl = '';
+    let newRestreamKey = '';
+    let restreamLoading = false;
+
+    // Video state
+    let videos = [];
+    let videosLoading = true;
+    let showVideoUploadModal = false;
+
+    // Expandable video list state per realm
+    let expandedRealms = {}; // realmId -> boolean
+    let realmVideos = {}; // realmId -> videos[]
+    let realmVideosLoading = {}; // realmId -> boolean
+    let uploading = false;
+    let uploadProgress = 0;
+    let uploadTitle = '';
+    let uploadDescription = '';
+    let uploadFile = null;
+    let uploadError = '';
+    let editingVideo = null;
+    let editVideoTitle = '';
+    let editVideoDescription = '';
+
+    // Audio state
+    let expandedAudioRealms = {}; // realmId -> boolean
+    let realmAudio = {}; // realmId -> audio[]
+    let realmAudioLoading = {}; // realmId -> boolean
+    let showAudioUploadModal = false;
+    let audioUploading = false;
+    let audioUploadProgress = 0;
+    let audioUploadTitle = '';
+    let audioUploadDescription = '';
+    let audioUploadFile = null;
+    let audioUploadError = '';
+    let editingAudio = null;
+    let editAudioTitle = '';
+    let editAudioDescription = '';
+    let showAudioThumbnailModal = false;
+    let audioThumbnailId = null;
+    let audioThumbnailFile = null;
+    let audioThumbnailUploading = false;
+
+    // Ebook upload state
+    let selectedEbookRealm = null;
+    let showEbookUploadModal = false;
+    let ebookUploading = false;
+    let ebookUploadProgress = 0;
+    let ebookUploadTitle = '';
+    let ebookUploadDescription = '';
+    let ebookUploadFile = null;
+    let ebookUploadError = '';
+    let ebookCoverFile = null;
+    let ebookCoverPreview = null;
+
+    // Ebook expandable list state
+    let expandedEbookRealms = {}; // realmId -> boolean
+    let realmEbooks = {}; // realmId -> ebooks[]
+    let realmEbooksLoading = {}; // realmId -> boolean
+    let editingEbook = null;
+    let editEbookTitle = '';
+    let editEbookDescription = '';
+    let editEbookCoverFile = null;
+    let editEbookCoverPreview = null;
+    let editEbookCoverUploading = false;
+
+    // Offline image state
+    let offlineImageUploading = {};  // realmId -> boolean
+    let offlineImageFile = null;
+    let showOfflineImageModal = false;
+    let offlineImageRealmId = null;
+    let offlineImageInput = null;  // Reference to file input element
+
+    // Collapse state for realm cards
+    let collapsedRealms = {};  // realmId -> boolean
+
+    // Title color state
+    let showTitleColorModal = false;
+    let titleColorRealmId = null;
+    let titleColor = '#ffffff';
+    let savingTitleColor = false;
     
     onMount(async () => {
         await auth.init();
-        
+
         if (!$isAuthenticated) {
             goto('/login');
             return;
         }
-        
-        if (!$isStreamer) {
+
+        // Allow access if user is either streamer or uploader
+        if (!$isStreamer && !$isUploader) {
             goto('/');
             return;
         }
-        
+
         await loadRealms();
-        
-        // Start polling for stats
+
+        // Start polling for stats and restream status
         statsInterval = setInterval(async () => {
             for (const realm of realms) {
                 if (realm.isLive) {
                     await updateRealmStats(realm.id);
+                    // Also refresh restream destinations if we have them loaded
+                    if (restreamDestinations[realm.id]) {
+                        await loadRestreamDestinations(realm.id);
+                    }
                 }
             }
-        }, 2000);
+        }, 3000);
         
         // Connect WebSocket for real-time updates
         connectWebSocket((data) => {
@@ -59,20 +161,24 @@
         disconnectWebSocket();
     });
     
-    async function loadRealms() {
-        loading = true;
+    async function loadRealms(showLoading = true) {
+        if (showLoading) loading = true;
         try {
             const response = await fetch('/api/realms', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 const data = await response.json();
                 realms = data.realms;
-                
-                // Load stats for each realm
+
+                // Load stats and restream destinations for each realm
                 for (const realm of realms) {
                     await updateRealmStats(realm.id);
+                    // Pre-load restream destinations for restreamers
+                    if ($isRestreamer) {
+                        await loadRestreamDestinations(realm.id);
+                    }
                 }
             } else {
                 error = 'Failed to load realms';
@@ -88,9 +194,9 @@
     async function updateRealmStats(realmId) {
         try {
             const response = await fetch(`/api/realms/${realmId}/stats`, {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
-            
+
             if (response.ok) {
                 const data = await response.json();
                 const realm = realms.find(r => r.id === realmId);
@@ -108,28 +214,56 @@
     
     async function createRealm() {
         error = '';
-        
+
         if (!validateRealmName(newRealmName)) {
             error = 'Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only';
             return;
         }
-        
+
+        // Check permissions based on realm type
+        if (newRealmType === 'stream' && !$isStreamer) {
+            error = 'You must be a streamer to create stream realms';
+            return;
+        }
+        if (newRealmType === 'video' && !$isUploader) {
+            error = 'You must be an uploader to create video realms';
+            return;
+        }
+        if (newRealmType === 'audio' && !$isUploader) {
+            error = 'You must be an uploader to create audio realms';
+            return;
+        }
+        if (newRealmType === 'ebook' && !$isUploader) {
+            error = 'You must be an uploader to create ebook realms';
+            return;
+        }
+        if (newRealmType === 'watch' && !$isWatchCreator) {
+            error = 'You must be a watch creator to create watch rooms';
+            return;
+        }
+
         try {
             const response = await fetch('/api/realms', {
                 method: 'POST',
                 headers: {
-                    'Authorization': `Bearer ${$auth.token}`,
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ name: newRealmName })
+                credentials: 'include',
+                body: JSON.stringify({
+                    name: newRealmName,
+                    description: newRealmDescription,
+                    type: newRealmType
+                })
             });
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
                 message = 'Realm created successfully';
                 showCreateModal = false;
                 newRealmName = '';
+                newRealmDescription = '';
+                newRealmType = 'stream';
                 await loadRealms();
             } else {
                 error = data.error || 'Failed to create realm';
@@ -138,7 +272,7 @@
             error = 'Error creating realm';
             console.error(e);
         }
-        
+
         setTimeout(() => { message = ''; }, 3000);
     }
     
@@ -150,7 +284,7 @@
         try {
             const response = await fetch(`/api/realms/${realm.id}`, {
                 method: 'DELETE',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
             
             if (response.ok) {
@@ -175,7 +309,7 @@
         try {
             const response = await fetch(`/api/realms/${realm.id}/regenerate-key`, {
                 method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
+                credentials: 'include'
             });
             
             const data = await response.json();
@@ -204,17 +338,1434 @@
         setTimeout(() => message = '', 2000);
     }
     
-function formatBitrate(bitrate) {
-    if (bitrate > 1000000) {
-        return (bitrate / 1000000).toFixed(2) + ' Mbps';
-    } else if (bitrate > 1000) {
-        return Math.round(bitrate / 1000) + ' kbps';  // Changed to lowercase 'kbps' and rounded
-    } else {
-        return bitrate + ' bps';
+    function formatBitrate(bitrate) {
+        if (bitrate > 1000000) {
+            return (bitrate / 1000000).toFixed(2) + ' Mbps';
+        } else if (bitrate > 1000) {
+            return Math.round(bitrate / 1000) + ' kbps';  // Changed to lowercase 'kbps' and rounded
+        } else {
+            return bitrate + ' bps';
+        }
+    }
+
+    async function toggleChatEnabled(realm) {
+        try {
+            const newChatEnabled = !realm.chatEnabled;
+            const response = await fetch(`/api/realms/${realm.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ chatEnabled: newChatEnabled })
+            });
+
+            if (response.ok) {
+                realm.chatEnabled = newChatEnabled;
+                realms = realms;
+                message = newChatEnabled ? 'Chat enabled' : 'Chat disabled';
+            } else {
+                error = 'Failed to update chat setting';
+            }
+        } catch (e) {
+            error = 'Error updating chat setting';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function toggleChatGuestsAllowed(realm) {
+        try {
+            const newChatGuestsAllowed = !realm.chatGuestsAllowed;
+            const response = await fetch(`/api/realms/${realm.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ chatGuestsAllowed: newChatGuestsAllowed })
+            });
+
+            if (response.ok) {
+                realm.chatGuestsAllowed = newChatGuestsAllowed;
+                realms = realms;
+                message = newChatGuestsAllowed ? 'Guest chat enabled' : 'Guest chat disabled';
+            } else {
+                error = 'Failed to update guest chat setting';
+            }
+        } catch (e) {
+            error = 'Error updating guest chat setting';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function updateChatSettings(realm, updates) {
+        try {
+            const response = await fetch(`/api/realms/${realm.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify(updates)
+            });
+
+            if (response.ok) {
+                Object.assign(realm, updates);
+                realms = realms;
+                message = 'Chat settings updated';
+            } else {
+                error = 'Failed to update chat settings';
+            }
+        } catch (e) {
+            error = 'Error updating chat settings';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function startEditDescription(realm) {
+        editingDescriptionId = realm.id;
+        editDescriptionValue = realm.description || '';
+    }
+
+    function cancelEditDescription() {
+        editingDescriptionId = null;
+        editDescriptionValue = '';
+    }
+
+    async function saveDescription(realm) {
+        try {
+            const response = await fetch(`/api/realms/${realm.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ description: editDescriptionValue })
+            });
+
+            if (response.ok) {
+                realm.description = editDescriptionValue;
+                realms = realms;
+                editingDescriptionId = null;
+                editDescriptionValue = '';
+                message = 'Description updated';
+            } else {
+                error = 'Failed to update description';
+            }
+        } catch (e) {
+            error = 'Error updating description';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function startEditName(realm) {
+        editingNameId = realm.id;
+        editNameValue = realm.name;
+    }
+
+    function cancelEditName() {
+        editingNameId = null;
+        editNameValue = '';
+    }
+
+    async function saveName(realm) {
+        // Validate name format
+        const namePattern = /^[a-z0-9-]+$/;
+        if (!editNameValue || editNameValue.length < 3 || editNameValue.length > 30 || !namePattern.test(editNameValue)) {
+            error = 'Name must be 3-30 lowercase letters, numbers, and hyphens only';
+            setTimeout(() => error = '', 3000);
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/realms/${realm.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ name: editNameValue })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                realm.name = data.name || editNameValue;
+                realms = realms;
+                editingNameId = null;
+                editNameValue = '';
+                message = 'Realm renamed successfully';
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to rename realm';
+            }
+        } catch (e) {
+            error = 'Error renaming realm';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Restream functions
+    async function loadRestreamDestinations(realmId) {
+        try {
+            const response = await fetch(`/api/realms/${realmId}/restream`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                restreamDestinations[realmId] = data.destinations || [];
+                restreamDestinations = restreamDestinations;
+            }
+        } catch (e) {
+            console.error('Failed to load restream destinations:', e);
+        }
+    }
+
+    function openRestreamModal(realmId) {
+        restreamRealmId = realmId;
+        newRestreamName = '';
+        newRestreamUrl = '';
+        newRestreamKey = '';
+        showRestreamModal = true;
+        loadRestreamDestinations(realmId);
+    }
+
+    function closeRestreamModal() {
+        showRestreamModal = false;
+        restreamRealmId = null;
+    }
+
+    async function addRestreamDestination() {
+        if (!newRestreamName || !newRestreamUrl || !newRestreamKey) {
+            error = 'All fields are required';
+            setTimeout(() => error = '', 3000);
+            return;
+        }
+
+        if (!newRestreamUrl.startsWith('rtmp://') && !newRestreamUrl.startsWith('rtmps://')) {
+            error = 'RTMP URL must start with rtmp:// or rtmps://';
+            setTimeout(() => error = '', 3000);
+            return;
+        }
+
+        restreamLoading = true;
+        try {
+            const response = await fetch(`/api/realms/${restreamRealmId}/restream`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    name: newRestreamName,
+                    rtmpUrl: newRestreamUrl,
+                    streamKey: newRestreamKey,
+                    enabled: true
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                message = 'Restream destination added';
+                newRestreamName = '';
+                newRestreamUrl = '';
+                newRestreamKey = '';
+                await loadRestreamDestinations(restreamRealmId);
+            } else {
+                error = data.error || 'Failed to add destination';
+            }
+        } catch (e) {
+            error = 'Error adding destination';
+            console.error(e);
+        } finally {
+            restreamLoading = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function toggleRestreamDestination(realmId, destId, enabled) {
+        try {
+            const response = await fetch(`/api/realms/${realmId}/restream/${destId}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ enabled: !enabled })
+            });
+
+            if (response.ok) {
+                message = enabled ? 'Destination disabled' : 'Destination enabled';
+                await loadRestreamDestinations(realmId);
+            } else {
+                error = 'Failed to update destination';
+            }
+        } catch (e) {
+            error = 'Error updating destination';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteRestreamDestination(realmId, destId) {
+        if (!confirm('Delete this restream destination?')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/realms/${realmId}/restream/${destId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                message = 'Destination deleted';
+                await loadRestreamDestinations(realmId);
+            } else {
+                error = 'Failed to delete destination';
+            }
+        } catch (e) {
+            error = 'Error deleting destination';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function testRestreamDestination(realmId, destId) {
+        const realm = realms.find(r => r.id === realmId);
+        if (!realm?.isLive) {
+            error = 'Stream must be live to test restream';
+            setTimeout(() => error = '', 3000);
+            return;
+        }
+
+        restreamLoading = true;
+        try {
+            const response = await fetch(`/api/realms/${realmId}/restream/${destId}/test`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                message = 'Restream connection successful!';
+                await loadRestreamDestinations(realmId);
+            } else {
+                error = data.error || 'Restream connection failed';
+            }
+        } catch (e) {
+            error = 'Error testing restream';
+            console.error(e);
+        } finally {
+            restreamLoading = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Video functions
+    async function loadVideos() {
+        videosLoading = true;
+        try {
+            const res = await fetch('/api/user/videos', { credentials: 'include' });
+            if (res.ok) {
+                const data = await res.json();
+                videos = data.videos || [];
+            }
+        } catch (e) {
+            console.error('Failed to load videos:', e);
+        } finally {
+            videosLoading = false;
+        }
+    }
+
+    function formatBytes(bytes) {
+        if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
+        if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB';
+        if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
+        return bytes + ' bytes';
+    }
+
+    function formatVideoDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function handleFileSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            uploadFile = file;
+            if (!uploadTitle) {
+                uploadTitle = file.name.replace(/\.[^/.]+$/, '');
+            }
+        }
+    }
+
+    function openVideoUploadModal(realm) {
+        selectedVideoRealm = realm;
+        uploadTitle = '';
+        uploadDescription = '';
+        uploadFile = null;
+        uploadError = '';
+        uploadProgress = 0;
+        showVideoUploadModal = true;
+    }
+
+    function closeVideoUploadModal() {
+        showVideoUploadModal = false;
+        uploadFile = null;
+        selectedVideoRealm = null;
+    }
+
+    async function uploadVideo() {
+        if (!uploadFile) {
+            uploadError = 'Please select a video file';
+            return;
+        }
+        if (!uploadTitle.trim()) {
+            uploadError = 'Please enter a title';
+            return;
+        }
+        if (!selectedVideoRealm) {
+            uploadError = 'No video realm selected';
+            return;
+        }
+
+        uploading = true;
+        uploadError = '';
+        uploadProgress = 0;
+
+        const formData = new FormData();
+        formData.append('file', uploadFile);
+        formData.append('title', uploadTitle.trim());
+        formData.append('description', uploadDescription.trim());
+        formData.append('realmId', selectedVideoRealm.id.toString());
+
+        try {
+            const xhr = new XMLHttpRequest();
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    uploadProgress = Math.round((e.loaded / e.total) * 100);
+                }
+            });
+            xhr.addEventListener('load', async () => {
+                if (xhr.status === 200) {
+                    const data = JSON.parse(xhr.responseText);
+                    if (data.success) {
+                        const uploadedRealmId = selectedVideoRealm.id;
+                        closeVideoUploadModal();
+                        message = 'Video uploaded successfully! Thumbnail will be generated shortly.';
+                        // Reload realms to get updated video count
+                        await loadRealms();
+                        // Reload realm videos if expanded
+                        if (expandedRealms[uploadedRealmId]) {
+                            await loadRealmVideos(uploadedRealmId);
+                        }
+                    } else {
+                        uploadError = data.error || 'Upload failed';
+                    }
+                } else {
+                    try {
+                        const data = JSON.parse(xhr.responseText);
+                        uploadError = data.error || 'Upload failed';
+                    } catch {
+                        uploadError = 'Upload failed';
+                    }
+                }
+                uploading = false;
+            });
+            xhr.addEventListener('error', () => {
+                uploadError = 'Network error during upload';
+                uploading = false;
+            });
+            xhr.open('POST', '/api/user/videos');
+            xhr.withCredentials = true;
+            xhr.send(formData);
+        } catch (e) {
+            console.error('Upload error:', e);
+            uploadError = 'Failed to upload video';
+            uploading = false;
+        }
+
+        setTimeout(() => { message = ''; }, 3000);
+    }
+
+    function openEditVideoModal(video) {
+        editingVideo = video;
+        editVideoTitle = video.title;
+        editVideoDescription = video.description || '';
+    }
+
+    function closeEditVideoModal() {
+        editingVideo = null;
+    }
+
+    async function saveVideoEdit() {
+        if (!editVideoTitle.trim()) return;
+
+        try {
+            const res = await fetch(`/api/videos/${editingVideo.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    title: editVideoTitle.trim(),
+                    description: editVideoDescription.trim()
+                })
+            });
+
+            if (res.ok) {
+                // Update in videos array
+                const idx = videos.findIndex(v => v.id === editingVideo.id);
+                if (idx !== -1) {
+                    videos[idx] = {
+                        ...videos[idx],
+                        title: editVideoTitle.trim(),
+                        description: editVideoDescription.trim()
+                    };
+                    videos = videos;
+                }
+                // Also update in realm videos if present
+                for (const realmId in realmVideos) {
+                    const vidIdx = realmVideos[realmId].findIndex(v => v.id === editingVideo.id);
+                    if (vidIdx !== -1) {
+                        realmVideos[realmId][vidIdx] = {
+                            ...realmVideos[realmId][vidIdx],
+                            title: editVideoTitle.trim(),
+                            description: editVideoDescription.trim()
+                        };
+                    }
+                }
+                realmVideos = realmVideos;
+                closeEditVideoModal();
+                message = 'Video updated';
+            } else {
+                error = 'Failed to update video';
+            }
+        } catch (e) {
+            console.error('Failed to update video:', e);
+            error = 'Error updating video';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteVideo(videoId) {
+        if (!confirm('Are you sure you want to delete this video?')) return;
+
+        try {
+            const res = await fetch(`/api/videos/${videoId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (res.ok) {
+                videos = videos.filter(v => v.id !== videoId);
+                // Also remove from realm videos if present
+                for (const realmId in realmVideos) {
+                    realmVideos[realmId] = realmVideos[realmId].filter(v => v.id !== videoId);
+                }
+                realmVideos = realmVideos;
+                message = 'Video deleted';
+                // Reload realms to update video count
+                await loadRealms();
+            } else {
+                error = 'Failed to delete video';
+            }
+        } catch (e) {
+            console.error('Failed to delete video:', e);
+            error = 'Error deleting video';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function toggleRealmVideos(realmId) {
+        expandedRealms[realmId] = !expandedRealms[realmId];
+        expandedRealms = expandedRealms;
+
+        // Load videos if expanding and not already loaded
+        if (expandedRealms[realmId] && !realmVideos[realmId]) {
+            await loadRealmVideos(realmId);
+        }
+    }
+
+    async function loadRealmVideos(realmId) {
+        realmVideosLoading[realmId] = true;
+        realmVideosLoading = realmVideosLoading;
+
+        try {
+            const res = await fetch(`/api/videos/realm/${realmId}`, { credentials: 'include' });
+            if (res.ok) {
+                const data = await res.json();
+                realmVideos[realmId] = data.videos || [];
+                realmVideos = realmVideos;
+            }
+        } catch (e) {
+            console.error('Failed to load realm videos:', e);
+        } finally {
+            realmVideosLoading[realmId] = false;
+            realmVideosLoading = realmVideosLoading;
+        }
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    // Offline image functions
+    function openOfflineImageModal(realmId) {
+        offlineImageRealmId = realmId;
+        offlineImageFile = null;
+        // Reset file input value to allow selecting the same file again
+        if (offlineImageInput) {
+            offlineImageInput.value = '';
+        }
+        showOfflineImageModal = true;
+    }
+
+    function closeOfflineImageModal() {
+        showOfflineImageModal = false;
+        offlineImageRealmId = null;
+        offlineImageFile = null;
+        // Reset file input value
+        if (offlineImageInput) {
+            offlineImageInput.value = '';
+        }
+    }
+
+    function handleOfflineImageSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            offlineImageFile = file;
+        }
+    }
+
+    async function uploadOfflineImage() {
+        if (!offlineImageFile || !offlineImageRealmId) return;
+
+        const realmId = offlineImageRealmId; // Save before modal closes
+        offlineImageUploading[realmId] = true;
+        offlineImageUploading = offlineImageUploading;
+
+        const formData = new FormData();
+        formData.append('file', offlineImageFile);
+
+        try {
+            const response = await fetch(`/api/realms/${realmId}/offline-image`, {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Update realm in list with cache-busting timestamp
+                const realm = realms.find(r => r.id === realmId);
+                if (realm) {
+                    // Add timestamp to bust browser cache
+                    const cacheBuster = `?t=${Date.now()}`;
+                    realm.offlineImageUrl = data.offlineImageUrl + cacheBuster;
+                    realms = realms;
+                }
+                message = 'Offline image uploaded successfully';
+                closeOfflineImageModal();
+            } else {
+                error = data.error || 'Failed to upload offline image';
+            }
+        } catch (e) {
+            error = 'Error uploading offline image';
+            console.error(e);
+        } finally {
+            offlineImageUploading[realmId] = false;
+            offlineImageUploading = offlineImageUploading;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteOfflineImage(realmId) {
+        if (!confirm('Delete the offline image?')) return;
+
+        offlineImageUploading[realmId] = true;
+        offlineImageUploading = offlineImageUploading;
+
+        try {
+            const response = await fetch(`/api/realms/${realmId}/offline-image`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Update realm in list
+                const realm = realms.find(r => r.id === realmId);
+                if (realm) {
+                    realm.offlineImageUrl = '';
+                    realms = realms;
+                }
+                message = 'Offline image deleted';
+            } else {
+                error = data.error || 'Failed to delete offline image';
+            }
+        } catch (e) {
+            error = 'Error deleting offline image';
+            console.error(e);
+        } finally {
+            offlineImageUploading[realmId] = false;
+            offlineImageUploading = offlineImageUploading;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Title color functions
+    function openTitleColorEditor(realm) {
+        titleColorRealmId = realm.id;
+        titleColor = realm.titleColor || '#ffffff';
+        showTitleColorModal = true;
+    }
+
+    function closeTitleColorEditor() {
+        showTitleColorModal = false;
+        titleColorRealmId = null;
+        titleColor = '#ffffff';
+    }
+
+    async function saveTitleColor() {
+        savingTitleColor = true;
+        try {
+            const response = await fetch(`/api/realms/${titleColorRealmId}/title-color`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ titleColor })
+            });
+
+            if (response.ok) {
+                const realm = realms.find(r => r.id === titleColorRealmId);
+                if (realm) {
+                    realm.titleColor = titleColor;
+                    realms = realms;
+                }
+                message = 'Title color updated';
+                closeTitleColorEditor();
+            } else {
+                const data = await response.json();
+                error = data.error || 'Failed to save title color';
+            }
+        } catch (e) {
+            error = 'Network error';
+            console.error(e);
+        }
+        savingTitleColor = false;
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Audio functions
+    function openAudioUploadModal(realm) {
+        selectedAudioRealm = realm;
+        audioUploadTitle = '';
+        audioUploadDescription = '';
+        audioUploadFile = null;
+        audioUploadError = '';
+        audioUploadProgress = 0;
+        showAudioUploadModal = true;
+    }
+
+    function closeAudioUploadModal() {
+        showAudioUploadModal = false;
+        audioUploadFile = null;
+        selectedAudioRealm = null;
+    }
+
+    function handleAudioFileSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            audioUploadFile = file;
+            if (!audioUploadTitle) {
+                audioUploadTitle = file.name.replace(/\.[^/.]+$/, '');
+            }
+        }
+    }
+
+    async function uploadAudio() {
+        if (!audioUploadFile) {
+            audioUploadError = 'Please select an audio file';
+            return;
+        }
+        if (!audioUploadTitle.trim()) {
+            audioUploadError = 'Please enter a title';
+            return;
+        }
+        if (!selectedAudioRealm) {
+            audioUploadError = 'No audio realm selected';
+            return;
+        }
+
+        audioUploading = true;
+        audioUploadError = '';
+        audioUploadProgress = 0;
+
+        const formData = new FormData();
+        formData.append('file', audioUploadFile);
+        formData.append('title', audioUploadTitle.trim());
+        formData.append('description', audioUploadDescription.trim());
+        formData.append('realmId', selectedAudioRealm.id.toString());
+
+        try {
+            const xhr = new XMLHttpRequest();
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    audioUploadProgress = Math.round((e.loaded / e.total) * 100);
+                }
+            });
+            xhr.addEventListener('load', async () => {
+                if (xhr.status === 200) {
+                    const data = JSON.parse(xhr.responseText);
+                    if (data.success) {
+                        const uploadedRealmId = selectedAudioRealm.id;
+                        closeAudioUploadModal();
+                        message = 'Audio uploaded successfully!';
+                        // Clear cached audio for this realm to force fresh fetch
+                        delete realmAudio[uploadedRealmId];
+                        realmAudio = realmAudio;
+                        // Auto-expand immediately
+                        expandedAudioRealms[uploadedRealmId] = true;
+                        expandedAudioRealms = expandedAudioRealms;
+                        // Small delay to ensure backend has indexed the upload
+                        await new Promise(resolve => setTimeout(resolve, 300));
+                        // Reload realms to get updated audio count (without showing loading indicator)
+                        await loadRealms(false);
+                        // Reload audio list for this realm
+                        await loadRealmAudio(uploadedRealmId);
+                    } else {
+                        audioUploadError = data.error || 'Upload failed';
+                    }
+                } else {
+                    try {
+                        const data = JSON.parse(xhr.responseText);
+                        audioUploadError = data.error || 'Upload failed';
+                    } catch {
+                        audioUploadError = 'Upload failed';
+                    }
+                }
+                audioUploading = false;
+            });
+            xhr.addEventListener('error', () => {
+                audioUploadError = 'Network error during upload';
+                audioUploading = false;
+            });
+            xhr.open('POST', '/api/user/audio');
+            xhr.withCredentials = true;
+            xhr.send(formData);
+        } catch (e) {
+            console.error('Upload error:', e);
+            audioUploadError = 'Failed to upload audio';
+            audioUploading = false;
+        }
+
+        setTimeout(() => { message = ''; }, 3000);
+    }
+
+    // Ebook functions
+    function openEbookUploadModal(realm) {
+        selectedEbookRealm = realm;
+        ebookUploadTitle = '';
+        ebookUploadDescription = '';
+        ebookUploadFile = null;
+        ebookUploadError = '';
+        ebookUploadProgress = 0;
+        ebookCoverFile = null;
+        ebookCoverPreview = null;
+        showEbookUploadModal = true;
+    }
+
+    function closeEbookUploadModal() {
+        showEbookUploadModal = false;
+        ebookUploadFile = null;
+        ebookCoverFile = null;
+        ebookCoverPreview = null;
+        selectedEbookRealm = null;
+    }
+
+    function handleEbookFileSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            ebookUploadFile = file;
+            if (!ebookUploadTitle) {
+                ebookUploadTitle = file.name.replace(/\.[^/.]+$/, '');
+            }
+        }
+    }
+
+    function handleEbookCoverSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.match(/^image\/(jpeg|png|webp)$/)) {
+                ebookUploadError = 'Cover must be JPG, PNG, or WebP';
+                return;
+            }
+            // Validate file size (5MB max)
+            if (file.size > 5 * 1024 * 1024) {
+                ebookUploadError = 'Cover image must be under 5MB';
+                return;
+            }
+            ebookCoverFile = file;
+            ebookUploadError = '';
+            // Create preview
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                ebookCoverPreview = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    async function uploadEbook() {
+        if (!ebookUploadFile) {
+            ebookUploadError = 'Please select an EPUB file';
+            return;
+        }
+        if (!ebookCoverFile) {
+            ebookUploadError = 'Please select a cover image';
+            return;
+        }
+        if (!ebookUploadTitle.trim()) {
+            ebookUploadError = 'Please enter a title';
+            return;
+        }
+        if (!selectedEbookRealm) {
+            ebookUploadError = 'No ebook realm selected';
+            return;
+        }
+
+        ebookUploading = true;
+        ebookUploadError = '';
+        ebookUploadProgress = 0;
+
+        const formData = new FormData();
+        formData.append('file', ebookUploadFile);
+        formData.append('title', ebookUploadTitle.trim());
+        formData.append('description', ebookUploadDescription.trim());
+        formData.append('realmId', selectedEbookRealm.id.toString());
+
+        try {
+            const xhr = new XMLHttpRequest();
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    // EPUB upload is 90% of progress, cover upload is 10%
+                    ebookUploadProgress = Math.round((e.loaded / e.total) * 90);
+                }
+            });
+            xhr.addEventListener('load', async () => {
+                if (xhr.status === 200) {
+                    const data = JSON.parse(xhr.responseText);
+                    if (data.success && data.ebook?.id) {
+                        // Upload cover image
+                        try {
+                            const coverFormData = new FormData();
+                            coverFormData.append('file', ebookCoverFile);
+
+                            const coverResponse = await fetch(`/api/ebooks/${data.ebook.id}/cover`, {
+                                method: 'POST',
+                                credentials: 'include',
+                                body: coverFormData
+                            });
+
+                            ebookUploadProgress = 100;
+
+                            if (!coverResponse.ok) {
+                                console.error('Cover upload failed but ebook was uploaded');
+                            }
+                        } catch (coverErr) {
+                            console.error('Cover upload error:', coverErr);
+                        }
+
+                        closeEbookUploadModal();
+                        message = 'Ebook uploaded successfully!';
+                        // Reload realms to get updated ebook count
+                        await loadRealms(false);
+                    } else {
+                        ebookUploadError = data.error || 'Upload failed';
+                    }
+                } else if (xhr.status === 413) {
+                    ebookUploadError = 'File too large. Maximum size is 100MB.';
+                } else {
+                    try {
+                        const data = JSON.parse(xhr.responseText);
+                        ebookUploadError = data.error || 'Upload failed';
+                    } catch {
+                        ebookUploadError = `Upload failed (${xhr.status})`;
+                    }
+                }
+                ebookUploading = false;
+            });
+            xhr.addEventListener('error', () => {
+                ebookUploadError = 'Network error during upload';
+                ebookUploading = false;
+            });
+            xhr.open('POST', '/api/user/ebooks');
+            xhr.withCredentials = true;
+            xhr.send(formData);
+        } catch (e) {
+            console.error('Upload error:', e);
+            ebookUploadError = 'Failed to upload ebook';
+            ebookUploading = false;
+        }
+
+        setTimeout(() => { message = ''; }, 3000);
+    }
+
+    // Ebook list functions
+    async function toggleRealmEbooks(realmId) {
+        expandedEbookRealms[realmId] = !expandedEbookRealms[realmId];
+        expandedEbookRealms = expandedEbookRealms;
+
+        // Load ebooks if expanding and not already loaded
+        if (expandedEbookRealms[realmId] && !realmEbooks[realmId]) {
+            await loadRealmEbooks(realmId);
+        }
+    }
+
+    async function loadRealmEbooks(realmId) {
+        realmEbooksLoading[realmId] = true;
+        realmEbooksLoading = realmEbooksLoading;
+
+        try {
+            const res = await fetch(`/api/ebooks/realm/${realmId}`, { credentials: 'include' });
+            if (res.ok) {
+                const data = await res.json();
+                realmEbooks[realmId] = data.ebooks || [];
+                realmEbooks = realmEbooks;
+            }
+        } catch (e) {
+            console.error('Failed to load ebooks:', e);
+        } finally {
+            realmEbooksLoading[realmId] = false;
+            realmEbooksLoading = realmEbooksLoading;
+        }
+    }
+
+    function openEditEbookModal(ebook) {
+        editingEbook = ebook;
+        editEbookTitle = ebook.title;
+        editEbookDescription = ebook.description || '';
+        editEbookCoverFile = null;
+        editEbookCoverPreview = null;
+        editEbookCoverUploading = false;
+    }
+
+    function closeEditEbookModal() {
+        editingEbook = null;
+        editEbookTitle = '';
+        editEbookDescription = '';
+        editEbookCoverFile = null;
+        editEbookCoverPreview = null;
+        editEbookCoverUploading = false;
+    }
+
+    function handleEditEbookCoverSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            if (!file.type.match(/^image\/(jpeg|png|webp)$/)) {
+                error = 'Cover must be JPG, PNG, or WebP';
+                return;
+            }
+            if (file.size > 5 * 1024 * 1024) {
+                error = 'Cover image must be under 5MB';
+                return;
+            }
+            editEbookCoverFile = file;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                editEbookCoverPreview = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    async function uploadEditEbookCover() {
+        if (!editingEbook || !editEbookCoverFile) return;
+
+        editEbookCoverUploading = true;
+        try {
+            const formData = new FormData();
+            formData.append('file', editEbookCoverFile);
+
+            const res = await fetch(`/api/ebooks/${editingEbook.id}/cover`, {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                // Update ebook cover in realmEbooks list
+                for (const realmId in realmEbooks) {
+                    const ebookIdx = realmEbooks[realmId].findIndex(e => e.id === editingEbook.id);
+                    if (ebookIdx !== -1) {
+                        realmEbooks[realmId][ebookIdx].coverPath = data.coverPath;
+                        realmEbooks = realmEbooks;
+                        break;
+                    }
+                }
+                editingEbook.coverPath = data.coverPath;
+                editEbookCoverFile = null;
+                editEbookCoverPreview = null;
+                message = 'Cover updated successfully';
+            } else {
+                const data = await res.json();
+                error = data.error || 'Failed to update cover';
+            }
+        } catch (e) {
+            error = 'Failed to update cover';
+        } finally {
+            editEbookCoverUploading = false;
+        }
+    }
+
+    async function saveEbookEdit() {
+        if (!editingEbook) return;
+
+        try {
+            const res = await fetch(`/api/ebooks/${editingEbook.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    title: editEbookTitle,
+                    description: editEbookDescription
+                })
+            });
+
+            if (res.ok) {
+                // Update ebook in realmEbooks list
+                for (const realmId in realmEbooks) {
+                    const ebookIdx = realmEbooks[realmId].findIndex(e => e.id === editingEbook.id);
+                    if (ebookIdx !== -1) {
+                        realmEbooks[realmId][ebookIdx] = {
+                            ...realmEbooks[realmId][ebookIdx],
+                            title: editEbookTitle,
+                            description: editEbookDescription
+                        };
+                        realmEbooks = realmEbooks;
+                        break;
+                    }
+                }
+                message = 'Ebook updated successfully';
+                closeEditEbookModal();
+            } else {
+                const data = await res.json();
+                error = data.error || 'Failed to update ebook';
+            }
+        } catch (e) {
+            console.error('Failed to update ebook:', e);
+            error = 'Failed to update ebook';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteEbook(ebookId) {
+        if (!confirm('Are you sure you want to delete this ebook?')) return;
+
+        try {
+            const res = await fetch(`/api/ebooks/${ebookId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (res.ok) {
+                // Remove from realmEbooks
+                for (const realmId in realmEbooks) {
+                    realmEbooks[realmId] = realmEbooks[realmId].filter(e => e.id !== ebookId);
+                }
+                realmEbooks = realmEbooks;
+                message = 'Ebook deleted successfully';
+                // Reload realms to update count
+                await loadRealms(false);
+            } else {
+                const data = await res.json();
+                error = data.error || 'Failed to delete ebook';
+            }
+        } catch (e) {
+            console.error('Failed to delete ebook:', e);
+            error = 'Failed to delete ebook';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function toggleRealmAudio(realmId) {
+        expandedAudioRealms[realmId] = !expandedAudioRealms[realmId];
+        expandedAudioRealms = expandedAudioRealms;
+
+        // Load audio if expanding and not already loaded
+        if (expandedAudioRealms[realmId] && !realmAudio[realmId]) {
+            await loadRealmAudio(realmId);
+        }
+    }
+
+    async function loadRealmAudio(realmId) {
+        realmAudioLoading[realmId] = true;
+        realmAudioLoading = realmAudioLoading;
+
+        try {
+            const res = await fetch(`/api/audio/realm/${realmId}`, { credentials: 'include' });
+            if (res.ok) {
+                const data = await res.json();
+                realmAudio[realmId] = data.audio || [];
+                realmAudio = realmAudio;
+            }
+        } catch (e) {
+            console.error('Failed to load realm audio:', e);
+        } finally {
+            realmAudioLoading[realmId] = false;
+            realmAudioLoading = realmAudioLoading;
+        }
+    }
+
+    function openEditAudioModal(audio) {
+        editingAudio = audio;
+        editAudioTitle = audio.title;
+        editAudioDescription = audio.description || '';
+    }
+
+    function closeEditAudioModal() {
+        editingAudio = null;
+    }
+
+    async function saveAudioEdit() {
+        if (!editAudioTitle.trim()) return;
+
+        try {
+            const res = await fetch(`/api/audio/${editingAudio.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    title: editAudioTitle.trim(),
+                    description: editAudioDescription.trim()
+                })
+            });
+
+            if (res.ok) {
+                // Update in realm audio if present
+                for (const realmId in realmAudio) {
+                    const audioIdx = realmAudio[realmId].findIndex(a => a.id === editingAudio.id);
+                    if (audioIdx !== -1) {
+                        realmAudio[realmId][audioIdx] = {
+                            ...realmAudio[realmId][audioIdx],
+                            title: editAudioTitle.trim(),
+                            description: editAudioDescription.trim()
+                        };
+                    }
+                }
+                realmAudio = realmAudio;
+                closeEditAudioModal();
+                message = 'Audio updated';
+            } else {
+                error = 'Failed to update audio';
+            }
+        } catch (e) {
+            console.error('Failed to update audio:', e);
+            error = 'Error updating audio';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteAudio(audioId) {
+        if (!confirm('Are you sure you want to delete this audio?')) return;
+
+        try {
+            const res = await fetch(`/api/audio/${audioId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (res.ok) {
+                // Remove from realm audio if present
+                for (const realmId in realmAudio) {
+                    realmAudio[realmId] = realmAudio[realmId].filter(a => a.id !== audioId);
+                }
+                realmAudio = realmAudio;
+                message = 'Audio deleted';
+                // Reload realms to update audio count
+                await loadRealms();
+            } else {
+                error = 'Failed to delete audio';
+            }
+        } catch (e) {
+            console.error('Failed to delete audio:', e);
+            error = 'Error deleting audio';
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    function formatAudioDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function openAudioThumbnailModal(audioId) {
+        audioThumbnailId = audioId;
+        audioThumbnailFile = null;
+        showAudioThumbnailModal = true;
+    }
+
+    function closeAudioThumbnailModal() {
+        showAudioThumbnailModal = false;
+        audioThumbnailId = null;
+        audioThumbnailFile = null;
+    }
+
+    function handleAudioThumbnailSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            audioThumbnailFile = file;
+        }
+    }
+
+    async function uploadAudioThumbnail() {
+        if (!audioThumbnailFile || !audioThumbnailId) return;
+
+        audioThumbnailUploading = true;
+
+        const formData = new FormData();
+        formData.append('file', audioThumbnailFile);
+
+        try {
+            const response = await fetch(`/api/audio/${audioThumbnailId}/thumbnail`, {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Update audio in realm audio list
+                for (const realmId in realmAudio) {
+                    const audioIdx = realmAudio[realmId].findIndex(a => a.id === audioThumbnailId);
+                    if (audioIdx !== -1) {
+                        realmAudio[realmId][audioIdx].thumbnailPath = data.thumbnailPath;
+                    }
+                }
+                realmAudio = realmAudio;
+                message = 'Thumbnail uploaded successfully';
+                closeAudioThumbnailModal();
+            } else {
+                error = data.error || 'Failed to upload thumbnail';
+            }
+        } catch (e) {
+            error = 'Error uploading thumbnail';
+            console.error(e);
+        } finally {
+            audioThumbnailUploading = false;
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    async function deleteAudioThumbnail(audioId) {
+        if (!confirm('Delete the thumbnail?')) return;
+
+        try {
+            const response = await fetch(`/api/audio/${audioId}/thumbnail`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Update audio in realm audio list
+                for (const realmId in realmAudio) {
+                    const audioIdx = realmAudio[realmId].findIndex(a => a.id === audioId);
+                    if (audioIdx !== -1) {
+                        realmAudio[realmId][audioIdx].thumbnailPath = '';
+                    }
+                }
+                realmAudio = realmAudio;
+                message = 'Thumbnail deleted';
+            } else {
+                error = data.error || 'Failed to delete thumbnail';
+            }
+        } catch (e) {
+            error = 'Error deleting thumbnail';
+            console.error(e);
+        }
+
+        setTimeout(() => { message = ''; error = ''; }, 3000);
+    }
+
+    // Import audio playlist store for adding tracks
+    import { audioPlaylist } from '$lib/stores/audioPlaylist';
+
+    function addToPlaylist(audio, realm) {
+        audioPlaylist.addTrack({
+            id: audio.id,
+            title: audio.title,
+            username: $auth.user.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm.name
+        });
+        message = `Added "${audio.title}" to playlist`;
+        setTimeout(() => { message = ''; }, 2000);
+    }
+
+    function playNow(audio, realm) {
+        audioPlaylist.playTrack({
+            id: audio.id,
+            title: audio.title,
+            username: $auth.user.username,
+            filePath: audio.filePath,
+            thumbnailPath: audio.thumbnailPath || '',
+            durationSeconds: audio.durationSeconds,
+            realmName: realm.name
+        });
     }
-}
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title} - My Realms</title>
+</svelte:head>
+
 <style>
     .realms-header {
         display: flex;
@@ -254,11 +1805,40 @@ function formatBitrate(bitrate) {
     
     .realm-header {
         display: flex;
-        justify-content: space-between;
         align-items: start;
         margin-bottom: 1.5rem;
+        gap: 0.75rem;
     }
-    
+
+    .realm-card.collapsed .realm-header {
+        margin-bottom: 0;
+    }
+
+    .collapse-toggle {
+        background: transparent;
+        border: none;
+        color: var(--gray);
+        cursor: pointer;
+        padding: 0.25rem;
+        border-radius: 4px;
+        transition: all 0.2s;
+        flex-shrink: 0;
+        margin-top: 0.25rem;
+    }
+
+    .collapse-toggle:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--white);
+    }
+
+    .collapse-toggle svg {
+        transition: transform 0.2s;
+    }
+
+    .collapse-toggle svg.rotated {
+        transform: rotate(90deg);
+    }
+
     .realm-title h3 {
         margin: 0 0 0.5rem 0;
     }
@@ -271,6 +1851,8 @@ function formatBitrate(bitrate) {
     .realm-actions {
         display: flex;
         gap: 0.5rem;
+        margin-left: auto;
+        flex-shrink: 0;
     }
     
     .stream-info {
@@ -367,6 +1949,763 @@ function formatBitrate(bitrate) {
         margin-bottom: 1rem;
         opacity: 0.5;
     }
+
+    /* Videos section */
+    .videos-section {
+        margin-top: 3rem;
+        padding-top: 2rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .video-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .video-item {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 1rem;
+        display: flex;
+        gap: 1rem;
+    }
+
+    .video-thumbnail {
+        width: 160px;
+        height: 90px;
+        background: #222;
+        border-radius: 6px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 2rem;
+        opacity: 0.3;
+    }
+
+    .video-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .video-content h4 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+    }
+
+    .video-content h4 a {
+        color: white;
+        text-decoration: none;
+    }
+
+    .video-content h4 a:hover {
+        color: var(--primary);
+    }
+
+    .video-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .status-badge {
+        display: inline-block;
+        padding: 0.15rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .status-ready { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+    .status-processing { background: rgba(234, 179, 8, 0.2); color: #eab308; }
+    .status-failed { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+
+    .visibility-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.15rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .video-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+        align-items: flex-start;
+    }
+
+    .video-actions .btn {
+        padding: 0.4rem 0.75rem;
+        font-size: 0.85rem;
+    }
+
+    .file-input-wrapper {
+        border: 2px dashed var(--border);
+        border-radius: 8px;
+        padding: 2rem;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.2s;
+    }
+
+    .file-input-wrapper:hover {
+        border-color: var(--primary);
+    }
+
+    .file-input-wrapper input {
+        display: none;
+    }
+
+    .file-input-wrapper .file-name {
+        margin-top: 0.5rem;
+        color: var(--primary);
+        font-size: 0.9rem;
+    }
+
+    .progress-bar {
+        height: 8px;
+        background: #333;
+        border-radius: 4px;
+        overflow: hidden;
+        margin: 1rem 0;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: var(--primary);
+        transition: width 0.3s;
+    }
+
+    .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+    }
+
+    .checkbox-label input {
+        width: 18px;
+        height: 18px;
+    }
+
+    /* Realm type selection */
+    .realm-type-option {
+        flex: 1;
+        cursor: pointer;
+    }
+
+    .realm-type-option input {
+        display: none;
+    }
+
+    .realm-type-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.05);
+        border: 2px solid var(--border);
+        border-radius: 8px;
+        transition: all 0.2s;
+    }
+
+    .realm-type-option.selected .realm-type-content,
+    .realm-type-option:hover .realm-type-content {
+        border-color: var(--primary);
+        background: rgba(86, 29, 94, 0.2);
+    }
+
+    .realm-type-icon {
+        font-size: 2rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .realm-type-label {
+        font-weight: 600;
+    }
+
+    .realm-type-desc {
+        font-size: 0.8rem;
+        color: var(--gray);
+        margin-top: 0.25rem;
+    }
+
+    /* Video realm card styles */
+    .video-realm-info {
+        background: rgba(139, 92, 246, 0.1);
+        border: 1px solid rgba(139, 92, 246, 0.3);
+        padding: 1rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+    }
+
+    .video-realm-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .video-count-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: rgba(139, 92, 246, 0.2);
+        border-radius: 20px;
+        font-size: 0.9rem;
+        color: #8b5cf6;
+    }
+
+    .realm-type-badge {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        margin-left: 0.75rem;
+    }
+
+    .realm-type-badge.stream {
+        background: rgba(40, 167, 69, 0.2);
+        color: #28a745;
+    }
+
+    .realm-type-badge.video {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+    }
+
+    .realm-type-badge.audio {
+        background: rgba(236, 72, 153, 0.2);
+        color: #ec4899;
+    }
+
+    .realm-type-badge.ebook {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+    }
+
+    .realm-type-badge.watch {
+        background: rgba(251, 146, 60, 0.2);
+        color: #fb923c;
+    }
+
+    .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.7rem;
+        font-weight: 600;
+        margin-left: 0.5rem;
+    }
+
+    .status-badge.live {
+        background: rgba(40, 167, 69, 0.2);
+        color: #28a745;
+    }
+
+    .status-badge.live .status-dot {
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .status-badge.offline {
+        background: rgba(108, 117, 125, 0.2);
+        color: #6c757d;
+    }
+
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    /* Expandable video list styles */
+    .videos-expand-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        background: rgba(139, 92, 246, 0.1);
+        border: 1px solid rgba(139, 92, 246, 0.3);
+        border-radius: 4px;
+        cursor: pointer;
+        margin-top: 1rem;
+        transition: background 0.2s;
+    }
+
+    .videos-expand-toggle:hover {
+        background: rgba(139, 92, 246, 0.2);
+    }
+
+    .videos-expand-toggle .toggle-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .videos-expand-toggle .toggle-arrow {
+        transition: transform 0.2s;
+        font-size: 0.8rem;
+    }
+
+    .videos-expand-toggle .toggle-arrow.expanded {
+        transform: rotate(90deg);
+    }
+
+    .realm-videos-list {
+        margin-top: 0.5rem;
+        border: 1px solid rgba(139, 92, 246, 0.2);
+        border-radius: 4px;
+        overflow: hidden;
+        max-height: 400px;
+        overflow-y: auto;
+    }
+
+    .realm-video-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        transition: background 0.15s;
+    }
+
+    .realm-video-item:last-child {
+        border-bottom: none;
+    }
+
+    .realm-video-item:hover {
+        background: rgba(139, 92, 246, 0.1);
+    }
+
+    .realm-video-thumb {
+        width: 100px;
+        height: 56px;
+        background: #222;
+        border-radius: 4px;
+        flex-shrink: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+
+    .realm-video-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .realm-video-thumb .placeholder {
+        font-size: 1.5rem;
+        opacity: 0.3;
+    }
+
+    .realm-video-thumb .duration {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        font-size: 0.65rem;
+        padding: 1px 4px;
+        border-radius: 2px;
+    }
+
+    .realm-video-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .realm-video-info h5 {
+        margin: 0 0 0.25rem 0;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .realm-video-info h5 a {
+        color: white;
+        text-decoration: none;
+    }
+
+    .realm-video-info h5 a:hover {
+        color: #8b5cf6;
+    }
+
+    .realm-video-info .meta {
+        display: flex;
+        gap: 0.75rem;
+        font-size: 0.75rem;
+        color: var(--gray);
+    }
+
+    .realm-video-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    .realm-video-actions .btn {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+
+    .no-videos-message {
+        padding: 2rem;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    /* Offline image section */
+    .offline-image-section {
+        margin: 1rem 0;
+        padding: 1rem;
+        background: rgba(255, 193, 7, 0.1);
+        border: 1px solid rgba(255, 193, 7, 0.3);
+        border-radius: 4px;
+    }
+
+    .offline-image-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+    }
+
+    .offline-image-header h4 {
+        margin: 0;
+        color: #ffc107;
+        font-size: 0.95rem;
+    }
+
+    .offline-image-preview {
+        width: 100%;
+        max-width: 320px;
+        aspect-ratio: 16/9;
+        background: #222;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-bottom: 0.75rem;
+    }
+
+    .offline-image-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .offline-image-preview .placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    .offline-image-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    /* Audio realm styles */
+    .audio-realm-info {
+        background: rgba(236, 72, 153, 0.1);
+        border: 1px solid rgba(236, 72, 153, 0.3);
+        padding: 1rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+    }
+
+    .audio-expand-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        background: rgba(236, 72, 153, 0.1);
+        border: 1px solid rgba(236, 72, 153, 0.3);
+        border-radius: 4px;
+        cursor: pointer;
+        margin-top: 1rem;
+        transition: background 0.2s;
+    }
+
+    .audio-expand-toggle:hover {
+        background: rgba(236, 72, 153, 0.2);
+    }
+
+    .audio-expand-toggle .toggle-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .audio-expand-toggle .toggle-arrow {
+        transition: transform 0.2s;
+        font-size: 0.8rem;
+    }
+
+    .audio-expand-toggle .toggle-arrow.expanded {
+        transform: rotate(90deg);
+    }
+
+    .realm-audio-list {
+        margin-top: 0.5rem;
+        border: 1px solid rgba(236, 72, 153, 0.2);
+        border-radius: 4px;
+        overflow: hidden;
+        max-height: 400px;
+        overflow-y: auto;
+    }
+
+    .realm-audio-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        transition: background 0.15s;
+    }
+
+    .realm-audio-item:last-child {
+        border-bottom: none;
+    }
+
+    .realm-audio-item:hover {
+        background: rgba(236, 72, 153, 0.1);
+    }
+
+    .realm-audio-thumb {
+        width: 56px;
+        height: 56px;
+        background: #222;
+        border-radius: 4px;
+        flex-shrink: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+
+    .realm-audio-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .realm-audio-thumb .placeholder {
+        font-size: 1.5rem;
+        opacity: 0.5;
+    }
+
+    .realm-audio-thumb .duration {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        font-size: 0.6rem;
+        padding: 1px 3px;
+        border-radius: 2px;
+    }
+
+    .realm-audio-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .realm-audio-info h5 {
+        margin: 0 0 0.25rem 0;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: white;
+    }
+
+    .realm-audio-info .meta {
+        display: flex;
+        gap: 0.75rem;
+        font-size: 0.75rem;
+        color: var(--gray);
+    }
+
+    .realm-audio-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+    }
+
+    .realm-audio-actions .btn {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+
+    .no-audio-message {
+        padding: 2rem;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    /* Ebook realm styles */
+    .ebook-realm-info {
+        background: rgba(59, 130, 246, 0.1);
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        padding: 1rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+    }
+
+    .ebook-expand-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        background: rgba(59, 130, 246, 0.1);
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        border-radius: 4px;
+        cursor: pointer;
+        margin-top: 1rem;
+        transition: background 0.2s;
+    }
+
+    .ebook-expand-toggle:hover {
+        background: rgba(59, 130, 246, 0.2);
+    }
+
+    .ebook-expand-toggle .toggle-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .ebook-expand-toggle .toggle-arrow {
+        transition: transform 0.2s;
+        font-size: 0.8rem;
+    }
+
+    .ebook-expand-toggle .toggle-arrow.expanded {
+        transform: rotate(90deg);
+    }
+
+    .realm-ebooks-list {
+        margin-top: 0.5rem;
+        border: 1px solid rgba(59, 130, 246, 0.2);
+        border-radius: 4px;
+        overflow: hidden;
+        max-height: 400px;
+        overflow-y: auto;
+    }
+
+    .realm-ebook-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        transition: background 0.15s;
+    }
+
+    .realm-ebook-item:last-child {
+        border-bottom: none;
+    }
+
+    .realm-ebook-item:hover {
+        background: rgba(59, 130, 246, 0.1);
+    }
+
+    .realm-ebook-thumb {
+        width: 40px;
+        height: 60px;
+        background: #222;
+        border-radius: 4px;
+        flex-shrink: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .realm-ebook-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .realm-ebook-thumb .placeholder {
+        font-size: 1.25rem;
+        opacity: 0.5;
+    }
+
+    .realm-ebook-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .realm-ebook-info h5 {
+        margin: 0 0 0.25rem 0;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: white;
+    }
+
+    .realm-ebook-info .meta {
+        display: flex;
+        gap: 0.75rem;
+        font-size: 0.75rem;
+        color: var(--gray);
+    }
+
+    .realm-ebook-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+    }
+
+    .realm-ebook-actions .btn {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+
+    .no-ebooks-message {
+        padding: 2rem;
+        text-align: center;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
 </style>
 
 <div class="container">
@@ -407,14 +2746,135 @@ function formatBitrate(bitrate) {
     {:else}
         <div class="realms-grid">
             {#each realms as realm}
-                <div class="realm-card">
+                <div class="realm-card" class:collapsed={collapsedRealms[realm.id]}>
                     <div class="realm-header">
+                        <button
+                            class="collapse-toggle"
+                            on:click={() => collapsedRealms[realm.id] = !collapsedRealms[realm.id]}
+                            title={collapsedRealms[realm.id] ? 'Expand' : 'Collapse'}
+                        >
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class:rotated={!collapsedRealms[realm.id]}>
+                                <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                            </svg>
+                        </button>
                         <div class="realm-title">
-                            <h3>{realm.name}</h3>
-                            <p class="realm-url">/{realm.name}/live</p>
+                            {#if editingNameId === realm.id}
+                                <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+                                    <input
+                                        type="text"
+                                        bind:value={editNameValue}
+                                        placeholder="realm-name"
+                                        maxlength="30"
+                                        style="padding: 0.25rem 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white); font-size: 1.2rem; font-weight: 600; width: 180px;"
+                                    />
+                                    <button class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.85rem;" on:click={() => saveName(realm)}>Save</button>
+                                    <button class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.85rem;" on:click={cancelEditName}>Cancel</button>
+                                    <span class="realm-type-badge {realm.type || 'stream'}">
+                                        {(realm.type || 'stream') === 'stream' ? 'Stream' : realm.type === 'video' ? 'Video' : realm.type === 'audio' ? 'Audio' : realm.type === 'watch' ? 'Watch' : 'Ebook'}
+                                    </span>
+                                </div>
+                                <p style="margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--gray);">Lowercase letters, numbers, and hyphens only (3-30 chars)</p>
+                            {:else}
+                                <h3>
+                                    <span style="cursor: pointer; color: {realm.titleColor || '#ffffff'};" on:click={() => startEditName(realm)} title="Click to rename">{realm.name}</span>
+                                    <button class="btn" style="padding: 0.15rem 0.5rem; font-size: 0.7rem; margin-left: 0.5rem;" on:click={() => startEditName(realm)}>Rename</button>
+                                    <span class="realm-type-badge {realm.type || 'stream'}">
+                                        {(realm.type || 'stream') === 'stream' ? 'Stream' : realm.type === 'video' ? 'Video' : realm.type === 'audio' ? 'Audio' : realm.type === 'watch' ? 'Watch' : 'Ebook'}
+                                    </span>
+                                    {#if (realm.type || 'stream') === 'stream'}
+                                        <span class="status-badge" class:live={realm.isLive} class:offline={!realm.isLive}>
+                                            <span class="status-dot">●</span> {realm.isLive ? 'Live' : 'Offline'}
+                                        </span>
+                                    {/if}
+                                </h3>
+                            {/if}
+                            {#if (realm.type || 'stream') === 'stream'}
+                                <a href="/{realm.name}/live" class="realm-url" style="text-decoration: none; color: var(--primary);" data-sveltekit-preload-data="off">
+                                    /{realm.name}/live
+                                </a>
+                            {:else if realm.type === 'video'}
+                                <a href="/video/realm/{realm.id}" class="realm-url" style="text-decoration: none; color: #8b5cf6;">
+                                    /video/realm/{realm.id}
+                                </a>
+                            {:else if realm.type === 'audio'}
+                                <a href="/audio/realm/{realm.id}" class="realm-url" style="text-decoration: none; color: #ec4899;">
+                                    /audio/realm/{realm.id}
+                                </a>
+                            {:else if realm.type === 'ebook'}
+                                <a href="/ebooks/realm/{realm.id}" class="realm-url" style="text-decoration: none; color: #3b82f6;">
+                                    /ebooks/realm/{realm.id}
+                                </a>
+                            {:else if realm.type === 'watch'}
+                                <a href="/{realm.name}/watch" class="realm-url" style="text-decoration: none; color: #fb923c;">
+                                    /{realm.name}/watch
+                                </a>
+                            {/if}
                         </div>
                         <div class="realm-actions">
-                            <button 
+                            {#if (realm.type || 'stream') === 'stream'}
+                                <a
+                                    href="/{realm.name}/live"
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem;"
+                                    data-sveltekit-preload-data="off"
+                                >
+                                    View Stream
+                                </a>
+                            {:else if realm.type === 'video'}
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #8b5cf6;"
+                                    on:click={() => openVideoUploadModal(realm)}
+                                >
+                                    Upload Video
+                                </button>
+                                <a
+                                    href="/video/realm/{realm.id}"
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem;"
+                                >
+                                    View Realm
+                                </a>
+                            {:else if realm.type === 'audio'}
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #ec4899;"
+                                    on:click={() => openAudioUploadModal(realm)}
+                                >
+                                    Upload Audio
+                                </button>
+                                <a
+                                    href="/audio/realm/{realm.id}"
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem;"
+                                >
+                                    View Realm
+                                </a>
+                            {:else if realm.type === 'ebook'}
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #3b82f6;"
+                                    on:click={() => openEbookUploadModal(realm)}
+                                >
+                                    Upload Ebook
+                                </button>
+                                <a
+                                    href="/ebooks/realm/{realm.id}"
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem;"
+                                >
+                                    View Library
+                                </a>
+                            {:else if realm.type === 'watch'}
+                                <a
+                                    href="/{realm.name}/watch"
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #fb923c;"
+                                >
+                                    Open Room
+                                </a>
+                            {/if}
+                            <button
                                 class="btn btn-danger"
                                 style="padding: 0.5rem 1rem;"
                                 on:click={() => deleteRealm(realm)}
@@ -423,16 +2883,64 @@ function formatBitrate(bitrate) {
                             </button>
                         </div>
                     </div>
-                    
-                    <div class="status-row">
-                        <div class="status-indicator" class:active={realm.isLive} class:inactive={!realm.isLive}>
-                            {#if realm.isLive}
-                                <span>●</span> Live
-                            {:else}
-                                <span>●</span> Offline
-                            {/if}
+
+                    {#if !collapsedRealms[realm.id]}
+                    <!-- Title Color Section -->
+                    <div class="title-color-section" style="margin-bottom: 1.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <h4 style="margin: 0 0 0.25rem 0;">Title Color</h4>
+                                <p style="color: var(--gray); font-size: 0.85rem; margin: 0;">
+                                    Customize the color of your realm title
+                                </p>
+                            </div>
+                            <div style="display: flex; align-items: center; gap: 0.75rem;">
+                                <span style="display: inline-block; width: 24px; height: 24px; background: {realm.titleColor || '#ffffff'}; border-radius: 4px; border: 1px solid var(--border);"></span>
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem;"
+                                    on:click={() => openTitleColorEditor(realm)}
+                                >
+                                    Change Color
+                                </button>
+                            </div>
                         </div>
-                        
+                    </div>
+
+                    <!-- Description Section -->
+                    <div style="margin-bottom: 1.5rem;">
+                        {#if editingDescriptionId === realm.id}
+                            <div style="padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Description</label>
+                                <textarea
+                                    bind:value={editDescriptionValue}
+                                    placeholder={(realm.type || 'stream') === 'stream' ? "Tell viewers what your stream is about..." : "Describe what videos this realm contains..."}
+                                    rows="3"
+                                    maxlength="500"
+                                    style="width: 100%; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white); resize: vertical;"
+                                ></textarea>
+                                <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+                                    <button class="btn" on:click={() => saveDescription(realm)}>Save</button>
+                                    <button class="btn" on:click={cancelEditDescription}>Cancel</button>
+                                </div>
+                            </div>
+                        {:else}
+                            <div style="padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
+                                    <span style="font-weight: 600;">Description</span>
+                                    <button class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.85rem;" on:click={() => startEditDescription(realm)}>Edit</button>
+                                </div>
+                                {#if realm.description}
+                                    <p style="margin: 0; color: var(--gray); white-space: pre-wrap;">{realm.description}</p>
+                                {:else}
+                                    <p style="margin: 0; color: var(--gray); font-style: italic;">No description yet. Click Edit to add one.</p>
+                                {/if}
+                            </div>
+                        {/if}
+                    </div>
+
+                    <!-- Stream Realm specific content -->
+                    {#if (realm.type || 'stream') === 'stream'}
                         {#if realm.isLive && realm.stats}
                             <div class="stats-mini">
                                 <div class="stat-mini">
@@ -451,53 +2959,553 @@ function formatBitrate(bitrate) {
                                 {/if}
                             </div>
                         {/if}
-                    </div>
-                    
-                    <div class="stream-info">
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">Stream Key:</span>
-                            <span class="stream-key">{realm.streamKey}</span>
-                            <button on:click={() => copyToClipboard(realm.streamKey)}>Copy</button>
+
+                        <div class="stream-info">
+                            <div class="stream-info-row">
+                                <span class="stream-info-label">Stream Key:</span>
+                                <span class="stream-key">{realm.streamKey}</span>
+                                <button on:click={() => copyToClipboard(realm.streamKey)}>Copy</button>
+                            </div>
+                            <div class="stream-info-row">
+                                <span class="stream-info-label">RTMP URL:</span>
+                                <span class="stream-key">rtmp://localhost:1935/app/{realm.streamKey}</span>
+                                <button on:click={() => copyToClipboard(`rtmp://localhost:1935/app/${realm.streamKey}`)}>Copy</button>
+                            </div>
+                            <div class="stream-info-row">
+                                <span class="stream-info-label">SRT URL:</span>
+                                <span class="stream-key">srt://localhost:9999?streamid={encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}</span>
+                                <button on:click={() => copyToClipboard(`srt://localhost:9999?streamid=${encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}`)}>Copy</button>
+                            </div>
                         </div>
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">RTMP URL:</span>
-                            <span class="stream-key">rtmp://localhost:1935/app/{realm.streamKey}</span>
-                            <button on:click={() => copyToClipboard(`rtmp://localhost:1935/app/${realm.streamKey}`)}>Copy</button>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                            <label style="display: flex; align-items: center; cursor: pointer; justify-content: space-between;">
+                                <span style="font-weight: 600;">
+                                    Chat Enabled
+                                    <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                        {realm.chatEnabled ? '(Viewers can chat)' : '(Chat disabled)'}
+                                    </span>
+                                </span>
+                                <input
+                                    type="checkbox"
+                                    checked={realm.chatEnabled}
+                                    on:change={() => toggleChatEnabled(realm)}
+                                    style="width: 20px; height: 20px; cursor: pointer;"
+                                />
+                            </label>
                         </div>
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">SRT URL:</span>
-                            <span class="stream-key">srt://localhost:9999?streamid={encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}</span>
-                            <button on:click={() => copyToClipboard(`srt://localhost:9999?streamid=${encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}`)}>Copy</button>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                            <label style="display: flex; align-items: center; cursor: pointer; justify-content: space-between; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                                <span style="font-weight: 600;">
+                                    Allow Guest Chat
+                                    <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                        {realm.chatGuestsAllowed ? '(Guests can send messages)' : '(Only authenticated users)'}
+                                    </span>
+                                </span>
+                                <input
+                                    type="checkbox"
+                                    checked={realm.chatGuestsAllowed}
+                                    on:change={() => toggleChatGuestsAllowed(realm)}
+                                    disabled={!realm.chatEnabled}
+                                    style="width: 20px; height: 20px; cursor: {realm.chatEnabled ? 'pointer' : 'not-allowed'};"
+                                />
+                            </label>
                         </div>
-                    </div>
-                    
-                    <button 
-                        class="btn btn-danger"
-                        style="width: 100%;"
-                        on:click={() => regenerateKey(realm)}
-                    >
-                        Regenerate Stream Key
-                    </button>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+                                Slow Mode (seconds)
+                                <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                    Minimum time between messages (0 = disabled)
+                                </span>
+                            </label>
+                            <input
+                                type="number"
+                                value={realm.chatSlowModeSeconds || 0}
+                                min="0"
+                                max="300"
+                                on:change={(e) => updateChatSettings(realm, { chatSlowModeSeconds: parseInt(e.target.value) })}
+                                disabled={!realm.chatEnabled}
+                                style="width: 100%; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                            />
+                        </div>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+                                Message Retention (hours)
+                                <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                    How long to keep messages before auto-deletion
+                                </span>
+                            </label>
+                            <input
+                                type="number"
+                                value={realm.chatRetentionHours || 24}
+                                min="1"
+                                max="168"
+                                on:change={(e) => updateChatSettings(realm, { chatRetentionHours: parseInt(e.target.value) })}
+                                disabled={!realm.chatEnabled}
+                                style="width: 100%; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                            />
+                        </div>
+
+                        <!-- Offline Image Section -->
+                        <div class="offline-image-section">
+                            <div class="offline-image-header">
+                                <h4>Offline Image</h4>
+                            </div>
+                            <p style="color: var(--gray); font-size: 0.85rem; margin: 0 0 0.75rem 0;">
+                                This image will be displayed to viewers when your stream is offline.
+                            </p>
+                            <div class="offline-image-preview">
+                                {#if realm.offlineImageUrl}
+                                    <img src={realm.offlineImageUrl} alt="Offline image" />
+                                {:else}
+                                    <div class="placeholder">No offline image set</div>
+                                {/if}
+                            </div>
+                            <div class="offline-image-actions">
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #ffc107; color: #000;"
+                                    on:click={() => openOfflineImageModal(realm.id)}
+                                    disabled={offlineImageUploading[realm.id]}
+                                >
+                                    {realm.offlineImageUrl ? 'Change Image' : 'Upload Image'}
+                                </button>
+                                {#if realm.offlineImageUrl}
+                                    <button
+                                        class="btn btn-danger"
+                                        style="padding: 0.5rem 1rem;"
+                                        on:click={() => deleteOfflineImage(realm.id)}
+                                        disabled={offlineImageUploading[realm.id]}
+                                    >
+                                        Remove
+                                    </button>
+                                {/if}
+                            </div>
+                        </div>
+
+                        <button
+                            class="btn btn-danger"
+                            style="width: 100%;"
+                            on:click={() => regenerateKey(realm)}
+                        >
+                            Regenerate Stream Key
+                        </button>
+
+                        <!-- Restream Section (only shown for users with restreamer role) -->
+                        {#if $isRestreamer}
+                            <div class="restream-section" style="margin-top: 1.5rem; padding: 1rem; background: rgba(23, 162, 184, 0.1); border: 1px solid rgba(23, 162, 184, 0.3); border-radius: 4px;">
+                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                                    <h4 style="margin: 0; color: #17a2b8;">Restream Destinations</h4>
+                                    <button
+                                        class="btn"
+                                        style="padding: 0.5rem 1rem; background: #17a2b8;"
+                                        on:click={() => openRestreamModal(realm.id)}
+                                    >
+                                        Manage
+                                    </button>
+                                </div>
+
+                                {#if restreamDestinations[realm.id]?.length > 0}
+                                    <div style="display: grid; gap: 0.5rem;">
+                                        {#each restreamDestinations[realm.id] as dest}
+                                            <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 4px;">
+                                                <div style="display: flex; align-items: center; gap: 0.75rem;">
+                                                    <span style="width: 10px; height: 10px; border-radius: 50%; background: {dest.isConnected ? '#28a745' : dest.enabled ? '#ffc107' : '#6c757d'};"></span>
+                                                    <span style="font-weight: 500;">{dest.name}</span>
+                                                    <span style="color: var(--gray); font-size: 0.85rem;">
+                                                        {dest.isConnected ? 'Connected' : dest.enabled ? 'Waiting' : 'Disabled'}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        {/each}
+                                    </div>
+                                {:else}
+                                    <p style="color: var(--gray); margin: 0; font-size: 0.9rem;">No restream destinations configured. Click Manage to add up to 2 destinations.</p>
+                                {/if}
+                            </div>
+                        {/if}
+                    {:else if realm.type === 'video'}
+                        <!-- Video Realm specific content -->
+                        <div class="video-realm-info">
+                            <p style="margin: 0; color: var(--gray); font-size: 0.9rem;">
+                                Upload videos to this realm and share them with your viewers.
+                            </p>
+                        </div>
+
+                        <!-- Expandable video list -->
+                        <div
+                            class="videos-expand-toggle"
+                            on:click={() => toggleRealmVideos(realm.id)}
+                            on:keypress={(e) => e.key === 'Enter' && toggleRealmVideos(realm.id)}
+                            role="button"
+                            tabindex="0"
+                        >
+                            <div class="toggle-left">
+                                <span class="toggle-arrow" class:expanded={expandedRealms[realm.id]}>▶</span>
+                                <span>🎬 {realm.videoCount || 0} {realm.videoCount === 1 ? 'video' : 'videos'}</span>
+                            </div>
+                            <span style="font-size: 0.8rem; color: var(--gray);">
+                                {expandedRealms[realm.id] ? 'Click to collapse' : 'Click to expand'}
+                            </span>
+                        </div>
+
+                        {#if expandedRealms[realm.id]}
+                            <div class="realm-videos-list">
+                                {#if realmVideosLoading[realm.id]}
+                                    <div class="no-videos-message">Loading videos...</div>
+                                {:else if !realmVideos[realm.id] || realmVideos[realm.id].length === 0}
+                                    <div class="no-videos-message">
+                                        No videos uploaded yet. Click "Upload Video" to add your first video!
+                                    </div>
+                                {:else}
+                                    {#each realmVideos[realm.id] as video}
+                                        <div class="realm-video-item">
+                                            <div class="realm-video-thumb">
+                                                {#if video.thumbnailPath}
+                                                    <img src={video.thumbnailPath} alt={video.title} />
+                                                {:else}
+                                                    <span class="placeholder">🎬</span>
+                                                {/if}
+                                                {#if video.durationSeconds}
+                                                    <span class="duration">{formatVideoDuration(video.durationSeconds)}</span>
+                                                {/if}
+                                            </div>
+                                            <div class="realm-video-info">
+                                                <h5><a href="/watch/{video.id}">{video.title}</a></h5>
+                                                <div class="meta">
+                                                    <span>{video.viewCount || 0} views</span>
+                                                    <span>{timeAgo(video.createdAt)}</span>
+                                                </div>
+                                            </div>
+                                            <div class="realm-video-actions">
+                                                <button class="btn" on:click={() => openEditVideoModal(video)}>Edit</button>
+                                                <button class="btn btn-danger" on:click={() => deleteVideo(video.id)}>Delete</button>
+                                            </div>
+                                        </div>
+                                    {/each}
+                                {/if}
+                            </div>
+                        {/if}
+                    {:else if realm.type === 'audio'}
+                        <!-- Audio Realm specific content -->
+                        <div class="audio-realm-info">
+                            <p style="margin: 0; color: var(--gray); font-size: 0.9rem;">
+                                Upload audio files to this realm and share them with your listeners.
+                            </p>
+                        </div>
+
+                        <!-- Expandable audio list -->
+                        <div
+                            class="audio-expand-toggle"
+                            on:click={() => toggleRealmAudio(realm.id)}
+                            on:keypress={(e) => e.key === 'Enter' && toggleRealmAudio(realm.id)}
+                            role="button"
+                            tabindex="0"
+                        >
+                            <div class="toggle-left">
+                                <span class="toggle-arrow" class:expanded={expandedAudioRealms[realm.id]}>▶</span>
+                                <span>🎵 {realm.audioCount || 0} {realm.audioCount === 1 ? 'track' : 'tracks'}</span>
+                            </div>
+                            <span style="font-size: 0.8rem; color: var(--gray);">
+                                {expandedAudioRealms[realm.id] ? 'Click to collapse' : 'Click to expand'}
+                            </span>
+                        </div>
+
+                        {#if expandedAudioRealms[realm.id]}
+                            <div class="realm-audio-list">
+                                {#if realmAudioLoading[realm.id]}
+                                    <div class="no-audio-message">Loading audio files...</div>
+                                {:else if !realmAudio[realm.id] || realmAudio[realm.id].length === 0}
+                                    <div class="no-audio-message">
+                                        No audio files uploaded yet. Click "Upload Audio" to add your first track!
+                                    </div>
+                                {:else}
+                                    {#each realmAudio[realm.id] as audio}
+                                        <div class="realm-audio-item">
+                                            <div class="realm-audio-thumb">
+                                                {#if audio.thumbnailPath}
+                                                    <img src={audio.thumbnailPath} alt={audio.title} />
+                                                {:else}
+                                                    <span class="placeholder">🎵</span>
+                                                {/if}
+                                                {#if audio.durationSeconds}
+                                                    <span class="duration">{formatAudioDuration(audio.durationSeconds)}</span>
+                                                {/if}
+                                            </div>
+                                            <div class="realm-audio-info">
+                                                <h5>{audio.title}</h5>
+                                                <div class="meta">
+                                                    <span>{audio.playCount || 0} plays</span>
+                                                    <span>{audio.format || 'audio'}</span>
+                                                    <span>{timeAgo(audio.createdAt)}</span>
+                                                </div>
+                                            </div>
+                                            <div class="realm-audio-actions">
+                                                <button class="btn" style="background: #ec4899;" on:click={() => playNow(audio, realm)} title="Play Now">▶</button>
+                                                <button class="btn" on:click={() => addToPlaylist(audio, realm)} title="Add to playlist">+</button>
+                                                <button class="btn" on:click={() => openAudioThumbnailModal(audio.id)} title="Set thumbnail">🖼</button>
+                                                <button class="btn" on:click={() => openEditAudioModal(audio)}>Edit</button>
+                                                <button class="btn btn-danger" on:click={() => deleteAudio(audio.id)}>Delete</button>
+                                            </div>
+                                        </div>
+                                    {/each}
+                                {/if}
+                            </div>
+                        {/if}
+                    {:else if realm.type === 'ebook'}
+                        <!-- Ebook Realm specific content -->
+                        <div class="ebook-realm-info">
+                            <p style="margin: 0; color: var(--gray); font-size: 0.9rem;">
+                                Upload EPUB files to this realm and share them with your readers.
+                            </p>
+                        </div>
+
+                        <!-- Expandable ebook list -->
+                        <div
+                            class="ebook-expand-toggle"
+                            on:click={() => toggleRealmEbooks(realm.id)}
+                            on:keypress={(e) => e.key === 'Enter' && toggleRealmEbooks(realm.id)}
+                            role="button"
+                            tabindex="0"
+                        >
+                            <div class="toggle-left">
+                                <span class="toggle-arrow" class:expanded={expandedEbookRealms[realm.id]}>▶</span>
+                                <span>📖 {realm.ebookCount || 0} {realm.ebookCount === 1 ? 'book' : 'books'}</span>
+                            </div>
+                            <span style="font-size: 0.8rem; color: var(--gray);">
+                                {expandedEbookRealms[realm.id] ? 'Click to collapse' : 'Click to expand'}
+                            </span>
+                        </div>
+
+                        {#if expandedEbookRealms[realm.id]}
+                            <div class="realm-ebooks-list">
+                                {#if realmEbooksLoading[realm.id]}
+                                    <div class="no-ebooks-message">Loading ebooks...</div>
+                                {:else if !realmEbooks[realm.id] || realmEbooks[realm.id].length === 0}
+                                    <div class="no-ebooks-message">
+                                        No ebooks uploaded yet. Click "Upload Ebook" to add your first ebook!
+                                    </div>
+                                {:else}
+                                    {#each realmEbooks[realm.id] as ebook}
+                                        <div class="realm-ebook-item">
+                                            <div class="realm-ebook-thumb">
+                                                {#if ebook.coverPath}
+                                                    <img src={ebook.coverPath} alt={ebook.title} />
+                                                {:else}
+                                                    <span class="placeholder">📖</span>
+                                                {/if}
+                                            </div>
+                                            <div class="realm-ebook-info">
+                                                <h5>{ebook.title}</h5>
+                                                <div class="meta">
+                                                    <span>{ebook.readCount || 0} reads</span>
+                                                    {#if ebook.chapterCount}
+                                                        <span>{ebook.chapterCount} chapters</span>
+                                                    {/if}
+                                                </div>
+                                            </div>
+                                            <div class="realm-ebook-actions">
+                                                <button class="btn" on:click={() => openEditEbookModal(ebook)}>Edit</button>
+                                                <button class="btn btn-danger" on:click={() => deleteEbook(ebook.id)}>Delete</button>
+                                            </div>
+                                        </div>
+                                    {/each}
+                                {/if}
+                            </div>
+                        {/if}
+                    {:else if realm.type === 'watch'}
+                        <!-- Watch Realm specific content -->
+                        <div class="watch-realm-info">
+                            <p style="margin: 0; color: var(--gray); font-size: 0.9rem;">
+                                Create a synchronized watch room where viewers can watch YouTube videos together.
+                            </p>
+                        </div>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                            <label style="display: flex; align-items: center; cursor: pointer; justify-content: space-between;">
+                                <span style="font-weight: 600;">
+                                    Chat Enabled
+                                    <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                        {realm.chatEnabled ? '(Viewers can chat)' : '(Chat disabled)'}
+                                    </span>
+                                </span>
+                                <input
+                                    type="checkbox"
+                                    checked={realm.chatEnabled}
+                                    on:change={() => toggleChatEnabled(realm)}
+                                    style="width: 20px; height: 20px; cursor: pointer;"
+                                />
+                            </label>
+                        </div>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px;">
+                            <label style="display: flex; align-items: center; cursor: pointer; justify-content: space-between; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                                <span style="font-weight: 600;">
+                                    Allow Guest Chat
+                                    <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                        {realm.chatGuestsAllowed ? '(Guests can send messages)' : '(Only authenticated users)'}
+                                    </span>
+                                </span>
+                                <input
+                                    type="checkbox"
+                                    checked={realm.chatGuestsAllowed}
+                                    on:change={() => toggleChatGuestsAllowed(realm)}
+                                    disabled={!realm.chatEnabled}
+                                    style="width: 20px; height: 20px; cursor: {realm.chatEnabled ? 'pointer' : 'not-allowed'};"
+                                />
+                            </label>
+                        </div>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+                                Slow Mode (seconds)
+                                <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                    Minimum time between messages (0 = disabled)
+                                </span>
+                            </label>
+                            <input
+                                type="number"
+                                value={realm.chatSlowModeSeconds || 0}
+                                min="0"
+                                max="300"
+                                on:change={(e) => updateChatSettings(realm, { chatSlowModeSeconds: parseInt(e.target.value) })}
+                                disabled={!realm.chatEnabled}
+                                style="width: 100%; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                            />
+                        </div>
+
+                        <div class="chat-toggle-section" style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; opacity: {realm.chatEnabled ? 1 : 0.5};">
+                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+                                Message Retention (hours)
+                                <span style="color: var(--gray); font-weight: normal; font-size: 0.85rem; margin-left: 0.5rem;">
+                                    How long to keep messages before auto-deletion
+                                </span>
+                            </label>
+                            <input
+                                type="number"
+                                value={realm.chatRetentionHours || 24}
+                                min="1"
+                                max="168"
+                                on:change={(e) => updateChatSettings(realm, { chatRetentionHours: parseInt(e.target.value) })}
+                                disabled={!realm.chatEnabled}
+                                style="width: 100%; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                            />
+                        </div>
+
+                        <!-- Offline Image Section for Watch Rooms -->
+                        <div class="offline-image-section">
+                            <div class="offline-image-header">
+                                <h4>Room Image</h4>
+                            </div>
+                            <p style="color: var(--gray); font-size: 0.85rem; margin: 0 0 0.75rem 0;">
+                                This image will be displayed when no video is playing in your watch room.
+                            </p>
+                            <div class="offline-image-preview">
+                                {#if realm.offlineImageUrl}
+                                    <img src={realm.offlineImageUrl} alt="Room image" />
+                                {:else}
+                                    <div class="placeholder">No room image set</div>
+                                {/if}
+                            </div>
+                            <div class="offline-image-actions">
+                                <button
+                                    class="btn"
+                                    style="padding: 0.5rem 1rem; background: #fb923c; color: #000;"
+                                    on:click={() => openOfflineImageModal(realm.id)}
+                                    disabled={offlineImageUploading[realm.id]}
+                                >
+                                    {realm.offlineImageUrl ? 'Change Image' : 'Upload Image'}
+                                </button>
+                                {#if realm.offlineImageUrl}
+                                    <button
+                                        class="btn btn-danger"
+                                        style="padding: 0.5rem 1rem;"
+                                        on:click={() => deleteOfflineImage(realm.id)}
+                                        disabled={offlineImageUploading[realm.id]}
+                                    >
+                                        Remove
+                                    </button>
+                                {/if}
+                            </div>
+                        </div>
+                    {/if}
+                    {/if}
                 </div>
             {/each}
         </div>
     {/if}
+
 </div>
 
 <!-- Create Realm Modal -->
 {#if showCreateModal}
     <div class="modal" on:click={() => showCreateModal = false}>
-        <div class="modal-content" on:click|stopPropagation>
+        <div class="modal-content" style="max-width: 720px;" on:click|stopPropagation>
             <div class="modal-header">
                 <h2>Create New Realm</h2>
                 <button class="modal-close" on:click={() => showCreateModal = false}>×</button>
             </div>
-            
+
             {#if error}
                 <div class="error" style="margin-bottom: 1rem;">{error}</div>
             {/if}
-            
+
             <form on:submit|preventDefault={createRealm}>
+                <div class="form-group">
+                    <label>Realm Type</label>
+                    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem;">
+                        {#if $isStreamer}
+                            <label class="realm-type-option" class:selected={newRealmType === 'stream'}>
+                                <input type="radio" name="realm-type" value="stream" bind:group={newRealmType} />
+                                <div class="realm-type-content">
+                                    <span class="realm-type-icon">📺</span>
+                                    <span class="realm-type-label">Stream Realm</span>
+                                    <span class="realm-type-desc">For live streaming</span>
+                                </div>
+                            </label>
+                        {/if}
+                        {#if $isUploader}
+                            <label class="realm-type-option" class:selected={newRealmType === 'video'}>
+                                <input type="radio" name="realm-type" value="video" bind:group={newRealmType} />
+                                <div class="realm-type-content">
+                                    <span class="realm-type-icon">🎬</span>
+                                    <span class="realm-type-label">Video Realm</span>
+                                    <span class="realm-type-desc">For video uploads</span>
+                                </div>
+                            </label>
+                            <label class="realm-type-option" class:selected={newRealmType === 'audio'}>
+                                <input type="radio" name="realm-type" value="audio" bind:group={newRealmType} />
+                                <div class="realm-type-content">
+                                    <span class="realm-type-icon">🎵</span>
+                                    <span class="realm-type-label">Audio Realm</span>
+                                    <span class="realm-type-desc">For audio uploads</span>
+                                </div>
+                            </label>
+                            <label class="realm-type-option" class:selected={newRealmType === 'ebook'}>
+                                <input type="radio" name="realm-type" value="ebook" bind:group={newRealmType} />
+                                <div class="realm-type-content">
+                                    <span class="realm-type-icon">📖</span>
+                                    <span class="realm-type-label">Ebook Realm</span>
+                                    <span class="realm-type-desc">For EPUB uploads</span>
+                                </div>
+                            </label>
+                        {/if}
+                        {#if $isWatchCreator}
+                            <label class="realm-type-option" class:selected={newRealmType === 'watch'}>
+                                <input type="radio" name="realm-type" value="watch" bind:group={newRealmType} />
+                                <div class="realm-type-content">
+                                    <span class="realm-type-icon">🎞️</span>
+                                    <span class="realm-type-label">Watch Room</span>
+                                    <span class="realm-type-desc">Sync YouTube videos</span>
+                                </div>
+                            </label>
+                        {/if}
+                    </div>
+                </div>
+
                 <div class="form-group">
                     <label for="realm-name">Realm Name</label>
                     <input
@@ -510,12 +3518,605 @@ function formatBitrate(bitrate) {
                     />
                     <p class="form-hint">
                         3-30 characters, lowercase letters, numbers, and hyphens only.
-                        This will be your realm's URL: /{newRealmName || 'realm-name'}/live
+                        {#if newRealmType === 'stream'}
+                            This will be your realm's URL: /{newRealmName || 'realm-name'}/live
+                        {:else if newRealmType === 'video'}
+                            This will be your video realm's URL: /video/realm/{newRealmName || 'realm-name'}
+                        {:else if newRealmType === 'audio'}
+                            This will be your audio realm's URL: /audio/realm/{newRealmName || 'realm-name'}
+                        {:else if newRealmType === 'ebook'}
+                            This will be your ebook realm's URL: /ebooks/realm/{newRealmName || 'realm-name'}
+                        {:else if newRealmType === 'watch'}
+                            This will be your watch room URL: /{newRealmName || 'realm-name'}/watch
+                        {/if}
                     </p>
                 </div>
-                
-                <button type="submit" class="btn btn-block">Create Realm</button>
+
+                <div class="form-group">
+                    <label for="realm-description">Description (Optional)</label>
+                    <textarea
+                        id="realm-description"
+                        bind:value={newRealmDescription}
+                        placeholder={newRealmType === 'stream' ? "Tell viewers what your stream is about..." : newRealmType === 'video' ? "Describe what videos this realm contains..." : "Describe your audio collection..."}
+                        rows="3"
+                        maxlength="500"
+                    ></textarea>
+                    <p class="form-hint">
+                        Up to 500 characters to describe your realm
+                    </p>
+                </div>
+
+                <button type="submit" class="btn btn-block">Create {newRealmType === 'stream' ? 'Stream' : newRealmType === 'video' ? 'Video' : newRealmType === 'audio' ? 'Audio' : newRealmType === 'watch' ? 'Watch' : 'Ebook'} Realm</button>
             </form>
         </div>
     </div>
+{/if}
+
+<!-- Restream Modal -->
+{#if showRestreamModal}
+    <div class="modal" on:click={closeRestreamModal}>
+        <div class="modal-content" style="max-width: 600px;" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Manage Restream Destinations</h2>
+                <button class="modal-close" on:click={closeRestreamModal}>×</button>
+            </div>
+
+            {#if error}
+                <div class="error" style="margin-bottom: 1rem;">{error}</div>
+            {/if}
+
+            {#if message}
+                <div class="success" style="margin-bottom: 1rem;">{message}</div>
+            {/if}
+
+            <!-- Existing Destinations -->
+            {#if restreamDestinations[restreamRealmId]?.length > 0}
+                <div style="margin-bottom: 1.5rem;">
+                    <h4 style="margin-bottom: 1rem;">Current Destinations ({restreamDestinations[restreamRealmId].length}/2)</h4>
+                    {#each restreamDestinations[restreamRealmId] as dest}
+                        <div style="padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; margin-bottom: 0.5rem;">
+                            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
+                                <div>
+                                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                                        <span style="width: 10px; height: 10px; border-radius: 50%; background: {dest.isConnected ? '#28a745' : dest.enabled ? '#ffc107' : '#6c757d'};"></span>
+                                        <strong>{dest.name}</strong>
+                                        <span style="color: var(--gray); font-size: 0.85rem;">
+                                            ({dest.isConnected ? 'Connected' : dest.enabled ? 'Waiting for stream' : 'Disabled'})
+                                        </span>
+                                    </div>
+                                    <div style="font-size: 0.85rem; color: var(--gray); margin-top: 0.25rem;">
+                                        {dest.rtmpUrl}
+                                    </div>
+                                    {#if dest.lastError}
+                                        <div style="font-size: 0.85rem; color: var(--error); margin-top: 0.25rem;">
+                                            Error: {dest.lastError}
+                                        </div>
+                                    {/if}
+                                </div>
+                            </div>
+                            <div style="display: flex; gap: 0.5rem; margin-top: 0.75rem;">
+                                <button
+                                    class="btn"
+                                    style="padding: 0.25rem 0.75rem; font-size: 0.85rem; background: {dest.enabled ? '#6c757d' : '#28a745'};"
+                                    on:click={() => toggleRestreamDestination(restreamRealmId, dest.id, dest.enabled)}
+                                >
+                                    {dest.enabled ? 'Disable' : 'Enable'}
+                                </button>
+                                <button
+                                    class="btn"
+                                    style="padding: 0.25rem 0.75rem; font-size: 0.85rem; background: #17a2b8;"
+                                    on:click={() => testRestreamDestination(restreamRealmId, dest.id)}
+                                    disabled={restreamLoading}
+                                >
+                                    Test
+                                </button>
+                                <button
+                                    class="btn btn-danger"
+                                    style="padding: 0.25rem 0.75rem; font-size: 0.85rem;"
+                                    on:click={() => deleteRestreamDestination(restreamRealmId, dest.id)}
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+
+            <!-- Add New Destination -->
+            {#if (restreamDestinations[restreamRealmId]?.length || 0) < 2}
+                <div style="padding: 1rem; background: rgba(23, 162, 184, 0.1); border: 1px solid rgba(23, 162, 184, 0.3); border-radius: 4px;">
+                    <h4 style="margin: 0 0 1rem 0; color: #17a2b8;">Add New Destination</h4>
+
+                    <div class="form-group">
+                        <label for="restream-name">Name</label>
+                        <input
+                            type="text"
+                            id="restream-name"
+                            bind:value={newRestreamName}
+                            placeholder="YouTube, Twitch, etc."
+                            maxlength="100"
+                        />
+                    </div>
+
+                    <div class="form-group">
+                        <label for="restream-url">RTMP URL</label>
+                        <input
+                            type="text"
+                            id="restream-url"
+                            bind:value={newRestreamUrl}
+                            placeholder="rtmp://live.example.com/app"
+                        />
+                        <p class="form-hint">The RTMP server URL (without stream key)</p>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="restream-key">Stream Key</label>
+                        <input
+                            type="password"
+                            id="restream-key"
+                            bind:value={newRestreamKey}
+                            placeholder="Your stream key for this platform"
+                        />
+                        <p class="form-hint">The stream key will be appended to the RTMP URL</p>
+                    </div>
+
+                    <button
+                        class="btn btn-block"
+                        style="background: #17a2b8;"
+                        on:click={addRestreamDestination}
+                        disabled={restreamLoading}
+                    >
+                        {restreamLoading ? 'Adding...' : 'Add Destination'}
+                    </button>
+                </div>
+            {:else}
+                <p style="color: var(--gray); text-align: center; padding: 1rem;">
+                    Maximum of 2 restream destinations reached. Delete one to add another.
+                </p>
+            {/if}
+
+            <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">
+                <p style="color: var(--gray); font-size: 0.85rem; margin: 0;">
+                    Restreams will automatically start when your stream goes live and reconnect if disconnected.
+                </p>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Video Upload Modal -->
+{#if showVideoUploadModal && selectedVideoRealm}
+    <div class="modal" on:click={closeVideoUploadModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Upload Video to "{selectedVideoRealm.name}"</h2>
+                <button class="modal-close" on:click={closeVideoUploadModal}>×</button>
+            </div>
+
+            {#if uploadError}
+                <div class="error" style="margin-bottom: 1rem;">{uploadError}</div>
+            {/if}
+
+            <div class="form-group">
+                <label>Video File</label>
+                <label class="file-input-wrapper">
+                    <input type="file" accept="video/mp4,video/webm,video/quicktime" on:change={handleFileSelect} />
+                    <div style="color: var(--gray);">
+                        Click to select a video (MP4, WebM, MOV - max 500MB)
+                    </div>
+                    {#if uploadFile}
+                        <div class="file-name">{uploadFile.name} ({formatBytes(uploadFile.size)})</div>
+                    {/if}
+                </label>
+            </div>
+
+            <div class="form-group">
+                <label for="video-title">Title</label>
+                <input type="text" id="video-title" bind:value={uploadTitle} placeholder="Enter video title" maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="video-description">Description (optional)</label>
+                <textarea id="video-description" bind:value={uploadDescription} placeholder="Enter video description" maxlength="5000" rows="3"></textarea>
+            </div>
+
+            {#if uploading}
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: {uploadProgress}%"></div>
+                </div>
+                <div style="text-align: center; color: var(--gray);">
+                    Uploading... {uploadProgress}%
+                </div>
+            {/if}
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeVideoUploadModal} disabled={uploading}>Cancel</button>
+                <button class="btn" style="flex: 1; background: #8b5cf6;" on:click={uploadVideo} disabled={uploading || !uploadFile}>
+                    {uploading ? 'Uploading...' : 'Upload'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Video Edit Modal -->
+{#if editingVideo}
+    <div class="modal" on:click={closeEditVideoModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Edit Video</h2>
+                <button class="modal-close" on:click={closeEditVideoModal}>×</button>
+            </div>
+
+            <div class="form-group">
+                <label for="edit-video-title">Title</label>
+                <input type="text" id="edit-video-title" bind:value={editVideoTitle} maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="edit-video-description">Description</label>
+                <textarea id="edit-video-description" bind:value={editVideoDescription} maxlength="5000" rows="3"></textarea>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeEditVideoModal}>Cancel</button>
+                <button class="btn" style="flex: 1; background: var(--primary);" on:click={saveVideoEdit}>Save Changes</button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Offline Image Upload Modal -->
+{#if showOfflineImageModal}
+    <div class="modal" on:click={closeOfflineImageModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Upload Offline Image</h2>
+                <button class="modal-close" on:click={closeOfflineImageModal}>×</button>
+            </div>
+
+            {#if error}
+                <div class="error" style="margin-bottom: 1rem;">{error}</div>
+            {/if}
+
+            <p style="color: var(--gray); margin-bottom: 1rem;">
+                This image will be displayed to viewers when your stream is offline.
+                Use a 16:9 aspect ratio for best results.
+            </p>
+
+            <div class="form-group">
+                <label>Image File</label>
+                <label class="file-input-wrapper">
+                    <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" on:change={handleOfflineImageSelect} bind:this={offlineImageInput} />
+                    <div style="color: var(--gray);">
+                        Click to select an image (JPEG, PNG, GIF, WebP - max 5MB)
+                    </div>
+                    {#if offlineImageFile}
+                        <div class="file-name">{offlineImageFile.name} ({formatBytes(offlineImageFile.size)})</div>
+                    {/if}
+                </label>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeOfflineImageModal} disabled={offlineImageUploading[offlineImageRealmId]}>Cancel</button>
+                <button
+                    class="btn"
+                    style="flex: 1; background: #ffc107; color: #000;"
+                    on:click={uploadOfflineImage}
+                    disabled={offlineImageUploading[offlineImageRealmId] || !offlineImageFile}
+                >
+                    {offlineImageUploading[offlineImageRealmId] ? 'Uploading...' : 'Upload'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Title Color Modal -->
+{#if showTitleColorModal}
+    <div class="modal" on:click={closeTitleColorEditor}>
+        <div class="modal-content" on:click|stopPropagation style="max-width: 400px;">
+            <div class="modal-header">
+                <h2>Edit Title Color</h2>
+                <button class="modal-close" on:click={closeTitleColorEditor}>×</button>
+            </div>
+
+            <div class="form-group">
+                <label for="title-color-input">Realm Title Color</label>
+                <div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem;">
+                    <input
+                        id="title-color-input"
+                        type="color"
+                        bind:value={titleColor}
+                        style="width: 50px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-dark); cursor: pointer;"
+                    />
+                    <input
+                        type="text"
+                        bind:value={titleColor}
+                        placeholder="#ffffff"
+                        maxlength="7"
+                        style="width: 100px; font-family: monospace; text-transform: uppercase; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                    />
+                    <span style="color: {titleColor}; font-size: 1.1rem; font-weight: 600;">
+                        {realms.find(r => r.id === titleColorRealmId)?.name || 'Preview'}
+                    </span>
+                </div>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeTitleColorEditor} disabled={savingTitleColor}>Cancel</button>
+                <button
+                    class="btn"
+                    style="flex: 1; background: var(--primary);"
+                    on:click={saveTitleColor}
+                    disabled={savingTitleColor}
+                >
+                    {savingTitleColor ? 'Saving...' : 'Save Color'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Audio Upload Modal -->
+{#if showAudioUploadModal && selectedAudioRealm}
+    <div class="modal" on:click={closeAudioUploadModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Upload Audio to "{selectedAudioRealm.name}"</h2>
+                <button class="modal-close" on:click={closeAudioUploadModal}>×</button>
+            </div>
+
+            {#if audioUploadError}
+                <div class="error" style="margin-bottom: 1rem;">{audioUploadError}</div>
+            {/if}
+
+            <div class="form-group">
+                <label>Audio File</label>
+                <label class="file-input-wrapper">
+                    <input type="file" accept="audio/mpeg,audio/mp3,audio/wav,audio/flac,audio/ogg,audio/aac,audio/x-m4a" on:change={handleAudioFileSelect} />
+                    <div style="color: var(--gray);">
+                        Click to select an audio file (MP3, WAV, FLAC, OGG, AAC, M4A - max 500MB)
+                    </div>
+                    {#if audioUploadFile}
+                        <div class="file-name">{audioUploadFile.name} ({formatBytes(audioUploadFile.size)})</div>
+                    {/if}
+                </label>
+            </div>
+
+            <div class="form-group">
+                <label for="audio-title">Title</label>
+                <input type="text" id="audio-title" bind:value={audioUploadTitle} placeholder="Enter audio title" maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="audio-description">Description (optional)</label>
+                <textarea id="audio-description" bind:value={audioUploadDescription} placeholder="Enter audio description" maxlength="5000" rows="3"></textarea>
+            </div>
+
+            {#if audioUploading}
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: {audioUploadProgress}%"></div>
+                </div>
+                <div style="text-align: center; color: var(--gray);">
+                    Uploading... {audioUploadProgress}%
+                </div>
+            {/if}
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeAudioUploadModal} disabled={audioUploading}>Cancel</button>
+                <button class="btn" style="flex: 1; background: #ec4899;" on:click={uploadAudio} disabled={audioUploading || !audioUploadFile}>
+                    {audioUploading ? 'Uploading...' : 'Upload'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Audio Edit Modal -->
+{#if editingAudio}
+    <div class="modal" on:click={closeEditAudioModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Edit Audio</h2>
+                <button class="modal-close" on:click={closeEditAudioModal}>×</button>
+            </div>
+
+            <div class="form-group">
+                <label for="edit-audio-title">Title</label>
+                <input type="text" id="edit-audio-title" bind:value={editAudioTitle} maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="edit-audio-description">Description</label>
+                <textarea id="edit-audio-description" bind:value={editAudioDescription} maxlength="5000" rows="3"></textarea>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeEditAudioModal}>Cancel</button>
+                <button class="btn" style="flex: 1; background: #ec4899;" on:click={saveAudioEdit}>Save Changes</button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Audio Thumbnail Upload Modal -->
+{#if showAudioThumbnailModal}
+    <div class="modal" on:click={closeAudioThumbnailModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Upload Audio Thumbnail</h2>
+                <button class="modal-close" on:click={closeAudioThumbnailModal}>×</button>
+            </div>
+
+            {#if error}
+                <div class="error" style="margin-bottom: 1rem;">{error}</div>
+            {/if}
+
+            <p style="color: var(--gray); margin-bottom: 1rem;">
+                Add a cover image for this audio track. Square images work best.
+            </p>
+
+            <div class="form-group">
+                <label>Image File</label>
+                <label class="file-input-wrapper">
+                    <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" on:change={handleAudioThumbnailSelect} />
+                    <div style="color: var(--gray);">
+                        Click to select an image (JPEG, PNG, GIF, WebP - max 5MB)
+                    </div>
+                    {#if audioThumbnailFile}
+                        <div class="file-name">{audioThumbnailFile.name} ({formatBytes(audioThumbnailFile.size)})</div>
+                    {/if}
+                </label>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeAudioThumbnailModal} disabled={audioThumbnailUploading}>Cancel</button>
+                <button
+                    class="btn"
+                    style="flex: 1; background: #ec4899;"
+                    on:click={uploadAudioThumbnail}
+                    disabled={audioThumbnailUploading || !audioThumbnailFile}
+                >
+                    {audioThumbnailUploading ? 'Uploading...' : 'Upload'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Ebook Upload Modal -->
+{#if showEbookUploadModal && selectedEbookRealm}
+    <div class="modal" on:click={closeEbookUploadModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Upload Ebook to "{selectedEbookRealm.name}"</h2>
+                <button class="modal-close" on:click={closeEbookUploadModal}>×</button>
+            </div>
+
+            {#if ebookUploadError}
+                <div class="error" style="margin-bottom: 1rem;">{ebookUploadError}</div>
+            {/if}
+
+            <div class="form-group">
+                <label>EPUB File</label>
+                <label class="file-input-wrapper">
+                    <input type="file" accept=".epub,application/epub+zip" on:change={handleEbookFileSelect} />
+                    <div style="color: var(--gray);">
+                        Click to select an EPUB file (max 100MB)
+                    </div>
+                    {#if ebookUploadFile}
+                        <div class="file-name">{ebookUploadFile.name} ({formatBytes(ebookUploadFile.size)})</div>
+                    {/if}
+                </label>
+            </div>
+
+            <div class="form-group">
+                <label>Cover Image</label>
+                <div style="display: flex; gap: 1rem; align-items: flex-start;">
+                    {#if ebookCoverPreview}
+                        <div style="flex-shrink: 0;">
+                            <img src={ebookCoverPreview} alt="Cover preview" style="width: 80px; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);" />
+                        </div>
+                    {/if}
+                    <label class="file-input-wrapper" style="flex: 1;">
+                        <input type="file" accept="image/jpeg,image/png,image/webp" on:change={handleEbookCoverSelect} />
+                        <div style="color: var(--gray);">
+                            {ebookCoverFile ? 'Click to change cover' : 'Click to select cover image'} (JPG, PNG, WebP - max 5MB)
+                        </div>
+                        {#if ebookCoverFile}
+                            <div class="file-name">{ebookCoverFile.name} ({formatBytes(ebookCoverFile.size)})</div>
+                        {/if}
+                    </label>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="ebook-title">Title</label>
+                <input type="text" id="ebook-title" bind:value={ebookUploadTitle} placeholder="Enter ebook title" maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="ebook-description">Description (optional)</label>
+                <textarea id="ebook-description" bind:value={ebookUploadDescription} placeholder="Enter ebook description" maxlength="5000" rows="3"></textarea>
+            </div>
+
+            {#if ebookUploading}
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: {ebookUploadProgress}%; background: #3b82f6;"></div>
+                </div>
+                <div style="text-align: center; color: var(--gray);">
+                    Uploading... {ebookUploadProgress}%
+                </div>
+            {/if}
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeEbookUploadModal} disabled={ebookUploading}>Cancel</button>
+                <button class="btn" style="flex: 1; background: #3b82f6;" on:click={uploadEbook} disabled={ebookUploading || !ebookUploadFile || !ebookCoverFile}>
+                    {ebookUploading ? 'Uploading...' : 'Upload'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- Ebook Edit Modal -->
+{#if editingEbook}
+    <div class="modal" on:click={closeEditEbookModal}>
+        <div class="modal-content" on:click|stopPropagation>
+            <div class="modal-header">
+                <h2>Edit Ebook</h2>
+                <button class="modal-close" on:click={closeEditEbookModal}>×</button>
+            </div>
+
+            <div class="form-group">
+                <label>Cover Image</label>
+                <div style="display: flex; gap: 1rem; align-items: flex-start;">
+                    <div style="flex-shrink: 0;">
+                        {#if editEbookCoverPreview}
+                            <img src={editEbookCoverPreview} alt="New cover" style="width: 80px; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);" />
+                        {:else if editingEbook.coverPath}
+                            <img src={editingEbook.coverPath} alt="Current cover" style="width: 80px; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);" />
+                        {:else}
+                            <div style="width: 80px; height: 120px; background: #1a1a1a; border-radius: 4px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.3;">📖</div>
+                        {/if}
+                    </div>
+                    <div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem;">
+                        <label class="file-input-wrapper" style="margin: 0;">
+                            <input type="file" accept="image/jpeg,image/png,image/webp" on:change={handleEditEbookCoverSelect} />
+                            <div style="color: var(--gray); font-size: 0.9rem;">
+                                Click to select new cover (JPG, PNG, WebP - max 5MB)
+                            </div>
+                        </label>
+                        {#if editEbookCoverFile}
+                            <button
+                                class="btn"
+                                style="background: #3b82f6; padding: 0.5rem;"
+                                on:click={uploadEditEbookCover}
+                                disabled={editEbookCoverUploading}
+                            >
+                                {editEbookCoverUploading ? 'Uploading...' : 'Update Cover'}
+                            </button>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="edit-ebook-title">Title</label>
+                <input type="text" id="edit-ebook-title" bind:value={editEbookTitle} maxlength="255" />
+            </div>
+
+            <div class="form-group">
+                <label for="edit-ebook-description">Description</label>
+                <textarea id="edit-ebook-description" bind:value={editEbookDescription} maxlength="5000" rows="3"></textarea>
+            </div>
+
+            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                <button class="btn" style="flex: 1;" on:click={closeEditEbookModal}>Cancel</button>
+                <button class="btn" style="flex: 1; background: #3b82f6;" on:click={saveEbookEdit}>Save Changes</button>
+            </div>
+        </div>
+    </div>
 {/if}
\ No newline at end of file
diff --git a/frontend/src/routes/profile/[username]/+page.svelte b/frontend/src/routes/profile/[username]/+page.svelte
index 6fba31b..b49ec54 100644
--- a/frontend/src/routes/profile/[username]/+page.svelte
+++ b/frontend/src/routes/profile/[username]/+page.svelte
@@ -2,27 +2,30 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { auth, isAuthenticated } from '$lib/stores/auth';
-    
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { formatUbercoin } from '$lib/stores/ubercoin';
+    import UbercoinTipModal from '$lib/components/UbercoinTipModal.svelte';
+
     let profile = null;
     let pgpKeys = [];
+    let realms = [];
     let loading = true;
+    let realmsLoading = true;
     let error = '';
-    let isOwnProfile = false;
     let activeTab = 'bio';
     let expandedKeys = {}; // Track which keys are expanded
-    
+    let showTipModal = false;
+
+    // Reactive check for own profile
+    $: isOwnProfile = $isAuthenticated && $auth.user && profile && $auth.user.username === profile.username;
+
     onMount(async () => {
         // No authentication required - profile is public
         const username = $page.params.username;
-        
-        // Check if viewing own profile (only if authenticated)
-        if ($isAuthenticated && $auth.user) {
-            isOwnProfile = $auth.user.username === username;
-        }
-        
+
         await loadProfile(username);
-        await loadPgpKeys(username);
-        
+        await Promise.all([loadPgpKeys(username), loadUserRealms(username)]);
+
         loading = false;
     });
     
@@ -54,7 +57,7 @@
         try {
             // Public endpoint - no auth header needed
             const response = await fetch(`/api/users/${username}/pgp-keys`);
-            
+
             if (response.ok) {
                 const data = await response.json();
                 pgpKeys = data.keys;
@@ -67,6 +70,32 @@
             console.error('Failed to load PGP keys:', e);
         }
     }
+
+    async function loadUserRealms(username) {
+        try {
+            const response = await fetch(`/api/realms/user/${username}`);
+            if (response.ok) {
+                const data = await response.json();
+                realms = data.realms || [];
+            }
+        } catch (e) {
+            console.error('Failed to load user realms:', e);
+        } finally {
+            realmsLoading = false;
+        }
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
     
     function copyToClipboard(text) {
         navigator.clipboard.writeText(text);
@@ -76,7 +105,26 @@
     function toggleKey(fingerprint) {
         expandedKeys[fingerprint] = !expandedKeys[fingerprint];
     }
-    
+
+    function handleOpenTipModal() {
+        showTipModal = true;
+    }
+
+    function handleTipModalClose() {
+        showTipModal = false;
+    }
+
+    function handleTipSent(event) {
+        showTipModal = false;
+        // Optionally refresh profile to show updated balance
+        if (profile) {
+            loadProfile(profile.username);
+        }
+    }
+
+    // Check if user can send tips
+    $: canSendTip = $isAuthenticated && $auth.user && !isOwnProfile;
+
     function formatDateTime(dateStr) {
         if (!dateStr) return '';
         const date = new Date(dateStr);
@@ -92,6 +140,10 @@
     }
 </script>
 
+<svelte:head>
+    <title>{profile ? `${$siteSettings.site_title} - ${profile.username}` : $siteSettings.site_title}</title>
+</svelte:head>
+
 <style>
     .profile-header {
         display: flex;
@@ -142,36 +194,43 @@
         font-size: 0.9rem;
     }
     
+    .badges-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+        flex-wrap: wrap;
+    }
+
     .color-badge {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.4rem;
         background: rgba(255, 255, 255, 0.05);
-        padding: 0.25rem 0.75rem;
+        padding: 0.3rem 0.6rem;
         border-radius: 20px;
-        font-size: 0.85rem;
-        margin-top: 0.5rem;
+        font-size: 0.8rem;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }
-    
+
     .color-dot {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
         border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.3);
         box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     }
     
     .pgp-only-badge {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
-        background: rgba(40, 167, 69, 0.2);
+        gap: 0.4rem;
+        background: rgba(40, 167, 69, 0.1);
         color: var(--success);
-        padding: 0.25rem 0.75rem;
+        padding: 0.3rem 0.6rem;
         border-radius: 20px;
-        font-size: 0.85rem;
-        margin-top: 0.5rem;
+        font-size: 0.8rem;
+        border: 1px solid rgba(40, 167, 69, 0.3);
     }
     
     .tab-nav {
@@ -232,7 +291,31 @@
         color: var(--gray);
         font-style: italic;
     }
-    
+
+    .graffiti-section {
+        margin-top: 1.5rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .graffiti-section h3 {
+        margin-bottom: 1rem;
+    }
+
+    .graffiti-container {
+        padding: 12px;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+        display: inline-block;
+    }
+
+    .graffiti-img {
+        image-rendering: pixelated;
+        width: 88px;
+        height: 33px;
+        display: block;
+    }
+
     .pgp-section {
         padding: 1.5rem;
         background: #111;
@@ -364,6 +447,166 @@
         color: var(--gray);
         font-style: italic;
     }
+
+    /* Realms Section Styles */
+    .realms-section {
+        padding: 1.5rem;
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+    }
+
+    .realms-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1.25rem;
+    }
+
+    .realm-card {
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        padding: 1rem;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .realm-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 16px rgba(86, 29, 94, 0.3);
+        border-color: var(--primary);
+    }
+
+    .realm-card.stream-realm:hover {
+        border-color: #28a745;
+    }
+
+    .realm-card.video-realm:hover {
+        border-color: #8b5cf6;
+    }
+
+    .realm-header-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .realm-type-badge {
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .realm-type-badge.stream {
+        background: rgba(40, 167, 69, 0.2);
+        color: #28a745;
+    }
+
+    .realm-type-badge.video {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+    }
+
+    .live-badge {
+        background: #dc3545;
+        color: white;
+        font-size: 0.65rem;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-weight: 700;
+        animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+    }
+
+    .realm-card h4 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.3;
+    }
+
+    .realm-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        color: var(--gray);
+        font-size: 0.8rem;
+    }
+
+    .realm-meta .dot {
+        opacity: 0.5;
+    }
+
+    .no-realms {
+        text-align: center;
+        padding: 3rem;
+        color: var(--gray);
+    }
+
+    .no-realms-icon {
+        font-size: 3rem;
+        margin-bottom: 0.75rem;
+        opacity: 0.5;
+    }
+
+    /* Ubercoin Styles */
+    .ubercoin-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        background: rgba(255, 215, 0, 0.05);
+        border: 1px solid rgba(255, 215, 0, 0.2);
+        padding: 0.3rem 0.6rem;
+        border-radius: 20px;
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #ffd700;
+    }
+
+    .coin-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border-radius: 50%;
+        font-size: 0.55rem;
+        font-weight: bold;
+        color: #000;
+    }
+
+    .tip-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
+        border: none;
+        border-radius: 6px;
+        color: #000;
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        margin-top: 0.75rem;
+    }
+
+    .tip-button:hover {
+        filter: brightness(1.1);
+        transform: translateY(-1px);
+    }
+
+    .tip-button .coin-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 0.65rem;
+    }
 </style>
 
 <div class="container">
@@ -391,29 +634,48 @@
                 <p class="member-since">
                     Member since {new Date(profile.createdAt).toLocaleDateString()}
                 </p>
-                <div class="color-badge">
-                    <span class="color-dot" style="background: {profile.colorCode || '#561D5E'}"></span>
-                    <span style="font-family: monospace;">{profile.colorCode || '#561D5E'}</span>
-                </div>
-                {#if profile.isPgpOnly}
-                    <div class="pgp-only-badge">
-                        <span>🔐</span>
-                        <span>PGP-Only Authentication</span>
+                <div class="badges-row">
+                    <div class="color-badge">
+                        <span class="color-dot" style="background: {profile.colorCode || '#561D5E'}"></span>
+                        <span style="font-family: monospace;">{profile.colorCode || '#561D5E'}</span>
                     </div>
+                    <div class="ubercoin-badge">
+                        <span class="coin-icon">Ü</span>
+                        <span>{formatUbercoin(profile.ubercoinBalance)} übercoin</span>
+                    </div>
+                    {#if profile.isPgpOnly}
+                        <div class="pgp-only-badge">
+                            <span>🔐</span>
+                            <span>PGP-Only</span>
+                        </div>
+                    {/if}
+                </div>
+                {#if canSendTip}
+                    <button class="tip-button" on:click={handleOpenTipModal}>
+                        <span class="coin-icon">Ü</span>
+                        Send übercoin
+                    </button>
                 {/if}
             </div>
         </div>
         
         <div class="tab-nav">
-            <button 
-                class="tab-button" 
+            <button
+                class="tab-button"
                 class:active={activeTab === 'bio'}
                 on:click={() => activeTab = 'bio'}
             >
                 Bio
             </button>
-            <button 
-                class="tab-button" 
+            <button
+                class="tab-button"
+                class:active={activeTab === 'realms'}
+                on:click={() => activeTab = 'realms'}
+            >
+                Realms ({realms.length})
+            </button>
+            <button
+                class="tab-button"
                 class:active={activeTab === 'pgp'}
                 on:click={() => activeTab = 'pgp'}
             >
@@ -429,6 +691,67 @@
                 {:else}
                     <p class="no-bio">No bio yet</p>
                 {/if}
+
+                {#if profile.graffitiUrl}
+                    <div class="graffiti-section">
+                        <h3>Graffiti</h3>
+                        <div class="graffiti-container">
+                            <img
+                                src={profile.graffitiUrl}
+                                alt="{profile.username}'s graffiti"
+                                class="graffiti-img"
+                            />
+                        </div>
+                    </div>
+                {/if}
+            </div>
+        {:else if activeTab === 'realms'}
+            <div class="realms-section">
+                {#if realmsLoading}
+                    <p style="text-align: center; padding: 2rem;">Loading realms...</p>
+                {:else if realms.length === 0}
+                    <div class="no-realms">
+                        <div class="no-realms-icon">🏰</div>
+                        <p>No realms created yet</p>
+                    </div>
+                {:else}
+                    <div class="realms-grid">
+                        {#each realms as realm}
+                            <a
+                                href={realm.type === 'video' ? `/video/realm/${realm.id}` : realm.type === 'audio' ? `/audio/realm/${realm.id}` : `/${realm.name}/live`}
+                                class="realm-card"
+                                class:stream-realm={realm.type === 'stream' || !realm.type}
+                                class:video-realm={realm.type === 'video'}
+                                class:audio-realm={realm.type === 'audio'}
+                            >
+                                <div class="realm-header-info">
+                                    <span class="realm-type-badge {realm.type || 'stream'}">
+                                        {realm.type === 'video' ? '🎬 Video' : realm.type === 'audio' ? '🎵 Audio' : '📺 Stream'}
+                                    </span>
+                                    {#if realm.type !== 'video' && realm.isLive}
+                                        <span class="live-badge">LIVE</span>
+                                    {/if}
+                                </div>
+                                <h4 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h4>
+                                <div class="realm-meta">
+                                    {#if realm.type === 'video'}
+                                        <span>{realm.videoCount || 0} videos</span>
+                                    {:else if realm.type === 'audio'}
+                                        <span>{realm.audioCount || 0} tracks</span>
+                                    {:else}
+                                        {#if realm.isLive}
+                                            <span>{realm.viewerCount || 0} viewers</span>
+                                        {:else}
+                                            <span>Offline</span>
+                                        {/if}
+                                    {/if}
+                                    <span class="dot">·</span>
+                                    <span>{timeAgo(realm.createdAt)}</span>
+                                </div>
+                            </a>
+                        {/each}
+                    </div>
+                {/if}
             </div>
         {:else if activeTab === 'pgp'}
             <div class="pgp-section">
@@ -500,4 +823,14 @@
             </div>
         {/if}
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+<!-- Ubercoin Tip Modal -->
+{#if profile}
+    <UbercoinTipModal
+        show={showTipModal}
+        recipientUsername={profile.username}
+        on:close={handleTipModalClose}
+        on:sent={handleTipSent}
+    />
+{/if}
\ No newline at end of file
diff --git a/frontend/src/routes/read/[id]/+page.svelte b/frontend/src/routes/read/[id]/+page.svelte
new file mode 100644
index 0000000..f626ae4
--- /dev/null
+++ b/frontend/src/routes/read/[id]/+page.svelte
@@ -0,0 +1,424 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+
+    let readerContainer;
+    let ebook = null;
+    let loading = true;
+    let error = null;
+    let book = null;
+    let rendition = null;
+    let toc = [];
+    let currentLocation = null;
+    let showToc = false;
+    let progress = 0;
+
+    $: ebookId = $page.params.id;
+
+    async function loadEbook() {
+        if (!browser || !ebookId) return;
+
+        try {
+            // Fetch ebook metadata
+            const metaRes = await fetch(`/api/ebooks/${ebookId}`);
+            if (!metaRes.ok) {
+                if (metaRes.status === 404) {
+                    error = 'Ebook not found';
+                } else {
+                    error = 'Failed to load ebook';
+                }
+                loading = false;
+                return;
+            }
+
+            const data = await metaRes.json();
+            ebook = data.ebook;
+
+            // Increment read count
+            fetch(`/api/ebooks/${ebookId}/read`, { method: 'POST' }).catch(() => {});
+
+            // Dynamically import foliate-js to avoid SSR issues
+            const { EPUB } = await import('foliate-js/epub.js');
+
+            // Fetch the EPUB file
+            const fileRes = await fetch(ebook.filePath);
+            if (!fileRes.ok) {
+                error = 'Failed to load ebook file';
+                loading = false;
+                return;
+            }
+
+            const blob = await fileRes.blob();
+
+            // Initialize reader
+            book = await new EPUB({ blob }).init();
+            toc = book.toc || [];
+
+            if (readerContainer) {
+                // Create the view
+                rendition = book.render(readerContainer);
+
+                // Restore saved position
+                const savedPosition = localStorage.getItem(`ebook-pos-${ebookId}`);
+                if (savedPosition) {
+                    try {
+                        rendition.goTo(savedPosition);
+                    } catch (e) {
+                        console.warn('Could not restore position:', e);
+                    }
+                }
+
+                // Listen for location changes
+                rendition.addEventListener('relocate', (e) => {
+                    currentLocation = e.detail;
+                    progress = e.detail.fraction ? Math.round(e.detail.fraction * 100) : 0;
+                    // Save position
+                    if (e.detail.cfi) {
+                        localStorage.setItem(`ebook-pos-${ebookId}`, e.detail.cfi);
+                    }
+                });
+            }
+
+            loading = false;
+        } catch (e) {
+            console.error('Failed to load ebook:', e);
+            error = 'Failed to load ebook: ' + e.message;
+            loading = false;
+        }
+    }
+
+    function goToTocItem(href) {
+        if (rendition && href) {
+            rendition.goTo(href);
+            showToc = false;
+        }
+    }
+
+    function prevPage() {
+        if (rendition) {
+            rendition.prev();
+        }
+    }
+
+    function nextPage() {
+        if (rendition) {
+            rendition.next();
+        }
+    }
+
+    function handleKeydown(event) {
+        if (event.key === 'ArrowLeft') {
+            prevPage();
+        } else if (event.key === 'ArrowRight') {
+            nextPage();
+        }
+    }
+
+    onMount(() => {
+        loadEbook();
+        if (browser) {
+            window.addEventListener('keydown', handleKeydown);
+        }
+    });
+
+    onDestroy(() => {
+        if (browser) {
+            window.removeEventListener('keydown', handleKeydown);
+        }
+        if (book) {
+            book.destroy?.();
+        }
+    });
+</script>
+
+<svelte:head>
+    <title>{ebook ? `${$siteSettings.site_title} - ${ebook.title}` : $siteSettings.site_title}</title>
+</svelte:head>
+
+<style>
+    .reader-page {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #1a1a1a;
+        display: flex;
+        flex-direction: column;
+        z-index: 1000;
+    }
+
+    .reader-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        background: #111;
+        border-bottom: 1px solid #333;
+        flex-shrink: 0;
+    }
+
+    .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .back-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #3b82f6;
+        text-decoration: none;
+        font-size: 0.9rem;
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        transition: background 0.2s;
+    }
+
+    .back-btn:hover {
+        background: rgba(59, 130, 246, 0.1);
+    }
+
+    .book-title {
+        font-size: 0.9rem;
+        color: var(--white);
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .progress-indicator {
+        font-size: 0.85rem;
+        color: #3b82f6;
+        font-weight: 500;
+    }
+
+    .toc-btn {
+        padding: 0.5rem 0.75rem;
+        background: rgba(59, 130, 246, 0.2);
+        border: 1px solid rgba(59, 130, 246, 0.4);
+        border-radius: 6px;
+        color: #3b82f6;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .toc-btn:hover {
+        background: rgba(59, 130, 246, 0.3);
+    }
+
+    .reader-main {
+        flex: 1;
+        display: flex;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .reader-container {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        overflow: auto;
+    }
+
+    .reader-container :global(*) {
+        max-width: 100%;
+    }
+
+    .nav-btn {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 50px;
+        height: 100px;
+        background: rgba(0, 0, 0, 0.3);
+        border: none;
+        color: white;
+        font-size: 1.5rem;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.2s;
+        z-index: 10;
+    }
+
+    .nav-btn:hover {
+        opacity: 1;
+        background: rgba(59, 130, 246, 0.5);
+    }
+
+    .reader-main:hover .nav-btn {
+        opacity: 0.5;
+    }
+
+    .nav-prev {
+        left: 0;
+        border-radius: 0 8px 8px 0;
+    }
+
+    .nav-next {
+        right: 0;
+        border-radius: 8px 0 0 8px;
+    }
+
+    .toc-sidebar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 300px;
+        height: 100%;
+        background: #111;
+        border-left: 1px solid #333;
+        overflow-y: auto;
+        z-index: 20;
+        transform: translateX(100%);
+        transition: transform 0.2s ease;
+    }
+
+    .toc-sidebar.open {
+        transform: translateX(0);
+    }
+
+    .toc-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+        border-bottom: 1px solid #333;
+    }
+
+    .toc-header h3 {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .toc-close {
+        background: none;
+        border: none;
+        color: var(--gray);
+        font-size: 1.5rem;
+        cursor: pointer;
+    }
+
+    .toc-list {
+        padding: 0.5rem 0;
+    }
+
+    .toc-item {
+        display: block;
+        padding: 0.75rem 1rem;
+        color: var(--white);
+        text-decoration: none;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .toc-item:hover {
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+    }
+
+    .loading-state,
+    .error-state {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: var(--gray);
+    }
+
+    .error-state {
+        color: #ef4444;
+    }
+
+    .error-state h2 {
+        margin-bottom: 0.5rem;
+    }
+
+    .keyboard-hint {
+        position: absolute;
+        bottom: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #666;
+        font-size: 0.75rem;
+        padding: 0.5rem 1rem;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+    }
+</style>
+
+<div class="reader-page">
+    <div class="reader-toolbar">
+        <div class="toolbar-left">
+            <a href="/ebooks" class="back-btn">
+                <span>&#8592;</span> Back
+            </a>
+            {#if ebook}
+                <span class="book-title">{ebook.title}</span>
+            {/if}
+        </div>
+        <div class="toolbar-right">
+            <span class="progress-indicator">{progress}%</span>
+            {#if toc.length > 0}
+                <button class="toc-btn" on:click={() => showToc = !showToc}>
+                    Contents
+                </button>
+            {/if}
+        </div>
+    </div>
+
+    <div class="reader-main">
+        {#if loading}
+            <div class="loading-state">
+                <p>Loading ebook...</p>
+            </div>
+        {:else if error}
+            <div class="error-state">
+                <h2>Error</h2>
+                <p>{error}</p>
+                <a href="/ebooks" class="back-btn" style="margin-top: 1rem;">
+                    Return to library
+                </a>
+            </div>
+        {:else}
+            <button class="nav-btn nav-prev" on:click={prevPage} title="Previous page">&#8249;</button>
+
+            <div bind:this={readerContainer} class="reader-container"></div>
+
+            <button class="nav-btn nav-next" on:click={nextPage} title="Next page">&#8250;</button>
+
+            <div class="toc-sidebar" class:open={showToc}>
+                <div class="toc-header">
+                    <h3>Table of Contents</h3>
+                    <button class="toc-close" on:click={() => showToc = false}>×</button>
+                </div>
+                <div class="toc-list">
+                    {#each toc as item}
+                        <button class="toc-item" on:click={() => goToTocItem(item.href)}>
+                            {item.label}
+                        </button>
+                    {/each}
+                </div>
+            </div>
+
+            <div class="keyboard-hint">
+                Use &#8592; &#8594; arrow keys to navigate
+            </div>
+        {/if}
+    </div>
+</div>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index e6ae729..e7b8550 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1,9 +1,11 @@
 <script>
     import { onMount } from 'svelte';
     import { browser } from '$app/environment';
-    import { auth, isAuthenticated } from '$lib/stores/auth';
+    import { auth, isAuthenticated, isBot, isStickerCreator } from '$lib/stores/auth';
+    import { siteSettings } from '$lib/stores/siteSettings';
     import { goto } from '$app/navigation';
     import * as pgp from '$lib/pgp';
+    import GraffitiEditor from '$lib/components/GraffitiEditor.svelte';
     
     let activeTab = 'profile';
     let loading = false;
@@ -15,7 +17,26 @@
     let avatarFile = null;
     let avatarPreview = '';
     let avatarPreviewUrl = ''; // Separate preview for file upload
+    let bannerFile = null;
+    let bannerPreview = '';
+    let bannerPreviewUrl = ''; // Separate preview for banner upload
+    let bannerPosition = 50; // Y position percentage (0-100)
+    let bannerZoom = 100; // Zoom percentage (100-200)
+    let bannerPositionX = 50; // X position percentage (0-100)
     let hasProfileChanges = false;
+
+    // Graffiti
+    let graffitiUrl = '';
+    let graffitiData = null; // JSON pixel data if editing
+
+    // Banner editor state
+    let bannerEditorActive = false;
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let dragStartPosX = 0;
+    let dragStartPosY = 0;
+    let bannerEditorRef = null;
     
     // Password
     let oldPassword = '';
@@ -29,17 +50,7 @@
     let colorLoading = false;
     let colorError = '';
     let colorMessage = '';
-    
-    // Popular colors to choose from
-    const suggestedColors = [
-        '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#FD79A8',
-        '#A29BFE', '#6C5CE7', '#FAB1A0', '#74B9FF', '#A8E6CF', '#FFD3B6',
-        '#FF8CC3', '#00B894', '#00CEC9', '#0984E3', '#6C5CE7', '#E17055',
-        '#FDCB6E', '#55A3FF', '#FD79A8', '#BADC58', '#F8B739', '#FA8231',
-        '#EB3B5A', '#FC5C65', '#45AAF2', '#4B7BEC', '#A55EEA', '#D63031',
-        '#74B9FF', '#A29BFE', '#FD79A8', '#E17055', '#00B894', '#00CEC9'
-    ];
-    
+
     // PGP
     let pgpKeys = [];
     let pgpOnly = false;
@@ -62,7 +73,40 @@
     // Unlock key dialog
     let showUnlockDialog = false;
     let unlockPassphrase = '';
-    
+
+    // Security: clipboard auto-clear and deletion confirmation
+    let clipboardTimeout = null;
+    let showDeleteKeyDialog = false;
+    let deleteKeyConfirmText = '';
+    const DELETE_KEY_PHRASE = 'DELETE MY KEY';
+
+    // Bot API Keys
+    let botApiKeys = [];
+    let showCreateKeyModal = false;
+    let newKeyName = '';
+    let createdKey = null; // Holds the newly created key (shown once)
+    let botKeysLoading = false;
+    let botKeysError = '';
+    let botKeysMessage = '';
+
+    // Sticker Submissions
+    let stickerSubmissions = [];
+    let stickerFiles = [];
+    let stickerPreviews = {};
+    let stickerNames = {};
+    let stickerLoading = false;
+    let stickerError = '';
+    let stickerMessage = '';
+    let existingStickerNames = new Set(); // Track existing sticker names for duplicate checking
+
+    // Referral Codes
+    let referralCodes = [];
+    let referralLoading = false;
+    let referralError = '';
+    let referralMessage = '';
+    let referralPurchasing = false;
+    let referralSystemEnabled = false;
+
     // User data for safe access
     let currentUser = null;
     
@@ -81,7 +125,10 @@
         
         // Check if we have an encrypted key stored
         hasEncryptedKey = await pgp.hasEncryptedKey();
-        
+
+        // Load referral system settings
+        await loadReferralSettings();
+
         // Get fresh user data to ensure we have latest values
         try {
             const response = await fetch('/api/user/me', {
@@ -96,10 +143,15 @@
                     pgpOnly = data.user.isPgpOnly === true;
                     pgpOnlyEnabledAt = data.user.pgpOnlyEnabledAt || '';
                     avatarPreview = data.user.avatarUrl || '';
+                    bannerPreview = data.user.bannerUrl || '';
+                    bannerPosition = data.user.bannerPosition ?? 50;
+                    bannerZoom = data.user.bannerZoom ?? 100;
+                    bannerPositionX = data.user.bannerPositionX ?? 50;
+                    graffitiUrl = data.user.graffitiUrl || '';
                     userColor = data.user.colorCode || '#561D5E';
                     newColor = userColor;
                     currentUser = data.user;
-                    
+
                     // Update auth store with fresh data
                     auth.updateUser(data.user);
                 }
@@ -112,6 +164,11 @@
                 pgpOnly = $auth.user.isPgpOnly === true;
                 pgpOnlyEnabledAt = $auth.user.pgpOnlyEnabledAt || '';
                 avatarPreview = $auth.user.avatarUrl || '';
+                bannerPreview = $auth.user.bannerUrl || '';
+                bannerPosition = $auth.user.bannerPosition ?? 50;
+                bannerZoom = $auth.user.bannerZoom ?? 100;
+                bannerPositionX = $auth.user.bannerPositionX ?? 50;
+                graffitiUrl = $auth.user.graffitiUrl || '';
                 userColor = $auth.user.colorCode || '#561D5E';
                 newColor = userColor;
                 currentUser = $auth.user;
@@ -119,11 +176,22 @@
         }
         
         loadPgpKeys();
+
+        // Load bot API keys if user has bot role
+        if (currentUser?.isBot) {
+            loadBotApiKeys();
+        }
+
+        // Load sticker submissions and existing names if user is a sticker creator
+        if (currentUser?.isStickerCreator) {
+            loadExistingStickerNames();
+            loadStickerSubmissions();
+        }
     });
     
     async function loadPgpKeys() {
         if (!browser) return;
-        
+
         try {
             const response = await fetch('/api/user/pgp-keys', {
                 credentials: 'include'
@@ -136,7 +204,365 @@
             console.error('Failed to load PGP keys:', e);
         }
     }
-    
+
+    async function loadBotApiKeys() {
+        if (!browser) return;
+
+        botKeysLoading = true;
+        botKeysError = '';
+
+        try {
+            const response = await fetch('/api/user/bot-keys', {
+                credentials: 'include'
+            });
+            const data = await response.json();
+            if (data.success) {
+                botApiKeys = data.keys;
+            } else {
+                // If not authorized (not bot role), that's expected
+                if (response.status !== 403) {
+                    botKeysError = data.error || 'Failed to load API keys';
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load bot API keys:', e);
+        }
+
+        botKeysLoading = false;
+    }
+
+    async function createBotApiKey() {
+        if (!newKeyName.trim()) {
+            botKeysError = 'Key name is required';
+            return;
+        }
+
+        botKeysLoading = true;
+        botKeysError = '';
+
+        try {
+            const response = await fetch('/api/user/bot-keys', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ name: newKeyName.trim() })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Store the created key (shown once)
+                createdKey = data.key;
+                showCreateKeyModal = false;
+                newKeyName = '';
+                await loadBotApiKeys();
+            } else {
+                botKeysError = data.error || 'Failed to create API key';
+            }
+        } catch (e) {
+            botKeysError = 'Error creating API key';
+            console.error(e);
+        }
+
+        botKeysLoading = false;
+    }
+
+    async function deleteBotApiKey(keyId) {
+        if (!confirm('Are you sure you want to revoke this API key? Any bots using it will stop working.')) {
+            return;
+        }
+
+        botKeysLoading = true;
+        botKeysError = '';
+
+        try {
+            const response = await fetch(`/api/user/bot-keys/${keyId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                botKeysMessage = 'API key revoked';
+                await loadBotApiKeys();
+                setTimeout(() => { botKeysMessage = ''; }, 3000);
+            } else {
+                botKeysError = data.error || 'Failed to revoke API key';
+            }
+        } catch (e) {
+            botKeysError = 'Error revoking API key';
+            console.error(e);
+        }
+
+        botKeysLoading = false;
+    }
+
+    function copyApiKey(key) {
+        navigator.clipboard.writeText(key);
+        botKeysMessage = 'API key copied to clipboard';
+        setTimeout(() => { botKeysMessage = ''; }, 3000);
+    }
+
+    async function loadStickerSubmissions() {
+        if (!browser) return;
+
+        stickerLoading = true;
+        stickerError = '';
+
+        try {
+            const response = await fetch('/api/stickers/my-submissions', {
+                credentials: 'include'
+            });
+            const data = await response.json();
+            if (data.success) {
+                stickerSubmissions = data.submissions;
+                // Add pending submission names to existing names set
+                data.submissions
+                    .filter(s => s.status === 'pending')
+                    .forEach(s => existingStickerNames.add(s.name.toLowerCase()));
+            } else {
+                if (response.status !== 403) {
+                    stickerError = data.error || 'Failed to load submissions';
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load sticker submissions:', e);
+        }
+
+        stickerLoading = false;
+    }
+
+    async function loadExistingStickerNames() {
+        try {
+            const response = await fetch('/api/admin/stickers');
+            const data = await response.json();
+            if (data.success && data.stickers) {
+                existingStickerNames = new Set(data.stickers.map(s => s.name.toLowerCase()));
+            }
+        } catch (e) {
+            console.error('Failed to load existing sticker names:', e);
+        }
+    }
+
+    function isDuplicateStickerName(name) {
+        if (!name) return false;
+        return existingStickerNames.has(name.trim().toLowerCase());
+    }
+
+    function getStickerNameError(fileName) {
+        const name = stickerNames[fileName]?.trim();
+        if (!name) return null;
+        if (!/^[a-zA-Z0-9_]+$/.test(name)) {
+            return 'Only letters, numbers, and underscores allowed';
+        }
+        if (isDuplicateStickerName(name)) {
+            return 'A sticker with this name already exists';
+        }
+        // Check for duplicates within current selection
+        const duplicateInSelection = stickerFiles.filter(f =>
+            f.name !== fileName &&
+            stickerNames[f.name]?.trim().toLowerCase() === name.toLowerCase()
+        ).length > 0;
+        if (duplicateInSelection) {
+            return 'Duplicate name in your selection';
+        }
+        return null;
+    }
+
+    function handleStickerFileSelect(event) {
+        const files = Array.from(event.target.files);
+        if (!files.length) return;
+
+        stickerError = '';
+        const maxSize = 4 * 1024 * 1024; // 4MB
+
+        // Check file sizes and types
+        const oversizedFiles = files.filter(f => f.size > maxSize);
+        if (oversizedFiles.length > 0) {
+            stickerError = `File(s) too large (max 4MB): ${oversizedFiles.map(f => f.name).join(', ')}`;
+            event.target.value = '';
+            return;
+        }
+
+        const invalidFiles = files.filter(f => {
+            const ext = f.name.split('.').pop().toLowerCase();
+            return !['png', 'gif', 'webp', 'jpg', 'jpeg'].includes(ext);
+        });
+        if (invalidFiles.length > 0) {
+            stickerError = `Invalid file type(s): ${invalidFiles.map(f => f.name).join(', ')}. Only PNG, GIF, WebP, JPEG allowed.`;
+            event.target.value = '';
+            return;
+        }
+
+        stickerFiles = files;
+
+        // Initialize names and generate previews for each file
+        files.forEach(file => {
+            const nameWithoutExt = file.name.substring(0, file.name.lastIndexOf('.'));
+            stickerNames[file.name] = nameWithoutExt.replace(/[^a-zA-Z0-9_]/g, '_');
+
+            // Generate preview
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                stickerPreviews = { ...stickerPreviews, [file.name]: e.target.result };
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+
+    function removeStickerFile(fileName) {
+        stickerFiles = stickerFiles.filter(f => f.name !== fileName);
+        delete stickerNames[fileName];
+        delete stickerPreviews[fileName];
+        stickerNames = { ...stickerNames };
+        stickerPreviews = { ...stickerPreviews };
+    }
+
+    function cancelStickerUpload() {
+        stickerFiles = [];
+        stickerPreviews = {};
+        stickerNames = {};
+    }
+
+    async function submitStickers() {
+        if (stickerFiles.length === 0) {
+            stickerError = 'Please select at least one file';
+            return;
+        }
+
+        // Validate all sticker names
+        for (const file of stickerFiles) {
+            const name = stickerNames[file.name]?.trim();
+            if (!name) {
+                stickerError = `Please enter a name for ${file.name}`;
+                return;
+            }
+            const nameError = getStickerNameError(file.name);
+            if (nameError) {
+                stickerError = `${file.name}: ${nameError}`;
+                return;
+            }
+        }
+
+        stickerLoading = true;
+        stickerError = '';
+        stickerMessage = '';
+
+        try {
+            const formData = new FormData();
+            stickerFiles.forEach(file => {
+                formData.append('stickers', file);
+                formData.append(`name_${file.name}`, stickerNames[file.name]?.trim() || file.name);
+            });
+
+            const response = await fetch('/api/stickers/submit', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                stickerMessage = `${data.count || stickerFiles.length} sticker(s) submitted for approval!`;
+                stickerFiles = [];
+                stickerPreviews = {};
+                stickerNames = {};
+                await loadStickerSubmissions();
+                setTimeout(() => { stickerMessage = ''; }, 3000);
+            } else {
+                stickerError = data.error || 'Failed to submit sticker';
+            }
+        } catch (e) {
+            stickerError = 'Error submitting sticker';
+            console.error(e);
+        }
+
+        stickerLoading = false;
+    }
+
+    function getStatusBadgeClass(status) {
+        switch (status) {
+            case 'approved': return 'status-approved';
+            case 'denied': return 'status-denied';
+            default: return 'status-pending';
+        }
+    }
+
+    // Referral Code Functions
+    async function loadReferralSettings() {
+        if (!browser) return;
+        try {
+            const response = await fetch('/api/settings/referral');
+            const data = await response.json();
+            if (data.success) {
+                referralSystemEnabled = data.referralSystemEnabled && !data.registrationEnabled;
+            }
+        } catch (e) {
+            console.error('Error loading referral settings', e);
+        }
+    }
+
+    async function loadReferralCodes() {
+        if (!browser) return;
+        referralLoading = true;
+        referralError = '';
+
+        try {
+            const response = await fetch('/api/user/referral-codes', {
+                credentials: 'include'
+            });
+            const data = await response.json();
+            if (data.success) {
+                referralCodes = data.codes;
+            } else {
+                referralError = data.error || 'Failed to load codes';
+            }
+        } catch (e) {
+            referralError = 'Error loading referral codes';
+            console.error(e);
+        }
+
+        referralLoading = false;
+    }
+
+    async function purchaseReferralCode() {
+        if (!confirm('Purchase a referral code for 500 übercoin?')) return;
+
+        referralPurchasing = true;
+        referralError = '';
+
+        try {
+            const response = await fetch('/api/user/referral-codes/purchase', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const data = await response.json();
+
+            if (data.success) {
+                referralMessage = `Code purchased: ${data.code.code}`;
+                await loadReferralCodes();
+                // Refresh user data to update ubercoin balance
+                await auth.init();
+            } else {
+                referralError = data.error || 'Failed to purchase code';
+            }
+        } catch (e) {
+            referralError = 'Error purchasing code';
+            console.error(e);
+        }
+
+        referralPurchasing = false;
+        setTimeout(() => { referralMessage = ''; }, 5000);
+    }
+
+    function copyReferralCode(code) {
+        navigator.clipboard.writeText(code);
+        referralMessage = 'Code copied to clipboard';
+        setTimeout(() => { referralMessage = ''; }, 3000);
+    }
+
     function validatePassword(pass) {
         if (pass.length < 8) {
             return 'Password must be at least 8 characters';
@@ -156,12 +582,12 @@
         loading = true;
         
         try {
-            // Update bio
+            // Update bio and banner settings
             const response = await fetch('/api/user/profile', {
                 method: 'PUT',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
-                body: JSON.stringify({ bio })
+                body: JSON.stringify({ bio, bannerPosition, bannerZoom, bannerPositionX })
             });
             
             const data = await response.json();
@@ -176,31 +602,71 @@
             if (avatarFile) {
                 const formData = new FormData();
                 formData.append('file', avatarFile);
-                
+
                 const avatarResponse = await fetch('/api/user/avatar', {
                     method: 'POST',
                     credentials: 'include',
                     body: formData
                 });
-                
+
                 const avatarData = await avatarResponse.json();
-                
+
                 if (avatarResponse.ok && avatarData.success) {
                     avatarPreview = avatarData.avatarUrl;
                     avatarFile = null;
                     avatarPreviewUrl = '';
-                    
+
                     // Update current user and auth store
                     if (currentUser) {
                         currentUser = { ...currentUser, avatarUrl: avatarData.avatarUrl };
                         auth.updateUser(currentUser);
                     }
+
+                    // Store new token if provided (for updated avatar in JWT)
+                    if (avatarData.token) {
+                        localStorage.setItem('token', avatarData.token);
+                    }
                 } else {
                     error = avatarData.error || 'Failed to upload avatar';
                     loading = false;
                     return;
                 }
             }
+
+            // Upload banner if changed
+            if (bannerFile) {
+                const formData = new FormData();
+                formData.append('file', bannerFile);
+
+                const bannerResponse = await fetch('/api/user/banner', {
+                    method: 'POST',
+                    credentials: 'include',
+                    body: formData
+                });
+
+                const bannerData = await bannerResponse.json();
+
+                if (bannerResponse.ok && bannerData.success) {
+                    bannerPreview = bannerData.bannerUrl;
+                    bannerFile = null;
+                    bannerPreviewUrl = '';
+
+                    // Update current user and auth store
+                    if (currentUser) {
+                        currentUser = { ...currentUser, bannerUrl: bannerData.bannerUrl };
+                        auth.updateUser(currentUser);
+                    }
+
+                    // Store new token if provided (for updated banner in JWT)
+                    if (bannerData.token) {
+                        localStorage.setItem('token', bannerData.token);
+                    }
+                } else {
+                    error = bannerData.error || 'Failed to upload banner';
+                    loading = false;
+                    return;
+                }
+            }
             
             message = 'Profile updated successfully';
             error = '';
@@ -301,11 +767,7 @@
         
         colorLoading = false;
     }
-    
-    function selectSuggestedColor(color) {
-        newColor = color;
-    }
-    
+
     function handleColorInput(event) {
         const value = event.target.value;
         // Ensure it starts with # and is uppercase
@@ -583,14 +1045,141 @@
     function cancelAvatarChange() {
         avatarFile = null;
         avatarPreviewUrl = '';
-        hasProfileChanges = bio !== (currentUser?.bio || '');
+        checkProfileChanges();
+    }
+
+    async function handleBannerChange(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        error = '';
+
+        if (file.size > 500 * 1024) {
+            error = 'File too large (max 500KB)';
+            return;
+        }
+
+        const ext = file.name.split('.').pop().toLowerCase();
+        if (!['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
+            error = 'Invalid file type (jpg, png, gif only)';
+            return;
+        }
+
+        bannerFile = file;
+        hasProfileChanges = true;
+
+        // Reset zoom/position for new banner
+        bannerZoom = 100;
+        bannerPosition = 50;
+        bannerPositionX = 50;
+
+        // Preview using FileReader
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            bannerPreviewUrl = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    function cancelBannerChange() {
+        bannerFile = null;
+        bannerPreviewUrl = '';
+        // Restore original zoom/position values
+        bannerZoom = currentUser?.bannerZoom ?? 100;
+        bannerPosition = currentUser?.bannerPosition ?? 50;
+        bannerPositionX = currentUser?.bannerPositionX ?? 50;
+        checkProfileChanges();
+    }
+
+    function checkProfileChanges() {
+        hasProfileChanges = bio !== (currentUser?.bio || '') ||
+            avatarFile !== null ||
+            bannerFile !== null ||
+            bannerPosition !== (currentUser?.bannerPosition ?? 50) ||
+            bannerZoom !== (currentUser?.bannerZoom ?? 100) ||
+            bannerPositionX !== (currentUser?.bannerPositionX ?? 50);
+    }
+
+    // Banner editor drag handlers
+    function startDrag(e) {
+        if (!displayBanner) return;
+        isDragging = true;
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+        dragStartX = clientX;
+        dragStartY = clientY;
+        dragStartPosX = bannerPositionX;
+        dragStartPosY = bannerPosition;
+        e.preventDefault();
+    }
+
+    function onDrag(e) {
+        if (!isDragging || !bannerEditorRef) return;
+
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+
+        const rect = bannerEditorRef.getBoundingClientRect();
+        const deltaX = clientX - dragStartX;
+        const deltaY = clientY - dragStartY;
+
+        // Calculate the sensitivity based on zoom level - higher zoom = more movement per pixel
+        const zoomFactor = bannerZoom / 100;
+        const sensitivityX = 100 / (rect.width * (zoomFactor - 1 + 0.5));
+        const sensitivityY = 100 / (rect.height * (zoomFactor - 1 + 0.5));
+
+        // Moving the mouse right should move the visible area right (decrease positionX)
+        // Moving the mouse down should move the visible area down (decrease positionY)
+        let newPosX = dragStartPosX - (deltaX * sensitivityX);
+        let newPosY = dragStartPosY - (deltaY * sensitivityY);
+
+        // Clamp values
+        bannerPositionX = Math.max(0, Math.min(100, newPosX));
+        bannerPosition = Math.max(0, Math.min(100, newPosY));
+
+        hasProfileChanges = true;
+        e.preventDefault();
+    }
+
+    function endDrag() {
+        isDragging = false;
+    }
+
+    function handleZoomChange() {
+        hasProfileChanges = true;
     }
     
     function copyToClipboard(text) {
         navigator.clipboard.writeText(text);
         alert('Copied to clipboard!');
     }
-    
+
+    // Secure clipboard for private keys - auto-clears after 30 seconds
+    async function copyPrivateKeyToClipboard(text) {
+        await navigator.clipboard.writeText(text);
+        message = 'Copied to clipboard - will auto-clear in 30 seconds';
+
+        if (clipboardTimeout) clearTimeout(clipboardTimeout);
+        clipboardTimeout = setTimeout(async () => {
+            try {
+                await navigator.clipboard.writeText('');
+                message = 'Clipboard cleared for security';
+                setTimeout(() => { message = ''; }, 2000);
+            } catch (e) {
+                // Clipboard API may fail if page loses focus
+            }
+        }, 30000);
+    }
+
+    // Clear sensitive key data from memory
+    function clearSensitiveKeyData() {
+        generatedPrivateKey = '';
+        generatedPublicKey = '';
+        keyPassphrase = '';
+        confirmKeyPassphrase = '';
+        showGeneratedKeys = false;
+    }
+
     function downloadKey(content, filename) {
         const blob = new Blob([content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
@@ -636,25 +1225,48 @@
     }
     
     async function removeLocalKey() {
-        if (confirm('Remove the encrypted private key from this browser? You will need to re-import it later to use PGP login.')) {
-            await pgp.removeEncryptedPrivateKey();
-            hasEncryptedKey = false;
-            message = 'Local key removed';
-            setTimeout(() => { message = ''; }, 3000);
-        }
+        showDeleteKeyDialog = true;
+        deleteKeyConfirmText = '';
+    }
+
+    async function confirmRemoveLocalKey() {
+        if (deleteKeyConfirmText !== DELETE_KEY_PHRASE) return;
+
+        await pgp.removeEncryptedPrivateKey();
+        hasEncryptedKey = false;
+        showDeleteKeyDialog = false;
+        deleteKeyConfirmText = '';
+        message = 'Local key removed';
+        setTimeout(() => { message = ''; }, 3000);
+    }
+
+    function cancelRemoveLocalKey() {
+        showDeleteKeyDialog = false;
+        deleteKeyConfirmText = '';
     }
     
     // Track profile changes
     $: if (browser) {
-        hasProfileChanges = bio !== (currentUser?.bio || '') || avatarFile !== null;
+        hasProfileChanges = bio !== (currentUser?.bio || '') ||
+            avatarFile !== null ||
+            bannerFile !== null ||
+            bannerPosition !== (currentUser?.bannerPosition ?? 50) ||
+            bannerZoom !== (currentUser?.bannerZoom ?? 100) ||
+            bannerPositionX !== (currentUser?.bannerPositionX ?? 50);
     }
-    
+
     // Get username safely for display
     $: displayUsername = currentUser?.username || '';
     // Choose which avatar to show
     $: displayAvatar = avatarPreviewUrl || avatarPreview;
+    // Choose which banner to show
+    $: displayBanner = bannerPreviewUrl || bannerPreview;
 </script>
 
+<svelte:head>
+    <title>{$siteSettings.site_title} - Settings</title>
+</svelte:head>
+
 <style>
     .tab-nav {
         display: flex;
@@ -1020,6 +1632,489 @@
         gap: 1rem;
         margin-top: 1rem;
     }
+
+    .banner-preview-container {
+        width: 100%;
+        max-width: 400px;
+        height: 80px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        position: relative;
+    }
+
+    .banner-preview-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .banner-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .banner-position-control {
+        margin-top: 0.75rem;
+        padding: 0.75rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        border: 1px solid var(--border);
+    }
+
+    .banner-position-control label {
+        font-size: 0.85rem;
+        font-weight: 500;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    .position-slider-container {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .position-slider-container input[type="range"] {
+        flex: 1;
+        height: 6px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: var(--border);
+        border-radius: 3px;
+        cursor: pointer;
+    }
+
+    .position-slider-container input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 16px;
+        height: 16px;
+        background: var(--primary);
+        border-radius: 50%;
+        cursor: pointer;
+        transition: transform 0.15s ease;
+    }
+
+    .position-slider-container input[type="range"]::-webkit-slider-thumb:hover {
+        transform: scale(1.1);
+    }
+
+    .position-slider-container input[type="range"]::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        background: var(--primary);
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+    }
+
+    .position-label {
+        font-size: 0.75rem;
+        color: var(--gray);
+        min-width: 40px;
+        text-align: center;
+    }
+
+    /* Interactive banner editor styles */
+    .banner-editor-container {
+        width: 100%;
+        max-width: 400px;
+        margin-top: 1rem;
+    }
+
+    .banner-editor-preview {
+        width: 100%;
+        height: 100px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 2px solid var(--border);
+        position: relative;
+        cursor: grab;
+        user-select: none;
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    .banner-editor-preview:active {
+        cursor: grabbing;
+    }
+
+    .banner-editor-preview.dragging {
+        cursor: grabbing;
+        border-color: var(--primary);
+    }
+
+    .banner-editor-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+    }
+
+    .banner-editor-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.3);
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+    }
+
+    .banner-editor-preview:hover .banner-editor-overlay {
+        opacity: 1;
+    }
+
+    .banner-editor-hint {
+        color: white;
+        font-size: 0.85rem;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .banner-editor-controls {
+        margin-top: 1rem;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        border: 1px solid var(--border);
+    }
+
+    .zoom-control {
+        margin-bottom: 0.5rem;
+    }
+
+    .zoom-control label {
+        font-size: 0.85rem;
+        font-weight: 500;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .zoom-value {
+        font-family: monospace;
+        color: var(--primary);
+    }
+
+    .zoom-slider-container {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .zoom-slider-container input[type="range"] {
+        flex: 1;
+        height: 6px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: var(--border);
+        border-radius: 3px;
+        cursor: pointer;
+    }
+
+    .zoom-slider-container input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        background: var(--primary);
+        border-radius: 50%;
+        cursor: pointer;
+        transition: transform 0.15s ease;
+    }
+
+    .zoom-slider-container input[type="range"]::-webkit-slider-thumb:hover {
+        transform: scale(1.15);
+    }
+
+    .zoom-slider-container input[type="range"]::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        background: var(--primary);
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+    }
+
+    .zoom-label {
+        font-size: 0.75rem;
+        color: var(--gray);
+        min-width: 30px;
+    }
+
+    .position-display {
+        margin-top: 0.75rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--border);
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.75rem;
+        color: var(--gray);
+    }
+
+    .position-display span {
+        font-family: monospace;
+    }
+
+    .banner-editor-help {
+        font-size: 0.75rem;
+        color: var(--gray);
+        margin-top: 0.5rem;
+    }
+
+    .reset-banner-btn {
+        margin-top: 0.75rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.85rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--gray);
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .reset-banner-btn:hover {
+        border-color: var(--primary);
+        color: var(--white);
+    }
+
+    /* Sticker submission styles */
+    .sticker-preview-container {
+        width: 128px;
+        height: 128px;
+        border-radius: 8px;
+        border: 2px dashed var(--border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    .sticker-preview-container img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    .sticker-preview-placeholder {
+        color: var(--gray);
+        font-size: 0.85rem;
+        text-align: center;
+    }
+
+    .status-badge {
+        padding: 0.25rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+
+    .status-pending {
+        background: rgba(255, 193, 7, 0.2);
+        color: #ffc107;
+    }
+
+    .status-approved {
+        background: rgba(40, 167, 69, 0.2);
+        color: #28a745;
+    }
+
+    .status-denied {
+        background: rgba(220, 53, 69, 0.2);
+        color: #dc3545;
+    }
+
+    .submission-card {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        margin-bottom: 1rem;
+    }
+
+    .submission-card img {
+        width: 64px;
+        height: 64px;
+        object-fit: contain;
+        border-radius: 4px;
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    .submission-info {
+        flex: 1;
+    }
+
+    .submission-name {
+        font-weight: 600;
+        margin-bottom: 0.25rem;
+    }
+
+    .submission-date {
+        font-size: 0.85rem;
+        color: var(--gray);
+    }
+
+    .submission-denial-reason {
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        background: rgba(220, 53, 69, 0.1);
+        border: 1px solid rgba(220, 53, 69, 0.3);
+        border-radius: 4px;
+        font-size: 0.85rem;
+        color: #dc3545;
+    }
+
+    /* Multi-file sticker upload styles */
+    .sticker-upload-card {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        position: relative;
+    }
+
+    .sticker-upload-preview {
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+        border-radius: 6px;
+        border: 1px solid var(--border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    .sticker-upload-preview img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    .sticker-upload-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .sticker-remove-btn {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: none;
+        background: rgba(220, 53, 69, 0.8);
+        color: white;
+        font-size: 1rem;
+        line-height: 1;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.2s;
+    }
+
+    .sticker-remove-btn:hover {
+        background: #dc3545;
+    }
+
+    /* Sticker name validation error styles */
+    .sticker-upload-card.has-error {
+        border-color: #dc3545;
+        background: rgba(220, 53, 69, 0.05);
+    }
+
+    .input-error {
+        border-color: #dc3545 !important;
+        background: rgba(220, 53, 69, 0.1) !important;
+    }
+
+    .sticker-name-error {
+        font-size: 0.75rem;
+        color: #dc3545;
+        margin-top: 0.25rem;
+    }
+
+    /* Referral code styles */
+    .referral-code-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .referral-code-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        border: 1px solid var(--border);
+        flex-wrap: wrap;
+    }
+
+    .referral-code-item.available {
+        border-color: rgba(40, 167, 69, 0.3);
+        background: rgba(40, 167, 69, 0.05);
+    }
+
+    .referral-code-item.used {
+        opacity: 0.7;
+    }
+
+    .referral-code {
+        font-family: monospace;
+        font-size: 1.1rem;
+        padding: 0.5rem 1rem;
+        background: var(--black);
+        border-radius: 4px;
+        letter-spacing: 2px;
+    }
+
+    .referral-code.used {
+        text-decoration: line-through;
+        color: var(--gray);
+    }
+
+    .referral-code-date {
+        color: var(--gray);
+        font-size: 0.85rem;
+        margin-left: auto;
+    }
+
+    .referral-used-by {
+        font-size: 0.9rem;
+        color: var(--gray);
+    }
+
+    .btn-sm {
+        padding: 0.35rem 0.75rem;
+        font-size: 0.85rem;
+    }
 </style>
 
 <div class="container">
@@ -1033,12 +2128,12 @@
         >
             Profile
         </button>
-        <button 
-            class="tab-button" 
-            class:active={activeTab === 'appearance'}
-            on:click={() => activeTab = 'appearance'}
+        <button
+            class="tab-button"
+            class:active={activeTab === 'settings'}
+            on:click={() => activeTab = 'settings'}
         >
-            Appearance
+            Settings
         </button>
         <button 
             class="tab-button" 
@@ -1047,13 +2142,40 @@
         >
             Password
         </button>
-        <button 
-            class="tab-button" 
+        <button
+            class="tab-button"
             class:active={activeTab === 'pgp'}
             on:click={() => activeTab = 'pgp'}
         >
             PGP Keys
         </button>
+        {#if $isBot}
+            <button
+                class="tab-button"
+                class:active={activeTab === 'bot-keys'}
+                on:click={() => { activeTab = 'bot-keys'; loadBotApiKeys(); }}
+            >
+                Bot API Keys
+            </button>
+        {/if}
+        {#if $isStickerCreator}
+            <button
+                class="tab-button"
+                class:active={activeTab === 'stickers'}
+                on:click={() => { activeTab = 'stickers'; loadExistingStickerNames(); loadStickerSubmissions(); }}
+            >
+                Stickers
+            </button>
+        {/if}
+        {#if referralSystemEnabled}
+            <button
+                class="tab-button"
+                class:active={activeTab === 'referrals'}
+                on:click={() => { activeTab = 'referrals'; loadReferralCodes(); }}
+            >
+                Referrals
+            </button>
+        {/if}
     </div>
     
     {#if activeTab === 'profile'}
@@ -1116,7 +2238,142 @@
                     </div>
                 </div>
             </div>
-            
+
+            <div class="form-group">
+                <label for="banner-upload">Profile Banner</label>
+                <p style="color: var(--gray); font-size: 0.85rem; margin-bottom: 0.75rem;">
+                    Displayed in chat profile previews.{#if bannerFile} Use zoom and drag to position your banner.{/if}
+                </p>
+
+                {#if bannerFile && bannerPreviewUrl}
+                    <!-- Interactive editor only when uploading a new banner -->
+                    <div class="banner-editor-container">
+                        <!-- Interactive preview with drag to position -->
+                        <div
+                            class="banner-editor-preview"
+                            class:dragging={isDragging}
+                            bind:this={bannerEditorRef}
+                            on:mousedown={startDrag}
+                            on:mousemove={onDrag}
+                            on:mouseup={endDrag}
+                            on:mouseleave={endDrag}
+                            on:touchstart={startDrag}
+                            on:touchmove={onDrag}
+                            on:touchend={endDrag}
+                            role="slider"
+                            aria-label="Drag to position banner"
+                            aria-valuenow={bannerPosition}
+                            tabindex="0"
+                        >
+                            <img
+                                src={bannerPreviewUrl}
+                                alt="Banner preview"
+                                class="banner-editor-img"
+                                style="object-position: {bannerPositionX}% {bannerPosition}%; transform: scale({bannerZoom / 100}); transform-origin: {bannerPositionX}% {bannerPosition}%;"
+                            />
+                            <div class="banner-editor-overlay">
+                                <span class="banner-editor-hint">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M5 9l-3 3l3 3M9 5l3-3l3 3M15 19l3 3l-3 3M19 9l3 3l-3 3M2 12h20M12 2v20"/>
+                                    </svg>
+                                    Drag to reposition
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Zoom and position controls -->
+                        <div class="banner-editor-controls">
+                            <div class="zoom-control">
+                                <label for="banner-zoom">
+                                    Zoom
+                                    <span class="zoom-value">{bannerZoom}%</span>
+                                </label>
+                                <div class="zoom-slider-container">
+                                    <span class="zoom-label">100%</span>
+                                    <input
+                                        id="banner-zoom"
+                                        type="range"
+                                        min="100"
+                                        max="200"
+                                        step="5"
+                                        bind:value={bannerZoom}
+                                        on:input={handleZoomChange}
+                                    />
+                                    <span class="zoom-label">200%</span>
+                                </div>
+                            </div>
+
+                            <div class="position-display">
+                                <span>X: {Math.round(bannerPositionX)}%</span>
+                                <span>Y: {Math.round(bannerPosition)}%</span>
+                            </div>
+
+                            <button
+                                type="button"
+                                class="reset-banner-btn"
+                                on:click={() => {
+                                    bannerZoom = 100;
+                                    bannerPosition = 50;
+                                    bannerPositionX = 50;
+                                    hasProfileChanges = true;
+                                }}
+                            >
+                                Reset to Default
+                            </button>
+                        </div>
+
+                        <p class="banner-editor-help">
+                            Use the slider to zoom in, then drag the preview to position your banner.
+                        </p>
+                    </div>
+                {:else if bannerPreview}
+                    <!-- Static preview for existing banner (no drag/zoom) -->
+                    <div class="banner-preview-container">
+                        <img
+                            src={bannerPreview}
+                            alt="Banner"
+                            class="banner-preview-img"
+                            style="object-position: {bannerPositionX}% {bannerPosition}%; transform: scale({bannerZoom / 100}); transform-origin: {bannerPositionX}% {bannerPosition}%;"
+                        />
+                    </div>
+                {:else}
+                    <div class="banner-preview-container">
+                        <div class="banner-placeholder" style="background: linear-gradient(135deg, {userColor} 0%, {userColor}66 100%);">
+                            <span>No banner set</span>
+                        </div>
+                    </div>
+                {/if}
+
+                <div style="margin-top: 0.75rem;">
+                    <div class="file-input-wrapper">
+                        <div class="file-input-button">{displayBanner ? 'Change Banner' : 'Choose Banner'}</div>
+                        <input
+                            id="banner-upload"
+                            type="file"
+                            accept="image/jpeg,image/png,image/gif"
+                            on:change={handleBannerChange}
+                        />
+                    </div>
+                    {#if bannerFile}
+                        <button
+                            class="btn btn-secondary"
+                            style="margin-left: 0.5rem;"
+                            on:click={cancelBannerChange}
+                        >
+                            Cancel
+                        </button>
+                    {/if}
+                    <div style="font-size: 0.85rem; color: var(--gray); margin-top: 0.5rem;">
+                        Max 500KB, JPG/PNG/GIF only
+                    </div>
+                    {#if bannerPreview && !bannerFile && !bannerPreviewUrl}
+                        <a href={bannerPreview} target="_blank" class="avatar-link">
+                            {bannerPreview}
+                        </a>
+                    {/if}
+                </div>
+            </div>
+
             <div class="form-group">
                 <label for="bio">Bio</label>
                 <textarea
@@ -1126,67 +2383,64 @@
                     placeholder="Tell us about yourself..."
                 />
             </div>
-            
-            <button 
+
+            <button
                 on:click={updateProfile}
                 disabled={loading || !hasProfileChanges}
             >
                 {loading ? 'Saving...' : 'Save Profile'}
             </button>
         </div>
-    {:else if activeTab === 'appearance'}
-        <div class="card">
-            <h2>Appearance Settings</h2>
-            
+
+        <!-- Profile Color Section -->
+        <div class="card" style="margin-top: 2rem;">
+            <h2>Profile Color</h2>
+            <p style="color: var(--gray); font-size: 0.9rem; margin-bottom: 1rem;">
+                Your unique color appears next to your name across the platform
+            </p>
+
             {#if colorMessage}
                 <div class="success" style="margin-bottom: 1rem;">{colorMessage}</div>
             {/if}
-            
+
             {#if colorError}
                 <div class="error" style="margin-bottom: 1rem;">{colorError}</div>
             {/if}
-            
-            <div class="form-group">
-                <label>Profile Color</label>
-                <p style="color: var(--gray); font-size: 0.9rem; margin-bottom: 1rem;">
-                    Your unique color appears next to your name across the platform
-                </p>
-                
-                <div class="color-picker-container">
-                    <div style="display: flex; align-items: center; gap: 1rem;">
-                        <div 
-                            class="color-preview" 
-                            style="background: {userColor};"
-                            title="Current color"
-                        ></div>
-                        <div>
-                            <div style="font-family: monospace; font-size: 1.1rem;">
-                                {userColor}
-                            </div>
-                            <div style="font-size: 0.85rem; color: var(--gray);">
-                                Current color
-                            </div>
+
+            <div class="color-picker-container">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <div
+                        class="color-preview"
+                        style="background: {userColor};"
+                        title="Current color"
+                    ></div>
+                    <div>
+                        <div style="font-family: monospace; font-size: 1.1rem;">
+                            {userColor}
+                        </div>
+                        <div style="font-size: 0.85rem; color: var(--gray);">
+                            Current color
                         </div>
                     </div>
-                    
-                    <button 
-                        class="btn btn-secondary"
-                        on:click={() => { showColorPicker = !showColorPicker; newColor = userColor; }}
-                    >
-                        {showColorPicker ? 'Cancel' : 'Change Color'}
-                    </button>
                 </div>
+
+                <button
+                    class="btn btn-secondary"
+                    on:click={() => { showColorPicker = !showColorPicker; newColor = userColor; }}
+                >
+                    {showColorPicker ? 'Cancel' : 'Change Color'}
+                </button>
             </div>
-            
+
             {#if showColorPicker}
                 <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(86, 29, 94, 0.1); border: 1px solid rgba(86, 29, 94, 0.3); border-radius: 8px;">
                     <h3 style="margin-bottom: 1rem;">Choose a new color</h3>
-                    
+
                     <div class="form-group">
                         <label for="color-input">Custom Color</label>
                         <div class="color-input-wrapper">
-                            <div 
-                                class="color-preview" 
+                            <div
+                                class="color-preview"
                                 style="background: {isValidColor(newColor) ? newColor : '#000'};"
                             ></div>
                             <input
@@ -1210,30 +2464,15 @@
                             Enter a hex color code (e.g., #FF6B6B)
                         </small>
                     </div>
-                    
-                    <div class="form-group">
-                        <label>Suggested Colors</label>
-                        <div class="color-grid">
-                            {#each suggestedColors as color}
-                                <button
-                                    class="color-option"
-                                    class:selected={newColor === color}
-                                    style="background: {color};"
-                                    on:click={() => selectSuggestedColor(color)}
-                                    title={color}
-                                ></button>
-                            {/each}
-                        </div>
-                    </div>
-                    
+
                     <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
-                        <button 
+                        <button
                             on:click={updateColor}
                             disabled={colorLoading || !isValidColor(newColor) || newColor === userColor}
                         >
                             {colorLoading ? 'Updating...' : 'Save Color'}
                         </button>
-                        <button 
+                        <button
                             class="btn btn-secondary"
                             on:click={() => { showColorPicker = false; newColor = userColor; }}
                             disabled={colorLoading}
@@ -1241,12 +2480,12 @@
                             Cancel
                         </button>
                     </div>
-                    
+
                     {#if newColor && newColor !== userColor}
                         <div style="margin-top: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 4px;">
                             <div style="display: flex; align-items: center; gap: 1rem;">
-                                <div 
-                                    class="color-preview" 
+                                <div
+                                    class="color-preview"
                                     style="background: {newColor};"
                                 ></div>
                                 <div>
@@ -1259,6 +2498,87 @@
                 </div>
             {/if}
         </div>
+    {:else if activeTab === 'settings'}
+        <!-- Graffiti Section -->
+        <div class="card">
+            <h2>Graffiti</h2>
+            <p style="color: var(--gray); font-size: 0.9rem; margin-bottom: 1.5rem;">
+                Create your personal 88x33 pixel art signature. Use <code>/graffiti</code> in chat to show it off!
+            </p>
+
+            {#if graffitiUrl}
+                <div class="graffiti-preview" style="margin-bottom: 1.5rem;">
+                    <p style="font-size: 0.85rem; color: var(--gray); margin-bottom: 0.5rem;">Current Graffiti:</p>
+                    <img
+                        src={graffitiUrl}
+                        alt="Your graffiti"
+                        style="image-rendering: pixelated; width: 88px; height: 33px; border: 1px solid var(--border);"
+                    />
+                </div>
+            {/if}
+
+            <GraffitiEditor
+                existingUrl={graffitiUrl}
+                on:save={(e) => {
+                    graffitiUrl = e.detail.url;
+                    auth.updateUser({ ...currentUser, graffitiUrl: e.detail.url });
+                }}
+                on:delete={() => {
+                    graffitiUrl = '';
+                    auth.updateUser({ ...currentUser, graffitiUrl: null });
+                }}
+            />
+        </div>
+
+        <!-- Terminal Settings -->
+        <div class="card" style="margin-top: 2rem;">
+            <h2>Terminal Settings</h2>
+            <p style="color: var(--gray); font-size: 0.9rem; margin-bottom: 1.5rem;">
+                Configure the site-wide terminal hotkey
+            </p>
+
+            <div class="form-group">
+                <label for="terminal-hotkey">Terminal Hotkey</label>
+                <p style="color: var(--gray); font-size: 0.875rem; margin-bottom: 1rem;">
+                    Press a key to set it as the terminal toggle hotkey
+                </p>
+                <input
+                    type="text"
+                    id="terminal-hotkey"
+                    value={localStorage.getItem('terminalHotkey') || '`'}
+                    readonly
+                    on:keydown={(e) => {
+                        e.preventDefault();
+                        if (e.key && e.key.length === 1) {
+                            localStorage.setItem('terminalHotkey', e.key);
+                            e.target.value = e.key;
+                            message = `Terminal hotkey changed to '${e.key}'. Refresh the page to apply.`;
+                            setTimeout(() => message = '', 3000);
+                        }
+                    }}
+                    style="font-family: monospace; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.05);"
+                    placeholder="Press a key..."
+                />
+                <p style="font-size: 0.75rem; color: var(--gray); margin-top: 0.5rem;">
+                    Default: ` (backtick). Current: {localStorage.getItem('terminalHotkey') || '`'}
+                </p>
+            </div>
+
+            <div style="margin-top: 1rem;">
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    on:click={() => {
+                        localStorage.setItem('terminalHotkey', '`');
+                        document.getElementById('terminal-hotkey').value = '`';
+                        message = 'Terminal hotkey reset to default (`)';
+                        setTimeout(() => message = '', 3000);
+                    }}
+                >
+                    Reset to Default
+                </button>
+            </div>
+        </div>
     {:else if activeTab === 'password'}
         <div class="card">
             <h2>Change Password</h2>
@@ -1492,7 +2812,7 @@
                                 style="font-family: monospace; font-size: 0.8rem;"
                             />
                             <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-                                <button type="button" on:click={() => copyToClipboard(generatedPrivateKey)}>
+                                <button type="button" on:click={() => copyPrivateKeyToClipboard(generatedPrivateKey)}>
                                     Copy
                                 </button>
                                 <button type="button" class="btn-secondary" on:click={() => downloadKey(generatedPrivateKey, `${displayUsername}-private-key.asc`)}>
@@ -1564,9 +2884,355 @@
                 </div>
             {/if}
         </div>
+    {:else if activeTab === 'bot-keys' && $isBot}
+        <div class="card">
+            <h2>Bot API Keys</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Create API keys for your chatbots. Bots can use these keys to connect to chat rooms and send/receive messages.
+            </p>
+
+            {#if botKeysMessage}
+                <div class="success" style="margin-bottom: 1rem;">{botKeysMessage}</div>
+            {/if}
+
+            {#if botKeysError}
+                <div class="error" style="margin-bottom: 1rem;">{botKeysError}</div>
+            {/if}
+
+            {#if createdKey}
+                <div class="warning-content" style="background: rgba(40, 167, 69, 0.1); border-color: var(--success); margin-bottom: 2rem;">
+                    <h3 style="color: var(--success); margin-bottom: 1rem;">API Key Created!</h3>
+                    <p style="margin-bottom: 1rem;">
+                        <strong>Save this key now</strong> - it won't be shown again!
+                    </p>
+                    <div class="form-group">
+                        <label>API Key for "{createdKey.name}"</label>
+                        <div style="display: flex; gap: 0.5rem; align-items: center;">
+                            <input
+                                type="text"
+                                value={createdKey.apiKey}
+                                readonly
+                                style="font-family: monospace; flex: 1;"
+                            />
+                            <button on:click={() => copyApiKey(createdKey.apiKey)}>
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                    <button class="btn btn-secondary" on:click={() => createdKey = null}>
+                        Done
+                    </button>
+                </div>
+            {/if}
+
+            <h3>Your API Keys</h3>
+
+            {#if botKeysLoading}
+                <p style="color: var(--gray);">Loading...</p>
+            {:else if botApiKeys.length > 0}
+                <div class="table" style="margin-bottom: 2rem;">
+                    <table style="width: 100%;">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Created</th>
+                                <th>Last Used</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each botApiKeys as key}
+                                <tr>
+                                    <td>{key.name}</td>
+                                    <td>{new Date(key.createdAt).toLocaleDateString()}</td>
+                                    <td>{key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleDateString() : 'Never'}</td>
+                                    <td>
+                                        <button
+                                            class="btn btn-danger btn-sm"
+                                            on:click={() => deleteBotApiKey(key.id)}
+                                            disabled={botKeysLoading}
+                                        >
+                                            Revoke
+                                        </button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <p style="color: var(--gray); margin-bottom: 2rem;">No API keys yet. Create one to get started!</p>
+            {/if}
+
+            <button on:click={() => showCreateKeyModal = true} disabled={botKeysLoading}>
+                Create New API Key
+            </button>
+
+            <div style="margin-top: 2rem; padding: 1rem; background: rgba(86, 29, 94, 0.1); border: 1px solid rgba(86, 29, 94, 0.3); border-radius: 8px;">
+                <h4 style="margin-bottom: 0.5rem;">Usage Example</h4>
+                <pre style="background: var(--black); padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.85rem;"><code>import {'{'} ChatBot {'}'} from 'realms-chat-bot';
+
+const bot = new ChatBot({'{'}
+  name: 'MyBot',
+  apiKey: 'key_xxx...',
+  realm: 'realm-name'
+{'}'});
+
+bot.messageHandler = (msg) => {'{'}
+  if (msg.content === '!hello') {'{'}
+    bot.print('Hello there!');
+  {'}'}
+{'}'};
+
+bot.connect();</code></pre>
+            </div>
+        </div>
+    {:else if activeTab === 'stickers' && $isStickerCreator}
+        <div class="card">
+            <h2>Submit Stickers</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                As a sticker creator, you can submit new stickers for approval. Once approved by an admin, your stickers will be available for everyone to use.
+            </p>
+
+            {#if stickerMessage}
+                <div class="success" style="margin-bottom: 1rem;">{stickerMessage}</div>
+            {/if}
+
+            {#if stickerError}
+                <div class="error" style="margin-bottom: 1rem;">{stickerError}</div>
+            {/if}
+
+            <div style="margin-bottom: 2rem;">
+                <div class="form-group">
+                    <label for="sticker-files">Select Sticker Files</label>
+                    <input
+                        id="sticker-files"
+                        type="file"
+                        multiple
+                        accept="image/png,image/gif,image/webp,image/jpeg"
+                        on:change={handleStickerFileSelect}
+                        style="margin-bottom: 0.5rem;"
+                    />
+                    <div style="font-size: 0.85rem; color: var(--gray);">
+                        PNG, GIF, WebP, or JPEG only. Max 4MB per file. Select multiple files at once.
+                    </div>
+                </div>
+
+                {#if stickerFiles.length > 0}
+                    <div style="margin-top: 1.5rem;">
+                        <h3>Selected Files ({stickerFiles.length})</h3>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem;">
+                            {#each stickerFiles as file (file.name)}
+                                {@const nameError = getStickerNameError(file.name)}
+                                <div class="sticker-upload-card" class:has-error={nameError}>
+                                    <div class="sticker-upload-preview">
+                                        {#if stickerPreviews[file.name]}
+                                            <img src={stickerPreviews[file.name]} alt={file.name} />
+                                        {:else}
+                                            <span class="sticker-preview-placeholder">Loading...</span>
+                                        {/if}
+                                    </div>
+                                    <div class="sticker-upload-info">
+                                        <div style="font-size: 0.75rem; color: var(--gray); margin-bottom: 0.5rem; word-break: break-all;">
+                                            {file.name}
+                                        </div>
+                                        <input
+                                            type="text"
+                                            placeholder="Sticker name"
+                                            bind:value={stickerNames[file.name]}
+                                            maxlength="50"
+                                            class:input-error={nameError}
+                                            style="width: 100%; padding: 0.5rem; font-size: 0.9rem;"
+                                        />
+                                        {#if nameError}
+                                            <div class="sticker-name-error">{nameError}</div>
+                                        {/if}
+                                    </div>
+                                    <button
+                                        class="sticker-remove-btn"
+                                        on:click={() => removeStickerFile(file.name)}
+                                        title="Remove"
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            {/each}
+                        </div>
+
+                        <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
+                            <button
+                                on:click={submitStickers}
+                                disabled={stickerLoading || stickerFiles.length === 0 || stickerFiles.some(f => getStickerNameError(f.name))}
+                            >
+                                {stickerLoading ? 'Submitting...' : `Submit ${stickerFiles.length} Sticker(s) for Approval`}
+                            </button>
+                            <button
+                                class="btn btn-secondary"
+                                on:click={cancelStickerUpload}
+                                disabled={stickerLoading}
+                            >
+                                Clear All
+                            </button>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+
+            <h3>Your Submissions</h3>
+
+            {#if stickerLoading && stickerSubmissions.length === 0}
+                <p style="color: var(--gray);">Loading...</p>
+            {:else if stickerSubmissions.length > 0}
+                <div>
+                    {#each stickerSubmissions as submission}
+                        <div class="submission-card">
+                            <img src={submission.filePath || submission.imageUrl} alt={submission.name} />
+                            <div class="submission-info">
+                                <div class="submission-name">:{submission.name}:</div>
+                                <div class="submission-date">
+                                    Submitted {new Date(submission.createdAt).toLocaleDateString()}
+                                </div>
+                                {#if submission.denialReason}
+                                    <div class="submission-denial-reason">
+                                        Reason: {submission.denialReason}
+                                    </div>
+                                {/if}
+                            </div>
+                            <span class="status-badge {getStatusBadgeClass(submission.status)}">
+                                {submission.status}
+                            </span>
+                        </div>
+                    {/each}
+                </div>
+            {:else}
+                <p style="color: var(--gray);">No submissions yet. Submit your first sticker above!</p>
+            {/if}
+        </div>
+
+    {:else if activeTab === 'referrals' && referralSystemEnabled}
+        <div class="card">
+            <h2>Referral Codes</h2>
+            <p style="color: var(--gray); margin-bottom: 1.5rem;">
+                Purchase referral codes to invite new users. Each code costs 500 übercoin and can only be used once.
+            </p>
+
+            {#if referralMessage}
+                <div class="success" style="margin-bottom: 1rem;">{referralMessage}</div>
+            {/if}
+            {#if referralError}
+                <div class="error" style="margin-bottom: 1rem;">{referralError}</div>
+            {/if}
+
+            <div style="margin-bottom: 2rem;">
+                <button
+                    on:click={purchaseReferralCode}
+                    disabled={referralPurchasing}
+                >
+                    {referralPurchasing ? 'Purchasing...' : 'Purchase Code (500 übercoin)'}
+                </button>
+            </div>
+
+            {#if referralLoading}
+                <p>Loading codes...</p>
+            {:else if referralCodes.length === 0}
+                <p style="color: var(--gray); font-style: italic;">
+                    You haven't purchased any referral codes yet.
+                </p>
+            {:else}
+                <h3>Your Codes</h3>
+
+                <!-- Available Codes -->
+                {@const availableCodes = referralCodes.filter(c => !c.isUsed)}
+                {#if availableCodes.length > 0}
+                    <div style="margin-bottom: 2rem;">
+                        <h4 style="color: #28a745; margin-bottom: 1rem;">
+                            Available ({availableCodes.length})
+                        </h4>
+                        <div class="referral-code-list">
+                            {#each availableCodes as code}
+                                <div class="referral-code-item available">
+                                    <code class="referral-code">{code.code}</code>
+                                    <button
+                                        class="btn btn-sm"
+                                        on:click={() => copyReferralCode(code.code)}
+                                    >
+                                        Copy
+                                    </button>
+                                    <span class="referral-code-date">
+                                        Created {new Date(code.createdAt).toLocaleDateString()}
+                                    </span>
+                                </div>
+                            {/each}
+                        </div>
+                    </div>
+                {/if}
+
+                <!-- Used Codes -->
+                {@const usedCodes = referralCodes.filter(c => c.isUsed)}
+                {#if usedCodes.length > 0}
+                    <div>
+                        <h4 style="color: var(--gray); margin-bottom: 1rem;">
+                            Used ({usedCodes.length})
+                        </h4>
+                        <div class="referral-code-list">
+                            {#each usedCodes as code}
+                                <div class="referral-code-item used">
+                                    <code class="referral-code used">{code.code}</code>
+                                    <span class="referral-used-by">
+                                        Used by <strong>{code.usedByUsername}</strong>
+                                    </span>
+                                    <span class="referral-code-date">
+                                        {new Date(code.usedAt).toLocaleDateString()}
+                                    </span>
+                                </div>
+                            {/each}
+                        </div>
+                    </div>
+                {/if}
+            {/if}
+        </div>
     {/if}
 </div>
 
+{#if showCreateKeyModal}
+    <div class="warning-modal">
+        <div class="warning-content" style="border-color: var(--primary);">
+            <h2>Create Bot API Key</h2>
+            <p style="margin-bottom: 1rem;">Give your API key a descriptive name (e.g., "Echo Bot", "Trivia Bot")</p>
+
+            {#if botKeysError}
+                <div class="error" style="margin-bottom: 1rem;">{botKeysError}</div>
+            {/if}
+
+            <div class="form-group">
+                <label for="key-name">Key Name</label>
+                <input
+                    type="text"
+                    id="key-name"
+                    bind:value={newKeyName}
+                    placeholder="My Bot"
+                    maxlength="100"
+                />
+            </div>
+
+            <div class="warning-actions">
+                <button
+                    class="btn btn-secondary"
+                    on:click={() => { showCreateKeyModal = false; newKeyName = ''; botKeysError = ''; }}
+                >
+                    Cancel
+                </button>
+                <button
+                    on:click={createBotApiKey}
+                    disabled={botKeysLoading || !newKeyName.trim()}
+                >
+                    {botKeysLoading ? 'Creating...' : 'Create Key'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
 {#if showPgpWarning}
     <div class="warning-modal">
         <div class="warning-content">
@@ -1661,4 +3327,46 @@
             </div>
         </div>
     </div>
+{/if}
+
+{#if showDeleteKeyDialog}
+    <div class="warning-modal">
+        <div class="warning-content">
+            <h2 style="color: var(--error);">Delete Local Key</h2>
+            <p style="margin-bottom: 1rem;">
+                This will remove the encrypted private key from this browser.
+                You will need to re-import it later to use PGP login.
+            </p>
+            <p style="margin-bottom: 1rem; color: var(--error); font-weight: bold;">
+                Make sure you have your private key backed up before proceeding!
+            </p>
+
+            <div class="form-group">
+                <label for="delete-confirm">Type "{DELETE_KEY_PHRASE}" to confirm:</label>
+                <input
+                    type="text"
+                    id="delete-confirm"
+                    bind:value={deleteKeyConfirmText}
+                    placeholder={DELETE_KEY_PHRASE}
+                    autocomplete="off"
+                />
+            </div>
+
+            <div class="warning-actions">
+                <button
+                    class="btn btn-secondary"
+                    on:click={cancelRemoveLocalKey}
+                >
+                    Cancel
+                </button>
+                <button
+                    style="background: var(--error);"
+                    on:click={confirmRemoveLocalKey}
+                    disabled={deleteKeyConfirmText !== DELETE_KEY_PHRASE}
+                >
+                    Delete Key
+                </button>
+            </div>
+        </div>
+    </div>
 {/if}
\ No newline at end of file
diff --git a/frontend/src/routes/stats/+page.svelte b/frontend/src/routes/stats/+page.svelte
new file mode 100644
index 0000000..d7fcf2d
--- /dev/null
+++ b/frontend/src/routes/stats/+page.svelte
@@ -0,0 +1,225 @@
+<script>
+    import { onMount } from 'svelte';
+    import { siteSettings } from '$lib/stores/siteSettings';
+
+    let stickerStats = [];
+    let totalUsage = 0;
+    let loading = true;
+    let error = '';
+
+    onMount(async () => {
+        await loadStickerStats();
+    });
+
+    async function loadStickerStats() {
+        loading = true;
+        error = '';
+        try {
+            const response = await fetch('/api/stats/stickers?limit=50');
+            if (response.ok) {
+                const data = await response.json();
+                if (data.success) {
+                    stickerStats = data.stickers || [];
+                    totalUsage = data.totalUsage || 0;
+                } else {
+                    error = 'Failed to load sticker statistics';
+                }
+            } else {
+                error = 'Failed to load sticker statistics';
+            }
+        } catch (e) {
+            error = 'Error loading statistics';
+            console.error(e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function formatNumber(num) {
+        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+        if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+        return num.toString();
+    }
+</script>
+
+<svelte:head>
+    <title>Statistics - {$siteSettings.title || 'Stream'}</title>
+</svelte:head>
+
+<div class="stats-container">
+    <h1>Site Statistics</h1>
+
+    <section class="stats-section">
+        <h2>Top Stickers</h2>
+        <p class="total-usage">Total sticker uses: <span class="highlight">{formatNumber(totalUsage)}</span></p>
+
+        {#if loading}
+            <div class="loading">Loading statistics...</div>
+        {:else if error}
+            <div class="error">{error}</div>
+        {:else if stickerStats.length === 0}
+            <div class="empty">No sticker usage data yet. Start chatting with stickers!</div>
+        {:else}
+            <div class="sticker-leaderboard">
+                {#each stickerStats as sticker, index}
+                    <div class="sticker-row" class:top-1={index === 0} class:top-2={index === 1} class:top-3={index === 2}>
+                        <div class="usage-bar" style="width: {(sticker.usageCount / stickerStats[0].usageCount) * 100}%"></div>
+                        <span class="rank">#{index + 1}</span>
+                        <img src={sticker.filePath} alt={sticker.name} class="sticker-preview" />
+                        <span class="sticker-name">:{sticker.name}:</span>
+                        <span class="usage-count">{formatNumber(sticker.usageCount)}</span>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    </section>
+</div>
+
+<style>
+    .stats-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    h1 {
+        color: #fff;
+        margin-bottom: 2rem;
+        font-size: 1.8rem;
+    }
+
+    .stats-section {
+        background: #111;
+        border-radius: 8px;
+        padding: 1.5rem;
+        border: 1px solid #333;
+    }
+
+    h2 {
+        color: var(--primary, #561d5e);
+        margin-bottom: 0.5rem;
+        font-size: 1.3rem;
+    }
+
+    .total-usage {
+        color: #888;
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .total-usage .highlight {
+        color: var(--primary, #561d5e);
+        font-weight: 600;
+    }
+
+    .sticker-leaderboard {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .sticker-row {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+        background: #1a1a1a;
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+        border: 1px solid transparent;
+    }
+
+    .sticker-row.top-1 {
+        border-color: #ffd700;
+        background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, #1a1a1a 50%);
+    }
+
+    .sticker-row.top-2 {
+        border-color: #c0c0c0;
+        background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, #1a1a1a 50%);
+    }
+
+    .sticker-row.top-3 {
+        border-color: #cd7f32;
+        background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, #1a1a1a 50%);
+    }
+
+    .usage-bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(86, 29, 94, 0.15);
+        z-index: 0;
+        pointer-events: none;
+    }
+
+    .rank {
+        color: #666;
+        font-weight: 600;
+        width: 2.5rem;
+        z-index: 1;
+        font-size: 0.9rem;
+    }
+
+    .sticker-row.top-1 .rank { color: #ffd700; }
+    .sticker-row.top-2 .rank { color: #c0c0c0; }
+    .sticker-row.top-3 .rank { color: #cd7f32; }
+
+    .sticker-preview {
+        width: 32px;
+        height: 32px;
+        object-fit: contain;
+        z-index: 1;
+    }
+
+    .sticker-name {
+        flex: 1;
+        color: #ccc;
+        font-family: monospace;
+        z-index: 1;
+        font-size: 0.95rem;
+    }
+
+    .usage-count {
+        color: var(--primary, #561d5e);
+        font-weight: 600;
+        z-index: 1;
+        font-size: 0.95rem;
+        min-width: 4rem;
+        text-align: right;
+    }
+
+    .loading, .empty {
+        color: #666;
+        text-align: center;
+        padding: 3rem;
+        font-size: 0.95rem;
+    }
+
+    .error {
+        color: var(--error, #dc3545);
+        text-align: center;
+        padding: 2rem;
+    }
+
+    @media (max-width: 600px) {
+        .stats-container {
+            padding: 1rem;
+        }
+
+        .sticker-row {
+            padding: 0.5rem 0.75rem;
+            gap: 0.5rem;
+        }
+
+        .sticker-name {
+            font-size: 0.85rem;
+        }
+
+        .rank {
+            width: 2rem;
+        }
+    }
+</style>
diff --git a/frontend/src/routes/video/+page.svelte b/frontend/src/routes/video/+page.svelte
new file mode 100644
index 0000000..3adbe1a
--- /dev/null
+++ b/frontend/src/routes/video/+page.svelte
@@ -0,0 +1,371 @@
+<script>
+    import { onMount } from 'svelte';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { formatDuration, formatViews, timeAgo } from '$lib/utils/formatters';
+
+    let videos = [];
+    let loading = true;
+    let page = 1;
+    let hasMore = true;
+
+    // Group videos by realm
+    $: groupedVideos = videos.reduce((acc, video) => {
+        const realmKey = video.realmId || 'unknown';
+        if (!acc[realmKey]) {
+            acc[realmKey] = {
+                realmId: video.realmId,
+                realmName: video.realmName || 'Unknown Realm',
+                videos: []
+            };
+        }
+        acc[realmKey].videos.push(video);
+        return acc;
+    }, {});
+
+    $: realmGroups = Object.values(groupedVideos);
+
+    async function loadVideos(append = false) {
+        if (!browser) return;
+
+        try {
+            const res = await fetch(`/api/videos?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                const fetchedVideos = data.videos || [];
+                if (append) {
+                    videos = [...videos, ...fetchedVideos];
+                } else {
+                    videos = fetchedVideos;
+                }
+                hasMore = fetchedVideos.length === 20;
+            }
+        } catch (e) {
+            console.error('Failed to load videos:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function loadMore() {
+        page++;
+        loadVideos(true);
+    }
+
+    onMount(() => {
+        loadVideos();
+    });
+</script>
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Videos</title>
+</svelte:head>
+
+<style>
+    .hero {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .hero p {
+        font-size: 1.1rem;
+        color: var(--gray);
+    }
+
+    /* Realm group styles */
+    .realm-group {
+        margin-bottom: 3rem;
+    }
+
+    .realm-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .realm-title h2 {
+        margin: 0;
+        font-size: 1.3rem;
+    }
+
+    .realm-badge {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .view-realm-link {
+        color: #8b5cf6;
+        text-decoration: none;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        transition: opacity 0.2s;
+    }
+
+    .view-realm-link:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .video-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .video-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
+        border-color: #8b5cf6;
+    }
+
+    .video-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .thumb-static {
+        position: relative;
+        z-index: 1;
+    }
+
+    .video-thumbnail .thumb-preview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        z-index: 2;
+        transition: opacity 0.2s ease;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-preview {
+        opacity: 1;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-static {
+        opacity: 0;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .duration-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-info {
+        padding: 1rem;
+    }
+
+    .video-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .video-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .uploader-info {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .uploader-avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--gray);
+    }
+
+    .view-count {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .upload-date {
+        color: #666;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+    }
+
+    .no-videos {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-videos-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .load-more {
+        display: flex;
+        justify-content: center;
+        padding: 2rem 0;
+    }
+
+    .load-more-btn {
+        padding: 0.75rem 2rem;
+        background: #8b5cf6;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .load-more-btn:hover {
+        background: #7c3aed;
+    }
+</style>
+
+<div class="container">
+    <div class="hero">
+        <h1>Video Realms</h1>
+        <p>Browse uploaded videos from our community</p>
+    </div>
+
+    {#if loading}
+        <div style="text-align: center; padding: 2rem;">
+            <p>Loading videos...</p>
+        </div>
+    {:else if videos.length === 0}
+        <div class="no-videos">
+            <div class="no-videos-icon">🎬</div>
+            <h2>No videos yet</h2>
+            <p>Be the first to upload a video!</p>
+        </div>
+    {:else}
+        {#each realmGroups as group}
+            <div class="realm-group">
+                <div class="realm-header">
+                    <div class="realm-title">
+                        <h2>{group.realmName}</h2>
+                        <span class="realm-badge">{group.videos.length} videos</span>
+                    </div>
+                    <a href={`/video/realm/${group.realmId}`} class="view-realm-link">
+                        View all
+                    </a>
+                </div>
+                <div class="video-grid">
+                    {#each group.videos.slice(0, 4) as video}
+                        <a href={`/watch/${video.id}`} class="video-card">
+                            <div class="video-thumbnail">
+                                {#if video.thumbnailPath || video.previewPath}
+                                    <img
+                                        src={video.thumbnailPath || video.previewPath}
+                                        alt={video.title}
+                                        class="thumb-static"
+                                    />
+                                    {#if video.previewPath}
+                                        <img
+                                            src={video.previewPath}
+                                            alt={video.title}
+                                            class="thumb-preview"
+                                        />
+                                    {/if}
+                                {:else}
+                                    <span class="placeholder">🎬</span>
+                                {/if}
+                                <span class="duration-badge">{formatDuration(video.durationSeconds)}</span>
+                            </div>
+                            <div class="video-info">
+                                <h3>{video.title}</h3>
+                                <div class="video-meta">
+                                    <div class="uploader-info">
+                                        {#if video.avatarUrl}
+                                            <img src={video.avatarUrl} alt={video.username} class="uploader-avatar" />
+                                        {:else}
+                                            <div class="uploader-avatar"></div>
+                                        {/if}
+                                        <span>{video.username}</span>
+                                    </div>
+                                    <div class="view-count">
+                                        {formatViews(video.viewCount)} views
+                                    </div>
+                                </div>
+                                <div class="upload-date">{timeAgo(video.createdAt)}</div>
+                            </div>
+                        </a>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        {#if hasMore}
+            <div class="load-more">
+                <button class="load-more-btn" on:click={loadMore}>Load More</button>
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/video/realm/[id]/+page.svelte b/frontend/src/routes/video/realm/[id]/+page.svelte
new file mode 100644
index 0000000..5cfc3d8
--- /dev/null
+++ b/frontend/src/routes/video/realm/[id]/+page.svelte
@@ -0,0 +1,355 @@
+<script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+
+    let realm = null;
+    let videos = [];
+    let loading = true;
+    let error = null;
+
+    $: realmId = $page.params.id;
+
+    function formatDuration(seconds) {
+        if (!seconds) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function formatViews(count) {
+        if (count >= 1000000) return (count / 1000000).toFixed(1) + 'M';
+        if (count >= 1000) return (count / 1000).toFixed(1) + 'K';
+        return count.toString();
+    }
+
+    function timeAgo(dateStr) {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+        return date.toLocaleDateString();
+    }
+
+    async function loadRealmVideos() {
+        if (!browser || !realmId) return;
+
+        try {
+            const res = await fetch(`/api/videos/realm/${realmId}`);
+            if (res.ok) {
+                const data = await res.json();
+                realm = data.realm || null;
+                videos = data.videos || [];
+            } else if (res.status === 404) {
+                error = 'Realm not found';
+            } else {
+                error = 'Failed to load realm';
+            }
+        } catch (e) {
+            console.error('Failed to load realm videos:', e);
+            error = 'Failed to load realm';
+        } finally {
+            loading = false;
+        }
+    }
+
+    onMount(() => {
+        loadRealmVideos();
+    });
+
+    $: if (browser && realmId) {
+        loading = true;
+        error = null;
+        loadRealmVideos();
+    }
+</script>
+
+<style>
+    .realm-header {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .realm-description {
+        font-size: 1.1rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .realm-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    .realm-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .owner-link {
+        color: #8b5cf6;
+        text-decoration: none;
+    }
+
+    .owner-link:hover {
+        text-decoration: underline;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #8b5cf6;
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        text-decoration: underline;
+    }
+
+    .video-count-badge {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+        padding: 0.3rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.85rem;
+    }
+
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .video-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .video-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
+        border-color: #8b5cf6;
+    }
+
+    .video-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .thumb-static {
+        position: relative;
+        z-index: 1;
+    }
+
+    .video-thumbnail .thumb-preview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        z-index: 2;
+        transition: opacity 0.2s ease;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-preview {
+        opacity: 1;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-static {
+        opacity: 0;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .duration-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-info {
+        padding: 1rem;
+    }
+
+    .video-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .video-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .view-count {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .upload-date {
+        color: #666;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+    }
+
+    .no-videos {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-videos-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .error-message {
+        text-align: center;
+        padding: 4rem 0;
+        color: #ef4444;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+</style>
+
+<div class="container">
+    <a href="/video" class="back-link">
+        <span>←</span> Back to all videos
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading realm...</p>
+        </div>
+    {:else if error}
+        <div class="error-message">
+            <h2>{error}</h2>
+            <p>The realm you're looking for doesn't exist or has been removed.</p>
+        </div>
+    {:else if realm}
+        <div class="realm-header">
+            <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
+            {#if realm.description}
+                <p class="realm-description">{realm.description}</p>
+            {/if}
+            <div class="realm-meta">
+                <div class="realm-meta-item">
+                    <span>by</span>
+                    <a href={`/profile/${realm.username}`} class="owner-link">{realm.username}</a>
+                </div>
+                <div class="video-count-badge">
+                    {videos.length} {videos.length === 1 ? 'video' : 'videos'}
+                </div>
+            </div>
+        </div>
+
+        {#if videos.length === 0}
+            <div class="no-videos">
+                <div class="no-videos-icon">📂</div>
+                <h2>No videos yet</h2>
+                <p>This realm doesn't have any videos yet.</p>
+            </div>
+        {:else}
+            <div class="video-grid">
+                {#each videos as video}
+                    <a href={`/watch/${video.id}`} class="video-card">
+                        <div class="video-thumbnail">
+                            {#if video.thumbnailPath || video.previewPath}
+                                <img
+                                    src={video.thumbnailPath || video.previewPath}
+                                    alt={video.title}
+                                    class="thumb-static"
+                                />
+                                {#if video.previewPath}
+                                    <img
+                                        src={video.previewPath}
+                                        alt={video.title}
+                                        class="thumb-preview"
+                                    />
+                                {/if}
+                            {:else}
+                                <span class="placeholder">🎬</span>
+                            {/if}
+                            <span class="duration-badge">{formatDuration(video.durationSeconds)}</span>
+                        </div>
+                        <div class="video-info">
+                            <h3>{video.title}</h3>
+                            <div class="video-meta">
+                                <div class="view-count">
+                                    {formatViews(video.viewCount)} views
+                                </div>
+                            </div>
+                            <div class="upload-date">{timeAgo(video.createdAt)}</div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/videos/+page.svelte b/frontend/src/routes/videos/+page.svelte
new file mode 100644
index 0000000..a62821e
--- /dev/null
+++ b/frontend/src/routes/videos/+page.svelte
@@ -0,0 +1,377 @@
+<script>
+    import { onMount } from 'svelte';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { formatDuration, formatViews, timeAgo } from '$lib/utils/formatters';
+
+    let videos = [];
+    let loading = true;
+    let loadingMore = false;
+    let page = 1;
+    let hasMore = true;
+
+    // Group videos by realm
+    $: groupedVideos = videos.reduce((acc, video) => {
+        const realmKey = video.realmId || 'unknown';
+        if (!acc[realmKey]) {
+            acc[realmKey] = {
+                realmId: video.realmId,
+                realmName: video.realmName || 'Unknown Realm',
+                videos: []
+            };
+        }
+        acc[realmKey].videos.push(video);
+        return acc;
+    }, {});
+
+    $: realmGroups = Object.values(groupedVideos);
+
+    async function loadVideos(append = false) {
+        if (!browser) return;
+
+        try {
+            const res = await fetch(`/api/videos?page=${page}&limit=20`);
+            if (res.ok) {
+                const data = await res.json();
+                const fetchedVideos = data.videos || [];
+                if (append) {
+                    videos = [...videos, ...fetchedVideos];
+                } else {
+                    videos = fetchedVideos;
+                }
+                hasMore = fetchedVideos.length === 20;
+            }
+        } catch (e) {
+            console.error('Failed to load videos:', e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function loadMore() {
+        if (loadingMore) return;
+        loadingMore = true;
+        page++;
+        await loadVideos(true);
+        loadingMore = false;
+    }
+
+    onMount(() => {
+        loadVideos();
+    });
+</script>
+
+<svelte:head>
+    <title>{$siteSettings.site_title} - Videos</title>
+</svelte:head>
+
+<style>
+    .hero {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .hero p {
+        font-size: 1.1rem;
+        color: var(--gray);
+    }
+
+    /* Realm group styles */
+    .realm-group {
+        margin-bottom: 3rem;
+    }
+
+    .realm-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .realm-title h2 {
+        margin: 0;
+        font-size: 1.3rem;
+    }
+
+    .realm-badge {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .view-realm-link {
+        color: #8b5cf6;
+        text-decoration: none;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        transition: opacity 0.2s;
+    }
+
+    .view-realm-link:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .video-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .video-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
+        border-color: #8b5cf6;
+    }
+
+    .video-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .thumb-static {
+        position: relative;
+        z-index: 1;
+    }
+
+    .video-thumbnail .thumb-preview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        z-index: 2;
+        transition: opacity 0.2s ease;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-preview {
+        opacity: 1;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-static {
+        opacity: 0;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .duration-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-info {
+        padding: 1rem;
+    }
+
+    .video-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .video-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .uploader-info {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .uploader-avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--gray);
+    }
+
+    .view-count {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .upload-date {
+        color: #666;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+    }
+
+    .no-videos {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-videos-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .load-more {
+        display: flex;
+        justify-content: center;
+        padding: 2rem 0;
+    }
+
+    .load-more-btn {
+        padding: 0.75rem 2rem;
+        background: #8b5cf6;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .load-more-btn:hover {
+        background: #7c3aed;
+    }
+</style>
+
+<div class="container">
+    <div class="hero">
+        <h1>Video Realms</h1>
+        <p>Browse uploaded videos from our community</p>
+    </div>
+
+    {#if loading}
+        <div style="text-align: center; padding: 2rem;">
+            <p>Loading videos...</p>
+        </div>
+    {:else if videos.length === 0}
+        <div class="no-videos">
+            <div class="no-videos-icon">🎬</div>
+            <h2>No videos yet</h2>
+            <p>Be the first to upload a video!</p>
+        </div>
+    {:else}
+        {#each realmGroups as group}
+            <div class="realm-group">
+                <div class="realm-header">
+                    <div class="realm-title">
+                        <h2>{group.realmName}</h2>
+                        <span class="realm-badge">{group.videos.length} videos</span>
+                    </div>
+                    <a href={`/videos/realm/${group.realmId}`} class="view-realm-link">
+                        View all
+                    </a>
+                </div>
+                <div class="video-grid">
+                    {#each group.videos.slice(0, 4) as video}
+                        <a href={`/watch/${video.id}`} class="video-card">
+                            <div class="video-thumbnail">
+                                {#if video.thumbnailPath || video.previewPath}
+                                    <img
+                                        src={video.thumbnailPath || video.previewPath}
+                                        alt={video.title}
+                                        class="thumb-static"
+                                    />
+                                    {#if video.previewPath}
+                                        <img
+                                            src={video.previewPath}
+                                            alt={video.title}
+                                            class="thumb-preview"
+                                        />
+                                    {/if}
+                                {:else}
+                                    <span class="placeholder">🎬</span>
+                                {/if}
+                                <span class="duration-badge">{formatDuration(video.durationSeconds)}</span>
+                            </div>
+                            <div class="video-info">
+                                <h3>{video.title}</h3>
+                                <div class="video-meta">
+                                    <div class="uploader-info">
+                                        {#if video.avatarUrl}
+                                            <img src={video.avatarUrl} alt={video.username} class="uploader-avatar" />
+                                        {:else}
+                                            <div class="uploader-avatar"></div>
+                                        {/if}
+                                        <span>{video.username}</span>
+                                    </div>
+                                    <div class="view-count">
+                                        {formatViews(video.viewCount)} views
+                                    </div>
+                                </div>
+                                <div class="upload-date">{timeAgo(video.createdAt)}</div>
+                            </div>
+                        </a>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        {#if hasMore}
+            <div class="load-more">
+                <button class="load-more-btn" on:click={loadMore} disabled={loadingMore}>
+                    {loadingMore ? 'Loading...' : 'Load More'}
+                </button>
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/videos/realm/[id]/+page.svelte b/frontend/src/routes/videos/realm/[id]/+page.svelte
new file mode 100644
index 0000000..e4a8a65
--- /dev/null
+++ b/frontend/src/routes/videos/realm/[id]/+page.svelte
@@ -0,0 +1,329 @@
+<script>
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { formatDuration, formatViews, timeAgo } from '$lib/utils/formatters';
+
+    let realm = null;
+    let videos = [];
+    let loading = true;
+    let error = null;
+
+    $: realmId = $page.params.id;
+
+    async function loadRealmVideos() {
+        if (!browser || !realmId) return;
+
+        try {
+            const res = await fetch(`/api/videos/realm/${realmId}`);
+            if (res.ok) {
+                const data = await res.json();
+                realm = data.realm || null;
+                videos = data.videos || [];
+            } else if (res.status === 404) {
+                error = 'Realm not found';
+            } else {
+                error = 'Failed to load realm';
+            }
+        } catch (e) {
+            console.error('Failed to load realm videos:', e);
+            error = 'Failed to load realm';
+        } finally {
+            loading = false;
+        }
+    }
+
+    let lastRealmId = null;
+
+    $: if (browser && realmId && realmId !== lastRealmId) {
+        lastRealmId = realmId;
+        loading = true;
+        error = null;
+        loadRealmVideos();
+    }
+</script>
+
+<style>
+    .realm-header {
+        text-align: center;
+        padding: 3rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .realm-header h1 {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .realm-description {
+        font-size: 1.1rem;
+        color: var(--gray);
+        margin-bottom: 1rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .realm-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.5rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+    }
+
+    .realm-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    .owner-link {
+        color: #8b5cf6;
+        text-decoration: none;
+    }
+
+    .owner-link:hover {
+        text-decoration: underline;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #8b5cf6;
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        text-decoration: underline;
+    }
+
+    .video-count-badge {
+        background: rgba(139, 92, 246, 0.2);
+        color: #8b5cf6;
+        padding: 0.3rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.85rem;
+    }
+
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .video-card {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        text-decoration: none;
+        color: var(--white);
+    }
+
+    .video-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
+        border-color: #8b5cf6;
+    }
+
+    .video-thumbnail {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .video-thumbnail img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-thumbnail .thumb-static {
+        position: relative;
+        z-index: 1;
+    }
+
+    .video-thumbnail .thumb-preview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        z-index: 2;
+        transition: opacity 0.2s ease;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-preview {
+        opacity: 1;
+    }
+
+    .video-card:hover .video-thumbnail .thumb-static {
+        opacity: 0;
+    }
+
+    .video-thumbnail .placeholder {
+        font-size: 3rem;
+        opacity: 0.3;
+    }
+
+    .duration-badge {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 0.15rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-info {
+        padding: 1rem;
+    }
+
+    .video-info h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .video-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .view-count {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .upload-date {
+        color: #666;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+    }
+
+    .no-videos {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+
+    .no-videos-icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .error-message {
+        text-align: center;
+        padding: 4rem 0;
+        color: #ef4444;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 4rem 0;
+        color: var(--gray);
+    }
+</style>
+
+<div class="container">
+    <a href="/videos" class="back-link">
+        <span>←</span> Back to all videos
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading realm...</p>
+        </div>
+    {:else if error}
+        <div class="error-message">
+            <h2>{error}</h2>
+            <p>The realm you're looking for doesn't exist or has been removed.</p>
+        </div>
+    {:else if realm}
+        <div class="realm-header">
+            <h1>{realm.name}</h1>
+            {#if realm.description}
+                <p class="realm-description">{realm.description}</p>
+            {/if}
+            <div class="realm-meta">
+                <div class="realm-meta-item">
+                    <span>by</span>
+                    <a href={`/profile/${realm.username}`} class="owner-link">{realm.username}</a>
+                </div>
+                <div class="video-count-badge">
+                    {videos.length} {videos.length === 1 ? 'video' : 'videos'}
+                </div>
+            </div>
+        </div>
+
+        {#if videos.length === 0}
+            <div class="no-videos">
+                <div class="no-videos-icon">📂</div>
+                <h2>No videos yet</h2>
+                <p>This realm doesn't have any videos yet.</p>
+            </div>
+        {:else}
+            <div class="video-grid">
+                {#each videos as video}
+                    <a href={`/watch/${video.id}`} class="video-card">
+                        <div class="video-thumbnail">
+                            {#if video.thumbnailPath || video.previewPath}
+                                <img
+                                    src={video.thumbnailPath || video.previewPath}
+                                    alt={video.title}
+                                    class="thumb-static"
+                                />
+                                {#if video.previewPath}
+                                    <img
+                                        src={video.previewPath}
+                                        alt={video.title}
+                                        class="thumb-preview"
+                                    />
+                                {/if}
+                            {:else}
+                                <span class="placeholder">🎬</span>
+                            {/if}
+                            <span class="duration-badge">{formatDuration(video.durationSeconds)}</span>
+                        </div>
+                        <div class="video-info">
+                            <h3>{video.title}</h3>
+                            <div class="video-meta">
+                                <div class="view-count">
+                                    {formatViews(video.viewCount)} views
+                                </div>
+                            </div>
+                            <div class="upload-date">{timeAgo(video.createdAt)}</div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/frontend/src/routes/watch/[id]/+page.svelte b/frontend/src/routes/watch/[id]/+page.svelte
new file mode 100644
index 0000000..ab5bcdc
--- /dev/null
+++ b/frontend/src/routes/watch/[id]/+page.svelte
@@ -0,0 +1,298 @@
+<script>
+    import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { siteSettings } from '$lib/stores/siteSettings';
+    import { formatDuration, formatViews, formatBytes, formatBitrate, formatCodec, formatDate } from '$lib/utils/formatters';
+
+    let video = null;
+    let loading = true;
+    let error = null;
+    let videoElement;
+
+    $: videoId = $page.params.id;
+
+    async function loadVideo() {
+        if (!browser) return;
+
+        try {
+            const res = await fetch(`/api/videos/${videoId}`);
+            if (res.ok) {
+                const data = await res.json();
+                video = data.video;
+                // Increment view count
+                fetch(`/api/videos/${videoId}/view`, { method: 'POST' });
+            } else if (res.status === 404) {
+                error = 'Video not found';
+            } else {
+                error = 'Failed to load video';
+            }
+        } catch (e) {
+            console.error('Failed to load video:', e);
+            error = 'Failed to load video';
+        } finally {
+            loading = false;
+        }
+    }
+
+    let lastVideoId = null;
+
+    $: if (browser && videoId && videoId !== lastVideoId) {
+        lastVideoId = videoId;
+        loading = true;
+        error = null;
+        video = null;
+        loadVideo();
+    }
+</script>
+
+<svelte:head>
+    <title>{video ? `${$siteSettings.site_title} - ${video.title}` : $siteSettings.site_title}</title>
+</svelte:head>
+
+<style>
+    .watch-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 1rem;
+    }
+
+    .video-player-wrapper {
+        background: #000;
+        border-radius: 12px;
+        overflow: hidden;
+        margin-bottom: 1.5rem;
+    }
+
+    .video-player {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: #000;
+    }
+
+    .video-details {
+        background: #111;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 1.5rem;
+    }
+
+    .video-title {
+        font-size: 1.5rem;
+        margin: 0 0 1rem 0;
+        line-height: 1.3;
+    }
+
+    .video-stats {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        color: var(--gray);
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .uploader-section {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .uploader-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: var(--gray);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        color: white;
+    }
+
+    .uploader-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    .uploader-info h4 {
+        margin: 0 0 0.25rem 0;
+        font-size: 1.1rem;
+    }
+
+    .uploader-info a {
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .uploader-info a:hover {
+        text-decoration: underline;
+    }
+
+    .uploader-info span {
+        color: var(--gray);
+        font-size: 0.85rem;
+    }
+
+    .video-description {
+        background: #0a0a0a;
+        border-radius: 8px;
+        padding: 1rem;
+        color: #ccc;
+        line-height: 1.6;
+        white-space: pre-wrap;
+    }
+
+    .video-description.empty {
+        color: var(--gray);
+        font-style: italic;
+    }
+
+    .video-metadata {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+        font-size: 0.85rem;
+        color: var(--gray);
+    }
+
+    .metadata-item {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .metadata-item label {
+        font-weight: 600;
+        color: #888;
+    }
+
+    .loading, .error {
+        text-align: center;
+        padding: 4rem 0;
+    }
+
+    .error {
+        color: #ff6b6b;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--gray);
+        text-decoration: none;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+        color: var(--primary);
+    }
+</style>
+
+<div class="watch-container">
+    <a href="/videos" class="back-link">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+        </svg>
+        Back to Videos
+    </a>
+
+    {#if loading}
+        <div class="loading">
+            <p>Loading video...</p>
+        </div>
+    {:else if error}
+        <div class="error">
+            <h2>{error}</h2>
+            <p>The video you're looking for might have been removed or made private.</p>
+        </div>
+    {:else if video}
+        <div class="video-player-wrapper">
+            <video
+                bind:this={videoElement}
+                class="video-player"
+                src={video.filePath}
+                controls
+                autoplay
+                playsinline
+            >
+                <track kind="captions" />
+            </video>
+        </div>
+
+        <div class="video-details">
+            <h1 class="video-title">{video.title}</h1>
+
+            <div class="video-stats">
+                <span>{formatViews(video.viewCount, true)}</span>
+                <span>•</span>
+                <span>Uploaded {formatDate(video.createdAt)}</span>
+            </div>
+
+            <div class="uploader-section">
+                <div class="uploader-avatar">
+                    {#if video.avatarUrl}
+                        <img src={video.avatarUrl} alt={video.username} />
+                    {:else}
+                        {video.username.charAt(0).toUpperCase()}
+                    {/if}
+                </div>
+                <div class="uploader-info">
+                    <h4><a href={`/profile/${video.username}`}>{video.username}</a></h4>
+                </div>
+            </div>
+
+            <div class="video-description" class:empty={!video.description}>
+                {video.description || 'No description provided.'}
+            </div>
+
+            <div class="video-metadata">
+                {#if video.durationSeconds}
+                    <div class="metadata-item">
+                        <label>Duration</label>
+                        <span>{formatDuration(video.durationSeconds)}</span>
+                    </div>
+                {/if}
+                {#if video.fileSizeBytes}
+                    <div class="metadata-item">
+                        <label>File Size</label>
+                        <span>{formatBytes(video.fileSizeBytes)}</span>
+                    </div>
+                {/if}
+                {#if video.width && video.height}
+                    <div class="metadata-item">
+                        <label>Resolution</label>
+                        <span>{video.width}x{video.height}</span>
+                    </div>
+                {/if}
+                {#if video.bitrate}
+                    <div class="metadata-item">
+                        <label>Bitrate</label>
+                        <span>{formatBitrate(video.bitrate)}</span>
+                    </div>
+                {/if}
+                {#if video.videoCodec}
+                    <div class="metadata-item">
+                        <label>Video Codec</label>
+                        <span>{formatCodec(video.videoCodec)}</span>
+                    </div>
+                {/if}
+                {#if video.audioCodec}
+                    <div class="metadata-item">
+                        <label>Audio Codec</label>
+                        <span>{formatCodec(video.audioCodec)}</span>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/frontend/static/robots.txt b/frontend/static/robots.txt
new file mode 100644
index 0000000..dda379d
--- /dev/null
+++ b/frontend/static/robots.txt
@@ -0,0 +1,135 @@
+# Block all crawlers
+User-agent: *
+Disallow: /
+
+# Specific AI and scraper bots (from ai-robots-txt)
+User-agent: AddSearchBot
+User-agent: AI2Bot
+User-agent: AI2Bot-DeepResearchEval
+User-agent: Ai2Bot-Dolma
+User-agent: aiHitBot
+User-agent: amazon-kendra
+User-agent: Amazonbot
+User-agent: AmazonBuyForMe
+User-agent: Andibot
+User-agent: Anomura
+User-agent: anthropic-ai
+User-agent: Applebot
+User-agent: Applebot-Extended
+User-agent: atlassian-bot
+User-agent: Awario
+User-agent: bedrockbot
+User-agent: bigsur.ai
+User-agent: Bravebot
+User-agent: Brightbot 1.0
+User-agent: BuddyBot
+User-agent: Bytespider
+User-agent: CCBot
+User-agent: Channel3Bot
+User-agent: ChatGLM-Spider
+User-agent: ChatGPT Agent
+User-agent: ChatGPT-User
+User-agent: Claude-SearchBot
+User-agent: Claude-User
+User-agent: Claude-Web
+User-agent: ClaudeBot
+User-agent: Cloudflare-AutoRAG
+User-agent: CloudVertexBot
+User-agent: cohere-ai
+User-agent: cohere-training-data-crawler
+User-agent: Cotoyogi
+User-agent: Crawl4AI
+User-agent: Crawlspace
+User-agent: Datenbank Crawler
+User-agent: DeepSeekBot
+User-agent: Devin
+User-agent: Diffbot
+User-agent: DuckAssistBot
+User-agent: Echobot Bot
+User-agent: EchoboxBot
+User-agent: FacebookBot
+User-agent: facebookexternalhit
+User-agent: Factset_spyderbot
+User-agent: FirecrawlAgent
+User-agent: FriendlyCrawler
+User-agent: Gemini-Deep-Research
+User-agent: Google-CloudVertexBot
+User-agent: Google-Extended
+User-agent: Google-Firebase
+User-agent: Google-NotebookLM
+User-agent: GoogleAgent-Mariner
+User-agent: GoogleOther
+User-agent: GoogleOther-Image
+User-agent: GoogleOther-Video
+User-agent: GPTBot
+User-agent: iAskBot
+User-agent: iaskspider
+User-agent: iaskspider/2.0
+User-agent: IbouBot
+User-agent: ICC-Crawler
+User-agent: ImagesiftBot
+User-agent: imageSpider
+User-agent: img2dataset
+User-agent: ISSCyberRiskCrawler
+User-agent: Kangaroo Bot
+User-agent: KlaviyoAIBot
+User-agent: KunatoCrawler
+User-agent: laion-huggingface-processor
+User-agent: LAIONDownloader
+User-agent: LCC
+User-agent: LinerBot
+User-agent: Linguee Bot
+User-agent: LinkupBot
+User-agent: Manus-User
+User-agent: meta-externalagent
+User-agent: Meta-ExternalAgent
+User-agent: meta-externalfetcher
+User-agent: Meta-ExternalFetcher
+User-agent: meta-webindexer
+User-agent: MistralAI-User
+User-agent: MistralAI-User/1.0
+User-agent: MyCentralAIScraperBot
+User-agent: netEstate Imprint Crawler
+User-agent: NotebookLM
+User-agent: NovaAct
+User-agent: OAI-SearchBot
+User-agent: omgili
+User-agent: omgilibot
+User-agent: OpenAI
+User-agent: Operator
+User-agent: PanguBot
+User-agent: Panscient
+User-agent: panscient.com
+User-agent: Perplexity-User
+User-agent: PerplexityBot
+User-agent: PetalBot
+User-agent: PhindBot
+User-agent: Poggio-Citations
+User-agent: Poseidon Research Crawler
+User-agent: QualifiedBot
+User-agent: QuillBot
+User-agent: quillbot.com
+User-agent: SBIntuitionsBot
+User-agent: Scrapy
+User-agent: SemrushBot-OCOB
+User-agent: SemrushBot-SWA
+User-agent: ShapBot
+User-agent: Sidetrade indexer bot
+User-agent: Spider
+User-agent: TerraCotta
+User-agent: Thinkbot
+User-agent: TikTokSpider
+User-agent: Timpibot
+User-agent: TwinAgent
+User-agent: VelenPublicWebCrawler
+User-agent: WARDBot
+User-agent: Webzio-Extended
+User-agent: webzio-extended
+User-agent: wpbot
+User-agent: WRTNBot
+User-agent: YaK
+User-agent: YandexAdditional
+User-agent: YandexAdditionalBot
+User-agent: YouBot
+User-agent: ZanistaBot
+Disallow: /
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 38b9643..51a65fe 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -15,23 +15,28 @@ const config = {
             mode: 'auto',
             directives: {
                 'default-src': ["'self'"],
-                'script-src': ["'self'", "'unsafe-inline'"],
+                'script-src': ["'self'", 'https://www.youtube.com'],
+                // Note: 'unsafe-inline' required because Svelte uses inline styles for transitions and dynamic bindings
                 'style-src': ["'self'", "'unsafe-inline'", 'https://cdnjs.cloudflare.com'],
-                'img-src': ["'self'", 'data:', 'blob:'],
-                'font-src': ["'self'", 'data:', 'https://cdnjs.cloudflare.com'],  // Added 'data:' for embedded fonts
+                'img-src': ["'self'", 'data:', 'blob:', 'https://img.youtube.com', 'https://i.ytimg.com'],
+                'font-src': ["'self'", 'data:', 'https://cdnjs.cloudflare.com'],
                 'connect-src': [
-                    "'self'", 
-                    'ws://localhost:*',     // Changed to include port wildcard
-                    'wss://localhost:*',    // Changed to include port wildcard
-                    'http://localhost:*'
+                    "'self'",
+                    'ws://localhost:*',
+                    'wss://localhost:*',
+                    'http://localhost:*',
+                    'ws://127.0.0.1:*',
+                    'wss://127.0.0.1:*',
+                    'http://127.0.0.1:*',
+                    'https://www.youtube.com'
                 ],
                 'media-src': ["'self'", 'blob:', 'http://localhost:*'],
+                'frame-src': ["'self'", 'blob:', 'https://www.youtube.com'],
                 'object-src': ["'none'"],
                 'frame-ancestors': ["'none'"],
                 'form-action': ["'self'"],
                 'base-uri': ["'self'"]
             }
-        
         },
         
         // Enable CSRF protection (default is true)
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 06beb95..e99c027 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,6 +5,18 @@ export default defineConfig({
     plugins: [sveltekit()],
     server: {
         port: 3000,
-        host: true
+        host: true,
+        proxy: {
+            // Proxy uploads to openresty for dev mode
+            '/uploads': {
+                target: 'http://localhost:80',
+                changeOrigin: true
+            },
+            // Proxy thumbnails to openresty
+            '/thumb': {
+                target: 'http://localhost:80',
+                changeOrigin: true
+            }
+        }
     }
 });
\ No newline at end of file
diff --git a/nakama/config.yml b/nakama/config.yml
new file mode 100644
index 0000000..5e60fca
--- /dev/null
+++ b/nakama/config.yml
@@ -0,0 +1,24 @@
+name: realms-nakama
+
+database:
+  address:
+    - "streamuser:${DB_PASSWORD}@postgres:5432/nakama?sslmode=disable"
+
+socket:
+  server_key: "${NAKAMA_SERVER_KEY}"
+
+session:
+  token_expiry_sec: 86400  # 24 hours (matches app JWT)
+
+runtime:
+  js_entrypoint: "main.js"
+  env:
+    - "JWT_SECRET=${JWT_SECRET}"
+
+console:
+  username: "admin"
+  password: "${NAKAMA_CONSOLE_PASSWORD}"
+
+logger:
+  level: "INFO"
+  stdout: true
diff --git a/nakama/modules/package.json b/nakama/modules/package.json
new file mode 100644
index 0000000..f70693c
--- /dev/null
+++ b/nakama/modules/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "nakama-realms-modules",
+  "version": "1.0.0",
+  "description": "Nakama server modules for realms.india",
+  "scripts": {
+    "build": "npx esbuild src/main.ts --bundle --outfile=build/index.js --format=cjs --target=es2020 --platform=node --main-fields=main,module"
+  },
+  "devDependencies": {
+    "esbuild": "^0.19.0",
+    "nakama-runtime": "github:heroiclabs/nakama-common",
+    "typescript": "^5.3.0"
+  },
+  "dependencies": {
+    "chess.js": "^1.0.0-beta.8"
+  }
+}
diff --git a/nakama/modules/src/main.ts b/nakama/modules/src/main.ts
new file mode 100644
index 0000000..5e61477
--- /dev/null
+++ b/nakama/modules/src/main.ts
@@ -0,0 +1,1241 @@
+/**
+ * Nakama Server Modules for realms.india
+ *
+ * Features:
+ * - Custom JWT authentication (links to existing app users)
+ * - Chat completely disabled (use existing chat-service)
+ * - Chess game with ELO leaderboard
+ */
+
+import { Chess } from 'chess.js';
+
+// Op codes for match messages
+const OpCode = {
+  MOVE: 1,
+  GAME_STATE: 2,
+  GAME_OVER: 3,
+  RESIGN: 4,
+  OFFER_DRAW: 5,
+  ACCEPT_DRAW: 6
+};
+
+// Chess game state interface
+interface ChessState {
+  positionId: number;       // Chess960 position ID (0-959)
+  fen: string;
+  pgn: string;
+  whiteId: string;
+  blackId: string;
+  whiteName: string;
+  blackName: string;
+  whiteColor: string;       // User color code
+  blackColor: string;
+  turn: 'w' | 'b';
+  gameOver: boolean;
+  result?: string;
+  moveHistory: string[];
+  createdAt: number;        // Unix timestamp for timeout
+  spectators: string[];     // List of spectator user IDs
+  pendingCancel?: boolean;  // Flag set by matchSignal to request termination
+}
+
+// JWT claims from app
+interface AppJwtClaims {
+  user_id: string;
+  username: string;
+  iss?: string;
+  exp?: number;
+  iat?: number;
+  is_admin?: string;
+  is_moderator?: string;
+  is_streamer?: string;
+  is_disabled?: string;
+  color_code?: string;
+  avatar_url?: string;
+  token_version?: string;
+}
+
+// Base64 character lookup table
+const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+// Generate valid Chess960 starting position
+function generateChess960Position(): { fen: string; positionId: number } {
+  const pieces = new Array(8).fill('');
+
+  // 1. Place bishops on opposite colors
+  const lightSquares = [1, 3, 5, 7]; // b, d, f, h
+  const darkSquares = [0, 2, 4, 6];  // a, c, e, g
+  const lightBishopIdx = Math.floor(Math.random() * 4);
+  const darkBishopIdx = Math.floor(Math.random() * 4);
+  pieces[lightSquares[lightBishopIdx]] = 'B';
+  pieces[darkSquares[darkBishopIdx]] = 'B';
+
+  // 2. Place queen on remaining square
+  const emptySquares = pieces.map((p, i) => p === '' ? i : -1).filter(i => i >= 0);
+  const queenIdx = Math.floor(Math.random() * emptySquares.length);
+  pieces[emptySquares[queenIdx]] = 'Q';
+
+  // 3. Place knights on remaining squares
+  const empty2 = pieces.map((p, i) => p === '' ? i : -1).filter(i => i >= 0);
+  const knight1Idx = Math.floor(Math.random() * empty2.length);
+  const knight1 = empty2.splice(knight1Idx, 1)[0];
+  const knight2Idx = Math.floor(Math.random() * empty2.length);
+  const knight2 = empty2.splice(knight2Idx, 1)[0];
+  pieces[knight1] = 'N';
+  pieces[knight2] = 'N';
+
+  // 4. Place R-K-R in remaining 3 squares (king between rooks)
+  const remaining = pieces.map((p, i) => p === '' ? i : -1).filter(i => i >= 0);
+  remaining.sort((a, b) => a - b);
+  pieces[remaining[0]] = 'R';
+  pieces[remaining[1]] = 'K';
+  pieces[remaining[2]] = 'R';
+
+  // Build FEN
+  const whitePieces = pieces.join('');
+  const blackPieces = whitePieces.toLowerCase();
+  const fen = `${blackPieces}/pppppppp/8/8/8/8/PPPPPPPP/${whitePieces} w KQkq - 0 1`;
+
+  // Calculate a pseudo position ID (not exact Chess960 numbering, but unique enough)
+  const positionId = (lightBishopIdx * 4 + darkBishopIdx) * 6 * 10 * 10 +
+    queenIdx * 10 * 10 + knight1Idx * 10 + knight2Idx;
+
+  return { fen, positionId: positionId % 960 };
+}
+
+// Pure JavaScript base64 decoder (works in Nakama's Goja runtime without atob)
+function base64Decode(str: string): string {
+  // Remove padding
+  str = str.replace(/=+$/, '');
+
+  let output = '';
+  let buffer = 0;
+  let bitsCollected = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+    const value = BASE64_CHARS.indexOf(char);
+
+    if (value === -1) continue; // Skip invalid characters
+
+    buffer = (buffer << 6) | value;
+    bitsCollected += 6;
+
+    if (bitsCollected >= 8) {
+      bitsCollected -= 8;
+      output += String.fromCharCode((buffer >> bitsCollected) & 0xFF);
+    }
+  }
+
+  return output;
+}
+
+// Base64 URL decode helper
+function base64UrlDecode(str: string): string {
+  // Add padding if necessary
+  let padded = str;
+  const padding = 4 - (str.length % 4);
+  if (padding !== 4 && padding !== 0) {
+    padded += '='.repeat(padding);
+  }
+
+  // Convert base64url to base64
+  const base64 = padded.replace(/-/g, '+').replace(/_/g, '/');
+
+  // Decode using pure JS implementation
+  const decoded = base64Decode(base64);
+
+  // Handle UTF-8
+  try {
+    return decodeURIComponent(
+      decoded.split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('')
+    );
+  } catch {
+    return decoded;
+  }
+}
+
+// Simple HMAC-SHA256 signature verification
+// Note: This is a simplified check - in production you'd use proper crypto
+function verifyJwtSignature(headerB64: string, payloadB64: string, signatureB64: string, secret: string): boolean {
+  // For now, we'll just decode and verify the payload structure
+  // Nakama's JS runtime has limited crypto support
+  // The signature verification should ideally be done with proper HMAC
+  // For production, consider using a before hook that calls back to your main backend
+  // or implement proper HMAC verification
+
+  // Basic validation that all parts exist
+  if (!headerB64 || !payloadB64 || !signatureB64 || !secret) {
+    return false;
+  }
+
+  // Check header indicates HS256
+  try {
+    const header = JSON.parse(base64UrlDecode(headerB64));
+    if (header.alg !== 'HS256') {
+      return false;
+    }
+  } catch {
+    return false;
+  }
+
+  return true;
+}
+
+// Validate JWT and extract claims
+function validateJwt(token: string, secret: string, logger: nkruntime.Logger): AppJwtClaims {
+  const parts = token.split('.');
+  if (parts.length !== 3) {
+    throw new Error('Invalid JWT format');
+  }
+
+  const [headerB64, payloadB64, signatureB64] = parts;
+
+  // Verify signature (simplified)
+  if (!verifyJwtSignature(headerB64, payloadB64, signatureB64, secret)) {
+    throw new Error('Invalid JWT signature');
+  }
+
+  // Decode payload
+  let payload: AppJwtClaims;
+  try {
+    payload = JSON.parse(base64UrlDecode(payloadB64));
+  } catch (e) {
+    throw new Error('Invalid JWT payload');
+  }
+
+  return payload;
+}
+
+// Module initialization - must be a function declaration for Nakama to find it
+function InitModule(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  initializer: nkruntime.Initializer
+) {
+  logger.info('Initializing realms.india Nakama modules');
+
+  // Register custom authentication hook
+  initializer.registerBeforeAuthenticateCustom(beforeAuthenticateCustom);
+
+  // Note: Nakama chat is disabled by not exposing chat endpoints from the frontend
+  // The existing chat-service handles all chat functionality
+
+  // Create chess ELO leaderboard if it doesn't exist
+  try {
+    nk.leaderboardCreate(
+      'chess-elo',       // id
+      true,              // authoritative
+      nkruntime.SortOrder.DESCENDING,
+      nkruntime.Operator.SET,
+      ''                 // reset schedule (empty = never reset)
+    );
+    logger.info('Chess ELO leaderboard created');
+  } catch (e) {
+    // Leaderboard already exists, that's fine
+    logger.info('Chess ELO leaderboard already exists');
+  }
+
+  // Register chess match handler with named functions
+  initializer.registerMatch('chess', {
+    matchInit: chessMatchInit,
+    matchJoinAttempt: chessMatchJoinAttempt,
+    matchJoin: chessMatchJoin,
+    matchLoop: chessMatchLoop,
+    matchLeave: chessMatchLeave,
+    matchTerminate: chessMatchTerminate,
+    matchSignal: chessMatchSignal
+  });
+  logger.info('Chess match handler registered');
+
+  // Register RPC functions for chess
+  initializer.registerRpc('create_chess_match', createChessMatchRpc);
+  initializer.registerRpc('list_chess_matches', listChessMatchesRpc);
+  initializer.registerRpc('get_chess_leaderboard', getChessLeaderboardRpc);
+  initializer.registerRpc('cancel_chess_match', cancelChessMatchRpc);
+  logger.info('Chess RPC functions registered');
+
+  logger.info('Nakama modules loaded - auth and chess enabled');
+};
+
+// Custom authentication hook - validates app JWT
+const beforeAuthenticateCustom: nkruntime.BeforeHookFunction<nkruntime.AuthenticateCustomRequest> = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  data: nkruntime.AuthenticateCustomRequest
+): nkruntime.AuthenticateCustomRequest | void {
+  const appJwt = data.account?.id;
+
+  if (!appJwt) {
+    logger.warn('No JWT token provided in custom auth request');
+    throw new Error('Authentication token required');
+  }
+
+  const jwtSecret = ctx.env['JWT_SECRET'];
+  if (!jwtSecret) {
+    logger.error('JWT_SECRET environment variable not configured');
+    throw new Error('Server configuration error');
+  }
+
+  let claims: AppJwtClaims;
+  try {
+    claims = validateJwt(appJwt, jwtSecret, logger);
+  } catch (e: any) {
+    logger.warn(`JWT validation failed: ${e.message}`);
+    throw new Error(`Authentication failed: ${e.message}`);
+  }
+
+  // Validate required claims
+  if (!claims.user_id || !claims.username) {
+    throw new Error('Invalid token: missing required claims');
+  }
+
+  // Check issuer
+  if (claims.iss !== 'streaming-app') {
+    throw new Error('Invalid token issuer');
+  }
+
+  // Check expiry
+  const now = Math.floor(Date.now() / 1000);
+  if (claims.exp && claims.exp < now) {
+    throw new Error('Token expired');
+  }
+
+  // Check if user is disabled
+  if (claims.is_disabled === '1') {
+    throw new Error('Account disabled');
+  }
+
+  // Replace JWT with user_id for Nakama's custom auth linkage
+  // Nakama requires custom ID to be 6-128 bytes, so prefix with "user_"
+  data.account!.id = `user_${claims.user_id}`;
+
+  // Set username
+  data.username = claims.username;
+
+  // Store metadata in vars
+  if (!data.account!.vars) {
+    data.account!.vars = {};
+  }
+  data.account!.vars['app_username'] = claims.username;
+  data.account!.vars['user_color'] = claims.color_code || '#561D5E';
+  data.account!.vars['avatar_url'] = claims.avatar_url || '';
+  data.account!.vars['is_admin'] = claims.is_admin || '0';
+  data.account!.vars['is_moderator'] = claims.is_moderator || '0';
+
+  logger.info(`Authenticated user: ${claims.username} (ID: ${claims.user_id})`);
+
+  return data;
+};
+
+// Chess match handler functions - must be standalone named functions for Nakama JS runtime
+const chessMatchInit = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  params: { [key: string]: string }
+): { state: ChessState; tickRate: number; label: string } {
+  logger.info(`chessMatchInit called with params: ${JSON.stringify(params)}`);
+
+  // Generate Chess960 starting position
+  const { fen, positionId } = generateChess960Position();
+
+  const label = JSON.stringify({
+    game: 'chess960',
+    status: 'waiting',
+    players: 0,
+    positionId: positionId,
+    createdAt: Math.floor(Date.now() / 1000)
+  });
+
+  logger.info(`Chess960 match initialized with position #${positionId}, label: ${label}`);
+
+  return {
+    state: {
+      positionId: positionId,
+      fen: fen,
+      pgn: '',
+      whiteId: '',
+      blackId: '',
+      whiteName: '',
+      blackName: '',
+      whiteColor: '#561D5E',
+      blackColor: '#561D5E',
+      turn: 'w',
+      gameOver: false,
+      moveHistory: [],
+      createdAt: Math.floor(Date.now() / 1000),
+      spectators: []
+    },
+    tickRate: 1,
+    label: label
+  };
+};
+
+const chessMatchJoinAttempt = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  presence: nkruntime.Presence,
+  metadata: { [key: string]: any }
+): { state: ChessState; accept: boolean; rejectMessage?: string } | null {
+  // Allow players to rejoin if they were already in the match (reconnection)
+  if (state.whiteId === presence.userId || state.blackId === presence.userId) {
+    logger.info(`Player ${presence.username} rejoining match as existing player`);
+    return { state, accept: true };
+  }
+
+  // If game is full (2 players), allow as spectator
+  if (state.whiteId && state.blackId) {
+    // Check if already a spectator
+    if (state.spectators.includes(presence.userId)) {
+      return { state, accept: false, rejectMessage: 'Already spectating' };
+    }
+    // Allow spectators (unlimited)
+    return { state, accept: true };
+  }
+
+  return { state, accept: true };
+};
+
+const chessMatchJoin = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  presences: nkruntime.Presence[]
+): { state: ChessState } | null {
+  for (const presence of presences) {
+    // Check if this is a player rejoining
+    const isRejoiningWhite = state.whiteId === presence.userId;
+    const isRejoiningBlack = state.blackId === presence.userId;
+
+    if (isRejoiningWhite || isRejoiningBlack) {
+      const color = isRejoiningWhite ? 'w' : 'b';
+      logger.info(`${presence.username} rejoined as ${isRejoiningWhite ? 'WHITE' : 'BLACK'}`);
+
+      // Send current game state to rejoining player
+      const gameStatus = state.gameOver ? 'finished' : (state.whiteId && state.blackId ? 'playing' : 'waiting');
+      dispatcher.broadcastMessage(OpCode.GAME_STATE, JSON.stringify({
+        status: gameStatus,
+        yourColor: color,
+        fen: state.fen,
+        positionId: state.positionId,
+        whiteId: state.whiteId,
+        blackId: state.blackId,
+        whiteName: state.whiteName,
+        blackName: state.blackName,
+        whiteColor: state.whiteColor,
+        blackColor: state.blackColor,
+        turn: state.turn,
+        moveHistory: state.moveHistory,
+        gameOver: state.gameOver,
+        result: state.result
+      }), [presence]);
+
+      continue;
+    }
+
+    // Try to get user metadata for color
+    let userColor = '#561D5E'; // default
+    try {
+      const users = nk.usersGetId([presence.userId]);
+      if (users && users.length > 0 && users[0].metadata) {
+        userColor = (users[0].metadata as any).user_color || userColor;
+      }
+    } catch (e) {
+      // Ignore errors fetching user metadata
+    }
+
+    if (!state.whiteId) {
+      state.whiteId = presence.userId;
+      state.whiteName = presence.username;
+      state.whiteColor = userColor;
+      logger.info(`${presence.username} joined as WHITE`);
+
+      // Update label
+      dispatcher.matchLabelUpdate(JSON.stringify({
+        game: 'chess960',
+        status: 'waiting',
+        players: 1,
+        white: presence.username,
+        whiteId: presence.userId,
+        positionId: state.positionId,
+        createdAt: state.createdAt
+      }));
+
+      // Notify player they're waiting
+      dispatcher.broadcastMessage(OpCode.GAME_STATE, JSON.stringify({
+        status: 'waiting',
+        yourColor: 'w',
+        positionId: state.positionId,
+        fen: state.fen,
+        message: 'Waiting for opponent...'
+      }), [presence]);
+
+    } else if (!state.blackId) {
+      state.blackId = presence.userId;
+      state.blackName = presence.username;
+      state.blackColor = userColor;
+      logger.info(`${presence.username} joined as BLACK`);
+
+      // Update label - game starting
+      dispatcher.matchLabelUpdate(JSON.stringify({
+        game: 'chess960',
+        status: 'playing',
+        players: 2,
+        white: state.whiteName,
+        whiteId: state.whiteId,
+        black: state.blackName,
+        blackId: state.blackId,
+        positionId: state.positionId,
+        createdAt: state.createdAt
+      }));
+
+      // Game can start - notify both players
+      dispatcher.broadcastMessage(OpCode.GAME_STATE, JSON.stringify({
+        status: 'playing',
+        fen: state.fen,
+        positionId: state.positionId,
+        whiteId: state.whiteId,
+        blackId: state.blackId,
+        whiteName: state.whiteName,
+        blackName: state.blackName,
+        whiteColor: state.whiteColor,
+        blackColor: state.blackColor,
+        turn: state.turn
+      }));
+
+      logger.info(`Chess960 match started: ${state.whiteName} vs ${state.blackName} (Position #${state.positionId})`);
+    } else {
+      // Player joins as spectator
+      state.spectators.push(presence.userId);
+      logger.info(`${presence.username} joined as spectator`);
+
+      // Update label with spectator count
+      dispatcher.matchLabelUpdate(JSON.stringify({
+        game: 'chess960',
+        status: 'playing',
+        players: 2,
+        white: state.whiteName,
+        whiteId: state.whiteId,
+        black: state.blackName,
+        blackId: state.blackId,
+        positionId: state.positionId,
+        createdAt: state.createdAt,
+        spectatorCount: state.spectators.length
+      }));
+
+      // Send current game state to spectator
+      dispatcher.broadcastMessage(OpCode.GAME_STATE, JSON.stringify({
+        status: 'spectating',
+        fen: state.fen,
+        positionId: state.positionId,
+        whiteId: state.whiteId,
+        blackId: state.blackId,
+        whiteName: state.whiteName,
+        blackName: state.blackName,
+        whiteColor: state.whiteColor,
+        blackColor: state.blackColor,
+        turn: state.turn,
+        moveHistory: state.moveHistory
+      }), [presence]);
+    }
+  }
+
+  return { state };
+};
+
+const chessMatchLoop = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  messages: nkruntime.MatchMessage[]
+): { state: ChessState } | null {
+  // Check for pending cancellation from matchSignal
+  if (state.pendingCancel) {
+    logger.info('Match terminated due to pendingCancel flag');
+    return null; // Terminate match
+  }
+
+  // Check for pending cancellation from RPC (storage-based fallback)
+  // This handles cases where matchSignal fails (e.g., match just created)
+  if (tick % 5 === 0) {
+    try {
+      const cancelFlags = nk.storageRead([{
+        collection: 'chess_cancel',
+        key: ctx.matchId,
+        userId: '00000000-0000-0000-0000-000000000000'
+      }]);
+      if (cancelFlags && cancelFlags.length > 0) {
+        // Clean up the flag
+        nk.storageDelete([{
+          collection: 'chess_cancel',
+          key: ctx.matchId,
+          userId: '00000000-0000-0000-0000-000000000000'
+        }]);
+        logger.info('Match cancelled via storage flag');
+        return null; // Terminate match
+      }
+    } catch (e) {
+      // Ignore storage read errors - not critical
+    }
+  }
+
+  // Check for timeout on waiting matches (every ~10 seconds)
+  if (tick % 10 === 0 && state.whiteId && !state.blackId && !state.gameOver) {
+    const now = Math.floor(Date.now() / 1000);
+    const waitTime = now - state.createdAt;
+
+    if (waitTime > 900) { // 15 minutes
+      logger.info(`Match timeout - no opponent joined after ${waitTime}s`);
+      dispatcher.broadcastMessage(OpCode.GAME_OVER, JSON.stringify({
+        result: 'timeout',
+        reason: 'Challenge expired - no opponent joined within 15 minutes'
+      }));
+      return null; // Terminate match
+    }
+  }
+
+  for (const message of messages) {
+    const playerId = message.sender.userId;
+
+    switch (message.opCode) {
+      case OpCode.MOVE: {
+        if (state.gameOver) {
+          logger.warn('Move attempted on finished game');
+          continue;
+        }
+
+        const moveData = JSON.parse(nk.binaryToString(message.data));
+
+        // Validate it's this player's turn
+        const isWhite = playerId === state.whiteId;
+        const isBlack = playerId === state.blackId;
+
+        if ((state.turn === 'w' && !isWhite) || (state.turn === 'b' && !isBlack)) {
+          logger.warn(`Not ${playerId}'s turn`);
+          continue;
+        }
+
+        // Validate and apply the move
+        const validMove = validateChessMove(state.fen, moveData.from, moveData.to, moveData.promotion);
+
+        if (!validMove.valid) {
+          logger.warn(`Invalid move: ${JSON.stringify(moveData)}`);
+          continue;
+        }
+
+        // Update state
+        state.fen = validMove.newFen;
+        state.turn = validMove.turn as 'w' | 'b';
+        state.moveHistory.push(`${moveData.from}-${moveData.to}`);
+
+        // Check game over conditions
+        if (validMove.gameOver) {
+          state.gameOver = true;
+          state.result = validMove.result;
+
+          // Update ELO
+          if (state.result === '1-0') {
+            updateElo(nk, logger, state.whiteId, state.whiteName, state.blackId, state.blackName, false);
+          } else if (state.result === '0-1') {
+            updateElo(nk, logger, state.blackId, state.blackName, state.whiteId, state.whiteName, false);
+          } else {
+            // Draw
+            updateElo(nk, logger, state.whiteId, state.whiteName, state.blackId, state.blackName, true);
+          }
+
+          dispatcher.broadcastMessage(OpCode.GAME_OVER, JSON.stringify({
+            fen: state.fen,
+            result: state.result,
+            reason: validMove.reason
+          }));
+
+          // Update label
+          dispatcher.matchLabelUpdate(JSON.stringify({
+            game: 'chess960',
+            status: 'finished',
+            result: state.result,
+            white: state.whiteName,
+            whiteId: state.whiteId,
+            black: state.blackName,
+            blackId: state.blackId,
+            positionId: state.positionId
+          }));
+
+          logger.info(`Game over: ${state.result} (${validMove.reason})`);
+        } else {
+          // Broadcast move to all players
+          dispatcher.broadcastMessage(OpCode.MOVE, JSON.stringify({
+            move: moveData,
+            fen: state.fen,
+            turn: state.turn
+          }));
+        }
+        break;
+      }
+
+      case OpCode.RESIGN: {
+        // Only players can resign - spectators cannot affect the game
+        const isPlayerWhite = playerId === state.whiteId;
+        const isPlayerBlack = playerId === state.blackId;
+        if (!isPlayerWhite && !isPlayerBlack) {
+          logger.warn(`Spectator ${message.sender.username} attempted to resign - ignoring`);
+          continue;
+        }
+
+        state.gameOver = true;
+        state.result = isPlayerWhite ? '0-1' : '1-0';
+
+        // Winner gets ELO
+        const winnerId = isPlayerWhite ? state.blackId : state.whiteId;
+        const winnerName = isPlayerWhite ? state.blackName : state.whiteName;
+        const loserName = isPlayerWhite ? state.whiteName : state.blackName;
+        updateElo(nk, logger, winnerId, winnerName, playerId, loserName, false);
+
+        dispatcher.broadcastMessage(OpCode.GAME_OVER, JSON.stringify({
+          result: state.result,
+          reason: 'resignation'
+        }));
+
+        logger.info(`${message.sender.username} resigned`);
+        break;
+      }
+    }
+  }
+
+  return { state };
+};
+
+const chessMatchLeave = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  presences: nkruntime.Presence[]
+): { state: ChessState } | null {
+  for (const presence of presences) {
+    // Check if this is a spectator leaving
+    const spectatorIndex = state.spectators.indexOf(presence.userId);
+    if (spectatorIndex !== -1) {
+      state.spectators.splice(spectatorIndex, 1);
+      logger.info(`Spectator ${presence.username} left the match`);
+
+      // Update label with new spectator count
+      if (state.whiteId && state.blackId) {
+        dispatcher.matchLabelUpdate(JSON.stringify({
+          game: 'chess960',
+          status: state.gameOver ? 'finished' : 'playing',
+          players: 2,
+          white: state.whiteName,
+          whiteId: state.whiteId,
+          black: state.blackName,
+          blackId: state.blackId,
+          positionId: state.positionId,
+          createdAt: state.createdAt,
+          spectatorCount: state.spectators.length
+        }));
+      }
+      continue;
+    }
+
+    logger.info(`Player ${presence.username} left the match`);
+
+    // If match is still waiting (only white player, no black), DON'T terminate immediately
+    // The 15-minute timeout will clean up abandoned challenges
+    // Explicit cancellation is handled by the cancel_chess_match RPC
+    if (state.whiteId && !state.blackId && presence.userId === state.whiteId) {
+      logger.info(`White player ${presence.username} disconnected from waiting challenge - will timeout if not cancelled`);
+      // Don't terminate - let timeout handle it or explicit cancel RPC
+      return { state };
+    }
+
+    // If game in progress, opponent wins by forfeit
+    if (!state.gameOver && state.whiteId && state.blackId) {
+      const isPlayer = presence.userId === state.whiteId || presence.userId === state.blackId;
+      if (isPlayer) {
+        const isWhiteLeaving = presence.userId === state.whiteId;
+        state.gameOver = true;
+        state.result = isWhiteLeaving ? '0-1' : '1-0';
+
+        // Winner gets ELO
+        const winnerId = isWhiteLeaving ? state.blackId : state.whiteId;
+        const winnerName = isWhiteLeaving ? state.blackName : state.whiteName;
+        const loserName = isWhiteLeaving ? state.whiteName : state.blackName;
+        updateElo(nk, logger, winnerId, winnerName, presence.userId, loserName, false);
+
+        dispatcher.broadcastMessage(OpCode.GAME_OVER, JSON.stringify({
+          result: state.result,
+          reason: 'forfeit'
+        }));
+
+        logger.info(`Game forfeited: ${state.result}`);
+      }
+    }
+  }
+
+  return { state };
+};
+
+const chessMatchTerminate = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  graceSeconds: number
+): { state: ChessState } | null {
+  logger.info('Match terminating');
+  return { state };
+};
+
+const chessMatchSignal = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  dispatcher: nkruntime.MatchDispatcher,
+  tick: number,
+  state: ChessState,
+  data: string
+): { state: ChessState; data?: string } | null {
+  logger.info(`Match signal received: ${data}`);
+
+  // Handle cancel signal from RPC
+  if (data === 'cancel') {
+    logger.info('Match cancelled via signal - setting pendingCancel flag');
+    state.pendingCancel = true;
+    // Return state with flag set - matchLoop will terminate on next tick
+    // (Returning null here causes Nakama error: "matchSignal is expected to return an object with 'state' property")
+  }
+
+  return { state };
+};
+
+// Chess move validation using chess.js for proper legal move checking
+function validateChessMove(
+  fen: string,
+  from: string,
+  to: string,
+  promotion?: string
+): { valid: boolean; newFen: string; turn: string; gameOver: boolean; result?: string; reason?: string } {
+  try {
+    const chess = new Chess(fen);
+
+    // Attempt the move - chess.js validates legality
+    const move = chess.move({
+      from,
+      to,
+      promotion: promotion || undefined
+    });
+
+    if (!move) {
+      return { valid: false, newFen: fen, turn: chess.turn(), gameOver: false };
+    }
+
+    const newFen = chess.fen();
+    const newTurn = chess.turn();
+
+    // Check game over conditions
+    if (chess.isCheckmate()) {
+      return {
+        valid: true,
+        newFen,
+        turn: newTurn,
+        gameOver: true,
+        result: newTurn === 'w' ? '0-1' : '1-0',
+        reason: 'checkmate'
+      };
+    }
+
+    if (chess.isStalemate()) {
+      return {
+        valid: true,
+        newFen,
+        turn: newTurn,
+        gameOver: true,
+        result: '1/2-1/2',
+        reason: 'stalemate'
+      };
+    }
+
+    if (chess.isDraw()) {
+      let reason = 'draw';
+      if (chess.isThreefoldRepetition()) reason = 'threefold repetition';
+      else if (chess.isInsufficientMaterial()) reason = 'insufficient material';
+      // 50-move rule is part of isDraw()
+
+      return {
+        valid: true,
+        newFen,
+        turn: newTurn,
+        gameOver: true,
+        result: '1/2-1/2',
+        reason
+      };
+    }
+
+    return {
+      valid: true,
+      newFen,
+      turn: newTurn,
+      gameOver: false
+    };
+  } catch (e) {
+    return { valid: false, newFen: fen, turn: 'w', gameOver: false };
+  }
+}
+
+// Update ELO ratings
+function updateElo(
+  nk: nkruntime.Nakama,
+  logger: nkruntime.Logger,
+  winnerId: string,
+  winnerName: string,
+  loserId: string,
+  loserName: string,
+  isDraw: boolean
+): void {
+  const K = 32;  // ELO K-factor
+  const DEFAULT_ELO = 1200;
+
+  try {
+    // Ensure we have usernames - fetch from account if not provided
+    let actualWinnerName = winnerName;
+    let actualLoserName = loserName;
+
+    if (!actualWinnerName || actualWinnerName === 'undefined') {
+      try {
+        const users = nk.usersGetId([winnerId]);
+        if (users && users.length > 0) {
+          actualWinnerName = users[0].username || 'Unknown';
+        }
+      } catch (e) {
+        actualWinnerName = 'Unknown';
+      }
+    }
+
+    if (!actualLoserName || actualLoserName === 'undefined') {
+      try {
+        const users = nk.usersGetId([loserId]);
+        if (users && users.length > 0) {
+          actualLoserName = users[0].username || 'Unknown';
+        }
+      } catch (e) {
+        actualLoserName = 'Unknown';
+      }
+    }
+
+    logger.info(`updateElo called: winner=${actualWinnerName} (${winnerId}), loser=${actualLoserName} (${loserId})`);
+
+    // Get current ratings
+    const winnerRecords = nk.leaderboardRecordsList('chess-elo', [winnerId], 1, '', 0);
+    const loserRecords = nk.leaderboardRecordsList('chess-elo', [loserId], 1, '', 0);
+
+    const winnerElo = winnerRecords.records?.[0]?.score ?? DEFAULT_ELO;
+    const loserElo = loserRecords.records?.[0]?.score ?? DEFAULT_ELO;
+
+    // Calculate expected scores
+    const expectedWinner = 1 / (1 + Math.pow(10, (loserElo - winnerElo) / 400));
+    const expectedLoser = 1 - expectedWinner;
+
+    // Calculate new ratings
+    let newWinnerElo: number, newLoserElo: number;
+
+    if (isDraw) {
+      newWinnerElo = Math.round(winnerElo + K * (0.5 - expectedWinner));
+      newLoserElo = Math.round(loserElo + K * (0.5 - expectedLoser));
+    } else {
+      newWinnerElo = Math.round(winnerElo + K * (1 - expectedWinner));
+      newLoserElo = Math.round(loserElo + K * (0 - expectedLoser));
+    }
+
+    // Ensure minimum ELO of 100
+    newWinnerElo = Math.max(100, newWinnerElo);
+    newLoserElo = Math.max(100, newLoserElo);
+
+    // Update leaderboard with usernames
+    nk.leaderboardRecordWrite('chess-elo', winnerId, actualWinnerName, newWinnerElo, 0, {});
+    nk.leaderboardRecordWrite('chess-elo', loserId, actualLoserName, newLoserElo, 0, {});
+
+    logger.info(`ELO updated - ${actualWinnerName}: ${winnerElo} -> ${newWinnerElo}, ${actualLoserName}: ${loserElo} -> ${newLoserElo}`);
+  } catch (e: any) {
+    logger.error(`Failed to update ELO: ${e.message}`);
+  }
+}
+
+// RPC: Create chess match
+const createChessMatchRpc: nkruntime.RpcFunction = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  payload: string
+): string {
+  if (!ctx.userId) {
+    throw new Error('Authentication required');
+  }
+
+  logger.info(`Creating chess match for user: ${ctx.username} (${ctx.userId})`);
+
+  // Check if user already has an active challenge (waiting or playing)
+  const existingMatches = nk.matchList(100, true, null, 0, null, null);
+  for (const match of existingMatches) {
+    if (!match.label) continue;
+    try {
+      const label = JSON.parse(match.label);
+      if (label.game !== 'chess960') continue;
+
+      // Check if user is already a player in an active match
+      if (label.whiteId === ctx.userId || label.blackId === ctx.userId) {
+        if (label.status === 'waiting' || label.status === 'playing') {
+          logger.info(`User ${ctx.username} already has an active match: ${match.matchId}`);
+          return JSON.stringify({
+            error: 'You already have an active challenge. Cancel it or finish your game first.',
+            existingMatchId: match.matchId
+          });
+        }
+      }
+    } catch (e) {
+      // Skip matches with invalid labels
+    }
+  }
+
+  try {
+    const matchId = nk.matchCreate('chess', {});
+    logger.info(`Chess match created successfully: ${matchId} by ${ctx.username}`);
+    return JSON.stringify({ matchId });
+  } catch (e: any) {
+    logger.error(`Failed to create chess match: ${e.message}`);
+    throw e;
+  }
+};
+
+// RPC: List active chess matches
+const listChessMatchesRpc: nkruntime.RpcFunction = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  payload: string
+): string {
+  // Handle double-encoded JSON from nakama-js client
+  let params: any = {};
+  if (payload) {
+    let parsed = JSON.parse(payload);
+    // If still a string, parse again (nakama-js double-encodes)
+    if (typeof parsed === 'string') {
+      parsed = JSON.parse(parsed);
+    }
+    params = parsed;
+  }
+  const limit = params.limit ?? 20;
+  const status = params.status; // 'waiting', 'playing', 'all'
+
+  // Query for all authoritative matches first, then filter by label
+  // minSize=0 to include matches waiting for players, maxSize=null for no limit
+  let matches = nk.matchList(limit * 2, true, null, 0, null, null);
+
+  logger.info(`Found ${matches.length} total authoritative matches (minSize=0)`);
+
+  // Log all matches for debugging
+  matches.forEach((m, i) => {
+    logger.info(`Match ${i}: id=${m.matchId}, size=${m.size}, label=${m.label}`);
+  });
+
+  // Filter to only chess960 matches
+  matches = matches.filter(m => {
+    if (!m.label) {
+      logger.info(`Match ${m.matchId} has no label, skipping`);
+      return false;
+    }
+    try {
+      const label = JSON.parse(m.label);
+      const isChess = label.game === 'chess960';
+      if (!isChess) {
+        logger.info(`Match ${m.matchId} is not chess960: ${m.label}`);
+      }
+      return isChess;
+    } catch (e) {
+      logger.warn(`Failed to parse label for match ${m.matchId}: ${m.label}`);
+      return false;
+    }
+  });
+
+  logger.info(`Found ${matches.length} chess960 matches after filtering`);
+
+  // Get current user ID to check if they're in any match
+  const currentUserId = ctx.userId;
+  logger.info(`Current user ID for match check: ${currentUserId}`);
+
+  // Map and filter matches
+  const result = matches.map(m => {
+    let label: any = {};
+    try {
+      label = m.label ? JSON.parse(m.label) : {};
+    } catch (e) {
+      logger.warn(`Failed to parse match label: ${m.label}`);
+    }
+
+    // Check if current user is a player in this match
+    let isCurrentUserMatch = false;
+    let currentUserColor = null;
+    if (currentUserId) {
+      logger.info(`Checking match ${m.matchId}: whiteId=${label.whiteId}, blackId=${label.blackId}, currentUserId=${currentUserId}`);
+      if (label.whiteId && label.whiteId === currentUserId) {
+        isCurrentUserMatch = true;
+        currentUserColor = 'w';
+        logger.info(`  -> User is WHITE player`);
+      } else if (label.blackId && label.blackId === currentUserId) {
+        isCurrentUserMatch = true;
+        currentUserColor = 'b';
+        logger.info(`  -> User is BLACK player`);
+      } else {
+        logger.info(`  -> User is NOT a player in this match`);
+      }
+    }
+
+    return {
+      matchId: m.matchId,
+      status: label.status || 'unknown',
+      white: label.white || null,
+      black: label.black || null,
+      positionId: label.positionId,
+      createdAt: label.createdAt,
+      spectatorCount: label.spectatorCount || 0,
+      size: m.size,
+      isCurrentUserMatch,
+      currentUserColor
+    };
+  }).filter(m => {
+    // Filter by status if specified
+    if (!status || status === 'all') return true;
+    return m.status === status;
+  }).slice(0, limit);
+
+  logger.info(`Returning ${result.length} matches after filtering for status: ${status}`);
+
+  return JSON.stringify({ matches: result });
+};
+
+// RPC: Get chess leaderboard
+const getChessLeaderboardRpc: nkruntime.RpcFunction = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  payload: string
+): string {
+  const params = payload ? JSON.parse(payload) : {};
+  const limit = params.limit ?? 20;
+
+  const records = nk.leaderboardRecordsList('chess-elo', [], limit, '', 0);
+
+  return JSON.stringify({
+    records: records.records?.map(r => ({
+      rank: r.rank,
+      userId: r.ownerId,
+      username: r.username,
+      elo: r.score
+    })) ?? []
+  });
+};
+
+// RPC: Cancel a chess challenge (waiting match)
+const cancelChessMatchRpc: nkruntime.RpcFunction = function(
+  ctx: nkruntime.Context,
+  logger: nkruntime.Logger,
+  nk: nkruntime.Nakama,
+  payload: string
+): string {
+  if (!ctx.userId) {
+    throw new Error('Authentication required');
+  }
+
+  // Handle double-encoded JSON from nakama-js client
+  let params: any = {};
+  if (payload) {
+    let parsed = JSON.parse(payload);
+    if (typeof parsed === 'string') {
+      parsed = JSON.parse(parsed);
+    }
+    params = parsed;
+  }
+
+  const matchId = params.matchId;
+  if (!matchId) {
+    return JSON.stringify({ success: false, error: 'Match ID required' });
+  }
+
+  logger.info(`User ${ctx.username} requesting to cancel match: ${matchId}`);
+
+  // Find the match and verify ownership
+  const matches = nk.matchList(100, true, null, 0, null, null);
+  let targetMatch = null;
+
+  for (const match of matches) {
+    if (match.matchId === matchId) {
+      targetMatch = match;
+      break;
+    }
+  }
+
+  if (!targetMatch) {
+    return JSON.stringify({ success: false, error: 'Match not found' });
+  }
+
+  // Parse label to check ownership
+  let label: any = {};
+  try {
+    label = targetMatch.label ? JSON.parse(targetMatch.label) : {};
+  } catch (e) {
+    return JSON.stringify({ success: false, error: 'Invalid match' });
+  }
+
+  // Only the white player (creator) can cancel a waiting match
+  if (label.whiteId !== ctx.userId) {
+    return JSON.stringify({ success: false, error: 'You can only cancel your own challenges' });
+  }
+
+  // Only waiting matches can be cancelled
+  if (label.status !== 'waiting') {
+    return JSON.stringify({ success: false, error: 'Can only cancel waiting challenges' });
+  }
+
+  // Signal the match to terminate
+  try {
+    nk.matchSignal(matchId, 'cancel');
+    logger.info(`Match ${matchId} cancelled by ${ctx.username}`);
+    return JSON.stringify({ success: true });
+  } catch (e: any) {
+    // matchSignal can fail if match runtime not ready - use storage-based cancel
+    logger.warn(`matchSignal failed, using storage-based cancel: ${e.message}`);
+    try {
+      nk.storageWrite([{
+        collection: 'chess_cancel',
+        key: matchId,
+        userId: '00000000-0000-0000-0000-000000000000',
+        value: { cancelledBy: ctx.userId, cancelledAt: Date.now() },
+        permissionRead: 0,
+        permissionWrite: 0
+      }]);
+      logger.info(`Match ${matchId} marked for cancellation by ${ctx.username}`);
+      return JSON.stringify({ success: true });
+    } catch (storageErr: any) {
+      logger.error(`Failed to cancel match: ${storageErr.message}`);
+      return JSON.stringify({ success: false, error: 'Failed to cancel match' });
+    }
+  }
+};
+
+// No export needed - Nakama auto-detects InitModule function
diff --git a/nakama/modules/tsconfig.json b/nakama/modules/tsconfig.json
new file mode 100644
index 0000000..2709b3b
--- /dev/null
+++ b/nakama/modules/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./build",
+    "declaration": true,
+    "sourceMap": false
+  },
+  "include": ["src/**/*"],
+  "files": ["node_modules/nakama-runtime/index.d.ts"]
+}
diff --git a/openresty/Dockerfile b/openresty/Dockerfile
index 660ad03..53dc01a 100644
--- a/openresty/Dockerfile
+++ b/openresty/Dockerfile
@@ -1,17 +1,20 @@
 FROM openresty/openresty:alpine
 
-# Install dependencies needed by opm
-RUN apk add --no-cache curl perl
+# Install dependencies needed by opm and thumbnail generation
+RUN apk add --no-cache curl perl ffmpeg
 
 # Install lua-resty-http
 RUN opm get ledgetech/lua-resty-http
 
+# Install lua-resty-jwt for edge JWT validation
+RUN opm get SkyLothar/lua-resty-jwt
+
 # Copy configuration
 COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
 COPY lua /usr/local/openresty/nginx/lua
 
 # Create uploads directory structure with proper permissions
-RUN mkdir -p /app/uploads/avatars && \
+RUN mkdir -p /app/uploads/avatars /app/uploads/stickers /app/uploads/sticker-submissions && \
     chmod -R 755 /app/uploads
 
 # Create nginx temp directories
@@ -22,7 +25,10 @@ RUN mkdir -p /var/cache/nginx/client_temp \
     /var/cache/nginx/scgi_temp && \
     chmod -R 755 /var/cache/nginx
 
+# Create startup script inline to avoid Windows line ending issues
+RUN printf '#!/bin/sh\nmkdir -p /tmp/thumbs\nchmod 777 /tmp/thumbs\nexec /usr/local/openresty/bin/openresty -g "daemon off;"\n' > /start.sh && chmod +x /start.sh
+
 EXPOSE 80 443
 
-# Run as root but nginx will drop privileges after binding to ports
-CMD ["/usr/local/openresty/bin/openresty", "-g", "daemon off;"]
\ No newline at end of file
+# Use startup script to ensure proper permissions on /tmp/thumbs
+CMD ["/start.sh"]
\ No newline at end of file
diff --git a/openresty/conf.d/ssl.conf.template b/openresty/conf.d/ssl.conf.template
new file mode 100644
index 0000000..2d0d81b
--- /dev/null
+++ b/openresty/conf.d/ssl.conf.template
@@ -0,0 +1,38 @@
+# SSL/HTTPS Server Block Template
+# This file is used as a template when SSL certificates are available
+# The domain placeholder __DOMAIN__ will be replaced with the actual domain
+
+server {
+    listen 443 ssl http2;
+    server_name __DOMAIN__;
+
+    # SSL Certificate paths (Let's Encrypt)
+    ssl_certificate /etc/letsencrypt/live/__DOMAIN__/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/__DOMAIN__/privkey.pem;
+
+    # Modern SSL configuration
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
+    ssl_prefer_server_ciphers off;
+
+    # SSL session settings
+    ssl_session_timeout 1d;
+    ssl_session_cache shared:SSL:50m;
+    ssl_session_tickets off;
+
+    # OCSP Stapling
+    ssl_stapling on;
+    ssl_stapling_verify on;
+    resolver 8.8.8.8 8.8.4.4 valid=300s;
+    resolver_timeout 5s;
+
+    # Security headers
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Include the main location blocks
+    # These should match your HTTP server configuration
+    include /usr/local/openresty/nginx/conf/locations.conf;
+}
diff --git a/openresty/lua/fingerprint.lua b/openresty/lua/fingerprint.lua
new file mode 100644
index 0000000..3ba1846
--- /dev/null
+++ b/openresty/lua/fingerprint.lua
@@ -0,0 +1,71 @@
+-- Server-side fingerprint generation
+-- Generates a consistent fingerprint from IP + User-Agent + Accept-Language
+-- This cannot be spoofed by clients as it's computed server-side
+
+local resty_sha256 = require "resty.sha256"
+local str = require "resty.string"
+
+local _M = {}
+
+-- Cache fingerprints to avoid recomputation (10 min TTL)
+local fingerprint_cache = ngx.shared.fingerprints
+
+-- Generate a fingerprint from request characteristics
+-- Uses: Client IP, User-Agent, Accept-Language
+function _M.generate(custom_ip)
+    -- Get client IP (respects X-Real-IP set by upstream proxy)
+    local client_ip = custom_ip or ngx.var.remote_addr
+
+    -- Get User-Agent (empty string if not present)
+    local user_agent = ngx.var.http_user_agent or ""
+
+    -- Get Accept-Language for additional entropy
+    local accept_lang = ngx.var.http_accept_language or ""
+
+    -- Create a cache key from the raw inputs
+    local cache_key = client_ip .. "|" .. user_agent .. "|" .. accept_lang
+
+    -- Check cache first
+    if fingerprint_cache then
+        local cached = fingerprint_cache:get(cache_key)
+        if cached then
+            return cached
+        end
+    end
+
+    -- Generate SHA256 hash
+    local sha256 = resty_sha256:new()
+    if not sha256 then
+        ngx.log(ngx.ERR, "Failed to create SHA256 instance")
+        return nil
+    end
+
+    -- Hash the combined data
+    sha256:update(client_ip)
+    sha256:update("|")
+    sha256:update(user_agent)
+    sha256:update("|")
+    sha256:update(accept_lang)
+
+    local digest = sha256:final()
+    local fingerprint = str.to_hex(digest)
+
+    -- Cache for 10 minutes (600 seconds)
+    if fingerprint_cache then
+        fingerprint_cache:set(cache_key, fingerprint, 600)
+    end
+
+    return fingerprint
+end
+
+-- Inject fingerprint header for proxied requests
+-- Call this in access_by_lua_block before proxy_pass
+function _M.inject_header()
+    local fp = _M.generate()
+    if fp then
+        ngx.req.set_header("X-Server-Fingerprint", fp)
+    end
+    return fp
+end
+
+return _M
diff --git a/openresty/lua/jwt.lua b/openresty/lua/jwt.lua
new file mode 100644
index 0000000..706ff3b
--- /dev/null
+++ b/openresty/lua/jwt.lua
@@ -0,0 +1,167 @@
+-- JWT validation module for OpenResty edge authentication
+-- Validates JWT tokens before requests hit the backend
+local jwt = require "resty.jwt"
+
+local _M = {}
+
+-- Get JWT secret (cached after first call)
+local jwt_secret_cache = nil
+
+local function get_jwt_secret()
+    if jwt_secret_cache then
+        return jwt_secret_cache
+    end
+
+    -- os.getenv works in OpenResty when 'env JWT_SECRET;' is in nginx.conf
+    local secret = os.getenv("JWT_SECRET")
+    if secret and secret ~= "" then
+        jwt_secret_cache = secret
+        ngx.log(ngx.INFO, "JWT_SECRET loaded successfully (", string.len(secret), " chars)")
+        return secret
+    end
+
+    ngx.log(ngx.ERR, "JWT_SECRET environment variable not set or empty")
+    return nil
+end
+
+-- Validate JWT and inject user headers for backend
+-- Call this in access_by_lua_block for authenticated endpoints
+function _M.validate_and_inject()
+    -- Get token from httpOnly cookie (name: auth_token)
+    local token = ngx.var.cookie_auth_token
+    if not token or token == "" then
+        ngx.log(ngx.DEBUG, "No auth_token cookie found")
+        ngx.status = 401
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"No authentication token"}')
+        return ngx.exit(401)
+    end
+
+    -- Get JWT secret
+    local secret = get_jwt_secret()
+    if not secret then
+        -- SECURITY FIX: Fail closed - do NOT allow requests through if secret is missing
+        -- This prevents authentication bypass if env var is misconfigured
+        ngx.log(ngx.ERR, "JWT_SECRET not configured - blocking request")
+        ngx.status = 500
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Server configuration error"}')
+        return ngx.exit(500)
+    end
+
+    -- Verify JWT signature and decode
+    local jwt_obj = jwt:verify(secret, token)
+
+    if not jwt_obj then
+        ngx.log(ngx.ERR, "JWT verification returned nil")
+        ngx.status = 401
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Invalid token"}')
+        return ngx.exit(401)
+    end
+
+    if not jwt_obj.verified then
+        local reason = jwt_obj.reason or "unknown"
+        ngx.log(ngx.WARN, "JWT verification failed: ", reason)
+        ngx.status = 401
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Invalid token: ' .. reason .. '"}')
+        return ngx.exit(401)
+    end
+
+    -- Payload should exist if verified
+    local payload = jwt_obj.payload
+    if not payload then
+        ngx.log(ngx.ERR, "JWT verified but no payload")
+        ngx.status = 401
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Invalid token structure"}')
+        return ngx.exit(401)
+    end
+
+    -- Check expiry (jwt library should handle this, but be safe)
+    local exp = payload.exp
+    if exp then
+        local now = ngx.time()
+        if exp < now then
+            ngx.log(ngx.DEBUG, "JWT expired: exp=", exp, " now=", now)
+            ngx.status = 401
+            ngx.header["Content-Type"] = "application/json"
+            ngx.say('{"error":"Token expired"}')
+            return ngx.exit(401)
+        end
+    end
+
+    -- Check issuer
+    local iss = payload.iss
+    if iss ~= "streaming-app" then
+        ngx.log(ngx.WARN, "Invalid JWT issuer: ", tostring(iss))
+        ngx.status = 401
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Invalid token issuer"}')
+        return ngx.exit(401)
+    end
+
+    -- SECURITY: Check if user account is disabled
+    local is_disabled = payload.is_disabled
+    if is_disabled == "1" or is_disabled == true then
+        ngx.log(ngx.WARN, "Disabled user attempted access: ", tostring(payload.username))
+        ngx.status = 403
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error":"Account disabled"}')
+        return ngx.exit(403)
+    end
+
+    -- Inject user info headers for backend (allows backend to skip re-validation)
+    ngx.req.set_header("X-User-ID", tostring(payload.user_id or ""))
+    ngx.req.set_header("X-Username", tostring(payload.username or ""))
+    ngx.req.set_header("X-Is-Admin", tostring(payload.is_admin or "0"))
+    ngx.req.set_header("X-Is-Moderator", tostring(payload.is_moderator or "0"))
+    ngx.req.set_header("X-Is-Streamer", tostring(payload.is_streamer or "0"))
+    ngx.req.set_header("X-Is-Restreamer", tostring(payload.is_restreamer or "0"))
+    ngx.req.set_header("X-Token-Version", tostring(payload.token_version or "1"))
+    ngx.req.set_header("X-User-Color", tostring(payload.color_code or "#561D5E"))
+    ngx.req.set_header("X-Avatar-URL", tostring(payload.avatar_url or ""))
+    ngx.req.set_header("X-JWT-Validated", "true")
+
+    ngx.log(ngx.DEBUG, "JWT validated for user: ", tostring(payload.username))
+end
+
+-- Optional: Get user info without blocking (for endpoints that work with or without auth)
+-- Returns user payload if authenticated, nil otherwise
+function _M.get_user_if_authenticated()
+    local token = ngx.var.cookie_auth_token
+    if not token or token == "" then
+        return nil
+    end
+
+    local secret = get_jwt_secret()
+    if not secret then
+        return nil
+    end
+
+    local jwt_obj = jwt:verify(secret, token)
+    if not jwt_obj or not jwt_obj.verified then
+        return nil
+    end
+
+    local payload = jwt_obj.payload
+    if not payload then
+        return nil
+    end
+
+    -- Check expiry
+    if payload.exp and payload.exp < ngx.time() then
+        return nil
+    end
+
+    -- Check disabled
+    local is_disabled = payload.is_disabled
+    if is_disabled == "1" or is_disabled == true then
+        return nil
+    end
+
+    return payload
+end
+
+return _M
diff --git a/openresty/lua/redis_helper.lua b/openresty/lua/redis_helper.lua
index ff42c70..db7fec8 100644
--- a/openresty/lua/redis_helper.lua
+++ b/openresty/lua/redis_helper.lua
@@ -2,19 +2,33 @@ local redis = require "resty.redis"
 
 local _M = {}
 
+-- Cache password at module load time (works better with OpenResty)
+local REDIS_PASSWORD = os.getenv("REDIS_PASS")
+
 local function get_redis_connection()
     local red = redis:new()
     red:set_timeouts(1000, 1000, 1000) -- connect, send, read timeout in ms
-    
+
     local host = "redis"  -- Will be resolved by nginx resolver
     local port = tonumber(os.getenv("REDIS_PORT")) or 6379
-    
+
     local ok, err = red:connect(host, port)
     if not ok then
         ngx.log(ngx.ERR, "Failed to connect to Redis: ", err)
         return nil
     end
-    
+
+    -- Authenticate if password is set
+    if REDIS_PASSWORD and REDIS_PASSWORD ~= "" then
+        local res, err = red:auth(REDIS_PASSWORD)
+        if not res then
+            ngx.log(ngx.ERR, "Failed to authenticate to Redis: ", err)
+            return nil
+        end
+    else
+        ngx.log(ngx.WARN, "No Redis password set, trying without auth")
+    end
+
     return red
 end
 
@@ -69,7 +83,8 @@ function _M.validate_viewer_token(token, expected_stream_key)
     
     -- Check if the token is for the expected stream
     if res ~= expected_stream_key then
-        ngx.log(ngx.WARN, "Token stream mismatch. Expected: ", expected_stream_key, " Got: ", res)
+        -- SECURITY FIX: Redact stream keys from logs to prevent exposure
+        ngx.log(ngx.WARN, "Token stream mismatch. Expected hash: ", ngx.md5(expected_stream_key):sub(1, 8), " Got hash: ", ngx.md5(res):sub(1, 8))
         return false
     end
     
@@ -81,9 +96,9 @@ function _M.refresh_viewer_token(token)
     if not red then
         return false
     end
-    
-    -- Refresh TTL to 30 seconds
-    local ok, err = red:expire("viewer_token:" .. token, 30)
+
+    -- Refresh TTL to 5 minutes on each HLS segment access
+    local ok, err = red:expire("viewer_token:" .. token, 300)
     if not ok then
         ngx.log(ngx.ERR, "Failed to refresh token TTL: ", err)
     end
diff --git a/openresty/lua/thumbnail.lua b/openresty/lua/thumbnail.lua
new file mode 100644
index 0000000..c11801d
--- /dev/null
+++ b/openresty/lua/thumbnail.lua
@@ -0,0 +1,180 @@
+local _M = {}
+
+local THUMB_DIR = "/tmp/thumbs"
+local CACHE_TTL = 5  -- seconds before regenerating
+local FFMPEG_TIMEOUT = 15  -- seconds (needs more time for animated capture)
+local ANIMATION_DURATION = 3  -- seconds of video to capture
+local ANIMATION_FPS = 8  -- frames per second in output
+
+-- SECURITY FIX: Shell escape function to prevent command injection
+local function shell_escape(str)
+    -- Escape single quotes by ending the quoted string, adding escaped quote, and starting new quoted string
+    return "'" .. string.gsub(str, "'", "'\\''") .. "'"
+end
+
+local function file_exists(path)
+    local f = io.open(path, "r")
+    if f then
+        f:close()
+        return true
+    end
+    return false
+end
+
+local function file_size(path)
+    local f = io.open(path, "rb")
+    if f then
+        local size = f:seek("end")
+        f:close()
+        return size or 0
+    end
+    return 0
+end
+
+local function file_age(path)
+    -- Get file modification time using stat
+    local handle = io.popen("stat -c %Y " .. path .. " 2>/dev/null")
+    if not handle then
+        return nil
+    end
+    local mtime = handle:read("*a")
+    handle:close()
+
+    if not mtime or mtime == "" then
+        return nil
+    end
+
+    local now = os.time()
+    return now - tonumber(mtime)
+end
+
+local function generate_thumbnail(stream_key, thumb_path)
+    -- Build LLHLS URL - internal docker network
+    local llhls_url = "http://ovenmediaengine:8080/app/" .. stream_key .. "/llhls.m3u8"
+    local log_file = THUMB_DIR .. "/" .. stream_key .. ".log"
+
+    -- First, try to generate animated WebP
+    -- Using os.execute which blocks properly until complete
+    -- SECURITY FIX: Use shell_escape to prevent command injection
+    local cmd = string.format(
+        "timeout %d ffmpeg -y -i %s -t %d -vf 'fps=%d,scale=320:-1:flags=lanczos' -c:v libwebp -lossless 0 -compression_level 3 -q:v 70 -loop 0 -preset default -an %s > %s 2>&1",
+        FFMPEG_TIMEOUT,
+        shell_escape(llhls_url),
+        ANIMATION_DURATION,
+        ANIMATION_FPS,
+        shell_escape(thumb_path),
+        shell_escape(log_file)
+    )
+
+    ngx.log(ngx.INFO, "Generating thumbnail for stream: ", stream_key)
+
+    local exit_code = os.execute(cmd)
+
+    -- Check if file was created and has content
+    if file_exists(thumb_path) and file_size(thumb_path) > 100 then
+        ngx.log(ngx.INFO, "Thumbnail generated successfully: ", thumb_path)
+        os.remove(log_file)
+        return true
+    end
+
+    -- If animated webp failed, try static webp (single frame)
+    ngx.log(ngx.WARN, "Animated webp failed (exit: ", tostring(exit_code), "), trying static")
+
+    -- SECURITY FIX: Use shell_escape to prevent command injection
+    local static_cmd = string.format(
+        "timeout %d ffmpeg -y -i %s -vframes 1 -vf 'scale=320:-1:flags=lanczos' -c:v libwebp -q:v 75 %s > %s 2>&1",
+        FFMPEG_TIMEOUT,
+        shell_escape(llhls_url),
+        shell_escape(thumb_path),
+        shell_escape(log_file)
+    )
+
+    exit_code = os.execute(static_cmd)
+
+    if file_exists(thumb_path) and file_size(thumb_path) > 100 then
+        ngx.log(ngx.INFO, "Static thumbnail generated: ", thumb_path)
+        os.remove(log_file)
+        return true
+    end
+
+    -- Read log file for error info
+    local log_content = ""
+    local log_f = io.open(log_file, "r")
+    if log_f then
+        log_content = log_f:read("*a") or ""
+        log_f:close()
+    end
+
+    ngx.log(ngx.ERR, "Thumbnail generation failed (exit: ", tostring(exit_code), "): ", log_content:sub(-500))
+    return false
+end
+
+function _M.serve()
+    -- Get stream key from nginx variable
+    local stream_key = ngx.var.stream_key
+    if not stream_key or stream_key == "" then
+        ngx.status = 400
+        ngx.header["Content-Type"] = "text/plain"
+        ngx.say("Missing stream key")
+        return ngx.exit(400)
+    end
+
+    -- Sanitize stream key (alphanumeric, dash, underscore only)
+    if not stream_key:match("^[%w%-_]+$") then
+        ngx.status = 400
+        ngx.header["Content-Type"] = "text/plain"
+        ngx.say("Invalid stream key")
+        return ngx.exit(400)
+    end
+
+    local thumb_path = THUMB_DIR .. "/" .. stream_key .. ".webp"
+
+    -- Check if cached thumbnail exists and is fresh
+    local age = file_age(thumb_path)
+    local needs_refresh = not age or age > CACHE_TTL
+
+    if needs_refresh then
+        -- Generate new thumbnail
+        local ok = generate_thumbnail(stream_key, thumb_path)
+        if not ok then
+            -- If generation failed, check if we have a stale one to serve
+            if not file_exists(thumb_path) or file_size(thumb_path) < 100 then
+                ngx.status = 503
+                ngx.header["Content-Type"] = "text/plain"
+                ngx.header["Retry-After"] = "5"
+                ngx.say("Thumbnail generation in progress")
+                return ngx.exit(503)
+            end
+            -- Serve stale thumbnail
+        end
+    end
+
+    -- Verify file exists and has content
+    if not file_exists(thumb_path) or file_size(thumb_path) < 100 then
+        ngx.status = 503
+        ngx.header["Content-Type"] = "text/plain"
+        ngx.header["Retry-After"] = "5"
+        ngx.say("Thumbnail not ready")
+        return ngx.exit(503)
+    end
+
+    -- Serve the thumbnail file
+    ngx.header["Content-Type"] = "image/webp"
+    ngx.header["Cache-Control"] = "public, max-age=" .. CACHE_TTL
+    ngx.header["Access-Control-Allow-Origin"] = "*"
+
+    local f = io.open(thumb_path, "rb")
+    if not f then
+        ngx.status = 500
+        ngx.header["Content-Type"] = "text/plain"
+        ngx.say("Failed to read thumbnail")
+        return ngx.exit(500)
+    end
+
+    local content = f:read("*a")
+    f:close()
+
+    ngx.print(content)
+end
+
+return _M
diff --git a/openresty/lua/uberban.lua b/openresty/lua/uberban.lua
new file mode 100644
index 0000000..a468c56
--- /dev/null
+++ b/openresty/lua/uberban.lua
@@ -0,0 +1,118 @@
+-- Site-wide uberban checking module
+-- Blocks uberbanned fingerprints from accessing any endpoint
+
+local redis = require "resty.redis"
+local fingerprint = require "fingerprint"
+
+local _M = {}
+
+-- Cache for ban status (5 second TTL to reduce Redis load)
+local uberban_cache = ngx.shared.uberban_cache
+local CACHE_TTL = 5  -- seconds
+
+-- Redis password cached at module load time
+local REDIS_PASSWORD = os.getenv("REDIS_PASS")
+
+-- Get Redis connection (same pattern as redis_helper.lua)
+local function get_redis_connection()
+    local red = redis:new()
+    red:set_timeouts(1000, 1000, 1000)  -- connect, send, read timeout in ms
+
+    local host = "redis"
+    local port = tonumber(os.getenv("REDIS_PORT")) or 6379
+
+    local ok, err = red:connect(host, port)
+    if not ok then
+        ngx.log(ngx.ERR, "[uberban] Failed to connect to Redis: ", err)
+        return nil
+    end
+
+    -- Authenticate if password is set
+    if REDIS_PASSWORD and REDIS_PASSWORD ~= "" then
+        local res, err = red:auth(REDIS_PASSWORD)
+        if not res then
+            ngx.log(ngx.ERR, "[uberban] Failed to authenticate to Redis: ", err)
+            return nil
+        end
+    end
+
+    -- Select database 1 (where chat-service stores fingerprint bans)
+    local db = tonumber(os.getenv("REDIS_DB")) or 1
+    local res, err = red:select(db)
+    if not res then
+        ngx.log(ngx.ERR, "[uberban] Failed to select Redis db ", db, ": ", err)
+        return nil
+    end
+
+    return red
+end
+
+local function close_redis_connection(red)
+    local ok, err = red:set_keepalive(10000, 100)
+    if not ok then
+        ngx.log(ngx.ERR, "[uberban] Failed to set keepalive: ", err)
+    end
+end
+
+-- Check if a fingerprint is uberbanned
+-- Returns true if banned, false if not banned
+function _M.is_banned(fp)
+    if not fp then
+        return false
+    end
+
+    -- Check cache first
+    if uberban_cache then
+        local cached = uberban_cache:get(fp)
+        if cached ~= nil then
+            return cached == "1"
+        end
+    end
+
+    -- Query Redis
+    local red = get_redis_connection()
+    if not red then
+        -- SECURITY FIX: Fail closed - if Redis is unavailable, deny access
+        -- This prevents banned users from accessing the system during outages
+        ngx.log(ngx.ERR, "[uberban] Redis unavailable - blocking request (fail closed)")
+        return true
+    end
+
+    -- Check if fingerprint is in the uberbanned set
+    local res, err = red:sismember("chat:banned:fingerprints", fp)
+    close_redis_connection(red)
+
+    if not res then
+        ngx.log(ngx.ERR, "[uberban] Redis SISMEMBER failed: ", err)
+        return false
+    end
+
+    local is_banned = (res == 1)
+
+    -- Cache the result
+    if uberban_cache then
+        uberban_cache:set(fp, is_banned and "1" or "0", CACHE_TTL)
+    end
+
+    return is_banned
+end
+
+-- Check fingerprint and block if uberbanned
+-- Call this in access_by_lua_block
+function _M.check_and_block()
+    -- Generate server-side fingerprint
+    local fp = fingerprint.generate()
+    if not fp then
+        return  -- Can't generate fingerprint, allow request
+    end
+
+    -- Check if banned
+    if _M.is_banned(fp) then
+        ngx.status = ngx.HTTP_FORBIDDEN
+        ngx.header["Content-Type"] = "application/json"
+        ngx.say('{"error": "Access denied", "banned": true}')
+        return ngx.exit(ngx.HTTP_FORBIDDEN)
+    end
+end
+
+return _M
diff --git a/openresty/nginx.conf b/openresty/nginx.conf
index 9a0dc00..9213421 100644
--- a/openresty/nginx.conf
+++ b/openresty/nginx.conf
@@ -4,6 +4,12 @@ error_log stderr warn;
 # Run worker processes as nobody user (master process remains root for port binding)
 user nobody nogroup;
 
+# Expose environment variables to Lua workers
+env REDIS_PASS;
+env REDIS_PORT;
+env REDIS_HOST;
+env JWT_SECRET;
+
 events {
     worker_connections 1024;
 }
@@ -25,51 +31,87 @@ http {
     lua_package_path "/usr/local/openresty/nginx/lua/?.lua;;";
     lua_shared_dict stream_keys 10m;
     lua_shared_dict rate_limit 10m;
+    lua_shared_dict fingerprints 10m;  # Server-side fingerprint cache
+    lua_shared_dict uberban_cache 1m;  # Uberban status cache (5 second TTL)
     
     # Enable compression
     gzip on;
     gzip_vary on;
     gzip_min_length 1024;
-    gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml+rss image/svg+xml;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml+rss;
     
     # Security headers
     add_header X-Frame-Options "SAMEORIGIN" always;
     add_header X-Content-Type-Options "nosniff" always;
     add_header X-XSS-Protection "1; mode=block" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    # SECURITY FIX #17: Content Security Policy (application-wide)
+    # Note: 'unsafe-inline' required for style-src because Svelte uses inline styles for transitions and dynamic bindings
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.youtube.com https://s.ytimg.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: https: blob:; media-src 'self' blob: https:; frame-src https://www.youtube.com https://www.youtube-nocookie.com; connect-src 'self' wss: ws:; font-src 'self' data: https://cdnjs.cloudflare.com;" always;
     
     # Map to handle CORS origin properly
     map $http_origin $cors_origin {
-        default "";
-        "~^https?://localhost(:[0-9]+)?$" $http_origin;
-        "~^https?://127\.0\.0\.1(:[0-9]+)?$" $http_origin;
-        "~^https?://\[::1\](:[0-9]+)?$" $http_origin;
+        default $http_origin;
+        "" "";
     }
-    
+
+    # Map for WebSocket upgrade
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        '' close;
+    }
+
     upstream backend {
         server drogon-backend:8080;
     }
-    
+
+    upstream chat {
+        server chat-service:8081;
+    }
+
     upstream frontend {
         server sveltekit:3000;
     }
-    
+
     upstream ome {
         server ovenmediaengine:8080;
     }
-    
+
     # Rate limiting zones
     limit_req_zone $binary_remote_addr zone=api_limit:10m rate=10r/s;
     limit_req_zone $binary_remote_addr zone=auth_limit:10m rate=3r/m;
     limit_req_zone $binary_remote_addr zone=register_limit:10m rate=1r/m;
+    limit_req_zone $binary_remote_addr zone=chat_limit:10m rate=20r/s;
+    limit_req_zone $binary_remote_addr zone=avatar_limit:10m rate=5r/s;
+    limit_req_zone $binary_remote_addr zone=nakama_limit:10m rate=30r/s;
+    # SECURITY FIX #11: Rate limit viewer token requests
+    limit_req_zone $binary_remote_addr zone=viewer_token_limit:10m rate=10r/m;
     
-    # Increase client max body size for avatar uploads
-    client_max_body_size 1m;
+    # Increase client max body size for file uploads
+    # Default for most uploads (images, stickers)
+    client_max_body_size 5m;
     
     server {
         listen 80;
         server_name localhost;
-        
+
+        # ACME challenge endpoint for Let's Encrypt certificate validation
+        # This must come before any access control blocks
+        location /.well-known/acme-challenge/ {
+            root /var/www/certbot;
+            try_files $uri =404;
+        }
+
+        # Site-wide uberban check - blocks banned fingerprints from all endpoints
+        access_by_lua_block {
+            -- Skip OPTIONS requests (CORS preflight)
+            if ngx.req.get_method() == "OPTIONS" then
+                return
+            end
+            local uberban = require "uberban"
+            uberban.check_and_block()
+        }
+
         # Security headers for the whole server
         add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
         
@@ -77,19 +119,62 @@ http {
         location /uploads/ {
             # Use root directive with absolute path to avoid alias+try_files bug
             root /app;
-            
+
             # Security settings
             autoindex off;
-            add_header X-Content-Type-Options "nosniff" always;
-            
+
             # Only serve files, not directories
             try_files $uri =404;
-            
+
+            # Explicit MIME types for uploaded files
+            # SVG is safe when loaded via <img> tags (browsers sandbox them)
+            types {
+                image/jpeg jpg jpeg;
+                image/png png;
+                image/gif gif;
+                image/webp webp;
+                image/svg+xml svg svgz;
+                audio/mpeg mp3;
+                audio/wav wav;
+                audio/ogg ogg;
+                audio/mp4 m4a;
+                video/mp4 mp4 m4v;
+                video/webm webm;
+                video/quicktime mov;
+            }
+            default_type application/octet-stream;
+
+            # Security headers for all uploaded content
+            add_header X-Content-Type-Options "nosniff" always;
+            add_header Content-Security-Policy "default-src 'none'" always;
+            add_header X-Frame-Options "DENY" always;
+
             # Cache static images
             location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
                 expires 30d;
                 add_header Cache-Control "public, immutable" always;
                 add_header X-Content-Type-Options "nosniff" always;
+                add_header Content-Security-Policy "default-src 'none'" always;
+                add_header X-Frame-Options "DENY" always;
+            }
+
+            # Cache audio files
+            location ~* \.(mp3|wav|ogg|m4a)$ {
+                expires 7d;
+                add_header Cache-Control "public, max-age=604800" always;
+                add_header X-Content-Type-Options "nosniff" always;
+                add_header Content-Security-Policy "default-src 'none'" always;
+                add_header X-Frame-Options "DENY" always;
+            }
+
+            # Cache video files
+            location ~* \.(mp4|m4v|webm|mov)$ {
+                expires 7d;
+                add_header Cache-Control "public, max-age=604800" always;
+                add_header X-Content-Type-Options "nosniff" always;
+                add_header Content-Security-Policy "default-src 'none'" always;
+                add_header X-Frame-Options "DENY" always;
+                add_header Accept-Ranges bytes;
             }
         }
         
@@ -238,27 +323,55 @@ http {
             add_header Cache-Control "public, max-age=300" always;
         }
         
-        # Public realm endpoints (with viewer token authentication for stream-key)
-        location ~ ^/api/realms/(by-name/[^/]+|live|[0-9]+/stats|[0-9]+/viewer-token|[0-9]+/stream-key)$ {
+        # SECURITY FIX #11: Rate-limited viewer token endpoint
+        location ~ ^/api/realms/[0-9]+/viewer-token$ {
+            limit_req zone=viewer_token_limit burst=5 nodelay;
+
             # CORS headers
             add_header Access-Control-Allow-Origin $cors_origin always;
             add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
             add_header Access-Control-Allow-Headers "Content-Type" always;
             add_header Access-Control-Allow-Credentials "true" always;
-            
+
             if ($request_method = 'OPTIONS') {
                 add_header Content-Length 0;
                 add_header Content-Type text/plain;
                 return 204;
             }
-            
+
             proxy_pass http://backend;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header Cookie $http_cookie;
-            
+
+            # No cache for tokens
+            expires -1;
+            add_header Cache-Control "no-store, no-cache" always;
+        }
+
+        # Public realm endpoints (with viewer token authentication for stream-key)
+        location ~ ^/api/realms/(by-name/[^/]+|live|[0-9]+/stats|[0-9]+/stream-key)$ {
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Cookie $http_cookie;
+
             # Short cache for live realm data
             expires 10s;
             add_header Cache-Control "public, max-age=10" always;
@@ -286,52 +399,387 @@ http {
             proxy_set_header Cookie $http_cookie;
         }
         
-        # Other API endpoints (authenticated)
-        location /api/ {
-            limit_req zone=api_limit burst=20 nodelay;
-            
+        # Chat service API endpoints
+        location /api/chat/ {
+            limit_req zone=chat_limit burst=30 nodelay;
+
             # CORS headers
             add_header Access-Control-Allow-Origin $cors_origin always;
             add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
             add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
             add_header Access-Control-Allow-Credentials "true" always;
-            
+
             # Handle preflight
             if ($request_method = 'OPTIONS') {
                 add_header Content-Length 0;
                 add_header Content-Type text/plain;
                 return 204;
             }
-            
+
+            proxy_pass http://chat;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Cookie $http_cookie;
+
+            # Don't cache API responses
+            expires -1;
+            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        }
+
+        # Chat WebSocket endpoints
+        location /chat/ws {
+            # Inject server-side fingerprint header (cannot be spoofed by client)
+            access_by_lua_block {
+                local fingerprint = require "fingerprint"
+                fingerprint.inject_header()
+            }
+
+            proxy_pass http://chat;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # WebSocket timeouts
+            proxy_read_timeout 3600s;
+            proxy_send_timeout 3600s;
+        }
+
+        location ~ ^/chat/stream/(.+)$ {
+            # Inject server-side fingerprint header (cannot be spoofed by client)
+            access_by_lua_block {
+                local fingerprint = require "fingerprint"
+                fingerprint.inject_header()
+            }
+
+            proxy_pass http://chat;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # WebSocket timeouts
+            proxy_read_timeout 3600s;
+            proxy_send_timeout 3600s;
+        }
+
+        # Watch room sync WebSocket endpoint
+        location /watch/ws {
+            # Inject server-side fingerprint header (cannot be spoofed by client)
+            access_by_lua_block {
+                local fingerprint = require "fingerprint"
+                fingerprint.inject_header()
+            }
+
+            proxy_pass http://chat;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # WebSocket timeouts
+            proxy_read_timeout 3600s;
+            proxy_send_timeout 3600s;
+        }
+
+        # Ebook upload endpoint - larger body size limit
+        location = /api/user/ebooks {
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            # Handle preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # JWT validation at edge
+            access_by_lua_block {
+                local jwt_validator = require "jwt"
+                jwt_validator.validate_and_inject()
+            }
+
+            # Allow 100MB for ebook uploads
+            client_max_body_size 100m;
+
             proxy_pass http://backend;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header Cookie $http_cookie;
-            
+
+            # Extended timeout for large uploads
+            proxy_read_timeout 300s;
+            proxy_send_timeout 300s;
+
             # Don't cache API responses
             expires -1;
             add_header Cache-Control "no-store, no-cache, must-revalidate" always;
         }
-        
+
+        # Audio upload endpoint - larger body size limit
+        location = /api/user/audio {
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            # Handle preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # JWT validation at edge
+            access_by_lua_block {
+                local jwt_validator = require "jwt"
+                jwt_validator.validate_and_inject()
+            }
+
+            # Allow 500MB for audio uploads
+            client_max_body_size 500m;
+
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Cookie $http_cookie;
+
+            # Extended timeout for large uploads
+            proxy_read_timeout 600s;
+            proxy_send_timeout 600s;
+
+            # Don't cache API responses
+            expires -1;
+            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        }
+
+        # Video upload endpoint - larger body size limit
+        location = /api/user/videos {
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            # Handle preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # JWT validation at edge
+            access_by_lua_block {
+                local jwt_validator = require "jwt"
+                jwt_validator.validate_and_inject()
+            }
+
+            # Allow 500MB for video uploads
+            client_max_body_size 500m;
+
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Cookie $http_cookie;
+
+            # Extended timeout for large uploads
+            proxy_read_timeout 600s;
+            proxy_send_timeout 600s;
+
+            # Don't cache API responses
+            expires -1;
+            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        }
+
+        # Default avatar random endpoint - rate limited to prevent abuse
+        location = /api/default-avatar/random {
+            limit_req zone=avatar_limit burst=10 nodelay;
+
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            # Handle preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # Don't cache - ensures random avatar each time
+            expires -1;
+            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        }
+
+        # Block internal API endpoints from external access (used for service-to-service communication)
+        location /api/internal/ {
+            return 403;
+        }
+
+        # Other API endpoints (authenticated)
+        location /api/ {
+            limit_req zone=api_limit burst=20 nodelay;
+
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            # Handle preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # JWT validation at edge - reject invalid tokens before hitting backend
+            access_by_lua_block {
+                local jwt_validator = require "jwt"
+                jwt_validator.validate_and_inject()
+            }
+
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Cookie $http_cookie;
+
+            # Don't cache API responses
+            expires -1;
+            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        }
+
         # WebSocket
         location /ws/ {
             proxy_pass http://backend;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
+            proxy_set_header Connection $connection_upgrade;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header Cookie $http_cookie;
-            
+
             # WebSocket timeouts
             proxy_read_timeout 3600s;
             proxy_send_timeout 3600s;
         }
-        
+
+        # Stream thumbnails - 3 second animated WebP generated on-demand via FFmpeg
+        location ~ ^/thumb/([^/]+)\.webp$ {
+            set $stream_key $1;
+
+            # CORS headers for preflight
+            if ($request_method = 'OPTIONS') {
+                add_header Access-Control-Allow-Origin $cors_origin always;
+                add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
+                add_header Access-Control-Allow-Credentials "true" always;
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # Generate and serve thumbnail via Lua
+            content_by_lua_block {
+                local thumbnail = require "thumbnail"
+                thumbnail.serve()
+            }
+        }
+
+        # Nakama Game Server HTTP API (/v2/ is the default path used by nakama-js)
+        # Uses runtime DNS resolution via variable to avoid startup failures
+        location /v2/ {
+            limit_req zone=nakama_limit burst=50 nodelay;
+
+            # CORS headers
+            add_header Access-Control-Allow-Origin $cors_origin always;
+            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+            add_header Access-Control-Allow-Credentials "true" always;
+
+            if ($request_method = 'OPTIONS') {
+                add_header Access-Control-Allow-Origin $cors_origin always;
+                add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
+                add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+                add_header Access-Control-Allow-Credentials "true" always;
+                add_header Content-Length 0;
+                add_header Content-Type text/plain;
+                return 204;
+            }
+
+            # Runtime DNS resolution - nakama may not be ready at nginx startup
+            set $nakama_backend nakama:7350;
+            proxy_pass http://$nakama_backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # Hide Nakama's CORS headers - nginx handles CORS
+            proxy_hide_header Access-Control-Allow-Origin;
+            proxy_hide_header Access-Control-Allow-Methods;
+            proxy_hide_header Access-Control-Allow-Headers;
+            proxy_hide_header Access-Control-Allow-Credentials;
+
+            expires -1;
+            add_header Cache-Control "no-store, no-cache" always;
+        }
+
+        # Nakama Game Server WebSocket (nakama-js connects to /ws with query params)
+        location = /ws {
+            # Runtime DNS resolution
+            set $nakama_backend nakama:7350;
+            # Must include $is_args$args when using variables - nginx won't auto-append query string
+            proxy_pass http://$nakama_backend/ws$is_args$args;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_read_timeout 3600s;
+            proxy_send_timeout 3600s;
+        }
+
         # Frontend (all other requests)
         location / {
             proxy_pass http://frontend;
@@ -339,7 +787,7 @@ http {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
-            
+
             # Enable HTTP/1.1 for keep-alive
             proxy_http_version 1.1;
             proxy_set_header Connection "";
@@ -350,7 +798,17 @@ http {
     server {
         listen 8088;
         server_name localhost;
-        
+
+        # Site-wide uberban check - blocks banned fingerprints from streaming
+        access_by_lua_block {
+            -- Skip OPTIONS requests (CORS preflight)
+            if ngx.req.get_method() == "OPTIONS" then
+                return
+            end
+            local uberban = require "uberban"
+            uberban.check_and_block()
+        }
+
         # Security headers
         add_header X-Content-Type-Options "nosniff" always;
         
@@ -365,44 +823,49 @@ http {
             add_header Access-Control-Allow-Headers "Range" always;
             add_header Access-Control-Allow-Credentials "true" always;
             add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
-            
+
             # Handle preflight
             if ($request_method = 'OPTIONS') {
+                add_header Access-Control-Allow-Origin $cors_origin always;
+                add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
+                add_header Access-Control-Allow-Headers "Range" always;
+                add_header Access-Control-Allow-Credentials "true" always;
                 add_header Content-Length 0;
                 add_header Content-Type text/plain;
                 return 204;
             }
-            
+
             # Access control via Lua
+            # SECURITY FIX #24: Removed token value logging - sensitive data should not be in logs
             access_by_lua_block {
                 local redis_helper = require "redis_helper"
-                
-                -- Get viewer token from cookie
-                local cookie_header = ngx.var.http_cookie
-                if not cookie_header then
-                    ngx.status = ngx.HTTP_FORBIDDEN
-                    ngx.say("No authentication token")
-                    return ngx.exit(ngx.HTTP_FORBIDDEN)
-                end
-                
-                -- Extract viewer_token cookie
-                local token = nil
-                -- Handle URL-encoded cookies and spaces
-                cookie_header = ngx.unescape_uri(cookie_header)
-                for k, v in string.gmatch(cookie_header, "([^=]+)=([^;]+)") do
-                    k = k:match("^%s*(.-)%s*$") -- trim whitespace
-                    if k == "viewer_token" then
-                        token = v:match("^%s*(.-)%s*$") -- trim whitespace
-                        break
+
+                -- Get viewer token from query parameter or cookie
+                local token = ngx.var.arg_token
+
+                -- If not in query parameter, try cookie
+                if not token then
+                    local cookie_header = ngx.var.http_cookie
+                    if cookie_header then
+                        -- Extract viewer_token cookie
+                        -- Handle URL-encoded cookies and spaces
+                        cookie_header = ngx.unescape_uri(cookie_header)
+                        for k, v in string.gmatch(cookie_header, "([^=]+)=([^;]+)") do
+                            k = k:match("^%s*(.-)%s*$") -- trim whitespace
+                            if k == "viewer_token" then
+                                token = v:match("^%s*(.-)%s*$") -- trim whitespace
+                                break
+                            end
+                        end
                     end
                 end
-                
+
                 if not token then
                     ngx.status = ngx.HTTP_FORBIDDEN
                     ngx.say("Missing viewer token")
                     return ngx.exit(ngx.HTTP_FORBIDDEN)
                 end
-                
+
                 -- Validate token
                 local valid_stream = redis_helper.validate_viewer_token(token, ngx.var.stream_key)
                 if not valid_stream then
@@ -410,25 +873,26 @@ http {
                     ngx.say("Invalid viewer token")
                     return ngx.exit(ngx.HTTP_FORBIDDEN)
                 end
-                
-                -- Optionally refresh token TTL on segment access
+
+                -- Refresh token TTL on segment access
                 redis_helper.refresh_viewer_token(token)
             }
             
-            # Cache settings for segments
-            location ~ \.ts$ {
-                expires 1h;
-                add_header Cache-Control "public, max-age=3600" always;
+            # Cache settings based on file type
+            # Segments (.ts, .m4s) - cache for 1 hour, playlists (.m3u8) - no cache
+            set $cache_control "no-cache, no-store, must-revalidate";
+            set $expires_time "-1";
+            if ($file_path ~ \.(ts|m4s)$) {
+                set $cache_control "public, max-age=3600";
+                set $expires_time "1h";
             }
-            
-            # Don't cache playlists
-            location ~ \.m3u8$ {
-                expires -1;
-                add_header Cache-Control "no-cache, no-store, must-revalidate" always;
-            }
-            
-            # Proxy to OvenMediaEngine
-            proxy_pass http://ome/app/$stream_key/$file_path;
+
+            expires $expires_time;
+            add_header Cache-Control $cache_control always;
+            add_header X-Content-Type-Options "nosniff" always;
+
+            # Proxy to OvenMediaEngine (preserve query string for session parameter)
+            proxy_pass http://ome/app/$stream_key/$file_path$is_args$args;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
diff --git a/ovenmediaengine/Server.xml b/ovenmediaengine/Server.xml
index 23d16ff..b85c0f9 100644
--- a/ovenmediaengine/Server.xml
+++ b/ovenmediaengine/Server.xml
@@ -45,6 +45,9 @@
                     <IceCandidate>*:10000-10009/udp</IceCandidate>
                 </IceCandidates>
             </WebRTC>
+            <Thumbnail>
+                <Port>8090</Port>
+            </Thumbnail>
         </Publishers>
     </Bind>
     <Managers>
@@ -64,11 +67,22 @@
                 </Names>
             </Host>
 
+            <!-- AdmissionWebhooks - validates stream keys for publishing only -->
+            <AdmissionWebhooks>
+                <ControlServerUrl>http://drogon-backend:8080/api/webhook/ome/admission</ControlServerUrl>
+                <SecretKey>${env:OME_API_ACCESS_TOKEN}</SecretKey>
+                <Timeout>3000</Timeout>
+                <Enables>
+                    <!-- Only validate publishing, not playback (playback latency breaks LLHLS) -->
+                    <Providers>rtmp,srt</Providers>
+                </Enables>
+            </AdmissionWebhooks>
+
             <Applications>
                 <Application>
                     <Name>app</Name>
                     <Type>live</Type>
-                    
+
                     <Providers>
                         <RTMP>
                             <BlockDuplicateStreamName>true</BlockDuplicateStreamName>
@@ -115,6 +129,15 @@
                             <Ulpfec>false</Ulpfec>
                             <JitterBuffer>false</JitterBuffer>
                         </WebRTC>
+                        <!-- RTMP Push Publisher for restreaming to external services -->
+                        <RTMPPush>
+                        </RTMPPush>
+                        <!-- Thumbnail Publisher for stream previews -->
+                        <Thumbnail>
+                            <CrossDomains>
+                                <Url>*</Url>
+                            </CrossDomains>
+                        </Thumbnail>
                     </Publishers>
                 </Application>
             </Applications>
diff --git a/terraform/main.tf b/terraform/main.tf
new file mode 100644
index 0000000..a3809f2
--- /dev/null
+++ b/terraform/main.tf
@@ -0,0 +1,48 @@
+# =============================================================================
+# Realms App Server Infrastructure
+# Separate Terraform state from git infrastructure (jump host + Forgejo)
+# =============================================================================
+
+locals {
+  common_tags = concat([
+    var.project_name,
+    var.environment,
+    "terraform-managed",
+    "app-server"
+  ], var.tags)
+}
+
+# =============================================================================
+# SSH Keys
+# =============================================================================
+
+resource "digitalocean_ssh_key" "admin" {
+  for_each = var.admin_ssh_public_keys
+
+  name       = "${var.project_name}-app-${var.environment}-${each.key}"
+  public_key = each.value
+}
+
+# =============================================================================
+# App Server Module
+# =============================================================================
+
+module "app_server" {
+  source = "./modules/app_server"
+
+  project_name     = var.project_name
+  environment      = var.environment
+  region           = var.region
+  vpc_uuid         = var.vpc_uuid
+  vpc_ip_range     = var.vpc_ip_range
+  ssh_keys         = [for key in digitalocean_ssh_key.admin : key.id]
+  droplet_size     = var.app_droplet_size
+  droplet_image    = var.app_droplet_image
+  ssh_port         = var.app_ssh_port
+  domain           = var.app_domain
+  enable_backups   = var.enable_droplet_backups
+  tags             = local.common_tags
+  manage_dns       = var.manage_dns
+  dns_zone         = var.dns_zone
+  forgejo_registry = var.forgejo_registry
+}
diff --git a/terraform/modules/app_server/cloud-init.yaml.tpl b/terraform/modules/app_server/cloud-init.yaml.tpl
new file mode 100644
index 0000000..2087234
--- /dev/null
+++ b/terraform/modules/app_server/cloud-init.yaml.tpl
@@ -0,0 +1,232 @@
+#cloud-config
+
+# =============================================================================
+# Realms App Server Cloud-Init Configuration
+# Production server for streaming platform - Docker-based deployment
+# =============================================================================
+
+write_files:
+  # SSH daemon configuration (non-standard port, VPC only access)
+  - path: /etc/ssh/sshd_config.d/99-hardening.conf
+    content: |
+      # Non-standard port (VPC access only via jump host)
+      Port ${ssh_port}
+
+      # Authentication hardening
+      PermitRootLogin prohibit-password
+      PasswordAuthentication no
+      PubkeyAuthentication yes
+      AuthenticationMethods publickey
+
+      # Security settings
+      MaxAuthTries 3
+      LoginGraceTime 30
+      PermitEmptyPasswords no
+      X11Forwarding no
+      AllowTcpForwarding yes
+      AllowAgentForwarding no
+      PermitUserEnvironment no
+      MaxSessions 5
+
+      # Session settings
+      ClientAliveInterval 300
+      ClientAliveCountMax 2
+
+      # Logging
+      LogLevel VERBOSE
+    permissions: '0644'
+
+  # Fail2ban configuration for SSH
+  - path: /etc/fail2ban/jail.d/sshd.local
+    content: |
+      [sshd]
+      enabled = true
+      port = ${ssh_port}
+      filter = sshd
+      logpath = /var/log/auth.log
+      backend = systemd
+      bantime = 1h
+      findtime = 10m
+      maxretry = 3
+    permissions: '0644'
+
+  # Docker daemon configuration
+  - path: /etc/docker/daemon.json
+    content: |
+      {
+        "log-driver": "json-file",
+        "log-opts": {
+          "max-size": "50m",
+          "max-file": "5"
+        },
+        "storage-driver": "overlay2",
+        "live-restore": true,
+        "no-new-privileges": true
+      }
+    permissions: '0644'
+
+  # UFW configuration script
+  - path: /usr/local/bin/configure-firewall.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      # Reset UFW
+      ufw --force reset
+
+      # Default policies
+      ufw default deny incoming
+      ufw default deny outgoing
+
+      # Inbound: HTTP/HTTPS
+      ufw allow in 80/tcp comment 'HTTP'
+      ufw allow in 443/tcp comment 'HTTPS'
+
+      # Inbound: Streaming ports
+      ufw allow in 1935/tcp comment 'RTMP'
+      ufw allow in 9999/udp comment 'SRT'
+      ufw allow in 3333/tcp comment 'WebRTC TCP'
+      ufw allow in 3333/udp comment 'WebRTC UDP'
+      ufw allow in 3334/tcp comment 'WebRTC TCP fallback'
+
+      # Inbound: VPC traffic (includes system SSH)
+      ufw allow in from ${vpc_ip_range} comment 'VPC internal'
+
+      # Outbound: Necessary traffic
+      ufw allow out 53/tcp comment 'DNS'
+      ufw allow out 53/udp comment 'DNS'
+      ufw allow out 80/tcp comment 'HTTP'
+      ufw allow out 443/tcp comment 'HTTPS'
+      ufw allow out 123/udp comment 'NTP'
+      ufw allow out to ${vpc_ip_range} comment 'VPC'
+
+      # Enable logging
+      ufw logging medium
+
+      # Enable UFW
+      ufw --force enable
+
+      echo "Firewall configured successfully"
+    permissions: '0755'
+
+  # Swap configuration script (for 4GB RAM)
+  - path: /usr/local/bin/configure-swap.sh
+    content: |
+      #!/bin/bash
+      set -e
+
+      SWAP_FILE="/swapfile"
+      SWAP_SIZE="4G"
+
+      if [ ! -f "$SWAP_FILE" ]; then
+        echo "Creating $SWAP_SIZE swap file..."
+        fallocate -l $SWAP_SIZE $SWAP_FILE
+        chmod 600 $SWAP_FILE
+        mkswap $SWAP_FILE
+        swapon $SWAP_FILE
+
+        # Add to fstab
+        echo "$SWAP_FILE none swap sw 0 0" >> /etc/fstab
+
+        # Adjust swappiness
+        echo "vm.swappiness=10" >> /etc/sysctl.conf
+        sysctl vm.swappiness=10
+
+        echo "Swap configured successfully"
+      else
+        echo "Swap file already exists"
+      fi
+    permissions: '0755'
+
+  # Unattended upgrades configuration
+  - path: /etc/apt/apt.conf.d/50unattended-upgrades
+    content: |
+      Unattended-Upgrade::Allowed-Origins {
+          "$${distro_id}:$${distro_codename}";
+          "$${distro_id}:$${distro_codename}-security";
+          "$${distro_id}:$${distro_codename}-updates";
+      };
+      Unattended-Upgrade::AutoFixInterruptedDpkg "true";
+      Unattended-Upgrade::MinimalSteps "true";
+      Unattended-Upgrade::Remove-Unused-Dependencies "true";
+      Unattended-Upgrade::Automatic-Reboot "false";
+    permissions: '0644'
+
+  # Auto-upgrades configuration
+  - path: /etc/apt/apt.conf.d/20auto-upgrades
+    content: |
+      APT::Periodic::Update-Package-Lists "1";
+      APT::Periodic::Unattended-Upgrade "1";
+      APT::Periodic::AutocleanInterval "7";
+    permissions: '0644'
+
+  # Message of the day
+  - path: /etc/motd
+    content: |
+
+      +---------------------------------------------------------------+
+      |                  REALMS APP SERVER                            |
+      |                                                               |
+      |  Domain: ${domain}
+      |  SSH Port: ${ssh_port} (VPC only)
+      |                                                               |
+      |  App location: /opt/realms                                    |
+      |  Docker compose: /opt/realms/docker-compose.yml               |
+      |                                                               |
+      |  Commands:                                                    |
+      |    cd /opt/realms && docker compose logs -f                   |
+      |    cd /opt/realms && docker compose pull && up -d             |
+      |                                                               |
+      +---------------------------------------------------------------+
+
+    permissions: '0644'
+
+runcmd:
+  # Ensure .ssh directory exists
+  - mkdir -p /root/.ssh && chmod 700 /root/.ssh
+
+  # Configure SSH
+  - grep -q 'Include /etc/ssh/sshd_config.d' /etc/ssh/sshd_config || sed -i '1i Include /etc/ssh/sshd_config.d/*.conf' /etc/ssh/sshd_config
+  - sed -i 's/^Port /#Port /' /etc/ssh/sshd_config
+  - systemctl restart sshd
+
+  # Wait for dpkg lock
+  - while fuser /var/lib/dpkg/lock-frontend >/dev/null 2>&1; do echo "Waiting for dpkg lock..."; sleep 5; done
+
+  # Install prerequisites
+  - apt-get update
+  - DEBIAN_FRONTEND=noninteractive apt-get -o DPkg::Lock::Timeout=60 install -y ca-certificates curl gnupg fail2ban ufw unattended-upgrades apt-listchanges vim git
+
+  # Add Docker's official GPG key and repository
+  - install -m 0755 -d /etc/apt/keyrings
+  - curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+  - chmod a+r /etc/apt/keyrings/docker.gpg
+  - echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian $(. /etc/os-release && echo $VERSION_CODENAME) stable" > /etc/apt/sources.list.d/docker.list
+
+  # Install Docker
+  - apt-get update
+  - DEBIAN_FRONTEND=noninteractive apt-get -o DPkg::Lock::Timeout=60 install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+
+  # Enable and start Docker
+  - systemctl enable docker
+  - systemctl start docker
+
+  # Enable and start fail2ban
+  - systemctl enable fail2ban
+  - systemctl restart fail2ban
+
+  # Configure swap
+  - /usr/local/bin/configure-swap.sh
+
+  # Configure firewall
+  - /usr/local/bin/configure-firewall.sh
+
+  # Create app directory
+  - mkdir -p /opt/realms
+  - mkdir -p /opt/realms/uploads
+
+  # Enable unattended upgrades
+  - systemctl enable unattended-upgrades
+  - systemctl start unattended-upgrades
+
+final_message: "Realms app server ready after $UPTIME seconds. Deploy via Forgejo CI/CD."
diff --git a/terraform/modules/app_server/main.tf b/terraform/modules/app_server/main.tf
new file mode 100644
index 0000000..0bb20ed
--- /dev/null
+++ b/terraform/modules/app_server/main.tf
@@ -0,0 +1,196 @@
+# =============================================================================
+# App Server Droplet
+# =============================================================================
+
+resource "digitalocean_droplet" "app" {
+  name     = "${var.project_name}-app-${var.environment}"
+  size     = var.droplet_size
+  image    = var.droplet_image
+  region   = var.region
+  vpc_uuid = var.vpc_uuid
+
+  ssh_keys   = var.ssh_keys
+  backups    = var.enable_backups
+  monitoring = true
+  ipv6       = true
+
+  user_data = templatefile("${path.module}/cloud-init.yaml.tpl", {
+    ssh_port         = var.ssh_port
+    vpc_ip_range     = var.vpc_ip_range
+    domain           = var.domain
+    forgejo_registry = var.forgejo_registry
+  })
+
+  tags = var.tags
+
+  lifecycle {
+    create_before_destroy = false
+    ignore_changes        = [user_data]
+  }
+}
+
+# =============================================================================
+# Firewall
+# =============================================================================
+
+resource "digitalocean_firewall" "app" {
+  name = "${var.project_name}-app-${var.environment}"
+
+  droplet_ids = [digitalocean_droplet.app.id]
+
+  # ==========================================================================
+  # Inbound Rules
+  # ==========================================================================
+
+  # HTTP (for redirect to HTTPS)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "80"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # HTTPS
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "443"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # RTMP (streaming ingest)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "1935"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # SRT (streaming ingest)
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "9999"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # WebRTC (ICE candidates)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "3333"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "3333"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # WebRTC TCP (fallback)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "3334"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # OME API (internal, but opened for monitoring if needed)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "8081"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  # VPC internal traffic (includes SSH on non-standard port)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "1-65535"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  inbound_rule {
+    protocol         = "icmp"
+    source_addresses = [var.vpc_ip_range]
+  }
+
+  # ==========================================================================
+  # Outbound Rules
+  # ==========================================================================
+
+  # DNS
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "53"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # HTTP/HTTPS (for pulling images, updates)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "80"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "443"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # NTP
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "123"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # VPC internal traffic
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "1-65535"
+    destination_addresses = [var.vpc_ip_range]
+  }
+
+  outbound_rule {
+    protocol              = "icmp"
+    destination_addresses = [var.vpc_ip_range]
+  }
+}
+
+# =============================================================================
+# DNS Record (optional)
+# =============================================================================
+
+resource "digitalocean_record" "app" {
+  count = var.manage_dns ? 1 : 0
+
+  domain = var.dns_zone
+  type   = "A"
+  name   = "@"
+  value  = digitalocean_droplet.app.ipv4_address
+  ttl    = 600
+}
+
+resource "digitalocean_record" "app_www" {
+  count = var.manage_dns ? 1 : 0
+
+  domain = var.dns_zone
+  type   = "A"
+  name   = "www"
+  value  = digitalocean_droplet.app.ipv4_address
+  ttl    = 600
+}
diff --git a/terraform/modules/app_server/outputs.tf b/terraform/modules/app_server/outputs.tf
new file mode 100644
index 0000000..a509c7a
--- /dev/null
+++ b/terraform/modules/app_server/outputs.tf
@@ -0,0 +1,33 @@
+# =============================================================================
+# App Server Module Outputs
+# =============================================================================
+
+output "droplet_id" {
+  description = "ID of the app server droplet"
+  value       = digitalocean_droplet.app.id
+}
+
+output "droplet_urn" {
+  description = "URN of the app server droplet"
+  value       = digitalocean_droplet.app.urn
+}
+
+output "public_ip" {
+  description = "Public IPv4 address of the app server"
+  value       = digitalocean_droplet.app.ipv4_address
+}
+
+output "private_ip" {
+  description = "Private IPv4 address of the app server (VPC)"
+  value       = digitalocean_droplet.app.ipv4_address_private
+}
+
+output "ipv6_address" {
+  description = "IPv6 address of the app server"
+  value       = digitalocean_droplet.app.ipv6_address
+}
+
+output "firewall_id" {
+  description = "ID of the app server firewall"
+  value       = digitalocean_firewall.app.id
+}
diff --git a/terraform/modules/app_server/variables.tf b/terraform/modules/app_server/variables.tf
new file mode 100644
index 0000000..d65985b
--- /dev/null
+++ b/terraform/modules/app_server/variables.tf
@@ -0,0 +1,95 @@
+# =============================================================================
+# App Server Module Variables
+# =============================================================================
+
+variable "project_name" {
+  description = "Project name"
+  type        = string
+}
+
+variable "environment" {
+  description = "Environment name"
+  type        = string
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+}
+
+variable "vpc_uuid" {
+  description = "UUID of the VPC"
+  type        = string
+}
+
+variable "vpc_ip_range" {
+  description = "IP range of the VPC (CIDR notation)"
+  type        = string
+}
+
+variable "ssh_keys" {
+  description = "List of SSH key IDs to add to the droplet"
+  type        = list(string)
+}
+
+variable "droplet_size" {
+  description = "Size slug for the droplet"
+  type        = string
+  default     = "s-2vcpu-4gb"
+}
+
+variable "droplet_image" {
+  description = "Image slug for the droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+variable "ssh_port" {
+  description = "SSH port (non-standard, VPC only)"
+  type        = number
+  default     = 51234
+}
+
+variable "domain" {
+  description = "Domain name for the app"
+  type        = string
+  default     = "realms.pub"
+}
+
+variable "enable_backups" {
+  description = "Enable automated backups"
+  type        = bool
+  default     = false
+}
+
+variable "tags" {
+  description = "Tags to apply to resources"
+  type        = list(string)
+  default     = []
+}
+
+# =============================================================================
+# DNS Configuration
+# =============================================================================
+
+variable "manage_dns" {
+  description = "Whether to manage DNS record via DigitalOcean"
+  type        = bool
+  default     = true
+}
+
+variable "dns_zone" {
+  description = "DNS zone (base domain) managed by DigitalOcean"
+  type        = string
+  default     = "realms.pub"
+}
+
+# =============================================================================
+# Forgejo Registry
+# =============================================================================
+
+variable "forgejo_registry" {
+  description = "Forgejo container registry URL"
+  type        = string
+  default     = "qbit.realms.pub"
+}
diff --git a/terraform/outputs.tf b/terraform/outputs.tf
new file mode 100644
index 0000000..64efdaa
--- /dev/null
+++ b/terraform/outputs.tf
@@ -0,0 +1,68 @@
+# =============================================================================
+# App Server Outputs
+# =============================================================================
+
+output "app_droplet_id" {
+  description = "ID of the app server droplet"
+  value       = module.app_server.droplet_id
+}
+
+output "app_public_ip" {
+  description = "Public IPv4 address of the app server"
+  value       = module.app_server.public_ip
+}
+
+output "app_private_ip" {
+  description = "Private IPv4 address of the app server (VPC)"
+  value       = module.app_server.private_ip
+}
+
+output "app_ssh_port" {
+  description = "SSH port for the app server"
+  value       = var.app_ssh_port
+}
+
+output "app_firewall_id" {
+  description = "ID of the app server firewall"
+  value       = module.app_server.firewall_id
+}
+
+# =============================================================================
+# Connection Info
+# =============================================================================
+
+output "ssh_config" {
+  description = "SSH config snippet for connecting to the app server"
+  value       = <<-EOT
+    # Add to ~/.ssh/config
+
+    # Connect via jump host
+    Host realms-app
+        HostName ${module.app_server.private_ip}
+        Port ${var.app_ssh_port}
+        User root
+        ProxyJump realms-jump
+        IdentityFile ~/.ssh/id_ed25519
+
+    # Or direct connection (if on VPC)
+    Host realms-app-direct
+        HostName ${module.app_server.public_ip}
+        Port ${var.app_ssh_port}
+        User root
+        IdentityFile ~/.ssh/id_ed25519
+  EOT
+}
+
+output "deploy_info" {
+  description = "Deployment information for CI/CD"
+  value       = <<-EOT
+    App Server Public IP: ${module.app_server.public_ip}
+    App Server Private IP: ${module.app_server.private_ip}
+    SSH Port: ${var.app_ssh_port}
+    Domain: ${var.app_domain}
+
+    Add these to Forgejo secrets:
+      DEPLOY_HOST: ${module.app_server.private_ip}
+      DEPLOY_PORT: ${var.app_ssh_port}
+  EOT
+}
diff --git a/terraform/variables.tf b/terraform/variables.tf
new file mode 100644
index 0000000..bf6270e
--- /dev/null
+++ b/terraform/variables.tf
@@ -0,0 +1,135 @@
+# =============================================================================
+# Provider Configuration
+# =============================================================================
+
+variable "do_token" {
+  description = "DigitalOcean API token"
+  type        = string
+  sensitive   = true
+}
+
+# =============================================================================
+# Project Configuration
+# =============================================================================
+
+variable "project_name" {
+  description = "Project name used for resource naming"
+  type        = string
+  default     = "realms"
+}
+
+variable "environment" {
+  description = "Environment name (production, staging, development)"
+  type        = string
+  default     = "production"
+
+  validation {
+    condition     = contains(["production", "staging", "development"], var.environment)
+    error_message = "Environment must be one of: production, staging, development."
+  }
+}
+
+variable "region" {
+  description = "DigitalOcean region"
+  type        = string
+  default     = "nyc3"
+}
+
+# =============================================================================
+# VPC Configuration (reference existing VPC)
+# =============================================================================
+
+variable "vpc_uuid" {
+  description = "UUID of the existing VPC (from terraform/ outputs)"
+  type        = string
+}
+
+variable "vpc_ip_range" {
+  description = "IP range for the VPC (CIDR notation)"
+  type        = string
+  default     = "10.10.0.0/16"
+}
+
+# =============================================================================
+# SSH Configuration
+# =============================================================================
+
+variable "admin_ssh_public_keys" {
+  description = "Map of admin SSH public keys (name => public_key)"
+  type        = map(string)
+  default     = {}
+}
+
+variable "app_ssh_port" {
+  description = "SSH port for the app server (VPC only, non-standard)"
+  type        = number
+  default     = 51234
+}
+
+# =============================================================================
+# App Server Configuration
+# =============================================================================
+
+variable "app_droplet_size" {
+  description = "Size slug for the app server droplet"
+  type        = string
+  default     = "s-2vcpu-4gb"
+}
+
+variable "app_droplet_image" {
+  description = "Image slug for the app server droplet"
+  type        = string
+  default     = "debian-12-x64"
+}
+
+variable "app_domain" {
+  description = "Domain name for the app (e.g., realms.pub)"
+  type        = string
+  default     = "realms.pub"
+}
+
+# =============================================================================
+# DNS Configuration
+# =============================================================================
+
+variable "manage_dns" {
+  description = "Whether to manage DNS records via DigitalOcean"
+  type        = bool
+  default     = true
+}
+
+variable "dns_zone" {
+  description = "DNS zone (base domain) managed by DigitalOcean"
+  type        = string
+  default     = "realms.pub"
+}
+
+# =============================================================================
+# Backup Configuration
+# =============================================================================
+
+variable "enable_droplet_backups" {
+  description = "Enable automated droplet backups"
+  type        = bool
+  default     = false
+}
+
+# =============================================================================
+# Tags
+# =============================================================================
+
+variable "tags" {
+  description = "Additional tags to apply to resources"
+  type        = list(string)
+  default     = []
+}
+
+# =============================================================================
+# Forgejo Registry Configuration
+# =============================================================================
+
+variable "forgejo_registry" {
+  description = "Forgejo container registry URL"
+  type        = string
+  default     = "qbit.realms.pub"
+}
diff --git a/terraform/versions.tf b/terraform/versions.tf
new file mode 100644
index 0000000..7d4caa7
--- /dev/null
+++ b/terraform/versions.tf
@@ -0,0 +1,26 @@
+# =============================================================================
+# Terraform and Provider Version Constraints
+# =============================================================================
+
+terraform {
+  required_version = ">= 1.5.0"
+
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = "~> 2.34"
+    }
+    tls = {
+      source  = "hashicorp/tls"
+      version = "~> 4.0"
+    }
+    random = {
+      source  = "hashicorp/random"
+      version = "~> 3.6"
+    }
+  }
+}
+
+provider "digitalocean" {
+  token = var.do_token
+}
diff --git a/text.txt b/text.txt
deleted file mode 100644
index 864b8b1..0000000
--- a/text.txt
+++ /dev/null
@@ -1,13207 +0,0 @@
-Folder PATH listing
-Volume serial number is 000001E9 1430:6C90
-C:\USERS\ADMINISTRATOR\DESKTOP\PUB\REALMS.INDIA
-¦   .env
-¦   docker
-¦   docker-compose.yml
-¦   text.txt
-¦   
-+---backend
-¦   ¦   .dockerignore
-¦   ¦   CMakeLists.txt
-¦   ¦   conanfile.txt
-¦   ¦   config.json
-¦   ¦   Dockerfile
-¦   ¦   
-¦   +---src
-¦       ¦   admin_tool.cpp
-¦       ¦   main.cpp
-¦       ¦   
-¦       +---common
-¦       ¦       utils.h
-¦       ¦       
-¦       +---controllers
-¦       ¦       AdminController.cpp
-¦       ¦       AdminController.h
-¦       ¦       RealmController.cpp
-¦       ¦       RealmController.h
-¦       ¦       StreamController.cpp
-¦       ¦       StreamController.h
-¦       ¦       UserController.cpp
-¦       ¦       UserController.h
-¦       ¦       
-¦       +---models
-¦       ¦       Realm.h
-¦       ¦       StreamKey.h
-¦       ¦       
-¦       +---services
-¦               AuthService.cpp
-¦               AuthService.h
-¦               CorsMiddleware.h
-¦               DatabaseService.cpp
-¦               DatabaseService.h
-¦               OmeClient.h
-¦               RedisHelper.cpp
-¦               RedisHelper.h
-¦               StatsService.cpp
-¦               StatsService.h
-¦               
-+---database
-¦       init.sql
-¦       
-+---frontend
-¦   ¦   .gitignore
-¦   ¦   Dockerfile
-¦   ¦   package.json
-¦   ¦   svelte.config.js
-¦   ¦   tsconfig.json
-¦   ¦   vite.config.ts
-¦   ¦   
-¦   +---src
-¦       ¦   app.css
-¦       ¦   app.d.ts
-¦       ¦   app.html
-¦       ¦   
-¦       +---lib
-¦       ¦   ¦   api.js
-¦       ¦   ¦   pgp.js
-¦       ¦   ¦   websocket.js
-¦       ¦   ¦   
-¦       ¦   +---stores
-¦       ¦           auth.js
-¦       ¦           user.js
-¦       ¦           
-¦       +---routes
-¦           ¦   +layout.svelte
-¦           ¦   +page.svelte
-¦           ¦   
-¦           +---admin
-¦           ¦       +page.svelte
-¦           ¦       
-¦           +---login
-¦           ¦       +page.svelte
-¦           ¦       
-¦           +---my-realms
-¦           ¦       +page.svelte
-¦           ¦       
-¦           +---profile
-¦           ¦   +---[username]
-¦           ¦           +page.svelte
-¦           ¦           
-¦           +---settings
-¦           ¦       +page.svelte
-¦           ¦       
-¦           +---[realm]
-¦               +---live
-¦                       +page.svelte
-¦                       
-+---openresty
-¦   ¦   Dockerfile
-¦   ¦   nginx.conf
-¦   ¦   
-¦   +---lua
-¦           auth.lua
-¦           redis_helper.lua
-¦           stream_monitor.lua
-¦           
-+---ovenmediaengine
-¦       Server.xml
-¦       
-+---scripts
-### C:\Users\Administrator\Desktop\pub\realms.india\.env ###
-
-# Database
-DB_PASSWORD=your-secure-password
-
-# JWT
-JWT_SECRET=your-very-long-random-jwt-secret
-
-# OvenMediaEngine API
-OME_API_TOKEN=your-ome-api-token
-
-# Application
-APP_ENV=production
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\docker ###
-
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\docker-compose.yml ###
-
-version: '3.8'
-
-services:
-  postgres:
-    image: postgres:16-alpine
-    environment:
-      POSTGRES_DB: streaming
-      POSTGRES_USER: streamuser
-      POSTGRES_PASSWORD: streampass  # Fixed: hardcoded for consistency
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-      - ./database/init.sql:/docker-entrypoint-initdb.d/init.sql
-      - ./scripts:/scripts:ro
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U streamuser -d streaming"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-    networks:
-      - backend
-
-  redis:
-    image: redis:7-alpine
-    command: redis-server --appendonly yes
-    volumes:
-      - redis_data:/data
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-    networks:
-      - backend
-
-  ovenmediaengine:
-    image: airensoft/ovenmediaengine:latest
-    ports:
-      - "1935:1935"           # RTMP
-      - "9999:9999/udp"       # SRT
-      - "8088:8080"           # HLS/LLHLS
-      - "8081:8081"           # API (internal)
-      - "3333:3333"           # WebRTC Signaling
-      - "3478:3478"           # WebRTC ICE
-      - "10000-10009:10000-10009/udp" # WebRTC Candidates
-    volumes:
-      - ./ovenmediaengine/Server.xml:/opt/ovenmediaengine/bin/origin_conf/Server.xml
-      - ome_logs:/var/log/ovenmediaengine
-    environment:
-      OME_API_PORT: 8081
-      OME_API_ACCESS_TOKEN: your-api-token
-    networks:
-      - backend
-      - frontend
-
-  drogon-backend:
-    build: ./backend
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-    environment:
-      DB_HOST: postgres
-      DB_NAME: streaming
-      DB_USER: streamuser
-      DB_PASS: streampass  # Fixed: matching postgres password
-      REDIS_HOST: redis
-      REDIS_PORT: 6379
-      JWT_SECRET: your-jwt-secret
-      OME_API_URL: http://ovenmediaengine:8081
-      OME_API_TOKEN: your-api-token
-    volumes:
-      - ./backend/config.json:/app/config.json
-      - uploads:/app/uploads
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8080/api/health"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
-    networks:
-      - backend
-
-  openresty:
-    build: ./openresty
-    ports:
-      - "80:80"
-      - "443:443"
-    depends_on:
-      drogon-backend:
-        condition: service_healthy
-      ovenmediaengine:
-        condition: service_started
-      redis:
-        condition: service_healthy
-    environment:
-      REDIS_HOST: redis
-      REDIS_PORT: 6379
-      BACKEND_URL: http://drogon-backend:8080
-      OME_URL: http://ovenmediaengine:8081
-    volumes:
-      - ./openresty/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
-      - ./openresty/lua:/usr/local/openresty/nginx/lua
-      - uploads:/app/uploads:ro  # Mount uploads volume to the same path
-    networks:
-      - frontend
-      - backend
-
-  sveltekit:
-    build: ./frontend
-    depends_on:
-      openresty:
-        condition: service_started
-    environment:
-      # Fixed: Added VITE_ prefix for client-side access
-      VITE_API_URL: http://localhost/api
-      VITE_WS_URL: ws://localhost/ws
-      VITE_STREAM_PORT: 8088
-      # Server-side only variables (no prefix needed)
-      NODE_ENV: production
-    networks:
-      - frontend
-
-networks:
-  frontend:
-    driver: bridge
-  backend:
-    driver: bridge
-
-volumes:
-  postgres_data:
-  redis_data:
-  ome_logs:
-  uploads:  # Named volume for uploads
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\.dockerignore ###
-
-# Build artifacts
-build/
-cmake-build-*/
-CMakeCache.txt
-CMakeFiles/
-cmake_install.cmake
-Makefile
-
-# Conan files
-conanfile.txt
-conanfile.py
-conan.lock
-conanbuildinfo.*
-conaninfo.txt
-CMakeUserPresets.json
-.conan/
-.conan2/
-
-# IDE files
-.idea/
-.vscode/
-*.swp
-*.swo
-*~
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Compiled objects
-*.o
-*.a
-*.so
-*.dylib
-
-# Executables
-streaming-backend
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\CMakeLists.txt ###
-
-cmake_minimum_required(VERSION 3.20)
-project(streaming-backend)
-
-set(CMAKE_CXX_STANDARD 20)
-set(CMAKE_CXX_STANDARD_REQUIRED ON)
-
-# Use pkg-config to find libraries
-find_package(PkgConfig REQUIRED)
-
-# Find dependencies
-find_package(Drogon CONFIG REQUIRED)
-find_package(PostgreSQL REQUIRED)
-
-# Find Redis dependencies
-pkg_check_modules(HIREDIS REQUIRED hiredis)
-pkg_check_modules(REDIS_PLUS_PLUS redis++)
-
-# Manual fallback for redis++
-if(NOT REDIS_PLUS_PLUS_FOUND)
-    find_path(REDIS_PLUS_PLUS_INCLUDE_DIR sw/redis++/redis++.h
-        PATHS /usr/local/include /usr/include
-    )
-    find_library(REDIS_PLUS_PLUS_LIBRARY redis++
-        PATHS /usr/local/lib /usr/lib /usr/lib/x86_64-linux-gnu
-    )
-    
-    if(REDIS_PLUS_PLUS_INCLUDE_DIR AND REDIS_PLUS_PLUS_LIBRARY)
-        set(REDIS_PLUS_PLUS_FOUND TRUE)
-        set(REDIS_PLUS_PLUS_INCLUDE_DIRS ${REDIS_PLUS_PLUS_INCLUDE_DIR})
-        set(REDIS_PLUS_PLUS_LIBRARIES ${REDIS_PLUS_PLUS_LIBRARY})
-    else()
-        message(FATAL_ERROR "redis++ not found")
-    endif()
-endif()
-
-# Find bcrypt library
-find_path(BCRYPT_INCLUDE_DIR bcrypt/BCrypt.hpp
-    PATHS /usr/local/include /usr/include
-)
-find_library(BCRYPT_LIBRARY bcrypt
-    PATHS /usr/local/lib /usr/lib /usr/lib/x86_64-linux-gnu
-)
-
-if(NOT BCRYPT_INCLUDE_DIR OR NOT BCRYPT_LIBRARY)
-    message(FATAL_ERROR "bcrypt not found")
-endif()
-
-# Find jwt-cpp (header-only)
-find_path(JWT_CPP_INCLUDE_DIR jwt-cpp/jwt.h
-    PATHS /usr/local/include /usr/include
-)
-
-if(NOT JWT_CPP_INCLUDE_DIR)
-    message(FATAL_ERROR "jwt-cpp not found")
-endif()
-
-# Source files
-set(SOURCES
-    src/main.cpp
-    src/controllers/StreamController.cpp
-    src/controllers/UserController.cpp
-    src/controllers/AdminController.cpp
-    src/controllers/RealmController.cpp
-    src/services/DatabaseService.cpp
-    src/services/StatsService.cpp
-    src/services/RedisHelper.cpp
-    src/services/AuthService.cpp
-)
-
-# Create executable
-add_executable(${PROJECT_NAME} ${SOURCES})
-
-# Include directories
-target_include_directories(${PROJECT_NAME} 
-    PRIVATE 
-        ${CMAKE_CURRENT_SOURCE_DIR}/src
-        ${BCRYPT_INCLUDE_DIR}
-        ${JWT_CPP_INCLUDE_DIR}
-    SYSTEM PRIVATE
-        ${HIREDIS_INCLUDE_DIRS}
-        ${REDIS_PLUS_PLUS_INCLUDE_DIRS}
-)
-
-# Link libraries
-target_link_libraries(${PROJECT_NAME} 
-    PRIVATE
-        Drogon::Drogon
-        PostgreSQL::PostgreSQL
-        ${REDIS_PLUS_PLUS_LIBRARIES}
-        ${HIREDIS_LIBRARIES}
-        ${BCRYPT_LIBRARY}
-        pthread
-)
-
-# Compile options
-target_compile_options(${PROJECT_NAME} 
-    PRIVATE
-        ${HIREDIS_CFLAGS_OTHER}
-        ${REDIS_PLUS_PLUS_CFLAGS_OTHER}
-        -Wall
-        -Wextra
-        -Wpedantic
-        -Wno-pedantic  # Suppress pedantic warnings from third-party headers
-)
-# Build admin tool
-add_executable(admin-tool src/admin_tool.cpp)
-target_link_libraries(admin-tool PRIVATE Drogon::Drogon PostgreSQL::PostgreSQL)
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\conanfile.txt ###
-
-[requires]
-redis-plus-plus/1.3.13
-hiredis/1.2.0
-
-[options]
-redis-plus-plus/*:shared=True
-hiredis/*:shared=True
-
-[generators]
-CMakeDeps
-CMakeToolchain
-
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\config.json ###
-
-{
-    "listeners": [
-        {
-            "address": "0.0.0.0",
-            "port": 8080,
-            "https": false
-        }
-    ],
-    "db_clients": [
-        {
-            "name": "default",
-            "rdbms": "postgresql",
-            "host": "postgres",
-            "port": 5432,
-            "dbname": "streaming",
-            "user": "streamuser",
-            "passwd": "streampass",
-            "is_fast": false,
-            "connection_number": 10
-        }
-    ],
-    "app": {
-        "threads_num": 0,
-        "enable_session": true,
-        "session_timeout": 1200,
-        "document_root": "",
-        "upload_path": "./uploads",
-        "client_max_body_size": "100M",
-        "enable_brotli": true,
-        "enable_gzip": true,
-        "log_level": "DEBUG"
-    },
-    "redis": {
-        "host": "redis",
-        "port": 6379
-    },
-    "ome": {
-        "api_url": "http://ovenmediaengine:8081",
-        "api_token": "your-api-token"
-    },
-    "plugins": [],
-    "custom_config": {}
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\Dockerfile ###
-
-FROM drogonframework/drogon:latest
-
-WORKDIR /app
-
-# Install additional dependencies including GPG for PGP verification
-RUN apt-get update && apt-get install -y \
-    libpq-dev \
-    postgresql-client \
-    pkg-config \
-    git \
-    cmake \
-    libhiredis-dev \
-    curl \
-    libssl-dev \
-    gnupg \
-    gnupg2 \
-    && rm -rf /var/lib/apt/lists/*
-
-# Try to install redis-plus-plus from package manager first
-RUN apt-get update && \
-    (apt-get install -y libredis++-dev || echo "Package not available") && \
-    rm -rf /var/lib/apt/lists/*
-
-# If package not available, build from source
-RUN if ! pkg-config --exists redis++; then \
-        echo "Building redis-plus-plus from source..." && \
-        git clone --depth 1 https://github.com/sewenew/redis-plus-plus.git && \
-        cd redis-plus-plus && \
-        mkdir build && \
-        cd build && \
-        cmake -DCMAKE_BUILD_TYPE=Release \
-              -DREDIS_PLUS_PLUS_CXX_STANDARD=17 \
-              -DREDIS_PLUS_PLUS_BUILD_TEST=OFF \
-              -DREDIS_PLUS_PLUS_BUILD_STATIC=OFF \
-              -DCMAKE_INSTALL_PREFIX=/usr/local .. && \
-        make -j$(nproc) && \
-        make install && \
-        cd ../.. && \
-        rm -rf redis-plus-plus; \
-    fi
-
-# Install bcrypt library
-RUN git clone --depth 1 https://github.com/trusch/libbcrypt.git && \
-    cd libbcrypt && \
-    mkdir build && \
-    cd build && \
-    cmake .. && \
-    make -j$(nproc) && \
-    make install && \
-    cd ../.. && \
-    rm -rf libbcrypt
-
-# Install jwt-cpp (header-only)
-RUN git clone --depth 1 https://github.com/Thalhammer/jwt-cpp.git && \
-    cd jwt-cpp && \
-    mkdir build && \
-    cd build && \
-    cmake .. && \
-    make install && \
-    cd ../.. && \
-    rm -rf jwt-cpp
-
-# Update library cache - this is critical!
-RUN ldconfig
-
-# Copy source files
-COPY CMakeLists.txt ./
-COPY src/ src/
-
-# Clean any existing build artifacts
-RUN rm -rf build CMakeCache.txt
-
-# Create clean build directory
-RUN mkdir -p build
-
-# Build the application with RPATH set correctly
-RUN cd build && \
-    cmake .. -DCMAKE_BUILD_TYPE=Release \
-             -DCMAKE_INSTALL_RPATH="/usr/local/lib" \
-             -DCMAKE_BUILD_WITH_INSTALL_RPATH=TRUE && \
-    cmake --build . -j$(nproc)
-
-# Copy config
-COPY config.json .
-
-# Create uploads directory with proper permissions
-# Using nobody user's UID/GID (65534) for consistency with nginx
-RUN mkdir -p /app/uploads/avatars && \
-    chown -R 65534:65534 /app/uploads && \
-    chmod -R 755 /app/uploads
-
-# Create a temporary directory for GPG operations
-RUN mkdir -p /tmp/pgp_verify && \
-    chmod 777 /tmp/pgp_verify
-
-# Ensure libraries are available
-ENV LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH
-
-# Add a startup script to check dependencies and create directories
-RUN echo '#!/bin/bash\n\
-echo "Checking library dependencies..."\n\
-ldd ./build/streaming-backend\n\
-echo "Checking GPG installation..."\n\
-gpg --version\n\
-echo "Ensuring upload directories exist with proper permissions..."\n\
-mkdir -p /app/uploads/avatars\n\
-chown -R 65534:65534 /app/uploads\n\
-chmod -R 755 /app/uploads\n\
-echo "Starting application..."\n\
-exec ./build/streaming-backend' > start.sh && \
-    chmod +x start.sh
-
-EXPOSE 8080
-
-CMD ["./start.sh"]
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\admin_tool.cpp ###
-
-#include <drogon/drogon.h>
-#include <drogon/orm/DbClient.h>
-#include <iostream>
-#include <cstdlib>
-
-using namespace drogon;
-using namespace drogon::orm;
-
-int main(int argc, char* argv[]) {
-    if (argc < 2) {
-        std::cerr << "Usage: " << argv[0] << " -promote-admin <username>" << std::endl;
-        return 1;
-    }
-    
-    std::string command = argv[1];
-    
-    if (command != "-promote-admin" || argc != 3) {
-        std::cerr << "Usage: " << argv[0] << " -promote-admin <username>" << std::endl;
-        return 1;
-    }
-    
-    std::string username = argv[2];
-    
-    // Get database config from environment or use defaults
-    std::string dbHost = std::getenv("DB_HOST") ? std::getenv("DB_HOST") : "postgres";
-    std::string dbName = std::getenv("DB_NAME") ? std::getenv("DB_NAME") : "streaming";
-    std::string dbUser = std::getenv("DB_USER") ? std::getenv("DB_USER") : "streamuser";
-    std::string dbPass = std::getenv("DB_PASS") ? std::getenv("DB_PASS") : "streampass";
-    
-    // Create database client directly
-    auto dbClient = DbClient::newPgClient(
-        "host=" + dbHost + " port=5432 dbname=" + dbName + 
-        " user=" + dbUser + " password=" + dbPass,
-        1  // connection number
-    );
-    
-    try {
-        // Check if user exists
-        auto result = dbClient->execSqlSync(
-            "SELECT id, username, is_admin FROM users WHERE username = $1",
-            username
-        );
-        
-        if (result.empty()) {
-            std::cerr << "Error: User '" << username << "' not found." << std::endl;
-            return 1;
-        }
-        
-        bool isAdmin = result[0]["is_admin"].as<bool>();
-        if (isAdmin) {
-            std::cout << "User '" << username << "' is already an admin." << std::endl;
-            return 0;
-        }
-        
-        // Promote to admin
-        dbClient->execSqlSync(
-            "UPDATE users SET is_admin = true WHERE username = $1",
-            username
-        );
-        
-        std::cout << "Successfully promoted '" << username << "' to admin." << std::endl;
-        return 0;
-        
-    } catch (const DrogonDbException& e) {
-        std::cerr << "Database error: " << e.base().what() << std::endl;
-        return 1;
-    } catch (const std::exception& e) {
-        std::cerr << "Error: " << e.what() << std::endl;
-        return 1;
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\main.cpp ###
-
-#include <drogon/drogon.h>
-#include <drogon/HttpAppFramework.h>
-#include "controllers/StreamController.h"
-#include "controllers/UserController.h"
-#include "controllers/AdminController.h"
-#include "controllers/RealmController.h"
-#include "services/DatabaseService.h"
-#include "services/StatsService.h"
-#include "services/AuthService.h"
-#include <exception>
-#include <csignal>
-#include <sys/stat.h>
-
-using namespace drogon;
-
-int main() {
-    // Simplified signal handlers
-    signal(SIGSEGV, [](int s){ LOG_ERROR << "Signal " << s; exit(s); });
-    signal(SIGABRT, [](int s){ LOG_ERROR << "Signal " << s; exit(s); });
-    
-    try {
-        LOG_INFO << "Starting streaming backend server...";
-        
-        // Create upload directories
-        mkdir("./uploads", 0755);
-        mkdir("./uploads/avatars", 0755);
-        
-        // Initialize DatabaseService
-        LOG_INFO << "Initializing DatabaseService...";
-        DatabaseService::getInstance().initialize();
-        
-        // Load config
-        LOG_INFO << "Loading configuration...";
-        app().loadConfigFile("config.json");
-        
-        // Initialize StatsService BEFORE registering callbacks
-        LOG_INFO << "Initializing StatsService...";
-        StatsService::getInstance().initialize();
-        
-        // Register a pre-routing advice to handle CORS
-        app().registerPreRoutingAdvice([](const HttpRequestPtr &req,
-                                         AdviceCallback &&acb,
-                                         AdviceChainCallback &&accb) {
-            // Handle CORS preflight requests
-            if (req->getMethod() == Options) {
-                auto resp = HttpResponse::newHttpResponse();
-                resp->setStatusCode(k204NoContent);
-                
-                // Get origin from request
-                std::string origin = req->getHeader("Origin");
-                if (origin.empty()) {
-                    origin = "*";
-                }
-                
-                resp->addHeader("Access-Control-Allow-Origin", origin);
-                resp->addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
-                resp->addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
-                resp->addHeader("Access-Control-Allow-Credentials", "true");
-                resp->addHeader("Access-Control-Max-Age", "86400");
-                acb(resp);
-                return;
-            }
-            accb();
-        });
-        
-        // Register post-handling advice to add CORS headers to all responses
-        app().registerPostHandlingAdvice([](const HttpRequestPtr &req,
-                                           const HttpResponsePtr &resp) {
-            // Get origin from request
-            std::string origin = req->getHeader("Origin");
-            if (origin.empty()) {
-                origin = "*";
-            }
-            
-            resp->addHeader("Access-Control-Allow-Origin", origin);
-            resp->addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
-            resp->addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
-            resp->addHeader("Access-Control-Allow-Credentials", "true");
-        });
-        
-        // Register beginning advice to start the stats timer
-        app().registerBeginningAdvice([]() {
-            LOG_INFO << "Application started successfully";
-            
-            // Start the stats polling timer
-            LOG_INFO << "Starting stats polling...";
-            StatsService::getInstance().startPolling();
-        });
-        
-        app().setTermSignalHandler([]() {
-            LOG_INFO << "Received termination signal, shutting down...";
-            StatsService::getInstance().shutdown();
-            app().quit();
-        });
-        
-        // Start the application
-        LOG_INFO << "Starting Drogon framework...";
-        app().run();
-        
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception caught in main: " << e.what();
-        return 1;
-    } catch (...) {
-        LOG_ERROR << "Unknown exception caught in main";
-        return 1;
-    }
-    
-    return 0;
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\common\utils.h ###
-
-#pragma once
-
-#include <drogon/drogon.h>
-#include <drogon/orm/DbClient.h>
-#include <variant>
-#include <optional>
-#include <concepts>
-
-namespace utils {
-
-using namespace drogon;
-
-// Result type for better error handling
-template<typename T>
-using Result = std::variant<T, std::string>;
-
-template<typename T>
-inline bool isOk(const Result<T>& r) { return std::holds_alternative<T>(r); }
-
-template<typename T>
-inline T& getValue(Result<T>& r) { return std::get<T>(r); }
-
-template<typename T>
-inline const std::string& getError(const Result<T>& r) { return std::get<std::string>(r); }
-
-// JSON Response helpers
-inline HttpResponsePtr jsonOk(const Json::Value& data) {
-    return HttpResponse::newHttpJsonResponse(data);
-}
-
-inline HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-    Json::Value json;
-    json["error"] = error;
-    json["success"] = false;
-    auto resp = HttpResponse::newHttpJsonResponse(json);
-    resp->setStatusCode(code);
-    return resp;
-}
-
-inline HttpResponsePtr jsonResp(const Json::Value& data, HttpStatusCode code = k200OK) {
-    auto resp = HttpResponse::newHttpJsonResponse(data);
-    resp->setStatusCode(code);
-    return resp;
-}
-
-// Database helper with automatic error handling
-template<typename... Args>
-inline void dbQuery(const std::string& query, 
-                   std::function<void(const drogon::orm::Result&)> onSuccess,
-                   std::function<void(const std::string&)> onError,
-                   Args&&... args) {
-    auto db = app().getDbClient();
-    (*db << query << std::forward<Args>(args)...)
-        >> [onSuccess](const drogon::orm::Result& r) { onSuccess(r); }
-        >> [onError](const drogon::orm::DrogonDbException& e) { 
-            LOG_ERROR << "DB Error: " << e.base().what();
-            onError(e.base().what());
-        };
-}
-
-// Simplified DB query that returns JSON response
-template<typename... Args>
-inline void dbJsonQuery(const std::string& query,
-                       std::function<Json::Value(const drogon::orm::Result&)> transform,
-                       std::function<void(const HttpResponsePtr&)> callback,
-                       Args&&... args) {
-    dbQuery(query,
-        [transform, callback](const drogon::orm::Result& r) {
-            callback(jsonOk(transform(r)));
-        },
-        [callback](const std::string& error) {
-            callback(jsonError(error, k500InternalServerError));
-        },
-        std::forward<Args>(args)...
-    );
-}
-
-// Thread pool executor with type constraints
-template<typename F>
-requires std::invocable<F>
-inline void runAsync(F&& task) {
-    if (auto loop = app().getLoop()) {
-        loop->queueInLoop([task = std::forward<F>(task)]() {
-            std::thread([task]() {
-                try {
-                    task();
-                } catch (const std::exception& e) {
-                    LOG_ERROR << "Async task error: " << e.what();
-                }
-            }).detach();
-        });
-    } else {
-        // Fallback to sync execution
-        task();
-    }
-}
-
-// Config helper
-template<typename T>
-inline std::optional<T> getConfig(const std::string& path) {
-    try {
-        const auto& config = app().getCustomConfig();
-        std::vector<std::string> parts;
-        std::stringstream ss(path);
-        std::string part;
-        while (std::getline(ss, part, '.')) {
-            parts.push_back(part);
-        }
-        
-        Json::Value current = config;
-        for (const auto& p : parts) {
-            if (!current.isMember(p)) return std::nullopt;
-            current = current[p];
-        }
-        
-        if constexpr (std::is_same_v<T, std::string>) {
-            return current.asString();
-        } else if constexpr (std::is_same_v<T, int>) {
-            return current.asInt();
-        } else if constexpr (std::is_same_v<T, bool>) {
-            return current.asBool();
-        } else if constexpr (std::is_same_v<T, double>) {
-            return current.asDouble();
-        }
-    } catch (...) {
-        return std::nullopt;
-    }
-    return std::nullopt;
-}
-
-// Environment variable helper with fallback
-template<typename T = std::string>
-inline T getEnv(const std::string& key, const T& defaultValue = T{}) {
-    const char* val = std::getenv(key.c_str());
-    if (!val) return defaultValue;
-    
-    if constexpr (std::is_same_v<T, std::string>) {
-        return std::string(val);
-    } else if constexpr (std::is_same_v<T, int>) {
-        try { return std::stoi(val); } catch (...) { return defaultValue; }
-    } else if constexpr (std::is_same_v<T, bool>) {
-        std::string s(val);
-        return s == "true" || s == "1" || s == "yes";
-    }
-    return defaultValue;
-}
-
-// Random string generator
-inline std::string randomString(size_t length = 32) {
-    auto bytes = drogon::utils::genRandomString(length);
-    return drogon::utils::base64Encode(
-        reinterpret_cast<const unsigned char*>(bytes.data()), 
-        bytes.length()
-    );
-}
-
-// Timer helper
-class ScopedTimer {
-    std::string name_;
-    std::chrono::steady_clock::time_point start_;
-public:
-    explicit ScopedTimer(const std::string& name) 
-        : name_(name), start_(std::chrono::steady_clock::now()) {}
-    
-    ~ScopedTimer() {
-        auto duration = std::chrono::steady_clock::now() - start_;
-        auto ms = std::chrono::duration_cast<std::chrono::milliseconds>(duration).count();
-        LOG_DEBUG << name_ << " took " << ms << "ms";
-    }
-};
-
-#define TIMED_SCOPE(name) utils::ScopedTimer _timer(name)
-
-// WebSocket broadcast helper
-template<typename Container>
-inline void wsBroadcast(const Container& connections, const Json::Value& message) {
-    auto msg = Json::FastWriter().write(message);
-    for (const auto& conn : connections) {
-        if (conn->connected()) {
-            conn->send(msg);
-        }
-    }
-}
-
-// Rate limiter
-class RateLimiter {
-    std::unordered_map<std::string, std::deque<std::chrono::steady_clock::time_point>> requests_;
-    std::mutex mutex_;
-    size_t maxRequests_;
-    std::chrono::seconds window_;
-    
-public:
-    RateLimiter(size_t maxRequests = 10, std::chrono::seconds window = std::chrono::seconds(60))
-        : maxRequests_(maxRequests), window_(window) {}
-    
-    bool allow(const std::string& key) {
-        std::lock_guard<std::mutex> lock(mutex_);
-        auto now = std::chrono::steady_clock::now();
-        auto& timestamps = requests_[key];
-        
-        // Remove old timestamps
-        while (!timestamps.empty() && now - timestamps.front() > window_) {
-            timestamps.pop_front();
-        }
-        
-        if (timestamps.size() >= maxRequests_) {
-            return false;
-        }
-        
-        timestamps.push_back(now);
-        return true;
-    }
-};
-
-// Global rate limiter instance
-inline RateLimiter& rateLimiter() {
-    static RateLimiter limiter;
-    return limiter;
-}
-
-// Validation helpers
-inline bool isValidStreamKey(const std::string& key) {
-    return key.length() == 32 && 
-           std::all_of(key.begin(), key.end(), [](char c) {
-               return std::isxdigit(c);
-           });
-}
-
-// JSON conversion helper
-template<typename T>
-inline Json::Value toJson(const T& obj);
-
-// Specializations for common types
-template<>
-inline Json::Value toJson(const std::map<std::string, std::string>& m) {
-    Json::Value json;
-    for (const auto& [k, v] : m) {
-        json[k] = v;
-    }
-    return json;
-}
-
-} // namespace utils
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\AdminController.cpp ###
-
-#include "AdminController.h"
-#include "../services/OmeClient.h"
-#include "../services/RedisHelper.h"
-
-using namespace drogon::orm;
-
-namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-}
-
-UserInfo AdminController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    std::string auth = req->getHeader("Authorization");
-    
-    if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-        return user;
-    }
-    
-    std::string token = auth.substr(7);
-    AuthService::getInstance().validateToken(token, user);
-    return user;
-}
-
-// Update getUsers in AdminController.cpp:
-void AdminController::getUsers(const HttpRequestPtr &req,
-                              std::function<void(const HttpResponsePtr &)> &&callback) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0 || !user.isAdmin) {
-        callback(jsonError("Unauthorized", k403Forbidden));
-        return;
-    }
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT u.id, u.username, u.is_admin, u.is_streamer, u.created_at, u.color_code, "
-                 "(SELECT COUNT(*) FROM realms WHERE user_id = u.id) as realm_count "
-                 "FROM users u ORDER BY u.created_at DESC"
-              >> [callback](const Result& r) {
-                  Json::Value resp;
-                  resp["success"] = true;
-                  Json::Value users(Json::arrayValue);
-                  
-                  for (const auto& row : r) {
-                      Json::Value user;
-                      user["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
-                      user["username"] = row["username"].as<std::string>();
-                      user["isAdmin"] = row["is_admin"].as<bool>();
-                      user["isStreamer"] = row["is_streamer"].as<bool>();
-                      user["createdAt"] = row["created_at"].as<std::string>();
-                      user["colorCode"] = row["color_code"].isNull() ? "#561D5E" : row["color_code"].as<std::string>();
-                      user["realmCount"] = static_cast<Json::Int64>(row["realm_count"].as<int64_t>());
-                      users.append(user);
-                  }
-                  
-                  resp["users"] = users;
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get users: " << e.base().what();
-                  callback(jsonError("Failed to get users"));
-              };
-}
-void AdminController::getActiveStreams(const HttpRequestPtr &req,
-                                      std::function<void(const HttpResponsePtr &)> &&callback) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0 || !user.isAdmin) {
-        callback(jsonError("Unauthorized", k403Forbidden));
-        return;
-    }
-    
-    // Get live realms from database
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.id, r.name, r.stream_key, r.viewer_count, "
-                 "u.username FROM realms r "
-                 "JOIN users u ON r.user_id = u.id "
-                 "WHERE r.is_live = true"
-              >> [callback](const Result& r) {
-                  Json::Value resp;
-                  resp["success"] = true;
-                  Json::Value streams(Json::arrayValue);
-                  
-                  for (const auto& row : r) {
-                      Json::Value stream;
-                      stream["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
-                      stream["name"] = row["name"].as<std::string>();
-                      stream["streamKey"] = row["stream_key"].as<std::string>();
-                      stream["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
-                      stream["username"] = row["username"].as<std::string>();
-                      streams.append(stream);
-                  }
-                  
-                  resp["streams"] = streams;
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get active streams: " << e.base().what();
-                  callback(jsonError("Failed to get active streams"));
-              };
-}
-
-void AdminController::disconnectStream(const HttpRequestPtr &req,
-                                      std::function<void(const HttpResponsePtr &)> &&callback,
-                                      const std::string &streamKey) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0 || !user.isAdmin) {
-        callback(jsonError("Unauthorized", k403Forbidden));
-        return;
-    }
-    
-    // Add to Redis set for OpenResty to disconnect
-    RedisHelper::addToSet("streams_to_disconnect", streamKey);
-    
-    // Also try direct disconnect
-    OmeClient::getInstance().disconnectStream(streamKey, [callback](bool) {
-        Json::Value resp;
-        resp["success"] = true;
-        resp["message"] = "Stream disconnect initiated";
-        callback(jsonResp(resp));
-    });
-}
-
-void AdminController::promoteToStreamer(const HttpRequestPtr &req,
-                                       std::function<void(const HttpResponsePtr &)> &&callback,
-                                       const std::string &userId) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0 || !user.isAdmin) {
-        callback(jsonError("Unauthorized", k403Forbidden));
-        return;
-    }
-    
-    int64_t targetUserId = std::stoll(userId);
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "UPDATE users SET is_streamer = true WHERE id = $1"
-              << targetUserId
-              >> [callback](const Result&) {
-                  Json::Value resp;
-                  resp["success"] = true;
-                  resp["message"] = "User promoted to streamer";
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to promote user: " << e.base().what();
-                  callback(jsonError("Failed to promote user"));
-              };
-}
-
-void AdminController::demoteFromStreamer(const HttpRequestPtr &req,
-                                        std::function<void(const HttpResponsePtr &)> &&callback,
-                                        const std::string &userId) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0 || !user.isAdmin) {
-        callback(jsonError("Unauthorized", k403Forbidden));
-        return;
-    }
-    
-    int64_t targetUserId = std::stoll(userId);
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "UPDATE users SET is_streamer = false WHERE id = $1"
-              << targetUserId
-              >> [callback](const Result&) {
-                  Json::Value resp;
-                  resp["success"] = true;
-                  resp["message"] = "User demoted from streamer";
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to demote user: " << e.base().what();
-                  callback(jsonError("Failed to demote user"));
-              };
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\AdminController.h ###
-
-#pragma once
-#include <drogon/HttpController.h>
-#include "../services/AuthService.h"
-
-using namespace drogon;
-
-class AdminController : public HttpController<AdminController> {
-public:
-    METHOD_LIST_BEGIN
-    ADD_METHOD_TO(AdminController::getUsers, "/api/admin/users", Get);
-    ADD_METHOD_TO(AdminController::getActiveStreams, "/api/admin/streams", Get);
-    ADD_METHOD_TO(AdminController::disconnectStream, "/api/admin/streams/{1}/disconnect", Post);
-    ADD_METHOD_TO(AdminController::promoteToStreamer, "/api/admin/users/{1}/promote", Post);
-    ADD_METHOD_TO(AdminController::demoteFromStreamer, "/api/admin/users/{1}/demote", Post);
-    METHOD_LIST_END
-    
-    void getUsers(const HttpRequestPtr &req,
-                  std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getActiveStreams(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void disconnectStream(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback,
-                         const std::string &streamKey);
-    
-    void promoteToStreamer(const HttpRequestPtr &req,
-                          std::function<void(const HttpResponsePtr &)> &&callback,
-                          const std::string &userId);
-    
-    void demoteFromStreamer(const HttpRequestPtr &req,
-                           std::function<void(const HttpResponsePtr &)> &&callback,
-                           const std::string &userId);
-
-private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\RealmController.cpp ###
-
-#include "RealmController.h"
-#include "../services/DatabaseService.h"
-#include "../services/StatsService.h"
-#include "../services/RedisHelper.h"
-#include "../services/OmeClient.h"
-#include <drogon/utils/Utilities.h>
-#include <drogon/Cookie.h>
-#include <random>
-#include <sstream>
-#include <iomanip>
-#include <regex>
-
-using namespace drogon::orm;
-
-namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
-    std::string generateStreamKey() {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
-        std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
-        }
-        return ss.str();
-    }
-    
-    bool validateRealmName(const std::string& name) {
-        if (name.length() < 3 || name.length() > 30) {
-            return false;
-        }
-        return std::regex_match(name, std::regex("^[a-z0-9-]+$"));
-    }
-    
-    void invalidateKeyInRedis(const std::string& oldKey) {
-        RedisHelper::addToSet("streams_to_disconnect", oldKey);
-        RedisHelper::deleteKey("stream_key:" + oldKey);
-        
-        services::RedisHelper::instance().keysAsync("viewer_token:*", 
-            [oldKey](const std::vector<std::string>& keys) {
-                for (const auto& tokenKey : keys) {
-                    services::RedisHelper::instance().getAsync(tokenKey,
-                        [tokenKey, oldKey](sw::redis::OptionalString streamKey) {
-                            if (streamKey.has_value() && streamKey.value() == oldKey) {
-                                RedisHelper::deleteKey(tokenKey);
-                            }
-                        }
-                    );
-                }
-            }
-        );
-    }
-}
-
-UserInfo RealmController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    std::string auth = req->getHeader("Authorization");
-    
-    if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-        return user;
-    }
-    
-    std::string token = auth.substr(7);
-    AuthService::getInstance().validateToken(token, user);
-    return user;
-}
-
-void RealmController::getUserRealms(const HttpRequestPtr &req,
-                                   std::function<void(const HttpResponsePtr &)> &&callback) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT id, name, stream_key, is_active, is_live, viewer_count, created_at "
-                 "FROM realms WHERE user_id = $1 ORDER BY created_at DESC"
-              << user.id
-              >> [callback](const Result& r) {
-                  Json::Value resp;
-                  resp["success"] = true;
-                  Json::Value realms(Json::arrayValue);
-                  
-                  for (const auto& row : r) {
-                      Json::Value realm;
-                      realm["id"] = static_cast<Json::Int64>(row["id"].as<int64_t>());
-                      realm["name"] = row["name"].as<std::string>();
-                      realm["streamKey"] = row["stream_key"].as<std::string>();
-                      realm["isActive"] = row["is_active"].as<bool>();
-                      realm["isLive"] = row["is_live"].as<bool>();
-                      realm["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
-                      realm["createdAt"] = row["created_at"].as<std::string>();
-                      realms.append(realm);
-                  }
-                  
-                  resp["realms"] = realms;
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realms: " << e.base().what();
-                  callback(jsonError("Failed to get realms"));
-              };
-}
-
-void RealmController::createRealm(const HttpRequestPtr &req,
-                                 std::function<void(const HttpResponsePtr &)> &&callback) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    // Check if user is a streamer
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT is_streamer FROM users WHERE id = $1"
-              << user.id
-              >> [req, callback, user, dbClient](const Result& r) {
-                  if (r.empty() || !r[0]["is_streamer"].as<bool>()) {
-                      callback(jsonError("You must be a streamer to create realms", k403Forbidden));
-                      return;
-                  }
-                  
-                  auto json = req->getJsonObject();
-                  if (!json) {
-                      callback(jsonError("Invalid JSON"));
-                      return;
-                  }
-                  
-                  std::string name = (*json)["name"].asString();
-                  
-                  if (!validateRealmName(name)) {
-                      callback(jsonError("Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only"));
-                      return;
-                  }
-                  
-                  // Check if realm name already exists
-                  *dbClient << "SELECT id FROM realms WHERE name = $1"
-                           << name
-                           >> [dbClient, user, name, callback](const Result& r2) {
-                               if (!r2.empty()) {
-                                   callback(jsonError("Realm name already taken"));
-                                   return;
-                               }
-                               
-                               // Check user's realm limit (e.g., 5 realms per user)
-                               *dbClient << "SELECT COUNT(*) as count FROM realms WHERE user_id = $1"
-                                        << user.id
-                                        >> [dbClient, user, name, callback](const Result& r3) {
-                                            if (!r3.empty() && r3[0]["count"].as<int64_t>() >= 5) {
-                                                callback(jsonError("You have reached the maximum number of realms (5)"));
-                                                return;
-                                            }
-                                            
-                                            std::string streamKey = generateStreamKey();
-                                            
-                                            *dbClient << "INSERT INTO realms (user_id, name, stream_key) "
-                                                         "VALUES ($1, $2, $3) RETURNING id"
-                                                      << user.id << name << streamKey
-                                                      >> [callback, name, streamKey](const Result& r4) {
-                                                          if (r4.empty()) {
-                                                              callback(jsonError("Failed to create realm"));
-                                                              return;
-                                                          }
-                                                          
-                                                          // Store stream key in Redis
-                                                          RedisHelper::storeKey("stream_key:" + streamKey, "1", 86400);
-                                                          
-                                                          Json::Value resp;
-                                                          resp["success"] = true;
-                                                          resp["realm"]["id"] = static_cast<Json::Int64>(r4[0]["id"].as<int64_t>());
-                                                          resp["realm"]["name"] = name;
-                                                          resp["realm"]["streamKey"] = streamKey;
-                                                          callback(jsonResp(resp));
-                                                      }
-                                                      >> [callback](const DrogonDbException& e) {
-                                                          LOG_ERROR << "Failed to create realm: " << e.base().what();
-                                                          callback(jsonError("Failed to create realm"));
-                                                      };
-                                        }
-                                        >> [callback](const DrogonDbException& e) {
-                                            LOG_ERROR << "Failed to count realms: " << e.base().what();
-                                            callback(jsonError("Database error"));
-                                        };
-                           }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to check realm name: " << e.base().what();
-                               callback(jsonError("Database error"));
-                           };
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to check streamer status: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::issueRealmViewerToken(const HttpRequestPtr &,
-                                           std::function<void(const HttpResponsePtr &)> &&callback,
-                                           const std::string &realmId) {
-    int64_t id = std::stoll(realmId);
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND is_active = true"
-              << id
-              >> [callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonResp({}, k404NotFound));
-                      return;
-                  }
-                  
-                  std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  auto bytes = drogon::utils::genRandomString(32);
-                  std::string token = drogon::utils::base64Encode(
-                      (const unsigned char*)bytes.data(), bytes.length()
-                  );
-                  
-                  RedisHelper::storeKeyAsync("viewer_token:" + token, streamKey, 30,
-                      [callback, token](bool stored) {
-                          if (!stored) {
-                              callback(jsonResp({}, k500InternalServerError));
-                              return;
-                          }
-                          
-                          auto resp = HttpResponse::newHttpResponse();
-                          
-                          Cookie cookie("viewer_token", token);
-                          cookie.setPath("/");
-                          cookie.setHttpOnly(true);
-                          cookie.setSecure(false);
-                          cookie.setMaxAge(300);
-                          resp->addCookie(cookie);
-                          
-                          Json::Value body;
-                          body["success"] = true;
-                          body["viewer_token"] = token;
-                          body["expires_in"] = 30;
-                          
-                          resp->setContentTypeCode(CT_APPLICATION_JSON);
-                          resp->setBody(Json::FastWriter().write(body));
-                          
-                          callback(resp);
-                      }
-                  );
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonResp({}, k500InternalServerError));
-              };
-}
-
-void RealmController::getRealmStreamKey(const HttpRequestPtr &req,
-                                       std::function<void(const HttpResponsePtr &)> &&callback,
-                                       const std::string &realmId) {
-    // Check for viewer token
-    auto token = req->getCookie("viewer_token");
-    if (token.empty()) {
-        callback(jsonError("No viewer token", k403Forbidden));
-        return;
-    }
-    
-    int64_t id = std::stoll(realmId);
-    
-    // First get the stream key for this realm
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND is_active = true"
-              << id
-              >> [token, callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  // Verify the token is valid for this stream
-                  RedisHelper::getKeyAsync("viewer_token:" + token,
-                      [callback, streamKey](const std::string& storedStreamKey) {
-                          if (storedStreamKey != streamKey) {
-                              callback(jsonError("Invalid token for this realm", k403Forbidden));
-                              return;
-                          }
-                          
-                          // Token is valid, return the stream key
-                          Json::Value resp;
-                          resp["success"] = true;
-                          resp["streamKey"] = streamKey;
-                          callback(jsonResp(resp));
-                      }
-                  );
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::getRealm(const HttpRequestPtr &, // Remove parameter name since it's unused
-                              std::function<void(const HttpResponsePtr &)> &&callback,
-                              const std::string &realmId) {
-    // Remove authentication requirement for public viewing
-    int64_t id = std::stoll(realmId);
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.*, u.username FROM realms r "
-                 "JOIN users u ON r.user_id = u.id "
-                 "WHERE r.id = $1 AND r.is_active = true"
-              << id
-              >> [callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  Json::Value resp;
-                  resp["success"] = true;
-                  auto& realm = resp["realm"];
-                  realm["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
-                  realm["name"] = r[0]["name"].as<std::string>();
-                  // Don't expose stream key in public endpoint
-                  // realm["streamKey"] = r[0]["stream_key"].as<std::string>();
-                  realm["isActive"] = r[0]["is_active"].as<bool>();
-                  realm["isLive"] = r[0]["is_live"].as<bool>();
-                  realm["viewerCount"] = static_cast<Json::Int64>(r[0]["viewer_count"].as<int64_t>());
-                  realm["createdAt"] = r[0]["created_at"].as<std::string>();
-                  realm["username"] = r[0]["username"].as<std::string>();
-                  
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::updateRealm(const HttpRequestPtr &req,
-                                 std::function<void(const HttpResponsePtr &)> &&callback,
-                                 const std::string &realmId) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    // Parse realm ID
-    int64_t id;
-    try {
-        id = std::stoll(realmId);
-    } catch (...) {
-        callback(jsonError("Invalid realm ID", k400BadRequest));
-        return;
-    }
-    
-    // Verify the realm exists and belongs to the user
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT id FROM realms WHERE id = $1 AND user_id = $2"
-              << id << user.id
-              >> [callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found or access denied", k404NotFound));
-                      return;
-                  }
-                  
-                  // Currently no fields to update since we removed display_name and description
-                  // This endpoint is kept for potential future updates
-                  // For now, just return success
-                  Json::Value resp;
-                  resp["success"] = true;
-                  resp["message"] = "Realm updated successfully";
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::deleteRealm(const HttpRequestPtr &req,
-                                 std::function<void(const HttpResponsePtr &)> &&callback,
-                                 const std::string &realmId) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    int64_t id = std::stoll(realmId);
-    
-    auto dbClient = app().getDbClient();
-    
-    // First get the stream key to invalidate it
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND user_id = $2"
-              << id << user.id
-              >> [dbClient, id, user, callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  // Invalidate the key
-                  invalidateKeyInRedis(streamKey);
-                  
-                  // Delete the realm
-                  *dbClient << "DELETE FROM realms WHERE id = $1 AND user_id = $2"
-                           << id << user.id
-                           >> [callback](const Result&) {
-                               Json::Value resp;
-                               resp["success"] = true;
-                               callback(jsonResp(resp));
-                           }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to delete realm: " << e.base().what();
-                               callback(jsonError("Failed to delete realm"));
-                           };
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::regenerateRealmKey(const HttpRequestPtr &req,
-                                        std::function<void(const HttpResponsePtr &)> &&callback,
-                                        const std::string &realmId) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    int64_t id = std::stoll(realmId);
-    
-    auto dbClient = app().getDbClient();
-    
-    // Get old key
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1 AND user_id = $2"
-              << id << user.id
-              >> [dbClient, id, user, callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  std::string oldKey = r[0]["stream_key"].as<std::string>();
-                  invalidateKeyInRedis(oldKey);
-                  
-                  std::string newKey = generateStreamKey();
-                  
-                  *dbClient << "UPDATE realms SET stream_key = $1 WHERE id = $2 AND user_id = $3"
-                           << newKey << id << user.id
-                           >> [callback, newKey](const Result&) {
-                               // Store new key in Redis
-                               RedisHelper::storeKey("stream_key:" + newKey, "1", 86400);
-                               
-                               Json::Value resp;
-                               resp["success"] = true;
-                               resp["streamKey"] = newKey;
-                               callback(jsonResp(resp));
-                           }
-                           >> [callback](const DrogonDbException& e) {
-                               LOG_ERROR << "Failed to update stream key: " << e.base().what();
-                               callback(jsonError("Failed to regenerate key"));
-                           };
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::getRealmByName(const HttpRequestPtr &,
-                                    std::function<void(const HttpResponsePtr &)> &&callback,
-                                    const std::string &realmName) {
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.id, r.name, r.is_live, r.viewer_count, "
-                 "u.username, u.avatar_url FROM realms r "
-                 "JOIN users u ON r.user_id = u.id "
-                 "WHERE r.name = $1 AND r.is_active = true"
-              << realmName
-              >> [callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  Json::Value resp;
-                  resp["success"] = true;
-                  auto& realm = resp["realm"];
-                  realm["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
-                  realm["name"] = r[0]["name"].as<std::string>();
-                  realm["isLive"] = r[0]["is_live"].as<bool>();
-                  realm["viewerCount"] = static_cast<Json::Int64>(r[0]["viewer_count"].as<int64_t>());
-                  realm["username"] = r[0]["username"].as<std::string>();
-                  realm["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                  
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get realm by name: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::getLiveRealms(const HttpRequestPtr &,
-                                   std::function<void(const HttpResponsePtr &)> &&callback) {
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT r.name, r.viewer_count, u.username, u.avatar_url "
-                 "FROM realms r JOIN users u ON r.user_id = u.id "
-                 "WHERE r.is_live = true AND r.is_active = true "
-                 "ORDER BY r.viewer_count DESC"
-              >> [callback](const Result& r) {
-                  Json::Value resp(Json::arrayValue);
-                  
-                  for (const auto& row : r) {
-                      Json::Value realm;
-                      realm["name"] = row["name"].as<std::string>();
-                      realm["viewerCount"] = static_cast<Json::Int64>(row["viewer_count"].as<int64_t>());
-                      realm["username"] = row["username"].as<std::string>();
-                      realm["avatarUrl"] = row["avatar_url"].isNull() ? "" : row["avatar_url"].as<std::string>();
-                      resp.append(realm);
-                  }
-                  
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Failed to get live realms: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void RealmController::validateRealmKey(const HttpRequestPtr &,
-                                      std::function<void(const HttpResponsePtr &)> &&callback,
-                                      const std::string &key) {
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT id FROM realms WHERE stream_key = $1 AND is_active = true"
-              << key
-              >> [callback, key](const Result& r) {
-                  bool valid = !r.empty();
-                  if (valid) {
-                      // Store in Redis
-                      RedisHelper::storeKey("stream_key:" + key, "1", 86400);
-                  }
-                  
-                  Json::Value resp;
-                  resp["valid"] = valid;
-                  callback(jsonResp(resp));
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  Json::Value resp;
-                  resp["valid"] = false;
-                  callback(jsonResp(resp));
-              };
-}
-
-void RealmController::getRealmStats(const HttpRequestPtr &,
-                                   std::function<void(const HttpResponsePtr &)> &&callback,
-                                   const std::string &realmId) {
-    // Public endpoint - no authentication required
-    int64_t id = std::stoll(realmId);
-    
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT stream_key FROM realms WHERE id = $1"
-              << id
-              >> [callback](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonError("Realm not found", k404NotFound));
-                      return;
-                  }
-                  
-                  std::string streamKey = r[0]["stream_key"].as<std::string>();
-                  
-                  StatsService::getInstance().getStreamStats(streamKey,
-                      [callback](bool success, const StreamStats& stats) {
-                          if (success) {
-                              Json::Value json;
-                              json["success"] = true;
-                              
-                              auto& s = json["stats"];
-                              s["connections"] = static_cast<Json::Int64>(stats.uniqueViewers);
-                              s["total_connections"] = static_cast<Json::Int64>(stats.totalConnections);
-                              s["bytes_in"] = static_cast<Json::Int64>(stats.totalBytesIn);
-                              s["bytes_out"] = static_cast<Json::Int64>(stats.totalBytesOut);
-                              s["bitrate"] = stats.bitrate;
-                              s["codec"] = stats.codec;
-                              s["resolution"] = stats.resolution;
-                              s["fps"] = stats.fps;
-                              s["is_live"] = stats.isLive;
-                              
-                              // Protocol breakdown
-                              auto& pc = s["protocol_connections"];
-                              pc["webrtc"] = static_cast<Json::Int64>(stats.protocolConnections.webrtc);
-                              pc["hls"] = static_cast<Json::Int64>(stats.protocolConnections.hls);
-                              pc["llhls"] = static_cast<Json::Int64>(stats.protocolConnections.llhls);
-                              pc["dash"] = static_cast<Json::Int64>(stats.protocolConnections.dash);
-                              
-                              callback(jsonResp(json));
-                          } else {
-                              callback(jsonError("Failed to retrieve stats"));
-                          }
-                      });
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\RealmController.h ###
-
-#pragma once
-#include <drogon/HttpController.h>
-#include "../services/AuthService.h"
-
-using namespace drogon;
-
-class RealmController : public HttpController<RealmController> {
-public:
-    METHOD_LIST_BEGIN
-    ADD_METHOD_TO(RealmController::getUserRealms, "/api/realms", Get);
-    ADD_METHOD_TO(RealmController::createRealm, "/api/realms", Post);
-    ADD_METHOD_TO(RealmController::getRealm, "/api/realms/{1}", Get);
-    ADD_METHOD_TO(RealmController::updateRealm, "/api/realms/{1}", Put);
-    ADD_METHOD_TO(RealmController::deleteRealm, "/api/realms/{1}", Delete);
-    ADD_METHOD_TO(RealmController::regenerateRealmKey, "/api/realms/{1}/regenerate-key", Post);
-    ADD_METHOD_TO(RealmController::getRealmByName, "/api/realms/by-name/{1}", Get);
-    ADD_METHOD_TO(RealmController::getLiveRealms, "/api/realms/live", Get);
-    ADD_METHOD_TO(RealmController::validateRealmKey, "/api/realms/validate/{1}", Get);
-    ADD_METHOD_TO(RealmController::issueRealmViewerToken, "/api/realms/{1}/viewer-token", Get);
-    ADD_METHOD_TO(RealmController::getRealmStreamKey, "/api/realms/{1}/stream-key", Get);
-    ADD_METHOD_TO(RealmController::getRealmStats, "/api/realms/{1}/stats", Get);
-    METHOD_LIST_END
-
-    void getUserRealms(const HttpRequestPtr &req,
-                      std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void createRealm(const HttpRequestPtr &req,
-                    std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getRealm(const HttpRequestPtr &req,
-                  std::function<void(const HttpResponsePtr &)> &&callback,
-                  const std::string &realmId);
-    
-    void updateRealm(const HttpRequestPtr &req,
-                    std::function<void(const HttpResponsePtr &)> &&callback,
-                    const std::string &realmId);
-    
-    void deleteRealm(const HttpRequestPtr &req,
-                    std::function<void(const HttpResponsePtr &)> &&callback,
-                    const std::string &realmId);
-    
-    void regenerateRealmKey(const HttpRequestPtr &req,
-                           std::function<void(const HttpResponsePtr &)> &&callback,
-                           const std::string &realmId);
-    
-    void getRealmByName(const HttpRequestPtr &req,
-                       std::function<void(const HttpResponsePtr &)> &&callback,
-                       const std::string &realmName);
-    
-    void getLiveRealms(const HttpRequestPtr &req,
-                      std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void validateRealmKey(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback,
-                         const std::string &key);
-    
-    void getRealmStats(const HttpRequestPtr &req,
-                      std::function<void(const HttpResponsePtr &)> &&callback,
-                      const std::string &realmId);
-    
-    void issueRealmViewerToken(const HttpRequestPtr &req,
-                              std::function<void(const HttpResponsePtr &)> &&callback,
-                              const std::string &realmId);
-    
-    void getRealmStreamKey(const HttpRequestPtr &req,
-                          std::function<void(const HttpResponsePtr &)> &&callback,
-                          const std::string &realmId);
-
-private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\StreamController.cpp ###
-
-#include "StreamController.h"
-#include "../services/DatabaseService.h"
-#include "../services/StatsService.h"
-#include "../services/RedisHelper.h"
-#include "../services/OmeClient.h"
-#include "../services/AuthService.h"
-#include <drogon/utils/Utilities.h>
-#include <drogon/Cookie.h>
-#include <random>
-#include <sstream>
-#include <iomanip>
-#include <chrono>
-
-using namespace drogon::orm;
-
-// Helper functions at the top
-namespace {
-    // JSON response helper - saves 6-8 lines per endpoint
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonOk(const Json::Value& data) {
-        return jsonResp(data);
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
-    // Quick JSON builder for common patterns
-    Json::Value json(std::initializer_list<std::pair<const char*, Json::Value>> items) {
-        Json::Value j;
-        for (const auto& [key, value] : items) {
-            j[key] = value;
-        }
-        return j;
-    }
-    
-    UserInfo getUserFromRequest(const HttpRequestPtr &req) {
-        UserInfo user;
-        std::string auth = req->getHeader("Authorization");
-        
-        if (auth.empty() || auth.substr(0, 7) != "Bearer ") {
-            return user;
-        }
-        
-        std::string token = auth.substr(7);
-        AuthService::getInstance().validateToken(token, user);
-        return user;
-    }
-}
-
-// Static member definitions
-std::mutex StreamWebSocketController::connectionsMutex_;
-std::unordered_map<std::string, std::unordered_set<WebSocketConnectionPtr>> StreamWebSocketController::tokenConnections_;
-std::unordered_set<WebSocketConnectionPtr> StreamWebSocketController::connections_;
-
-void StreamController::health(const HttpRequestPtr &,
-                             std::function<void(const HttpResponsePtr &)> &&callback) {
-    callback(jsonOk(json({
-        {"status", "ok"},
-        {"timestamp", Json::Int64(std::chrono::duration_cast<std::chrono::milliseconds>(
-            std::chrono::system_clock::now().time_since_epoch()
-        ).count())}
-    })));
-}
-
-void StreamController::validateStreamKey(const HttpRequestPtr &,
-                                        std::function<void(const HttpResponsePtr &)> &&callback,
-                                        const std::string &key) {
-    // Now validate against realms table
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT 1 FROM realms WHERE stream_key = $1 AND is_active = true"
-              << key
-              >> [callback, key](const Result &r) {
-                  bool valid = !r.empty();
-                  if (valid) {
-                      // Store in Redis
-                      RedisHelper::storeKey("stream_key:" + key, "1", 86400);
-                  }
-                  callback(jsonOk(json({{"valid", valid}})));
-              }
-              >> [callback](const DrogonDbException &e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonOk(json({{"valid", false}})));
-              };
-}
-
-void StreamController::disconnectStream(const HttpRequestPtr &req,
-                                       std::function<void(const HttpResponsePtr &)> &&callback,
-                                       const std::string &streamKey) {
-    UserInfo user = getUserFromRequest(req);
-    if (user.id == 0) {
-        callback(jsonError("Unauthorized", k401Unauthorized));
-        return;
-    }
-    
-    // Check if user owns this stream or is admin
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT user_id FROM realms WHERE stream_key = $1 AND is_active = true"
-              << streamKey
-              >> [user, callback, streamKey](const Result& r) {
-                  if (r.empty() || (r[0]["user_id"].as<int64_t>() != user.id && !user.isAdmin)) {
-                      callback(jsonError("Forbidden", k403Forbidden));
-                      return;
-                  }
-                  
-                  OmeClient::getInstance().disconnectStream(streamKey, [callback](bool success) {
-                      if (success) {
-                          callback(jsonOk(json({
-                              {"success", true},
-                              {"message", "Stream disconnected"}
-                          })));
-                      } else {
-                          callback(jsonError("Failed to disconnect stream"));
-                      }
-                  });
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonError("Database error"));
-              };
-}
-
-void StreamController::getStreamStats(const HttpRequestPtr &,
-                                     std::function<void(const HttpResponsePtr &)> &&callback,
-                                     const std::string &streamKey) {
-    StatsService::getInstance().getStreamStats(streamKey,
-        [callback](bool success, const StreamStats& stats) {
-            if (success) {
-                Json::Value json;
-                json["success"] = true;
-                
-                auto& s = json["stats"];
-                s["connections"] = static_cast<Json::Int64>(stats.uniqueViewers);
-                s["total_connections"] = static_cast<Json::Int64>(stats.totalConnections);
-                s["bytes_in"] = static_cast<Json::Int64>(stats.totalBytesIn);
-                s["bytes_out"] = static_cast<Json::Int64>(stats.totalBytesOut);
-                s["bitrate"] = stats.bitrate;
-                s["codec"] = stats.codec;
-                s["resolution"] = stats.resolution;
-                s["fps"] = stats.fps;
-                s["is_live"] = stats.isLive;
-                
-                if (stats.totalBytesIn > 0) {
-                    s["data_rate_in"] = stats.bitrate / 1000.0;
-                }
-                if (stats.totalBytesOut > 0) {
-                    s["data_rate_out"] = stats.totalBytesOut / 1024.0 / 1024.0;
-                }
-                
-                // Protocol breakdown
-                auto& pc = s["protocol_connections"];
-                pc["webrtc"] = static_cast<Json::Int64>(stats.protocolConnections.webrtc);
-                pc["hls"] = static_cast<Json::Int64>(stats.protocolConnections.hls);
-                pc["llhls"] = static_cast<Json::Int64>(stats.protocolConnections.llhls);
-                pc["dash"] = static_cast<Json::Int64>(stats.protocolConnections.dash);
-                
-                callback(jsonResp(json));
-            } else {
-                callback(jsonError("Failed to retrieve stream stats"));
-            }
-        });
-}
-
-void StreamController::getActiveStreams(const HttpRequestPtr &,
-                                       std::function<void(const HttpResponsePtr &)> &&callback) {
-    OmeClient::getInstance().getActiveStreams([callback](bool success, const Json::Value& omeResponse) {
-        if (success) {
-            LOG_INFO << "Active streams: " << omeResponse["response"].toStyledString();
-            callback(jsonOk(json({
-                {"success", true},
-                {"streams", omeResponse["response"]}
-            })));
-        } else {
-            callback(jsonError("Failed to get active streams from OME"));
-        }
-    });
-}
-
-void StreamController::issueViewerToken(const HttpRequestPtr &,
-                                       std::function<void(const HttpResponsePtr &)> &&callback,
-                                       const std::string &streamKey) {
-    // Validate against realms
-    auto dbClient = app().getDbClient();
-    *dbClient << "SELECT 1 FROM realms WHERE stream_key = $1 AND is_active = true"
-              << streamKey
-              >> [callback, streamKey](const Result& r) {
-                  if (r.empty()) {
-                      callback(jsonResp({}, k404NotFound));
-                      return;
-                  }
-                  
-                  auto bytes = drogon::utils::genRandomString(32);
-                  std::string token = drogon::utils::base64Encode(
-                      (const unsigned char*)bytes.data(), bytes.length()
-                  );
-                  
-                  RedisHelper::storeKeyAsync("viewer_token:" + token, streamKey, 30,
-                      [callback, token](bool stored) {
-                          if (!stored) {
-                              callback(jsonResp({}, k500InternalServerError));
-                              return;
-                          }
-                          
-                          auto resp = HttpResponse::newHttpResponse();
-                          
-                          Cookie cookie("viewer_token", token);
-                          cookie.setPath("/");
-                          cookie.setHttpOnly(true);
-                          cookie.setSecure(false);
-                          cookie.setMaxAge(300);
-                          resp->addCookie(cookie);
-                          
-                          Json::Value body;
-                          body["success"] = true;
-                          body["viewer_token"] = token;
-                          body["expires_in"] = 30;
-                          
-                          resp->setContentTypeCode(CT_APPLICATION_JSON);
-                          resp->setBody(Json::FastWriter().write(body));
-                          
-                          callback(resp);
-                      }
-                  );
-              }
-              >> [callback](const DrogonDbException& e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(jsonResp({}, k500InternalServerError));
-              };
-}
-
-void StreamController::heartbeat(const HttpRequestPtr &req,
-                                std::function<void(const HttpResponsePtr &)> &&callback,
-                                const std::string &streamKey) {
-    auto token = req->getCookie("viewer_token");
-    if (token.empty()) {
-        callback(jsonResp({}, k403Forbidden));
-        return;
-    }
-    
-    RedisHelper::getKeyAsync("viewer_token:" + token, 
-        [callback, streamKey, token](const std::string& storedStreamKey) {
-            if (storedStreamKey != streamKey) {
-                callback(jsonResp({}, k403Forbidden));
-                return;
-            }
-            
-            services::RedisHelper::instance().expireAsync("viewer_token:" + token, 30,
-                [callback](bool success) {
-                    if (!success) {
-                        callback(jsonResp({}, k500InternalServerError));
-                        return;
-                    }
-                    
-                    callback(jsonOk(json({
-                        {"success", true},
-                        {"renewed", true}
-                    })));
-                }
-            );
-        }
-    );
-}
-
-// WebSocket implementation
-void StreamWebSocketController::handleNewMessage(const WebSocketConnectionPtr&,
-                                                std::string &&message,
-                                                const WebSocketMessageType &type) {
-    if (type == WebSocketMessageType::Text) {
-        Json::Value msg;
-        Json::Reader reader;
-        if (reader.parse(message, msg) && msg["type"].asString() == "subscribe") {
-            LOG_INFO << "Client subscribed to stream updates";
-        }
-    }
-}
-
-void StreamWebSocketController::handleNewConnection(const HttpRequestPtr &req,
-                                                   const WebSocketConnectionPtr& wsConnPtr) {
-    LOG_INFO << "New WebSocket connection established";
-    
-    auto token = req->getCookie("viewer_token");
-    if (token.empty()) {
-        LOG_WARN << "WebSocket connection without viewer token";
-        wsConnPtr->shutdown();
-        return;
-    }
-    
-    RedisHelper::getKeyAsync("viewer_token:" + token,
-        [wsConnPtr, token](const std::string& streamKey) {
-            if (streamKey.empty()) {
-                LOG_WARN << "Invalid viewer token";
-                wsConnPtr->shutdown();
-                return;
-            }
-            
-            std::lock_guard<std::mutex> lock(connectionsMutex_);
-            tokenConnections_[token].insert(wsConnPtr);
-            connections_.insert(wsConnPtr);
-            
-            LOG_INFO << "WebSocket authenticated for stream: " << streamKey;
-        }
-    );
-}
-
-void StreamWebSocketController::handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) {
-    LOG_INFO << "WebSocket connection closed";
-    
-    std::lock_guard<std::mutex> lock(connectionsMutex_);
-    
-    std::string tokenToDelete;
-    for (auto& [token, conns] : tokenConnections_) {
-        if (conns.erase(wsConnPtr)) {
-            if (conns.empty()) {
-                tokenToDelete = token;
-            }
-            break;
-        }
-    }
-    
-    connections_.erase(wsConnPtr);
-    
-    if (!tokenToDelete.empty()) {
-        tokenConnections_.erase(tokenToDelete);
-        
-        RedisHelper::deleteKeyAsync("viewer_token:" + tokenToDelete, 
-            [tokenToDelete](bool success) {
-                if (success) {
-                    LOG_INFO << "Deleted viewer token on disconnect: " << tokenToDelete;
-                } else {
-                    LOG_WARN << "Failed to delete viewer token: " << tokenToDelete;
-                }
-            }
-        );
-    }
-}
-
-void StreamWebSocketController::broadcastKeyUpdate(const std::string& userId, const std::string& newKey) {
-    Json::Value msg;
-    msg["type"] = "key_regenerated";
-    msg["user_id"] = userId;
-    msg["stream_key"] = newKey;
-    
-    auto msgStr = Json::FastWriter().write(msg);
-    
-    std::lock_guard<std::mutex> lock(connectionsMutex_);
-    for (const auto& conn : connections_) {
-        if (conn->connected()) {
-            conn->send(msgStr);
-        }
-    }
-}
-
-void StreamWebSocketController::broadcastStatsUpdate(const Json::Value& stats) {
-    std::string jsonStr = Json::FastWriter().write(stats);
-    
-    std::lock_guard<std::mutex> lock(connectionsMutex_);
-    for (const auto& conn : connections_) {
-        if (conn->connected()) {
-            conn->send(jsonStr);
-        }
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\StreamController.h ###
-
-#pragma once
-#include <drogon/HttpController.h>
-#include <drogon/WebSocketController.h>
-#include <memory>
-#include <unordered_set>
-#include <unordered_map>
-#include <mutex>
-
-using namespace drogon;
-
-class StreamController : public HttpController<StreamController> {
-public:
-    METHOD_LIST_BEGIN
-    ADD_METHOD_TO(StreamController::health, "/api/health", Get);
-    ADD_METHOD_TO(StreamController::validateStreamKey, "/api/stream/validate/{1}", Get);
-    ADD_METHOD_TO(StreamController::disconnectStream, "/api/stream/disconnect/{1}", Post);
-    ADD_METHOD_TO(StreamController::getStreamStats, "/api/stream/stats/{1}", Get);
-    ADD_METHOD_TO(StreamController::getActiveStreams, "/api/stream/active", Get);
-    ADD_METHOD_TO(StreamController::issueViewerToken, "/api/stream/token/{1}", Get);
-    ADD_METHOD_TO(StreamController::heartbeat, "/api/stream/heartbeat/{1}", Post);
-    METHOD_LIST_END
-
-    void health(const HttpRequestPtr &req,
-                std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void validateStreamKey(const HttpRequestPtr &req,
-                          std::function<void(const HttpResponsePtr &)> &&callback,
-                          const std::string &key);
-    
-    void disconnectStream(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback,
-                         const std::string &streamId);
-    
-    void getStreamStats(const HttpRequestPtr &req,
-                       std::function<void(const HttpResponsePtr &)> &&callback,
-                       const std::string &streamKey);
-    
-    void getActiveStreams(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void issueViewerToken(const HttpRequestPtr &req,
-                         std::function<void(const HttpResponsePtr &)> &&callback,
-                         const std::string &streamKey);
-    
-    void heartbeat(const HttpRequestPtr &req,
-                  std::function<void(const HttpResponsePtr &)> &&callback,
-                  const std::string &streamKey);
-};
-
-class StreamWebSocketController : public WebSocketController<StreamWebSocketController> {
-public:
-    void handleNewMessage(const WebSocketConnectionPtr& wsConnPtr,
-                         std::string &&message,
-                         const WebSocketMessageType &type) override;
-    
-    void handleNewConnection(const HttpRequestPtr &req,
-                            const WebSocketConnectionPtr& wsConnPtr) override;
-    
-    void handleConnectionClosed(const WebSocketConnectionPtr& wsConnPtr) override;
-    
-    static void broadcastKeyUpdate(const std::string& userId, const std::string& newKey);
-    static void broadcastStatsUpdate(const Json::Value& stats);
-    
-    WS_PATH_LIST_BEGIN
-    WS_PATH_ADD("/ws/stream");
-    WS_PATH_LIST_END
-
-private:
-    static std::mutex connectionsMutex_;
-    static std::unordered_map<std::string, std::unordered_set<WebSocketConnectionPtr>> tokenConnections_;
-    static std::unordered_set<WebSocketConnectionPtr> connections_;
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\UserController.cpp ###
-
-#include "UserController.h"
-#include "../services/DatabaseService.h"
-#include <drogon/MultiPart.h>
-#include <drogon/Cookie.h>
-#include <fstream>
-#include <random>
-#include <sstream>
-#include <iomanip>
-#include <filesystem>
-
-using namespace drogon::orm;
-
-namespace {
-    HttpResponsePtr jsonResp(const Json::Value& j, HttpStatusCode c = k200OK) {
-        auto r = HttpResponse::newHttpJsonResponse(j);
-        r->setStatusCode(c);
-        return r;
-    }
-    
-    HttpResponsePtr jsonError(const std::string& error, HttpStatusCode code = k400BadRequest) {
-        Json::Value j;
-        j["success"] = false;
-        j["error"] = error;
-        return jsonResp(j, code);
-    }
-    
-    std::string generateRandomFilename(const std::string& extension) {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
-        std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
-        }
-        
-        return ss.str() + "." + extension;
-    }
-    
-    bool ensureDirectoryExists(const std::string& path) {
-        try {
-            std::filesystem::create_directories(path);
-            // Set permissions to 755
-            std::filesystem::permissions(path,
-                std::filesystem::perms::owner_all |
-                std::filesystem::perms::group_read | std::filesystem::perms::group_exec |
-                std::filesystem::perms::others_read | std::filesystem::perms::others_exec
-            );
-            return true;
-        } catch (const std::exception& e) {
-            LOG_ERROR << "Failed to create directory " << path << ": " << e.what();
-            return false;
-        }
-    }
-    
-    // Helper to set httpOnly auth cookie
-    void setAuthCookie(const HttpResponsePtr& resp, const std::string& token) {
-        Cookie authCookie("auth_token", token);
-        authCookie.setPath("/");
-        authCookie.setHttpOnly(true);
-        authCookie.setSecure(false); // Set to true in production with HTTPS
-        authCookie.setMaxAge(86400); // 24 hours
-        authCookie.setSameSite(Cookie::SameSite::kLax);
-        resp->addCookie(authCookie);
-    }
-    
-    // Helper to clear auth cookie
-    void clearAuthCookie(const HttpResponsePtr& resp) {
-        Cookie authCookie("auth_token", "");
-        authCookie.setPath("/");
-        authCookie.setHttpOnly(true);
-        authCookie.setMaxAge(0); // Expire immediately
-        resp->addCookie(authCookie);
-    }
-}
-
-UserInfo UserController::getUserFromRequest(const HttpRequestPtr &req) {
-    UserInfo user;
-    
-    // First try to get from cookie
-    std::string token = req->getCookie("auth_token");
-    
-    // Fallback to Authorization header for API clients
-    if (token.empty()) {
-        std::string auth = req->getHeader("Authorization");
-        if (!auth.empty() && auth.substr(0, 7) == "Bearer ") {
-            token = auth.substr(7);
-        }
-    }
-    
-    if (!token.empty()) {
-        AuthService::getInstance().validateToken(token, user);
-    }
-    
-    return user;
-}
-
-void UserController::register_(const HttpRequestPtr &req,
-                              std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        LOG_DEBUG << "Registration request received";
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            LOG_WARN << "Invalid JSON in registration request";
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        // Check if all required fields exist before accessing them
-        if (!(*json).isMember("username") || 
-            !(*json).isMember("password") || 
-            !(*json).isMember("publicKey") || 
-            !(*json).isMember("fingerprint")) {
-            LOG_WARN << "Missing required fields in registration request";
-            callback(jsonError("Missing required fields"));
-            return;
-        }
-        
-        // Safely extract the values
-        std::string username = (*json)["username"].asString();
-        std::string password = (*json)["password"].asString();
-        std::string publicKey = (*json)["publicKey"].asString();
-        std::string fingerprint = (*json)["fingerprint"].asString();
-        
-        // Validate that none of the strings are empty
-        if (username.empty() || password.empty() || publicKey.empty() || fingerprint.empty()) {
-            LOG_WARN << "Empty required fields in registration request";
-            callback(jsonError("All fields are required"));
-            return;
-        }
-        
-        // Additional validation
-        if (username.length() > 30) {
-            callback(jsonError("Username too long (max 30 characters)"));
-            return;
-        }
-        
-        if (password.length() < 8) {
-            callback(jsonError("Password must be at least 8 characters"));
-            return;
-        }
-        
-        LOG_INFO << "Processing registration for user: " << username;
-        
-        AuthService::getInstance().registerUser(username, password, publicKey, fingerprint,
-            [callback, username](bool success, const std::string& error, int64_t userId) {
-                if (success) {
-                    LOG_INFO << "User registered successfully: " << username << " (ID: " << userId << ")";
-                    Json::Value resp;
-                    resp["success"] = true;
-                    resp["userId"] = static_cast<Json::Int64>(userId);
-                    callback(jsonResp(resp));
-                } else {
-                    LOG_WARN << "Registration failed for " << username << ": " << error;
-                    callback(jsonError(error));
-                }
-            });
-            
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in register_: " << e.what();
-        callback(jsonError("Internal server error"));
-    } catch (...) {
-        LOG_ERROR << "Unknown exception in register_";
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::login(const HttpRequestPtr &req,
-                          std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        LOG_DEBUG << "Login request received";
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        // Check if fields exist before accessing
-        if (!(*json).isMember("username") || !(*json).isMember("password")) {
-            callback(jsonError("Missing credentials"));
-            return;
-        }
-        
-        std::string username = (*json)["username"].asString();
-        std::string password = (*json)["password"].asString();
-        
-        if (username.empty() || password.empty()) {
-            callback(jsonError("Missing credentials"));
-            return;
-        }
-        
-        LOG_INFO << "Login attempt for user: " << username;
-        
-        AuthService::getInstance().loginUser(username, password,
-            [callback, username](bool success, const std::string& token, const UserInfo& user) {
-                if (success) {
-                    LOG_INFO << "Login successful for user: " << username;
-                    
-                    Json::Value resp;
-                    resp["success"] = true;
-                    // Don't send token in body for cookie-based auth
-                    resp["user"]["id"] = static_cast<Json::Int64>(user.id);
-                    resp["user"]["username"] = user.username;
-                    resp["user"]["isAdmin"] = user.isAdmin;
-                    resp["user"]["isStreamer"] = user.isStreamer;
-                    resp["user"]["isPgpOnly"] = user.isPgpOnly;
-                    resp["user"]["bio"] = user.bio;
-                    resp["user"]["avatarUrl"] = user.avatarUrl;
-                    resp["user"]["pgpOnlyEnabledAt"] = user.pgpOnlyEnabledAt;
-                    resp["user"]["colorCode"] = user.colorCode;
-                    
-                    auto response = jsonResp(resp);
-                    setAuthCookie(response, token);
-                    callback(response);
-                } else {
-                    LOG_WARN << "Login failed for user: " << username;
-                    callback(jsonError(token.empty() ? "Invalid credentials" : token, k401Unauthorized));
-                }
-            });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in login: " << e.what();
-        callback(jsonError("Internal server error"));
-    } catch (...) {
-        LOG_ERROR << "Unknown exception in login";
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::logout(const HttpRequestPtr &req,
-                           std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        Json::Value resp;
-        resp["success"] = true;
-        resp["message"] = "Logged out successfully";
-        
-        auto response = jsonResp(resp);
-        clearAuthCookie(response);
-        callback(response);
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in logout: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::pgpChallenge(const HttpRequestPtr &req,
-                                 std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        if (!(*json).isMember("username")) {
-            callback(jsonError("Username required"));
-            return;
-        }
-        
-        std::string username = (*json)["username"].asString();
-        
-        if (username.empty()) {
-            callback(jsonError("Username required"));
-            return;
-        }
-        
-        AuthService::getInstance().initiatePgpLogin(username,
-            [callback](bool success, const std::string& challenge, const std::string& publicKey) {
-                if (success) {
-                    Json::Value resp;
-                    resp["success"] = true;
-                    resp["challenge"] = challenge;
-                    resp["publicKey"] = publicKey;
-                    callback(jsonResp(resp));
-                } else {
-                    callback(jsonError("User not found or PGP not enabled", k404NotFound));
-                }
-            });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in pgpChallenge: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::pgpVerify(const HttpRequestPtr &req,
-                              std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        if (!(*json).isMember("username") || 
-            !(*json).isMember("signature") || 
-            !(*json).isMember("challenge")) {
-            callback(jsonError("Missing required fields"));
-            return;
-        }
-        
-        std::string username = (*json)["username"].asString();
-        std::string signature = (*json)["signature"].asString();
-        std::string challenge = (*json)["challenge"].asString();
-        
-        if (username.empty() || signature.empty() || challenge.empty()) {
-            callback(jsonError("Missing required fields"));
-            return;
-        }
-        
-        AuthService::getInstance().verifyPgpLogin(username, signature, challenge,
-            [callback](bool success, const std::string& token, const UserInfo& user) {
-                if (success) {
-                    Json::Value resp;
-                    resp["success"] = true;
-                    // Don't send token in body for cookie-based auth
-                    resp["user"]["id"] = static_cast<Json::Int64>(user.id);
-                    resp["user"]["username"] = user.username;
-                    resp["user"]["isAdmin"] = user.isAdmin;
-                    resp["user"]["isStreamer"] = user.isStreamer;
-                    resp["user"]["isPgpOnly"] = user.isPgpOnly;
-                    resp["user"]["bio"] = user.bio;
-                    resp["user"]["avatarUrl"] = user.avatarUrl;
-                    resp["user"]["pgpOnlyEnabledAt"] = user.pgpOnlyEnabledAt;
-                    resp["user"]["colorCode"] = user.colorCode;
-                    
-                    auto response = jsonResp(resp);
-                    setAuthCookie(response, token);
-                    callback(response);
-                } else {
-                    callback(jsonError("Invalid signature", k401Unauthorized));
-                }
-            });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in pgpVerify: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::getCurrentUser(const HttpRequestPtr &req,
-                                   std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto dbClient = app().getDbClient();
-        *dbClient << "SELECT id, username, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
-                     "FROM users WHERE id = $1"
-                  << user.id
-                  >> [callback](const Result& r) {
-                      if (r.empty()) {
-                          callback(jsonError("User not found", k404NotFound));
-                          return;
-                      }
-                      
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["user"]["id"] = static_cast<Json::Int64>(r[0]["id"].as<int64_t>());
-                      resp["user"]["username"] = r[0]["username"].as<std::string>();
-                      resp["user"]["isAdmin"] = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
-                      resp["user"]["isStreamer"] = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
-                      resp["user"]["isPgpOnly"] = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                      resp["user"]["bio"] = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
-                      resp["user"]["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                      resp["user"]["pgpOnlyEnabledAt"] = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
-                      resp["user"]["colorCode"] = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get user data: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in getCurrentUser: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::updateProfile(const HttpRequestPtr &req,
-                                  std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        std::string bio = (*json).isMember("bio") ? (*json)["bio"].asString() : "";
-        
-        auto dbClient = app().getDbClient();
-        *dbClient << "UPDATE users SET bio = $1 WHERE id = $2"
-                  << bio << user.id
-                  >> [callback](const Result&) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["message"] = "Profile updated successfully";
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update profile: " << e.base().what();
-                      callback(jsonError("Failed to update profile"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in updateProfile: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::updatePassword(const HttpRequestPtr &req,
-                                   std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        if (!(*json).isMember("oldPassword") || !(*json).isMember("newPassword")) {
-            callback(jsonError("Missing passwords"));
-            return;
-        }
-        
-        std::string oldPassword = (*json)["oldPassword"].asString();
-        std::string newPassword = (*json)["newPassword"].asString();
-        
-        if (oldPassword.empty() || newPassword.empty()) {
-            callback(jsonError("Missing passwords"));
-            return;
-        }
-        
-        AuthService::getInstance().updatePassword(user.id, oldPassword, newPassword,
-            [callback](bool success, const std::string& error) {
-                if (success) {
-                    Json::Value resp;
-                    resp["success"] = true;
-                    callback(jsonResp(resp));
-                } else {
-                    callback(jsonError(error));
-                }
-            });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in updatePassword: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::togglePgpOnly(const HttpRequestPtr &req,
-                                  std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        bool enable = (*json).isMember("enable") ? (*json)["enable"].asBool() : false;
-        
-        auto dbClient = app().getDbClient();
-        *dbClient << "UPDATE users SET is_pgp_only = $1 WHERE id = $2 RETURNING pgp_only_enabled_at"
-                  << enable << user.id
-                  >> [callback, enable](const Result& r) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["pgpOnly"] = enable;
-                      
-                      // Return the timestamp if it was just enabled
-                      if (enable && !r.empty() && !r[0]["pgp_only_enabled_at"].isNull()) {
-                          resp["pgpOnlyEnabledAt"] = r[0]["pgp_only_enabled_at"].as<std::string>();
-                      }
-                      
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update PGP setting: " << e.base().what();
-                      callback(jsonError("Failed to update setting"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in togglePgpOnly: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::addPgpKey(const HttpRequestPtr &req,
-                              std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        if (!(*json).isMember("publicKey") || !(*json).isMember("fingerprint")) {
-            callback(jsonError("Missing key data"));
-            return;
-        }
-        
-        std::string publicKey = (*json)["publicKey"].asString();
-        std::string fingerprint = (*json)["fingerprint"].asString();
-        
-        if (publicKey.empty() || fingerprint.empty()) {
-            callback(jsonError("Missing key data"));
-            return;
-        }
-        
-        auto dbClient = app().getDbClient();
-        
-        // Check if fingerprint already exists
-        *dbClient << "SELECT id FROM pgp_keys WHERE fingerprint = $1"
-                  << fingerprint
-                  >> [dbClient, user, publicKey, fingerprint, callback](const Result& r) {
-                      if (!r.empty()) {
-                          callback(jsonError("This PGP key is already registered"));
-                          return;
-                      }
-                      
-                      *dbClient << "INSERT INTO pgp_keys (user_id, public_key, fingerprint) VALUES ($1, $2, $3)"
-                               << user.id << publicKey << fingerprint
-                               >> [callback](const Result&) {
-                                   Json::Value resp;
-                                   resp["success"] = true;
-                                   callback(jsonResp(resp));
-                               }
-                               >> [callback](const DrogonDbException& e) {
-                                   LOG_ERROR << "Failed to add PGP key: " << e.base().what();
-                                   callback(jsonError("Failed to add PGP key"));
-                               };
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in addPgpKey: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::getPgpKeys(const HttpRequestPtr &req,
-                               std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto dbClient = app().getDbClient();
-        *dbClient << "SELECT public_key, fingerprint, created_at FROM pgp_keys "
-                     "WHERE user_id = $1 ORDER BY created_at DESC"
-                  << user.id
-                  >> [callback](const Result& r) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      Json::Value keys(Json::arrayValue);
-                      
-                      for (const auto& row : r) {
-                          Json::Value key;
-                          key["publicKey"] = row["public_key"].as<std::string>();
-                          key["fingerprint"] = row["fingerprint"].as<std::string>();
-                          key["createdAt"] = row["created_at"].as<std::string>();
-                          keys.append(key);
-                      }
-                      
-                      resp["keys"] = keys;
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get PGP keys: " << e.base().what();
-                      callback(jsonError("Failed to get PGP keys"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in getPgpKeys: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::uploadAvatar(const HttpRequestPtr &req,
-                                 std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        MultiPartParser parser;
-        parser.parse(req);
-        
-        if (parser.getFiles().empty()) {
-            callback(jsonError("No file uploaded"));
-            return;
-        }
-        
-        const auto& file = parser.getFiles()[0];
-        
-        // Validate file size (250KB max)
-        if (file.fileLength() > 250 * 1024) {
-            callback(jsonError("File too large (max 250KB)"));
-            return;
-        }
-        
-        // Validate file type
-        std::string ext = std::string(file.getFileExtension());
-        if (ext != "jpg" && ext != "jpeg" && ext != "png" && ext != "gif") {
-            callback(jsonError("Invalid file type (jpg, png, gif only)"));
-            return;
-        }
-        
-        // Ensure uploads directory exists
-        const std::string uploadDir = "/app/uploads/avatars";
-        if (!ensureDirectoryExists(uploadDir)) {
-            callback(jsonError("Failed to create upload directory"));
-            return;
-        }
-        
-        // Generate unique filename using hex string
-        std::string filename = generateRandomFilename(ext);
-        
-        // Build the full file path
-        std::string fullPath = uploadDir + "/" + filename;
-        
-        // Ensure the file doesn't already exist (extremely unlikely with random names)
-        if (std::filesystem::exists(fullPath)) {
-            LOG_WARN << "File already exists, regenerating name";
-            filename = generateRandomFilename(ext);
-            fullPath = uploadDir + "/" + filename;
-        }
-        
-        try {
-            // Get the uploaded file data and size
-            const char* fileData = file.fileData();
-            size_t fileSize = file.fileLength();
-            
-            if (!fileData || fileSize == 0) {
-                LOG_ERROR << "Empty file data";
-                callback(jsonError("Empty file uploaded"));
-                return;
-            }
-            
-            // Write file data directly to avoid directory creation issues
-            std::ofstream ofs(fullPath, std::ios::binary);
-            if (!ofs) {
-                LOG_ERROR << "Failed to open file for writing: " << fullPath;
-                callback(jsonError("Failed to create file"));
-                return;
-            }
-            
-            ofs.write(fileData, fileSize);
-            ofs.close();
-            
-            if (!ofs) {
-                LOG_ERROR << "Failed to write file data";
-                callback(jsonError("Failed to write file"));
-                return;
-            }
-            
-            // Verify it's actually a file
-            if (!std::filesystem::is_regular_file(fullPath)) {
-                LOG_ERROR << "Created path is not a regular file: " << fullPath;
-                std::filesystem::remove_all(fullPath); // Clean up
-                callback(jsonError("Failed to save avatar correctly"));
-                return;
-            }
-            
-            // Set file permissions to 644
-            std::filesystem::permissions(fullPath,
-                std::filesystem::perms::owner_read | std::filesystem::perms::owner_write |
-                std::filesystem::perms::group_read |
-                std::filesystem::perms::others_read
-            );
-            
-            LOG_INFO << "Avatar saved successfully to: " << fullPath;
-            LOG_INFO << "File size: " << std::filesystem::file_size(fullPath) << " bytes";
-        } catch (const std::exception& e) {
-            LOG_ERROR << "Exception while saving avatar: " << e.what();
-            // Clean up any partial files/directories
-            if (std::filesystem::exists(fullPath)) {
-                std::filesystem::remove_all(fullPath);
-            }
-            callback(jsonError("Failed to save avatar"));
-            return;
-        }
-        
-        // Store as proper URL path
-        std::string avatarUrl = "/uploads/avatars/" + filename;
-        
-        // Update database with the URL
-        auto dbClient = app().getDbClient();
-        *dbClient << "UPDATE users SET avatar_url = $1 WHERE id = $2"
-                  << avatarUrl << user.id
-                  >> [callback, avatarUrl](const Result&) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["avatarUrl"] = avatarUrl;
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to update avatar: " << e.base().what();
-                      callback(jsonError("Failed to update avatar"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in uploadAvatar: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::getProfile(const HttpRequestPtr &,
-                               std::function<void(const HttpResponsePtr &)> &&callback,
-                               const std::string &username) {
-    try {
-        auto dbClient = app().getDbClient();
-        *dbClient << "SELECT u.username, u.bio, u.avatar_url, u.created_at, "
-                     "u.is_pgp_only, u.pgp_only_enabled_at, u.user_color "
-                     "FROM users u WHERE u.username = $1"
-                  << username
-                  >> [callback](const Result& r) {
-                      if (r.empty()) {
-                          callback(jsonError("User not found", k404NotFound));
-                          return;
-                      }
-                      
-                      Json::Value resp;
-                      resp["success"] = true;
-                      resp["profile"]["username"] = r[0]["username"].as<std::string>();
-                      resp["profile"]["bio"] = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
-                      resp["profile"]["avatarUrl"] = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                      resp["profile"]["createdAt"] = r[0]["created_at"].as<std::string>();
-                      resp["profile"]["isPgpOnly"] = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                      resp["profile"]["pgpOnlyEnabledAt"] = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
-                      resp["profile"]["colorCode"] = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                      
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(jsonError("Database error"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in getProfile: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::getUserPgpKeys(const HttpRequestPtr &,
-                                   std::function<void(const HttpResponsePtr &)> &&callback,
-                                   const std::string &username) {
-    try {
-        // Public endpoint - no authentication required
-        auto dbClient = app().getDbClient();
-        *dbClient << "SELECT pk.public_key, pk.fingerprint, pk.created_at "
-                     "FROM pgp_keys pk JOIN users u ON pk.user_id = u.id "
-                     "WHERE u.username = $1 ORDER BY pk.created_at DESC"
-                  << username
-                  >> [callback](const Result& r) {
-                      Json::Value resp;
-                      resp["success"] = true;
-                      Json::Value keys(Json::arrayValue);
-                      
-                      for (const auto& row : r) {
-                          Json::Value key;
-                          key["publicKey"] = row["public_key"].as<std::string>();
-                          key["fingerprint"] = row["fingerprint"].as<std::string>();
-                          key["createdAt"] = row["created_at"].as<std::string>();
-                          keys.append(key);
-                      }
-                      
-                      resp["keys"] = keys;
-                      callback(jsonResp(resp));
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Failed to get user PGP keys: " << e.base().what();
-                      callback(jsonError("Failed to get PGP keys"));
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in getUserPgpKeys: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::updateColor(const HttpRequestPtr &req,
-                                std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        UserInfo user = getUserFromRequest(req);
-        if (user.id == 0) {
-            callback(jsonError("Unauthorized", k401Unauthorized));
-            return;
-        }
-        
-        auto json = req->getJsonObject();
-        if (!json) {
-            callback(jsonError("Invalid JSON"));
-            return;
-        }
-        
-        if (!(*json).isMember("color")) {
-            callback(jsonError("Color is required"));
-            return;
-        }
-        
-        std::string newColor = (*json)["color"].asString();
-        
-        if (newColor.empty()) {
-            callback(jsonError("Color is required"));
-            return;
-        }
-        
-        AuthService::getInstance().updateUserColor(user.id, newColor,
-            [callback, user](bool success, const std::string& error, const std::string& finalColor) {
-                if (success) {
-                    // Fetch updated user info
-                    AuthService::getInstance().fetchUserInfo(user.id, 
-                        [callback, finalColor](bool fetchSuccess, const UserInfo& updatedUser) {
-                            if (fetchSuccess) {
-                                // Generate new token with updated user info including color
-                                std::string newToken = AuthService::getInstance().generateToken(updatedUser);
-                                
-                                Json::Value resp;
-                                resp["success"] = true;
-                                resp["color"] = finalColor;
-                                resp["user"]["id"] = static_cast<Json::Int64>(updatedUser.id);
-                                resp["user"]["username"] = updatedUser.username;
-                                resp["user"]["isAdmin"] = updatedUser.isAdmin;
-                                resp["user"]["isStreamer"] = updatedUser.isStreamer;
-                                resp["user"]["colorCode"] = updatedUser.colorCode;
-                                
-                                auto response = jsonResp(resp);
-                                // Update auth cookie with new token
-                                setAuthCookie(response, newToken);
-                                callback(response);
-                            } else {
-                                // Color was updated but couldn't fetch full user info
-                                Json::Value resp;
-                                resp["success"] = true;
-                                resp["color"] = finalColor;
-                                resp["message"] = "Color updated but please refresh for new token";
-                                callback(jsonResp(resp));
-                            }
-                        });
-                } else {
-                    callback(jsonError(error));
-                }
-            });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in updateColor: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-void UserController::getAvailableColors(const HttpRequestPtr &,
-                                       std::function<void(const HttpResponsePtr &)> &&callback) {
-    try {
-        // Define available colors for user profiles
-        Json::Value resp;
-        resp["success"] = true;
-        
-        Json::Value colors(Json::arrayValue);
-        
-        // Add predefined color options
-        colors.append("#561D5E");  // Default purple
-        colors.append("#1E88E5");  // Blue
-        colors.append("#43A047");  // Green
-        colors.append("#E53935");  // Red
-        colors.append("#FB8C00");  // Orange
-        colors.append("#8E24AA");  // Purple variant
-        colors.append("#00ACC1");  // Cyan
-        colors.append("#FFB300");  // Amber
-        colors.append("#546E7A");  // Blue Grey
-        colors.append("#D81B60");  // Pink
-        
-        resp["colors"] = colors;
-        callback(jsonResp(resp));
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in getAvailableColors: " << e.what();
-        callback(jsonError("Internal server error"));
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\controllers\UserController.h ###
-
-#pragma once
-#include <drogon/HttpController.h>
-#include "../services/AuthService.h"
-
-using namespace drogon;
-
-class UserController : public HttpController<UserController> {
-public:
-    METHOD_LIST_BEGIN
-    ADD_METHOD_TO(UserController::register_, "/api/auth/register", Post);
-    ADD_METHOD_TO(UserController::login, "/api/auth/login", Post);
-    ADD_METHOD_TO(UserController::logout, "/api/auth/logout", Post);
-    ADD_METHOD_TO(UserController::pgpChallenge, "/api/auth/pgp-challenge", Post);
-    ADD_METHOD_TO(UserController::pgpVerify, "/api/auth/pgp-verify", Post);
-    ADD_METHOD_TO(UserController::getCurrentUser, "/api/user/me", Get);
-    ADD_METHOD_TO(UserController::updateProfile, "/api/user/profile", Put);
-    ADD_METHOD_TO(UserController::updatePassword, "/api/user/password", Put);
-    ADD_METHOD_TO(UserController::togglePgpOnly, "/api/user/pgp-only", Put);
-    ADD_METHOD_TO(UserController::addPgpKey, "/api/user/pgp-key", Post);
-    ADD_METHOD_TO(UserController::getPgpKeys, "/api/user/pgp-keys", Get);
-    ADD_METHOD_TO(UserController::uploadAvatar, "/api/user/avatar", Post);
-    ADD_METHOD_TO(UserController::getProfile, "/api/users/{1}", Get);
-    ADD_METHOD_TO(UserController::getUserPgpKeys, "/api/users/{1}/pgp-keys", Get);
-    ADD_METHOD_TO(UserController::updateColor, "/api/user/color", Put);
-    ADD_METHOD_TO(UserController::getAvailableColors, "/api/colors/available", Get);
-    METHOD_LIST_END
-
-    void register_(const HttpRequestPtr &req,
-                  std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void login(const HttpRequestPtr &req,
-               std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void logout(const HttpRequestPtr &req,
-                std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void pgpChallenge(const HttpRequestPtr &req,
-                     std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void pgpVerify(const HttpRequestPtr &req,
-                   std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getCurrentUser(const HttpRequestPtr &req,
-                       std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void updateProfile(const HttpRequestPtr &req,
-                      std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void updatePassword(const HttpRequestPtr &req,
-                       std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void togglePgpOnly(const HttpRequestPtr &req,
-                      std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void addPgpKey(const HttpRequestPtr &req,
-                   std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getPgpKeys(const HttpRequestPtr &req,
-                    std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void uploadAvatar(const HttpRequestPtr &req,
-                     std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getProfile(const HttpRequestPtr &req,
-                   std::function<void(const HttpResponsePtr &)> &&callback,
-                   const std::string &username);
-    
-    void getUserPgpKeys(const HttpRequestPtr &req,
-                       std::function<void(const HttpResponsePtr &)> &&callback,
-                       const std::string &username);
-    
-    void updateColor(const HttpRequestPtr &req,
-                    std::function<void(const HttpResponsePtr &)> &&callback);
-    
-    void getAvailableColors(const HttpRequestPtr &req,
-                           std::function<void(const HttpResponsePtr &)> &&callback);
-
-private:
-    UserInfo getUserFromRequest(const HttpRequestPtr &req);
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\models\Realm.h ###
-
-#pragma once
-#include <string>
-#include <chrono>
-
-struct Realm {
-    int64_t id;
-    int64_t userId;
-    std::string name;
-    std::string streamKey;
-    bool isActive;
-    bool isLive;
-    int64_t viewerCount;
-    std::chrono::system_clock::time_point createdAt;
-    std::chrono::system_clock::time_point updatedAt;
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\models\StreamKey.h ###
-
-#pragma once
-#include <string>
-#include <chrono>
-
-struct StreamKey {
-    int64_t id;
-    int64_t user_id;
-    std::string key;
-    bool is_active;
-    std::chrono::system_clock::time_point created_at;
-    std::chrono::system_clock::time_point updated_at;
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\AuthService.cpp ###
-
-#include "AuthService.h"
-#include "DatabaseService.h"
-#include "RedisHelper.h"
-#include <drogon/utils/Utilities.h>
-#include <regex>
-#include <random>
-#include <functional>
-#include <memory>
-#include <fstream>
-#include <sstream>
-#include <cstdlib>
-
-using namespace drogon;
-using namespace drogon::orm;
-
-bool AuthService::validatePassword(const std::string& password, std::string& error) {
-    if (password.length() < 8) {
-        error = "Password must be at least 8 characters long";
-        return false;
-    }
-    
-    if (!std::regex_search(password, std::regex("[0-9]"))) {
-        error = "Password must contain at least one number";
-        return false;
-    }
-    
-    if (!std::regex_search(password, std::regex("[!@#$%^&*(),.?\":{}|<>]"))) {
-        error = "Password must contain at least one symbol";
-        return false;
-    }
-    
-    return true;
-}
-
-// Helper function to execute GPG commands
-std::string executeGpgCommand(const std::string& command) {
-    std::array<char, 128> buffer;
-    std::string result;
-    
-    FILE* pipe = popen(command.c_str(), "r");
-    if (!pipe) {
-        LOG_ERROR << "Failed to execute GPG command: " << command;
-        return "";
-    }
-    
-    while (fgets(buffer.data(), buffer.size(), pipe) != nullptr) {
-        result += buffer.data();
-    }
-    
-    int exitCode = pclose(pipe);
-    
-    // Exit code is returned as status << 8, so we need to extract the actual exit code
-    int actualExitCode = WEXITSTATUS(exitCode);
-    
-    if (actualExitCode != 0) {
-        LOG_ERROR << "GPG command failed with exit code: " << actualExitCode 
-                  << " for command: " << command
-                  << " output: " << result;
-        // Don't return empty string immediately - sometimes GPG returns non-zero but still works
-    }
-    
-    return result;
-}
-
-// Server-side PGP signature verification
-bool verifyPgpSignature(const std::string& message, const std::string& signature, const std::string& publicKey) {
-    try {
-        // Create temporary directory for GPG operations
-        std::string tmpDir = "/tmp/pgp_verify_" + drogon::utils::genRandomString(8);
-        std::string mkdirCmd = "mkdir -p " + tmpDir;
-        if (system(mkdirCmd.c_str()) != 0) {
-            LOG_ERROR << "Failed to create temporary directory: " << tmpDir;
-            return false;
-        }
-        
-        // Create GPG home directory
-        std::string keyringDir = tmpDir + "/gnupg";
-        std::string mkdirGpgCmd = "mkdir -p " + keyringDir + " && chmod 700 " + keyringDir;
-        if (system(mkdirGpgCmd.c_str()) != 0) {
-            LOG_ERROR << "Failed to create GPG home directory: " << keyringDir;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
-            return false;
-        }
-        
-        // Write files
-        std::string messageFile = tmpDir + "/message.txt";
-        std::string sigFile = tmpDir + "/signature.asc";
-        std::string pubkeyFile = tmpDir + "/pubkey.asc";
-        
-        // Write message file
-        std::ofstream msgOut(messageFile);
-        if (!msgOut) {
-            LOG_ERROR << "Failed to create message file: " << messageFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
-            return false;
-        }
-        msgOut << message;
-        msgOut.close();
-        
-        // Write signature file
-        std::ofstream sigOut(sigFile);
-        if (!sigOut) {
-            LOG_ERROR << "Failed to create signature file: " << sigFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
-            return false;
-        }
-        sigOut << signature;
-        sigOut.close();
-        
-        // Write public key file
-        std::ofstream keyOut(pubkeyFile);
-        if (!keyOut) {
-            LOG_ERROR << "Failed to create public key file: " << pubkeyFile;
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
-            return false;
-        }
-        keyOut << publicKey;
-        keyOut.close();
-        
-        // Initialize GPG (create trustdb if needed)
-        std::string initCmd = "GNUPGHOME=" + keyringDir + " gpg --batch --yes --list-keys 2>&1";
-        executeGpgCommand(initCmd); // This will create the trustdb if it doesn't exist
-        
-        // Import the public key to the temporary keyring
-        // Use --trust-model always to avoid trust issues
-        std::string importCmd = "GNUPGHOME=" + keyringDir + 
-                               " gpg --batch --yes --trust-model always --import " + pubkeyFile + " 2>&1";
-        std::string importResult = executeGpgCommand(importCmd);
-        
-        LOG_DEBUG << "GPG import result: " << importResult;
-        
-        // Check if import was successful (be more lenient with the check)
-        bool importSuccess = (importResult.find("imported") != std::string::npos) ||
-                           (importResult.find("unchanged") != std::string::npos) ||
-                           (importResult.find("processed: 1") != std::string::npos) ||
-                           (importResult.find("public key") != std::string::npos);
-        
-        if (!importSuccess) {
-            LOG_ERROR << "Failed to import public key. Import output: " << importResult;
-            // Try to get more information about what went wrong
-            std::string debugCmd = "GNUPGHOME=" + keyringDir + " gpg --list-keys 2>&1";
-            std::string debugResult = executeGpgCommand(debugCmd);
-            LOG_ERROR << "GPG keyring state: " << debugResult;
-            
-            // Cleanup
-            std::string cleanupCmd = "rm -rf " + tmpDir;
-            system(cleanupCmd.c_str());
-            return false;
-        }
-        
-        // Verify the signature
-        // Use --trust-model always to avoid trust issues
-        std::string verifyCmd = "GNUPGHOME=" + keyringDir + 
-                                " gpg --batch --yes --trust-model always --verify " + 
-                                sigFile + " " + messageFile + " 2>&1";
-        std::string verifyResult = executeGpgCommand(verifyCmd);
-        
-        LOG_DEBUG << "GPG verify result: " << verifyResult;
-        
-        // Check if verification succeeded (check both English and potential localized messages)
-        bool verified = (verifyResult.find("Good signature") != std::string::npos) ||
-                       (verifyResult.find("gpg: Good signature") != std::string::npos) ||
-                       (verifyResult.find("Signature made") != std::string::npos && 
-                        verifyResult.find("BAD signature") == std::string::npos);
-        
-        if (!verified) {
-            LOG_WARN << "Signature verification failed. Verify output: " << verifyResult;
-        } else {
-            LOG_INFO << "Signature verification successful for challenge";
-        }
-        
-        // Cleanup temporary files
-        std::string cleanupCmd = "rm -rf " + tmpDir;
-        system(cleanupCmd.c_str());
-        
-        return verified;
-        
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception during signature verification: " << e.what();
-        return false;
-    }
-}
-
-void AuthService::generateUniqueColor(std::function<void(const std::string& color)> callback) {
-    try {
-        auto dbClient = app().getDbClient();
-        
-        // Create a structure to hold the state for recursive attempts
-        struct ColorGenerator : public std::enable_shared_from_this<ColorGenerator> {
-            std::mt19937 gen;
-            std::uniform_int_distribution<> dis;
-            std::function<void(const std::string&)> callback;
-            DbClientPtr dbClient;
-            int attempts;
-            
-            ColorGenerator(std::function<void(const std::string&)> cb, DbClientPtr db) 
-                : gen(std::random_device{}()), 
-                  dis(0, 0xFFFFFF),
-                  callback(cb),
-                  dbClient(db),
-                  attempts(0) {}
-            
-            void tryGenerate() {
-                auto self = shared_from_this();
-                
-                // Limit attempts to prevent infinite recursion
-                if (++attempts > 100) {
-                    LOG_ERROR << "Failed to generate unique color after 100 attempts";
-                    callback("#561D5E");  // Fallback to default
-                    return;
-                }
-                
-                // Generate random color
-                int colorValue = dis(gen);
-                char colorHex[8];
-                snprintf(colorHex, sizeof(colorHex), "#%06X", colorValue);
-                std::string color(colorHex);
-                
-                // Check if color exists
-                *dbClient << "SELECT id FROM users WHERE user_color = $1 LIMIT 1"
-                          << color
-                          >> [self, color](const Result& r) {
-                              if (r.empty()) {
-                                  // Color is unique, use it
-                                  self->callback(color);
-                              } else {
-                                  // Color exists, try again
-                                  self->tryGenerate();
-                              }
-                          }
-                          >> [self](const DrogonDbException& e) {
-                              LOG_ERROR << "Database error checking color: " << e.base().what();
-                              // Fallback to a default color
-                              self->callback("#561D5E");
-                          };
-            }
-        };
-        
-        auto generator = std::make_shared<ColorGenerator>(callback, dbClient);
-        generator->tryGenerate();
-        
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in generateUniqueColor: " << e.what();
-        callback("#561D5E");  // Fallback to default
-    }
-}
-
-void AuthService::updateUserColor(int64_t userId, const std::string& newColor,
-                                 std::function<void(bool, const std::string&, const std::string&)> callback) {
-    try {
-        // Validate color format
-        if (newColor.length() != 7 || newColor[0] != '#') {
-            callback(false, "Invalid color format. Use #RRGGBB", "");
-            return;
-        }
-        
-        // Check if color is valid hex
-        for (size_t i = 1; i < 7; i++) {
-            if (!std::isxdigit(newColor[i])) {
-                callback(false, "Invalid color format. Use #RRGGBB", "");
-                return;
-            }
-        }
-        
-        auto dbClient = app().getDbClient();
-        
-        // Check if color is already taken
-        *dbClient << "SELECT id FROM users WHERE user_color = $1 AND id != $2 LIMIT 1"
-                  << newColor << userId
-                  >> [dbClient, userId, newColor, callback](const Result& r) {
-                      if (!r.empty()) {
-                          callback(false, "This color is already taken", "");
-                          return;
-                      }
-                      
-                      // Update the color
-                      *dbClient << "UPDATE users SET user_color = $1 WHERE id = $2 RETURNING user_color"
-                               << newColor << userId
-                               >> [callback, newColor](const Result& r2) {
-                                   if (!r2.empty()) {
-                                       callback(true, "", newColor);
-                                   } else {
-                                       callback(false, "Failed to update color", "");
-                                   }
-                               }
-                               >> [callback](const DrogonDbException& e) {
-                                   LOG_ERROR << "Failed to update color: " << e.base().what();
-                                   callback(false, "Database error", "");
-                               };
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(false, "Database error", "");
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in updateUserColor: " << e.what();
-        callback(false, "Internal server error", "");
-    }
-}
-
-void AuthService::registerUser(const std::string& username, const std::string& password,
-                              const std::string& publicKey, const std::string& fingerprint,
-                              std::function<void(bool, const std::string&, int64_t)> callback) {
-    try {
-        LOG_DEBUG << "Starting user registration for: " << username;
-        
-        // Validate username
-        if (username.length() < 3 || username.length() > 30) {
-            callback(false, "Username must be between 3 and 30 characters", 0);
-            return;
-        }
-        
-        if (!std::regex_match(username, std::regex("^[a-zA-Z0-9_]+$"))) {
-            callback(false, "Username can only contain letters, numbers, and underscores", 0);
-            return;
-        }
-        
-        // Validate password
-        std::string error;
-        if (!validatePassword(password, error)) {
-            callback(false, error, 0);
-            return;
-        }
-        
-        LOG_DEBUG << "Validation passed, generating unique color";
-        
-        // Generate unique color first
-        generateUniqueColor([this, username, password, publicKey, fingerprint, callback](const std::string& color) {
-            try {
-                LOG_DEBUG << "Got unique color: " << color << ", checking username availability";
-                
-                auto dbClient = app().getDbClient();
-                if (!dbClient) {
-                    LOG_ERROR << "Database client is null";
-                    callback(false, "Database connection error", 0);
-                    return;
-                }
-                
-                // Check if username exists
-                *dbClient << "SELECT id FROM users WHERE username = $1 LIMIT 1"
-                          << username
-                          >> [dbClient, username, password, publicKey, fingerprint, color, callback](const Result& r) {
-                              try {
-                                  if (!r.empty()) {
-                                      LOG_WARN << "Username already exists: " << username;
-                                      callback(false, "Username already exists", 0);
-                                      return;
-                                  }
-                                  
-                                  LOG_DEBUG << "Username available, checking fingerprint";
-                                  
-                                  // Check if fingerprint exists
-                                  *dbClient << "SELECT id FROM pgp_keys WHERE fingerprint = $1 LIMIT 1"
-                                           << fingerprint
-                                           >> [dbClient, username, password, publicKey, fingerprint, color, callback](const Result& r2) {
-                                               try {
-                                                   if (!r2.empty()) {
-                                                       LOG_WARN << "Fingerprint already exists";
-                                                       callback(false, "This PGP key is already registered", 0);
-                                                       return;
-                                                   }
-                                                   
-                                                   LOG_DEBUG << "Fingerprint available, hashing password";
-                                                   
-                                                   // Hash password
-                                                   std::string hash;
-                                                   try {
-                                                       hash = BCrypt::generateHash(password);
-                                                   } catch (const std::exception& e) {
-                                                       LOG_ERROR << "Failed to hash password: " << e.what();
-                                                       callback(false, "Failed to process password", 0);
-                                                       return;
-                                                   }
-                                                   
-                                                   LOG_DEBUG << "Password hashed, inserting user";
-                                                   
-                                                   // Insert user first (without transaction for simplicity)
-                                                   *dbClient << "INSERT INTO users (username, password_hash, is_admin, is_streamer, is_pgp_only, user_color) "
-                                                            "VALUES ($1, $2, false, false, false, $3) RETURNING id"
-                                                          << username << hash << color
-                                                          >> [dbClient, publicKey, fingerprint, callback, username](const Result& r3) {
-                                                              try {
-                                                                  if (r3.empty()) {
-                                                                      LOG_ERROR << "Failed to insert user";
-                                                                      callback(false, "Failed to create user", 0);
-                                                                      return;
-                                                                  }
-                                                                  
-                                                                  int64_t userId = r3[0]["id"].as<int64_t>();
-                                                                  LOG_INFO << "User created with ID: " << userId;
-                                                                  
-                                                                  // Insert PGP key
-                                                                  *dbClient << "INSERT INTO pgp_keys (user_id, public_key, fingerprint) VALUES ($1, $2, $3)"
-                                                                           << userId << publicKey << fingerprint
-                                                                           >> [callback, userId, username](const Result&) {
-                                                                               LOG_INFO << "User registration complete for: " << username << " (ID: " << userId << ")";
-                                                                               callback(true, "", userId);
-                                                                           }
-                                                                           >> [dbClient, userId, callback](const DrogonDbException& e) {
-                                                                               LOG_ERROR << "Failed to insert PGP key: " << e.base().what();
-                                                                               // Try to clean up the user
-                                                                               *dbClient << "DELETE FROM users WHERE id = $1" << userId >> [](const Result&) {} >> [](const DrogonDbException&) {};
-                                                                               callback(false, "Failed to save PGP key", 0);
-                                                                           };
-                                                              } catch (const std::exception& e) {
-                                                                  LOG_ERROR << "Exception processing user insert result: " << e.what();
-                                                                  callback(false, "Registration failed", 0);
-                                                              }
-                                                          }
-                                                          >> [callback](const DrogonDbException& e) {
-                                                              LOG_ERROR << "Failed to insert user: " << e.base().what();
-                                                              callback(false, "Registration failed", 0);
-                                                          };
-                                               } catch (const std::exception& e) {
-                                                   LOG_ERROR << "Exception in fingerprint check callback: " << e.what();
-                                                   callback(false, "Registration failed", 0);
-                                               }
-                                           }
-                                           >> [callback](const DrogonDbException& e) {
-                                               LOG_ERROR << "Database error checking fingerprint: " << e.base().what();
-                                               callback(false, "Database error", 0);
-                                           };
-                              } catch (const std::exception& e) {
-                                  LOG_ERROR << "Exception in username check callback: " << e.what();
-                                  callback(false, "Registration failed", 0);
-                              }
-                          }
-                          >> [callback](const DrogonDbException& e) {
-                              LOG_ERROR << "Database error checking username: " << e.base().what();
-                              callback(false, "Database error", 0);
-                          };
-            } catch (const std::exception& e) {
-                LOG_ERROR << "Exception in color generation callback: " << e.what();
-                callback(false, "Registration failed", 0);
-            }
-        });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in registerUser: " << e.what();
-        callback(false, "Registration failed", 0);
-    }
-}
-
-void AuthService::loginUser(const std::string& username, const std::string& password,
-                           std::function<void(bool, const std::string&, const UserInfo&)> callback) {
-    try {
-        auto dbClient = app().getDbClient();
-        if (!dbClient) {
-            LOG_ERROR << "Database client is null";
-            callback(false, "", UserInfo{});
-            return;
-        }
-        
-        *dbClient << "SELECT id, username, password_hash, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
-                     "FROM users WHERE username = $1 LIMIT 1"
-                  << username
-                  >> [password, callback, this](const Result& r) {
-                      try {
-                          if (r.empty()) {
-                              callback(false, "", UserInfo{});
-                              return;
-                          }
-                          
-                          // Check if PGP-only is enabled BEFORE password validation
-                          bool isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                          
-                          if (isPgpOnly) {
-                              // Return a specific error for PGP-only accounts
-                              callback(false, "PGP-only login enabled for this account", UserInfo{});
-                              return;
-                          }
-                          
-                          std::string hash = r[0]["password_hash"].as<std::string>();
-                          
-                          bool valid = false;
-                          try {
-                              valid = BCrypt::validatePassword(password, hash);
-                          } catch (const std::exception& e) {
-                              LOG_ERROR << "Failed to validate password: " << e.what();
-                              callback(false, "", UserInfo{});
-                              return;
-                          }
-                          
-                          if (!valid) {
-                              callback(false, "", UserInfo{});
-                              return;
-                          }
-                          
-                          UserInfo user;
-                          user.id = r[0]["id"].as<int64_t>();
-                          user.username = r[0]["username"].as<std::string>();
-                          user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
-                          user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
-                          user.isPgpOnly = isPgpOnly;
-                          user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
-                          user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                          user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
-                          user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                          
-                          std::string token = generateToken(user);
-                          callback(true, token, user);
-                      } catch (const std::exception& e) {
-                          LOG_ERROR << "Exception in login callback: " << e.what();
-                          callback(false, "", UserInfo{});
-                      }
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(false, "", UserInfo{});
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in loginUser: " << e.what();
-        callback(false, "", UserInfo{});
-    }
-}
-
-void AuthService::initiatePgpLogin(const std::string& username,
-                                  std::function<void(bool, const std::string&, const std::string&)> callback) {
-    try {
-        auto dbClient = app().getDbClient();
-        if (!dbClient) {
-            LOG_ERROR << "Database client is null";
-            callback(false, "", "");
-            return;
-        }
-        
-        // Generate random challenge
-        auto bytes = drogon::utils::genRandomString(32);
-        std::string challenge = drogon::utils::base64Encode(
-            reinterpret_cast<const unsigned char*>(bytes.data()), bytes.length()
-        );
-        
-        // Store challenge in Redis with 5 minute TTL
-        RedisHelper::storeKeyAsync("pgp_challenge:" + username, challenge, 300,
-            [dbClient, username, challenge, callback](bool stored) {
-                if (!stored) {
-                    callback(false, "", "");
-                    return;
-                }
-                
-                // Get user's latest public key
-                *dbClient << "SELECT pk.public_key FROM pgp_keys pk "
-                            "JOIN users u ON pk.user_id = u.id "
-                            "WHERE u.username = $1 "
-                            "ORDER BY pk.created_at DESC LIMIT 1"
-                          << username
-                          >> [callback, challenge](const Result& r) {
-                              if (r.empty()) {
-                                  callback(false, "", "");
-                                  return;
-                              }
-                              
-                              std::string publicKey = r[0]["public_key"].as<std::string>();
-                              callback(true, challenge, publicKey);
-                          }
-                          >> [callback](const DrogonDbException& e) {
-                              LOG_ERROR << "Database error: " << e.base().what();
-                              callback(false, "", "");
-                          };
-            }
-        );
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in initiatePgpLogin: " << e.what();
-        callback(false, "", "");
-    }
-}
-
-void AuthService::verifyPgpLogin(const std::string& username, const std::string& signature, 
-                                const std::string& challenge,
-                                std::function<void(bool, const std::string&, const UserInfo&)> callback) {
-    try {
-        // Get stored challenge from Redis
-        RedisHelper::getKeyAsync("pgp_challenge:" + username,
-            [username, signature, challenge, callback, this](const std::string& storedChallenge) {
-                try {
-                    if (storedChallenge.empty() || storedChallenge != challenge) {
-                        LOG_WARN << "Challenge mismatch for user: " << username;
-                        callback(false, "", UserInfo{});
-                        return;
-                    }
-                    
-                    // Delete challenge after use
-                    RedisHelper::deleteKeyAsync("pgp_challenge:" + username, [](bool) {});
-                    
-                    // Get user's public key and verify signature
-                    auto dbClient = app().getDbClient();
-                    if (!dbClient) {
-                        LOG_ERROR << "Database client is null";
-                        callback(false, "", UserInfo{});
-                        return;
-                    }
-                    
-                    *dbClient << "SELECT pk.public_key, u.id, u.username, u.is_admin, u.is_streamer, "
-                                "u.is_pgp_only, u.bio, u.avatar_url, u.pgp_only_enabled_at, u.user_color "
-                                "FROM pgp_keys pk JOIN users u ON pk.user_id = u.id "
-                                "WHERE u.username = $1 ORDER BY pk.created_at DESC LIMIT 1"
-                              << username
-                              >> [callback, signature, challenge, this](const Result& r) {
-                                  try {
-                                      if (r.empty()) {
-                                          LOG_WARN << "No PGP key found for user";
-                                          callback(false, "", UserInfo{});
-                                          return;
-                                      }
-                                      
-                                      std::string publicKey = r[0]["public_key"].as<std::string>();
-                                      
-                                      // CRITICAL: Server-side signature verification
-                                      bool signatureValid = verifyPgpSignature(challenge, signature, publicKey);
-                                      
-                                      if (!signatureValid) {
-                                          LOG_WARN << "Invalid PGP signature for user";
-                                          callback(false, "Invalid signature", UserInfo{});
-                                          return;
-                                      }
-                                      
-                                      LOG_INFO << "PGP signature verified successfully for user";
-                                      
-                                      UserInfo user;
-                                      user.id = r[0]["id"].as<int64_t>();
-                                      user.username = r[0]["username"].as<std::string>();
-                                      user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
-                                      user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
-                                      user.isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                                      user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
-                                      user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                                      user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
-                                      user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                                      
-                                      std::string token = generateToken(user);
-                                      callback(true, token, user);
-                                  } catch (const std::exception& e) {
-                                      LOG_ERROR << "Exception processing user data: " << e.what();
-                                      callback(false, "", UserInfo{});
-                                  }
-                              }
-                              >> [callback](const DrogonDbException& e) {
-                                  LOG_ERROR << "Database error: " << e.base().what();
-                                  callback(false, "", UserInfo{});
-                              };
-                } catch (const std::exception& e) {
-                    LOG_ERROR << "Exception in Redis callback: " << e.what();
-                    callback(false, "", UserInfo{});
-                }
-            }
-        );
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in verifyPgpLogin: " << e.what();
-        callback(false, "", UserInfo{});
-    }
-}
-
-std::string AuthService::generateToken(const UserInfo& user) {
-    try {
-        if (jwtSecret_.empty()) {
-            const char* envSecret = std::getenv("JWT_SECRET");
-            jwtSecret_ = envSecret ? std::string(envSecret) : "your-jwt-secret";
-        }
-        
-        auto token = jwt::create()
-            .set_issuer("streaming-app")
-            .set_type("JWS")
-            .set_issued_at(std::chrono::system_clock::now())
-            .set_expires_at(std::chrono::system_clock::now() + std::chrono::hours(24))
-            .set_payload_claim("user_id", jwt::claim(std::to_string(user.id)))
-            .set_payload_claim("username", jwt::claim(user.username))
-            .set_payload_claim("is_admin", jwt::claim(std::to_string(user.isAdmin)))
-            .set_payload_claim("is_streamer", jwt::claim(std::to_string(user.isStreamer)))
-            .set_payload_claim("color_code", jwt::claim(
-                user.colorCode.empty() ? "#561D5E" : user.colorCode
-            ))  // Ensure color is never empty
-            .sign(jwt::algorithm::hs256{jwtSecret_});
-        
-        return token;
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Failed to generate token: " << e.what();
-        return "";
-    }
-}
-
-bool AuthService::validateToken(const std::string& token, UserInfo& userInfo) {
-    try {
-        if (jwtSecret_.empty()) {
-            const char* envSecret = std::getenv("JWT_SECRET");
-            jwtSecret_ = envSecret ? std::string(envSecret) : "your-jwt-secret";
-        }
-        
-        auto decoded = jwt::decode(token);
-        
-        auto verifier = jwt::verify()
-            .allow_algorithm(jwt::algorithm::hs256{jwtSecret_})
-            .with_issuer("streaming-app");
-        
-        verifier.verify(decoded);
-        
-        userInfo.id = std::stoll(decoded.get_payload_claim("user_id").as_string());
-        userInfo.username = decoded.get_payload_claim("username").as_string();
-        userInfo.isAdmin = decoded.get_payload_claim("is_admin").as_string() == "1";
-        userInfo.isStreamer = decoded.has_payload_claim("is_streamer") ? 
-            decoded.get_payload_claim("is_streamer").as_string() == "1" : false;
-        
-        // Get color from token if available, otherwise will need to fetch from DB
-        if (decoded.has_payload_claim("color_code")) {
-            userInfo.colorCode = decoded.get_payload_claim("color_code").as_string();
-        } else {
-            // For older tokens without color, default value
-            userInfo.colorCode = "#561D5E";
-        }
-        
-        return true;
-    } catch (const std::exception& e) {
-        LOG_DEBUG << "Token validation failed: " << e.what();
-        return false;
-    }
-}
-
-void AuthService::updatePassword(int64_t userId, const std::string& oldPassword, 
-                                const std::string& newPassword,
-                                std::function<void(bool, const std::string&)> callback) {
-    try {
-        // Validate new password
-        std::string error;
-        if (!validatePassword(newPassword, error)) {
-            callback(false, error);
-            return;
-        }
-        
-        auto dbClient = app().getDbClient();
-        if (!dbClient) {
-            LOG_ERROR << "Database client is null";
-            callback(false, "Database connection error");
-            return;
-        }
-        
-        // Verify old password
-        *dbClient << "SELECT password_hash FROM users WHERE id = $1 LIMIT 1"
-                  << userId
-                  >> [oldPassword, newPassword, userId, dbClient, callback](const Result& r) {
-                      try {
-                          if (r.empty()) {
-                              callback(false, "User not found");
-                              return;
-                          }
-                          
-                          std::string hash = r[0]["password_hash"].as<std::string>();
-                          
-                          bool valid = false;
-                          try {
-                              valid = BCrypt::validatePassword(oldPassword, hash);
-                          } catch (const std::exception& e) {
-                              LOG_ERROR << "Failed to validate password: " << e.what();
-                              callback(false, "Password validation error");
-                              return;
-                          }
-                          
-                          if (!valid) {
-                              callback(false, "Incorrect password");
-                              return;
-                          }
-                          
-                          // Update password
-                          std::string newHash;
-                          try {
-                              newHash = BCrypt::generateHash(newPassword);
-                          } catch (const std::exception& e) {
-                              LOG_ERROR << "Failed to hash new password: " << e.what();
-                              callback(false, "Failed to process new password");
-                              return;
-                          }
-                          
-                          *dbClient << "UPDATE users SET password_hash = $1 WHERE id = $2"
-                                   << newHash << userId
-                                   >> [callback](const Result&) {
-                                       callback(true, "");
-                                   }
-                                   >> [callback](const DrogonDbException& e) {
-                                       LOG_ERROR << "Failed to update password: " << e.base().what();
-                                       callback(false, "Failed to update password");
-                                   };
-                      } catch (const std::exception& e) {
-                          LOG_ERROR << "Exception in password update callback: " << e.what();
-                          callback(false, "Failed to update password");
-                      }
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(false, "Database error");
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in updatePassword: " << e.what();
-        callback(false, "Failed to update password");
-    }
-}
-
-void AuthService::fetchUserInfo(int64_t userId, std::function<void(bool, const UserInfo&)> callback) {
-    try {
-        auto dbClient = app().getDbClient();
-        if (!dbClient) {
-            LOG_ERROR << "Database client is null";
-            callback(false, UserInfo{});
-            return;
-        }
-        
-        *dbClient << "SELECT id, username, is_admin, is_streamer, is_pgp_only, bio, avatar_url, pgp_only_enabled_at, user_color "
-                     "FROM users WHERE id = $1 LIMIT 1"
-                  << userId
-                  >> [callback](const Result& r) {
-                      try {
-                          if (r.empty()) {
-                              callback(false, UserInfo{});
-                              return;
-                          }
-                          
-                          UserInfo user;
-                          user.id = r[0]["id"].as<int64_t>();
-                          user.username = r[0]["username"].as<std::string>();
-                          user.isAdmin = r[0]["is_admin"].isNull() ? false : r[0]["is_admin"].as<bool>();
-                          user.isStreamer = r[0]["is_streamer"].isNull() ? false : r[0]["is_streamer"].as<bool>();
-                          user.isPgpOnly = r[0]["is_pgp_only"].isNull() ? false : r[0]["is_pgp_only"].as<bool>();
-                          user.bio = r[0]["bio"].isNull() ? "" : r[0]["bio"].as<std::string>();
-                          user.avatarUrl = r[0]["avatar_url"].isNull() ? "" : r[0]["avatar_url"].as<std::string>();
-                          user.pgpOnlyEnabledAt = r[0]["pgp_only_enabled_at"].isNull() ? "" : r[0]["pgp_only_enabled_at"].as<std::string>();
-                          user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
-                          
-                          callback(true, user);
-                      } catch (const std::exception& e) {
-                          LOG_ERROR << "Exception processing user data: " << e.what();
-                          callback(false, UserInfo{});
-                      }
-                  }
-                  >> [callback](const DrogonDbException& e) {
-                      LOG_ERROR << "Database error: " << e.base().what();
-                      callback(false, UserInfo{});
-                  };
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Exception in fetchUserInfo: " << e.what();
-        callback(false, UserInfo{});
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\AuthService.h ###
-
-#pragma once
-#include <string>
-#include <functional>
-#include <memory>
-#include <jwt-cpp/jwt.h>
-#include <bcrypt/BCrypt.hpp>
-
-struct UserInfo {
-    int64_t id = 0;
-    std::string username;
-    bool isAdmin = false;
-    bool isStreamer = false;
-    bool isPgpOnly = false;
-    std::string bio;
-    std::string avatarUrl;
-    std::string pgpOnlyEnabledAt;
-    std::string colorCode;
-};
-
-class AuthService {
-public:
-    static AuthService& getInstance() {
-        static AuthService instance;
-        return instance;
-    }
-    
-    void registerUser(const std::string& username, const std::string& password,
-                     const std::string& publicKey, const std::string& fingerprint,
-                     std::function<void(bool, const std::string&, int64_t)> callback);
-    
-    void loginUser(const std::string& username, const std::string& password,
-                  std::function<void(bool, const std::string&, const UserInfo&)> callback);
-    
-    void initiatePgpLogin(const std::string& username,
-                         std::function<void(bool, const std::string&, const std::string&)> callback);
-    
-    void verifyPgpLogin(const std::string& username, const std::string& signature, 
-                       const std::string& challenge,
-                       std::function<void(bool, const std::string&, const UserInfo&)> callback);
-    
-    std::string generateToken(const UserInfo& user);
-    bool validateToken(const std::string& token, UserInfo& userInfo);
-    
-    // New method to fetch complete user info including color
-    void fetchUserInfo(int64_t userId, std::function<void(bool, const UserInfo&)> callback);
-    
-    void updatePassword(int64_t userId, const std::string& oldPassword, 
-                       const std::string& newPassword,
-                       std::function<void(bool, const std::string&)> callback);
-    
-    void updateUserColor(int64_t userId, const std::string& newColor,
-                        std::function<void(bool, const std::string&, const std::string&)> callback);
-    
-    void generateUniqueColor(std::function<void(const std::string& color)> callback);
-
-private:
-    AuthService() = default;
-    std::string jwtSecret_;
-    
-    bool validatePassword(const std::string& password, std::string& error);
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\CorsMiddleware.h ###
-
-#pragma once
-#include <drogon/drogon.h>
-
-namespace middleware {
-
-class CorsMiddleware {
-public:
-    struct Config {
-        std::vector<std::string> allowOrigins = {"*"};
-        std::vector<std::string> allowMethods = {"GET", "POST", "PUT", "DELETE", "OPTIONS"};
-        std::vector<std::string> allowHeaders = {"Content-Type", "Authorization"};
-        bool allowCredentials = true;
-        int maxAge = 86400;
-    };
-
-    static void enable(const Config& config = {}) {
-        using namespace drogon;
-        
-        auto cfg = std::make_shared<Config>(config);
-        
-        auto addHeaders = [cfg](const HttpResponsePtr &resp, const HttpRequestPtr &req) {
-            std::string origin = req->getHeader("Origin");
-            
-            // Check if origin is allowed
-            bool allowed = false;
-            for (const auto& allowedOrigin : cfg->allowOrigins) {
-                if (allowedOrigin == "*" || allowedOrigin == origin) {
-                    allowed = true;
-                    break;
-                }
-            }
-            
-            if (allowed) {
-                resp->addHeader("Access-Control-Allow-Origin", origin.empty() ? "*" : origin);
-                resp->addHeader("Access-Control-Allow-Methods", joinStrings(cfg->allowMethods, ", "));
-                resp->addHeader("Access-Control-Allow-Headers", joinStrings(cfg->allowHeaders, ", "));
-                if (cfg->allowCredentials) {
-                    resp->addHeader("Access-Control-Allow-Credentials", "true");
-                }
-            }
-        };
-        
-        // Handle preflight requests
-        app().registerPreRoutingAdvice([cfg, addHeaders](const HttpRequestPtr &req,
-                                                        AdviceCallback &&acb,
-                                                        AdviceChainCallback &&accb) {
-            if (req->getMethod() == Options) {
-                auto resp = HttpResponse::newHttpResponse();
-                resp->setStatusCode(k204NoContent);
-                addHeaders(resp, req);
-                resp->addHeader("Access-Control-Max-Age", std::to_string(cfg->maxAge));
-                acb(resp);
-                return;
-            }
-            accb();
-        });
-        
-        // Add CORS headers to all responses
-        app().registerPostHandlingAdvice([addHeaders](const HttpRequestPtr &req,
-                                                     const HttpResponsePtr &resp) {
-            addHeaders(resp, req);
-        });
-    }
-
-private:
-    static std::string joinStrings(const std::vector<std::string>& strings, const std::string& delimiter) {
-        std::string result;
-        for (size_t i = 0; i < strings.size(); ++i) {
-            result += strings[i];
-            if (i < strings.size() - 1) result += delimiter;
-        }
-        return result;
-    }
-};
-
-} // namespace middleware
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\DatabaseService.cpp ###
-
-#include "DatabaseService.h"
-#include "../services/RedisHelper.h"
-#include <drogon/orm/DbClient.h>
-#include <random>
-#include <sstream>
-#include <iomanip>
-
-using namespace drogon;
-using namespace drogon::orm;
-
-namespace {
-    void storeKeyInRedis(const std::string& streamKey) {
-        // Store the stream key in Redis for validation (24 hour TTL)
-        bool stored = RedisHelper::storeKey("stream_key:" + streamKey, "1", 86400);
-        
-        if (stored) {
-            LOG_INFO << "Stored stream key in Redis: " << streamKey;
-        } else {
-            LOG_ERROR << "Failed to store key in Redis: " << streamKey;
-        }
-    }
-    
-    std::string generateStreamKey() {
-        std::random_device rd;
-        std::mt19937 gen(rd());
-        std::uniform_int_distribution<> dis(0, 255);
-        
-        std::stringstream ss;
-        for (int i = 0; i < 16; ++i) {
-            ss << std::hex << std::setw(2) << std::setfill('0') << dis(gen);
-        }
-        return ss.str();
-    }
-}
-
-void DatabaseService::initialize() {
-    LOG_INFO << "Initializing Database Service...";
-}
-
-void DatabaseService::getUserStreamKey(int64_t userId, 
-                                      std::function<void(bool, const std::string&)> callback) {
-    auto dbClient = drogon::app().getDbClient();
-    
-    *dbClient << "SELECT key FROM stream_keys WHERE user_id = $1 AND is_active = true"
-              << userId
-              >> [callback, userId, dbClient](const Result &r) {
-                  if (!r.empty()) {
-                      std::string key = r[0]["key"].as<std::string>();
-                      // Also store in Redis when retrieved
-                      storeKeyInRedis(key);
-                      callback(true, key);
-                  } else {
-                      // Generate new key for user
-                      std::string newKey = generateStreamKey();
-                      
-                      *dbClient << "INSERT INTO stream_keys (user_id, key, is_active) VALUES ($1, $2, true)"
-                               << userId << newKey
-                               >> [callback, newKey](const Result &) {
-                                   storeKeyInRedis(newKey);
-                                   callback(true, newKey);
-                               }
-                               >> [callback](const DrogonDbException &e) {
-                                   LOG_ERROR << "Failed to create stream key: " << e.base().what();
-                                   callback(false, "");
-                               };
-                  }
-              }
-              >> [callback](const DrogonDbException &e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(false, "");
-              };
-}
-
-void DatabaseService::updateUserStreamKey(int64_t userId, 
-                                         const std::string& newKey,
-                                         std::function<void(bool)> callback) {
-    auto dbClient = drogon::app().getDbClient();
-    
-    // Execute as separate queries instead of transaction for simplicity
-    *dbClient << "UPDATE stream_keys SET is_active = false WHERE user_id = $1"
-              << userId
-              >> [dbClient, userId, newKey, callback](const Result &) {
-                  // Insert new key
-                  *dbClient << "INSERT INTO stream_keys (user_id, key, is_active) VALUES ($1, $2, true)"
-                           << userId << newKey
-                           >> [callback, newKey](const Result &) {
-                               // Store new key in Redis
-                               storeKeyInRedis(newKey);
-                               callback(true);
-                           }
-                           >> [callback](const DrogonDbException &e) {
-                               LOG_ERROR << "Failed to insert new key: " << e.base().what();
-                               callback(false);
-                           };
-              }
-              >> [callback](const DrogonDbException &e) {
-                  LOG_ERROR << "Failed to deactivate old keys: " << e.base().what();
-                  callback(false);
-              };
-}
-
-void DatabaseService::validateStreamKey(const std::string& key,
-                                       std::function<void(bool)> callback) {
-    auto dbClient = drogon::app().getDbClient();
-    
-    *dbClient << "SELECT 1 FROM stream_keys WHERE key = $1 AND is_active = true"
-              << key
-              >> [callback, key](const Result &r) {
-                  bool valid = !r.empty();
-                  if (valid) {
-                      // Also store in Redis when validated
-                      storeKeyInRedis(key);
-                  }
-                  callback(valid);
-              }
-              >> [callback](const DrogonDbException &e) {
-                  LOG_ERROR << "Database error: " << e.base().what();
-                  callback(false);
-              };
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\DatabaseService.h ###
-
-#pragma once
-#include <drogon/drogon.h>
-#include <functional>
-#include <memory>
-
-class DatabaseService {
-public:
-    static DatabaseService& getInstance() {
-        static DatabaseService instance;
-        return instance;
-    }
-    
-    void initialize();
-    
-    void getUserStreamKey(int64_t userId, 
-                         std::function<void(bool, const std::string&)> callback);
-    
-    void updateUserStreamKey(int64_t userId, 
-                            const std::string& newKey,
-                            std::function<void(bool)> callback);
-    
-    void validateStreamKey(const std::string& key,
-                          std::function<void(bool)> callback);
-
-private:
-    DatabaseService() = default;
-    ~DatabaseService() = default;
-    DatabaseService(const DatabaseService&) = delete;
-    DatabaseService& operator=(const DatabaseService&) = delete;
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\OmeClient.h ###
-
-#pragma once
-#include <drogon/HttpClient.h>
-#include <drogon/utils/Utilities.h>
-#include <functional>
-#include <string>
-
-// TODO: Consider implementing OME webhooks for real-time updates instead of polling
-// OME supports webhooks for stream events (start/stop/etc) which would be more efficient
-// than polling. See: https://airensoft.gitbook.io/ovenmediaengine/access-control/admission-webhooks
-
-class OmeClient {
-public:
-    static OmeClient& getInstance() {
-        static OmeClient instance;
-        return instance;
-    }
-    
-    // Get list of active streams
-// In backend/src/services/OmeClient.h
-
-void getActiveStreams(std::function<void(bool, const Json::Value&)> callback) {
-    // Try the streams endpoint first
-    auto request = createRequest(drogon::Get, "/v1/vhosts/default/apps/app/streams");
-    
-    getClient()->sendRequest(request, [callback](drogon::ReqResult result, const drogon::HttpResponsePtr& response) {
-        if (result == drogon::ReqResult::Ok && response && response->getStatusCode() == drogon::k200OK) {
-            try {
-                Json::Value json = *response->getJsonObject();
-                LOG_DEBUG << "OME streams response: " << json.toStyledString();
-                
-                // OME might return the streams in different formats
-                // Sometimes it's {"response": ["stream1", "stream2"]}
-                // Sometimes it's {"response": {"streams": ["stream1", "stream2"]}}
-                if (json.isMember("response")) {
-                    callback(true, json);
-                } else {
-                    // Wrap the response if needed
-                    Json::Value wrapped;
-                    wrapped["response"] = json;
-                    callback(true, wrapped);
-                }
-            } catch (const std::exception& e) {
-                LOG_ERROR << "Failed to parse OME response: " << e.what();
-                Json::Value empty;
-                empty["response"] = Json::arrayValue;
-                callback(false, empty);
-            }
-        } else {
-            LOG_ERROR << "Failed to get active streams from OME";
-            Json::Value empty;
-            empty["response"] = Json::arrayValue;
-            callback(false, empty);
-        }
-    });
-}
-    
-    // Get stats for a specific stream
-    void getStreamStats(const std::string& streamKey, 
-                       std::function<void(bool, const Json::Value&)> callback) {
-        std::string path = "/v1/stats/current/vhosts/default/apps/app/streams/" + streamKey;
-        auto request = createRequest(drogon::Get, path);
-        
-        getClient()->sendRequest(request, [callback](drogon::ReqResult result, const drogon::HttpResponsePtr& response) {
-            if (result == drogon::ReqResult::Ok && response) {
-                if (response->getStatusCode() == drogon::k200OK) {
-                    try {
-                        Json::Value json = *response->getJsonObject();
-                        callback(true, json);
-                    } catch (const std::exception& e) {
-                        LOG_ERROR << "Failed to parse stats response: " << e.what();
-                        Json::Value empty;
-                        callback(false, empty);
-                    }
-                } else {
-                    // Not found or error - return empty but success (stream offline)
-                    Json::Value empty;
-                    callback(true, empty);
-                }
-            } else {
-                LOG_ERROR << "Request to OME failed";
-                Json::Value empty;
-                callback(false, empty);
-            }
-        });
-    }
-    
-    // Get detailed stream info including track metadata (resolution, codec, etc.)
-    void getStreamInfo(const std::string& streamKey,
-                      std::function<void(bool, const Json::Value&)> callback) {
-        std::string path = "/v1/vhosts/default/apps/app/streams/" + streamKey;
-        auto request = createRequest(drogon::Get, path);
-        
-        getClient()->sendRequest(request, [callback](drogon::ReqResult result, const drogon::HttpResponsePtr& response) {
-            if (result == drogon::ReqResult::Ok && response) {
-                if (response->getStatusCode() == drogon::k200OK) {
-                    try {
-                        Json::Value json = *response->getJsonObject();
-                        callback(true, json);
-                    } catch (const std::exception& e) {
-                        LOG_ERROR << "Failed to parse stream info response: " << e.what();
-                        Json::Value empty;
-                        callback(false, empty);
-                    }
-                } else {
-                    // Stream not found or error
-                    Json::Value empty;
-                    callback(false, empty);
-                }
-            } else {
-                LOG_ERROR << "Stream info request to OME failed";
-                Json::Value empty;
-                callback(false, empty);
-            }
-        });
-    }
-    
-    // Disconnect a stream
-    void disconnectStream(const std::string& streamId, 
-                         std::function<void(bool)> callback) {
-        std::string path = "/v1/vhosts/default/apps/app/streams/" + streamId;
-        auto request = createRequest(drogon::Delete, path);
-        
-        getClient()->sendRequest(request, [callback](drogon::ReqResult result, const drogon::HttpResponsePtr& response) {
-            bool success = (result == drogon::ReqResult::Ok && 
-                           response && 
-                           response->getStatusCode() == drogon::k200OK);
-            callback(success);
-        });
-    }
-    
-private:
-    OmeClient() = default;
-    ~OmeClient() = default;
-    OmeClient(const OmeClient&) = delete;
-    OmeClient& operator=(const OmeClient&) = delete;
-    
-    std::string getBaseUrl() {
-        // Check environment variable first
-        const char* envUrl = std::getenv("OME_API_URL");
-        if (envUrl) {
-            return std::string(envUrl);
-        }
-        
-        // Try to get from Drogon config
-        try {
-            const auto& config = drogon::app().getCustomConfig();
-            if (config.isMember("ome") && config["ome"].isMember("api_url")) {
-                return config["ome"]["api_url"].asString();
-            }
-        } catch (...) {
-            // Config not available
-        }
-        
-        return "http://ovenmediaengine:8081"; // Default
-    }
-    
-    std::string getApiToken() {
-        // Check environment variable first
-        const char* envToken = std::getenv("OME_API_TOKEN");
-        if (envToken) {
-            return std::string(envToken);
-        }
-        
-        // Try to get from Drogon config
-        try {
-            const auto& config = drogon::app().getCustomConfig();
-            if (config.isMember("ome") && config["ome"].isMember("api_token")) {
-                return config["ome"]["api_token"].asString();
-            }
-        } catch (...) {
-            // Config not available
-        }
-        
-        return "your-api-token"; // Default
-    }
-    
-    drogon::HttpClientPtr getClient() {
-        return drogon::HttpClient::newHttpClient(getBaseUrl());
-    }
-    
-    drogon::HttpRequestPtr createRequest(drogon::HttpMethod method, const std::string& path) {
-        auto request = drogon::HttpRequest::newHttpRequest();
-        request->setMethod(method);
-        request->setPath(path);
-        
-        // Add authorization header (OME uses Basic auth with token as username)
-        const auto token = getApiToken();
-        const auto b64 = drogon::utils::base64Encode(token);
-        request->addHeader("Authorization", std::string("Basic ") + b64);
-        
-        return request;
-    }
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\RedisHelper.cpp ###
-
-#include "RedisHelper.h"
-#include <chrono>
-#include <cstdlib>
-#include <thread>
-#include <algorithm>
-#include <cstring>
-
-namespace services {
-
-RedisHelper &RedisHelper::instance() {
-    static RedisHelper inst;
-    return inst;
-}
-
-RedisHelper::RedisHelper() : _initialized(false) {
-    LOG_INFO << "RedisHelper created (connection will be established on first use)";
-}
-
-RedisHelper::~RedisHelper() = default;
-
-void RedisHelper::ensureConnected() {
-    if (_initialized) return;
-    
-    std::lock_guard<std::mutex> lock(_initMutex);
-    if (_initialized) return;  // Double-check
-    
-    try {
-        sw::redis::ConnectionOptions opts;
-        opts.host = getRedisHost();
-        opts.port = getRedisPort();
-        
-        const char* envPass = std::getenv("REDIS_PASS");
-        if (envPass && strlen(envPass) > 0) {
-            opts.password = envPass;
-        }
-        
-        opts.socket_timeout = std::chrono::milliseconds(1000);
-        opts.connect_timeout = std::chrono::milliseconds(1000);
-
-        LOG_INFO << "Connecting to Redis at " << opts.host << ":" << opts.port;
-
-        _redis = std::make_unique<sw::redis::Redis>(opts);
-        _redis->ping();
-        
-        _initialized = true;
-        LOG_INFO << "Redis connection established successfully";
-    } catch (const sw::redis::Error& e) {
-        LOG_ERROR << "Failed to connect to Redis: " << e.what();
-        throw;
-    }
-}
-
-std::string RedisHelper::getRedisHost() const {
-    const char* envHost = std::getenv("REDIS_HOST");
-    if (envHost) return std::string(envHost);
-    
-    try {
-        const auto& config = drogon::app().getCustomConfig();
-        if (config.isMember("redis") && config["redis"].isMember("host")) {
-            return config["redis"]["host"].asString();
-        }
-    } catch (...) {}
-    
-    return "redis";
-}
-
-int RedisHelper::getRedisPort() const {
-    const char* envPort = std::getenv("REDIS_PORT");
-    if (envPort) {
-        try {
-            return std::stoi(envPort);
-        } catch (...) {}
-    }
-    
-    try {
-        const auto& config = drogon::app().getCustomConfig();
-        if (config.isMember("redis") && config["redis"].isMember("port")) {
-            return config["redis"]["port"].asInt();
-        }
-    } catch (...) {}
-    
-    return 6379;
-}
-
-void RedisHelper::executeInThreadPool(std::function<void()> task) {
-    auto loop = drogon::app().getLoop();
-    if (!loop) {
-        LOG_ERROR << "Event loop not available, executing task synchronously";
-        try {
-            task();
-        } catch (const std::exception& e) {
-            LOG_ERROR << "Error executing task: " << e.what();
-        }
-        return;
-    }
-    
-    loop->queueInLoop([task = std::move(task)]() {
-        std::thread([task]() {
-            try {
-                task();
-            } catch (const std::exception& e) {
-                LOG_ERROR << "Error in thread pool task: " << e.what();
-            }
-        }).detach();
-    });
-}
-
-// Define a macro to generate async methods
-#define REDIS_ASYNC_IMPL(method, return_type, operation) \
-void RedisHelper::method##Async(const std::string &key, \
-                                std::function<void(return_type)> callback) { \
-    executeAsync<return_type>( \
-        [this, key]() { \
-            return _redis->operation; \
-        }, \
-        std::move(callback) \
-    ); \
-}
-
-// Specialized async methods using the template
-
-void RedisHelper::setexAsync(const std::string &key,
-                              const std::string &value,
-                              long ttlSeconds,
-                              std::function<void(bool)> callback) {
-    executeAsync<bool>(
-        [this, key, value, ttlSeconds]() {
-            _redis->setex(key, ttlSeconds, value);
-            return true;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::getAsync(const std::string &key,
-                            std::function<void(sw::redis::OptionalString)> callback) {
-    executeAsync<sw::redis::OptionalString>(
-        [this, key]() {
-            return _redis->get(key);
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::delAsync(const std::string &key,
-                           std::function<void(bool)> callback) {
-    executeAsync<bool>(
-        [this, key]() {
-            return _redis->del(key) > 0;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::saddAsync(const std::string &setName,
-                            const std::string &value,
-                            std::function<void(bool)> callback) {
-    executeAsync<bool>(
-        [this, setName, value]() {
-            return _redis->sadd(setName, value) > 0;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::sremAsync(const std::string &setName,
-                            const std::string &value,
-                            std::function<void(bool)> callback) {
-    executeAsync<bool>(
-        [this, setName, value]() {
-            return _redis->srem(setName, value) > 0;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::smembersAsync(const std::string &setName,
-                                std::function<void(std::vector<std::string>)> callback) {
-    executeAsync<std::vector<std::string>>(
-        [this, setName]() {
-            std::vector<std::string> members;
-            _redis->smembers(setName, std::back_inserter(members));
-            return members;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::keysAsync(const std::string &pattern,
-                            std::function<void(std::vector<std::string>)> callback) {
-    executeAsync<std::vector<std::string>>(
-        [this, pattern]() {
-            std::vector<std::string> keys;
-            _redis->keys(pattern, std::back_inserter(keys));
-            return keys;
-        },
-        std::move(callback)
-    );
-}
-
-void RedisHelper::expireAsync(const std::string &key,
-                              long ttlSeconds,
-                              std::function<void(bool)> callback) {
-    executeAsync<bool>(
-        [this, key, ttlSeconds]() {
-            return _redis->expire(key, ttlSeconds);
-        },
-        std::move(callback)
-    );
-}
-
-// Sync versions for compatibility
-std::unique_ptr<sw::redis::Redis> RedisHelper::getConnection() {
-    ensureConnected();
-    
-    sw::redis::ConnectionOptions opts;
-    opts.host = getRedisHost();
-    opts.port = getRedisPort();
-    
-    const char* envPass = std::getenv("REDIS_PASS");
-    if (envPass && strlen(envPass) > 0) {
-        opts.password = envPass;
-    }
-    
-    opts.socket_timeout = std::chrono::milliseconds(200);
-    opts.connect_timeout = std::chrono::milliseconds(200);
-    
-    return std::make_unique<sw::redis::Redis>(opts);
-}
-
-bool RedisHelper::storeKey(const std::string &key, const std::string &value, int ttl) {
-    try {
-        ensureConnected();
-        if (ttl > 0) {
-            _redis->setex(key, ttl, value);
-        } else {
-            _redis->set(key, value);
-        }
-        return true;
-    } catch (const sw::redis::Error &e) {
-        LOG_ERROR << "Redis SET error: " << e.what();
-        return false;
-    }
-}
-
-std::string RedisHelper::getKey(const std::string &key) {
-    try {
-        ensureConnected();
-        auto val = _redis->get(key);
-        return val.has_value() ? val.value() : "";
-    } catch (const sw::redis::Error &e) {
-        LOG_ERROR << "Redis GET error: " << e.what();
-        return "";
-    }
-}
-
-bool RedisHelper::deleteKey(const std::string &key) {
-    try {
-        ensureConnected();
-        return _redis->del(key) > 0;
-    } catch (const sw::redis::Error &e) {
-        LOG_ERROR << "Redis DEL error: " << e.what();
-        return false;
-    }
-}
-
-bool RedisHelper::addToSet(const std::string &setName, const std::string &value) {
-    try {
-        ensureConnected();
-        return _redis->sadd(setName, value) > 0;
-    } catch (const sw::redis::Error &e) {
-        LOG_ERROR << "Redis SADD error: " << e.what();
-        return false;
-    }
-}
-
-bool RedisHelper::removeFromSet(const std::string &setName, const std::string &value) {
-    try {
-        ensureConnected();
-        return _redis->srem(setName, value) > 0;
-    } catch (const sw::redis::Error &e) {
-        LOG_ERROR << "Redis SREM error: " << e.what();
-        return false;
-    }
-}
-
-// Deprecated command executor - simplified
-void RedisHelper::executeAsync(const std::string &command,
-                               std::function<void(bool, const std::string&)> callback) {
-    // For the single use case in the code (EXPIRE), handle it directly
-    std::istringstream iss(command);
-    std::string op, key;
-    long ttl;
-    iss >> op >> key >> ttl;
-    
-    if (op == "EXPIRE" || op == "expire") {
-        expireAsync(key, ttl, [callback](bool success) {
-            callback(success, success ? "1" : "0");
-        });
-    } else {
-        if (auto loop = drogon::app().getLoop()) {
-            loop->queueInLoop([callback]() {
-                callback(false, "Unsupported command in executeAsync. Use specific async methods.");
-            });
-        } else {
-            callback(false, "Unsupported command in executeAsync. Use specific async methods.");
-        }
-    }
-}
-
-} // namespace services
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\RedisHelper.h ###
-
-#pragma once
-
-#include <sw/redis++/redis++.h>
-#include <memory>
-#include <string>
-#include <functional>
-#include <mutex>
-#include <drogon/drogon.h>
-
-namespace services {
-
-class RedisHelper {
-public:
-    // Singleton accessor
-    static RedisHelper &instance();
-
-    // Generic async execute wrapper
-    template<typename Result, typename Callback>
-    void executeAsync(std::function<Result()> redisOp, Callback&& callback) {
-        executeInThreadPool([this, redisOp = std::move(redisOp), 
-                           callback = std::forward<Callback>(callback)]() {
-            try {
-                ensureConnected();
-                auto result = redisOp();
-                
-                if (auto loop = drogon::app().getLoop()) {
-                    loop->queueInLoop([callback, result = std::move(result)]() {
-                        callback(std::move(result));
-                    });
-                } else {
-                    callback(std::move(result));
-                }
-            } catch (const sw::redis::Error &e) {
-                LOG_ERROR << "Redis operation error: " << e.what();
-                
-                if (auto loop = drogon::app().getLoop()) {
-                    loop->queueInLoop([callback]() {
-                        callback(Result{});
-                    });
-                } else {
-                    callback(Result{});
-                }
-            }
-        });
-    }
-
-    // Async SETEX
-    void setexAsync(const std::string &key,
-                     const std::string &value,
-                     long ttlSeconds,
-                     std::function<void(bool)> callback);
-
-    // Async GET
-    void getAsync(const std::string &key,
-                  std::function<void(sw::redis::OptionalString)> callback);
-
-    // Async DEL
-    void delAsync(const std::string &key,
-                  std::function<void(bool)> callback);
-
-    // Async SADD
-    void saddAsync(const std::string &setName,
-                   const std::string &value,
-                   std::function<void(bool)> callback);
-
-    // Async SREM
-    void sremAsync(const std::string &setName,
-                   const std::string &value,
-                   std::function<void(bool)> callback);
-
-    // Async SMEMBERS
-    void smembersAsync(const std::string &setName,
-                       std::function<void(std::vector<std::string>)> callback);
-
-    // Async KEYS
-    void keysAsync(const std::string &pattern,
-                   std::function<void(std::vector<std::string>)> callback);
-
-    // Async EXPIRE
-    void expireAsync(const std::string &key,
-                     long ttlSeconds,
-                     std::function<void(bool)> callback);
-
-    // Sync versions for compatibility
-    std::unique_ptr<sw::redis::Redis> getConnection();
-    bool storeKey(const std::string &key, const std::string &value, int ttl = 0);
-    std::string getKey(const std::string &key);
-    bool deleteKey(const std::string &key);
-    bool addToSet(const std::string &setName, const std::string &value);
-    bool removeFromSet(const std::string &setName, const std::string &value);
-
-    // Compatibility wrappers - keep for backward compatibility
-    static void storeKeyAsync(const std::string &key, const std::string &value, int ttl,
-                              std::function<void(bool)> callback) {
-        instance().setexAsync(key, value, ttl, callback);
-    }
-
-    static void getKeyAsync(const std::string &key,
-                            std::function<void(const std::string&)> callback) {
-        instance().getAsync(key, [callback](sw::redis::OptionalString val) {
-            callback(val.has_value() ? val.value() : "");
-        });
-    }
-
-    static void deleteKeyAsync(const std::string &key,
-                               std::function<void(bool)> callback) {
-        instance().delAsync(key, callback);
-    }
-
-    // Execute arbitrary command asynchronously (deprecated)
-    void executeAsync(const std::string &command,
-                      std::function<void(bool, const std::string&)> callback);
-
-private:
-    RedisHelper();
-    ~RedisHelper();
-    RedisHelper(const RedisHelper &) = delete;
-    RedisHelper &operator=(const RedisHelper &) = delete;
-
-    void ensureConnected();
-    void executeInThreadPool(std::function<void()> task);
-    std::string getRedisHost() const;
-    int getRedisPort() const;
-
-    std::unique_ptr<sw::redis::Redis> _redis;
-    bool _initialized;
-    std::mutex _initMutex;
-};
-
-} // namespace services
-
-// Compatibility layer for existing code
-class RedisHelper {
-public:
-    using RedisConnectionPtr = std::unique_ptr<sw::redis::Redis>;
-
-    static RedisConnectionPtr getConnection() {
-        return services::RedisHelper::instance().getConnection();
-    }
-
-    static std::string getRedisHost() {
-        const char* envHost = std::getenv("REDIS_HOST");
-        return envHost ? std::string(envHost) : "redis";
-    }
-
-    static int getRedisPort() {
-        const char* envPort = std::getenv("REDIS_PORT");
-        return envPort ? std::stoi(envPort) : 6379;
-    }
-
-    static bool storeKey(const std::string& key, const std::string& value, int ttl = 0) {
-        return services::RedisHelper::instance().storeKey(key, value, ttl);
-    }
-
-    static std::string getKey(const std::string& key) {
-        return services::RedisHelper::instance().getKey(key);
-    }
-
-    static bool deleteKey(const std::string& key) {
-        return services::RedisHelper::instance().deleteKey(key);
-    }
-
-    static bool addToSet(const std::string& setName, const std::string& value) {
-        return services::RedisHelper::instance().addToSet(setName, value);
-    }
-
-    static bool removeFromSet(const std::string& setName, const std::string& value) {
-        return services::RedisHelper::instance().removeFromSet(setName, value);
-    }
-
-    static void storeKeyAsync(const std::string& key, const std::string& value, int ttl,
-                              std::function<void(bool)> callback) {
-        services::RedisHelper::storeKeyAsync(key, value, ttl, callback);
-    }
-
-    static void getKeyAsync(const std::string& key,
-                            std::function<void(const std::string&)> callback) {
-        services::RedisHelper::getKeyAsync(key, callback);
-    }
-
-    static void deleteKeyAsync(const std::string& key,
-                               std::function<void(bool)> callback) {
-        services::RedisHelper::deleteKeyAsync(key, callback);
-    }
-
-    static void executeAsync(const std::string& command,
-                             std::function<void(bool, const std::string&)> callback) {
-        services::RedisHelper::instance().executeAsync(command, callback);
-    }
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\StatsService.cpp ###
-
-#include "StatsService.h"
-#include "../controllers/StreamController.h"
-#include "../services/RedisHelper.h"
-#include "../services/OmeClient.h"
-#include <drogon/HttpClient.h>
-#include <drogon/utils/Utilities.h>
-#include <set>
-
-using namespace drogon;
-
-// Macro to simplify JSON integer assignments
-#define JSON_INT(json, field, value) json[field] = static_cast<Json::Int64>(value)
-
-StatsService::~StatsService() {
-    shutdown();
-}
-
-void StatsService::initialize() {
-    LOG_INFO << "Initializing Stats Service...";
-    running_ = true;
-}
-
-void StatsService::startPolling() {
-    if (!running_) {
-        LOG_WARN << "Stats service not initialized, cannot start polling";
-        return;
-    }
-    
-    LOG_INFO << "Starting stats polling timer...";
-    
-    if (auto loop = drogon::app().getLoop()) {
-        try {
-            // Do an immediate poll
-            pollOmeStats();
-            
-            // Then set up the timer
-            timerId_ = loop->runEvery(
-                pollInterval_.count(),
-                [this]() {
-                    if (!running_) return;
-                    try {
-                        pollOmeStats();
-                    } catch (const std::exception& e) {
-                        LOG_ERROR << "Error in stats polling: " << e.what();
-                    }
-                }
-            );
-            LOG_INFO << "Stats polling timer started with " << pollInterval_.count() << "s interval";
-        } catch (const std::exception& e) {
-            LOG_ERROR << "Failed to create stats timer: " << e.what();
-        }
-    } else {
-        LOG_ERROR << "Event loop not available for stats polling";
-    }
-}
-
-void StatsService::shutdown() {
-    LOG_INFO << "Shutting down Stats Service...";
-    running_ = false;
-    
-    if (timerId_.has_value()) {
-        if (auto loop = drogon::app().getLoop()) {
-            loop->invalidateTimer(timerId_.value());
-        }
-        timerId_.reset();
-    }
-}
-
-int64_t StatsService::getUniqueViewerCount(const std::string& streamKey) {
-    try {
-        auto redis = services::RedisHelper::instance().getConnection();
-        if (!redis) return 0;
-        
-        std::vector<std::string> keys;
-        redis->keys("viewer_token:*", std::back_inserter(keys));
-        
-        return std::count_if(keys.begin(), keys.end(), [&redis, &streamKey](const auto& tokenKey) {
-            auto storedKey = redis->get(tokenKey);
-            return storedKey.has_value() && storedKey.value() == streamKey;
-        });
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Error getting unique viewer count: " << e.what();
-        return 0;
-    }
-}
-
-void StatsService::pollOmeStats() {
-    LOG_INFO << "Polling OvenMediaEngine for active streams...";
-    
-    // Get active streams from OME
-    OmeClient::getInstance().getActiveStreams([this](bool success, const Json::Value& json) {
-        if (success && json.isMember("response")) {
-            LOG_INFO << "OME Active Streams Response: " << json["response"].toStyledString();
-            
-            std::set<std::string> activeStreamKeys;
-            
-            // Handle both array and object responses from OME
-            if (json["response"].isArray()) {
-                for (const auto& stream : json["response"]) {
-                    if (stream.isString()) {
-                        activeStreamKeys.insert(stream.asString());
-                    }
-                }
-            } else if (json["response"].isMember("streams") && json["response"]["streams"].isArray()) {
-                for (const auto& stream : json["response"]["streams"]) {
-                    if (stream.isString()) {
-                        activeStreamKeys.insert(stream.asString());
-                    } else if (stream.isMember("name")) {
-                        activeStreamKeys.insert(stream["name"].asString());
-                    }
-                }
-            }
-            
-            LOG_INFO << "Found " << activeStreamKeys.size() << " active streams from OME";
-            
-            // Update each active stream
-            for (const auto& streamKey : activeStreamKeys) {
-                LOG_INFO << "Processing active stream: " << streamKey;
-                
-                // IMMEDIATELY update database to mark as live
-                auto dbClient = app().getDbClient();
-                *dbClient << "UPDATE realms SET is_live = true, viewer_count = 0, "
-                            "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1"
-                          << streamKey
-                          >> [streamKey](const orm::Result&) {
-                              LOG_INFO << "Successfully marked realm as live: " << streamKey;
-                          }
-                          >> [streamKey](const orm::DrogonDbException& e) {
-                              LOG_ERROR << "Failed to update realm live status: " << e.base().what();
-                          };
-                
-                // Then update detailed stats
-                updateStreamStats(streamKey);
-            }
-            
-            // Mark all non-active streams as offline
-            auto dbClient = app().getDbClient();
-            *dbClient << "SELECT stream_key FROM realms WHERE is_live = true"
-                      >> [activeStreamKeys](const orm::Result& r) {
-                          auto db = app().getDbClient();
-                          for (const auto& row : r) {
-                              std::string key = row["stream_key"].as<std::string>();
-                              if (activeStreamKeys.find(key) == activeStreamKeys.end()) {
-                                  LOG_INFO << "Marking realm as offline: " << key;
-                                  *db << "UPDATE realms SET is_live = false, viewer_count = 0, "
-                                         "updated_at = CURRENT_TIMESTAMP WHERE stream_key = $1"
-                                      << key
-                                      >> [key](const orm::Result&) {
-                                          LOG_INFO << "Marked realm as offline: " << key;
-                                      }
-                                      >> [](const orm::DrogonDbException& e) {
-                                          LOG_ERROR << "Failed to mark realm offline: " << e.base().what();
-                                      };
-                              }
-                          }
-                      }
-                      >> [](const orm::DrogonDbException& e) {
-                          LOG_ERROR << "Failed to query live realms: " << e.base().what();
-                      };
-        } else {
-            LOG_ERROR << "Failed to get active streams from OME or empty response";
-        }
-    });
-}
-
-void StatsService::updateStreamStats(const std::string& streamKey) {
-    fetchStatsFromOme(streamKey, [this, streamKey](bool success, const StreamStats& stats) {
-        if (success) {
-            StreamStats updatedStats = stats;
-            updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
-            
-            storeStatsInRedis(streamKey, updatedStats);
-            
-            // Update realm in database
-            updateRealmLiveStatus(streamKey, updatedStats);
-            
-            // Only broadcast if stream has meaningful data or is live
-            if (updatedStats.isLive || updatedStats.totalBytesIn > 0 || updatedStats.uniqueViewers > 0) {
-                Json::Value msg;
-                msg["type"] = "stats_update";
-                msg["stream_key"] = streamKey;
-                
-                auto& s = msg["stats"];
-                JSON_INT(s, "connections", updatedStats.uniqueViewers);
-                JSON_INT(s, "raw_connections", updatedStats.currentConnections);
-                s["bitrate"] = updatedStats.bitrate;
-                s["resolution"] = updatedStats.resolution;
-                s["fps"] = updatedStats.fps;
-                s["codec"] = updatedStats.codec;
-                s["is_live"] = updatedStats.isLive;
-                JSON_INT(s, "bytes_in", updatedStats.totalBytesIn);
-                JSON_INT(s, "bytes_out", updatedStats.totalBytesOut);
-                
-                // Protocol breakdown
-                auto& pc = s["protocol_connections"];
-                JSON_INT(pc, "webrtc", updatedStats.protocolConnections.webrtc);
-                JSON_INT(pc, "hls", updatedStats.protocolConnections.hls);
-                JSON_INT(pc, "llhls", updatedStats.protocolConnections.llhls);
-                JSON_INT(pc, "dash", updatedStats.protocolConnections.dash);
-                
-                StreamWebSocketController::broadcastStatsUpdate(msg);
-            }
-        }
-    });
-}
-
-void StatsService::updateRealmLiveStatus(const std::string& streamKey, const StreamStats& stats) {
-    auto dbClient = app().getDbClient();
-    
-    // Cast to int32 to match PostgreSQL integer type
-    int32_t viewerCount = static_cast<int32_t>(stats.uniqueViewers);
-    
-    // Update realm's live status and viewer count
-    *dbClient << "UPDATE realms SET is_live = $1, viewer_count = $2, updated_at = CURRENT_TIMESTAMP WHERE stream_key = $3"
-              << stats.isLive << viewerCount << streamKey
-              >> [streamKey, stats](const orm::Result&) {
-                  LOG_INFO << "Updated realm status for stream " << streamKey 
-                           << " - Live: " << stats.isLive 
-                           << ", Viewers: " << stats.uniqueViewers;
-              }
-              >> [streamKey](const orm::DrogonDbException& e) {
-                  LOG_ERROR << "Failed to update realm status for " << streamKey 
-                           << ": " << e.base().what();
-              };
-}
-
-void StatsService::fetchStatsFromOme(const std::string& streamKey,
-                                    std::function<void(bool, const StreamStats&)> callback) {
-    LOG_DEBUG << "Fetching stats for stream: " << streamKey;
-    
-    // First, try to get the stream stats
-    OmeClient::getInstance().getStreamStats(streamKey, [this, callback, streamKey](bool success, const Json::Value& json) {
-        StreamStats stats;
-        bool streamExists = false;
-        
-        if (success && json.isMember("response") && !json["response"].isNull()) {
-            try {
-                const auto& data = json["response"];
-                streamExists = true;
-                
-                // Parse connections
-                if (data.isMember("connections")) {
-                    const auto& conns = data["connections"];
-                    int64_t totalConns = 0;
-                    
-                    for (const auto& protocolName : conns.getMemberNames()) {
-                        int64_t count = conns[protocolName].asInt64();
-                        auto& pc = stats.protocolConnections;
-                        
-                        if (protocolName == "webrtc") pc.webrtc = count;
-                        else if (protocolName == "hls") pc.hls = count;
-                        else if (protocolName == "llhls") pc.llhls = count;
-                        else if (protocolName == "dash") pc.dash = count;
-                        
-                        totalConns += count;
-                    }
-                    
-                    stats.currentConnections = totalConns;
-                    stats.totalConnections = totalConns;
-                }
-
-                // Check multiple indicators for live status
-                bool hasInput = false;
-                
-                // Check for input field
-                if (data.isMember("input") && !data["input"].isNull()) {
-                    hasInput = true;
-                    const auto& input = data["input"];
-                    
-                    // Get bitrate from input tracks
-                    if (input.isMember("tracks") && input["tracks"].isArray()) {
-                        for (const auto& track : input["tracks"]) {
-                            if (track["type"].asString() == "video" && track.isMember("bitrate")) {
-                                stats.bitrate = track["bitrate"].asDouble();
-                            }
-                        }
-                    }
-                }
-                
-                // Alternative: Check lastThroughputIn
-                if (!hasInput && data.isMember("lastThroughputIn")) {
-                    double throughput = data["lastThroughputIn"].asDouble();
-                    if (throughput > 0) {
-                        hasInput = true;
-                        stats.bitrate = throughput;
-                    }
-                }
-                
-                // Alternative: Check avgThroughputIn
-                if (!hasInput && data.isMember("avgThroughputIn")) {
-                    double avgThroughput = data["avgThroughputIn"].asDouble();
-                    if (avgThroughput > 0) {
-                        hasInput = true;
-                        stats.bitrate = avgThroughput;
-                    }
-                }
-                
-                // Check bytes counters
-                if (data.isMember("totalBytesIn")) {
-                    stats.totalBytesIn = data["totalBytesIn"].asInt64();
-                    if (stats.totalBytesIn > 0) {
-                        hasInput = true;
-                    }
-                }
-                
-                if (data.isMember("totalBytesOut")) {
-                    stats.totalBytesOut = data["totalBytesOut"].asInt64();
-                }
-                
-                // Stream is live if it has input or active bitrate
-                stats.isLive = hasInput || stats.bitrate > 0;
-                
-                LOG_DEBUG << "Stream " << streamKey 
-                          << " - hasInput: " << hasInput
-                          << ", bitrate: " << stats.bitrate
-                          << ", totalBytesIn: " << stats.totalBytesIn
-                          << ", isLive: " << stats.isLive;
-                
-            } catch (const std::exception& e) {
-                LOG_ERROR << "Failed to parse stats: " << e.what();
-                stats.isLive = false;
-            }
-        } else {
-            // Stream doesn't exist in OME
-            stats.isLive = false;
-            LOG_DEBUG << "Stream " << streamKey << " not found in OME";
-        }
-        
-        stats.lastUpdated = std::chrono::system_clock::now();
-        
-        // If stream exists, try to get detailed stream info
-        if (streamExists) {
-            OmeClient::getInstance().getStreamInfo(streamKey, [callback, stats](bool infoSuccess, const Json::Value& infoJson) mutable {
-                // Parse stream metadata if available
-                if (infoSuccess && infoJson.isMember("response")) {
-                    try {
-                        const auto& response = infoJson["response"];
-                        
-                        LOG_DEBUG << "Stream info response: " << response.toStyledString();
-                        
-                        // Check if stream has input (another way to verify it's live)
-                        if (response.isMember("input") && !response["input"].isNull()) {
-                            stats.isLive = true;
-                            
-                            // Try to get codec from input tracks first
-                            if (response["input"].isMember("tracks") && response["input"]["tracks"].isArray()) {
-                                for (const auto& track : response["input"]["tracks"]) {
-                                    if (track["type"].asString() == "video") {
-                                        if (track.isMember("codec")) {
-                                            std::string codec = track["codec"].asString();
-                                            // Clean up codec string
-                                            if (codec == "H264" || codec == "h264") {
-                                                stats.codec = "H.264";
-                                            } else if (codec == "H265" || codec == "h265") {
-                                                stats.codec = "H.265";
-                                            } else if (codec == "VP8" || codec == "vp8") {
-                                                stats.codec = "VP8";
-                                            } else if (codec == "VP9" || codec == "vp9") {
-                                                stats.codec = "VP9";
-                                            } else {
-                                                stats.codec = codec;
-                                            }
-                                        }
-                                        if (track.isMember("width") && track.isMember("height")) {
-                                            stats.resolution = std::to_string(track["width"].asInt()) + "x" + 
-                                                             std::to_string(track["height"].asInt());
-                                        }
-                                        if (track.isMember("framerate")) {
-                                            stats.fps = track["framerate"].asDouble();
-                                        } else if (track.isMember("frameRate")) {
-                                            stats.fps = track["frameRate"].asDouble();
-                                        }
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                        
-                        // If no codec found in input, try output tracks
-                        if (stats.codec.empty() || stats.codec == "N/A") {
-                            if (response.isMember("tracks") && response["tracks"].isArray()) {
-                                for (const auto& track : response["tracks"]) {
-                                    if (track["type"].asString() == "video") {
-                                        if (track.isMember("codec")) {
-                                            std::string codec = track["codec"].asString();
-                                            if (codec == "H264" || codec == "h264") {
-                                                stats.codec = "H.264";
-                                            } else if (codec == "H265" || codec == "h265") {
-                                                stats.codec = "H.265";
-                                            } else if (codec == "VP8" || codec == "vp8") {
-                                                stats.codec = "VP8";
-                                            } else if (codec == "VP9" || codec == "vp9") {
-                                                stats.codec = "VP9";
-                                            } else {
-                                                stats.codec = codec;
-                                            }
-                                        }
-                                        if (stats.resolution == "N/A" && track.isMember("width") && track.isMember("height")) {
-                                            stats.resolution = std::to_string(track["width"].asInt()) + "x" + 
-                                                             std::to_string(track["height"].asInt());
-                                        }
-                                        if (stats.fps == 0 && track.isMember("framerate")) {
-                                            stats.fps = track["framerate"].asDouble();
-                                        } else if (stats.fps == 0 && track.isMember("frameRate")) {
-                                            stats.fps = track["frameRate"].asDouble();
-                                        }
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                        
-                        // Set defaults if still empty
-                        if (stats.codec.empty()) {
-                            stats.codec = "Unknown";
-                        }
-                        
-                    } catch (const std::exception& e) {
-                        LOG_ERROR << "Failed to parse stream info: " << e.what();
-                    }
-                }
-                
-                callback(true, stats);
-            });
-        } else {
-            // Stream doesn't exist, return offline stats
-            callback(true, stats);
-        }
-    });
-}
-
-void StatsService::storeStatsInRedis(const std::string& streamKey, const StreamStats& stats) {
-    Json::Value json;
-    JSON_INT(json, "connections", stats.currentConnections);
-    JSON_INT(json, "unique_viewers", stats.uniqueViewers);
-    JSON_INT(json, "total_connections", stats.totalConnections);
-    JSON_INT(json, "bytes_in", stats.totalBytesIn);
-    JSON_INT(json, "bytes_out", stats.totalBytesOut);
-    json["bitrate"] = stats.bitrate;
-    json["codec"] = stats.codec;
-    json["resolution"] = stats.resolution;
-    json["fps"] = stats.fps;
-    json["is_live"] = stats.isLive;
-    JSON_INT(json, "last_updated", 
-        std::chrono::duration_cast<std::chrono::seconds>(
-            stats.lastUpdated.time_since_epoch()
-        ).count()
-    );
-    
-    // Protocol connections
-    Json::Value pc;
-    JSON_INT(pc, "webrtc", stats.protocolConnections.webrtc);
-    JSON_INT(pc, "hls", stats.protocolConnections.hls);
-    JSON_INT(pc, "llhls", stats.protocolConnections.llhls);
-    JSON_INT(pc, "dash", stats.protocolConnections.dash);
-    json["protocol_connections"] = pc;
-    
-    // Store connection drop timestamp if recent
-    auto timeSinceDrop = std::chrono::duration_cast<std::chrono::seconds>(
-        std::chrono::system_clock::now() - stats.lastConnectionDrop).count();
-    if (timeSinceDrop < 60) {
-        JSON_INT(json, "last_connection_drop",
-            std::chrono::duration_cast<std::chrono::seconds>(
-                stats.lastConnectionDrop.time_since_epoch()
-            ).count()
-        );
-    }
-    
-    RedisHelper::storeKey("stream_stats:" + streamKey, Json::FastWriter().write(json), 10);
-}
-
-void StatsService::getStreamStats(const std::string& streamKey,
-                                 std::function<void(bool, const StreamStats&)> callback) {
-    std::string jsonStr = RedisHelper::getKey("stream_stats:" + streamKey);
-    
-    if (jsonStr.empty()) {
-        // Fetch fresh stats from OME and populate uniqueViewers
-        LOG_DEBUG << "No cached stats, fetching from OME for " << streamKey;
-        fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
-            if (success) {
-                StreamStats updatedStats = stats;
-                // Set uniqueViewers on cache miss
-                updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
-                callback(true, updatedStats);
-            } else {
-                callback(false, stats);
-            }
-        });
-        return;
-    }
-    
-    try {
-        Json::Value json;
-        Json::Reader reader;
-        if (reader.parse(jsonStr, json)) {
-            StreamStats stats;
-            stats.currentConnections = json["connections"].asInt64();
-            stats.uniqueViewers = json["unique_viewers"].asInt64();
-            stats.totalConnections = json["total_connections"].asInt64();
-            stats.totalBytesIn = json["bytes_in"].asInt64();
-            stats.totalBytesOut = json["bytes_out"].asInt64();
-            stats.bitrate = json["bitrate"].asDouble();
-            stats.codec = json["codec"].asString();
-            stats.resolution = json["resolution"].asString();
-            stats.fps = json["fps"].asDouble();
-            stats.isLive = json["is_live"].asBool();
-            
-            // Parse protocol connections
-            if (json.isMember("protocol_connections")) {
-                const auto& pc = json["protocol_connections"];
-                stats.protocolConnections.webrtc = pc["webrtc"].asInt64();
-                stats.protocolConnections.hls = pc["hls"].asInt64();
-                stats.protocolConnections.llhls = pc["llhls"].asInt64();
-                stats.protocolConnections.dash = pc["dash"].asInt64();
-            }
-            
-            stats.lastUpdated = std::chrono::system_clock::time_point(
-                std::chrono::seconds(json["last_updated"].asInt64())
-            );
-            
-            callback(true, stats);
-            LOG_DEBUG << "Retrieved cached stats for " << streamKey;
-        } else {
-            // Fallback to fresh fetch if cached data is corrupted
-            fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
-                if (success) {
-                    StreamStats updatedStats = stats;
-                    updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
-                    callback(true, updatedStats);
-                } else {
-                    callback(false, stats);
-                }
-            });
-        }
-    } catch (const std::exception& e) {
-        LOG_ERROR << "Failed to parse cached stats: " << e.what();
-        // Fallback to fresh fetch
-        fetchStatsFromOme(streamKey, [this, callback, streamKey](bool success, const StreamStats& stats) {
-            if (success) {
-                StreamStats updatedStats = stats;
-                updatedStats.uniqueViewers = getUniqueViewerCount(streamKey);
-                callback(true, updatedStats);
-            } else {
-                callback(false, stats);
-            }
-        });
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\backend\src\services\StatsService.h ###
-
-#pragma once
-#include <drogon/drogon.h>
-#include <trantor/net/EventLoop.h>
-#include <memory>
-#include <string>
-#include <chrono>
-#include <atomic>
-#include <optional>
-
-struct StreamStats {
-    int64_t currentConnections = 0;  // Raw connection count from OME
-    int64_t uniqueViewers = 0;       // Unique viewer tokens
-    int64_t totalConnections = 0;
-    int64_t totalBytesIn = 0;
-    int64_t totalBytesOut = 0;
-    double bitrate = 0.0;
-    std::string codec;
-    std::string resolution;
-    double fps = 0.0;
-    bool isLive = false;
-    std::chrono::system_clock::time_point lastUpdated;
-    
-    // Protocol-specific connections
-    struct ProtocolConnections {
-        int64_t webrtc = 0;
-        int64_t hls = 0;
-        int64_t llhls = 0;
-        int64_t dash = 0;
-    } protocolConnections;
-    
-    // Connection history for deduplication
-    std::chrono::system_clock::time_point lastConnectionDrop;
-    int64_t previousTotalConnections = 0;
-};
-
-class StatsService {
-public:
-    static StatsService& getInstance() {
-        static StatsService instance;
-        return instance;
-    }
-    
-    void initialize();
-    void startPolling();  // NEW: Separate method to start polling
-    void shutdown();
-    
-    // Get cached stats from Redis
-    void getStreamStats(const std::string& streamKey,
-                       std::function<void(bool, const StreamStats&)> callback);
-    
-    // Force update stats for a specific stream
-    void updateStreamStats(const std::string& streamKey);
-    
-    // Get unique viewer count for a stream
-    int64_t getUniqueViewerCount(const std::string& streamKey);
-    
-private:
-    StatsService() = default;
-    ~StatsService();
-    StatsService(const StatsService&) = delete;
-    StatsService& operator=(const StatsService&) = delete;
-    
-    bool getPreviousStats(const std::string& streamKey, StreamStats& stats);
-    void pollOmeStats();
-    void storeStatsInRedis(const std::string& streamKey, const StreamStats& stats);
-    void fetchStatsFromOme(const std::string& streamKey, 
-                          std::function<void(bool, const StreamStats&)> callback);
-    void updateRealmLiveStatus(const std::string& streamKey, const StreamStats& stats);
-
-    std::atomic<bool> running_{false};
-    std::optional<trantor::TimerId> timerId_;
-    std::chrono::seconds pollInterval_{2}; // Poll every 2 seconds
-};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\database\init.sql ###
-
--- Create users table
-CREATE TABLE IF NOT EXISTS users (
-    id BIGSERIAL PRIMARY KEY,
-    username VARCHAR(255) UNIQUE NOT NULL,
-    password_hash VARCHAR(255),
-    is_admin BOOLEAN DEFAULT false,
-    is_streamer BOOLEAN DEFAULT false,
-    is_pgp_only BOOLEAN DEFAULT false,
-    pgp_only_enabled_at TIMESTAMP WITH TIME ZONE,
-    bio TEXT DEFAULT '',
-    avatar_url VARCHAR(255),
-    user_color VARCHAR(7) UNIQUE NOT NULL,  -- Unique hex color for each user
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
-    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create pgp_keys table
-CREATE TABLE IF NOT EXISTS pgp_keys (
-    id BIGSERIAL PRIMARY KEY,
-    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-    public_key TEXT NOT NULL,
-    fingerprint VARCHAR(40) UNIQUE NOT NULL,
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create realms table (removed display_name and description)
-CREATE TABLE IF NOT EXISTS realms (
-    id BIGSERIAL PRIMARY KEY,
-    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-    name VARCHAR(255) UNIQUE NOT NULL,
-    stream_key VARCHAR(64) UNIQUE NOT NULL,
-    is_active BOOLEAN DEFAULT true,
-    is_live BOOLEAN DEFAULT false,
-    viewer_count INTEGER DEFAULT 0,
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
-    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create stream_keys table (deprecated, kept for compatibility)
-CREATE TABLE IF NOT EXISTS stream_keys (
-    id BIGSERIAL PRIMARY KEY,
-    user_id BIGINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-    key VARCHAR(64) UNIQUE NOT NULL,
-    is_active BOOLEAN DEFAULT true,
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
-    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create indexes
-CREATE INDEX idx_users_username ON users(username);
-CREATE INDEX idx_users_is_streamer ON users(is_streamer);
-CREATE INDEX idx_users_is_pgp_only ON users(is_pgp_only);
-CREATE INDEX idx_users_user_color ON users(user_color);
-CREATE INDEX idx_pgp_keys_user_id ON pgp_keys(user_id);
-CREATE INDEX idx_pgp_keys_fingerprint ON pgp_keys(fingerprint);
-CREATE INDEX idx_realms_user_id ON realms(user_id);
-CREATE INDEX idx_realms_name ON realms(name);
-CREATE INDEX idx_realms_stream_key ON realms(stream_key);
-CREATE INDEX idx_realms_is_live ON realms(is_live);
-CREATE INDEX idx_stream_keys_user_id ON stream_keys(user_id);
-CREATE INDEX idx_stream_keys_key ON stream_keys(key) WHERE is_active = true;
-CREATE INDEX idx_stream_keys_active ON stream_keys(is_active);
-
--- Create updated_at trigger
-CREATE OR REPLACE FUNCTION update_updated_at_column()
-RETURNS TRIGGER AS $$
-BEGIN
-    NEW.updated_at = CURRENT_TIMESTAMP;
-    RETURN NEW;
-END;
-$$ language 'plpgsql';
-
-CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
-    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
-
-CREATE TRIGGER update_realms_updated_at BEFORE UPDATE ON realms
-    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
-
-CREATE TRIGGER update_stream_keys_updated_at BEFORE UPDATE ON stream_keys
-    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
-
--- Create function to deactivate old keys when a new one is created
-CREATE OR REPLACE FUNCTION deactivate_old_stream_keys()
-RETURNS TRIGGER AS $$
-BEGIN
-    IF NEW.is_active = true THEN
-        UPDATE stream_keys 
-        SET is_active = false 
-        WHERE user_id = NEW.user_id 
-        AND id != NEW.id 
-        AND is_active = true;
-    END IF;
-    RETURN NEW;
-END;
-$$ language 'plpgsql';
-
-CREATE TRIGGER deactivate_old_keys AFTER INSERT OR UPDATE ON stream_keys
-    FOR EACH ROW EXECUTE FUNCTION deactivate_old_stream_keys();
-
--- Add constraint to ensure pgp_only_enabled_at is set when is_pgp_only is true
-CREATE OR REPLACE FUNCTION check_pgp_only_timestamp()
-RETURNS TRIGGER AS $$
-BEGIN
-    IF NEW.is_pgp_only = true AND NEW.pgp_only_enabled_at IS NULL THEN
-        NEW.pgp_only_enabled_at = CURRENT_TIMESTAMP;
-    END IF;
-    RETURN NEW;
-END;
-$$ language 'plpgsql';
-
-CREATE TRIGGER ensure_pgp_only_timestamp BEFORE INSERT OR UPDATE ON users
-    FOR EACH ROW EXECUTE FUNCTION check_pgp_only_timestamp();
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\.gitignore ###
-
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\Dockerfile ###
-
-# Use Bun base image for builder
-FROM oven/bun:1-alpine AS builder
-
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-COPY bun.lockb* ./
-
-# Install dependencies with Bun
-RUN bun install --frozen-lockfile
-
-# Copy source files
-COPY . .
-
-# Set environment variables for build
-ENV VITE_API_URL=http://localhost/api
-ENV VITE_WS_URL=ws://localhost/ws
-ENV VITE_STREAM_PORT=8088
-
-# Build the application
-RUN bun run build
-
-# Production stage - can still use Bun
-FROM oven/bun:1-alpine
-
-WORKDIR /app
-
-# Copy built application
-COPY --from=builder /app/build ./build
-COPY --from=builder /app/package*.json ./
-
-# Install production dependencies only
-RUN bun install --production
-
-# Expose port
-EXPOSE 3000
-
-# Set environment to production
-ENV NODE_ENV=production
-
-# Run with Bun
-CMD ["bun", "run", "build/index.js"]
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\package.json ###
-
-{
-  "name": "streaming-frontend",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "start": "node build"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-node": "^4.0.1",
-    "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/node": "^20.11.0",
-    "svelte": "^4.2.0",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.7.2",
-    "hls.js": "^1.6.7",
-    "mdb-ui-kit": "^9.1.0",
-    "openpgp": "^6.0.0-alpha.0",  
-    "ovenplayer": "^0.10.43"
-  },
-  "type": "module"
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\svelte.config.js ###
-
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-    preprocess: vitePreprocess(),
-    
-    kit: {
-        adapter: adapter({
-            out: 'build',
-            precompress: false
-        }),
-        
-        csp: {
-            mode: 'auto',
-            directives: {
-                'default-src': ["'self'"],
-                'script-src': ["'self'", "'unsafe-inline'"],
-                'style-src': ["'self'", "'unsafe-inline'", 'https://cdnjs.cloudflare.com'],
-                'img-src': ["'self'", 'data:', 'blob:'],
-                'font-src': ["'self'", 'data:', 'https://cdnjs.cloudflare.com'],  // Added 'data:' for embedded fonts
-                'connect-src': [
-                    "'self'", 
-                    'ws://localhost:*',     // Changed to include port wildcard
-                    'wss://localhost:*',    // Changed to include port wildcard
-                    'http://localhost:*'
-                ],
-                'media-src': ["'self'", 'blob:', 'http://localhost:*'],
-                'object-src': ["'none'"],
-                'frame-ancestors': ["'none'"],
-                'form-action': ["'self'"],
-                'base-uri': ["'self'"]
-            }
-        
-        },
-        
-        // Enable CSRF protection (default is true)
-        csrf: {
-            checkOrigin: true
-        },
-        
-        // Environment variable configuration
-        env: {
-            publicPrefix: 'VITE_'  // This is already correct
-        },
-        
-        // Ensure default appDir is used (don't override)
-        // appDir: '_app' // This is the default, no need to set
-        
-        // Performance: prerender error pages
-        prerender: {
-            entries: ['/'],
-            handleHttpError: ({ path, referrer, message }) => {
-                // Log errors but don't fail build
-                console.warn(`${path} (${referrer}) - ${message}`);
-            }
-        }
-    }
-};
-
-export default config;
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\tsconfig.json ###
-
-{
-    "extends": "./.svelte-kit/tsconfig.json",
-    "compilerOptions": {
-        "allowJs": true,
-        "checkJs": true,
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "resolveJsonModule": true,
-        "skipLibCheck": true,
-        "sourceMap": true,
-        "strict": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "noEmit": true
-    },
-    "include": ["src/**/*", ".svelte-kit/ambient.d.ts"],
-    "exclude": ["node_modules/*", ".svelte-kit/*"]
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\vite.config.ts ###
-
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-    plugins: [sveltekit()],
-    server: {
-        port: 3000,
-        host: true
-    }
-});
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\app.css ###
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-:root {
-    --primary: #561d5e;
-    --black: #000;
-    --white: #fff;
-    --gray: #888;
-    --light-gray: #f5f5f5;
-    --error: #dc3545;
-    --success: #28a745;
-    --border: #333;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: var(--black);
-    color: var(--white);
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-.auth-container {
-    max-width: 400px;
-    margin: 4rem auto;
-    padding: 2rem;
-    background: #111;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-}
-
-h1, h2, h3 {
-    margin-bottom: 1rem;
-    color: var(--white);
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-}
-
-input[type="text"],
-input[type="password"],
-textarea,
-select {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--black);
-    color: var(--white);
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    font-size: 1rem;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-    border-color: var(--primary);
-}
-
-button, .btn {
-    padding: 0.75rem 1.5rem;
-    background: var(--primary);
-    color: var(--white);
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-block;
-    transition: opacity 0.2s;
-}
-
-button:hover:not(:disabled),
-.btn:hover {
-    opacity: 0.9;
-}
-
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.btn-secondary {
-    background: transparent;
-    border: 1px solid var(--primary);
-}
-
-.btn-danger {
-    background: var(--error);
-}
-
-.btn-block {
-    width: 100%;
-    display: block;
-}
-
-.error {
-    color: var(--error);
-    font-size: 0.9rem;
-    margin-top: 0.5rem;
-}
-
-.success {
-    color: var(--success);
-    font-size: 0.9rem;
-    margin-top: 0.5rem;
-}
-
-.nav {
-    background: #111;
-    border-bottom: 1px solid var(--border);
-    padding: 1rem 0;
-    margin-bottom: 2rem;
-}
-
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav-brand {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--white);
-    text-decoration: none;
-}
-
-
-
-.card {
-    background: #111;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
-}
-
-.grid {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-}
-
-.avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.avatar-small {
-    width: 40px;
-    height: 40px;
-}
-
-.file-input-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
-}
-
-.file-input-wrapper input[type="file"] {
-    position: absolute;
-    left: -9999px;
-}
-
-.pgp-key {
-    font-family: monospace;
-    font-size: 0.8rem;
-    background: rgba(255, 255, 255, 0.05);
-    padding: 1rem;
-    border-radius: 4px;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
-
-.fingerprint {
-    font-family: monospace;
-    font-size: 0.9rem;
-}
-
-.table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.table th,
-.table td {
-    padding: 0.75rem;
-    text-align: left;
-    border-bottom: 1px solid var(--border);
-}
-
-.table th {
-    font-weight: 600;
-    color: var(--primary);
-}
-
-.badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: var(--primary);
-    color: var(--white);
-    border-radius: 12px;
-    font-size: 0.85rem;
-}
-
-.badge-admin {
-    background: var(--error);
-}
-
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.modal-content {
-    background: #111;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 2rem;
-    max-width: 500px;
-    width: 90%;
-    max-height: 90vh;
-    overflow-y: auto;
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    color: var(--gray);
-    font-size: 1.5rem;
-    cursor: pointer;
-    padding: 0;
-    width: 32px;
-    height: 32px;
-}
-
-.modal-close:hover {
-    color: var(--white);
-}
-
-/* Ensure stream pages have black background */
-html {
-    background: var(--black);
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 1rem;
-    }
-    
-    .nav-links {
-        flex-wrap: wrap;
-        gap: 1rem;
-    }
-    
-    .tabs {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-}
-
-.avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    object-fit: cover;
-    background: var(--gray);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--white);
-    overflow: hidden;
-}
-
-.avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.avatar-small {
-    width: 40px;
-    height: 40px;
-    font-size: 1rem;
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\app.d.ts ###
-
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-    namespace App {
-        // interface Error {}
-        interface Locals {
-            user?: {
-                id: number;
-                username: string;
-            };
-        }
-        // interface PageData {}
-        // interface PageState {}
-        // interface Platform {}
-    }
-    
-    interface Window {
-        OvenPlayer: any;
-        Hls: any;
-    }
-}
-
-export {};
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\app.html ###
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:,">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <title>Live Streaming Platform</title>
-    
-    <style>
-        /* Global reset for better player scaling */
-        * {
-            box-sizing: border-box;
-        }
-        
-        html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow-x: hidden;
-        }
-    </style>
-
-    %sveltekit.head%
-</head>
-<body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-</body>
-</html>
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\lib\api.js ###
-
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost/api';
-
-async function fetchAPI(endpoint, options = {}) {
-    const response = await fetch(`${API_URL}${endpoint}`, {
-        ...options,
-        headers: {
-            'Content-Type': 'application/json',
-            ...options.headers,
-        },
-        credentials: 'include', // Always include credentials
-    });
-
-    if (!response.ok) {
-        throw new Error(`API error: ${response.statusText}`);
-    }
-
-    return response.json();
-}
-
-export async function getStreamKey() {
-    return fetchAPI('/stream/key');
-}
-
-export async function regenerateStreamKey() {
-    return fetchAPI('/stream/key/regenerate', {
-        method: 'POST',
-    });
-}
-
-export async function validateStreamKey(key) {
-    return fetchAPI(`/stream/validate/${key}`);
-}
-
-export async function getStreamStats(streamKey) {
-    return fetchAPI(`/stream/stats/${streamKey}`);
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\lib\pgp.js ###
-
-// Client-side PGP utilities with encrypted storage
-
-const DB_NAME = 'pgp_storage';
-const DB_VERSION = 1;
-const STORE_NAME = 'encrypted_keys';
-
-// Initialize IndexedDB
-async function initDB() {
-    return new Promise((resolve, reject) => {
-        const request = indexedDB.open(DB_NAME, DB_VERSION);
-        
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => resolve(request.result);
-        
-        request.onupgradeneeded = (event) => {
-            const db = event.target.result;
-            if (!db.objectStoreNames.contains(STORE_NAME)) {
-                db.createObjectStore(STORE_NAME, { keyPath: 'id' });
-            }
-        };
-    });
-}
-
-// Derive key from passphrase using PBKDF2
-async function deriveKey(passphrase, salt) {
-    const enc = new TextEncoder();
-    const keyMaterial = await crypto.subtle.importKey(
-        'raw',
-        enc.encode(passphrase),
-        'PBKDF2',
-        false,
-        ['deriveBits', 'deriveKey']
-    );
-    
-    return crypto.subtle.deriveKey(
-        {
-            name: 'PBKDF2',
-            salt: salt,
-            iterations: 100000,
-            hash: 'SHA-256'
-        },
-        keyMaterial,
-        { name: 'AES-GCM', length: 256 },
-        true,
-        ['encrypt', 'decrypt']
-    );
-}
-
-// Validate passphrase strength
-export function validatePassphrase(passphrase) {
-    if (!passphrase || passphrase.length < 12) {
-        return 'Passphrase must be at least 12 characters';
-    }
-    
-    // Check for complexity
-    const hasUpper = /[A-Z]/.test(passphrase);
-    const hasLower = /[a-z]/.test(passphrase);
-    const hasNumber = /[0-9]/.test(passphrase);
-    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(passphrase);
-    
-    const complexity = [hasUpper, hasLower, hasNumber, hasSpecial].filter(Boolean).length;
-    if (complexity < 3) {
-        return 'Passphrase must contain at least 3 of: uppercase, lowercase, numbers, special characters';
-    }
-    
-    return null; // Valid
-}
-
-export async function generateKeyPair(username, passphrase) {
-    if (typeof window === 'undefined') {
-        throw new Error('PGP operations can only be performed in the browser');
-    }
-    
-    // Validate passphrase
-    const passphraseError = validatePassphrase(passphrase);
-    if (passphraseError) {
-        throw new Error(passphraseError);
-    }
-    
-    const { generateKey, readKey } = await import('openpgp');
-    
-    const { privateKey, publicKey } = await generateKey({
-        type: 'rsa',
-        rsaBits: 2048,
-        userIDs: [{ name: username }],
-        passphrase // Always encrypt with passphrase
-    });
-    
-    const key = await readKey({ armoredKey: publicKey });
-    const fingerprint = key.getFingerprint();
-    
-    return {
-        privateKey,
-        publicKey,
-        fingerprint
-    };
-}
-
-export async function getFingerprint(publicKey) {
-    if (typeof window === 'undefined') return null;
-    
-    try {
-        const { readKey } = await import('openpgp');
-        const key = await readKey({ armoredKey: publicKey });
-        return key.getFingerprint();
-    } catch (error) {
-        console.error('Error getting fingerprint:', error);
-        return null;
-    }
-}
-
-// Save encrypted private key to IndexedDB
-export async function saveEncryptedPrivateKey(passphrase, armoredKey) {
-    if (typeof window === 'undefined') {
-        throw new Error('Storage operations can only be performed in the browser');
-    }
-    
-    // Validate passphrase
-    const passphraseError = validatePassphrase(passphrase);
-    if (passphraseError) {
-        throw new Error(passphraseError);
-    }
-    
-    try {
-        // Generate random salt and IV
-        const salt = crypto.getRandomValues(new Uint8Array(16));
-        const iv = crypto.getRandomValues(new Uint8Array(12));
-        
-        // Derive encryption key
-        const key = await deriveKey(passphrase, salt);
-        
-        // Encrypt the private key
-        const enc = new TextEncoder();
-        const encrypted = await crypto.subtle.encrypt(
-            {
-                name: 'AES-GCM',
-                iv: iv
-            },
-            key,
-            enc.encode(armoredKey)
-        );
-        
-        // Store in IndexedDB
-        const db = await initDB();
-        const transaction = db.transaction([STORE_NAME], 'readwrite');
-        const store = transaction.objectStore(STORE_NAME);
-        
-        await store.put({
-            id: 'primary_key',
-            salt: Array.from(salt),
-            iv: Array.from(iv),
-            encrypted: Array.from(new Uint8Array(encrypted)),
-            timestamp: Date.now()
-        });
-        
-        return true;
-    } catch (error) {
-        console.error('Failed to save encrypted key:', error);
-        throw new Error('Failed to save encrypted key');
-    }
-}
-
-// Unlock and retrieve private key from IndexedDB
-export async function unlockPrivateKey(passphrase) {
-    if (typeof window === 'undefined') {
-        throw new Error('Storage operations can only be performed in the browser');
-    }
-    
-    if (!passphrase) {
-        throw new Error('Passphrase required');
-    }
-    
-    try {
-        const db = await initDB();
-        const transaction = db.transaction([STORE_NAME], 'readonly');
-        const store = transaction.objectStore(STORE_NAME);
-        
-        const data = await new Promise((resolve, reject) => {
-            const request = store.get('primary_key');
-            request.onsuccess = () => resolve(request.result);
-            request.onerror = () => reject(request.error);
-        });
-        
-        if (!data) {
-            throw new Error('No encrypted key found');
-        }
-        
-        // Reconstruct typed arrays
-        const salt = new Uint8Array(data.salt);
-        const iv = new Uint8Array(data.iv);
-        const encrypted = new Uint8Array(data.encrypted);
-        
-        // Derive decryption key
-        const key = await deriveKey(passphrase, salt);
-        
-        // Decrypt
-        const decrypted = await crypto.subtle.decrypt(
-            {
-                name: 'AES-GCM',
-                iv: iv
-            },
-            key,
-            encrypted
-        );
-        
-        const dec = new TextDecoder();
-        return dec.decode(decrypted);
-    } catch (error) {
-        console.error('Failed to unlock private key:', error);
-        throw new Error('Failed to unlock private key. Check your passphrase.');
-    }
-}
-
-// Check if an encrypted key exists
-export async function hasEncryptedKey() {
-    if (typeof window === 'undefined') return false;
-    
-    try {
-        const db = await initDB();
-        const transaction = db.transaction([STORE_NAME], 'readonly');
-        const store = transaction.objectStore(STORE_NAME);
-        
-        const data = await new Promise((resolve) => {
-            const request = store.get('primary_key');
-            request.onsuccess = () => resolve(request.result);
-            request.onerror = () => resolve(null);
-        });
-        
-        return !!data;
-    } catch {
-        return false;
-    }
-}
-
-// Remove encrypted key from IndexedDB
-export async function removeEncryptedPrivateKey() {
-    if (typeof window === 'undefined') return;
-    
-    try {
-        const db = await initDB();
-        const transaction = db.transaction([STORE_NAME], 'readwrite');
-        const store = transaction.objectStore(STORE_NAME);
-        await store.delete('primary_key');
-    } catch (error) {
-        console.error('Failed to remove encrypted key:', error);
-    }
-}
-
-export async function signMessage(message, privateKeyArmored, passphrase) {
-    if (typeof window === 'undefined') {
-        throw new Error('PGP operations can only be performed in the browser');
-    }
-    
-    if (!passphrase) {
-        throw new Error('Passphrase required to unlock private key');
-    }
-    
-    const { decryptKey, readPrivateKey, createMessage, sign } = await import('openpgp');
-    
-    const privateKey = await decryptKey({
-        privateKey: await readPrivateKey({ armoredKey: privateKeyArmored }),
-        passphrase
-    });
-    
-    const unsignedMessage = await createMessage({ text: message });
-    const signature = await sign({
-        message: unsignedMessage,
-        signingKeys: privateKey,
-        detached: true
-    });
-    
-    return signature;
-}
-
-export async function verifySignature(message, signature, publicKeyArmored) {
-    if (typeof window === 'undefined') return false;
-    
-    try {
-        const { readKey, readSignature, createMessage, verify } = await import('openpgp');
-        
-        const publicKey = await readKey({ armoredKey: publicKeyArmored });
-        const signatureObj = await readSignature({ armoredSignature: signature });
-        const messageObj = await createMessage({ text: message });
-        
-        const verificationResult = await verify({
-            message: messageObj,
-            signature: signatureObj,
-            verificationKeys: publicKey
-        });
-        
-        const { verified } = verificationResult.signatures[0];
-        return await verified;
-    } catch (error) {
-        console.error('Signature verification error:', error);
-        return false;
-    }
-}
-
-// DEPRECATED - DO NOT USE
-export function storePrivateKey() {
-    throw new Error('Plaintext key storage is disabled for security. Use saveEncryptedPrivateKey() instead.');
-}
-
-export function getStoredPrivateKey() {
-    throw new Error('Plaintext key storage is disabled for security. Use unlockPrivateKey() instead.');
-}
-
-export function removeStoredPrivateKey() {
-    throw new Error('Plaintext key storage is disabled for security. Use removeEncryptedPrivateKey() instead.');
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\lib\websocket.js ###
-
-let ws = null;
-let reconnectTimeout = null;
-
-const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
-
-export function connectWebSocket(onMessage) {
-    if (ws?.readyState === WebSocket.OPEN) return;
-
-    // WebSocket doesn't support withCredentials, but cookies are sent automatically
-    // on same-origin requests
-    ws = new WebSocket(`${WS_URL}/stream`);
-
-    ws.onopen = () => {
-        console.log('WebSocket connected');
-        ws?.send(JSON.stringify({ type: 'subscribe' }));
-    };
-
-    ws.onmessage = (event) => {
-        try {
-            const data = JSON.parse(event.data);
-            onMessage(data);
-        } catch (error) {
-            console.error('Failed to parse WebSocket message:', error);
-        }
-    };
-
-    ws.onerror = (error) => {
-        console.error('WebSocket error:', error);
-    };
-
-    ws.onclose = () => {
-        console.log('WebSocket disconnected');
-        // Reconnect after 5 seconds
-        reconnectTimeout = setTimeout(() => {
-            connectWebSocket(onMessage);
-        }, 5000);
-    };
-}
-
-export function disconnectWebSocket() {
-    if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-        reconnectTimeout = null;
-    }
-
-    if (ws) {
-        ws.close();
-        ws = null;
-    }
-}
-
-export function sendMessage(message) {
-    if (ws?.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify(message));
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\lib\stores\auth.js ###
-
-import { writable, derived } from 'svelte/store';
-import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
-
-function createAuthStore() {
-    const { subscribe, set, update } = writable({
-        user: null,
-        loading: true
-    });
-
-    return {
-        subscribe,
-        
-        async init() {
-            if (!browser) return;
-            
-            // Use cookie-based auth - no localStorage tokens
-            try {
-                const response = await fetch('/api/user/me', {
-                    credentials: 'include' // Send cookies
-                });
-                
-                if (response.ok) {
-                    const data = await response.json();
-                    set({ user: data.user, loading: false });
-                } else {
-                    set({ user: null, loading: false });
-                }
-            } catch (error) {
-                console.error('Auth init error:', error);
-                set({ user: null, loading: false });
-            }
-        },
-        
-        async login(credentials) {
-            const response = await fetch('/api/auth/login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include', // Receive httpOnly cookie
-                body: JSON.stringify(credentials)
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                // Server sets httpOnly cookie, we just store user data
-                set({ user: data.user, loading: false });
-                goto('/');
-                return { success: true };
-            }
-            
-            return { success: false, error: data.error || 'Invalid credentials' };
-        },
-        
-        async loginWithPgp(username, signature, challenge) {
-            const response = await fetch('/api/auth/pgp-verify', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include', // Receive httpOnly cookie
-                body: JSON.stringify({ username, signature, challenge })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                // Server sets httpOnly cookie, we just store user data
-                set({ user: data.user, loading: false });
-                goto('/');
-                return { success: true };
-            }
-            
-            return { success: false, error: data.error || 'Invalid signature' };
-        },
-        
-        async register(userData) {
-            const response = await fetch('/api/auth/register', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify(userData)
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                return { success: true, userId: data.userId };
-            }
-            
-            return { success: false, error: data.error || 'Registration failed' };
-        },
-        
-        async updateColor(color) {
-            const response = await fetch('/api/user/color', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include', // Use cookies for auth
-                body: JSON.stringify({ color })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                // Update the store with new user data
-                update(state => ({
-                    ...state,
-                    user: { 
-                        ...state.user, 
-                        userColor: data.color,
-                        colorCode: data.color
-                    }
-                }));
-                
-                return { success: true, color: data.color };
-            }
-            
-            return { success: false, error: data.error || 'Failed to update color' };
-        },
-        
-        updateUser(userData) {
-            update(state => ({
-                ...state,
-                user: userData
-            }));
-        },
-        
-        async logout() {
-            // Call logout endpoint to clear httpOnly cookie
-            await fetch('/api/auth/logout', {
-                method: 'POST',
-                credentials: 'include'
-            });
-            
-            set({ user: null, loading: false });
-            goto('/login');
-        }
-    };
-}
-
-export const auth = createAuthStore();
-
-export const isAuthenticated = derived(
-    auth,
-    $auth => !!$auth.user
-);
-
-export const isAdmin = derived(
-    auth,
-    $auth => $auth.user?.isAdmin || false
-);
-
-export const isStreamer = derived(
-    auth,
-    $auth => $auth.user?.isStreamer || false
-);
-
-export const userColor = derived(
-    auth,
-    $auth => $auth.user?.colorCode || '#561D5E'
-);
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\lib\stores\user.js ###
-
-import { writable, derived } from 'svelte/store';
-import { browser } from '$app/environment';
-
-function createUserStore() {
-    // Initialize from localStorage if in browser
-    const initialUser = browser ? JSON.parse(localStorage.getItem('user') || 'null') : null;
-    
-    const { subscribe, set, update } = writable(initialUser);
-
-    return {
-        subscribe,
-        set: (user) => {
-            if (browser && user) {
-                localStorage.setItem('user', JSON.stringify(user));
-            } else if (browser) {
-                localStorage.removeItem('user');
-            }
-            set(user);
-        },
-        update: (fn) => {
-            update(currentUser => {
-                const newUser = fn(currentUser);
-                if (browser && newUser) {
-                    localStorage.setItem('user', JSON.stringify(newUser));
-                }
-                return newUser;
-            });
-        },
-        updateColor: async (newColor) => {
-            const token = browser ? localStorage.getItem('token') : null;
-            if (!token) return false;
-
-            try {
-                const response = await fetch('/api/user/color', {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${token}`
-                    },
-                    body: JSON.stringify({ color: newColor })
-                });
-
-                const data = await response.json();
-                if (data.success) {
-                    // Update the store with new user data
-                    if (data.user) {
-                        // Full user data returned
-                        set(data.user);
-                    } else {
-                        // Only color returned, update existing user
-                        update(u => u ? { ...u, userColor: data.color } : null);
-                    }
-                    return true;
-                }
-                return false;
-            } catch (error) {
-                console.error('Failed to update color:', error);
-                return false;
-            }
-        },
-        refresh: async () => {
-            const token = browser ? localStorage.getItem('token') : null;
-            if (!token) return;
-
-            try {
-                const response = await fetch('/api/user/me', {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data.success && data.user) {
-                        set(data.user);
-                        return data.user;
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to refresh user:', error);
-            }
-            return null;
-        }
-    };
-}
-
-export const userStore = createUserStore();
-
-// Derived store for just the color
-export const userColor = derived(
-    userStore,
-    $user => $user?.userColor || '#561D5E'
-);
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\+layout.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { auth, isAuthenticated, isAdmin, isStreamer, userColor } from '$lib/stores/auth';
-    import { page } from '$app/stores';
-    import '../app.css';
-    
-    let showDropdown = false;
-    
-    // Close dropdown when route changes
-    $: if ($page) {
-        showDropdown = false;
-    }
-    
-    onMount(() => {
-        auth.init();
-        
-        // Close dropdown when clicking outside
-        const handleClickOutside = (event) => {
-            if (!event.target.closest('.user-menu')) {
-                showDropdown = false;
-            }
-        };
-        
-        document.addEventListener('click', handleClickOutside);
-        return () => document.removeEventListener('click', handleClickOutside);
-    });
-    
-    function toggleDropdown() {
-        showDropdown = !showDropdown;
-    }
-</script>
-
-<style>
-    .nav {
-        background: #111;
-        border-bottom: 1px solid var(--border);
-        padding: 1rem 0;
-        margin-bottom: 2rem;
-    }
-    
-    .nav-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    
-    .nav-brand {
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: var(--white);
-        text-decoration: none;
-    }
-    
-    .nav-links {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-    }
-    
-    .nav-link {
-        color: var(--white);
-        text-decoration: none;
-        transition: color 0.2s;
-        padding: 0.5rem 1rem;
-    }
-    
-    .nav-link:hover {
-        color: var(--primary);
-    }
-    
-    .user-menu {
-        position: relative;
-    }
-    
-    .user-avatar-btn {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background: var(--gray);
-        border: 2px solid transparent;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--white);
-        font-weight: 600;
-        transition: all 0.2s;
-        padding: 0;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .user-avatar-btn.has-color {
-        background: var(--user-color);
-    }
-    
-    .user-avatar-btn.has-color.with-image {
-        border-color: var(--user-color);
-        border-width: 3px;
-    }
-    
-    .user-avatar-btn:hover {
-        transform: scale(1.05);
-    }
-    
-    .user-avatar-btn.has-color:hover {
-        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
-    }
-    
-    .user-avatar-btn img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border: none;
-    }
-    
-    .dropdown {
-        position: absolute;
-        right: 0;
-        top: calc(100% + 0.5rem);
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        min-width: 200px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        z-index: 1000;
-        overflow: hidden;
-    }
-    
-    .dropdown-header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--border);
-    }
-    
-    .dropdown-username {
-        font-weight: 600;
-        margin-bottom: 0.25rem;
-        color: var(--white);
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        transition: color 0.2s;
-    }
-    
-    .dropdown-username:hover {
-        color: var(--primary);
-    }
-    
-    .user-color-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        display: inline-block;
-        margin-right: 0.5rem;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    .dropdown-role {
-        font-size: 0.85rem;
-        color: var(--gray);
-    }
-    
-    .dropdown-item {
-        display: block;
-        padding: 0.75rem 1rem;
-        color: var(--white);
-        text-decoration: none;
-        transition: background 0.2s;
-    }
-    
-    .dropdown-item:hover {
-        background: rgba(86, 29, 94, 0.2);
-    }
-    
-    .dropdown-divider {
-        height: 1px;
-        background: var(--border);
-        margin: 0.5rem 0;
-    }
-    
-    .dropdown-item.logout {
-        color: var(--error);
-    }
-</style>
-
-<nav class="nav">
-    <div class="nav-container">
-        <a href="/" class="nav-brand">Stream</a>
-        
-        {#if !$auth.loading}
-            {#if $isAuthenticated}
-                <div class="user-menu">
-                    <button 
-                        class="user-avatar-btn" 
-                        class:has-color={$userColor}
-                        class:with-image={$auth.user.avatarUrl}
-                        style="--user-color: {$userColor}"
-                        on:click={toggleDropdown}
-                    >
-                        {#if $auth.user.avatarUrl}
-                            <img src={$auth.user.avatarUrl} alt={$auth.user.username} />
-                        {:else}
-                            {$auth.user.username.charAt(0).toUpperCase()}
-                        {/if}
-                    </button>
-                    
-                    {#if showDropdown}
-                        <div class="dropdown">
-                            <div class="dropdown-header">
-                                <a href="/profile/{$auth.user.username}" class="dropdown-username">
-                                    <span 
-                                        class="user-color-dot" 
-                                        style="background: {$userColor}"
-                                    ></span>
-                                    {$auth.user.username}
-                                </a>
-                                <div class="dropdown-role">
-                                    {#if $isAdmin}
-                                        Admin
-                                    {:else if $isStreamer}
-                                        Streamer
-                                    {:else}
-                                        User
-                                    {/if}
-                                </div>
-                            </div>
-                            
-                            <a href="/settings" class="dropdown-item">
-                                Settings
-                            </a>
-                            {#if $isStreamer}
-                                <a href="/my-realms" class="dropdown-item">
-                                    My Realms
-                                </a>
-                            {/if}
-                            {#if $isAdmin}
-                                <a href="/admin" class="dropdown-item">
-                                    Admin
-                                </a>
-                            {/if}
-                            
-                            <div class="dropdown-divider"></div>
-                            
-                            <button class="dropdown-item logout" on:click={() => auth.logout()}>
-                                Logout
-                            </button>
-                        </div>
-                    {/if}
-                </div>
-            {:else}
-                <div class="nav-links">
-                    <a href="/login" class="nav-link">Login</a>
-                </div>
-            {/if}
-        {/if}
-    </div>
-</nav>
-
-<slot />
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\+page.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { browser } from '$app/environment';
-    
-    let streams = [];
-    let interval;
-    let loading = true;
-    
-    async function loadStreams() {
-        if (!browser) return;
-        
-        try {
-            const res = await fetch('/api/realms/live');
-            if (res.ok) {
-                streams = await res.json();
-            }
-        } catch (e) {
-            console.error('Failed to load streams:', e);
-        } finally {
-            loading = false;
-        }
-    }
-    
-    onMount(() => {
-        loadStreams();
-        // Refresh every 10 seconds
-        interval = setInterval(loadStreams, 10000);
-        
-        return () => {
-            if (interval) clearInterval(interval);
-        };
-    });
-</script>
-
-<style>
-    .hero {
-        text-align: center;
-        padding: 4rem 0;
-        margin-bottom: 3rem;
-    }
-    
-    .hero h1 {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, var(--primary), #8b3a92);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-    }
-    
-    .hero p {
-        font-size: 1.25rem;
-        color: var(--gray);
-    }
-    
-    .stream-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 2rem;
-        margin-bottom: 2rem;
-    }
-    
-    .stream-card {
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        overflow: hidden;
-        transition: transform 0.2s, box-shadow 0.2s;
-        text-decoration: none;
-        color: var(--white);
-    }
-    
-    .stream-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 24px rgba(86, 29, 94, 0.3);
-        border-color: var(--primary);
-    }
-    
-    .stream-thumbnail {
-        width: 100%;
-        height: 180px;
-        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-    
-    .live-badge {
-        position: absolute;
-        top: 1rem;
-        left: 1rem;
-        background: #ff0000;
-        color: white;
-        padding: 0.25rem 0.75rem;
-        border-radius: 4px;
-        font-size: 0.85rem;
-        font-weight: 600;
-        text-transform: uppercase;
-    }
-    
-    .stream-info {
-        padding: 1.5rem;
-    }
-    
-    .stream-info h3 {
-        margin: 0 0 0.5rem 0;
-        font-size: 1.25rem;
-    }
-    
-    .stream-meta {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        color: var(--gray);
-        font-size: 0.9rem;
-    }
-    
-    .streamer-info {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .streamer-avatar {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background: var(--gray);
-    }
-    
-    .viewer-count {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-    }
-    
-    .viewer-count::before {
-        content: '•';
-        width: 8px;
-        height: 8px;
-        background: #ff0000;
-        border-radius: 50%;
-        margin-right: 0.25rem;
-    }
-    
-    .no-streams {
-        text-align: center;
-        padding: 4rem 0;
-        color: var(--gray);
-    }
-    
-    .no-streams-icon {
-        font-size: 4rem;
-        margin-bottom: 1rem;
-        opacity: 0.5;
-    }
-</style>
-
-<div class="container">
-    <div class="hero">
-        <h1>Live Streams</h1>
-        <p>Watch your favorite streamers live</p>
-    </div>
-    
-    {#if loading}
-        <div style="text-align: center; padding: 2rem;">
-            <p>Loading streams...</p>
-        </div>
-    {:else if streams.length === 0}
-        <div class="no-streams">
-            <div class="no-streams-icon">📺</div>
-            <h2>No streams live right now</h2>
-            <p>Check back later or become a streamer yourself!</p>
-        </div>
-    {:else}
-        <div class="stream-grid">
-            {#each streams as stream}
-                <a href={`/${stream.name}/live`} class="stream-card">
-                    <div class="stream-thumbnail">
-                        <div class="live-badge">LIVE</div>
-                        <span style="font-size: 3rem; opacity: 0.3;">🎮</span>
-                    </div>
-                    <div class="stream-info">
-                        <h3>{stream.name}</h3>
-                        <div class="stream-meta">
-                            <div class="streamer-info">
-                                {#if stream.avatarUrl}
-                                    <img src={stream.avatarUrl} alt={stream.username} class="streamer-avatar" />
-                                {:else}
-                                    <div class="streamer-avatar"></div>
-                                {/if}
-                                <span>{stream.username}</span>
-                            </div>
-                            <div class="viewer-count">
-                                {stream.viewerCount} {stream.viewerCount === 1 ? 'viewer' : 'viewers'}
-                            </div>
-                        </div>
-                    </div>
-                </a>
-            {/each}
-        </div>
-    {/if}
-</div>
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\admin\+page.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { auth, isAuthenticated, isAdmin } from '$lib/stores/auth';
-    import { goto } from '$app/navigation';
-    
-    let users = [];
-    let streams = [];
-    let loading = true;
-    let message = '';
-    let error = '';
-    let activeTab = 'users';
-    
-    onMount(async () => {
-        await auth.init();
-        
-        if (!$isAuthenticated) {
-            goto('/login');
-            return;
-        }
-        
-        if (!$isAdmin) {
-            goto('/');
-            return;
-        }
-        
-        await loadData();
-    });
-    
-    async function loadData() {
-        loading = true;
-        await Promise.all([loadUsers(), loadStreams()]);
-        loading = false;
-    }
-    
-    async function loadUsers() {
-        try {
-            const response = await fetch('/api/admin/users', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                users = data.users;
-            } else {
-                error = 'Failed to load users';
-            }
-        } catch (e) {
-            error = 'Error loading users';
-            console.error(e);
-        }
-    }
-    
-    async function loadStreams() {
-        try {
-            const response = await fetch('/api/admin/streams', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                streams = data.streams || [];
-            } else {
-                error = 'Failed to load streams';
-            }
-        } catch (e) {
-            error = 'Error loading streams';
-            console.error(e);
-        }
-    }
-    
-    async function promoteToStreamer(userId) {
-        try {
-            const response = await fetch(`/api/admin/users/${userId}/promote`, {
-                method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                message = 'User promoted to streamer';
-                await loadUsers();
-            } else {
-                error = 'Failed to promote user';
-            }
-        } catch (e) {
-            error = 'Error promoting user';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; error = ''; }, 3000);
-    }
-    
-    async function demoteFromStreamer(userId) {
-        if (!confirm('Remove streamer privileges from this user? Their realms will remain but they cannot create new ones.')) {
-            return;
-        }
-        
-        try {
-            const response = await fetch(`/api/admin/users/${userId}/demote`, {
-                method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                message = 'User demoted from streamer';
-                await loadUsers();
-            } else {
-                error = 'Failed to demote user';
-            }
-        } catch (e) {
-            error = 'Error demoting user';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; error = ''; }, 3000);
-    }
-    
-    async function disconnectStream(streamKey) {
-        if (!confirm(`Disconnect stream ${streamKey}?`)) return;
-        
-        try {
-            const response = await fetch(`/api/admin/streams/${streamKey}/disconnect`, {
-                method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                message = 'Stream disconnected';
-                await loadStreams();
-            } else {
-                error = 'Failed to disconnect stream';
-            }
-        } catch (e) {
-            error = 'Error disconnecting stream';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; error = ''; }, 3000);
-    }
-    
-    function formatDate(dateStr) {
-        return new Date(dateStr).toLocaleString();
-    }
-</script>
-
-<style>
-    .admin-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 2rem;
-    }
-    
-    .stats-cards {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 1rem;
-        margin-bottom: 2rem;
-    }
-    
-    .stat-card {
-        background: #111;
-        border: 1px solid var(--border);
-        padding: 1.5rem;
-        border-radius: 8px;
-        text-align: center;
-    }
-    
-    .stat-value {
-        font-size: 2rem;
-        font-weight: 600;
-        color: var(--primary);
-    }
-    
-    .stat-label {
-        color: var(--gray);
-        margin-top: 0.5rem;
-    }
-    
-    .data-table {
-        width: 100%;
-        overflow-x: auto;
-    }
-    
-    .data-table table {
-        width: 100%;
-        min-width: 800px;
-    }
-    
-    .stream-key-cell {
-        font-family: monospace;
-        font-size: 0.9rem;
-        max-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    
-    .actions {
-        display: flex;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-    }
-    
-    .action-btn {
-        padding: 0.25rem 0.75rem;
-        font-size: 0.85rem;
-    }
-    
-    .role-badges {
-        display: flex;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-    }
-</style>
-
-<div class="container">
-    <div class="admin-header">
-        <h1>Admin Dashboard</h1>
-        <button on:click={loadData} disabled={loading}>
-            {loading ? 'Refreshing...' : 'Refresh'}
-        </button>
-    </div>
-    
-    {#if message}
-        <div class="success" style="margin-bottom: 1rem;">{message}</div>
-    {/if}
-    
-    {#if error}
-        <div class="error" style="margin-bottom: 1rem;">{error}</div>
-    {/if}
-    
-    <div class="stats-cards">
-        <div class="stat-card">
-            <div class="stat-value">{users.length}</div>
-            <div class="stat-label">Total Users</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{users.filter(u => u.isAdmin).length}</div>
-            <div class="stat-label">Admins</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{users.filter(u => u.isStreamer).length}</div>
-            <div class="stat-label">Streamers</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{streams.length}</div>
-            <div class="stat-label">Active Streams</div>
-        </div>
-    </div>
-    
-    <div class="tab-container">
-        <div class="tabs">
-            <button 
-                class="tab" 
-                class:active={activeTab === 'users'}
-                on:click={() => activeTab = 'users'}
-            >
-                Users
-            </button>
-            <button 
-                class="tab" 
-                class:active={activeTab === 'streams'}
-                on:click={() => activeTab = 'streams'}
-            >
-                Active Streams
-            </button>
-        </div>
-    </div>
-    
-    {#if loading}
-        <p>Loading...</p>
-    {:else if activeTab === 'users'}
-        <div class="card">
-            <div class="data-table">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>ID</th>
-                            <th>Username</th>
-                            <th>Roles</th>
-                            <th>Realms</th>
-                            <th>Created</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {#each users as user}
-                            <tr>
-                                <td>{user.id}</td>
-                                <td>
-                                    <a href="/profile/{user.username}" style="color: var(--primary);">
-                                        {user.username}
-                                    </a>
-                                </td>
-                                <td>
-                                    <div class="role-badges">
-                                        {#if user.isAdmin}
-                                            <span class="badge badge-admin">Admin</span>
-                                        {/if}
-                                        {#if user.isStreamer}
-                                            <span class="badge" style="background: #28a745;">Streamer</span>
-                                        {/if}
-                                        {#if !user.isAdmin && !user.isStreamer}
-                                            <span class="badge" style="background: #6c757d;">User</span>
-                                        {/if}
-                                    </div>
-                                </td>
-                                <td>{user.realmCount || 0}</td>
-                                <td>{formatDate(user.createdAt)}</td>
-                                <td>
-                                    <div class="actions">
-                                        <a href="/profile/{user.username}" class="btn btn-secondary action-btn">
-                                            View
-                                        </a>
-                                        {#if !user.isAdmin}
-                                            {#if !user.isStreamer}
-                                                <button 
-                                                    class="btn action-btn"
-                                                    style="background: #28a745;"
-                                                    on:click={() => promoteToStreamer(user.id)}
-                                                >
-                                                    Make Streamer
-                                                </button>
-                                            {:else}
-                                                <button 
-                                                    class="btn btn-danger action-btn"
-                                                    on:click={() => demoteFromStreamer(user.id)}
-                                                >
-                                                    Remove Streamer
-                                                </button>
-                                            {/if}
-                                        {/if}
-                                    </div>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    {:else if activeTab === 'streams'}
-        <div class="card">
-            {#if streams.length > 0}
-                <div class="data-table">
-                    <table class="table">
-                        <thead>
-                            <tr>
-                                <th>Realm</th>
-                                <th>Streamer</th>
-                                <th>Stream Key</th>
-                                <th>Viewers</th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {#each streams as stream}
-                                <tr>
-                                    <td>
-                                        <a href="/{stream.name}/live" style="color: var(--primary);">
-                                            {stream.name}
-                                        </a>
-                                    </td>
-                                    <td>{stream.username}</td>
-                                    <td class="stream-key-cell" title={stream.streamKey}>
-                                        {stream.streamKey}
-                                    </td>
-                                    <td>{stream.viewerCount}</td>
-                                    <td>
-                                        <button 
-                                            class="btn btn-danger action-btn"
-                                            on:click={() => disconnectStream(stream.streamKey)}
-                                        >
-                                            Disconnect
-                                        </button>
-                                    </td>
-                                </tr>
-                            {/each}
-                        </tbody>
-                    </table>
-                </div>
-            {:else}
-                <p style="color: var(--gray);">No active streams</p>
-            {/if}
-        </div>
-    {/if}
-</div>
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\login\+page.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { auth, isAuthenticated } from '$lib/stores/auth';
-    import { goto } from '$app/navigation';
-    import * as pgp from '$lib/pgp';
-    import '../../app.css';
-    
-    let mode = 'login';
-    let username = '';
-    let password = '';
-    let confirmPassword = '';
-    let keyPassphrase = '';
-    let confirmKeyPassphrase = '';
-    let error = '';
-    let loading = false;
-    let pgpLoading = false;
-    
-    // PGP login
-    let pgpChallenge = '';
-    let pgpPublicKey = '';
-    let pgpSignature = '';
-    
-    // For displaying generated keys
-    let showGeneratedKeys = false;
-    let generatedPrivateKey = '';
-    let generatedPublicKey = '';
-    let saveKeyLocally = false;
-    
-    // Show PGP command example
-    let showPgpExample = false;
-    
-    // For unlocking stored key
-    let storedKeyPassphrase = '';
-    
-    onMount(async () => {
-        await auth.init();
-        if ($isAuthenticated) {
-            goto('/');
-        }
-    });
-    
-    function validatePassword(pass) {
-        if (pass.length < 8) {
-            return 'Password must be at least 8 characters';
-        }
-        if (!/[0-9]/.test(pass)) {
-            return 'Password must contain at least one number';
-        }
-        if (!/[!@#$%^&*(),.?":{}|<>]/.test(pass)) {
-            return 'Password must contain at least one symbol';
-        }
-        return '';
-    }
-    
-    async function handleLogin() {
-        error = '';
-        loading = true;
-        
-        const result = await auth.login({ username, password });
-        
-        if (!result.success) {
-            error = result.error;
-            
-            // If it's a PGP-only error, automatically switch to PGP login
-            if (error && error.includes('PGP-only login enabled')) {
-                // Clear the error and initiate PGP login
-                error = '';
-                loading = false;
-                await initiatePgpLogin();
-                return;
-            }
-        }
-        
-        loading = false;
-    }
-    
-    async function handleRegister() {
-        error = '';
-        
-        if (password !== confirmPassword) {
-            error = 'Passwords do not match';
-            return;
-        }
-        
-        const passwordError = validatePassword(password);
-        if (passwordError) {
-            error = passwordError;
-            return;
-        }
-        
-        if (keyPassphrase !== confirmKeyPassphrase) {
-            error = 'Key passphrases do not match';
-            return;
-        }
-        
-        const passphraseError = pgp.validatePassphrase(keyPassphrase);
-        if (passphraseError) {
-            error = passphraseError;
-            return;
-        }
-        
-        loading = true;
-        
-        try {
-            // Generate PGP key pair with passphrase
-            const keyPair = await pgp.generateKeyPair(username, keyPassphrase);
-            
-            const result = await auth.register({
-                username,
-                password,
-                publicKey: keyPair.publicKey,
-                fingerprint: keyPair.fingerprint
-            });
-            
-            if (result.success) {
-                // Save keys for display
-                generatedPrivateKey = keyPair.privateKey;
-                generatedPublicKey = keyPair.publicKey;
-                showGeneratedKeys = true;
-            } else {
-                error = result.error;
-            }
-        } catch (e) {
-            error = e.message || 'Failed to generate PGP keys';
-            console.error(e);
-        }
-        
-        loading = false;
-    }
-    
-    async function proceedAfterKeys() {
-        loading = true;
-        
-        try {
-            // If user wants to save locally, store encrypted
-            if (saveKeyLocally) {
-                await pgp.saveEncryptedPrivateKey(keyPassphrase, generatedPrivateKey);
-            }
-            
-            // Auto-login after registration
-            const result = await auth.login({ username, password });
-            if (result.success) {
-                goto('/');
-            } else {
-                showGeneratedKeys = false;
-                mode = 'login';
-                error = 'Registration successful. Please login.';
-            }
-        } catch (e) {
-            error = 'Failed to save keys: ' + e.message;
-        }
-        
-        loading = false;
-    }
-    
-    async function initiatePgpLogin() {
-        error = '';
-        pgpLoading = true;
-        
-        try {
-            const response = await fetch('/api/auth/pgp-challenge', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                pgpChallenge = data.challenge;
-                pgpPublicKey = data.publicKey;
-                
-                // Clear the signature field
-                pgpSignature = '';
-                
-                // Check if we have a stored key
-                const hasKey = await pgp.hasEncryptedKey();
-                if (hasKey) {
-                    // We'll need to unlock it
-                    storedKeyPassphrase = '';
-                }
-            } else {
-                error = data.error || 'User not found or PGP not enabled';
-            }
-        } catch (e) {
-            error = 'Failed to initiate PGP login';
-            console.error(e);
-        }
-        
-        pgpLoading = false;
-    }
-    
-    async function signWithStoredKey() {
-        error = '';
-        loading = true;
-        
-        try {
-            // Unlock the stored private key
-            const privateKey = await pgp.unlockPrivateKey(storedKeyPassphrase);
-            
-            // Sign the challenge
-            pgpSignature = await pgp.signMessage(pgpChallenge, privateKey, storedKeyPassphrase);
-            
-            // Clear passphrase for security
-            storedKeyPassphrase = '';
-        } catch (e) {
-            error = 'Failed to unlock key or sign: ' + e.message;
-        }
-        
-        loading = false;
-    }
-    
-    async function handlePgpLogin() {
-        error = '';
-        loading = true;
-        
-        try {
-            if (!pgpSignature) {
-                error = 'Please provide the signed message';
-                loading = false;
-                return;
-            }
-            
-            const result = await auth.loginWithPgp(username, pgpSignature, pgpChallenge);
-            
-            if (!result.success) {
-                error = result.error;
-            }
-        } catch (e) {
-            error = 'Failed to verify signature';
-            console.error(e);
-        }
-        
-        loading = false;
-    }
-    
-    function resetPgpLogin() {
-        pgpChallenge = '';
-        pgpPublicKey = '';
-        pgpSignature = '';
-        storedKeyPassphrase = '';
-        error = '';
-    }
-    
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        alert('Copied to clipboard!');
-    }
-    
-    function downloadKey(content, filename) {
-        const blob = new Blob([content], { type: 'text/plain' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
-    }
-</script>
-
-<div class="auth-container">
-    {#if showGeneratedKeys}
-        <h1>Your PGP Keys</h1>
-        <p style="color: var(--error); margin-bottom: 1rem;">
-            <strong>Important:</strong> Save your private key securely. You will need it and your passphrase to login with PGP.
-        </p>
-        
-        <div class="form-group">
-            <label>Public Key</label>
-            <textarea 
-                readonly 
-                rows="10" 
-                value={generatedPublicKey}
-                style="font-family: monospace; font-size: 0.8rem;"
-            />
-            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-                <button type="button" on:click={() => copyToClipboard(generatedPublicKey)}>
-                    Copy
-                </button>
-                <button type="button" class="btn-secondary" on:click={() => downloadKey(generatedPublicKey, `${username}-public-key.asc`)}>
-                    Download
-                </button>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label>Private Key (Encrypted with your passphrase)</label>
-            <textarea 
-                readonly 
-                rows="10" 
-                value={generatedPrivateKey}
-                style="font-family: monospace; font-size: 0.8rem;"
-            />
-            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-                <button type="button" on:click={() => copyToClipboard(generatedPrivateKey)}>
-                    Copy
-                </button>
-                <button type="button" class="btn-secondary" on:click={() => downloadKey(generatedPrivateKey, `${username}-private-key.asc`)}>
-                    Download (REQUIRED!)
-                </button>
-            </div>
-        </div>
-        
-        <div class="form-group" style="background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); padding: 1rem; border-radius: 4px;">
-            <label style="display: flex; align-items: center; gap: 0.5rem; margin: 0;">
-                <input
-                    type="checkbox"
-                    bind:checked={saveKeyLocally}
-                    style="width: 20px; height: 20px;"
-                />
-                Save encrypted key in this browser for easier PGP login
-            </label>
-            <small style="color: var(--gray); display: block; margin-top: 0.5rem;">
-                The key will be encrypted with your passphrase and stored locally. You can export or remove it later from Settings.
-            </small>
-        </div>
-        
-        <button class="btn-block" on:click={proceedAfterKeys} disabled={loading}>
-            {loading ? 'Saving...' : 'Continue'}
-        </button>
-    {:else}
-        <h1>{mode === 'login' ? 'Login' : 'Register'}</h1>
-        
-        {#if mode === 'login' && !pgpChallenge}
-            <form on:submit|preventDefault={handleLogin}>
-                <div class="form-group">
-                    <label for="username">Username</label>
-                    <input
-                        type="text"
-                        id="username"
-                        bind:value={username}
-                        required
-                        disabled={loading}
-                    />
-                </div>
-                
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input
-                        type="password"
-                        id="password"
-                        bind:value={password}
-                        required
-                        disabled={loading}
-                    />
-                </div>
-                
-                {#if error}
-                    <div class="error">{error}</div>
-                {/if}
-                
-                <button type="submit" class="btn-block" disabled={loading}>
-                    {loading ? 'Logging in...' : 'Login'}
-                </button>
-                
-                <div style="margin: 1rem 0; text-align: center; color: var(--gray);">
-                    OR
-                </div>
-                
-                <button
-                    type="button"
-                    class="btn btn-secondary btn-block"
-                    on:click={initiatePgpLogin}
-                    disabled={loading || pgpLoading || !username}
-                >
-                    {pgpLoading ? 'Loading...' : 'Login with PGP'}
-                </button>
-            </form>
-        {:else if mode === 'login' && pgpChallenge}
-            <form on:submit|preventDefault={handlePgpLogin}>
-                <h3 style="margin-bottom: 1rem;">PGP Authentication</h3>
-                
-                {#await pgp.hasEncryptedKey() then hasKey}
-                    {#if hasKey && !pgpSignature}
-                        <div class="instruction-box" style="background: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.3);">
-                            <p><strong>Stored key detected!</strong></p>
-                            <p>Enter your passphrase to unlock your private key and sign automatically:</p>
-                            
-                            <div class="form-group" style="margin: 1rem 0;">
-                                <input
-                                    type="password"
-                                    bind:value={storedKeyPassphrase}
-                                    placeholder="Enter your key passphrase"
-                                    disabled={loading}
-                                />
-                            </div>
-                            
-                            <button 
-                                type="button" 
-                                on:click={signWithStoredKey}
-                                disabled={loading || !storedKeyPassphrase}
-                                style="margin-bottom: 0.5rem;"
-                            >
-                                {loading ? 'Signing...' : 'Unlock & Sign'}
-                            </button>
-                        </div>
-                        
-                        <div style="margin: 1rem 0; text-align: center; color: var(--gray);">
-                            OR sign manually
-                        </div>
-                    {/if}
-                {/await}
-                
-                <div class="instruction-box">
-                    <p><strong>Step 1:</strong> Copy this challenge text:</p>
-                    <div class="pgp-key" style="margin: 0.5rem 0;">
-                        {pgpChallenge}
-                    </div>
-                    <button 
-                        type="button" 
-                        class="btn btn-secondary"
-                        style="margin-bottom: 1rem;"
-                        on:click={() => copyToClipboard(pgpChallenge)}
-                    >
-                        Copy Challenge
-                    </button>
-                    
-                    <p><strong>Step 2:</strong> Sign it with your private key using GPG or another PGP tool</p>
-                    <p style="color: var(--gray); font-size: 0.85rem; margin-top: 0.5rem;">
-                        Note: Your private key passphrase is required to unlock your key for signing.
-                    </p>
-                </div>
-                
-                <button 
-                    type="button" 
-                    class="btn-link" 
-                    style="margin-bottom: 1rem; font-size: 0.9rem;"
-                    on:click={() => showPgpExample = !showPgpExample}
-                >
-                    {showPgpExample ? 'Hide' : 'Show'} how to sign
-                </button>
-                
-                {#if showPgpExample}
-                    <div class="example-section">
-                        <h4>Using GPG command line:</h4>
-                        <pre class="command-example">
-# Save the challenge to a file
-echo "{pgpChallenge}" > challenge.txt
-
-# Sign with your private key (will prompt for passphrase)
-gpg --armor --detach-sign challenge.txt
-
-# This creates challenge.txt.asc with the signature
-# Copy the entire contents including BEGIN/END lines</pre>
-                        
-                        <h4>Using Kleopatra (Windows):</h4>
-                        <ol style="font-size: 0.9rem; margin: 0.5rem 0;">
-                            <li>Save the challenge text to a file</li>
-                            <li>Right-click the file → Sign</li>
-                            <li>Select your key and choose "Create detached signature"</li>
-                            <li>Enter your passphrase when prompted</li>
-                            <li>Open the .asc file and copy its contents</li>
-                        </ol>
-                    </div>
-                {/if}
-                
-                <div style="margin: 1.5rem 0; text-align: center; color: var(--gray);">
-                    <strong>Step 3:</strong> Paste your signature below
-                </div>
-                
-                <div class="form-group">
-                    <label for="signature">Signed Message</label>
-                    <textarea
-                        id="signature"
-                        bind:value={pgpSignature}
-                        rows="10"
-                        required
-                        disabled={loading}
-                        placeholder="-----BEGIN PGP SIGNATURE-----
-Version: GnuPG v2
-
-iQEcBAABCAAGBQJe...
-...
------END PGP SIGNATURE-----"
-                    />
-                </div>
-                
-                {#if error}
-                    <div class="error">{error}</div>
-                {/if}
-                
-                <button type="submit" class="btn-block" disabled={loading || !pgpSignature}>
-                    {loading ? 'Verifying...' : 'Verify and Login'}
-                </button>
-                
-                <button
-                    type="button"
-                    class="btn btn-secondary btn-block"
-                    style="margin-top: 1rem;"
-                    on:click={resetPgpLogin}
-                    disabled={loading}
-                >
-                    Back
-                </button>
-            </form>
-        {:else}
-            <form on:submit|preventDefault={handleRegister}>
-                <div class="form-group">
-                    <label for="reg-username">Username</label>
-                    <input
-                        type="text"
-                        id="reg-username"
-                        bind:value={username}
-                        required
-                        disabled={loading}
-                        pattern="[a-zA-Z0-9_]+"
-                        title="Letters, numbers, and underscores only"
-                    />
-                </div>
-                
-                <div class="form-group">
-                    <label for="reg-password">Password</label>
-                    <input
-                        type="password"
-                        id="reg-password"
-                        bind:value={password}
-                        required
-                        disabled={loading}
-                    />
-                    <small style="color: var(--gray);">
-                        Must be 8+ characters with at least one number and symbol
-                    </small>
-                </div>
-                
-                <div class="form-group">
-                    <label for="confirm-password">Confirm Password</label>
-                    <input
-                        type="password"
-                        id="confirm-password"
-                        bind:value={confirmPassword}
-                        required
-                        disabled={loading}
-                    />
-                </div>
-                
-                <div style="background: rgba(86, 29, 94, 0.1); border: 1px solid rgba(86, 29, 94, 0.3); padding: 1rem; border-radius: 8px; margin: 1.5rem 0;">
-                    <h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--primary);">🔐 PGP Key Passphrase</h3>
-                    <p style="font-size: 0.9rem; color: var(--gray); margin-bottom: 1rem;">
-                        This passphrase encrypts your PGP private key. You'll need it every time you use PGP login.
-                    </p>
-                    
-                    <div class="form-group">
-                        <label for="key-passphrase">Key Passphrase</label>
-                        <input
-                            type="password"
-                            id="key-passphrase"
-                            bind:value={keyPassphrase}
-                            required
-                            disabled={loading}
-                            placeholder="Enter a strong passphrase (12+ characters)"
-                        />
-                        <small style="color: var(--gray);">
-                            Must be 12+ characters with 3 of: uppercase, lowercase, numbers, special characters
-                        </small>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="confirm-key-passphrase">Confirm Key Passphrase</label>
-                        <input
-                            type="password"
-                            id="confirm-key-passphrase"
-                            bind:value={confirmKeyPassphrase}
-                            required
-                            disabled={loading}
-                            placeholder="Confirm your key passphrase"
-                        />
-                    </div>
-                </div>
-                
-                {#if error}
-                    <div class="error">{error}</div>
-                {/if}
-                
-                <button type="submit" class="btn-block" disabled={loading}>
-                    {loading ? 'Creating account...' : 'Register'}
-                </button>
-                
-                <p style="margin-top: 1rem; font-size: 0.9rem; color: var(--gray);">
-                    A PGP key pair will be generated and encrypted with your passphrase.
-                </p>
-            </form>
-        {/if}
-        
-        <div style="margin-top: 2rem; text-align: center;">
-            {#if mode === 'login'}
-                <button class="btn-link" on:click={() => { mode = 'register'; error = ''; username = ''; password = ''; }}>
-                    Need an account? Register
-                </button>
-            {:else}
-                <button class="btn-link" on:click={() => { mode = 'login'; error = ''; username = ''; password = ''; keyPassphrase = ''; confirmKeyPassphrase = ''; }}>
-                    Already have an account? Login
-                </button>
-            {/if}
-        </div>
-    {/if}
-</div>
-
-<style>
-    .btn-link {
-        background: none;
-        border: none;
-        color: var(--primary);
-        cursor: pointer;
-        text-decoration: underline;
-        padding: 0;
-        font-size: inherit;
-    }
-    
-    .btn-link:hover {
-        opacity: 0.8;
-    }
-    
-    .instruction-box {
-        background: rgba(86, 29, 94, 0.05);
-        border: 1px solid rgba(86, 29, 94, 0.2);
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }
-    
-    .instruction-box p {
-        margin: 0 0 0.5rem 0;
-        font-size: 0.9rem;
-    }
-    
-    .example-section {
-        background: rgba(0, 0, 0, 0.2);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }
-    
-    .example-section h4 {
-        margin: 0 0 0.5rem 0;
-        font-size: 0.9rem;
-        color: var(--primary);
-    }
-    
-    .command-example {
-        background: rgba(0, 0, 0, 0.5);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        padding: 1rem;
-        font-family: monospace;
-        font-size: 0.8rem;
-        overflow-x: auto;
-        white-space: pre;
-        margin: 0.5rem 0 1rem 0;
-    }
-    
-    .example-section ol {
-        padding-left: 1.5rem;
-    }
-    
-    .example-section ol li {
-        margin-bottom: 0.25rem;
-    }
-    
-    .pgp-key {
-        font-family: monospace;
-        font-size: 0.8rem;
-        background: rgba(255, 255, 255, 0.05);
-        padding: 1rem;
-        border-radius: 4px;
-        white-space: pre-wrap;
-        word-break: break-all;
-    }
-</style>
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\my-realms\+page.svelte ###
-
-<script>
-    import { onMount, onDestroy } from 'svelte';
-    import { auth, isAuthenticated, isStreamer } from '$lib/stores/auth';
-    import { goto } from '$app/navigation';
-    import { connectWebSocket, disconnectWebSocket } from '$lib/websocket';
-    
-    let realms = [];
-    let loading = true;
-    let error = '';
-    let message = '';
-    let showCreateModal = false;
-    let statsInterval;
-    
-    // Create form
-    let newRealmName = '';
-    
-    onMount(async () => {
-        await auth.init();
-        
-        if (!$isAuthenticated) {
-            goto('/login');
-            return;
-        }
-        
-        if (!$isStreamer) {
-            goto('/');
-            return;
-        }
-        
-        await loadRealms();
-        
-        // Start polling for stats
-        statsInterval = setInterval(async () => {
-            for (const realm of realms) {
-                if (realm.isLive) {
-                    await updateRealmStats(realm.id);
-                }
-            }
-        }, 2000);
-        
-        // Connect WebSocket for real-time updates
-        connectWebSocket((data) => {
-            if (data.type === 'stats_update') {
-                const realm = realms.find(r => r.streamKey === data.stream_key);
-                if (realm && data.stats) {
-                    realm.isLive = data.stats.is_live;
-                    realm.viewerCount = data.stats.connections || 0;
-                    realm.stats = data.stats;
-                    realms = realms;
-                }
-            }
-        });
-    });
-    
-    onDestroy(() => {
-        if (statsInterval) {
-            clearInterval(statsInterval);
-        }
-        disconnectWebSocket();
-    });
-    
-    async function loadRealms() {
-        loading = true;
-        try {
-            const response = await fetch('/api/realms', {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                realms = data.realms;
-                
-                // Load stats for each realm
-                for (const realm of realms) {
-                    await updateRealmStats(realm.id);
-                }
-            } else {
-                error = 'Failed to load realms';
-            }
-        } catch (e) {
-            error = 'Error loading realms';
-            console.error(e);
-        } finally {
-            loading = false;
-        }
-    }
-    
-    async function updateRealmStats(realmId) {
-        try {
-            const response = await fetch(`/api/realms/${realmId}/stats`, {
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                const realm = realms.find(r => r.id === realmId);
-                if (realm && data.success && data.stats) {
-                    realm.isLive = data.stats.is_live;
-                    realm.viewerCount = data.stats.connections || 0;
-                    realm.stats = data.stats;
-                    realms = realms;
-                }
-            }
-        } catch (e) {
-            console.error('Failed to fetch stats:', e);
-        }
-    }
-    
-    async function createRealm() {
-        error = '';
-        
-        if (!validateRealmName(newRealmName)) {
-            error = 'Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only';
-            return;
-        }
-        
-        try {
-            const response = await fetch('/api/realms', {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Bearer ${$auth.token}`,
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ name: newRealmName })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                message = 'Realm created successfully';
-                showCreateModal = false;
-                newRealmName = '';
-                await loadRealms();
-            } else {
-                error = data.error || 'Failed to create realm';
-            }
-        } catch (e) {
-            error = 'Error creating realm';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; }, 3000);
-    }
-    
-    async function deleteRealm(realm) {
-        if (!confirm(`Delete realm "${realm.name}"? This action cannot be undone.`)) {
-            return;
-        }
-        
-        try {
-            const response = await fetch(`/api/realms/${realm.id}`, {
-                method: 'DELETE',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            if (response.ok) {
-                message = 'Realm deleted successfully';
-                await loadRealms();
-            } else {
-                error = 'Failed to delete realm';
-            }
-        } catch (e) {
-            error = 'Error deleting realm';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; error = ''; }, 3000);
-    }
-    
-    async function regenerateKey(realm) {
-        if (!confirm('Regenerate stream key? This will disconnect any active streams.')) {
-            return;
-        }
-        
-        try {
-            const response = await fetch(`/api/realms/${realm.id}/regenerate-key`, {
-                method: 'POST',
-                headers: { 'Authorization': `Bearer ${$auth.token}` }
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                message = 'Stream key regenerated successfully';
-                await loadRealms();
-            } else {
-                error = 'Failed to regenerate stream key';
-            }
-        } catch (e) {
-            error = 'Error regenerating stream key';
-            console.error(e);
-        }
-        
-        setTimeout(() => { message = ''; error = ''; }, 3000);
-    }
-    
-    function validateRealmName(name) {
-        return /^[a-z0-9-]{3,30}$/.test(name);
-    }
-    
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        message = 'Copied to clipboard!';
-        setTimeout(() => message = '', 2000);
-    }
-    
-function formatBitrate(bitrate) {
-    if (bitrate > 1000000) {
-        return (bitrate / 1000000).toFixed(2) + ' Mbps';
-    } else if (bitrate > 1000) {
-        return Math.round(bitrate / 1000) + ' kbps';  // Changed to lowercase 'kbps' and rounded
-    } else {
-        return bitrate + ' bps';
-    }
-}
-</script>
-
-<style>
-    .realms-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 2rem;
-    }
-    
-    .realms-grid {
-        display: grid;
-        gap: 2rem;
-    }
-    .realm-owner-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.25rem 0.75rem;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    font-size: 0.85rem;
-    margin-left: 1rem;
-}
-
-.realm-owner-color {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    border: 2px solid var(--white);
-}
-
-    .realm-card {
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 2rem;
-    }
-    
-    .realm-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: start;
-        margin-bottom: 1.5rem;
-    }
-    
-    .realm-title h3 {
-        margin: 0 0 0.5rem 0;
-    }
-    
-    .realm-url {
-        color: var(--gray);
-        font-size: 0.9rem;
-    }
-    
-    .realm-actions {
-        display: flex;
-        gap: 0.5rem;
-    }
-    
-    .stream-info {
-        background: rgba(86, 29, 94, 0.1);
-        border: 1px solid rgba(86, 29, 94, 0.3);
-        padding: 1rem;
-        border-radius: 4px;
-        margin-bottom: 1rem;
-    }
-    
-    .stream-info-row {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        margin-bottom: 0.5rem;
-    }
-    
-    .stream-info-row:last-child {
-        margin-bottom: 0;
-    }
-    
-    .stream-info-label {
-        font-weight: 600;
-        min-width: 100px;
-    }
-    
-    .stream-key {
-        font-family: monospace;
-        background: rgba(0, 0, 0, 0.3);
-        padding: 0.25rem 0.5rem;
-        border-radius: 4px;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    
-    .status-row {
-        display: flex;
-        align-items: center;
-        gap: 2rem;
-        margin-bottom: 1rem;
-    }
-    
-    .status-indicator {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 20px;
-        font-size: 0.9rem;
-    }
-    
-    .status-indicator.active {
-        background: rgba(40, 167, 69, 0.2);
-        color: var(--success);
-    }
-    
-    .status-indicator.inactive {
-        background: rgba(220, 53, 69, 0.2);
-        color: var(--error);
-    }
-    
-    .stats-mini {
-        display: flex;
-        gap: 2rem;
-        font-size: 0.9rem;
-    }
-    
-    .stat-mini {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .stat-mini-label {
-        color: var(--gray);
-    }
-    
-    .form-hint {
-        font-size: 0.85rem;
-        color: var(--gray);
-        margin-top: 0.25rem;
-    }
-    
-    .no-realms {
-        text-align: center;
-        padding: 4rem 0;
-        color: var(--gray);
-    }
-    
-    .no-realms-icon {
-        font-size: 4rem;
-        margin-bottom: 1rem;
-        opacity: 0.5;
-    }
-</style>
-
-<div class="container">
-    <div class="realms-header">
-        <h1>My Realms</h1>
-        <button 
-            class="btn"
-            on:click={() => showCreateModal = true}
-            disabled={realms.length >= 5}
-        >
-            Create Realm
-        </button>
-    </div>
-    
-    {#if message}
-        <div class="success" style="margin-bottom: 1rem;">{message}</div>
-    {/if}
-    
-    {#if error && !showCreateModal}
-        <div class="error" style="margin-bottom: 1rem;">{error}</div>
-    {/if}
-    
-    {#if loading}
-        <p>Loading realms...</p>
-    {:else if realms.length === 0}
-        <div class="no-realms">
-            <div class="no-realms-icon">🏰</div>
-            <h2>No realms yet</h2>
-            <p>Create your first realm to start streaming!</p>
-            <button 
-                class="btn"
-                style="margin-top: 1rem;"
-                on:click={() => showCreateModal = true}
-            >
-                Create Your First Realm
-            </button>
-        </div>
-    {:else}
-        <div class="realms-grid">
-            {#each realms as realm}
-                <div class="realm-card">
-                    <div class="realm-header">
-                        <div class="realm-title">
-                            <h3>{realm.name}</h3>
-                            <p class="realm-url">/{realm.name}/live</p>
-                        </div>
-                        <div class="realm-actions">
-                            <button 
-                                class="btn btn-danger"
-                                style="padding: 0.5rem 1rem;"
-                                on:click={() => deleteRealm(realm)}
-                            >
-                                Delete
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="status-row">
-                        <div class="status-indicator" class:active={realm.isLive} class:inactive={!realm.isLive}>
-                            {#if realm.isLive}
-                                <span>●</span> Live
-                            {:else}
-                                <span>●</span> Offline
-                            {/if}
-                        </div>
-                        
-                        {#if realm.isLive && realm.stats}
-                            <div class="stats-mini">
-                                <div class="stat-mini">
-                                    <span class="stat-mini-label">Viewers:</span>
-                                    <span>{realm.viewerCount}</span>
-                                </div>
-                                <div class="stat-mini">
-                                    <span class="stat-mini-label">Bitrate:</span>
-                                    <span>{formatBitrate(realm.stats.bitrate)}</span>
-                                </div>
-                                {#if realm.stats.resolution !== 'N/A'}
-                                    <div class="stat-mini">
-                                        <span class="stat-mini-label">Resolution:</span>
-                                        <span>{realm.stats.resolution}</span>
-                                    </div>
-                                {/if}
-                            </div>
-                        {/if}
-                    </div>
-                    
-                    <div class="stream-info">
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">Stream Key:</span>
-                            <span class="stream-key">{realm.streamKey}</span>
-                            <button on:click={() => copyToClipboard(realm.streamKey)}>Copy</button>
-                        </div>
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">RTMP URL:</span>
-                            <span class="stream-key">rtmp://localhost:1935/app/{realm.streamKey}</span>
-                            <button on:click={() => copyToClipboard(`rtmp://localhost:1935/app/${realm.streamKey}`)}>Copy</button>
-                        </div>
-                        <div class="stream-info-row">
-                            <span class="stream-info-label">SRT URL:</span>
-                            <span class="stream-key">srt://localhost:9999?streamid={encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}</span>
-                            <button on:click={() => copyToClipboard(`srt://localhost:9999?streamid=${encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}`)}>Copy</button>
-                        </div>
-                    </div>
-                    
-                    <button 
-                        class="btn btn-danger"
-                        style="width: 100%;"
-                        on:click={() => regenerateKey(realm)}
-                    >
-                        Regenerate Stream Key
-                    </button>
-                </div>
-            {/each}
-        </div>
-    {/if}
-</div>
-
-<!-- Create Realm Modal -->
-{#if showCreateModal}
-    <div class="modal" on:click={() => showCreateModal = false}>
-        <div class="modal-content" on:click|stopPropagation>
-            <div class="modal-header">
-                <h2>Create New Realm</h2>
-                <button class="modal-close" on:click={() => showCreateModal = false}>×</button>
-            </div>
-            
-            {#if error}
-                <div class="error" style="margin-bottom: 1rem;">{error}</div>
-            {/if}
-            
-            <form on:submit|preventDefault={createRealm}>
-                <div class="form-group">
-                    <label for="realm-name">Realm Name</label>
-                    <input
-                        type="text"
-                        id="realm-name"
-                        bind:value={newRealmName}
-                        required
-                        pattern="[a-z0-9-]{3,30}"
-                        placeholder="my-awesome-realm"
-                    />
-                    <p class="form-hint">
-                        3-30 characters, lowercase letters, numbers, and hyphens only.
-                        This will be your realm's URL: /{newRealmName || 'realm-name'}/live
-                    </p>
-                </div>
-                
-                <button type="submit" class="btn btn-block">Create Realm</button>
-            </form>
-        </div>
-    </div>
-{/if}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\profile\[username]\+page.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import { auth, isAuthenticated } from '$lib/stores/auth';
-    
-    let profile = null;
-    let pgpKeys = [];
-    let loading = true;
-    let error = '';
-    let isOwnProfile = false;
-    let activeTab = 'bio';
-    let expandedKeys = {}; // Track which keys are expanded
-    
-    onMount(async () => {
-        // No authentication required - profile is public
-        const username = $page.params.username;
-        
-        // Check if viewing own profile (only if authenticated)
-        if ($isAuthenticated && $auth.user) {
-            isOwnProfile = $auth.user.username === username;
-        }
-        
-        await loadProfile(username);
-        await loadPgpKeys(username);
-        
-        loading = false;
-    });
-    
-    async function loadProfile(username) {
-        try {
-            // Public endpoint - no auth header needed
-            const response = await fetch(`/api/users/${username}`);
-            
-            if (response.ok) {
-                const data = await response.json();
-                profile = data.profile;
-                
-                // Check if the profile has pgpOnlyEnabledAt set
-                if (profile && profile.pgpOnlyEnabledAt) {
-                    console.log('Profile has PGP-only enabled at:', profile.pgpOnlyEnabledAt);
-                }
-            } else if (response.status === 404) {
-                error = 'User not found';
-            } else {
-                error = 'Failed to load profile';
-            }
-        } catch (e) {
-            error = 'Error loading profile';
-            console.error(e);
-        }
-    }
-    
-    async function loadPgpKeys(username) {
-        try {
-            // Public endpoint - no auth header needed
-            const response = await fetch(`/api/users/${username}/pgp-keys`);
-            
-            if (response.ok) {
-                const data = await response.json();
-                pgpKeys = data.keys;
-                // Initialize all keys as collapsed
-                pgpKeys.forEach(key => {
-                    expandedKeys[key.fingerprint] = false;
-                });
-            }
-        } catch (e) {
-            console.error('Failed to load PGP keys:', e);
-        }
-    }
-    
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        alert('Copied to clipboard!');
-    }
-    
-    function toggleKey(fingerprint) {
-        expandedKeys[fingerprint] = !expandedKeys[fingerprint];
-    }
-    
-    function formatDateTime(dateStr) {
-        if (!dateStr) return '';
-        const date = new Date(dateStr);
-        return date.toLocaleString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true,
-            timeZoneName: 'short'
-        });
-    }
-</script>
-
-<style>
-    .profile-header {
-        display: flex;
-        align-items: center;
-        gap: 2rem;
-        margin-bottom: 2rem;
-    }
-    
-    .profile-avatar {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        background: var(--gray);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 2rem;
-        font-weight: 600;
-        color: var(--white);
-        overflow: hidden;
-        border: 3px solid var(--border);
-        position: relative;
-        transition: all 0.3s ease;
-    }
-    
-    .profile-avatar.has-color {
-        background: var(--user-color);
-        border-color: var(--user-color);
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-    }
-    
-    .profile-avatar.has-color.with-image {
-        border-width: 4px;
-    }
-    
-    .profile-avatar img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-    
-    .profile-info h1 {
-        margin-bottom: 0.5rem;
-    }
-    
-    .member-since {
-        color: var(--gray);
-        font-size: 0.9rem;
-    }
-    
-    .color-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(255, 255, 255, 0.05);
-        padding: 0.25rem 0.75rem;
-        border-radius: 20px;
-        font-size: 0.85rem;
-        margin-top: 0.5rem;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .color-dot {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-    }
-    
-    .pgp-only-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(40, 167, 69, 0.2);
-        color: var(--success);
-        padding: 0.25rem 0.75rem;
-        border-radius: 20px;
-        font-size: 0.85rem;
-        margin-top: 0.5rem;
-    }
-    
-    .tab-nav {
-        display: flex;
-        gap: 0;
-        border-bottom: 2px solid var(--border);
-        margin-bottom: 2rem;
-    }
-    
-    .tab-button {
-        padding: 1rem 2rem;
-        background: none;
-        border: none;
-        color: var(--gray);
-        cursor: pointer;
-        font-size: 1rem;
-        font-weight: 500;
-        position: relative;
-        transition: color 0.2s;
-        border-bottom: 3px solid transparent;
-        margin-bottom: -2px;
-    }
-    
-    .tab-button:hover {
-        color: var(--white);
-    }
-    
-    .tab-button.active {
-        color: var(--primary);
-        border-bottom-color: var(--primary);
-    }
-    
-    .bio-section {
-        padding: 1.5rem;
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .bio-section::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 3px;
-        background: var(--user-color, var(--primary));
-        opacity: 0.6;
-    }
-    
-    .bio-section h3 {
-        margin-bottom: 1rem;
-    }
-    
-    .no-bio {
-        color: var(--gray);
-        font-style: italic;
-    }
-    
-    .pgp-section {
-        padding: 1.5rem;
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-    }
-    
-    .pgp-status-info {
-        background: rgba(86, 29, 94, 0.1);
-        border: 1px solid rgba(86, 29, 94, 0.3);
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1.5rem;
-    }
-    
-    .pgp-status-info.pgp-only {
-        background: rgba(40, 167, 69, 0.1);
-        border-color: rgba(40, 167, 69, 0.3);
-    }
-    
-    .pgp-status-info p {
-        margin: 0 0 0.5rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .pgp-status-info p:last-child {
-        margin-bottom: 0;
-    }
-    
-    .pgp-status-info .icon {
-        font-size: 1.2rem;
-    }
-    
-    .pgp-key-item {
-        margin-bottom: 1rem;
-        padding: 1rem;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 8px;
-    }
-    
-    .pgp-key-item:last-child {
-        margin-bottom: 0;
-    }
-    
-    .pgp-key-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .pgp-key-header:hover {
-        background: rgba(86, 29, 94, 0.1);
-        margin: -0.5rem;
-        padding: 0.5rem;
-        border-radius: 4px;
-    }
-    
-    .pgp-key-info {
-        flex: 1;
-    }
-    
-    .fingerprint-display {
-        font-family: monospace;
-        font-size: 0.9rem;
-        margin-bottom: 0.25rem;
-    }
-    
-    .key-date {
-        color: var(--gray);
-        font-size: 0.85rem;
-    }
-    
-    .expand-icon {
-        color: var(--gray);
-        transition: transform 0.2s;
-        font-size: 1.2rem;
-    }
-    
-    .expand-icon.expanded {
-        transform: rotate(90deg);
-    }
-    
-    .pgp-key-content {
-        margin-top: 1rem;
-        padding-top: 1rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .pgp-key {
-        font-family: monospace;
-        font-size: 0.8rem;
-        background: rgba(255, 255, 255, 0.05);
-        padding: 1rem;
-        border-radius: 4px;
-        white-space: pre-wrap;
-        word-break: break-all;
-        max-height: 300px;
-        overflow-y: auto;
-    }
-    
-    .copy-button {
-        padding: 0.25rem 0.75rem;
-        background: var(--primary);
-        color: white;
-        border: none;
-        border-radius: 4px;
-        font-size: 0.85rem;
-        cursor: pointer;
-        margin-top: 0.5rem;
-    }
-    
-    .copy-button:hover {
-        opacity: 0.9;
-    }
-    
-    .no-keys {
-        color: var(--gray);
-        text-align: center;
-        padding: 2rem;
-    }
-    
-    .pgp-enabled-date {
-        font-size: 0.85rem;
-        color: var(--gray);
-        font-style: italic;
-    }
-</style>
-
-<div class="container">
-    {#if loading}
-        <p>Loading...</p>
-    {:else if error}
-        <div class="error">{error}</div>
-    {:else if profile}
-        <div class="profile-header">
-            <div 
-                class="profile-avatar"
-                class:has-color={profile.colorCode}
-                class:with-image={profile.avatarUrl}
-                style="--user-color: {profile.colorCode || '#561D5E'}"
-            >
-                {#if profile.avatarUrl}
-                    <img src={profile.avatarUrl} alt="{profile.username}" />
-                {:else}
-                    {profile.username.charAt(0).toUpperCase()}
-                {/if}
-            </div>
-            
-            <div class="profile-info">
-                <h1>{profile.username}</h1>
-                <p class="member-since">
-                    Member since {new Date(profile.createdAt).toLocaleDateString()}
-                </p>
-                <div class="color-badge">
-                    <span class="color-dot" style="background: {profile.colorCode || '#561D5E'}"></span>
-                    <span style="font-family: monospace;">{profile.colorCode || '#561D5E'}</span>
-                </div>
-                {#if profile.isPgpOnly}
-                    <div class="pgp-only-badge">
-                        <span>🔐</span>
-                        <span>PGP-Only Authentication</span>
-                    </div>
-                {/if}
-            </div>
-        </div>
-        
-        <div class="tab-nav">
-            <button 
-                class="tab-button" 
-                class:active={activeTab === 'bio'}
-                on:click={() => activeTab = 'bio'}
-            >
-                Bio
-            </button>
-            <button 
-                class="tab-button" 
-                class:active={activeTab === 'pgp'}
-                on:click={() => activeTab = 'pgp'}
-            >
-                PGP Keys ({pgpKeys.length})
-            </button>
-        </div>
-        
-        {#if activeTab === 'bio'}
-            <div class="bio-section" style="--user-color: {profile.colorCode || '#561D5E'}">
-                <h3>About</h3>
-                {#if profile.bio}
-                    <p>{profile.bio}</p>
-                {:else}
-                    <p class="no-bio">No bio yet</p>
-                {/if}
-            </div>
-        {:else if activeTab === 'pgp'}
-            <div class="pgp-section">
-                <h3>PGP Keys</h3>
-                
-                {#if profile.isPgpOnly}
-                    <div class="pgp-status-info pgp-only">
-                        <p>
-                            <span class="icon">✔</span>
-                            <strong>PGP-Only Authentication Enabled</strong>
-                        </p>
-                        {#if profile.pgpOnlyEnabledAt}
-                            <p class="pgp-enabled-date">
-                                Enabled: {formatDateTime(profile.pgpOnlyEnabledAt)}
-                            </p>
-                        {/if}
-                        <p style="font-size: 0.85rem;">
-                            This user requires PGP signature verification to login.
-                        </p>
-                    </div>
-                {:else}
-                    <div class="pgp-status-info">
-                        <p>
-                            <span class="icon">🔑</span>
-                            Standard authentication (password + optional PGP)
-                        </p>
-                    </div>
-                {/if}
-                
-                {#if pgpKeys.length > 0}
-                    {#each pgpKeys as key}
-                        <div class="pgp-key-item">
-                            <div 
-                                class="pgp-key-header" 
-                                on:click={() => toggleKey(key.fingerprint)}
-                                on:keypress={(e) => e.key === 'Enter' && toggleKey(key.fingerprint)}
-                                role="button"
-                                tabindex="0"
-                            >
-                                <div class="pgp-key-info">
-                                    <div class="fingerprint-display">{key.fingerprint}</div>
-                                    <div class="key-date">Added {new Date(key.createdAt).toLocaleDateString()}</div>
-                                </div>
-                                <span class="expand-icon" class:expanded={expandedKeys[key.fingerprint]}>
-                                    â–¶
-                                </span>
-                            </div>
-                            
-                            {#if expandedKeys[key.fingerprint]}
-                                <div class="pgp-key-content">
-                                    <div class="pgp-key">
-                                        {key.publicKey}
-                                    </div>
-                                    <button 
-                                        class="copy-button"
-                                        on:click={() => copyToClipboard(key.publicKey)}
-                                    >
-                                        Copy Public Key
-                                    </button>
-                                </div>
-                            {/if}
-                        </div>
-                    {/each}
-                {:else}
-                    <div class="no-keys">
-                        <p>No PGP keys added</p>
-                    </div>
-                {/if}
-            </div>
-        {/if}
-    {/if}
-</div>
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\settings\+page.svelte ###
-
-<script>
-    import { onMount } from 'svelte';
-    import { browser } from '$app/environment';
-    import { auth, isAuthenticated } from '$lib/stores/auth';
-    import { goto } from '$app/navigation';
-    import * as pgp from '$lib/pgp';
-    
-    let activeTab = 'profile';
-    let loading = false;
-    let message = '';
-    let error = '';
-    
-    // Profile
-    let bio = '';
-    let avatarFile = null;
-    let avatarPreview = '';
-    let avatarPreviewUrl = ''; // Separate preview for file upload
-    let hasProfileChanges = false;
-    
-    // Password
-    let oldPassword = '';
-    let newPassword = '';
-    let confirmPassword = '';
-    
-    // Color picker
-    let userColor = '#561D5E';
-    let newColor = '';
-    let showColorPicker = false;
-    let colorLoading = false;
-    let colorError = '';
-    let colorMessage = '';
-    
-    // Popular colors to choose from
-    const suggestedColors = [
-        '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#FD79A8',
-        '#A29BFE', '#6C5CE7', '#FAB1A0', '#74B9FF', '#A8E6CF', '#FFD3B6',
-        '#FF8CC3', '#00B894', '#00CEC9', '#0984E3', '#6C5CE7', '#E17055',
-        '#FDCB6E', '#55A3FF', '#FD79A8', '#BADC58', '#F8B739', '#FA8231',
-        '#EB3B5A', '#FC5C65', '#45AAF2', '#4B7BEC', '#A55EEA', '#D63031',
-        '#74B9FF', '#A29BFE', '#FD79A8', '#E17055', '#00B894', '#00CEC9'
-    ];
-    
-    // PGP
-    let pgpKeys = [];
-    let pgpOnly = false;
-    let pgpOnlyEnabledAt = '';
-    let showAddKey = false;
-    let newPublicKey = '';
-    let showPgpWarning = false;
-    let pgpConfirmationText = '';
-    const PGP_CONFIRMATION_PHRASE = 'I UNDERSTAND THIS IS PERMANENT';
-    
-    // For displaying generated keys
-    let showGeneratedKeys = false;
-    let generatedPrivateKey = '';
-    let generatedPublicKey = '';
-    let keyPassphrase = '';
-    let confirmKeyPassphrase = '';
-    let saveKeyLocally = false;
-    let hasEncryptedKey = false;
-    
-    // Unlock key dialog
-    let showUnlockDialog = false;
-    let unlockPassphrase = '';
-    
-    // User data for safe access
-    let currentUser = null;
-    
-    onMount(async () => {
-        // Only run on client side
-        if (!browser) return;
-        
-        await auth.init();
-        if (!$isAuthenticated) {
-            goto('/login');
-            return;
-        }
-        
-        // Store user for safe access
-        currentUser = $auth.user;
-        
-        // Check if we have an encrypted key stored
-        hasEncryptedKey = await pgp.hasEncryptedKey();
-        
-        // Get fresh user data to ensure we have latest values
-        try {
-            const response = await fetch('/api/user/me', {
-                credentials: 'include'
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                if (data.success && data.user) {
-                    // Update local state with fresh data
-                    bio = data.user.bio || '';
-                    pgpOnly = data.user.isPgpOnly === true;
-                    pgpOnlyEnabledAt = data.user.pgpOnlyEnabledAt || '';
-                    avatarPreview = data.user.avatarUrl || '';
-                    userColor = data.user.colorCode || '#561D5E';
-                    newColor = userColor;
-                    currentUser = data.user;
-                    
-                    // Update auth store with fresh data
-                    auth.updateUser(data.user);
-                }
-            }
-        } catch (e) {
-            console.error('Failed to load user data:', e);
-            // Fallback to auth store data if available
-            if ($auth.user) {
-                bio = $auth.user.bio || '';
-                pgpOnly = $auth.user.isPgpOnly === true;
-                pgpOnlyEnabledAt = $auth.user.pgpOnlyEnabledAt || '';
-                avatarPreview = $auth.user.avatarUrl || '';
-                userColor = $auth.user.colorCode || '#561D5E';
-                newColor = userColor;
-                currentUser = $auth.user;
-            }
-        }
-        
-        loadPgpKeys();
-    });
-    
-    async function loadPgpKeys() {
-        if (!browser) return;
-        
-        try {
-            const response = await fetch('/api/user/pgp-keys', {
-                credentials: 'include'
-            });
-            const data = await response.json();
-            if (data.success) {
-                pgpKeys = data.keys;
-            }
-        } catch (e) {
-            console.error('Failed to load PGP keys:', e);
-        }
-    }
-    
-    function validatePassword(pass) {
-        if (pass.length < 8) {
-            return 'Password must be at least 8 characters';
-        }
-        if (!/[0-9]/.test(pass)) {
-            return 'Password must contain at least one number';
-        }
-        if (!/[!@#$%^&*(),.?":{}|<>]/.test(pass)) {
-            return 'Password must contain at least one symbol';
-        }
-        return '';
-    }
-    
-    async function updateProfile() {
-        error = '';
-        message = '';
-        loading = true;
-        
-        try {
-            // Update bio
-            const response = await fetch('/api/user/profile', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ bio })
-            });
-            
-            const data = await response.json();
-            
-            if (!response.ok || !data.success) {
-                error = data.error || 'Failed to update profile';
-                loading = false;
-                return;
-            }
-            
-            // Upload avatar if changed
-            if (avatarFile) {
-                const formData = new FormData();
-                formData.append('file', avatarFile);
-                
-                const avatarResponse = await fetch('/api/user/avatar', {
-                    method: 'POST',
-                    credentials: 'include',
-                    body: formData
-                });
-                
-                const avatarData = await avatarResponse.json();
-                
-                if (avatarResponse.ok && avatarData.success) {
-                    avatarPreview = avatarData.avatarUrl;
-                    avatarFile = null;
-                    avatarPreviewUrl = '';
-                    
-                    // Update current user and auth store
-                    if (currentUser) {
-                        currentUser = { ...currentUser, avatarUrl: avatarData.avatarUrl };
-                        auth.updateUser(currentUser);
-                    }
-                } else {
-                    error = avatarData.error || 'Failed to upload avatar';
-                    loading = false;
-                    return;
-                }
-            }
-            
-            message = 'Profile updated successfully';
-            error = '';
-            hasProfileChanges = false;
-            
-            // Update current user and auth store
-            if (currentUser) {
-                currentUser = { ...currentUser, bio };
-                auth.updateUser(currentUser);
-            }
-            
-            // Clear message after 3 seconds
-            setTimeout(() => { message = ''; }, 3000);
-        } catch (e) {
-            error = 'Error updating profile';
-            message = '';
-            console.error(e);
-        }
-        
-        loading = false;
-    }
-    
-    async function updatePassword() {
-        error = '';
-        message = '';
-        
-        if (newPassword !== confirmPassword) {
-            error = 'Passwords do not match';
-            return;
-        }
-        
-        const passwordError = validatePassword(newPassword);
-        if (passwordError) {
-            error = passwordError;
-            return;
-        }
-        
-        loading = true;
-        
-        try {
-            const response = await fetch('/api/user/password', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ oldPassword, newPassword })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                message = 'Password updated successfully';
-                error = '';
-                oldPassword = '';
-                newPassword = '';
-                confirmPassword = '';
-                
-                // Clear message after 3 seconds
-                setTimeout(() => { message = ''; }, 3000);
-            } else {
-                error = data.error || 'Failed to update password';
-                message = '';
-            }
-        } catch (e) {
-            error = 'Error updating password';
-            message = '';
-        }
-        
-        loading = false;
-    }
-    
-    async function updateColor() {
-        if (!newColor || newColor === userColor) {
-            colorError = 'Please select a different color';
-            return;
-        }
-        
-        colorLoading = true;
-        colorError = '';
-        colorMessage = '';
-        
-        const result = await auth.updateColor(newColor);
-        
-        if (result.success) {
-            userColor = result.color;
-            colorMessage = 'Color updated successfully!';
-            showColorPicker = false;
-            
-            // Refresh the current user data to ensure consistency
-            if (currentUser) {
-                currentUser = { ...currentUser, userColor: result.color, colorCode: result.color };
-            }
-            
-            // Clear message after 3 seconds
-            setTimeout(() => { colorMessage = ''; }, 3000);
-        } else {
-            colorError = result.error || 'Failed to update color';
-        }
-        
-        colorLoading = false;
-    }
-    
-    function selectSuggestedColor(color) {
-        newColor = color;
-    }
-    
-    function handleColorInput(event) {
-        const value = event.target.value;
-        // Ensure it starts with # and is uppercase
-        if (value.length > 0 && value[0] !== '#') {
-            newColor = '#' + value;
-        } else {
-            newColor = value.toUpperCase();
-        }
-    }
-    
-    function isValidColor(color) {
-        return /^#[0-9A-F]{6}$/i.test(color);
-    }
-    
-    // Fixed: Handle checkbox click to show warning
-    function handlePgpCheckboxClick(event) {
-        if (pgpOnly) {
-            // Already enabled, can't disable
-            event.preventDefault();
-            return;
-        }
-        
-        // Prevent the checkbox from changing state
-        event.preventDefault();
-        event.stopPropagation();
-        
-        // Show warning dialog
-        showPgpWarning = true;
-    }
-    
-    // Handle label click
-    function handlePgpLabelClick(event) {
-        event.preventDefault();
-        if (!pgpOnly && !loading) {
-            showPgpWarning = true;
-        }
-    }
-    
-    async function enablePgpOnly() {
-        // Check confirmation text
-        if (pgpConfirmationText !== PGP_CONFIRMATION_PHRASE) {
-            error = 'Please type the confirmation text exactly as shown';
-            return;
-        }
-        
-        loading = true;
-        error = '';
-        message = '';
-        showPgpWarning = false;
-        pgpConfirmationText = '';
-        
-        try {
-            const response = await fetch('/api/user/pgp-only', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ enable: true })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                pgpOnly = true;
-                pgpOnlyEnabledAt = data.pgpOnlyEnabledAt || new Date().toISOString();
-                
-                // Update current user and auth store
-                if (currentUser) {
-                    currentUser = { ...currentUser, isPgpOnly: true, pgpOnlyEnabledAt };
-                    auth.updateUser(currentUser);
-                }
-                
-                message = 'PGP-only mode enabled successfully';
-                error = '';
-                
-                // Clear message after 3 seconds
-                setTimeout(() => { message = ''; }, 3000);
-            } else {
-                error = data.error || 'Failed to enable PGP-only mode';
-                message = '';
-                // Reset checkbox on failure
-                pgpOnly = false;
-            }
-        } catch (e) {
-            error = 'Error updating setting';
-            message = '';
-            console.error(e);
-            // Reset checkbox on error
-            pgpOnly = false;
-        }
-        
-        loading = false;
-    }
-    
-    // Fixed: Cancel PGP warning and reset checkbox
-    function cancelPgpWarning() {
-        showPgpWarning = false;
-        pgpConfirmationText = '';
-        // Reset the checkbox to unchecked state
-        pgpOnly = false;
-    }
-    
-    async function generateNewKeyPair() {
-        if (!browser) return;
-        
-        error = '';
-        keyPassphrase = '';
-        confirmKeyPassphrase = '';
-        saveKeyLocally = false;
-        
-        // Prompt for passphrase first
-        showGeneratedKeys = true;
-        generatedPrivateKey = '';
-        generatedPublicKey = '';
-    }
-    
-    async function generateKeysWithPassphrase() {
-        error = '';
-        
-        if (!keyPassphrase) {
-            error = 'Passphrase is required';
-            return;
-        }
-        
-        if (keyPassphrase !== confirmKeyPassphrase) {
-            error = 'Passphrases do not match';
-            return;
-        }
-        
-        const passphraseError = pgp.validatePassphrase(keyPassphrase);
-        if (passphraseError) {
-            error = passphraseError;
-            return;
-        }
-        
-        loading = true;
-        
-        try {
-            const keyPair = await pgp.generateKeyPair(currentUser?.username || 'user', keyPassphrase);
-            
-            generatedPrivateKey = keyPair.privateKey;
-            generatedPublicKey = keyPair.publicKey;
-            
-        } catch (e) {
-            error = 'Failed to generate key pair: ' + e.message;
-            console.error(e);
-        }
-        
-        loading = false;
-    }
-    
-    async function saveGeneratedKeys() {
-        loading = true;
-        error = '';
-        
-        try {
-            // Save public key to server
-            const fingerprint = await pgp.getFingerprint(generatedPublicKey);
-            
-            const response = await fetch('/api/user/pgp-key', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({
-                    publicKey: generatedPublicKey,
-                    fingerprint: fingerprint
-                })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                // If user wants to save locally, encrypt and store
-                if (saveKeyLocally) {
-                    await pgp.saveEncryptedPrivateKey(keyPassphrase, generatedPrivateKey);
-                    hasEncryptedKey = true;
-                }
-                
-                message = 'New key pair saved successfully';
-                error = '';
-                await loadPgpKeys();
-                showGeneratedKeys = false;
-                generatedPrivateKey = '';
-                generatedPublicKey = '';
-                keyPassphrase = '';
-                confirmKeyPassphrase = '';
-                
-                // Clear message after 3 seconds
-                setTimeout(() => { message = ''; }, 3000);
-            } else {
-                error = data.error || 'Failed to save key';
-                message = '';
-            }
-        } catch (e) {
-            error = 'Failed to save key pair';
-            message = '';
-            console.error(e);
-        }
-        
-        loading = false;
-    }
-    
-    async function addPublicKey() {
-        error = '';
-        loading = true;
-        
-        try {
-            const fingerprint = await pgp.getFingerprint(newPublicKey);
-            if (!fingerprint) {
-                error = 'Invalid PGP key';
-                loading = false;
-                return;
-            }
-            
-            const response = await fetch('/api/user/pgp-key', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({
-                    publicKey: newPublicKey,
-                    fingerprint
-                })
-            });
-            
-            const data = await response.json();
-            
-            if (response.ok && data.success) {
-                message = 'PGP key added successfully';
-                error = '';
-                newPublicKey = '';
-                showAddKey = false;
-                await loadPgpKeys();
-                
-                // Clear message after 3 seconds
-                setTimeout(() => { message = ''; }, 3000);
-            } else {
-                error = data.error || 'Failed to add key';
-                message = '';
-            }
-        } catch (e) {
-            error = 'Error adding key';
-            message = '';
-        }
-        
-        loading = false;
-    }
-    
-    async function handleAvatarChange(event) {
-        const file = event.target.files[0];
-        if (!file) return;
-        
-        error = '';
-        
-        if (file.size > 250 * 1024) {
-            error = 'File too large (max 250KB)';
-            return;
-        }
-        
-        const ext = file.name.split('.').pop().toLowerCase();
-        if (!['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
-            error = 'Invalid file type (jpg, png, gif only)';
-            return;
-        }
-        
-        avatarFile = file;
-        hasProfileChanges = true;
-        
-        // Preview using FileReader
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            avatarPreviewUrl = e.target.result;
-        };
-        reader.readAsDataURL(file);
-    }
-    
-    function cancelAvatarChange() {
-        avatarFile = null;
-        avatarPreviewUrl = '';
-        hasProfileChanges = bio !== (currentUser?.bio || '');
-    }
-    
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        alert('Copied to clipboard!');
-    }
-    
-    function downloadKey(content, filename) {
-        const blob = new Blob([content], { type: 'text/plain' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
-    }
-    
-    function formatDateTime(dateStr) {
-        if (!dateStr) return '';
-        const date = new Date(dateStr);
-        return date.toLocaleString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true,
-            timeZoneName: 'short'
-        });
-    }
-    
-    async function showUnlockKeyDialog() {
-        showUnlockDialog = true;
-        unlockPassphrase = '';
-    }
-    
-    async function unlockAndExportKey() {
-        error = '';
-        
-        try {
-            const privateKey = await pgp.unlockPrivateKey(unlockPassphrase);
-            downloadKey(privateKey, `${displayUsername}-private-key.asc`);
-            showUnlockDialog = false;
-            unlockPassphrase = '';
-            message = 'Private key exported successfully';
-            setTimeout(() => { message = ''; }, 3000);
-        } catch (e) {
-            error = 'Failed to unlock key: ' + e.message;
-        }
-    }
-    
-    async function removeLocalKey() {
-        if (confirm('Remove the encrypted private key from this browser? You will need to re-import it later to use PGP login.')) {
-            await pgp.removeEncryptedPrivateKey();
-            hasEncryptedKey = false;
-            message = 'Local key removed';
-            setTimeout(() => { message = ''; }, 3000);
-        }
-    }
-    
-    // Track profile changes
-    $: if (browser) {
-        hasProfileChanges = bio !== (currentUser?.bio || '') || avatarFile !== null;
-    }
-    
-    // Get username safely for display
-    $: displayUsername = currentUser?.username || '';
-    // Choose which avatar to show
-    $: displayAvatar = avatarPreviewUrl || avatarPreview;
-</script>
-
-<style>
-    .tab-nav {
-        display: flex;
-        gap: 0;
-        border-bottom: 2px solid var(--border);
-        margin-bottom: 2rem;
-    }
-    
-    .tab-button {
-        padding: 1rem 2rem;
-        background: none;
-        border: none;
-        color: var(--gray);
-        cursor: pointer;
-        font-size: 1rem;
-        font-weight: 500;
-        position: relative;
-        transition: color 0.2s;
-        border-bottom: 3px solid transparent;
-        margin-bottom: -2px;
-    }
-    
-    .tab-button:hover {
-        color: var(--white);
-    }
-    
-    .tab-button.active {
-        color: var(--primary);
-        border-bottom-color: var(--primary);
-    }
-    
-    .file-input-wrapper {
-        position: relative;
-        overflow: hidden;
-        display: inline-block;
-    }
-    
-    .file-input-wrapper input[type="file"] {
-        position: absolute;
-        font-size: 100px;
-        right: 0;
-        top: 0;
-        opacity: 0;
-        cursor: pointer;
-    }
-    
-    .file-input-button {
-        display: inline-block;
-        padding: 0.75rem 1.5rem;
-        background: transparent;
-        color: var(--white);
-        border: 1px solid var(--primary);
-        border-radius: 4px;
-        cursor: pointer;
-        transition: opacity 0.2s;
-    }
-    
-    .file-input-button:hover {
-        opacity: 0.9;
-    }
-    
-    .checkbox-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        margin-bottom: 2rem;
-        padding: 1rem;
-        background: rgba(86, 29, 94, 0.1);
-        border: 1px solid rgba(86, 29, 94, 0.3);
-        border-radius: 8px;
-    }
-    
-    .checkbox-wrapper.disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-    
-    .checkbox-wrapper input[type="checkbox"] {
-        width: 20px;
-        height: 20px;
-        cursor: pointer;
-    }
-    
-    .checkbox-wrapper.disabled input[type="checkbox"] {
-        cursor: not-allowed;
-    }
-    
-    .checkbox-wrapper label {
-        margin: 0;
-        cursor: pointer;
-        user-select: none;
-        flex: 1;
-    }
-    
-    .checkbox-wrapper.disabled label {
-        cursor: not-allowed;
-    }
-    
-    .avatar-display {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        background: var(--gray);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 2rem;
-        color: var(--white);
-        overflow: hidden;
-    }
-    
-    .avatar-display img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-    
-    .avatar-link {
-        display: block;
-        margin-top: 0.5rem;
-        font-size: 0.85rem;
-        color: var(--primary);
-        text-decoration: none;
-        word-break: break-all;
-    }
-    
-    .avatar-link:hover {
-        text-decoration: underline;
-    }
-    
-    .warning-modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.9);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2000;
-    }
-    
-    .warning-content {
-        background: #111;
-        border: 2px solid var(--error);
-        border-radius: 8px;
-        padding: 2rem;
-        max-width: 500px;
-        width: 90%;
-        max-height: 90vh;
-        overflow-y: auto;
-    }
-    
-    .warning-header {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        margin-bottom: 1.5rem;
-        color: var(--error);
-    }
-    
-    .warning-icon {
-        font-size: 2.5rem;
-    }
-    
-    .warning-title {
-        font-size: 1.5rem;
-        font-weight: 600;
-        margin: 0;
-    }
-    
-    .warning-list {
-        list-style: none;
-        padding: 0;
-        margin: 1.5rem 0;
-    }
-    
-    .warning-list li {
-        margin-bottom: 1rem;
-        padding-left: 2rem;
-        position: relative;
-    }
-    
-    .warning-list li::before {
-        content: "⚠️";
-        position: absolute;
-        left: 0;
-    }
-    
-    .confirmation-box {
-        background: rgba(220, 53, 69, 0.1);
-        border: 1px solid var(--error);
-        border-radius: 4px;
-        padding: 1rem;
-        margin: 1.5rem 0;
-    }
-    
-    .confirmation-text {
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-    }
-    
-    .confirmation-input {
-        width: 100%;
-        padding: 0.5rem;
-        background: var(--black);
-        border: 1px solid var(--error);
-        color: var(--white);
-        border-radius: 4px;
-    }
-    
-    .warning-actions {
-        display: flex;
-        gap: 1rem;
-        justify-content: flex-end;
-        margin-top: 2rem;
-    }
-    
-    .pgp-enabled-info {
-        background: rgba(40, 167, 69, 0.1);
-        border: 1px solid rgba(40, 167, 69, 0.3);
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }
-    
-    .pgp-enabled-info p {
-        margin: 0 0 0.5rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .pgp-enabled-info .check-icon {
-        color: var(--success);
-        font-size: 1.2rem;
-    }
-    
-    .pgp-enabled-date {
-        font-size: 0.9rem;
-        color: var(--gray);
-    }
-    
-    .save-reminder {
-        background: rgba(255, 193, 7, 0.1);
-        border: 1px solid rgba(255, 193, 7, 0.3);
-        border-radius: 4px;
-        padding: 0.75rem 1rem;
-        margin-bottom: 1rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    /* Color picker styles */
-    .color-picker-container {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-    }
-    
-    .color-input-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .color-preview {
-        width: 40px;
-        height: 40px;
-        border-radius: 8px;
-        border: 2px solid var(--border);
-        cursor: pointer;
-        transition: transform 0.2s;
-    }
-    
-    .color-preview:hover {
-        transform: scale(1.05);
-    }
-    
-    .color-input {
-        padding: 0.75rem;
-        font-family: monospace;
-        text-transform: uppercase;
-    }
-    
-    .color-grid {
-        display: grid;
-        grid-template-columns: repeat(8, 1fr);
-        gap: 0.5rem;
-        margin-top: 1rem;
-        padding: 1rem;
-        background: rgba(0, 0, 0, 0.3);
-        border-radius: 8px;
-    }
-    
-    .color-option {
-        width: 40px;
-        height: 40px;
-        border-radius: 8px;
-        border: 2px solid transparent;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-    
-    .color-option:hover {
-        transform: scale(1.1);
-        border-color: var(--white);
-    }
-    
-    .color-option.selected {
-        border-color: var(--white);
-        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
-    }
-    
-    .passphrase-info {
-        background: rgba(86, 29, 94, 0.1);
-        border: 1px solid rgba(86, 29, 94, 0.3);
-        border-radius: 4px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }
-    
-    .passphrase-info h4 {
-        margin: 0 0 0.5rem 0;
-        color: var(--primary);
-    }
-    
-    .passphrase-info ul {
-        margin: 0;
-        padding-left: 1.5rem;
-        font-size: 0.9rem;
-        color: var(--gray);
-    }
-    
-    .key-storage-option {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        margin-top: 1rem;
-        padding: 1rem;
-        background: rgba(255, 193, 7, 0.1);
-        border: 1px solid rgba(255, 193, 7, 0.3);
-        border-radius: 4px;
-    }
-    
-    .local-key-info {
-        background: rgba(40, 167, 69, 0.1);
-        border: 1px solid rgba(40, 167, 69, 0.3);
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }
-    
-    .local-key-info p {
-        margin: 0 0 0.5rem 0;
-    }
-    
-    .local-key-actions {
-        display: flex;
-        gap: 1rem;
-        margin-top: 1rem;
-    }
-</style>
-
-<div class="container">
-    <h1>Settings</h1>
-    
-    <div class="tab-nav">
-        <button 
-            class="tab-button" 
-            class:active={activeTab === 'profile'}
-            on:click={() => activeTab = 'profile'}
-        >
-            Profile
-        </button>
-        <button 
-            class="tab-button" 
-            class:active={activeTab === 'appearance'}
-            on:click={() => activeTab = 'appearance'}
-        >
-            Appearance
-        </button>
-        <button 
-            class="tab-button" 
-            class:active={activeTab === 'password'}
-            on:click={() => activeTab = 'password'}
-        >
-            Password
-        </button>
-        <button 
-            class="tab-button" 
-            class:active={activeTab === 'pgp'}
-            on:click={() => activeTab = 'pgp'}
-        >
-            PGP Keys
-        </button>
-    </div>
-    
-    {#if activeTab === 'profile'}
-        <div class="card">
-            <h2>Profile Settings</h2>
-            
-            {#if message}
-                <div class="success" style="margin-bottom: 1rem;">{message}</div>
-            {/if}
-            
-            {#if error}
-                <div class="error" style="margin-bottom: 1rem;">{error}</div>
-            {/if}
-            
-            {#if hasProfileChanges}
-                <div class="save-reminder">
-                    <span>ℹ️</span>
-                    <span>You have unsaved changes. Click "Save Profile" to apply them.</span>
-                </div>
-            {/if}
-            
-            <div class="form-group">
-                <label for="avatar-upload">Avatar</label>
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                    <div class="avatar-display">
-                        {#if displayAvatar}
-                            <img src={displayAvatar} alt="Avatar" />
-                        {:else if displayUsername}
-                            {displayUsername.charAt(0).toUpperCase()}
-                        {/if}
-                    </div>
-                    
-                    <div>
-                        <div class="file-input-wrapper">
-                            <div class="file-input-button">Choose File</div>
-                            <input
-                                id="avatar-upload"
-                                type="file"
-                                accept="image/jpeg,image/png,image/gif"
-                                on:change={handleAvatarChange}
-                            />
-                        </div>
-                        {#if avatarFile}
-                            <button 
-                                class="btn btn-secondary"
-                                style="margin-left: 0.5rem;"
-                                on:click={cancelAvatarChange}
-                            >
-                                Cancel
-                            </button>
-                        {/if}
-                        <div style="font-size: 0.85rem; color: var(--gray); margin-top: 0.5rem;">
-                            Max 250KB, JPG/PNG/GIF only
-                        </div>
-                        {#if avatarPreview && !avatarFile && !avatarPreviewUrl}
-                            <a href={avatarPreview} target="_blank" class="avatar-link">
-                                {avatarPreview}
-                            </a>
-                        {/if}
-                    </div>
-                </div>
-            </div>
-            
-            <div class="form-group">
-                <label for="bio">Bio</label>
-                <textarea
-                    id="bio"
-                    bind:value={bio}
-                    rows="4"
-                    placeholder="Tell us about yourself..."
-                />
-            </div>
-            
-            <button 
-                on:click={updateProfile}
-                disabled={loading || !hasProfileChanges}
-            >
-                {loading ? 'Saving...' : 'Save Profile'}
-            </button>
-        </div>
-    {:else if activeTab === 'appearance'}
-        <div class="card">
-            <h2>Appearance Settings</h2>
-            
-            {#if colorMessage}
-                <div class="success" style="margin-bottom: 1rem;">{colorMessage}</div>
-            {/if}
-            
-            {#if colorError}
-                <div class="error" style="margin-bottom: 1rem;">{colorError}</div>
-            {/if}
-            
-            <div class="form-group">
-                <label>Profile Color</label>
-                <p style="color: var(--gray); font-size: 0.9rem; margin-bottom: 1rem;">
-                    Your unique color appears next to your name across the platform
-                </p>
-                
-                <div class="color-picker-container">
-                    <div style="display: flex; align-items: center; gap: 1rem;">
-                        <div 
-                            class="color-preview" 
-                            style="background: {userColor};"
-                            title="Current color"
-                        ></div>
-                        <div>
-                            <div style="font-family: monospace; font-size: 1.1rem;">
-                                {userColor}
-                            </div>
-                            <div style="font-size: 0.85rem; color: var(--gray);">
-                                Current color
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <button 
-                        class="btn btn-secondary"
-                        on:click={() => { showColorPicker = !showColorPicker; newColor = userColor; }}
-                    >
-                        {showColorPicker ? 'Cancel' : 'Change Color'}
-                    </button>
-                </div>
-            </div>
-            
-            {#if showColorPicker}
-                <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(86, 29, 94, 0.1); border: 1px solid rgba(86, 29, 94, 0.3); border-radius: 8px;">
-                    <h3 style="margin-bottom: 1rem;">Choose a new color</h3>
-                    
-                    <div class="form-group">
-                        <label for="color-input">Custom Color</label>
-                        <div class="color-input-wrapper">
-                            <div 
-                                class="color-preview" 
-                                style="background: {isValidColor(newColor) ? newColor : '#000'};"
-                            ></div>
-                            <input
-                                id="color-input"
-                                type="text"
-                                class="color-input"
-                                value={newColor}
-                                on:input={handleColorInput}
-                                placeholder="#000000"
-                                maxlength="7"
-                                pattern="^#[0-9A-Fa-f]{6}$"
-                            />
-                            <input
-                                type="color"
-                                value={newColor}
-                                on:input={(e) => newColor = e.target.value.toUpperCase()}
-                                style="width: 50px; height: 40px; cursor: pointer; border: 1px solid var(--border); border-radius: 4px;"
-                            />
-                        </div>
-                        <small style="color: var(--gray);">
-                            Enter a hex color code (e.g., #FF6B6B)
-                        </small>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label>Suggested Colors</label>
-                        <div class="color-grid">
-                            {#each suggestedColors as color}
-                                <button
-                                    class="color-option"
-                                    class:selected={newColor === color}
-                                    style="background: {color};"
-                                    on:click={() => selectSuggestedColor(color)}
-                                    title={color}
-                                ></button>
-                            {/each}
-                        </div>
-                    </div>
-                    
-                    <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
-                        <button 
-                            on:click={updateColor}
-                            disabled={colorLoading || !isValidColor(newColor) || newColor === userColor}
-                        >
-                            {colorLoading ? 'Updating...' : 'Save Color'}
-                        </button>
-                        <button 
-                            class="btn btn-secondary"
-                            on:click={() => { showColorPicker = false; newColor = userColor; }}
-                            disabled={colorLoading}
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                    
-                    {#if newColor && newColor !== userColor}
-                        <div style="margin-top: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 4px;">
-                            <div style="display: flex; align-items: center; gap: 1rem;">
-                                <div 
-                                    class="color-preview" 
-                                    style="background: {newColor};"
-                                ></div>
-                                <div>
-                                    <div style="font-size: 0.85rem; color: var(--gray);">Preview</div>
-                                    <div style="font-family: monospace;">{newColor}</div>
-                                </div>
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-            {/if}
-        </div>
-    {:else if activeTab === 'password'}
-        <div class="card">
-            <h2>Change Password</h2>
-            
-            {#if pgpOnly}
-                <div class="pgp-enabled-info" style="margin-bottom: 2rem;">
-                    <p>
-                        <span class="check-icon">🔐</span>
-                        <strong>PGP-only mode is enabled</strong>
-                    </p>
-                    <p style="font-size: 0.9rem; margin-bottom: 0;">
-                        Password login is disabled. You can still change your password as a backup,
-                        but you must use PGP to login.
-                    </p>
-                </div>
-            {/if}
-            
-            {#if message}
-                <div class="success" style="margin-bottom: 1rem;">{message}</div>
-            {/if}
-            
-            {#if error}
-                <div class="error" style="margin-bottom: 1rem;">{error}</div>
-            {/if}
-            
-            <form on:submit|preventDefault={updatePassword}>
-                <div class="form-group">
-                    <label for="old-password">Current Password</label>
-                    <input
-                        type="password"
-                        id="old-password"
-                        bind:value={oldPassword}
-                        required
-                    />
-                </div>
-                
-                <div class="form-group">
-                    <label for="new-password">New Password</label>
-                    <input
-                        type="password"
-                        id="new-password"
-                        bind:value={newPassword}
-                        required
-                    />
-                    <small style="color: var(--gray);">
-                        Must be 8+ characters with at least one number and symbol
-                    </small>
-                </div>
-                
-                <div class="form-group">
-                    <label for="confirm-new-password">Confirm New Password</label>
-                    <input
-                        type="password"
-                        id="confirm-new-password"
-                        bind:value={confirmPassword}
-                        required
-                    />
-                </div>
-                
-                <button type="submit" disabled={loading}>
-                    {loading ? 'Updating...' : 'Update Password'}
-                </button>
-            </form>
-        </div>
-    {:else if activeTab === 'pgp'}
-        <div class="card">
-            <h2>PGP Key Management</h2>
-            
-            {#if message}
-                <div class="success" style="margin-bottom: 1rem;">{message}</div>
-            {/if}
-            
-            {#if error}
-                <div class="error" style="margin-bottom: 1rem;">{error}</div>
-            {/if}
-            
-            {#if pgpOnly}
-                <div class="pgp-enabled-info">
-                    <p>
-                        <span class="check-icon">✔</span>
-                        <strong>PGP-only mode is active</strong>
-                    </p>
-                    <p class="pgp-enabled-date">
-                        Enabled on: {formatDateTime(pgpOnlyEnabledAt)}
-                    </p>
-                    <p style="font-size: 0.9rem; margin-bottom: 0;">
-                        Password login has been permanently disabled. You can only login using your PGP keys.
-                    </p>
-                </div>
-            {:else}
-                <div class="checkbox-wrapper" class:disabled={pgpOnly}>
-                    <input
-                        type="checkbox"
-                        id="pgp-only"
-                        checked={pgpOnly}
-                        on:click={handlePgpCheckboxClick}
-                        disabled={pgpOnly || loading}
-                        readonly
-                    />
-                    <label 
-                        for="pgp-only"
-                        on:click={handlePgpLabelClick}
-                    >
-                        Enable PGP-only mode (disables password login permanently)
-                    </label>
-                </div>
-            {/if}
-            
-            {#if hasEncryptedKey}
-                <div class="local-key-info">
-                    <p>
-                        <span style="color: var(--success);">🔑</span>
-                        <strong>Encrypted private key stored in this browser</strong>
-                    </p>
-                    <p style="font-size: 0.9rem; color: var(--gray);">
-                        Your private key is encrypted and stored locally. You'll need your passphrase to use it.
-                    </p>
-                    <div class="local-key-actions">
-                        <button on:click={showUnlockKeyDialog}>
-                            Export Private Key
-                        </button>
-                        <button class="btn btn-danger" on:click={removeLocalKey}>
-                            Remove Local Key
-                        </button>
-                    </div>
-                </div>
-            {/if}
-            
-            <h3>Your PGP Keys</h3>
-            
-            {#if pgpKeys.length > 0}
-                <div class="table" style="margin-bottom: 2rem;">
-                    <table style="width: 100%;">
-                        <thead>
-                            <tr>
-                                <th>Fingerprint</th>
-                                <th>Created</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {#each pgpKeys as key}
-                                <tr>
-                                    <td class="fingerprint">{key.fingerprint}</td>
-                                    <td>{new Date(key.createdAt).toLocaleDateString()}</td>
-                                </tr>
-                            {/each}
-                        </tbody>
-                    </table>
-                </div>
-            {:else}
-                <p style="color: var(--gray); margin-bottom: 2rem;">No PGP keys found</p>
-            {/if}
-            
-            {#if showGeneratedKeys}
-                <div style="margin: 2rem 0; padding: 1.5rem; background: rgba(86, 29, 94, 0.1); border: 1px solid rgba(86, 29, 94, 0.3); border-radius: 8px;">
-                    <h3>Generate New Key Pair</h3>
-                    
-                    {#if !generatedPrivateKey}
-                        <div class="passphrase-info">
-                            <h4>🔐 Passphrase Requirements</h4>
-                            <ul>
-                                <li>At least 12 characters long</li>
-                                <li>Include 3 of: uppercase, lowercase, numbers, special characters</li>
-                                <li>This passphrase encrypts your private key</li>
-                                <li>You'll need it every time you use your key</li>
-                            </ul>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="key-passphrase">Passphrase</label>
-                            <input
-                                type="password"
-                                id="key-passphrase"
-                                bind:value={keyPassphrase}
-                                placeholder="Enter a strong passphrase"
-                                disabled={loading}
-                            />
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="confirm-key-passphrase">Confirm Passphrase</label>
-                            <input
-                                type="password"
-                                id="confirm-key-passphrase"
-                                bind:value={confirmKeyPassphrase}
-                                placeholder="Confirm your passphrase"
-                                disabled={loading}
-                            />
-                        </div>
-                        
-                        <div style="display: flex; gap: 1rem;">
-                            <button on:click={generateKeysWithPassphrase} disabled={loading || !keyPassphrase}>
-                                {loading ? 'Generating...' : 'Generate Keys'}
-                            </button>
-                            <button 
-                                class="btn btn-secondary"
-                                on:click={() => { showGeneratedKeys = false; keyPassphrase = ''; confirmKeyPassphrase = ''; }}
-                            >
-                                Cancel
-                            </button>
-                        </div>
-                    {:else}
-                        <p style="color: var(--error); margin-bottom: 1rem;">
-                            <strong>Important:</strong> Save your private key securely. You will need it and your passphrase to login with PGP.
-                        </p>
-                        
-                        <div class="form-group">
-                            <label>Public Key</label>
-                            <textarea 
-                                readonly 
-                                rows="8" 
-                                value={generatedPublicKey}
-                                style="font-family: monospace; font-size: 0.8rem;"
-                            />
-                            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-                                <button type="button" on:click={() => copyToClipboard(generatedPublicKey)}>
-                                    Copy
-                                </button>
-                                <button type="button" class="btn-secondary" on:click={() => downloadKey(generatedPublicKey, `${displayUsername}-public-key.asc`)}>
-                                    Download
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>Private Key (Encrypted with your passphrase)</label>
-                            <textarea 
-                                readonly 
-                                rows="8" 
-                                value={generatedPrivateKey}
-                                style="font-family: monospace; font-size: 0.8rem;"
-                            />
-                            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-                                <button type="button" on:click={() => copyToClipboard(generatedPrivateKey)}>
-                                    Copy
-                                </button>
-                                <button type="button" class="btn-secondary" on:click={() => downloadKey(generatedPrivateKey, `${displayUsername}-private-key.asc`)}>
-                                    Download (Required!)
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="key-storage-option">
-                            <input
-                                type="checkbox"
-                                id="save-key-locally"
-                                bind:checked={saveKeyLocally}
-                            />
-                            <label for="save-key-locally">
-                                Also save encrypted key in this browser for easier PGP login (you can export/remove it later)
-                            </label>
-                        </div>
-                        
-                        <div style="display: flex; gap: 1rem; margin-top: 1rem;">
-                            <button on:click={saveGeneratedKeys} disabled={loading}>
-                                Save Keys
-                            </button>
-                            <button 
-                                class="btn btn-secondary"
-                                on:click={() => { showGeneratedKeys = false; generatedPrivateKey = ''; generatedPublicKey = ''; keyPassphrase = ''; confirmKeyPassphrase = ''; }}
-                            >
-                                Cancel
-                            </button>
-                        </div>
-                    {/if}
-                </div>
-            {:else}
-                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
-                    <button on:click={generateNewKeyPair} disabled={loading}>
-                        Generate New Key Pair
-                    </button>
-                    
-                    <button 
-                        class="btn btn-secondary"
-                        on:click={() => showAddKey = !showAddKey}
-                    >
-                        Add Existing Public Key
-                    </button>
-                </div>
-            {/if}
-            
-            {#if showAddKey}
-                <div style="margin-top: 2rem;">
-                    <h4>Add Public Key</h4>
-                    <div class="form-group">
-                        <textarea
-                            bind:value={newPublicKey}
-                            rows="10"
-                            placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----"
-                            style="font-family: monospace; font-size: 0.9rem;"
-                        />
-                    </div>
-                    <button on:click={addPublicKey} disabled={loading || !newPublicKey}>
-                        Add Key
-                    </button>
-                    <button 
-                        class="btn btn-secondary"
-                        style="margin-left: 0.5rem;"
-                        on:click={() => { showAddKey = false; newPublicKey = ''; }}
-                    >
-                        Cancel
-                    </button>
-                </div>
-            {/if}
-        </div>
-    {/if}
-</div>
-
-{#if showPgpWarning}
-    <div class="warning-modal">
-        <div class="warning-content">
-            <div class="warning-header">
-                <span class="warning-icon">⚠️</span>
-                <h2 class="warning-title">Critical Security Warning</h2>
-            </div>
-            
-            <p><strong>You are about to enable PGP-only authentication mode.</strong></p>
-            
-            <ul class="warning-list">
-                <li>This action is <strong>PERMANENT</strong> and <strong>CANNOT BE REVERSED</strong></li>
-                <li>Password login will be <strong>PERMANENTLY DISABLED</strong></li>
-                <li>You will <strong>ONLY</strong> be able to login using your PGP private key</li>
-                <li>If you lose your private key, you will <strong>LOSE ACCESS TO YOUR ACCOUNT FOREVER</strong></li>
-                <li>There is <strong>NO RECOVERY METHOD</strong> if you lose your PGP keys</li>
-                <li>Even administrators <strong>CANNOT</strong> restore password access</li>
-            </ul>
-            
-            <div class="confirmation-box">
-                <p class="confirmation-text">
-                    To confirm you understand and accept these risks, type 
-                    <strong style="color: var(--error);">I UNDERSTAND THIS IS PERMANENT</strong> below:
-                </p>
-                <input 
-                    type="text" 
-                    class="confirmation-input"
-                    placeholder="Type the confirmation text here"
-                    bind:value={pgpConfirmationText}
-                    on:input={(e) => {
-                        if (e.target.value === PGP_CONFIRMATION_PHRASE) {
-                            e.target.style.borderColor = 'var(--success)';
-                        } else {
-                            e.target.style.borderColor = 'var(--error)';
-                        }
-                    }}
-                />
-            </div>
-            
-            <div class="warning-actions">
-                <button 
-                    class="btn btn-secondary"
-                    on:click={cancelPgpWarning}
-                >
-                    Cancel
-                </button>
-                <button 
-                    class="btn btn-danger"
-                    on:click={enablePgpOnly}
-                    disabled={loading || pgpConfirmationText !== PGP_CONFIRMATION_PHRASE}
-                >
-                    {loading ? 'Enabling...' : 'Enable PGP-Only Mode'}
-                </button>
-            </div>
-        </div>
-    </div>
-{/if}
-
-{#if showUnlockDialog}
-    <div class="warning-modal">
-        <div class="warning-content">
-            <h2>Unlock Private Key</h2>
-            <p style="margin-bottom: 1rem;">Enter your passphrase to decrypt and export your private key.</p>
-            
-            {#if error}
-                <div class="error" style="margin-bottom: 1rem;">{error}</div>
-            {/if}
-            
-            <div class="form-group">
-                <label for="unlock-passphrase">Passphrase</label>
-                <input
-                    type="password"
-                    id="unlock-passphrase"
-                    bind:value={unlockPassphrase}
-                    placeholder="Enter your key passphrase"
-                />
-            </div>
-            
-            <div class="warning-actions">
-                <button 
-                    class="btn btn-secondary"
-                    on:click={() => { showUnlockDialog = false; unlockPassphrase = ''; }}
-                >
-                    Cancel
-                </button>
-                <button 
-                    on:click={unlockAndExportKey}
-                    disabled={!unlockPassphrase}
-                >
-                    Unlock & Export
-                </button>
-            </div>
-        </div>
-    </div>
-{/if}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\frontend\src\routes\[realm]\live\+page.svelte ###
-
-<script>
-    import { onMount, onDestroy } from 'svelte';
-    import { page } from '$app/stores';
-    import { auth } from '$lib/stores/auth';
-    import { connectWebSocket, disconnectWebSocket } from '$lib/websocket';
-    import { goto } from '$app/navigation';
-    
-    // Import CSS that's safe for SSR
-    import '@fortawesome/fontawesome-free/css/all.min.css';
-    import 'mdb-ui-kit/css/mdb.min.css';
-    
-    // Browser-only imports
-    let Hls;
-    let OvenPlayer;
-    
-    // Only import on client side
-    if (typeof window !== 'undefined') {
-        import('hls.js').then(module => {
-            Hls = module.default;
-            window.Hls = Hls;
-        });
-        
-        import('ovenplayer').then(module => {
-            OvenPlayer = module.default;
-            window.OvenPlayer = OvenPlayer;
-        });
-    }
-    
-    const STREAM_PORT = import.meta.env.VITE_STREAM_PORT || '8088';
-    
-    let player;
-    let realm = null;
-    let streamKey = '';
-    let loading = true;
-    let error = '';
-    let message = '';
-    let isStreaming = false;
-    let heartbeatInterval;
-    let viewerToken = null;
-    let statsInterval;
-    
-    // Stats
-    let stats = {
-        connections: 0,
-        bitrate: 0,
-        resolution: 'N/A',
-        codec: 'N/A',
-        fps: 0,
-        isLive: false
-    };
-    
-    onMount(async () => {
-        const realmName = $page.params.realm;
-        
-        // Load realm info
-        await loadRealm(realmName);
-        
-        if (!realm) {
-            error = 'Realm not found';
-            loading = false;
-            return;
-        }
-        
-        // Get viewer token
-        const tokenObtained = await getViewerToken();
-        
-        if (!tokenObtained) {
-            loading = false;
-            return;
-        }
-        
-        // Get the actual stream key using the token
-        const keyObtained = await getStreamKey();
-        
-        if (!keyObtained) {
-            loading = false;
-            return;
-        }
-        
-        // Wait for dependencies
-        const checkDependencies = async () => {
-            let attempts = 0;
-            while ((!window.Hls || !window.OvenPlayer) && attempts < 20) {
-                await new Promise(resolve => setTimeout(resolve, 100));
-                attempts++;
-            }
-            
-            if (!window.Hls || !window.OvenPlayer) {
-                console.error('Failed to load dependencies');
-                error = 'Failed to load player dependencies';
-                return false;
-            }
-            return true;
-        };
-        
-        const depsLoaded = await checkDependencies();
-        if (!depsLoaded) {
-            loading = false;
-            return;
-        }
-        
-        // Initialize player after a short delay
-        setTimeout(initializePlayer, 100);
-        
-        // Start heartbeat
-        startHeartbeat();
-        
-        // Start stats polling
-        startStatsPolling();
-        
-        // Connect WebSocket
-        connectWebSocket((data) => {
-            if (data.type === 'stats_update' && data.stream_key === streamKey) {
-                updateStatsFromData(data.stats);
-            }
-        });
-        
-        loading = false;
-    });
-    
-    onDestroy(() => {
-        if (player) {
-            player.remove();
-        }
-        if (heartbeatInterval) {
-            clearInterval(heartbeatInterval);
-        }
-        if (statsInterval) {
-            clearInterval(statsInterval);
-        }
-        disconnectWebSocket();
-    });
-    
-    async function loadRealm(realmName) {
-        try {
-            const response = await fetch(`/api/realms/by-name/${realmName}`);
-            if (response.ok) {
-                const data = await response.json();
-                realm = data.realm;
-                // Get the stream key from the database
-                const keyResponse = await fetch(`/api/realms/${realm.id}`);
-                if (keyResponse.ok && keyResponse.status !== 404) {
-                    const keyData = await keyResponse.json();
-                    if (keyData.success && keyData.realm && keyData.realm.streamKey) {
-                        streamKey = keyData.realm.streamKey;
-                    }
-                } else {
-                    // If we can't get the key directly, we'll need to rely on the backend
-                    // to validate tokens against the realm
-                    streamKey = 'realm-' + realm.id;
-                }
-            } else if (response.status === 404) {
-                error = 'Realm not found';
-            }
-        } catch (e) {
-            console.error('Failed to load realm:', e);
-            error = 'Failed to load realm';
-        }
-    }
-    
-    async function getViewerToken() {
-        if (!realm) return;
-        
-        try {
-            const response = await fetch(`/api/realms/${realm.id}/viewer-token`, {
-                credentials: 'include'
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                viewerToken = data.viewer_token;
-                console.log('Viewer token obtained');
-                
-                // Now we need to get the actual stream key for the player
-                // This will be handled server-side via the token
-                return true;
-            } else {
-                console.error('Failed to get viewer token');
-                error = 'Failed to authenticate for stream';
-                return false;
-            }
-        } catch (e) {
-            console.error('Error getting viewer token:', e);
-            error = 'Failed to authenticate for stream';
-            return false;
-        }
-    }
-    
-    async function getStreamKey() {
-        if (!realm || !viewerToken) return false;
-        
-        try {
-            const response = await fetch(`/api/realms/${realm.id}/stream-key`, {
-                credentials: 'include'
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                streamKey = data.streamKey;
-                console.log('Stream key obtained');
-                return true;
-            } else {
-                console.error('Failed to get stream key');
-                error = 'Failed to get stream key';
-                return false;
-            }
-        } catch (e) {
-            console.error('Error getting stream key:', e);
-            error = 'Failed to get stream key';
-            return false;
-        }
-    }
-    
-    function startHeartbeat() {
-        heartbeatInterval = setInterval(async () => {
-            if (streamKey && viewerToken) {
-                try {
-                    const response = await fetch(`/api/stream/heartbeat/${streamKey}`, {
-                        method: 'POST',
-                        credentials: 'include'
-                    });
-                    
-                    if (!response.ok) {
-                        console.error('Heartbeat failed, getting new token');
-                        await getViewerToken();
-                    }
-                } catch (error) {
-                    console.error('Heartbeat error:', error);
-                }
-            }
-        }, 10000);
-    }
-    
-    function startStatsPolling() {
-        statsInterval = setInterval(async () => {
-            if (realm) {
-                try {
-                    const response = await fetch(`/api/realms/${realm.id}/stats`);
-                    const data = await response.json();
-                    if (data.success && data.stats) {
-                        updateStatsFromData(data.stats);
-                    }
-                } catch (error) {
-                    console.error('Failed to fetch stats:', error);
-                }
-            }
-        }, 2000);
-    }
-    
-    function updateStatsFromData(data) {
-        stats = {
-            connections: data.connections || 0,
-            bitrate: data.bitrate || 0,
-            resolution: data.resolution || 'N/A',
-            codec: data.codec || 'N/A',
-            fps: data.fps || 0,
-            isLive: data.is_live || false
-        };
-        
-        isStreaming = stats.isLive;
-        
-        // Update viewer count in realm info if different
-        if (realm && realm.viewerCount !== stats.connections) {
-            realm.viewerCount = stats.connections;
-        }
-    }
-    
-    function initializePlayer() {
-        const playerElement = document.getElementById('player');
-        if (!playerElement) {
-            console.error('Player element not found');
-            return;
-        }
-        
-        if (!viewerToken || !streamKey) {
-            console.error('No viewer token or stream key, cannot initialize player');
-            return;
-        }
-        
-        const sources = [];
-        
-        if (streamKey) {
-            // Add all sources
-            sources.push(
-                {
-                    type: 'webrtc',
-                    file: `ws://localhost:3333/app/${streamKey}`,
-                    label: 'WebRTC (Ultra Low Latency)'
-                },
-                {
-                    type: 'hls',
-                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/llhls.m3u8`,
-                    label: 'LLHLS (Low Latency)'
-                },
-                {
-                    type: 'hls',
-                    file: `http://localhost:${STREAM_PORT}/app/${streamKey}/ts:playlist.m3u8`,
-                    label: 'HLS (Standard)'
-                }
-            );
-        }
-        
-        const config = {
-            autoStart: true,
-            autoFallback: true,
-            controls: true,
-            showBigPlayButton: true,
-            watermark: false,
-            mute: false,
-            aspectRatio: "16:9",
-            sources: sources,
-            webrtcConfig: {
-                timeoutMaxRetry: 4,
-                connectionTimeout: 10000
-            },
-            hlsConfig: {
-                debug: false,
-                enableWorker: true,
-                lowLatencyMode: true,
-                backBufferLength: 90,
-                xhrSetup: function(xhr, url) {
-                    xhr.withCredentials = true;
-                }
-            }
-        };
-        
-        try {
-            player = window.OvenPlayer.create('player', config);
-            
-            player.on('error', (error) => {
-                console.error('Player error:', error);
-                isStreaming = false;
-                
-                if (error.code === 403 || error.code === 401) {
-                    getViewerToken().then(() => {
-                        if (player) {
-                            player.remove();
-                            setTimeout(initializePlayer, 500);
-                        }
-                    });
-                }
-            });
-            
-            player.on('stateChanged', (data) => {
-                if (data.newstate === 'playing') {
-                    isStreaming = true;
-                    message = '';
-                } else if (data.newstate === 'error' || data.newstate === 'idle') {
-                    if (!stats.isLive) {
-                        isStreaming = false;
-                    }
-                }
-            });
-            
-            player.on('play', () => {
-                isStreaming = true;
-            });
-            
-        } catch (e) {
-            console.error('Failed to create player:', e);
-            error = 'Failed to initialize player';
-        }
-    }
-    
-    function formatBitrate(bitrate) {
-        if (bitrate > 1000000) {
-            return (bitrate / 1000000).toFixed(2) + ' Mbps';
-        } else if (bitrate > 1000) {
-            return (bitrate / 1000).toFixed(0) + ' Kbps';
-        } else {
-            return bitrate + ' bps';
-        }
-    }
-</script>
-
-<style>
-    /* Fix the background color issue */
-    :global(body) {
-        background: var(--black) !important;
-        color: var(--white) !important;
-    }
-    
-    .stream-container {
-        max-width: 1400px;
-        margin: 0 auto;
-        padding: 2rem;
-        display: grid;
-        grid-template-columns: 1fr 320px;
-        gap: 2rem;
-        background: var(--black);
-        color: var(--white);
-    }
-    
-    @media (max-width: 1024px) {
-        .stream-container {
-            grid-template-columns: 1fr;
-        }
-    }
-    
-    .player-section {
-        width: 100%;
-    }
-    
-    .player-wrapper {
-        background: #000;
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-        margin-bottom: 1rem;
-        position: relative;
-    }
-    
-    .player-wrapper::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, 
-            var(--user-color, var(--primary)) 0%, 
-            var(--user-color, var(--primary)) 50%, 
-            rgba(255, 255, 255, 0.1) 100%
-        );
-        z-index: 1;
-    }
-    
-    .player-area {
-        position: relative;
-    }
-    
-    .dummy-player {
-        padding-bottom: 56.25%; /* 16:9 aspect ratio */
-        background: #000;
-    }
-    
-    .player-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-    }
-    
-    #player {
-        width: 100%;
-        height: 100%;
-    }
-    
-    .stream-info-section {
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 1.5rem;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .stream-info-section::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        background: var(--user-color, var(--primary));
-        opacity: 0.6;
-    }
-    
-    .stream-header {
-        margin-bottom: 1.5rem;
-        padding-left: 1rem;
-    }
-    
-    .stream-header h1 {
-        margin: 0 0 0.5rem 0;
-        font-size: 1.5rem;
-        color: var(--white);
-    }
-    
-    .streamer-info {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        margin-bottom: 1rem;
-    }
-    
-    .streamer-avatar {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        background: var(--gray);
-        position: relative;
-        overflow: hidden;
-        border: 2px solid var(--border);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 600;
-        color: var(--white);
-        transition: all 0.3s ease;
-    }
-    
-    .streamer-avatar.has-color {
-        background: var(--user-color);
-        border-color: var(--user-color);
-        border-width: 3px;
-        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-    }
-    
-    .streamer-avatar.has-color.with-image {
-        border-width: 3px;
-    }
-    
-    .streamer-avatar img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-    
-    .streamer-name {
-        font-weight: 600;
-        color: var(--white);
-        font-size: 1.1rem;
-    }
-    
-    .viewer-count {
-        font-size: 0.9rem;
-        color: var(--gray);
-    }
-    
-    .sidebar {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-    }
-    
-    .stats-section {
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 1.5rem;
-    }
-    
-    .stats-section h3 {
-        margin: 0 0 1rem 0;
-        font-size: 1.1rem;
-        color: var(--primary);
-    }
-    
-    .status-indicator {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 20px;
-        font-size: 0.9rem;
-        margin-bottom: 1rem;
-    }
-    
-    .status-indicator.active {
-        background: rgba(40, 167, 69, 0.2);
-        color: var(--success);
-    }
-    
-    .status-indicator.inactive {
-        background: rgba(220, 53, 69, 0.2);
-        color: var(--error);
-    }
-    
-    .stats-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-    
-    .stat-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .stat-item:last-child {
-        border-bottom: none;
-    }
-    
-    .stat-label {
-        color: var(--gray);
-        font-size: 0.9rem;
-    }
-    
-    .stat-value {
-        font-weight: 600;
-        font-family: monospace;
-        color: var(--white);
-    }
-    
-    .offline-message {
-        text-align: center;
-        padding: 4rem 2rem;
-        color: var(--gray);
-    }
-    
-    .offline-icon {
-        font-size: 4rem;
-        margin-bottom: 1rem;
-        opacity: 0.5;
-    }
-    
-    .error-container {
-        text-align: center;
-        padding: 4rem 2rem;
-        color: var(--white);
-    }
-    
-    .loading-container {
-        text-align: center;
-        padding: 4rem 2rem;
-        color: var(--gray);
-    }
-    
-    /* Color accent for chat/info sections */
-    .color-accent-bar {
-        height: 3px;
-        background: var(--user-color, var(--primary));
-        margin: 0 0 1rem 0;
-        border-radius: 2px;
-        opacity: 0.8;
-    }
-    
-    /* Pulse animation for live indicator */
-    @keyframes pulse {
-        0% {
-            opacity: 1;
-        }
-        50% {
-            opacity: 0.6;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-    
-    .status-indicator.active::before {
-        content: '';
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        background: #ff0000;
-        border-radius: 50%;
-        margin-right: 0.5rem;
-        animation: pulse 2s infinite;
-    }
-</style>
-
-{#if loading}
-    <div class="loading-container">
-        <p>Loading stream...</p>
-    </div>
-{:else if error && !realm}
-    <div class="error-container">
-        <h1>Stream Not Found</h1>
-        <p style="color: var(--gray); margin-top: 1rem;">{error}</p>
-        <a href="/" class="btn" style="margin-top: 2rem;">Back to Home</a>
-    </div>
-{:else if realm}
-    <div class="stream-container">
-        <div class="player-section">
-            <div class="player-wrapper" style="--user-color: {realm.colorCode || '#561D5E'}">
-                <div class="player-area">
-                    <div class="dummy-player"></div>
-                    <div class="player-container">
-                        <div id="player"></div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="stream-info-section" style="--user-color: {realm.colorCode || '#561D5E'}">
-                <div class="stream-header">
-                    <h1>{realm.name}</h1>
-                    <div class="streamer-info">
-                        <div 
-                            class="streamer-avatar"
-                            class:has-color={realm.colorCode}
-                            class:with-image={realm.avatarUrl}
-                            style="--user-color: {realm.colorCode || '#561D5E'}"
-                        >
-                            {#if realm.avatarUrl}
-                                <img src={realm.avatarUrl} alt={realm.username} />
-                            {:else}
-                                {realm.username?.charAt(0).toUpperCase() || '?'}
-                            {/if}
-                        </div>
-                        <div>
-                            <div class="streamer-name">{realm.username}</div>
-                            <div class="viewer-count">
-                                {realm.viewerCount} {realm.viewerCount === 1 ? 'viewer' : 'viewers'}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="sidebar">
-            <div class="stats-section">
-                <div class="color-accent-bar" style="--user-color: {realm.colorCode || '#561D5E'}"></div>
-                <h3>Stream Stats</h3>
-                
-                <div class="status-indicator" class:active={stats.isLive} class:inactive={!stats.isLive}>
-                    {#if stats.isLive}
-                        Live
-                    {:else}
-                        Offline
-                    {/if}
-                </div>
-                
-                {#if stats.isLive}
-                    <div class="stats-list">
-                        <div class="stat-item">
-                            <span class="stat-label">Viewers</span>
-                            <span class="stat-value">{stats.connections}</span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-label">Bitrate</span>
-                            <span class="stat-value">{formatBitrate(stats.bitrate)}</span>
-                        </div>
-                        {#if stats.resolution !== 'N/A'}
-                            <div class="stat-item">
-                                <span class="stat-label">Resolution</span>
-                                <span class="stat-value">{stats.resolution}</span>
-                            </div>
-                        {/if}
-                        {#if stats.fps > 0}
-                            <div class="stat-item">
-                                <span class="stat-label">Frame Rate</span>
-                                <span class="stat-value">{stats.fps.toFixed(1)} fps</span>
-                            </div>
-                        {/if}
-                        {#if stats.codec && stats.codec !== 'N/A'}
-                            <div class="stat-item">
-                                <span class="stat-label">Codec</span>
-                                <span class="stat-value">{stats.codec}</span>
-                            </div>
-                        {/if}
-                    </div>
-                {:else}
-                    <div class="offline-message">
-                        <div class="offline-icon">📺</div>
-                        <p>Stream is currently offline</p>
-                    </div>
-                {/if}
-            </div>
-        </div>
-    </div>
-{/if}
-
-{#if message}
-    <div class="message" style="position: fixed; top: 2rem; right: 2rem; padding: 1rem 2rem; background: var(--primary); color: white; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000;">
-        {message}
-    </div>
-{/if}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\openresty\Dockerfile ###
-
-FROM openresty/openresty:alpine
-
-# Install dependencies needed by opm
-RUN apk add --no-cache curl perl
-
-# Install lua-resty-http
-RUN opm get ledgetech/lua-resty-http
-
-# Copy configuration
-COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
-COPY lua /usr/local/openresty/nginx/lua
-
-# Create uploads directory structure with proper permissions
-RUN mkdir -p /app/uploads/avatars && \
-    chmod -R 755 /app/uploads
-
-# Create nginx temp directories
-RUN mkdir -p /var/cache/nginx/client_temp \
-    /var/cache/nginx/proxy_temp \
-    /var/cache/nginx/fastcgi_temp \
-    /var/cache/nginx/uwsgi_temp \
-    /var/cache/nginx/scgi_temp && \
-    chmod -R 755 /var/cache/nginx
-
-EXPOSE 80 443
-
-# Run as root but nginx will drop privileges after binding to ports
-CMD ["/usr/local/openresty/bin/openresty", "-g", "daemon off;"]
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\openresty\nginx.conf ###
-
-worker_processes auto;
-error_log stderr warn;
-
-# Run worker processes as nobody user (master process remains root for port binding)
-user nobody nogroup;
-
-events {
-    worker_connections 1024;
-}
-
-http {
-    include mime.types;
-    default_type application/octet-stream;
-    
-    # Temp directories
-    client_body_temp_path /var/cache/nginx/client_temp;
-    proxy_temp_path /var/cache/nginx/proxy_temp;
-    fastcgi_temp_path /var/cache/nginx/fastcgi_temp;
-    uwsgi_temp_path /var/cache/nginx/uwsgi_temp;
-    scgi_temp_path /var/cache/nginx/scgi_temp;
-    
-    # Docker DNS resolver
-    resolver 127.0.0.11 valid=30s;
-    
-    lua_package_path "/usr/local/openresty/nginx/lua/?.lua;;";
-    lua_shared_dict stream_keys 10m;
-    lua_shared_dict rate_limit 10m;
-    
-    # Enable compression
-    gzip on;
-    gzip_vary on;
-    gzip_min_length 1024;
-    gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml+rss image/svg+xml;
-    
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-    
-    # Map to handle CORS origin properly
-    map $http_origin $cors_origin {
-        default "";
-        "~^https?://localhost(:[0-9]+)?$" $http_origin;
-        "~^https?://127\.0\.0\.1(:[0-9]+)?$" $http_origin;
-        "~^https?://\[::1\](:[0-9]+)?$" $http_origin;
-    }
-    
-    upstream backend {
-        server drogon-backend:8080;
-    }
-    
-    upstream frontend {
-        server sveltekit:3000;
-    }
-    
-    upstream ome {
-        server ovenmediaengine:8080;
-    }
-    
-    # Rate limiting zones
-    limit_req_zone $binary_remote_addr zone=api_limit:10m rate=10r/s;
-    limit_req_zone $binary_remote_addr zone=auth_limit:10m rate=3r/m;
-    limit_req_zone $binary_remote_addr zone=register_limit:10m rate=1r/m;
-    
-    # Increase client max body size for avatar uploads
-    client_max_body_size 1m;
-    
-    server {
-        listen 80;
-        server_name localhost;
-        
-        # Security headers for the whole server
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-        
-        # Fixed: Serve uploaded files with correct configuration
-        location /uploads/ {
-            # Use root directive with absolute path to avoid alias+try_files bug
-            root /app;
-            
-            # Security settings
-            autoindex off;
-            add_header X-Content-Type-Options "nosniff" always;
-            
-            # Only serve files, not directories
-            try_files $uri =404;
-            
-            # Cache static images
-            location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
-                expires 30d;
-                add_header Cache-Control "public, immutable" always;
-                add_header X-Content-Type-Options "nosniff" always;
-            }
-        }
-        
-        # SvelteKit immutable assets (with content hashes)
-        location ~ ^/_app/immutable/ {
-            proxy_pass http://frontend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            
-            # Long cache for immutable assets
-            proxy_cache_valid 200 1y;
-            expires 1y;
-            add_header Cache-Control "public, immutable" always;
-            access_log off;
-        }
-        
-        # SvelteKit mutable assets
-        location ~ ^/_app/ {
-            proxy_pass http://frontend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            
-            # Short cache for mutable assets
-            expires 1h;
-            add_header Cache-Control "public, max-age=3600" always;
-        }
-        
-        # Authentication endpoints with strict rate limiting
-        location = /api/auth/register {
-            limit_req zone=register_limit burst=2 nodelay;
-            
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "POST, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-        
-        location = /api/auth/login {
-            limit_req zone=auth_limit burst=5 nodelay;
-            
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "POST, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-        
-        location ~ ^/api/auth/(pgp-challenge|pgp-verify) {
-            limit_req zone=auth_limit burst=5 nodelay;
-            
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "POST, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-        
-        # Public user profile endpoints - no authentication required
-        location ~ ^/api/users/[^/]+/?$ {
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            
-            # Cache public profiles for a short time
-            expires 1m;
-            add_header Cache-Control "public, max-age=60" always;
-        }
-        
-        # Public user PGP keys endpoints - no authentication required
-        location ~ ^/api/users/[^/]+/pgp-keys$ {
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            
-            # Cache PGP keys for a bit longer as they change less frequently
-            expires 5m;
-            add_header Cache-Control "public, max-age=300" always;
-        }
-        
-        # Public realm endpoints (with viewer token authentication for stream-key)
-        location ~ ^/api/realms/(by-name/[^/]+|live|[0-9]+/stats|[0-9]+/viewer-token|[0-9]+/stream-key)$ {
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Cookie $http_cookie;
-            
-            # Short cache for live realm data
-            expires 10s;
-            add_header Cache-Control "public, max-age=10" always;
-        }
-        
-        # Public stream endpoints (some require viewer tokens)
-        location ~ ^/api/stream/(heartbeat/[^/]+)$ {
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "POST, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Cookie $http_cookie;
-        }
-        
-        # Other API endpoints (authenticated)
-        location /api/ {
-            limit_req zone=api_limit burst=20 nodelay;
-            
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            # Handle preflight
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            proxy_pass http://backend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Cookie $http_cookie;
-            
-            # Don't cache API responses
-            expires -1;
-            add_header Cache-Control "no-store, no-cache, must-revalidate" always;
-        }
-        
-        # WebSocket
-        location /ws/ {
-            proxy_pass http://backend;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Cookie $http_cookie;
-            
-            # WebSocket timeouts
-            proxy_read_timeout 3600s;
-            proxy_send_timeout 3600s;
-        }
-        
-        # Frontend (all other requests)
-        location / {
-            proxy_pass http://frontend;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            
-            # Enable HTTP/1.1 for keep-alive
-            proxy_http_version 1.1;
-            proxy_set_header Connection "";
-        }
-    }
-    
-    # Separate server block for port 8088 (HLS/LLHLS)
-    server {
-        listen 8088;
-        server_name localhost;
-        
-        # Security headers
-        add_header X-Content-Type-Options "nosniff" always;
-        
-        # Token validation for HLS/LLHLS playlists and segments
-        location ~ ^/app/([^/]+)/(.*\.(m3u8|ts|m4s))$ {
-            set $stream_key $1;
-            set $file_path $2;
-            
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
-            add_header Access-Control-Allow-Headers "Range" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
-            
-            # Handle preflight
-            if ($request_method = 'OPTIONS') {
-                add_header Content-Length 0;
-                add_header Content-Type text/plain;
-                return 204;
-            }
-            
-            # Access control via Lua
-            access_by_lua_block {
-                local redis_helper = require "redis_helper"
-                
-                -- Get viewer token from cookie
-                local cookie_header = ngx.var.http_cookie
-                if not cookie_header then
-                    ngx.status = ngx.HTTP_FORBIDDEN
-                    ngx.say("No authentication token")
-                    return ngx.exit(ngx.HTTP_FORBIDDEN)
-                end
-                
-                -- Extract viewer_token cookie
-                local token = nil
-                -- Handle URL-encoded cookies and spaces
-                cookie_header = ngx.unescape_uri(cookie_header)
-                for k, v in string.gmatch(cookie_header, "([^=]+)=([^;]+)") do
-                    k = k:match("^%s*(.-)%s*$") -- trim whitespace
-                    if k == "viewer_token" then
-                        token = v:match("^%s*(.-)%s*$") -- trim whitespace
-                        break
-                    end
-                end
-                
-                if not token then
-                    ngx.status = ngx.HTTP_FORBIDDEN
-                    ngx.say("Missing viewer token")
-                    return ngx.exit(ngx.HTTP_FORBIDDEN)
-                end
-                
-                -- Validate token
-                local valid_stream = redis_helper.validate_viewer_token(token, ngx.var.stream_key)
-                if not valid_stream then
-                    ngx.status = ngx.HTTP_FORBIDDEN
-                    ngx.say("Invalid viewer token")
-                    return ngx.exit(ngx.HTTP_FORBIDDEN)
-                end
-                
-                -- Optionally refresh token TTL on segment access
-                redis_helper.refresh_viewer_token(token)
-            }
-            
-            # Cache settings for segments
-            location ~ \.ts$ {
-                expires 1h;
-                add_header Cache-Control "public, max-age=3600" always;
-            }
-            
-            # Don't cache playlists
-            location ~ \.m3u8$ {
-                expires -1;
-                add_header Cache-Control "no-cache, no-store, must-revalidate" always;
-            }
-            
-            # Proxy to OvenMediaEngine
-            proxy_pass http://ome/app/$stream_key/$file_path;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        }
-        
-        # Public access for stream info
-        location / {
-            # CORS headers
-            add_header Access-Control-Allow-Origin $cors_origin always;
-            add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
-            add_header Access-Control-Allow-Credentials "true" always;
-            
-            proxy_pass http://ome;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        }
-    }
-}
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\openresty\lua\auth.lua ###
-
-local redis_helper = require "redis_helper"
-local cjson = require "cjson"
-
--- Read POST body for OME webhook
-ngx.req.read_body()
-local body = ngx.req.get_body_data()
-
-if not body then
-    ngx.status = ngx.HTTP_BAD_REQUEST
-    ngx.say(cjson.encode({allowed = false, reason = "No body provided"}))
-    return ngx.exit(ngx.HTTP_BAD_REQUEST)
-end
-
--- Parse JSON body
-local ok, data = pcall(cjson.decode, body)
-if not ok then
-    ngx.status = ngx.HTTP_BAD_REQUEST
-    ngx.say(cjson.encode({allowed = false, reason = "Invalid JSON"}))
-    return ngx.exit(ngx.HTTP_BAD_REQUEST)
-end
-
--- Extract stream key from the request
-local stream_key = nil
-
--- Check different possible locations for the stream key
-if data.request and data.request.url then
-    -- Extract from URL path or query string
-    stream_key = data.request.url:match("/app/([^/?]+)")
-    if not stream_key and data.request.params then
-        stream_key = data.request.params.key or data.request.params.streamid
-    end
-elseif data.stream and data.stream.name then
-    stream_key = data.stream.name
-end
-
--- Handle SRT streamid format (app/KEY)
-if stream_key then
-    local extracted = stream_key:match("app/(.+)")
-    if extracted then
-        stream_key = extracted
-    end
-end
-
-if not stream_key then
-    ngx.status = ngx.HTTP_OK
-    ngx.say(cjson.encode({allowed = false, reason = "No stream key provided"}))
-    return ngx.exit(ngx.HTTP_OK)
-end
-
--- Validate key
-local valid = redis_helper.validate_stream_key(stream_key)
-
--- OME webhook expects specific response format
-local response = {
-    allowed = valid,
-    stream = {
-        name = stream_key
-    }
-}
-
-if not valid then
-    response.reason = "Invalid stream key"
-end
-
-ngx.status = ngx.HTTP_OK
-ngx.header.content_type = "application/json"
-ngx.say(cjson.encode(response))
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\openresty\lua\redis_helper.lua ###
-
-local redis = require "resty.redis"
-
-local _M = {}
-
-local function get_redis_connection()
-    local red = redis:new()
-    red:set_timeouts(1000, 1000, 1000) -- connect, send, read timeout in ms
-    
-    local host = "redis"  -- Will be resolved by nginx resolver
-    local port = tonumber(os.getenv("REDIS_PORT")) or 6379
-    
-    local ok, err = red:connect(host, port)
-    if not ok then
-        ngx.log(ngx.ERR, "Failed to connect to Redis: ", err)
-        return nil
-    end
-    
-    return red
-end
-
-local function close_redis_connection(red)
-    -- Put connection into pool
-    local ok, err = red:set_keepalive(10000, 100)
-    if not ok then
-        ngx.log(ngx.ERR, "Failed to set keepalive: ", err)
-    end
-end
-
-function _M.validate_stream_key(key)
-    -- For now, skip Redis and go directly to backend
-    -- This fixes the immediate issue
-    local http = require "resty.http"
-    local httpc = http.new()
-    local backend_url = os.getenv("BACKEND_URL") or "http://drogon-backend:8080"
-    
-    local res, err = httpc:request_uri(backend_url .. "/api/stream/validate/" .. key, {
-        method = "GET",
-        timeout = 1000
-    })
-    
-    if res and res.status == 200 then
-        local cjson = require "cjson"
-        local ok, data = pcall(cjson.decode, res.body)
-        
-        if ok and data.valid then
-            return true
-        end
-    end
-    
-    return false
-end
-
-function _M.validate_viewer_token(token, expected_stream_key)
-    local red = get_redis_connection()
-    if not red then
-        ngx.log(ngx.ERR, "Failed to connect to Redis for token validation")
-        return false
-    end
-    
-    -- Get the stream key associated with this token
-    local res, err = red:get("viewer_token:" .. token)
-    if not res or res == ngx.null then
-        ngx.log(ngx.WARN, "Token not found: ", token)
-        close_redis_connection(red)
-        return false
-    end
-    
-    close_redis_connection(red)
-    
-    -- Check if the token is for the expected stream
-    if res ~= expected_stream_key then
-        ngx.log(ngx.WARN, "Token stream mismatch. Expected: ", expected_stream_key, " Got: ", res)
-        return false
-    end
-    
-    return true
-end
-
-function _M.refresh_viewer_token(token)
-    local red = get_redis_connection()
-    if not red then
-        return false
-    end
-    
-    -- Refresh TTL to 30 seconds
-    local ok, err = red:expire("viewer_token:" .. token, 30)
-    if not ok then
-        ngx.log(ngx.ERR, "Failed to refresh token TTL: ", err)
-    end
-    
-    close_redis_connection(red)
-    return ok
-end
-
-function _M.get_streams_to_disconnect()
-    local red = get_redis_connection()
-    if not red then
-        return {}
-    end
-    
-    local res, err = red:smembers("streams_to_disconnect")
-    close_redis_connection(red)
-    
-    if not res then
-        ngx.log(ngx.ERR, "Failed to get streams to disconnect: ", err)
-        return {}
-    end
-    
-    return res
-end
-
-function _M.remove_stream_from_disconnect(key)
-    local red = get_redis_connection()
-    if not red then
-        return
-    end
-    
-    local ok, err = red:srem("streams_to_disconnect", key)
-    if not ok then
-        ngx.log(ngx.ERR, "Failed to remove stream from disconnect set: ", err)
-    end
-    
-    close_redis_connection(red)
-end
-
-return _M
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\openresty\lua\stream_monitor.lua ###
-
-
-local redis_helper = require "redis_helper"
-local cjson = require "cjson"
-
--- Safely load the http module
-local has_http, http = pcall(require, "resty.http")
-
-local function disconnect_stream(stream_key)
-    if not has_http then
-        ngx.log(ngx.WARN, "resty.http module not available, skipping stream disconnection")
-        return
-    end
-    
-    local httpc = http.new()
-    local ome_url = os.getenv("OME_URL") or "http://ovenmediaengine:8081"
-    local ome_token = os.getenv("OME_API_TOKEN") or "your-api-token"
-    
-    -- Get active streams from OME
-    local res, err = httpc:request_uri(ome_url .. "/v1/vhosts/default/apps/app/streams", {
-        method = "GET",
-        headers = {
-            ["Authorization"] = "Bearer " .. ome_token,
-            ["Content-Type"] = "application/json"
-        }
-    })
-    
-    if not res then
-        ngx.log(ngx.ERR, "Failed to get streams: ", err)
-        return
-    end
-    
-    local ok, data = pcall(cjson.decode, res.body)
-    if ok and data and data.response and data.response.streams then
-        for _, stream in ipairs(data.response.streams) do
-            if stream.name == stream_key then
-                -- Disconnect the stream
-                local del_res, del_err = httpc:request_uri(
-                    ome_url .. "/v1/vhosts/default/apps/app/streams/" .. stream.name,
-                    {
-                        method = "DELETE",
-                        headers = {
-                            ["Authorization"] = "Bearer " .. ome_token
-                        }
-                    }
-                )
-                
-                if del_res and del_res.status == 200 then
-                    ngx.log(ngx.INFO, "Disconnected stream: ", stream_key)
-                else
-                    ngx.log(ngx.ERR, "Failed to disconnect stream: ", stream_key)
-                end
-                
-                break
-            end
-        end
-    end
-end
-
-local function monitor_streams()
-    -- Check if Redis is available
-    local ok, keys = pcall(redis_helper.get_streams_to_disconnect)
-    if not ok then
-        ngx.log(ngx.WARN, "Redis not available yet")
-        return
-    end
-    
-    for _, key in ipairs(keys or {}) do
-        disconnect_stream(key)
-        redis_helper.remove_stream_from_disconnect(key)
-    end
-end
-
--- Start monitoring in a timer with error handling
-local function start_monitoring()
-    local ok, err = ngx.timer.every(1, monitor_streams)
-    if not ok then
-        ngx.log(ngx.ERR, "Failed to create timer: ", err)
-    else
-        ngx.log(ngx.INFO, "Stream monitor started")
-    end
-end
-
--- Delay start to ensure services are ready
-ngx.timer.at(5, start_monitoring)
-
-
-### C:\Users\Administrator\Desktop\pub\realms.india\ovenmediaengine\Server.xml ###
-
-<?xml version="1.0" encoding="UTF-8"?>
-<Server version="8">
-    <Name>OvenMediaEngine</Name>
-    <Type>origin</Type>
-    <IP>*</IP>
-    <PrivacyProtection>false</PrivacyProtection>
-
-    <Bind>
-            <Managers>
-            <API>
-                <Port>8081</Port>
-                <TLSPort>8443</TLSPort>
-                <WorkerCount>1</WorkerCount>
-            </API>
-        </Managers>
-        <Managers>
-            <API>
-                <Port>8081</Port>
-                <TLS>
-                    <Port>8082</Port>
-                </TLS>
-            </API>
-        </Managers>
-        <Providers>
-            <RTMP>
-                <Port>1935</Port>
-            </RTMP>
-            <SRT>
-                <Port>9999</Port>
-            </SRT>
-        </Providers>
-        
-        <Publishers>
-            <HLS>
-                <Port>8080</Port>
-            </HLS>
-            <LLHLS>
-                <Port>8080</Port>
-            </LLHLS>
-            <WebRTC>
-                <Signalling>
-                    <Port>3333</Port>
-                </Signalling>
-                <IceCandidates>
-                    <IceCandidate>*:10000-10009/udp</IceCandidate>
-                </IceCandidates>
-            </WebRTC>
-        </Publishers>
-    </Bind>
-    <Managers>
-        <API>
-            <AccessToken>${env:OME_API_ACCESS_TOKEN}</AccessToken>
-            <CrossDomains>
-                <Url>*</Url>
-            </CrossDomains>
-        </API>
-    </Managers>
-    <VirtualHosts>
-        <VirtualHost>
-            <Name>default</Name>
-            <Host>
-                <Names>
-                    <Name>*</Name>
-                </Names>
-            </Host>
-
-            <Applications>
-                <Application>
-                    <Name>app</Name>
-                    <Type>live</Type>
-                    
-                    <Providers>
-                        <RTMP>
-                            <BlockDuplicateStreamName>true</BlockDuplicateStreamName>
-                        </RTMP>
-                        <SRT>
-                            <BlockDuplicateStreamName>true</BlockDuplicateStreamName>
-                        </SRT>
-                    </Providers>
-                    
-                    <OutputProfiles>
-                        <OutputProfile>
-                            <Name>bypass</Name>
-                            <OutputStreamName>${OriginStreamName}</OutputStreamName>
-                            <Encodes>
-                                <Video>
-                                    <Bypass>true</Bypass>
-                                </Video>
-                                <Audio>
-                                    <Bypass>true</Bypass>
-                                </Audio>
-                            </Encodes>
-                        </OutputProfile>
-                    </OutputProfiles>
-                    
-                    <Publishers>
-                        <LLHLS>
-                            <ChunkDuration>0.5</ChunkDuration>
-                            <SegmentDuration>3</SegmentDuration>
-                            <SegmentCount>10</SegmentCount>
-                            <CrossDomains>
-                                        <Url>http://localhost</Url>
-                            </CrossDomains>
-                        </LLHLS>
-                        <HLS>
-                            <SegmentDuration>3</SegmentDuration>
-                            <SegmentCount>10</SegmentCount>
-                            <CrossDomains>
-                                        <Url>http://localhost</Url>
-                            </CrossDomains>
-                        </HLS>
-                        <WebRTC>
-                            <Timeout>30000</Timeout>
-                            <Rtx>false</Rtx>
-                            <Ulpfec>false</Ulpfec>
-                            <JitterBuffer>false</JitterBuffer>
-                        </WebRTC>
-                    </Publishers>
-                </Application>
-            </Applications>
-        </VirtualHost>
-    </VirtualHosts>
-</Server>
-
-