diff --git a/HaKolloquium/src/css/site.css b/HaKolloquium/src/css/site.css
index f949f63..d87e60f 100644
--- a/HaKolloquium/src/css/site.css
+++ b/HaKolloquium/src/css/site.css
@@ -7,12 +7,14 @@
   src: url("../fonts/LinBiolinum_R.woff") format("woff");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Biolinum";
   src: url("../fonts/LinBiolinum_RI.woff") format("woff");
   font-weight: normal;
+  font-display: swap;
   font-style: italic;
 }
 
@@ -20,6 +22,7 @@
   font-family: "Biolinum";
   src: url("../fonts/LinBiolinum_RB.woff") format("woff");
   font-weight: bold;
+  font-display: swap;
   font-style: normal;
 }
 
@@ -27,6 +30,7 @@
   font-family: "Libertine";
   src: url("../fonts/LinLibertine_R.woff") format("woff");
   font-weight: normal;
+  font-display: swap;
   font-style: normal;
 }
 
@@ -34,6 +38,7 @@
   font-family: "Libertine";
   src: url("../fonts/LinLibertine_RI.woff") format("woff");
   font-weight: normal;
+  font-display: swap;
   font-style: italic;
 }
 
@@ -41,6 +46,7 @@
   font-family: "Libertine";
   src: url("../fonts/LinLibertine_RB.woff") format("woff");
   font-weight: bold;
+  font-display: swap;
   font-style: normal;
 }
 
diff --git a/HaKolloquium/vite.config.ts b/HaKolloquium/vite.config.ts
index cd22abe..76ae7df 100644
--- a/HaKolloquium/vite.config.ts
+++ b/HaKolloquium/vite.config.ts
@@ -4,7 +4,6 @@ const { resolve } = require('path')
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  assetsInclude: ['**/*.pdf'],
   build: {
     assetsInlineLimit: 0,
     // lib: {
diff --git a/HaWeb/.vscode/launch.json b/HaWeb/.vscode/launch.json
new file mode 100644
index 0000000..6deccab
--- /dev/null
+++ b/HaWeb/.vscode/launch.json
@@ -0,0 +1,35 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/bin/Debug/net6.0/HaWeb.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "stopAtEntry": false,
+            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/HaWeb/.vscode/tasks.json b/HaWeb/.vscode/tasks.json
new file mode 100644
index 0000000..b20d816
--- /dev/null
+++ b/HaWeb/.vscode/tasks.json
@@ -0,0 +1,41 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/HaWeb.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/HaWeb.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "--project",
+                "${workspaceFolder}/HaWeb.csproj"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/HaWeb/Controllers/EditionController.cs b/HaWeb/Controllers/EditionController.cs
new file mode 100644
index 0000000..b3a2488
--- /dev/null
+++ b/HaWeb/Controllers/EditionController.cs
@@ -0,0 +1,40 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using HaWeb.Models;
+
+namespace HaWeb.Controllers;
+
+[Route("Edition/[action]")]
+[Route("Edition/[action]/Index")]
+public class EditionController : Controller
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    public IActionResult Error()
+    {
+        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+    }
+    public IActionResult Kontakt()
+    {
+        return View();
+    }
+
+    public IActionResult Mitwirkende()
+    {
+        return View();
+    }
+
+    public IActionResult Richtlinien()
+    {
+        return View();
+    }
+
+    public IActionResult Werkausgabe()
+    {
+        return View();
+    }
+
+    public IActionResult Editionsgeschichte()
+    {
+        return View();
+    }
+}
\ No newline at end of file
diff --git a/HaWeb/Controllers/SearchController.cs b/HaWeb/Controllers/SearchController.cs
index cd86337..0f8903a 100644
--- a/HaWeb/Controllers/SearchController.cs
+++ b/HaWeb/Controllers/SearchController.cs
@@ -7,6 +7,9 @@ namespace HaWeb.Controllers;
 public class SearchController : Controller
 {
 
+    [Route("")]
+    [Route("Home")]
+    [Route("Home/Index")]
     public IActionResult Index()
     {
         return View();
diff --git a/HaWeb/HaWeb.csproj b/HaWeb/HaWeb.csproj
index a278e52..410cb5c 100644
--- a/HaWeb/HaWeb.csproj
+++ b/HaWeb/HaWeb.csproj
@@ -6,15 +6,25 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
   <ItemGroup>
-    <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
+     <!-- exclude all Content items from being watched -->
+    <Content Update="wwwroot/css/site.css" Watch="false" />
+</ItemGroup>
+  <ItemGroup>
+    <Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.css" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.cs" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.cshtml" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.csproj" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+  </ItemGroup>
+  <ItemGroup>
     <UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
     <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
   </ItemGroup>
-  <ItemGroup>
-    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.357" />
-  </ItemGroup>
   <Target Name="Tailwind" BeforeTargets="Build">
     <Exec Command="npm run css:build" />
   </Target>
+  <ItemGroup>
+    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.357" />
+  </ItemGroup>
 
 </Project>
diff --git a/HaWeb/Helpers/LinkHelper.cs b/HaWeb/Helpers/LinkHelper.cs
new file mode 100644
index 0000000..d0aca03
--- /dev/null
+++ b/HaWeb/Helpers/LinkHelper.cs
@@ -0,0 +1,31 @@
+
+// Finds the correct link adress to any Page, Letter, or Comment, and sets Links as active if neccessary
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Threading.Tasks;
+
+namespace AuthoringTagHelpers.TagHelpers
+{
+    public class MenuLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+
+    public class LetterLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+
+    public class CommentLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+}
\ No newline at end of file
diff --git a/HaWeb/Program.cs b/HaWeb/Program.cs
index 8b26de4..50d94e3 100644
--- a/HaWeb/Program.cs
+++ b/HaWeb/Program.cs
@@ -2,6 +2,7 @@ var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddControllersWithViews();
+builder.Services.AddHttpContextAccessor();
 // builder.Services.AddWebOptimizer();
 
 var app = builder.Build();
@@ -16,17 +17,8 @@ if (!app.Environment.IsDevelopment())
 }
 
 // app.UseWebOptimizer();
-
-app.UseStaticFiles();
-
-app.UseRouting();
-
 app.UseAuthorization();
-
-app.MapControllerRoute(
-    name: "default",
-    pattern: "{controller=Search}/{action=Index}/{id?}");
-
-
-
+app.UseStaticFiles();
+app.UseRouting();
+app.MapControllers();
 app.Run();
diff --git a/HaWeb/Views/Edition/Editionsgeschichte.cshtml b/HaWeb/Views/Edition/Editionsgeschichte.cshtml
new file mode 100644
index 0000000..e69de29
diff --git a/HaWeb/Views/Edition/Kontakt.cshtml b/HaWeb/Views/Edition/Kontakt.cshtml
new file mode 100644
index 0000000..ad5818c
--- /dev/null
+++ b/HaWeb/Views/Edition/Kontakt.cshtml
@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Kontakt";
+    ViewData["SEODescription"] = "Johann Georg Hamann: Kommentierte Briefausgabe, Hg. v. Leonard Keidel und Janina Reibold. Durchsuchbare Online-Ausgabe der Briefe von und an Johann Georg Hamann.";
+}
+
+Hello!
\ No newline at end of file
diff --git a/HaWeb/Views/Edition/Mitwirkende.cshtml b/HaWeb/Views/Edition/Mitwirkende.cshtml
new file mode 100644
index 0000000..bf57c52
--- /dev/null
+++ b/HaWeb/Views/Edition/Mitwirkende.cshtml
@@ -0,0 +1 @@
+Hello from Mitwirkende!
\ No newline at end of file
diff --git a/HaWeb/Views/Edition/Richtlinien.cshtml b/HaWeb/Views/Edition/Richtlinien.cshtml
new file mode 100644
index 0000000..e69de29
diff --git a/HaWeb/Views/Edition/Werkausgabe.cshtml b/HaWeb/Views/Edition/Werkausgabe.cshtml
new file mode 100644
index 0000000..e69de29
diff --git a/HaWeb/Views/Shared/_Layout.cshtml b/HaWeb/Views/Shared/_Layout.cshtml
index 0017503..eb4b6a4 100644
--- a/HaWeb/Views/Shared/_Layout.cshtml
+++ b/HaWeb/Views/Shared/_Layout.cshtml
@@ -18,10 +18,10 @@
 
 </head>
 
-<body>
+<body class="w-100 h-100">
     @await Html.PartialAsync("/Views/Shared/_Menu.cshtml")
 
-    <div class="container">
+    <div class="w-full desktop:max-w-screen-desktop mx-auto">
         <main role="main" class="pb-3">
             @RenderBody()
         </main>
diff --git a/HaWeb/Views/Shared/_Menu.cshtml b/HaWeb/Views/Shared/_Menu.cshtml
index 201884c..b123474 100644
--- a/HaWeb/Views/Shared/_Menu.cshtml
+++ b/HaWeb/Views/Shared/_Menu.cshtml
@@ -1,15 +1,15 @@
 <header class="sticky w-100 font-serif mb-6">
-    <nav class="flex flex-row w-100 bg-slate-50 border-t-[5px] border-gray-300 py-3 px-3 lg:px-8 flex-wrap">
+    <nav class="flex flex-row w-100 bg-slate-50 border-t-[5px] border-gray-300 py-3 px-3 desktop:px-8 flex-wrap">
         <a href="/" class="text-xl xl:text-3xl grow-0 shrink-0 text-black hover:text-black ">
             <img src="/favicon.ico" class="inline-block w-8 h-8 xl:w-12 xl:h-12 mr-2 p-1 border border-gray-900 border-t-gray-200 border-l-gray-200 " alt="HKB-Logo" loading="lazy" />
-                <span class="sm:hidden">J. G. Hamann: Kommentierte Briefausgabe</span> 
+                <span class="sm:hidden">Hamann: Komm. Briefausgabe</span> 
                 <span class="hidden sm:inline md:hidden">Johan Georg Hamann: Kommentierte Briefausgabe</span> 
                 <span class="hidden md:inline align-baseline">Johann Georg Hamann: Kommentierte Briefausgabe (&#x200A;H&#x200A;K&#x200A;B&#x200A;)</span>
         </a>
         <div class="flex grow shrink">
 
         </div>
-        <div class="ha-menusymbol inline-block lg:hidden pr-3 align-bottom">
+        <div class="ha-menusymbol inline-block desktop:hidden pr-3 align-bottom">
             <button id="openmenubutton">
                 <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                     aria-labelledby="hamburgerIconTitle">
@@ -26,19 +26,35 @@
                 </svg>
             </button>
         </div>
-        <div class="topnav" id="topnav">
+        <div class="ha-topnav " id="ha-topnav">
             <a class="" href="/">
                 Suche & Briefauswahl
             </a>
-            <a class="" href="/kolloquien.html">
+            <a class="" href="/Briefe/1">
                 Briefansicht
             </a>
-            <a class="" href="/acta-baende.html">
-                Register
-            </a>
-            <a class="" href="/studien.html">
+            <div class="ha-topnav-dropdown">
+                <a class="cursor-default ha-menu-arrowsymbol">
+                    Register
+                </a>
+                <div class="ha-topnav-dropdown-content">
+                    <a class="" href="/Register/Register">Register</a>
+                    <a class="" href="/Register/Bibelstellenregister">Bibelstellenregister</a>
+                    <a class="" href="/Register/Forschungsbibliographie">Forschungsbibliographie</a>
+                </div>
+            </div>
+             <div class="ha-topnav-dropdown">
+                <a class="cursor-default ha-menu-arrowsymbol">
                 Edition
-            </a>
+                </a>
+                <div class="ha-topnav-dropdown-content">
+                    <a class="" href="/Edition/Kontakt">Kontakt</a>
+                    <a class="" href="/Edition/Mitwirkende">Mitwirkende</a>
+                    <a class="" href="/Edition/Richtlinien">Editionsrichtlinien</a>
+                    <a class="" href="/Edition/Editionsgeschichte">Editionsgeschichte</a>
+                    <a class="" href="/Edition/Werkausgabe">Werkausgabe</a>
+                </div>
+            </div>
         </div>
     </nav>
 </header>
@@ -46,8 +62,8 @@
 <script>
 
     const _openmenu = function () {
-        var x = document.getElementById("topnav");
-        if (x !== null) x.className += " responsive";
+        var x = document.getElementById("ha-topnav");
+        if (x !== null) x.className += " ha-topnav-collapsed";
         let oldbutton = document.getElementById("openmenubutton");
         if (oldbutton !== null) oldbutton.setAttribute('class', 'hidden');
         let newbutton = document.getElementById("closemenubutton");
@@ -55,8 +71,8 @@
     }
 
     const _closemenu = function () {
-        var x = document.getElementById("topnav");
-        if (x !== null) x.className = "topnav";
+        var x = document.getElementById("ha-topnav");
+        if (x !== null) x.className = "ha-topnav";
         let oldbutton = document.getElementById("closemenubutton");
         if (oldbutton !== null) oldbutton.setAttribute('class', 'hidden');
         let newbutton = document.getElementById("openmenubutton");
@@ -64,9 +80,9 @@
 
     }
 
-    const _markactive = function () {
+    const _markactive = function (element) {
         // Marks links as active
-        var all_links = this.getElementsByTagName("a"),
+        var all_links = element.getElementsByTagName("a"),
             i = 0, len = all_links.length,
             full_path = location.href.split('#')[0]; //Ignore hashes
 
@@ -80,5 +96,6 @@
 
     document.getElementById("openmenubutton").addEventListener('click', _openmenu);
     document.getElementById("closemenubutton").addEventListener('click', _closemenu);
+    _markactive(document.getElementById("ha-topnav"));
 
 </script>
diff --git a/HaWeb/Views/_ViewImports.cshtml b/HaWeb/Views/_ViewImports.cshtml
index b308778..2a0df67 100644
--- a/HaWeb/Views/_ViewImports.cshtml
+++ b/HaWeb/Views/_ViewImports.cshtml
@@ -1,3 +1,5 @@
 @using HaWeb
 @using HaWeb.Models
+@using AuthoringTagHelpers
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, AuthoringTagHelpers
\ No newline at end of file
diff --git a/HaWeb/tailwind.config.js b/HaWeb/tailwind.config.js
index 97eaf8b..bf89148 100644
--- a/HaWeb/tailwind.config.js
+++ b/HaWeb/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     screens: {
       'sm': '786px',
       'md': '1024px',
-      'lg': '1312px',
+      'desktop': '1190px',
       'xl': '1440px',
       '2xl': '1680px',    
     },
diff --git a/HaWeb/wwwroot/css/output.css b/HaWeb/wwwroot/css/output.css
index cbadca5..da6b3b3 100644
--- a/HaWeb/wwwroot/css/output.css
+++ b/HaWeb/wwwroot/css/output.css
@@ -468,148 +468,280 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 786px) {
-  .container {
-    max-width: 786px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1312px) {
-  .container {
-    max-width: 1312px;
-  }
-}
-
-@media (min-width: 1440px) {
-  .container {
-    max-width: 1440px;
-  }
-}
-
-@media (min-width: 1680px) {
-  .container {
-    max-width: 1680px;
-  }
-}
-
 body {
+  height: 100%;
+  width: 100%;
   font-size: 1rem;
   line-height: 1.5rem;
 }
 
-@media (min-width: 1312px) {
+@media (min-width: 1190px) {
   body {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
 }
 
-p {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-h1 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-}
-
-@media (min-width: 1680px) {
-  h1 {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    font-weight: 400;
-  }
-}
-
-h2 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@media (min-width: 1680px) {
-  h2 {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-a {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-a:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.topnav {
-  margin-bottom: 0.25rem;
+.ha-topnav {
   display: flex;
 }
 
 @media (min-width: 1024px) {
-  .topnav {
+  .ha-topnav {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
 }
 
-@media (min-width: 1312px) {
-  .topnav {
+@media (min-width: 1190px) {
+  .ha-topnav {
     flex-shrink: 0;
     flex-grow: 0;
     place-self: end;
   }
 }
 
+@media (min-width: 1440px) {
+  .ha-topnav {
+    margin-bottom: 0.25rem;
+  }
+}
+
 @media (min-width: 1680px) {
-  .topnav {
+  .ha-topnav {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 }
 
-.topnav a {
+.ha-topnav a {
+  margin-right: 1.25rem;
   display: none;
-  padding-right: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-@media (min-width: 1312px) {
-  .topnav a {
-    display: inline;
+.ha-topnav a:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav a {
+    display: inline-block;
   }
 }
 
 @media (min-width: 1680px) {
-  .topnav a {
-    padding-right: 1.5rem;
+  .ha-topnav a {
+    margin-right: 1.5rem;
   }
 }
 
+.ha-topnav-dropdown {
+  display: none;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav-dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    display: block;
+  }
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content {
+  right: 0px;
+  z-index: 50;
+  margin-right: 1.5rem;
+  display: none;
+  min-width: 130px;
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    position: absolute;
+  }
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content a {
+  margin-right: 0px;
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content .active {
+  border-style: none;
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+/* TODO INLINE .ha-container {
+        @apply max-w-[1280px]
+    } 
+    
+    .ha-maincolumn {
+        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
+    } 
+    
+    p {
+        @apply my-3
+    }
+
+    h1 {
+        @apply font-bold text-xl 2xl:font-normal 2xl:text-4xl
+    }
+
+    h2 {
+        @apply text-lg 2xl:text-2xl
+    } */
+
+/* Classes from .NET */
+
+/* Classes from Javascript */
+
 .active {
+  pointer-events: none;
+  --tw-text-opacity: 1 !important;
+  color: rgb(216 0 0 / var(--tw-text-opacity)) !important;
+}
+
+.active:hover {
   --tw-text-opacity: 1;
   color: rgb(216 0 0 / var(--tw-text-opacity));
 }
 
-.topnav.responsive {
+.ha-topnav a.active {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  text-underline-offset: 2px;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav a.active {
+    border-bottom-width: 4px;
+    -webkit-text-decoration-line: none;
+            text-decoration-line: none;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed {
   margin-top: 1rem;
+  display: block;
+  height: 100%;
+  width: 100%;
   font-size: 1rem;
   line-height: 1.5rem;
 }
 
+@media (min-width: 1024px) {
+  .ha-topnav.ha-topnav-collapsed {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed {
+    margin-top: 0px;
+    display: flex;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+
+@media (min-width: 1680px) {
+  .ha-topnav.ha-topnav-collapsed {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed a {
+  clear: both;
+  display: block;
+  width: 100%;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-align: left;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed a {
+    display: inline-block;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+  display: block;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+    display: inline-block;
+  }
+
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    display: block;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+  display: block;
+  border-style: none;
+  padding-top: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    display: none;
+    border-bottom-width: 1px;
+    padding-top: 0.5rem;
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
 .static {
   position: static;
 }
@@ -619,6 +751,11 @@ a:hover {
   position: sticky;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -643,6 +780,10 @@ a:hover {
   height: 2rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -663,6 +804,10 @@ a:hover {
   flex-grow: 1;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -754,6 +899,7 @@ a:hover {
 @font-face {
     font-family: 'Biolinum';
     src: url('../fonts/LinBiolinum_R.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -761,6 +907,7 @@ a:hover {
 @font-face {
     font-family: 'Libertine';
     src: url('../fonts/LinLibertine_R.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -772,6 +919,8 @@ a:hover {
 
   src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
 
+  font-display: swap;
+
   font-weight: normal;
 
   font-style: normal;
@@ -782,6 +931,8 @@ a:hover {
 
   src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
 
+  font-display: swap;
+
   font-weight: normal;
 
   font-style: normal;
@@ -792,6 +943,8 @@ a:hover {
 
   src: url('../fonts/LinBiolinum_RI.woff') format('woff');
 
+  font-display: swap;
+
   font-weight: normal;
 
   font-style: italic;
@@ -802,6 +955,8 @@ a:hover {
 
   src: url('../fonts/LinBiolinum_RB.woff') format('woff');
 
+  font-display: swap;
+
   font-weight: bold;
 
   font-style: normal;
@@ -812,6 +967,8 @@ a:hover {
 
   src: url('../fonts/LinLibertine_RI.woff') format('woff');
 
+  font-display: swap;
+
   font-weight: normal;
 
   font-style: italic;
@@ -822,6 +979,8 @@ a:hover {
 
   src: url('../fonts/LinLibertine_RB.woff') format('woff');
 
+  font-display: swap;
+
   font-weight: bold;
 
   font-style: normal;
@@ -832,6 +991,8 @@ a:hover {
 
   src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
 
+  font-display: swap;
+
   font-weight: normal;
 
   font-style: normal;
@@ -842,18 +1003,19 @@ body {
   background-repeat:repeat;
 }
 
-ul {
-  list-style-type:circle;
-}
+/* ul {
+    list-style-type:circle;
+} */
 
-.ha-maincolumn {
-  max-width:1280px;
-}
-
-.ha-maincolumn p {
-  -webkit-hyphens:auto;
-      -ms-hyphens:auto;
-          hyphens:auto;
+.ha-menu-arrowsymbol::after {
+  display: inline-block;
+  margin-left: 0.2em;
+  vertical-align: 0.2em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
 }
 
 .ha-menusymbol {
@@ -872,19 +1034,6 @@ ul {
   color:#000000;
 }
 
-@media screen and (max-width:1344px) {
-  .topnav.responsive {
-    display:block !important;
-    width:100%;
-  }
-
-  .topnav.responsive a {
-    display:block;
-    text-align:left;
-    clear:both;
-  }
-}
-
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -910,12 +1059,16 @@ ul {
   }
 }
 
-@media (min-width: 1312px) {
-  .lg\:hidden {
+@media (min-width: 1190px) {
+  .desktop\:hidden {
     display: none;
   }
 
-  .lg\:px-8 {
+  .desktop\:max-w-screen-desktop {
+    max-width: 1190px;
+  }
+
+  .desktop\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
diff --git a/HaWeb/wwwroot/css/site.css b/HaWeb/wwwroot/css/site.css
index bfcde0c..ce269a6 100644
--- a/HaWeb/wwwroot/css/site.css
+++ b/HaWeb/wwwroot/css/site.css
@@ -8,6 +8,7 @@
 @font-face {
     font-family: 'Biolinum';
     src: url('../fonts/LinBiolinum_R.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -15,6 +16,7 @@
 @font-face {
     font-family: 'Libertine';
     src: url('../fonts/LinLibertine_R.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -24,6 +26,7 @@
 @font-face {
     font-family: 'Biolinum';
     src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -31,6 +34,7 @@
 @font-face {
     font-family: 'Libertine';
     src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
@@ -38,6 +42,7 @@
 @font-face {
     font-family: 'Biolinum';
     src: url('../fonts/LinBiolinum_RI.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: italic;
 }
@@ -45,6 +50,7 @@
 @font-face {
     font-family: 'Biolinum';
     src: url('../fonts/LinBiolinum_RB.woff') format('woff');
+    font-display: swap;
     font-weight: bold;
     font-style: normal;
 }
@@ -52,6 +58,7 @@
 @font-face {
     font-family: 'Libertine';
     src: url('../fonts/LinLibertine_RI.woff') format('woff');
+    font-display: swap;
     font-weight: normal;
     font-style: italic;
 }
@@ -59,6 +66,7 @@
 @font-face {
     font-family: 'Libertine';
     src: url('../fonts/LinLibertine_RB.woff') format('woff');
+    font-display: swap;
     font-weight: bold;
     font-style: normal;
 }
@@ -66,15 +74,56 @@
 @font-face {
     font-family: 'Playfair';
     src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
+    font-display: swap;
     font-weight: normal;
     font-style: normal;
 }
 
 @layer components {
     body {
-        @apply text-base lg:text-lg
+        @apply text-base desktop:text-lg w-full h-full
     }
 
+    .ha-topnav {
+        @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1
+    }
+
+    .ha-topnav a {
+        @apply hidden text-gray-700 hover:text-gray-900  desktop:inline-block mr-5 2xl:mr-6
+    }
+
+    .ha-topnav-dropdown {
+        @apply hidden desktop:relative desktop:inline-block
+    }
+
+    .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+        @apply desktop:block
+    }
+
+    .ha-topnav-dropdown .ha-topnav-dropdown-content {
+        @apply hidden mr-6 pt-1 right-0 desktop:absolute bg-slate-50 min-w-[130px] shadow-md border-gray-400 border-b-2 z-50
+    }
+
+    .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+        @apply pl-2 pr-3 py-2 block mr-0
+    }
+
+    .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
+        @apply border-none
+    }
+
+    .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
+        @apply bg-gray-100
+    } 
+
+    /* TODO INLINE .ha-container {
+        @apply max-w-[1280px]
+    } 
+    
+    .ha-maincolumn {
+        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
+    } 
+    
     p {
         @apply my-3
     }
@@ -85,30 +134,46 @@
 
     h2 {
         @apply text-lg 2xl:text-2xl
-    }
+    } */
 
-    a {
-        @apply text-gray-700 hover:text-gray-900
-    }
-
-    .topnav {
-        @apply flex lg:grow-0 lg:shrink-0 md:text-lg 2xl:text-xl lg:place-self-end mb-1
-    }
-
-    .topnav a {
-        @apply hidden lg:inline pr-5 2xl:pr-6
-    }
+    /* Classes from .NET */
 
+    /* Classes from Javascript */
     .active {
+        @apply !text-hamannHighlight pointer-events-none
+    }
+
+    .active:hover {
         @apply text-hamannHighlight
     }
 
-    .ha-maincolumn {
-        @apply bg-slate-50 mx-auto p-2 md:p-4 lg:px-16 lg:py-12 xl:pr-80 text-lg font-serif
+    .ha-topnav a.active {
+        @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4
     }
 
-    .topnav.responsive {
-        @apply mt-4 text-base;
+    .ha-topnav.ha-topnav-collapsed {
+        @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl
+    }
+
+    .ha-topnav.ha-topnav-collapsed a {
+        @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit
+    }
+
+    
+    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+        @apply block desktop:inline-block
+    }
+
+    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+        @apply desktop:block
+    }
+
+    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+        @apply block shadow-none border-none pt-0 desktop:hidden desktop:shadow-md desktop:border-b desktop:pt-2
+    }
+
+    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+        @apply py-1 desktop:py-2
     }
 }
 
@@ -117,16 +182,19 @@ body {
     background-repeat:repeat;
 }
 
-ul {
+/* ul {
     list-style-type:circle;
-}
+} */
 
-.ha-maincolumn {
-    max-width:1280px;
-}
-
-.ha-maincolumn p {
-    hyphens:auto;
+.ha-menu-arrowsymbol::after {
+    display: inline-block;
+    margin-left: 0.2em;
+    vertical-align: 0.2em;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
 }
 
 .ha-menusymbol {
@@ -143,17 +211,4 @@ ul {
     stroke-linejoin:miter;
     fill:none;
     color:#000000;
-}
-
-@media screen and (max-width:1344px) {
-    .topnav.responsive {
-        display:block !important;
-        width:100%;
-    }
-
-    .topnav.responsive a {
-        display:block;
-        text-align:left;
-        clear:both;
-    }
 }
\ No newline at end of file