diff --git a/docs/30_Usage.md b/docs/30_Usage.md
index 9e7d68a40e48633aa9bb008704e77dfd87e8cb50..03d404e909a37d21c2d02cf47fe0fb8e2e7513e3 100644
--- a/docs/30_Usage.md
+++ b/docs/30_Usage.md
@@ -13,11 +13,18 @@ Click an email to view details of it including header and body.
 
 ![Screenshot: Show details of selected Email](images/screenshot_show_email.png)
 
-If an html email was selected then you get an additional button to preview as html.
+If an html email was detected then 
+
+* you can switch between html view and source code
+* you get an additional button to preview as html in full screen
 
 ![Screenshot: Show details of an html message](images/screenshot_show_html_email.png)
 
-If an html email was detected then you get an additional button to preview as html.
+You can turn on and of the header messages and swtitch between html or source view. Any switching will be stored in the localstorage of your webbrowser to get the same mode for the next request.
+
+When using full screen mode you get a back button:
+
+![Screenshot: Show html message in fullscreen](images/screenshot_show_html_email_fullscreen.png)
 
 ### Delete emails
 
diff --git a/docs/images/screenshot_list_emails.png b/docs/images/screenshot_list_emails.png
index c6bde461c9c155a13cc03a5b682e3a0ff7cccf89..7121880ac7900365c1405584700efea5dfe558d6 100644
Binary files a/docs/images/screenshot_list_emails.png and b/docs/images/screenshot_list_emails.png differ
diff --git a/docs/images/screenshot_show_email.png b/docs/images/screenshot_show_email.png
index 34d0eb4633a012043e57fac4b65879fd74ca16a4..31a2b64350738e8cd9cb9d13b767019c935977a5 100644
Binary files a/docs/images/screenshot_show_email.png and b/docs/images/screenshot_show_email.png differ
diff --git a/docs/images/screenshot_show_html_email.png b/docs/images/screenshot_show_html_email.png
index e2b5f08a93f92e64ef8cc211d0cab6b1552c5bbe..8ee83c75b8531c85840492e992cd1b2d83771a88 100644
Binary files a/docs/images/screenshot_show_html_email.png and b/docs/images/screenshot_show_html_email.png differ
diff --git a/docs/images/screenshot_show_html_email_fullscreen.png b/docs/images/screenshot_show_html_email_fullscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..8458966e28976ffcc4524bd3d68e16d4aaf44191
Binary files /dev/null and b/docs/images/screenshot_show_html_email_fullscreen.png differ
diff --git a/docs/style.css b/docs/style.css
index b5afea45f18c3f10ab029eaca933088ee78d308d..90a0bc938f147608a1d4fd11952e4825f076862c 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,6 +1,6 @@
 /*
     override css elements of daux.io blue theme
-    version 2024-10-24
+    version 2024-10-31
 */
 :root {
     /* Axels Overrides */
@@ -19,8 +19,9 @@
     --sidebar-background: var(--body-background);
     --sidebar-border-color: none;
     --sidebar-link-active-background: #f0f4f6;
+    --toc--inner-border-color: none;
     /* Axels custom values */
-    --axel_bg-toc: var(--body-background);
+    --axel_bg-toc: #f8fafa;
     --axel_bg-toc-head: #f8f8f8;
     --axel_brand-background: none;
     --axel_brand-pre-background: rgb(255, 0, 51);
@@ -35,8 +36,8 @@
     --axel_h2-hero-bottom: 2px solid #912;
     --axel_h3: #333;
     --axel_h3-bottom: 0px solid #ddd;
-    --axel_h4: #478;
-    --axel_h5: #699;
+    --axel_h4: #666;
+    --axel_h5: #888;
     --axel_hero_bg: #faf8f6;
     --axel_img-border: 2px dashed #ccc;
     --axel_nav-bg: #fcfcfc;
@@ -60,6 +61,7 @@
     --sidebar-background: var(--body-background);
     --sidebar-border-color: none;
     --sidebar-link-active-background: #333;
+    --sidebar-link-color: var(--link-color);
     /* Axels custom values */
     --axel_bg-toc: var(--body-background);
     --axel_bg-toc-head: #333;
@@ -126,18 +128,25 @@ a.Brand {
 
 /* ---------- page content ---------- */
 .s-content {
-    padding-top: 1em;
+    padding-top: 6em;
 }
 
+/**
+h1::before{color: #aaa;content: 'h1: ';}
+h2::before{color: #aaa;content: 'h2: ';}
+h3::before{color: #aaa;content: 'h3: ';}
+h4::before{color: #aaa;content: 'h4: ';}
+h5::before{color: #aaa;content: 'h5: ';}
+h6::before{color: #aaa;content: 'h6: ';}
+*/
+h2::before{color: #888;content: ': : ';}
+h3::before{color: #ccc;content: '> ';}
+h4::before{color: #ccc;content: '_ ';}
+
 .s-content h1::before{
-    background: #fee;
-    border: 3px double #f00;
     color: #f00;
     content: 'FEHLER: Keine Überschrift 1 in einer Markdown-Datei für Daux verwenden! Mit H2 beginnen!';
-    display: block;
-    font-size: 50%;
-    padding: 0.3em;
-    margin-bottom: 2em;
+    content: '!! h1 !! ';
 }
 
 .s-content h1 {
@@ -159,8 +168,14 @@ a.Brand {
     border-bottom: var(--axel_h2-bottom);
 }
 
-h1:first-of-type {
+.Page__header > h1:first-of-type {
     margin-top: 0em;
+    margin-left: -1em;
+    padding-left: 1em;
+    position: fixed;
+    min-width: 100%;
+    background: var(--body-background);
+    box-shadow: 0 2em 1em var(--body-background);
 }
 
 h2:first-of-type {
@@ -211,6 +226,8 @@ ul.TableOfContents a{
 }
 .s-content pre {
     background: var(--axel_pre-background);
+    border-radius: 0.5em;
+    padding: 1rem;
 }
 
 /* FIX smaller fnt size in tables */
@@ -262,14 +279,6 @@ div.hero h2 {
 }
 
 /* ---------- TOC ---------- */
-@media(min-width:1700px) {
-    .TableOfContentsContainer {
-        position: fixed;
-        right: 2em;
-        top: 1em;
-        height: 96%;
-    }
-}
 
 .TableOfContentsContainer {
     background-color: var(--axel_bg-toc);
@@ -279,9 +288,11 @@ div.hero h2 {
 .s-content .TableOfContentsContainer h4 {
     background-color: var(--axel_bg-toc-head);
     border-top-left-radius: 1em;
+    border-bottom: 2px solid var(--axel_bg-toc-bottom-border);
     font-size: 1.1em;
     margin: 0;
     padding: 0.3em;
+    display: none;
 }
 
 .TableOfContentsContainer__content {
@@ -300,6 +311,16 @@ ul.TableOfContents ul {
     text-decoration: underline;
 }
 
+@media(min-width:1700px) {
+    .TableOfContentsContainer {
+        background: none;
+        position: fixed;
+        right: 2em;
+        top: 4em;
+        height: 90%;
+    }
+}
+
 /* ----- Icons on links --- */
 
 .EditOn a::before{