diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Layout/MainLayout.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Layout/MainLayout.razor
index 433431d7..acb5b2d4 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Layout/MainLayout.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Layout/MainLayout.razor
@@ -1,8 +1,15 @@
-@using EnvelopeGenerator.Server.Client.Services;
+@using EnvelopeGenerator.Server.Client.Services
 @inherits LayoutComponentBase
+@implements IDisposable
 
-<div class="page">
-<main>
+@inject ThemeService ThemeService
+
+<HeadContent>
+    <link href="@ThemeService.ThemeCssHref" rel="stylesheet" />
+</HeadContent>
+
+<div class="page" data-bs-theme="@ThemeService.BootstrapTheme">
+    <main>
         <article class="content">
             @Body
         </article>
@@ -11,18 +18,73 @@
         <span>&copy; SignFlow 2023-2024 <a href="https://digitaldata.works" target="_blank" rel="noopener">Digital Data GmbH</a></span>
         <span class="receiver-footer__sep">&#124;</span>
         <a href="docs/privacy-policy.de-DE.html" target="_blank" rel="noopener">Datenschutz</a>
+
+        <div class="sf-footer-controls">
+            <select class="sf-footer-select"
+                    title="Theme wählen"
+                    @onchange="OnThemeChanged">
+                @foreach (var theme in ThemeService.AvailableThemes)
+                {
+                    <option value="@theme.Value" selected="@(theme.Value == ThemeService.ThemeName)">
+                        @theme.Label
+                    </option>
+                }
+            </select>
+            <button class="sf-footer-toggle"
+                    @onclick="OnToggleDarkMode"
+                    title="@(ThemeService.IsDarkMode ? "Light Mode" : "Dark Mode")">
+                @if (ThemeService.IsDarkMode)
+                {
+                    @* Sun *@
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="5" fill="currentColor" stroke="none"/>
+                        <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                        <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                    </svg>
+                }
+                else
+                {
+                    @* Moon *@
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                    </svg>
+                }
+            </button>
+        </div>
     </footer>
 </div>
 
 @code {
     [Inject] IHttpClientFactory HttpClientFactory { get; set; } = default!;
-    
-    List<string> RequiredFonts = new() {
-        "opensans.ttf"
-    };
 
-    protected async override Task OnInitializedAsync() {
-        await FontLoader.LoadFonts(HttpClientFactory, RequiredFonts);
+    private Action? _themeChangeHandler;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await FontLoader.LoadFonts(HttpClientFactory, ["opensans.ttf"]);
+        _themeChangeHandler = () => InvokeAsync(StateHasChanged);
+        ThemeService.OnChange += _themeChangeHandler;
         await base.OnInitializedAsync();
     }
-}
\ No newline at end of file
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await ThemeService.InitializeAsync();
+    }
+
+    private async Task OnToggleDarkMode()
+        => await ThemeService.ToggleDarkModeAsync();
+
+    private async Task OnThemeChanged(ChangeEventArgs e)
+    {
+        var value = e.Value?.ToString();
+        if (!string.IsNullOrEmpty(value))
+            await ThemeService.SetThemeAsync(value);
+    }
+
+    public void Dispose()
+        => ThemeService.OnChange -= _themeChangeHandler;
+}
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
index 2936a900..25de4614 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
@@ -5,11 +5,6 @@
 @using EnvelopeGenerator.Server.Client.Models
 @using DevExpress.Blazor
 @using EnvelopeGenerator.Server.Client.Services
-@inject EnvelopeGenerator.Server.Client.Services.EnvelopeService EnvelopeService
-@inject EnvelopeGenerator.Server.Client.Services.AuthService AuthService
-@inject NavigationManager Navigation
-@inject IJSRuntime JSRuntime
-@inject AppVersionService AppVersion
 @using EnvelopeGenerator.Application.Common.Dto
 @inject EnvelopeGenerator.Server.Client.Services.EnvelopeService EnvelopeService
 @inject EnvelopeGenerator.Server.Client.Services.AuthService AuthService
@@ -17,7 +12,6 @@
 @inject IJSRuntime JSRuntime
 @inject AppVersionService AppVersion
 
-<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
 <link href="@AppVersion.GetVersionedUrl("css/envelope-viewer.css")" rel="stylesheet" />
 <link href="@AppVersion.GetVersionedUrl("css/sender-page.css")" rel="stylesheet" />
 
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/IndexPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/IndexPage.razor
index c8d170cb..710474f7 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/IndexPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/IndexPage.razor
@@ -3,8 +3,6 @@
 @inject NavigationManager Navigation
 @rendermode InteractiveWebAssembly
 
-<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
-
 <div class="home-page-wrapper">
 
     <div class="home-hero-header">
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginReceiverPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginReceiverPage.razor
index de390551..b3f39ddd 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginReceiverPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginReceiverPage.razor
@@ -4,8 +4,6 @@
 @inject AuthService AuthService
 @inject NavigationManager Navigation
 
-<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
-
 <div class="login-page-wrapper d-flex align-items-center justify-content-center min-vh-100">
     <div class="login-card card shadow border-0" style="max-width: 440px; width: 100%;">
 
@@ -15,14 +13,14 @@
                     <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
                 </svg>
             </div>
-            <h5 class="mb-0 fw-semibold">Dokument öffnen</h5>
+            <h5 class="mb-0 fw-semibold">Dokument öffnen</h5>
             <p class="mb-0 mt-1 opacity-75" style="font-size: 0.85rem;">Sicherer Zugang mit Zugangscode</p>
         </div>
 
         <div class="card-body p-4">
 
             <p class="text-muted mb-4" style="font-size: 0.875rem; line-height: 1.5;">
-                Bitte geben Sie den Zugangscode ein, den Sie per E-Mail erhalten haben, um das Dokument sicher zu öffnen.
+                Bitte geben Sie den Zugangscode ein, den Sie per E-Mail erhalten haben, um das Dokument sicher zu öffnen.
             </p>
 
             @if (LoginResult == EnvelopeLoginResult.NotFound)
@@ -33,7 +31,7 @@
                     </svg>
                     <div>
                         <strong>Dokument nicht gefunden.</strong><br />
-                        <span style="font-size:0.85rem;">Der angegebene Zugangscode konnte keinem Dokument zugeordnet werden. Bitte prüfen Sie den Link in Ihrer E-Mail.</span>
+                        <span style="font-size:0.85rem;">Der angegebene Zugangscode konnte keinem Dokument zugeordnet werden. Bitte prüfen Sie den Link in Ihrer E-Mail.</span>
                     </div>
                 </div>
             }
@@ -44,7 +42,7 @@
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
                     </svg>
                     <div>
-                        <strong>Ungültiger Zugangscode.</strong><br />
+                        <strong>Ungültiger Zugangscode.</strong><br />
                         <span style="font-size:0.85rem;">Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.</span>
                     </div>
                 </div>
@@ -58,7 +56,7 @@
                     </svg>
                     <div>
                         <strong>Serverfehler.</strong><br />
-                        <span style="font-size:0.85rem;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.</span>
+                        <span style="font-size:0.85rem;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.</span>
                     </div>
                 </div>
             }
@@ -115,14 +113,14 @@
                 @if (IsLoading)
                 {
                     <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                    <span>Überprüfen …</span>
+                    <span>Überprüfen …</span>
                 }
                 else
                 {
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                         <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
                     </svg>
-                    <span>Dokument öffnen</span>
+                    <span>Dokument öffnen</span>
                 }
             </button>
 
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginSenderPage.razor
index 32d74e97..150fbc65 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/LoginSenderPage.razor
@@ -4,8 +4,6 @@
 @inject AuthService AuthService
 @inject NavigationManager Navigation
 
-<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
-
 <div class="login-page-wrapper d-flex align-items-center justify-content-center min-vh-100">
     <div class="login-card card shadow border-0" style="max-width: 440px; width: 100%;">
 
@@ -32,7 +30,7 @@
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                     </svg>
                     <div>
-                        <strong>Ungültige Anmeldedaten.</strong><br />
+                        <strong>Ungültige Anmeldedaten.</strong><br />
                         <span style="font-size:0.85rem;">Benutzername oder Passwort ist falsch. Bitte versuchen Sie es erneut.</span>
                     </div>
                 </div>
@@ -44,7 +42,7 @@
                     </svg>
                     <div>
                         <strong>Serverfehler.</strong><br />
-                        <span style="font-size:0.85rem;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.</span>
+                        <span style="font-size:0.85rem;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.</span>
                     </div>
                 </div>
             }
@@ -120,7 +118,7 @@
                     disabled="@(IsLoading || string.IsNullOrWhiteSpace(Username) || string.IsNullOrWhiteSpace(Password))">
                 @if (IsLoading) {
                     <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                    <span>Anmelden …</span>
+                    <span>Anmelden …</span>
                 } else {
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0v-2z"/>
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Program.cs b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Program.cs
index c0fa7a2e..fc25e496 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Program.cs
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Program.cs
@@ -321,6 +321,13 @@ try
     // User Preferences (theme, dark mode, grid layouts — stored in TBDD_CACHE)
     // Registration handled by Infrastructure DependencyInjection (AddEnvelopeGeneratorInfrastructureServices)
 
+    // Client-side services that MainLayout depends on must also be registered here
+    // so that Blazor Auto prerender (SSR pass) can resolve them on the server.
+    // ThemeService.InitializeAsync() uses IJSRuntime but is only called in OnAfterRenderAsync
+    // (never during prerender), so registering it server-side is safe.
+    builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.UserPreferencesService>();
+    builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.ThemeService>();
+
     // Business Services (Server specific)
     builder.Services.AddScoped<DocumentService>();
     builder.Services.AddScoped<AuthService>();
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css
index 562b15b3..d8bc6ad3 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css
@@ -365,4 +365,63 @@ article {
 
 .receiver-footer__sep {
     opacity: 0.4;
+}
+
+/* ── Footer: Theme & Dark Mode Controls ─────────────────────────────────── */
+/* Positioned at the right end of the fixed footer bar.                     */
+/* Styled to match the footer's gradient background — small, unobtrusive.  */
+
+.sf-footer-controls {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;      /* push to the right */
+}
+
+.sf-footer-select {
+    height: 22px;
+    padding: 0 5px;
+    font-size: 0.68rem;
+    line-height: 1;
+    color: rgba(255, 255, 255, 0.85);
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 4px;
+    cursor: pointer;
+    outline: none;
+    /* Native select options use browser defaults — acceptable in a footer context */
+}
+
+.sf-footer-select:hover,
+.sf-footer-select:focus {
+    background: rgba(255, 255, 255, 0.20);
+    border-color: rgba(255, 255, 255, 0.38);
+}
+
+/* Force option text to be readable in browsers that support it */
+.sf-footer-select option {
+    color: #1e2e3e;
+    background: #ffffff;
+}
+
+.sf-footer-toggle {
+    width: 24px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.85);
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+    flex-shrink: 0;
+}
+
+.sf-footer-toggle:hover {
+    background: rgba(255, 255, 255, 0.24);
+    border-color: rgba(255, 255, 255, 0.40);
+    color: #ffffff;
 }
\ No newline at end of file