From 3266c3417283518d4fda744205e6bdcf44e9a80d Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 27 Jun 2026 09:37:38 +1000
Subject: [PATCH] feat(web-ui): UI consistency / layout uplifts (#5225)

Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/ThemeToggle.vue  | 102 ++-
 src_assets/common/assets/web/apps.html        |  31 +-
 src_assets/common/assets/web/config.html      | 101 +-
 src_assets/common/assets/web/featured.html    |   4 +-
 src_assets/common/assets/web/init.js          |   5 +
 src_assets/common/assets/web/logout.html      |   3 +
 src_assets/common/assets/web/password.html    |   7 +-
 .../assets/web/public/assets/locale/en.json   |  18 +
 .../web/{public/assets/css => }/sunshine.css  | 864 +++++++++++++++---
 .../common/assets/web/template_header.html    |   2 -
 src_assets/common/assets/web/theme.js         |  29 +-
 .../common/assets/web/troubleshooting.html    |   2 +-
 12 files changed, 920 insertions(+), 248 deletions(-)
 rename src_assets/common/assets/web/{public/assets/css => }/sunshine.css (69%)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index 0ae5a58b..0bddebf8 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -4,17 +4,25 @@ import { onMounted } from 'vue'
 import {
   CloudMoon,
   CloudRain,
+  Coffee,
   Contrast,
+  Droplet,
   Flame,
   Flower,
   Flower2,
+  Ghost,
   Layers,
+  Milk,
   MonitorSmartphone,
   Moon,
   Mountain,
+  Shuffle,
   Sparkles,
+  Sprout,
   Sun,
   Sunrise,
+  Sunset,
+  TreePine,
   Trees,
   Waves,
 } from '@lucide/vue'
@@ -38,96 +46,104 @@ onMounted(() => {
       </span>
       <span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-      <li>
+    <ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
+      <li class="theme-menu-full">
         <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
+        <button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center">
+          <Shuffle :size="18" class="theme-icon icon"></Shuffle>
+          {{ $t('navbar.theme_random') }}
+        </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Dark Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
           <Moon :size="18" class="theme-icon icon"></Moon>
           {{ $t('navbar.theme_dark') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
-          <Layers :size="18" class="theme-icon icon"></Layers>
-          {{ $t('navbar.theme_slate') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
+          <Ghost :size="18" class="theme-icon icon"></Ghost>
+          {{ $t('navbar.theme_dracula') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
-          <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
-          {{ $t('navbar.theme_moonlight') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha" aria-pressed="false">
+          <Coffee :size="18" class="theme-icon icon"></Coffee>
+          {{ $t('navbar.theme_mocha') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
-          <CloudRain :size="18" class="theme-icon icon"></CloudRain>
-          {{ $t('navbar.theme_midnight') }}
-        </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
           <Flame :size="18" class="theme-icon icon"></Flame>
           {{ $t('navbar.theme_ember') }}
         </button>
-      </li>
-      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine" aria-pressed="false">
+          <TreePine :size="18" class="theme-icon icon"></TreePine>
+          {{ $t('navbar.theme_rose_pine') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
+          <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
+          {{ $t('navbar.theme_moonlight') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
+          <Layers :size="18" class="theme-icon icon"></Layers>
+          {{ $t('navbar.theme_slate') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
+          <CloudRain :size="18" class="theme-icon icon"></CloudRain>
+          {{ $t('navbar.theme_midnight') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
           <Mountain :size="18" class="theme-icon icon"></Mountain>
           {{ $t('navbar.theme_nord') }}
         </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Light Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
           <Sun :size="18" class="theme-icon icon"></Sun>
           {{ $t('navbar.theme_light') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
-          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
-          {{ $t('navbar.theme_indigo') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
+          <Droplet :size="18" class="theme-icon icon"></Droplet>
+          {{ $t('navbar.theme_alucard') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte" aria-pressed="false">
+          <Milk :size="18" class="theme-icon icon"></Milk>
+          {{ $t('navbar.theme_latte') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light" aria-pressed="false">
+          <Sunset :size="18" class="theme-icon icon"></Sunset>
+          {{ $t('navbar.theme_ember_light') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn" aria-pressed="false">
+          <Sprout :size="18" class="theme-icon icon"></Sprout>
+          {{ $t('navbar.theme_rose_pine_dawn') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
           <Sunrise :size="18" class="theme-icon icon"></Sunrise>
           {{ $t('navbar.theme_sunshine') }}
         </button>
-      </li>
-      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
+          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
+          {{ $t('navbar.theme_indigo') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
           <Waves :size="18" class="theme-icon icon"></Waves>
           {{ $t('navbar.theme_ocean') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest" aria-pressed="false">
           <Trees :size="18" class="theme-icon icon"></Trees>
           {{ $t('navbar.theme_forest') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose" aria-pressed="false">
           <Flower :size="18" class="theme-icon icon"></Flower>
           {{ $t('navbar.theme_rose') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender" aria-pressed="false">
           <Flower2 :size="18" class="theme-icon icon"></Flower2>
           {{ $t('navbar.theme_lavender') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome" aria-pressed="false">
           <Contrast :size="18" class="theme-icon icon"></Contrast>
           {{ $t('navbar.theme_monochrome') }}
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index f963f575..32b3e0af 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -7,14 +7,14 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
+  <div id="content" class="container">
     <div class="my-4">
       <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLabel }})</span></h1>
       <p>{{ $t('apps.applications_desc') }}</p>
     </div>
 
     <!-- Actions toolbar -->
-    <div class="apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+    <div class="toolbar apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
       <!-- Left side actions -->
       <div class="d-flex align-items-center gap-2">
         <!-- Add new application -->
@@ -63,19 +63,26 @@
             <div v-else class="app-poster-placeholder">
               <span class="app-initial">{{ app.name.charAt(0).toUpperCase() }}</span>
             </div>
-          </div>
-          <div class="card-body d-flex flex-column">
-            <h5 class="card-title mb-2">{{ app.name }}</h5>
-            <div class="app-details text-muted small mb-3">
-              <div v-if="app.output" class="text-truncate">
-                <file-text :size="14" class="icon me-1"></file-text>
-                {{ app.output }}
-              </div>
-              <div v-if="app.cmd" class="text-truncate">
+            <div class="app-poster-overlay">
+              <div v-if="app.cmd" class="app-overlay-row" :title="app.cmd">
                 <terminal :size="14" class="icon me-1"></terminal>
-                {{ app.cmd }}
+                <span class="app-detail-text">{{ app.cmd }}</span>
+              </div>
+              <div v-if="app['working-dir']" class="app-overlay-row" :title="app['working-dir']">
+                <folder :size="14" class="icon me-1"></folder>
+                <span class="app-detail-text">{{ app['working-dir'] }}</span>
+              </div>
+              <div class="app-overlay-badges">
+                <span v-if="app.elevated" class="badge app-flag-badge">{{ $t('apps.badge_admin') }}</span>
+                <span v-if="app.detached && app.detached.length" class="badge app-flag-badge">{{ $t('apps.badge_detached') }}</span>
+                <span v-if="app['prep-cmd'] && app['prep-cmd'].length" class="badge app-flag-badge">{{ $t('apps.badge_app_prep') }}</span>
+                <span v-if="app['exclude-global-prep-cmd']" class="badge app-flag-badge">{{ $t('apps.badge_no_global_prep') }}</span>
+                <span v-if="app['auto-detach']" class="badge app-flag-badge">{{ $t('apps.badge_auto_detach') }}</span>
               </div>
             </div>
+          </div>
+          <div class="card-body d-flex flex-column">
+            <h5 class="card-title mb-3">{{ app.name }}</h5>
             <div class="mt-auto d-flex gap-2">
               <button class="btn btn-sm btn-primary flex-fill" @click="editApp(index)">
                 <edit :size="16" class="icon"></edit>
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 27d84205..a9476ea0 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -7,12 +7,15 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
-    <h1 class="my-4">{{ $t('config.configuration') }}</h1>
+  <div id="content" class="container">
+    <div class="my-4">
+      <h1>{{ $t('config.configuration') }}</h1>
+      <p>{{ $t('config.configuration_desc') }}</p>
+    </div>
 
     <!-- Search Bar with Autocomplete -->
-    <div class="mb-3">
-      <div class="input-group">
+    <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
+      <div class="input-group config-search">
         <span class="input-group-text">
           <search :size="18" class="icon"></search>
         </span>
@@ -30,25 +33,60 @@
           {{ option.tab }} - {{ option.label }}
         </option>
       </datalist>
-      <div v-if="searchQuery && searchResults.length === 0" class="text-muted small mt-1">
+      <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
         No results found for "{{ searchQuery }}"
-      </div>
-      <div v-else-if="searchQuery" class="text-muted small mt-1">
+      </span>
+      <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
         Found {{ searchResults.length }} result(s)
-      </div>
+      </span>
     </div>
 
     <div class="form" v-if="config">
-      <!-- Header -->
-      <ul class="nav nav-tabs">
-        <li class="nav-item" v-for="tab in tabs" :key="tab.id">
-          <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-            @click="currentTab = tab.id">
-            <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
-            {{tab.name}}
-          </a>
-        </li>
-      </ul>
+      <div class="config-layout">
+        <!-- Sidebar navigation -->
+        <nav class="config-nav">
+          <ul class="nav config-nav-list">
+            <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
+              <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                @click="currentTab = tab.id">
+                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                {{tab.name}}
+              </a>
+            </li>
+          </ul>
+          <template v-if="encoderTabs.length">
+            <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
+            <ul class="nav config-nav-list">
+              <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
+                <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                  @click="currentTab = tab.id">
+                  <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                  {{tab.name}}
+                </a>
+              </li>
+            </ul>
+          </template>
+
+          <div class="config-actions">
+            <button class="btn btn-primary" @click="save">
+              <save :size="18" class="icon"></save>
+              {{ $t('_common.save') }}
+            </button>
+            <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
+              <check :size="18" class="icon"></check>
+              {{ $t('_common.apply') }}
+            </button>
+          </div>
+        </nav>
+
+        <!-- Tab content -->
+        <div class="config-content">
+          <div class="alert alert-success mb-4" v-if="saved && !restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
+          </div>
+          <div class="alert alert-success mb-4" v-if="restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
+          </div>
 
       <!-- General Tab -->
       <general
@@ -98,25 +136,10 @@
         :config="config"
         :platform="platform">
       </container-encoders>
+        </div>
+      </div>
     </div>
 
-    <!-- Save and Apply buttons -->
-    <div class="alert alert-success my-4" v-if="saved && !restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
-    </div>
-    <div class="alert alert-success my-4" v-if="restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
-    </div>
-    <div class="mb-3 d-flex gap-2 mt-4">
-      <button class="btn btn-primary" @click="save">
-        <save :size="18" class="icon"></save>
-        {{ $t('_common.save') }}
-      </button>
-      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
-        <check :size="18" class="icon"></check>
-        {{ $t('_common.apply') }}
-      </button>
-    </div>
   </div>
 </body>
 
@@ -148,6 +171,8 @@
     Volume2,
   } from '@lucide/vue'
 
+  const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
+
   const app = createApp({
     components: {
       Navbar,
@@ -360,6 +385,12 @@
        }
     },
     computed: {
+      generalTabs() {
+        return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
+      },
+      encoderTabs() {
+        return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
+      },
       allConfigOptions() {
         const options = [];
         this.tabs.forEach(tab => {
diff --git a/src_assets/common/assets/web/featured.html b/src_assets/common/assets/web/featured.html
index 662fe987..5f2c6725 100644
--- a/src_assets/common/assets/web/featured.html
+++ b/src_assets/common/assets/web/featured.html
@@ -7,14 +7,14 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
+  <div id="content" class="container">
     <div class="my-4">
       <h1>{{ $t('featured.title') }}</h1>
       <p>{{ $t('featured.description') }}</p>
     </div>
 
     <!-- Category Filter -->
-    <div class="mb-4">
+    <div class="toolbar mb-4">
       <div class="btn-group" role="group" aria-label="Category filter">
         <button
           type="button"
diff --git a/src_assets/common/assets/web/init.js b/src_assets/common/assets/web/init.js
index 22b84df2..0244018c 100644
--- a/src_assets/common/assets/web/init.js
+++ b/src_assets/common/assets/web/init.js
@@ -1,5 +1,10 @@
 import i18n from './locale'
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+// Load Sunshine.css after bootstrap to override some of the styles.
+// Makes themes load and style correctly.
+import './sunshine.css'
+
 // must import even if not implicitly using here
 // https://github.com/aurelia/skeleton-navigation/issues/894
 // https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9
diff --git a/src_assets/common/assets/web/logout.html b/src_assets/common/assets/web/logout.html
index 84ff3a42..81d6081d 100644
--- a/src_assets/common/assets/web/logout.html
+++ b/src_assets/common/assets/web/logout.html
@@ -27,8 +27,11 @@
 <script type="module">
   import { createApp } from 'vue'
   import { initApp } from './init'
+  import { loadAutoTheme } from './theme'
   import { LogIn } from '@lucide/vue'
 
+  loadAutoTheme();
+
   const app = createApp({
     components: {
       LogIn,
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index a86f1132..f20bc921 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -7,8 +7,11 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
-    <h1 class="my-4">{{ $t('password.password_change') }}</h1>
+  <div id="content" class="container">
+    <div class="my-4">
+      <h1>{{ $t('password.password_change') }}</h1>
+      <p>{{ $t('password.password_change_desc') }}</p>
+    </div>
     <form @submit.prevent="save">
       <div class="card">
         <div class="card-body">
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index a74d3d0a..397abb4a 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -42,6 +42,11 @@
     "applications_title": "Applications",
     "auto_detach": "Continue streaming if the application exits quickly",
     "auto_detach_desc": "This will attempt to automatically detect launcher-type apps that close quickly after launching another program or instance of themselves. When a launcher-type app is detected, it is treated as a detached app.",
+    "badge_admin": "Admin",
+    "badge_app_prep": "App prep",
+    "badge_auto_detach": "Auto-detach",
+    "badge_detached": "Detached",
+    "badge_no_global_prep": "No global prep",
     "cmd": "Command",
     "cmd_desc": "The main application to start. If blank, no application will be started.",
     "cmd_note": "If the path to the command executable contains spaces, you must enclose it in double quotes.",
@@ -169,6 +174,7 @@
     "coder_cabac": "cabac -- context adaptive binary arithmetic coding - higher quality",
     "coder_cavlc": "cavlc -- context adaptive variable-length coding - faster decode",
     "configuration": "Configuration",
+    "configuration_desc": "Configure Sunshine's host settings to match your streaming setup.",
     "controller": "Enable Gamepad Input",
     "controller_desc": "Allows guests to control the host system with a gamepad / controller",
     "credentials_file": "Credentials File",
@@ -223,6 +229,7 @@
     "encoder": "Force a Specific Encoder",
     "encoder_desc": "Force a specific encoder, otherwise Sunshine will select the best available option. Note: If you specify a hardware encoder on Windows, it must match the GPU where the display is connected.",
     "encoder_software": "Software",
+    "encoders": "Encoders",
     "external_ip": "External IP",
     "external_ip_desc": "If no external IP address is given, Sunshine will automatically detect external IP",
     "fec_percentage": "FEC Percentage",
@@ -440,19 +447,29 @@
     "logout": "Log Out",
     "password": "Change Password",
     "pin": "PIN",
+    "theme_alucard": "Alucard",
     "theme_auto": "Auto",
     "theme_dark": "Dark",
+    "theme_dracula": "Dracula",
     "theme_ember": "Ember",
+    "theme_ember_light": "Ember Light",
     "theme_forest": "Forest",
+    "theme_group_dark": "Dark Themes",
+    "theme_group_light": "Light Themes",
     "theme_indigo": "Indigo",
+    "theme_latte": "Latte",
     "theme_lavender": "Lavender",
     "theme_light": "Light",
     "theme_midnight": "Midnight",
+    "theme_mocha": "Mocha",
     "theme_monochrome": "Monochrome",
     "theme_moonlight": "Moonlight",
     "theme_nord": "Nord",
     "theme_ocean": "Ocean",
+    "theme_random": "Random",
     "theme_rose": "Rose",
+    "theme_rose_pine": "Rosé Pine",
+    "theme_rose_pine_dawn": "Rosé Pine Dawn",
     "theme_slate": "Slate",
     "theme_sunshine": "Sunshine",
     "toggle_theme": "Theme",
@@ -469,6 +486,7 @@
     "new_creds": "New Credentials",
     "new_username_desc": "If not specified, the username will not change",
     "password_change": "Password Change",
+    "password_change_desc": "Update the username and password used to sign in to the Sunshine web UI. You'll need to sign in again after changing them.",
     "success_msg": "Password has been changed successfully! This page will reload soon, your browser will ask you for the new credentials."
   },
   "pin": {
diff --git a/src_assets/common/assets/web/public/assets/css/sunshine.css b/src_assets/common/assets/web/sunshine.css
similarity index 69%
rename from src_assets/common/assets/web/public/assets/css/sunshine.css
rename to src_assets/common/assets/web/sunshine.css
index b7cb5023..8acf093c 100644
--- a/src_assets/common/assets/web/public/assets/css/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -37,6 +37,12 @@
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+    --color-on-primary: #fff;
+    --color-on-success: #fff;
+    --color-on-danger: #fff;
+    --color-on-info: #fff;
+    --color-on-warning: #1a1a1a;
 }
 
 /* ==========================================================================
@@ -64,6 +70,8 @@
     --color-info-hover: #3dd5f3;
     --color-info-light: #032830;
 
+    --color-on-info: #1a1a1a;
+
     --color-bg-base: #212529;
     --color-bg-subtle: #2c3034;
     --color-bg-muted: #383d41;
@@ -77,7 +85,7 @@
     --color-text-muted: #adb5bd;
     --color-text-subtle: #6c757d;
 
-    --navbar-bg: #ffc400;
+    --navbar-bg: linear-gradient(135deg, #ffc400 0%, #ff9d00 100%);
     --navbar-text: #594400;
     --navbar-text-muted: #7f6100;
 
@@ -87,43 +95,48 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
-/* Ember Theme - Warm dark with orange/red accents */
+/* Ember Theme - https://github.com/ember-theme/ember */
 [data-theme="ember"] {
-    --color-primary: #F97316;
-    --color-primary-hover: #FB923C;
-    --color-primary-light: #7C2D12;
-    --color-accent: #EF4444;
-    --color-accent-hover: #F87171;
-    --color-accent-light: #7F1D1D;
-    --color-success: #34D399;
-    --color-success-hover: #6EE7B7;
-    --color-success-light: #064E3B;
-    --color-danger: #DC2626;
-    --color-danger-hover: #EF4444;
-    --color-danger-light: #7F1D1D;
-    --color-warning: #F59E0B;
-    --color-warning-hover: #FBBF24;
-    --color-warning-light: #78350F;
-    --color-info: #60A5FA;
-    --color-info-hover: #93C5FD;
-    --color-info-light: #1E3A8A;
+    --color-primary: #E08060;
+    --color-primary-hover: #E7A088;
+    --color-primary-light: #452217;
+    --color-accent: #C09058;
+    --color-accent-hover: #CEA87E;
+    --color-accent-light: #392A18;
+    --color-success: #8A9868;
+    --color-success-hover: #9DAB7C;
+    --color-success-light: #292E1F;
+    --color-danger: #B07878;
+    --color-danger-hover: #C28E8E;
+    --color-danger-light: #381E1E;
+    --color-warning: #C8B468;
+    --color-warning-hover: #D9C98C;
+    --color-warning-light: #393318;
+    --color-info: #7890A0;
+    --color-info-hover: #92AAB9;
+    --color-info-light: #1F2B33;
 
-    --color-bg-base: #1C1917;
-    --color-bg-subtle: #292524;
-    --color-bg-muted: #44403C;
-    --color-surface: #292524;
-    --color-surface-raised: #44403C;
+    --color-on-primary: #282418;
+    --color-on-success: #282418;
+    --color-on-danger: #282418;
+    --color-on-info: #282418;
 
-    --color-border: #57534E;
-    --color-border-strong: #78716C;
+    --color-bg-base: #1C1B19;
+    --color-bg-subtle: #242320;
+    --color-bg-muted: #33302B;
+    --color-surface: #242320;
+    --color-surface-raised: #33302B;
 
-    --color-text-base: #FEF3C7;
-    --color-text-muted: #FDE68A;
-    --color-text-subtle: #FCD34D;
+    --color-border: #45413B;
+    --color-border-strong: #5C574F;
 
-    --navbar-bg: linear-gradient(135deg, #7C2D12 0%, #9A3412 50%, #C2410C 100%);
-    --navbar-text: #FEF3C7;
-    --navbar-text-muted: rgba(254, 243, 199, 0.8);
+    --color-text-base: #D8D0C0;
+    --color-text-muted: #B0A48D;
+    --color-text-subtle: #93866C;
+
+    --navbar-bg: linear-gradient(135deg, #D06A4C 0%, #C87D52 50%, #C09058 100%);
+    --navbar-text: #282418;
+    --navbar-text-muted: rgba(40, 36, 24, 0.72);
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
@@ -133,41 +146,46 @@
 
 /* Midnight Theme - Deep dark blue */
 [data-theme="midnight"] {
-    --color-primary: #3B82F6;
-    --color-primary-hover: #60A5FA;
-    --color-primary-light: #1E3A8A;
-    --color-accent: #06B6D4;
-    --color-accent-hover: #22D3EE;
-    --color-accent-light: #164E63;
-    --color-success: #34D399;
-    --color-success-hover: #6EE7B7;
-    --color-success-light: #064E3B;
-    --color-danger: #F87171;
-    --color-danger-hover: #FCA5A5;
-    --color-danger-light: #7F1D1D;
-    --color-warning: #FBBF24;
-    --color-warning-hover: #FCD34D;
-    --color-warning-light: #78350F;
-    --color-info: #60A5FA;
-    --color-info-hover: #93C5FD;
-    --color-info-light: #1E3A8A;
+    --color-primary: #5C6BF5;
+    --color-primary-hover: #7C88F8;
+    --color-primary-light: #1E1E6E;
+    --color-accent: #2FC4DE;
+    --color-accent-hover: #5BD4E9;
+    --color-accent-light: #0E3C47;
+    --color-success: #3FD9A0;
+    --color-success-hover: #67E4B6;
+    --color-success-light: #0D3D2D;
+    --color-danger: #F76C7A;
+    --color-danger-hover: #FB8E99;
+    --color-danger-light: #41121E;
+    --color-warning: #F5C04B;
+    --color-warning-hover: #F9D079;
+    --color-warning-light: #33270D;
+    --color-info: #5BB0F5;
+    --color-info-hover: #82C4F8;
+    --color-info-light: #102C4F;
 
-    --color-bg-base: #020617;
-    --color-bg-subtle: #0F172A;
-    --color-bg-muted: #1E293B;
-    --color-surface: #0F172A;
-    --color-surface-raised: #1E293B;
+    --color-on-primary: #1C1928;
+    --color-on-success: #1C1928;
+    --color-on-info: #1C1928;
+    --color-on-danger: #1C1928;
 
-    --color-border: #1E293B;
-    --color-border-strong: #334155;
+    --color-bg-base: #0A0A20;
+    --color-bg-subtle: #121238;
+    --color-bg-muted: #1C1C50;
+    --color-surface: #121238;
+    --color-surface-raised: #1C1C50;
 
-    --color-text-base: #F1F5F9;
-    --color-text-muted: #CBD5E1;
-    --color-text-subtle: #94A3B8;
+    --color-border: #242460;
+    --color-border-strong: #313188;
 
-    --navbar-bg: linear-gradient(135deg, #0C4A6E 0%, #075985 100%);
-    --navbar-text: #F1F5F9;
-    --navbar-text-muted: rgba(241, 245, 249, 0.8);
+    --color-text-base: #E6E8FF;
+    --color-text-muted: #C3C7F0;
+    --color-text-subtle: #9498D0;
+
+    --navbar-bg: linear-gradient(135deg, #0A0A24 0%, #16165A 50%, #191970 100%);
+    --navbar-text: #E6E8FF;
+    --navbar-text-muted: rgba(230, 232, 255, 0.8);
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
@@ -177,41 +195,46 @@
 
 /* Moonlight Theme - Cool and serene inspired by moonlight */
 [data-theme="moonlight"] {
-    --color-primary: #818CF8;
-    --color-primary-hover: #A5B4FC;
-    --color-primary-light: #312E81;
-    --color-accent: #A78BFA;
-    --color-accent-hover: #C4B5FD;
-    --color-accent-light: #4C1D95;
-    --color-success: #34D399;
-    --color-success-hover: #6EE7B7;
-    --color-success-light: #064E3B;
-    --color-danger: #F87171;
-    --color-danger-hover: #FCA5A5;
-    --color-danger-light: #7F1D1D;
-    --color-warning: #FBBF24;
-    --color-warning-hover: #FCD34D;
-    --color-warning-light: #78350F;
-    --color-info: #60A5FA;
-    --color-info-hover: #93C5FD;
-    --color-info-light: #1E3A8A;
+    --color-primary: #B0BCDF;
+    --color-primary-hover: #C8D1EA;
+    --color-primary-light: #2A2440;
+    --color-accent: #9A7FD1;
+    --color-accent-hover: #B49EE0;
+    --color-accent-light: #443266;
+    --color-success: #5BD6A3;
+    --color-success-hover: #7FE3BB;
+    --color-success-light: #163A2E;
+    --color-danger: #F0738A;
+    --color-danger-hover: #F596A8;
+    --color-danger-light: #3D1F2A;
+    --color-warning: #E5B567;
+    --color-warning-hover: #EFC988;
+    --color-warning-light: #332918;
+    --color-info: #7C9BE0;
+    --color-info-hover: #9DB5EA;
+    --color-info-light: #232A40;
 
-    --color-bg-base: #0F0F23;
-    --color-bg-subtle: #1A1A2E;
-    --color-bg-muted: #252540;
-    --color-surface: #1A1A2E;
-    --color-surface-raised: #252540;
+    --color-on-primary: #1C1928;
+    --color-on-success: #1C1928;
+    --color-on-info: #1C1928;
+    --color-on-danger: #1C1928;
 
-    --color-border: #3F3F5F;
-    --color-border-strong: #4F4F6F;
+    --color-bg-base: #15131D;
+    --color-bg-subtle: #1C1928;
+    --color-bg-muted: #2A2540;
+    --color-surface: #1C1928;
+    --color-surface-raised: #2A2540;
 
-    --color-text-base: #E0E7FF;
-    --color-text-muted: #C7D2FE;
-    --color-text-subtle: #A5B4FC;
+    --color-border: #322C44;
+    --color-border-strong: #463A5E;
 
-    --navbar-bg: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4C1D95 100%);
-    --navbar-text: #E0E7FF;
-    --navbar-text-muted: rgba(224, 231, 255, 0.8);
+    --color-text-base: #E6E8F4;
+    --color-text-muted: #C0C6DD;
+    --color-text-subtle: #B0BCDF;
+
+    --navbar-bg: linear-gradient(135deg, #1B1726 0%, #2E2547 50%, #443266 100%);
+    --navbar-text: #E6E8F4;
+    --navbar-text-muted: rgba(230, 232, 244, 0.8);
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
@@ -223,22 +246,22 @@
 [data-theme="nord"] {
     --color-primary: #5E81AC;
     --color-primary-hover: #81A1C1;
-    --color-primary-light: #D8DEE9;
+    --color-primary-light: #434C5E;
     --color-accent: #88C0D0;
     --color-accent-hover: #8FBCBB;
-    --color-accent-light: #ECEFF4;
+    --color-accent-light: #434C5E;
     --color-success: #A3BE8C;
     --color-success-hover: #B8D4A3;
-    --color-success-light: #E5E9F0;
+    --color-success-light: #434C5E;
     --color-danger: #BF616A;
     --color-danger-hover: #D08770;
-    --color-danger-light: #E5E9F0;
+    --color-danger-light: #434C5E;
     --color-warning: #EBCB8B;
     --color-warning-hover: #F0D9A6;
-    --color-warning-light: #ECEFF4;
+    --color-warning-light: #434C5E;
     --color-info: #5E81AC;
     --color-info-hover: #81A1C1;
-    --color-info-light: #D8DEE9;
+    --color-info-light: #434C5E;
 
     --color-bg-base: #2E3440;
     --color-bg-subtle: #3B4252;
@@ -279,7 +302,7 @@
     --color-danger-light: #7F1D1D;
     --color-warning: #FBBF24;
     --color-warning-hover: #FCD34D;
-    --color-warning-light: #78350F;
+    --color-warning-light: #43300F;
     --color-info: #60A5FA;
     --color-info-hover: #93C5FD;
     --color-info-light: #1E3A8A;
@@ -307,6 +330,151 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
+/* Dracula Theme - https://draculatheme.com */
+[data-theme="dracula"] {
+    --color-primary: #BD93F9;
+    --color-primary-hover: #CFB0FB;
+    --color-primary-light: #3A2D5C;
+    --color-accent: #FFB86C;
+    --color-accent-hover: #FFCB93;
+    --color-accent-light: #43331D;
+    --color-success: #50FA7B;
+    --color-success-hover: #74FB97;
+    --color-success-light: #143D24;
+    --color-danger: #FF5555;
+    --color-danger-hover: #FF7B7B;
+    --color-danger-light: #43201F;
+    --color-warning: #F1FA8C;
+    --color-warning-hover: #F5FCA8;
+    --color-warning-light: #3F421F;
+    --color-info: #8BE9FD;
+    --color-info-hover: #ABF0FE;
+    --color-info-light: #173B43;
+
+    --color-on-primary: #282A36;
+    --color-on-success: #282A36;
+    --color-on-info: #282A36;
+
+    --color-bg-base: #282A36;
+    --color-bg-subtle: #343746;
+    --color-bg-muted: #424450;
+    --color-surface: #343746;
+    --color-surface-raised: #424450;
+
+    --color-border: #44475A;
+    --color-border-strong: #6272A4;
+
+    --color-text-base: #F8F8F2;
+    --color-text-muted: #6272A4;
+    --color-text-subtle: #6272A4;
+
+    --navbar-bg: linear-gradient(135deg, #A98FD8 0%, #C792BB 100%);
+    --navbar-text: #282A36;
+    --navbar-text-muted: rgba(40, 42, 54, 0.7);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
+/* Catppuccin Mocha - https://github.com/catppuccin/catppuccin */
+[data-theme="mocha"] {
+    --color-primary: #cba6f7;
+    --color-primary-hover: #d5b8f9;
+    --color-primary-light: #3c2e5c;
+    --color-accent: #f5c2e7;
+    --color-accent-hover: #f7ceec;
+    --color-accent-light: #4a2e44;
+    --color-success: #a6e3a1;
+    --color-success-hover: #b8e9b4;
+    --color-success-light: #1e3d24;
+    --color-danger: #f38ba8;
+    --color-danger-hover: #f5a2b9;
+    --color-danger-light: #4a2230;
+    --color-warning: #f9e2af;
+    --color-warning-hover: #fae8bf;
+    --color-warning-light: #41391f;
+    --color-info: #89b4fa;
+    --color-info-hover: #a1c3fb;
+    --color-info-light: #1e2e4a;
+
+    --color-on-primary: #1e1e2e;
+    --color-on-success: #1e1e2e;
+    --color-on-danger: #1e1e2e;
+    --color-on-info: #1e1e2e;
+
+    --color-bg-base: #1e1e2e;
+    --color-bg-subtle: #313244;
+    --color-bg-muted: #45475a;
+    --color-surface: #313244;
+    --color-surface-raised: #45475a;
+
+    --color-border: #585b70;
+    --color-border-strong: #6c7086;
+
+    --color-text-base: #cdd6f4;
+    --color-text-muted: #a6adc8;
+    --color-text-subtle: #7f849c;
+
+    --navbar-bg: linear-gradient(135deg, #c9aae8 0%, #e3bdd8 100%);
+    --navbar-text: #1e1e2e;
+    --navbar-text-muted: rgba(30, 30, 46, 0.75);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
+/* Rosé Pine Theme - https://rosepinetheme.com */
+[data-theme="rose-pine"] {
+    --color-primary: #c4a7e7;
+    --color-primary-hover: #d0b8ec;
+    --color-primary-light: #2e2640;
+    --color-accent: #ebbcba;
+    --color-accent-hover: #efc9c8;
+    --color-accent-light: #3a2b2f;
+    --color-success: #31748f;
+    --color-success-hover: #3a87a5;
+    --color-success-light: #1b2e36;
+    --color-danger: #eb6f92;
+    --color-danger-hover: #ef85a3;
+    --color-danger-light: #3a2530;
+    --color-warning: #f6c177;
+    --color-warning-hover: #f8cd90;
+    --color-warning-light: #3a3020;
+    --color-info: #9ccfd8;
+    --color-info-hover: #b0d8df;
+    --color-info-light: #1f2e30;
+
+    --color-on-primary: #191724;
+    --color-on-danger: #191724;
+    --color-on-info: #191724;
+
+    --color-bg-base: #191724;
+    --color-bg-subtle: #1f1d2e;
+    --color-bg-muted: #26233a;
+    --color-surface: #1f1d2e;
+    --color-surface-raised: #26233a;
+
+    --color-border: #403d52;
+    --color-border-strong: #524f67;
+
+    --color-text-base: #e0def4;
+    --color-text-muted: #908caa;
+    --color-text-subtle: #6e6a86;
+
+    --navbar-bg: linear-gradient(135deg, #c4a7e7 0%, #ebbcba 100%);
+    --navbar-text: #191724;
+    --navbar-text-muted: rgba(25, 23, 36, 0.75);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
 /* ==========================================================================
    Light Themes
    ========================================================================== */
@@ -332,6 +500,8 @@
     --color-info-hover: #31d2f2;
     --color-info-light: #cff4fc;
 
+    --color-on-info: #1a1a1a;
+
     --color-bg-base: #ffffff;
     --color-bg-subtle: #f8f9fa;
     --color-bg-muted: #e9ecef;
@@ -345,7 +515,7 @@
     --color-text-muted: #6c757d;
     --color-text-subtle: #adb5bd;
 
-    --navbar-bg: #ffc400;
+    --navbar-bg: linear-gradient(135deg, #ffc400 0%, #ff9d00 100%);
     --navbar-text: #594400;
     --navbar-text-muted: #7f6100;
 }
@@ -589,6 +759,7 @@
     --color-primary: #F59E0B;
     --color-primary-hover: #D97706;
     --color-primary-light: #FEF3C7;
+    --color-on-primary: #1a1a1a;
     --color-accent: #FB923C;
     --color-accent-hover: #F97316;
     --color-accent-light: #FFEDD5;
@@ -623,6 +794,171 @@
     --navbar-text-muted: rgba(255, 255, 255, 0.9);
 }
 
+/* Alucard Theme - https://draculatheme.com */
+[data-theme="alucard"] {
+    --color-primary: #644AC9;
+    --color-primary-hover: #5239B0;
+    --color-primary-light: #E0DAF6;
+    --color-accent: #A34D14;
+    --color-accent-hover: #874010;
+    --color-accent-light: #F0E1D4;
+    --color-success: #14710A;
+    --color-success-hover: #0F5A07;
+    --color-success-light: #D5E6D2;
+    --color-danger: #CB3A2A;
+    --color-danger-hover: #B02E20;
+    --color-danger-light: #F4DAD6;
+    --color-warning: #846E15;
+    --color-warning-hover: #6B5910;
+    --color-warning-light: #EAE5CE;
+    --color-info: #036A96;
+    --color-info-hover: #02597D;
+    --color-info-light: #D2E4EC;
+
+    --color-on-warning: #fff;
+
+    --color-bg-base: #FFFBEB;
+    --color-bg-subtle: #ECE9DF;
+    --color-bg-muted: #DEDCCF;
+    --color-surface: #EFEDDC;
+    --color-surface-raised: #EFEDDC;
+
+    --color-border: #CFCFDE;
+    --color-border-strong: #6C664B;
+
+    --color-text-base: #1F1F1F;
+    --color-text-muted: #6C664B;
+    --color-text-subtle: #6C664B;
+
+    --navbar-bg: linear-gradient(135deg, #6A5AA8 0%, #8A4F77 100%);
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
+/* Catppuccin Latte - https://github.com/catppuccin/catppuccin */
+[data-theme="latte"] {
+    --color-primary: #8839ef;
+    --color-primary-hover: #7430cb;
+    --color-primary-light: #ede1fd;
+    --color-accent: #ea76cb;
+    --color-accent-hover: #ce68b3;
+    --color-accent-light: #fbe4f5;
+    --color-success: #40a02b;
+    --color-success-hover: #368825;
+    --color-success-light: #dcefd5;
+    --color-danger: #d20f39;
+    --color-danger-hover: #b30d30;
+    --color-danger-light: #f7d6dd;
+    --color-warning: #df8e1d;
+    --color-warning-hover: #be7919;
+    --color-warning-light: #f8ecd3;
+    --color-info: #1e66f5;
+    --color-info-hover: #1a57d0;
+    --color-info-light: #d7e2fd;
+
+    --color-on-success: #1a1a1a;
+
+    --color-bg-base: #e6e9ef;
+    --color-bg-subtle: #dce0e8;
+    --color-bg-muted: #ccd0da;
+    --color-surface: #eff1f5;
+    --color-surface-raised: #eff1f5;
+
+    --color-border: #ccd0da;
+    --color-border-strong: #acb0be;
+
+    --color-text-base: #4c4f69;
+    --color-text-muted: #6c6f85;
+    --color-text-subtle: #8c8fa1;
+
+    --navbar-bg: linear-gradient(135deg, #7b47d0 0%, #4257c2 100%);
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
+/* Ember Light Theme - https://github.com/ember-theme/ember */
+[data-theme="ember-light"] {
+    --color-primary: #B84C30;
+    --color-primary-hover: #993F28;
+    --color-primary-light: #F1DDD5;
+    --color-accent: #946030;
+    --color-accent-hover: #7B5028;
+    --color-accent-light: #ECE0D1;
+    --color-success: #4A6830;
+    --color-success-hover: #3D5628;
+    --color-success-light: #DDE5D3;
+    --color-danger: #905050;
+    --color-danger-hover: #784242;
+    --color-danger-light: #ECDCDC;
+    --color-warning: #7A6820;
+    --color-warning-hover: #65561B;
+    --color-warning-light: #EBE5D0;
+    --color-info: #3A6080;
+    --color-info-hover: #30506A;
+    --color-info-light: #D8E0E8;
+
+    --color-on-warning: #fff;
+
+    --color-bg-base: #E6DAC4;
+    --color-bg-subtle: #DCCFB6;
+    --color-bg-muted: #CEBF9F;
+    --color-surface: #F2EAD9;
+    --color-surface-raised: #F2EAD9;
+
+    --color-border: #CABD9C;
+    --color-border-strong: #A89C7A;
+
+    --color-text-base: #282418;
+    --color-text-muted: #6C664B;
+    --color-text-subtle: #8A8264;
+
+    --navbar-bg: linear-gradient(135deg, #B84C30 0%, #A5562C 50%, #946030 100%);
+    --navbar-text: #FFFFFF;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
+/* Rosé Pine Dawn Theme - https://rosepinetheme.com */
+[data-theme="rose-pine-dawn"] {
+    --color-primary: #907aa9;
+    --color-primary-hover: #7d6795;
+    --color-primary-light: #ece5f0;
+    --color-accent: #d7827e;
+    --color-accent-hover: #c66f6b;
+    --color-accent-light: #f7e6e4;
+    --color-success: #286983;
+    --color-success-hover: #20586e;
+    --color-success-light: #d6e4e9;
+    --color-danger: #b4637a;
+    --color-danger-hover: #9d5269;
+    --color-danger-light: #f1dde2;
+    --color-warning: #ea9d34;
+    --color-warning-hover: #d18a26;
+    --color-warning-light: #fbedd4;
+    --color-info: #56949f;
+    --color-info-hover: #487e88;
+    --color-info-light: #ddeaec;
+
+    --color-on-primary: #191724;
+    --color-on-info: #191724;
+
+    --color-bg-base: #faf4ed;
+    --color-bg-subtle: #f2e9e1;
+    --color-bg-muted: #e9ded3;
+    --color-surface: #fffaf3;
+    --color-surface-raised: #fffaf3;
+
+    --color-border: #dfdad9;
+    --color-border-strong: #cecacd;
+
+    --color-text-base: #575279;
+    --color-text-muted: #797593;
+    --color-text-subtle: #9893a5;
+
+    --navbar-bg: linear-gradient(135deg, #907aa9 0%, #d7827e 100%);
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
 /* ==========================================================================
    Global Styles
    ========================================================================== */
@@ -650,6 +986,12 @@ body {
    ========================================================================== */
 
 /* Force Bootstrap components to use our theme variables */
+.nav-link,
+.dropdown-item {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
 .card {
     background-color: var(--color-surface) !important;
     border: 1px solid var(--color-border) !important;
@@ -823,6 +1165,11 @@ body {
     font-weight: 600;
 }
 
+.navbar-sunshine .nav-link.dropdown-toggle.show {
+    color: var(--navbar-text) !important;
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
 .navbar-sunshine .navbar-toggler {
     color: var(--navbar-text) !important;
     border-color: rgba(255, 255, 255, 0.2) !important;
@@ -978,43 +1325,55 @@ p {
 }
 
 .btn-primary {
+    --bs-btn-active-bg: var(--color-primary-hover);
+    --bs-btn-active-border-color: var(--color-primary-hover);
     background-color: var(--color-primary);
-    color: white;
+    color: var(--color-on-primary);
 }
 
 .btn-primary:hover {
     background-color: var(--color-primary-hover);
-    color: white;
+    color: var(--color-on-primary);
 }
 
 .btn-success {
     background-color: var(--color-success);
-    color: white;
+    color: var(--color-on-success);
 }
 
 .btn-success:hover {
     background-color: var(--color-success-hover);
-    color: white;
+    color: var(--color-on-success);
 }
 
 .btn-danger {
     background-color: var(--color-danger);
-    color: white;
+    color: var(--color-on-danger);
 }
 
 .btn-danger:hover {
     background-color: var(--color-danger-hover);
-    color: white;
+    color: var(--color-on-danger);
 }
 
 .btn-warning {
     background-color: var(--color-warning);
-    color: white;
+    color: var(--color-on-warning);
 }
 
 .btn-warning:hover {
     background-color: var(--color-warning-hover);
-    color: white;
+    color: var(--color-on-warning);
+}
+
+.btn-info {
+    background-color: var(--color-info);
+    color: var(--color-on-info);
+}
+
+.btn-info:hover {
+    background-color: var(--color-info-hover);
+    color: var(--color-on-info);
 }
 
 .btn-secondary {
@@ -1027,19 +1386,77 @@ p {
     color: var(--color-text-base);
 }
 
+.btn-outline-primary {
+    --bs-btn-color: var(--color-primary);
+    --bs-btn-border-color: var(--color-primary);
+    --bs-btn-hover-color: white;
+    --bs-btn-hover-bg: var(--color-primary);
+    --bs-btn-hover-border-color: var(--color-primary);
+    --bs-btn-active-color: white;
+    --bs-btn-active-bg: var(--color-primary);
+    --bs-btn-active-border-color: var(--color-primary);
+    border: 1px solid var(--color-primary);
+}
+
+.btn-outline-secondary {
+    --bs-btn-color: var(--color-text-muted);
+    --bs-btn-border-color: var(--color-border);
+    --bs-btn-hover-color: var(--color-text-base);
+    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-border-color: var(--color-border-strong);
+    --bs-btn-active-color: var(--color-text-base);
+    --bs-btn-active-bg: var(--color-bg-muted);
+    --bs-btn-active-border-color: var(--color-border-strong);
+    border: 1px solid var(--color-border);
+}
+
 /* Align SVG icons inside buttons. */
 .btn .icon,
 .btn svg {
     vertical-align: text-bottom;
 }
 
+/* ==========================================================================
+   Badge Styles
+   ========================================================================== */
+
+.badge.bg-primary {
+    background-color: var(--color-primary) !important;
+    color: var(--color-on-primary) !important;
+}
+
+.badge.bg-secondary {
+    background-color: var(--color-bg-muted) !important;
+    color: var(--color-text-base) !important;
+}
+
+/* ==========================================================================
+   Toolbar Styles
+   ========================================================================== */
+
+.toolbar {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    padding: var(--spacing-md);
+}
+
+.apps-toolbar .input-group {
+    width: 14rem;
+}
+
+.config-search {
+    flex: 0 1 28rem;
+}
+
 /* ==========================================================================
    Form Styles
    ========================================================================== */
 
 .form-control,
 .form-select {
-    background-color: var(--color-surface);
+    background-color: var(--color-bg-base);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 0.625rem 0.875rem;
@@ -1051,7 +1468,7 @@ p {
 .form-select:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
-    background-color: var(--color-surface);
+    background-color: var(--color-bg-base);
     color: var(--color-text-base);
 }
 
@@ -1060,6 +1477,12 @@ p {
     opacity: 0.7;
 }
 
+.input-group-text {
+    background-color: var(--color-bg-base);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+}
+
 .form-label {
     font-weight: 600;
     color: var(--color-text-base);
@@ -1153,12 +1576,94 @@ p {
     padding-bottom: var(--spacing-3xl);
 }
 
+.config-layout {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-lg);
+}
+
+.config-nav {
+    flex: 0 0 15rem;
+    position: sticky;
+    top: var(--spacing-lg);
+}
+
+.config-nav-list {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.config-nav-list .nav-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-weight: 600;
+    transition: all var(--transition-fast);
+}
+
+.config-nav-list .nav-link:hover {
+    color: var(--color-text-base);
+    background-color: var(--color-bg-subtle);
+}
+
+.config-nav-list .nav-link.active {
+    color: var(--color-on-primary);
+    background-color: var(--color-primary);
+}
+
+.config-nav-heading {
+    margin: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtle);
+}
+
+.config-content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.config-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-lg);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--color-border);
+}
+
+.config-actions .btn {
+    width: 100%;
+    justify-content: center;
+}
+
 .config-page {
     padding: var(--spacing-xl);
     background-color: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-top: none;
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    border-radius: var(--radius-lg);
+}
+
+@media (max-width: 768px) {
+    .config-layout {
+        flex-direction: column;
+    }
+
+    .config-nav {
+        position: static;
+        flex-basis: auto;
+        width: 100%;
+    }
+
+    .config-nav-list {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 }
 
 /* ==========================================================================
@@ -1562,6 +2067,10 @@ p {
     padding: var(--spacing-sm);
 }
 
+.dropdown-toggle.show::after {
+    transform: rotate(180deg);
+}
+
 .dropdown-item {
     padding: var(--spacing-sm) var(--spacing-md);
     border-radius: var(--radius-sm);
@@ -1570,7 +2079,7 @@ p {
 }
 
 .dropdown-item:hover {
-    background-color: var(--color-bg-subtle) !important;
+    background-color: var(--color-bg-muted) !important;
     color: var(--color-text-base) !important;
 }
 
@@ -1594,6 +2103,42 @@ p {
     margin-right: 0.5rem;
 }
 
+.theme-menu {
+    grid-template-columns: 1fr 1fr;
+    gap: 0 var(--spacing-sm);
+    min-width: 22rem;
+}
+
+.dropdown-menu.theme-menu.show {
+    display: grid;
+}
+
+.theme-menu-full {
+    grid-column: 1 / -1;
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.theme-menu-full .dropdown-item {
+    flex: 1;
+}
+
+.theme-menu .dropdown-header {
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
+}
+
+@media (max-width: 480px) {
+    .theme-menu {
+        grid-template-columns: 1fr;
+        min-width: 12rem;
+    }
+}
+
 /* ==========================================================================
    Responsive Adjustments
    ========================================================================== */
@@ -1635,23 +2180,8 @@ p {
         box-shadow: none;
     }
     20%, 80% {
-        background-color: rgba(255, 215, 0, 0.4);
-        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.6);
-    }
-}
-
-[data-bs-theme="dark"] .config-search-highlight {
-    animation: highlightPulseDark 5s ease-in-out;
-}
-
-@keyframes highlightPulseDark {
-    0%, 100% {
-        background-color: transparent;
-        box-shadow: none;
-    }
-    20%, 80% {
-        background-color: rgba(255, 215, 0, 0.3);
-        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.5);
+        background-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 55%, transparent);
     }
 }
 
@@ -1669,6 +2199,10 @@ p {
     box-shadow: var(--shadow-lg);
 }
 
+.app-card .card-body {
+    padding: var(--spacing-md);
+}
+
 .app-poster-container {
     position: relative;
     width: 100%;
@@ -1703,30 +2237,70 @@ p {
     opacity: 0.5;
 }
 
-.app-details {
-    flex-grow: 1;
+.app-poster-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    background: linear-gradient(to top,
+        color-mix(in srgb, var(--color-primary) 22%, rgba(0, 0, 0, 0.9)) 0%,
+        color-mix(in srgb, var(--color-primary) 12%, rgba(0, 0, 0, 0.68)) 55%,
+        transparent 100%);
+    color: #fff;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-base);
 }
 
-.app-details > div {
-    margin-bottom: 0.25rem;
+.app-card:hover .app-poster-overlay,
+.app-card:focus-within .app-poster-overlay {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.app-overlay-row {
     display: flex;
     align-items: center;
+    font-size: 0.8rem;
+    line-height: 1.3;
 }
 
-.apps-toolbar .input-group {
-    width: 14rem;
+.app-poster-overlay .icon {
+    flex-shrink: 0;
 }
 
-.apps-toolbar .btn-outline-secondary {
-    border: 1px solid var(--color-border);
+.app-poster-overlay .app-detail-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.apps-toolbar .btn-outline-secondary.active {
-    background-color: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-    color: var(--color-text-base);
+.app-overlay-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
 }
 
+.app-flag-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    min-height: 1.5rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 0.2em 0.5em;
+    border-radius: var(--radius-sm);
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+
 /* ==========================================================================
    Featured Apps Page Styles
    ========================================================================== */
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
index a41642fc..9fc206b1 100644
--- a/src_assets/common/assets/web/template_header.html
+++ b/src_assets/common/assets/web/template_header.html
@@ -4,5 +4,3 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Sunshine</title>
 <link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
-<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-<link href="./assets/css/sunshine.css" rel="stylesheet" />
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index a04c3e7c..b7e7c443 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -13,10 +13,13 @@ export const getPreferredTheme = () => {
 // Define which themes are dark (for Bootstrap compatibility)
 const darkThemes = new Set([
     'dark',
+    'dracula',
     'ember',
     'midnight',
+    'mocha',
     'moonlight',
     'nord',
+    'rose-pine',
     'slate',
 ])
 
@@ -78,17 +81,31 @@ export const showActiveTheme = (theme, focus = false) => {
     }
 }
 
+const applyTheme = theme => {
+    setStoredTheme(theme)
+    setTheme(theme)
+    showActiveTheme(theme, true)
+}
+
+const pickRandomTheme = () => {
+    const current = getStoredTheme()
+    const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
+        .map(el => el.dataset.bsThemeValue)
+        .filter(value => value !== 'auto' && value !== current)
+    return values[Math.floor(Math.random() * values.length)]  // NOSONAR(javascript:S2245) random not used for cryptography here
+}
+
 export function setupThemeToggleListener() {
     document.querySelectorAll('[data-bs-theme-value]')
         .forEach(toggle => {
-            toggle.addEventListener('click', () => {
-                const theme = toggle.getAttribute('data-bs-theme-value')
-                setStoredTheme(theme)
-                setTheme(theme)
-                showActiveTheme(theme, true)
-            })
+            toggle.addEventListener('click', () => applyTheme(toggle.dataset.bsThemeValue))
         })
 
+    const randomToggle = document.querySelector('#bd-theme-random')
+    if (randomToggle) {
+        randomToggle.addEventListener('click', () => applyTheme(pickRandomTheme()))
+    }
+
     showActiveTheme(getPreferredTheme(), false)
 }
 
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index d47a1099..498267a0 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -7,7 +7,7 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
+  <div id="content" class="container">
     <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
     <!-- ViGEmBus Installation -->
     <div class="card my-4" v-if="platform === 'windows' && controllerEnabled">