diff --git a/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/Header.razor b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/Header.razor
new file mode 100644
index 00000000..9cb7c979
--- /dev/null
+++ b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/Header.razor
@@ -0,0 +1,21 @@
+<nav class="navbar header-navbar p-0">
+    <button class="navbar-toggler bg-primary d-block" @onclick="OnToggleClick">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="ms-3 fw-bold title pe-4">EnvelopeGenerator.ReceiverUI</div>
+</nav>
+
+@code {
+    [Parameter] public bool ToggleOn { get; set; }
+    [Parameter] public EventCallback<bool> ToggleOnChanged { get; set; }
+
+    async Task OnToggleClick() => await Toggle();
+
+    async Task Toggle(bool? value = null) {
+        var newValue = value ?? !ToggleOn;
+        if(ToggleOn != newValue) {
+            ToggleOn = newValue;
+            await ToggleOnChanged.InvokeAsync(ToggleOn);
+        }
+    }
+}
\ No newline at end of file
diff --git a/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/MainLayout.razor b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/MainLayout.razor
index 0fd1b20e..6473aa87 100644
--- a/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/MainLayout.razor
+++ b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/MainLayout.razor
@@ -1,9 +1,27 @@
-@inherits LayoutComponentBase
+@using EnvelopeGenerator.WebUI.Client.Services;
+@inherits LayoutComponentBase
 
-@Body
-
-<div id="blazor-error-ui">
-    An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
+<div class="page">
+<main>
+        <article class="content">
+            @Body
+        </article>
+    </main>
+    <footer class="receiver-footer">
+        <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>
+    </footer>
 </div>
+
+@code {
+    [Inject] HttpClient Http { get; set; }
+    List<string> RequiredFonts = new() {
+        "opensans.ttf"
+    };
+
+    protected async override Task OnInitializedAsync() {
+        await FontLoader.LoadFonts(Http, RequiredFonts);
+        await base.OnInitializedAsync();
+    }
+}
\ No newline at end of file
diff --git a/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/NavMenu.razor b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/NavMenu.razor
new file mode 100644
index 00000000..fa17f626
--- /dev/null
+++ b/EnvelopeGenerator.WebUI/EnvelopeGenerator.WebUI.Client/Layout/NavMenu.razor
@@ -0,0 +1,46 @@
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">EnvelopeGenerator.ReceiverUI</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+    <nav class="flex-column">
+        @*
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="documentviewer">
+                <span class="oi oi-plus" aria-hidden="true"></span> Document Viewer (JS-Based)
+            </NavLink>
+        </div>
+        *@
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="receiver">
+                <span class="oi oi-plus" aria-hidden="true"></span> Empfänger-UI
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="sender">
+                <span class="oi oi-plus" aria-hidden="true"></span> Umschlag-UI
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}
\ No newline at end of file