diff --git a/EnvelopeGenerator.ReceiverUI/Pages/Index.razor b/EnvelopeGenerator.ReceiverUI/Pages/Index.razor
index 212e2d7d..94eb6276 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/Index.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/Index.razor
@@ -1,40 +1,68 @@
 @page "/"
-@inject NavigationManager NavigationManager
 
-<div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
-    <div class="card shadow-sm border-0" style="max-width: 560px; width: 100%;">
-        <div class="card-body p-5 text-center">
-            <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px;">
-                <span class="oi oi-document text-primary" aria-hidden="true" style="font-size: 2rem;"></span>
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+
+<div class="home-page-wrapper">
+
+    <div class="home-hero-header">
+        <div class="home-hero-header__inner">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="home-hero-header__icon" viewBox="0 0 16 16">
+                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
+            </svg>
+            <div>
+                <h1 class="home-hero-header__title">SignFlow</h1>
+                <p class="home-hero-header__subtitle">Willkommen im eSign-Portal</p>
             </div>
-            <h2 class="mb-3">Empfδnger-UI</h2>
-            <p class="text-muted mb-4">
-                Sie werden zur Empfδnger-UI weitergeleitet. Bitte warten Sie einen Moment.
-            </p>
-
-            <DxLoadingPanel Visible="true"
-                            Text=""
-                            IndicatorVisible="false"
-                            IndicatorAreaVisible="false"
-                            IsContentBlocked="false"
-                            ApplyBackgroundShading="false">
-                <div class="d-flex flex-column align-items-center gap-3 py-3">
-                    <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
-                        <span class="visually-hidden">Wird geladen...</span>
-                    </div>
-                    <div class="text-muted small">Weiterleitung wird vorbereitet...</div>
-                </div>
-            </DxLoadingPanel>
         </div>
     </div>
+
+    <div class="home-content">
+        <div class="home-card card shadow border-0">
+            <div class="card-body p-4 p-md-5 text-center">
+
+                <p class="text-muted mb-4" style="font-size: 0.92rem; line-height: 1.7;">
+                    Φffnen Sie ein Ihnen zugesandtes Dokument, indem Sie auf den Link in Ihrer E-Mail klicken
+                    oder den Zugangscode manuell eingeben.
+                </p>
+
+                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+                    <a href="/receiver" class="btn btn-primary px-4 py-2 home-btn-primary">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                            <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-10z"/>
+                        </svg>
+                        Dokument unterzeichnen
+                    </a>
+                </div>
+
+                <div class="mt-4 pt-3 border-top">
+                    <div class="d-flex flex-wrap justify-content-center gap-3">
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" 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>
+                            Sicherer Zugang
+                        </div>
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                            </svg>
+                            Digitale Unterschrift
+                        </div>
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                            </svg>
+                            PDF-Export
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
 </div>
 
 @code {
-    protected override async Task OnAfterRenderAsync(bool firstRender) {
-        if(!firstRender)
-            return;
-
-        await Task.Delay(1200);
-        NavigationManager.NavigateTo("/receiver");
-    }
-}
\ No newline at end of file
+}
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
index b3bb0f19..f9a4dea3 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
@@ -14,7 +14,7 @@ article {
     height: calc(100vh - 36px);
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
@@ -244,6 +244,87 @@ article {
     flex-wrap: wrap;
 }
 
+/* ── Home page ───────────────────────────────────────────────────────────── */
+.home-page-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: calc(100vh - 36px);
+    background: linear-gradient(160deg, #1e2e3e 0%, #2c3e50 40%, #3498db 100%);
+    padding-bottom: 36px;
+}
+
+.home-hero-header {
+    width: 100%;
+    padding: 48px 24px 36px;
+    text-align: center;
+}
+
+.home-hero-header__inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 20px;
+    color: #fff;
+}
+
+.home-hero-header__icon {
+    opacity: 0.90;
+    flex-shrink: 0;
+}
+
+.home-hero-header__title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    color: #fff;
+    letter-spacing: 0.02em;
+}
+
+.home-hero-header__subtitle {
+    font-size: 0.92rem;
+    margin: 4px 0 0;
+    color: rgba(255,255,255,0.75);
+}
+
+.home-content {
+    width: 100%;
+    max-width: 520px;
+    padding: 0 16px;
+}
+
+.home-card {
+    border-radius: 12px !important;
+    overflow: hidden;
+}
+
+.home-btn-primary {
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    border: none;
+    color: #fff;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: filter 0.15s, box-shadow 0.15s;
+    box-shadow: 0 2px 10px rgba(44,62,80,0.30);
+}
+
+.home-btn-primary:hover {
+    filter: brightness(1.12);
+    box-shadow: 0 4px 16px rgba(44,62,80,0.40);
+    color: #fff;
+}
+
+.home-feature-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(52,152,219,0.10);
+    color: #3498db;
+    border: 1px solid rgba(52,152,219,0.25);
+    border-radius: 20px;
+    padding: 4px 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
 /* ── Footer ──────────────────────────────────────────────────────────────── */
 .receiver-footer {
     position: fixed;