diff --git a/Content.html b/Content.html
index 79f5c0e..7732514 100644
--- a/Content.html
+++ b/Content.html
@@ -121,6 +121,41 @@
         <!--[if lt IE 9]>
 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
 <![endif]-->
+        <script>
+        // If we have a hash we disable history scrolling restoration and
+        // really scroll into view.
+        var c = window.location.hash;
+        if (c.length != 0) {
+            history.scrollRestoration = "manual"
+        }
+
+        document.addEventListener('DOMContentLoaded', function(event) {
+            var c = window.location.hash;
+            var e = document.getElementById(c.replace("#", ""));
+            if (e != null) {
+                e.scrollIntoView();
+            }
+        });
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function (event) {
+                var P = "#main-markdown > header"
+                var noAnchorHeaders = document.querySelectorAll(`${P} h1, ${P} h2, ${P} h3, ${P} h4, ${P} h5, ${P} h6`)
+                for (var k = 0; k < noAnchorHeaders.length; k++) {
+                    noAnchorHeaders[k].classList.add("no-anchor")
+                }
+
+                anchors.options = {
+                    placement: 'left',
+                    visible: 'always',
+                    icon: '§'
+                };
+                var P = "#main-markdown"
+                anchors.add(`${P} h1:not(.no-anchor),${P} h2:not(.no-anchor),${P} h3:not(.no-anchor),${P} h4:not(.no-anchor),${P} h5:not(.no-anchor),${P} h6:not(.no-anchor)`);
+            });
+        </script>
         <script>
             function openSideNav() {
                 expandWidth = 300;
@@ -131,11 +166,14 @@
                 if (m.offsetLeft - expandWidth < 0) {
                     m.style.marginLeft = `${expandWidth + 40}px`
                 }
+            
+                document.getElementById("nav-content-inline").style.display = "none";
             }
 
             function closeSideNav() {
                 document.getElementById("side-nav").style.width = "0";
                 document.getElementById("main-markdown").style.marginLeft = null;
+                document.getElementById("nav-content-inline").style.display = "initial";
             }
 
             var EXPAND_ALL = "⊞";
@@ -167,22 +205,34 @@
             };
 
             var onLoad = function () {
-                var treeListItems = document.querySelectorAll('nav ul a');
+                var treeListItems = document.querySelectorAll('nav ul li');
                 for (var i = 0; i < treeListItems.length; i++) {
+
+                    var isLeaf = treeListItems[i].getElementsByTagName('ul').length == 0;
+                    if (isLeaf) {
+                        treeListItems[i].classList.add("leaf")
+                        continue;
+                    }
+
                     // click handler
-                    treeListItems[i].addEventListener('click', function (e) {
-                        var parent = e.target.parentElement;
-                        var classList = parent.classList;
-                        if (classList.contains("open")) { // close the element and its children
-                            classList.remove('open');
-                            var openChildrenList = parent.querySelectorAll(':scope .open');
-                            for (var j = 0; j < openChildrenList.length; j++) {
-                                openChildrenList[j].classList.remove('open');
+                    treeListItems[i].addEventListener('click',
+                        function (e) {
+                            var target = e.target;
+
+                            var classList = target.classList;
+                            if (classList.contains("open")) { // close the element and its children
+                                classList.remove('open');
+                                var openChildrenList = target.querySelectorAll(':scope li.open');
+                                for (var j = 0; j < openChildrenList.length; j++) {
+                                    openChildrenList[j].classList.remove('open');
+                                }
+                            } else { // open the element
+                                classList.add('open');
                             }
-                        } else { // open the element
-                            classList.add('open');
+
+                            e.stopPropagation();
                         }
-                    });
+                    );
                 }
             }
 
@@ -203,7 +253,7 @@
 
 <div id="side-nav" class="sidenav">
     <div id="nav-menu">
-        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()">⊞</a>
+        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()" style="baseline-shift:-10%">⊞</a>
         <a class="close-btn" href="javascript:void(0)" onclick="closeSideNav()">&times;</a>
     </div>
         <div id="nav-content">
@@ -249,11 +299,37 @@ <h3 class="subtitle">Demonstrating the Power of Markdown with Pandoc</h4>
     <div class="title-logo">
         <img src="files/Logo.svg">
     </div>
-</header><div class="latex-math-define">
-$$ \newcommand{\vvec}[1]{\mathbf{#1}} \newcommand{\mat}[1]{\mathbf{#1}} \newcommand{\cs}[1]{\mathrm{#1}} \newcommand{\rp}[1]{{_\cs{#1}}} \newcommand{\csT}[2]{\mat{A}_{\mathrm{#1#2}}} \newcommand{\genT}[2]{\mat{T}_{\mathrm{#1#2}}} \newcommand{\affcsT}[2]{\mat{H}_{\mathrm{#1#2}}} \newcommand{\affcsTdx}[2]{\mat{H}_{\mathrm{#1#2}}^{\transp}} \newcommand{\basevec}[2]{\vvec{e}_{\mathrm{#1}}^{\cs{#2}}} \newcommand{\homArr}[1]{\left[\begin{array}{c}#1 \\ 1 \end{array}\right]} \newcommand{\homArrTr}[1]{\left[\begin{array}{c}#1 &amp;&amp; 1 \end{array}\right]} \newcommand{\homMat}[2]{\left[\begin{array}{cc}#1 &amp; #2 \\ \vvec{0} &amp; 1 \end{array}\right]} \newcommand{\arr}[2]{\left[\begin{array}{#1}#2\end{array}\right]} \newcommand{\transp}{\top} \newcommand{\rot}[2]{\mat{R}_\mathrm{#1#2}} \newcommand{\norm}[1]{\|#1\|} \newcommand{\mdet}[1]{\det(#1)} \newcommand{\set}[1]{\mathcal{#1}} \newcommand{\prox}[1]{\mathbf{prox}_{\set{C}}} \DeclareMathOperator*{\argmin}{argmin} \newcommand{\ncone}[1]{\mathcal{N}_{\set{#1}}} \newcommand{\indf}[1]{I_{\set{#1}}} $$
+</header><div class="abstract">
+<div class="abstract-title">Abstract</div>
+This is a setup demonstrating the power and use of markdown for technical documents by using a fully automated conversion sequence with <a href="https://gradle.org"><code>gradle</code></a> and of course <a href="https://pandoc.org"><code>pandoc</code></a>.
 </div>
-<div class="abstract">
-<p>This is a setup demonstrating the power and use of markdown for technical documents by using a fully automated conversion sequence with <a href="https://gradle.org"><code>gradle</code></a> and of course <a href="https://pandoc.org"><code>pandoc</code></a>.</p>
+<div id="nav-content-inline">
+    <nav id="TOC">
+                <ul>
+                <li><a href="#intro"><span class="toc-section-number">1</span> Intro</a></li>
+                <li><a href="#samples"><span class="toc-section-number">2</span> Samples</a>
+                <ul>
+                <li><a href="#konvexe-probleme"><span class="toc-section-number">2.1</span> Konvexe Probleme</a>
+                <ul>
+                <li><a href="#konvexe-menge"><span class="toc-section-number">2.1.1</span> Konvexe Menge</a></li>
+                <li><a href="#proximaler-punkt"><span class="toc-section-number">2.1.2</span> Proximaler Punkt</a></li>
+                <li><a href="#normalkegel"><span class="toc-section-number">2.1.3</span> Normalkegel</a></li>
+                <li><a href="#zusammenhang-von-normalkegel-und-proximaler-punkt"><span class="toc-section-number">2.1.4</span> Zusammenhang von Normalkegel und Proximaler Punkt</a></li>
+                <li><a href="#zusammenhang-von-normalkegel-und-konvexer-optimierung"><span class="toc-section-number">2.1.5</span> Zusammenhang von Normalkegel und Konvexer Optimierung</a></li>
+                </ul></li>
+                <li><a href="#code-sample"><span class="toc-section-number">2.2</span> Code Sample</a></li>
+                <li><a href="#tables"><span class="toc-section-number">2.3</span> Tables</a>
+                <ul>
+                <li><a href="#html-table"><span class="toc-section-number">2.3.1</span> HTML Table</a></li>
+                <li><a href="#sec:multi-line-table"><span class="toc-section-number">2.3.2</span> Markdown Table</a></li>
+                </ul></li>
+                </ul></li>
+                <li><a href="#references">References</a></li>
+                </ul>
+    </nav>
+</div>
+<div class="latex-math-define">
+$$ \newcommand{\vvec}[1]{\mathbf{#1}} \newcommand{\mat}[1]{\mathbf{#1}} \newcommand{\cs}[1]{\mathrm{#1}} \newcommand{\rp}[1]{{_\cs{#1}}} \newcommand{\csT}[2]{\mat{A}_{\mathrm{#1#2}}} \newcommand{\genT}[2]{\mat{T}_{\mathrm{#1#2}}} \newcommand{\affcsT}[2]{\mat{H}_{\mathrm{#1#2}}} \newcommand{\affcsTdx}[2]{\mat{H}_{\mathrm{#1#2}}^{\transp}} \newcommand{\basevec}[2]{\vvec{e}_{\mathrm{#1}}^{\cs{#2}}} \newcommand{\homArr}[1]{\left[\begin{array}{c}#1 \\ 1 \end{array}\right]} \newcommand{\homArrTr}[1]{\left[\begin{array}{c}#1 &amp;&amp; 1 \end{array}\right]} \newcommand{\homMat}[2]{\left[\begin{array}{cc}#1 &amp; #2 \\ \vvec{0} &amp; 1 \end{array}\right]} \newcommand{\arr}[2]{\left[\begin{array}{#1}#2\end{array}\right]} \newcommand{\transp}{\top} \newcommand{\rot}[2]{\mat{R}_\mathrm{#1#2}} \newcommand{\norm}[1]{\|#1\|} \newcommand{\mdet}[1]{\det(#1)} \newcommand{\set}[1]{\mathcal{#1}} \newcommand{\prox}[1]{\mathbf{prox}_{\set{C}}} \DeclareMathOperator*{\argmin}{argmin} \newcommand{\ncone}[1]{\mathcal{N}_{\set{#1}}} \newcommand{\indf}[1]{I_{\set{#1}}} $$
 </div>
 <h1 data-number="1" id="intro"><span class="header-section-number">1</span> Intro</h1>
 <p>Read the <a href="https://github.com/gabyx/TechnicalMarkdown/blob/master/Readme.md">Readme.md</a> for futher information.</p>
@@ -408,7 +484,6 @@ <h3 data-number="2.3.1" id="html-table"><span class="header-section-number">2.3.
 <li>HTML citations dont work.</li>
 <li>Table caption is not parsed <code>table_caption</code> not allowed as extension.</li>
 </ul>
-</div>
 <table style="width: 100%">
 <caption>Table by included <code>.html</code> file.</caption>
 <colgroup>
@@ -459,6 +534,7 @@ <h3 data-number="2.3.1" id="html-table"><span class="header-section-number">2.3.
 </tr>
 </tbody>
 </table>
+</div>
 <h3 data-number="2.3.2" id="sec:multi-line-table"><span class="header-section-number">2.3.2</span> Markdown Table</h3>
 <ul>
 <li>Included markdown files.</li>
diff --git a/Content.md b/Content.md
index 4de388b..8e5f999 100644
--- a/Content.md
+++ b/Content.md
@@ -14,7 +14,11 @@ link-citations: true
 
 fontsize: 12pt
 lang: en-GB
-
+abstract: This is a setup demonstrating the power and use 
+  of markdown for technical documents by using 
+  a fully automated conversion sequence with 
+  [`gradle`](https://gradle.org) and of course [`pandoc`](https://pandoc.org).
+abstract-title: Abstract
 toc: true
 toc-depth: 2
 top-level-division: chapter
@@ -33,11 +37,6 @@ Note: This is a Div block which get discarded because of the `{include-if-format
 includes/Math.html
 ```
 
-:::{.abstract}
-This is a setup demonstrating the power and use of markdown for technical documents by using
-a fully automated conversion sequence with [`gradle`](https://gradle.org) and of course [`pandoc`](https://pandoc.org).
-:::
-
 # Intro
 
 Read the [Readme.md](https://github.com/gabyx/TechnicalMarkdown/blob/master/Readme.md)
diff --git a/Content.pdf b/Content.pdf
index 098f7c2..483c7cc 100644
Binary files a/Content.pdf and b/Content.pdf differ
diff --git a/build.gradle.kts b/build.gradle.kts
index ad8618a..0885555 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -162,7 +162,6 @@ data class PandocSettings(
 
 fun createPandocSettings(): PandocSettings {
         var env = globalEnv.toMutableMap()
-        logger.quiet("First PATH: '${env["PATH"]}")
         //env.addExecutableDirToPath(pythonExe)
         //env.addExecutableDirToPath(pandocExe)
         env["ROOT_DIR"] = "${project.rootDir}"
@@ -226,6 +225,7 @@ abstract class PandocTask @Inject constructor() : Exec() {
         convertFiles.convention(project.fileTree("${project.rootDir}/convert/"){ 
             include("pandoc/**/*")
             include("scripts/**/*")
+            include("css/**/*.css")
         })
 
         inputs.files(inputFile, markdownFiles, assetFiles, convertFiles, literatureFiles)
diff --git a/chapters/TableSamples.md b/chapters/TableSamples.md
index 80be8b8..77798cb 100644
--- a/chapters/TableSamples.md
+++ b/chapters/TableSamples.md
@@ -7,22 +7,23 @@
 - Markdown citations/cross refeferences do not work inside.
 - HTML citations dont work.
 - Table caption is not parsed `table_caption` not allowed as extension.
-:::
 
-```{.include format=html+tex_math_dollars include-if-format=latex;html;html5;json;native .relative-to-current}
+```{.include format=html+tex_math_dollars .relative-to-current}
 tables/TableExample.html
 ```
+:::
 
 :::{include-if-format=latex;json;native}
 ## \LaTeX\ Table
 - Included latex file as raw `latex`.
 - Converted from `.html` by `convert-tables.py` and `table.json`.
 - Latex citations do work inside.
-:::
 
 ```{.include format=latex raw=true include-if-format=latex;json;native .relative-to-current}
 tables-tex/TableExample.tex
 ```
+:::
+
 
 ## Markdown Table {#sec:multi-line-table}
 
diff --git a/convert/css/main.css b/convert/css/main.css
index f41542f..8cfa0cf 100644
--- a/convert/css/main.css
+++ b/convert/css/main.css
@@ -154,8 +154,6 @@
 /**
 * Numerierte Headings
 */
-/* The title block format */
-/* The abstract block format */
 /* Quotes for the language */
 /* The side navigation menu */
 /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
@@ -177,6 +175,7 @@ html::-webkit-scrollbar-thumb {
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7a99d9), color-stop(0.72, #497dbd), color-stop(0.86, #1c3a94));
 }
 html #main {
+  font-family: 'Museo', "Fira Sans", "Helvetica", serif;
   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 }
 html #main .button {
@@ -214,6 +213,15 @@ html #main .sidenav #nav-menu {
   padding-bottom: 0;
   font-size: 26pt;
 }
+html #main .sidenav #nav-menu a {
+  text-decoration: none;
+  color: #818181;
+  transition: 0.3s;
+}
+html #main .sidenav #nav-menu a:hover {
+  color: #f1f1f1;
+  background-color: #dddddd65;
+}
 html #main .sidenav #nav-content {
   overflow-y: scroll;
   height: 100%;
@@ -228,14 +236,6 @@ html #main .sidenav #nav-content::-webkit-scrollbar {
 html #main .sidenav #nav-content::-webkit-scrollbar-thumb {
   background-color: #d4d4d4;
 }
-html #main .sidenav a {
-  text-decoration: none;
-  color: #818181;
-  transition: 0.3s;
-}
-html #main .sidenav a:hover {
-  color: #f1f1f1;
-}
 html #main .sidenav .close-btn {
   margin-left: 1ex;
 }
@@ -246,7 +246,7 @@ html #main .sidenav .expand-btn {
 html #main #sidenav-btn {
   position: fixed;
   top: 10px;
-  right: 10px;
+  left: 10px;
   padding: 1em;
   width: auto !important;
 }
@@ -258,79 +258,119 @@ html #main #sidenav-btn {
     font-size: 18px;
   }
 }
-html #main #TOC {
-  font-family: 'Museo', "Fira Sans", "Helvetica", serif;
+html #main a {
+  color: #034575;
+  text-decoration: none;
+  text-decoration-skip-ink: none;
+}
+html #main a:hover {
+  text-decoration: underline solid #034575;
+  color: #034575;
+  background-color: #ebebeb50;
+  border-radius: 4pt;
+}
+html #main a.anchorjs-link {
+  font-family: Fira Sans;
+  background-color: none;
+  color: #d1d1d1;
+}
+html #main a.anchorjs-link:hover {
+  text-decoration: underline solid #034575;
+  color: #034575;
+  background-color: #ffffff00;
+}
+html #main #nav-content > #TOC {
   font-size: 14pt;
   padding-left: 3ex;
-  padding-right: 1ex;
+  padding-right: 2ex;
   padding-bottom: 3em;
 }
-html #main #TOC h1,
-html #main #TOC h2,
-html #main #TOC h3,
-html #main #TOC h4,
-html #main #TOC h5,
-html #main #TOC h6 {
+html #main #nav-content > #TOC h1,
+html #main #nav-content > #TOC h2,
+html #main #nav-content > #TOC h3,
+html #main #nav-content > #TOC h4,
+html #main #nav-content > #TOC h5,
+html #main #nav-content > #TOC h6 {
   color: #00acd1;
   font-family: 'Museo Sans', "Fira Sans", "Helvetica", sans-serif;
   font-weight: bold;
 }
-html #main #TOC ul {
+html #main #nav-content > #TOC ul {
   padding-inline-start: 2ex;
   list-style-type: none;
 }
-html #main #TOC a {
+html #main #nav-content > #TOC li {
+  color: #00acd1;
+}
+html #main #nav-content > #TOC a {
+  color: #00acd1;
   padding-top: 0.5ex;
   padding-bottom: 0.5ex;
-  text-decoration: none;
-  color: #acacac;
   display: block;
   transition: 0.3s;
 }
-html #main #TOC a:hover {
-  color: #00acd1;
-}
-html #main #TOC ul li {
+html #main #nav-content > #TOC ul li {
   list-style-type: none;
   position: relative;
 }
-html #main #TOC ul li ul {
+html #main #nav-content > #TOC ul li ul {
   display: none;
   padding-left: 15px;
 }
-html #main #TOC ul li.open > ul {
+html #main #nav-content > #TOC ul li.open > ul {
   display: block;
 }
-html #main #TOC ul li a {
+html #main #nav-content > #TOC ul li a {
   text-decoration: none;
 }
-html #main #TOC ul li a:before {
+html #main #nav-content > #TOC ul li:before {
   /* the expand/collapse symbols before each item */
   height: 1em;
   font-size: 0.8em;
   display: block;
   position: absolute;
   left: -1.2em;
-  top: 0.3em;
-}
-html #main #TOC ul li > a:not(:last-child):before {
   content: "▸";
+  font-size: 140%;
   font-weight: bold;
 }
-html #main #TOC ul li.open > a:not(:last-child):before {
+html #main #nav-content > #TOC ul li.open:before {
   content: "▾";
-  font-weight: normal;
 }
-html #main #TOC ul li.open > a:last-child:before {
+html #main #nav-content > #TOC ul li.leaf:before {
   content: "";
-  font-weight: bold;
 }
 html #main-markdown {
   max-width: 18cm;
   margin: auto;
   /* base style */
-  /* cyfex variants */
-  font-family: 'Museo', "Fira Sans", "Helvetica", serif;
+}
+html #main-markdown #nav-content-inline > #TOC {
+  font-size: 14pt;
+}
+html #main-markdown #nav-content-inline > #TOC h1,
+html #main-markdown #nav-content-inline > #TOC h2,
+html #main-markdown #nav-content-inline > #TOC h3,
+html #main-markdown #nav-content-inline > #TOC h4,
+html #main-markdown #nav-content-inline > #TOC h5,
+html #main-markdown #nav-content-inline > #TOC h6 {
+  color: #00acd1;
+  font-family: 'Museo Sans', "Fira Sans", "Helvetica", sans-serif;
+  font-weight: bold;
+}
+html #main-markdown #nav-content-inline > #TOC ul {
+  padding-inline-start: 2ex;
+  list-style-type: none;
+}
+html #main-markdown #nav-content-inline > #TOC li {
+  color: #00acd1;
+}
+html #main-markdown #nav-content-inline > #TOC a {
+  color: #00acd1;
+  padding-top: 0.5ex;
+  padding-bottom: 0.5ex;
+  display: block;
+  transition: 0.3s;
 }
 html #main-markdown body {
   font-family: 'Museo', "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
@@ -654,6 +694,7 @@ html #main-markdown header {
   justify-content: space-between;
   align-items: flex-start;
   align-content: center;
+  margin-bottom: 32pt;
 }
 html #main-markdown header .title-block {
   display: flex;
@@ -679,6 +720,9 @@ html #main-markdown header .title-logo img {
 html #main-markdown .abstract {
   font-style: italic;
 }
+html #main-markdown .abstract-title {
+  font-weight: bold;
+}
 html #main-markdown figure {
   text-align: center;
   padding-top: 18pt;
@@ -821,8 +865,6 @@ html #main-markdown-numbered {
   max-width: 18cm;
   margin: auto;
   /* base style */
-  /* cyfex variants */
-  font-family: 'Museo', "Fira Sans", "Helvetica", serif;
   counter-reset: h1Counter imgCounter;
 }
 html #main-markdown-numbered body {
@@ -1147,6 +1189,7 @@ html #main-markdown-numbered header {
   justify-content: space-between;
   align-items: flex-start;
   align-content: center;
+  margin-bottom: 32pt;
 }
 html #main-markdown-numbered header .title-block {
   display: flex;
@@ -1172,6 +1215,9 @@ html #main-markdown-numbered header .title-logo img {
 html #main-markdown-numbered .abstract {
   font-style: italic;
 }
+html #main-markdown-numbered .abstract-title {
+  font-weight: bold;
+}
 html #main-markdown-numbered figure {
   text-align: center;
   padding-top: 18pt;
diff --git a/convert/css/src/abstract.less b/convert/css/src/abstract.less
index 396d262..ae0880b 100644
--- a/convert/css/src/abstract.less
+++ b/convert/css/src/abstract.less
@@ -1,6 +1,8 @@
-/* The abstract block format */
 .define-abstract() {
     .abstract {
         font-style: italic;
     }
+    .abstract-title {
+        font-weight: bold;
+    }
 }
\ No newline at end of file
diff --git a/convert/css/src/collapsable-list.less b/convert/css/src/collapsable-list.less
index b81c1d0..c7ea0a8 100644
--- a/convert/css/src/collapsable-list.less
+++ b/convert/css/src/collapsable-list.less
@@ -1,4 +1,4 @@
-.define-collapsable-list() {
+.define-collapsable-list(@toggleSize: 100%, @openChar: "▾", @closeChar: "▸") {
     ul li {
         list-style-type: none;
         position: relative;
@@ -13,26 +13,24 @@
     ul li a {
         text-decoration: none;
     }
-    ul li a:before {
+    ul li:before {
         /* the expand/collapse symbols before each item */
         height: 1em;
         font-size: 0.8em;
         display: block;
         position: absolute;
         left: -1.2em;
-        top: 0.30em;
-    }
-
-    ul li > a:not(:last-child):before {
-        content: "▸";
+        //top: 0.3em;
+        content: @closeChar;
+        font-size: @toggleSize;
         font-weight: bold;
     }
-    ul li.open > a:not(:last-child):before {
-        content: "▾";
-        font-weight: normal;
+
+    ul li.open:before {
+        content: @openChar;
     }
-    ul li.open > a:last-child:before {
-        content: "";
-        font-weight: bold;
+
+    ul li.leaf:before {
+        content: ""
     }
 }
diff --git a/convert/css/src/defines.less b/convert/css/src/defines.less
index e2f3f74..246a240 100644
--- a/convert/css/src/defines.less
+++ b/convert/css/src/defines.less
@@ -7,3 +7,6 @@
 @main-float-background-color: #f5f5f5;
 @main-float-border-color: #e9e9e9;
 @main-heading-color: #00acd1;
+
+@main-link-color: #034575;
+@main-link-background-color: #ebebeb50;
diff --git a/convert/css/src/header.less b/convert/css/src/header.less
index 285a296..51f630e 100644
--- a/convert/css/src/header.less
+++ b/convert/css/src/header.less
@@ -1,4 +1,3 @@
-/* The title block format */
 .define-header() {
     header {
         display: flex;
@@ -7,6 +6,7 @@
         justify-content: space-between;
         align-items: flex-start;
         align-content: center;
+        margin-bottom: 2 * @main-line-height;
 
         .title-block {
             display: flex;
diff --git a/convert/css/src/links.less b/convert/css/src/links.less
new file mode 100644
index 0000000..d062550
--- /dev/null
+++ b/convert/css/src/links.less
@@ -0,0 +1,27 @@
+@import "defines.less";
+
+.define-links() {
+    a {
+        color: @main-link-color;
+        text-decoration: none;
+        text-decoration-skip-ink: none;
+        &:hover {
+            text-decoration: underline solid @main-link-color;
+            color: @main-link-color;
+            background-color: @main-link-background-color;
+            border-radius: 4pt;
+        }
+    }
+
+    a.anchorjs-link {
+        font-family: Fira Sans;
+        background-color: none;
+        color: #d1d1d1;
+
+        &:hover {
+            text-decoration: underline solid @main-link-color;
+            color: @main-link-color;
+            background-color: #ffffff00;
+        }
+    }
+}
diff --git a/convert/css/src/main.less b/convert/css/src/main.less
index cebfbfa..0d48931 100644
--- a/convert/css/src/main.less
+++ b/convert/css/src/main.less
@@ -1,28 +1,24 @@
 /** Globales Cyfex CSS für Markdown */
 @import (inline) "fonts.less";
-@import "github.less";
-@import "defines.less";
-@import "images.less";
-@import "code.less";
 
-@import "numbered-headings.less";
-@import "header.less";
 @import "abstract.less";
-
+@import "button.less";
+@import "code.less";
+@import "collapsable-list.less";
+@import "defines.less";
+@import "github.less";
+@import "header.less";
+@import "images.less";
+@import "links.less";
+@import "lists.less";
 @import "math.less";
-
+@import "numbered-headings.less";
 @import "quotes.less";
-@import "lists.less";
-
-@import "button.less";
-
-@import "table.less";
 @import "references.less";
-
-@import "sidenav.less";
 @import "scrollbar.less";
-@import "collapsable-list.less";
-
+@import "sidenav.less";
+@import "table.less";
+@import "toc.less";
 
 .define-title-style() {
     h1,
@@ -43,9 +39,6 @@
 
     .define-title-style();
 
-    /* cyfex variants */
-    font-family: @main-font-text, "Fira Sans", "Helvetica", serif;
-
     p {
         text-align: justify;
         text-justify: auto;
@@ -68,44 +61,23 @@
     .define-code();
 }
 
-.define-toc-style() {
-    .define-title-style();
-    font-family: @main-font-text, "Fira Sans", "Helvetica", serif;
-    font-size: 14pt;
-
-    padding-left: 3ex;
-    padding-right: 1ex;
-    padding-bottom: 3em;
-
-    ul {
-        padding-inline-start: 2ex;
-        list-style-type: none;
-    }
-    a {
-        padding-top: 0.5ex;
-        padding-bottom: 0.5ex;
-        text-decoration: none;
-        color: #acacac;
-        display: block;
-        transition: 0.3s;
-    }
-
-    a:hover {
-        color: @main-heading-color;
-    }
-
-    .define-collapsable-list();
-}
-
 html {
     .define-scrollbar();
-    #main {
-        .define-button();
+    
+    #main {        
+        font-family: @main-font-text, "Fira Sans", "Helvetica", serif;
 
+        .define-button();
         .define-sidenav();
 
-        #TOC {
-            .define-toc-style();
+        .define-links();
+
+        #nav-content > #TOC {
+            .define-toc-style(@main-heading-color, @main-heading-color);
+            .define-collapsable-list(140%);
+            padding-left: 3ex;
+            padding-right: 2ex;
+            padding-bottom: 3em;
         }
     }
 
@@ -113,6 +85,10 @@ html {
         max-width: 21cm - 2 * 1.5cm;
         margin: auto;
 
+        #nav-content-inline > #TOC {
+            .define-toc-style(@main-heading-color, @main-link-color);
+        }
+
         .define-markdown-style();
     }
 
diff --git a/convert/css/src/sidenav.less b/convert/css/src/sidenav.less
index 910b861..447df30 100644
--- a/convert/css/src/sidenav.less
+++ b/convert/css/src/sidenav.less
@@ -21,6 +21,19 @@
             padding-top: 0.5ex;
             padding-bottom: 0;
             font-size: 26pt;
+
+            // For icons.
+            a {
+                text-decoration: none;
+                color: #818181;
+                transition: 0.3s;
+            }
+
+            a:hover {
+                color: #f1f1f1;
+                background-color: #dddddd65;
+            }
+
         }
 
         #nav-content {
@@ -41,16 +54,7 @@
             }
         }
 
-        a {
-            text-decoration: none;
-            color: #818181;
-            transition: 0.3s;
-        }
-
-        a:hover {
-            color: #f1f1f1;
-        }
-
+      
         .close-btn {
             margin-left: 1ex;
         }
@@ -64,7 +68,7 @@
     #sidenav-btn {
         position: fixed;
         top: 10px;
-        right: 10px;
+        left: 10px;
         padding: 1em;
         width: auto !important;
     }
diff --git a/convert/css/src/toc.less b/convert/css/src/toc.less
new file mode 100644
index 0000000..24c2234
--- /dev/null
+++ b/convert/css/src/toc.less
@@ -0,0 +1,23 @@
+@import "defines.less";
+
+.define-toc-style(@color: @main-heading-color, @fontSize: @main-font-size) {
+    .define-title-style();
+    font-size: 14pt;
+
+    ul {
+        padding-inline-start: 2ex;
+        list-style-type: none;
+    }
+
+    li {
+        color: @color;
+    }
+
+    a {
+        color: @color;
+        padding-top: 0.5ex;
+        padding-bottom: 0.5ex;
+        display: block;
+        transition: 0.3s;
+    }
+}
diff --git a/convert/pandoc/defaults/pandoc-html.yaml b/convert/pandoc/defaults/pandoc-html.yaml
index e89a01c..1bb515a 100644
--- a/convert/pandoc/defaults/pandoc-html.yaml
+++ b/convert/pandoc/defaults/pandoc-html.yaml
@@ -8,7 +8,7 @@ html-math-method:
     method: mathjax
     url: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 
-include-in-header: ["includes/SideNav.js"]
+include-in-header: ["includes/ScrollIntoView.js", "includes/Anchors.js", "includes/SideNav.js"]
 variables:
     include-before-partials: "includes/TemplateSidebar.html"
 
diff --git a/convert/pandoc/includes/Anchors.js b/convert/pandoc/includes/Anchors.js
new file mode 100644
index 0000000..33f0673
--- /dev/null
+++ b/convert/pandoc/includes/Anchors.js
@@ -0,0 +1,19 @@
+<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function (event) {
+        var P = "#main-markdown > header"
+        var noAnchorHeaders = document.querySelectorAll(`${P} h1, ${P} h2, ${P} h3, ${P} h4, ${P} h5, ${P} h6`)
+        for (var k = 0; k < noAnchorHeaders.length; k++) {
+            noAnchorHeaders[k].classList.add("no-anchor")
+        }
+
+        anchors.options = {
+            placement: 'left',
+            visible: 'always',
+            icon: '§'
+        };
+        var P = "#main-markdown"
+        anchors.add(`${P} h1:not(.no-anchor),${P} h2:not(.no-anchor),${P} h3:not(.no-anchor),${P} h4:not(.no-anchor),${P} h5:not(.no-anchor),${P} h6:not(.no-anchor)`);
+    });
+</script>
diff --git a/convert/pandoc/includes/ScrollIntoView.js b/convert/pandoc/includes/ScrollIntoView.js
new file mode 100644
index 0000000..4e551e4
--- /dev/null
+++ b/convert/pandoc/includes/ScrollIntoView.js
@@ -0,0 +1,16 @@
+<script>
+// If we have a hash we disable history scrolling restoration and
+// really scroll into view.
+var c = window.location.hash;
+if (c.length != 0) {
+    history.scrollRestoration = "manual"
+}
+
+document.addEventListener('DOMContentLoaded', function(event) {
+    var c = window.location.hash;
+    var e = document.getElementById(c.replace("#", ""));
+    if (e != null) {
+        e.scrollIntoView();
+    }
+});
+</script>
diff --git a/convert/pandoc/includes/SideNav.js b/convert/pandoc/includes/SideNav.js
index 3e95ed2..b4cda10 100644
--- a/convert/pandoc/includes/SideNav.js
+++ b/convert/pandoc/includes/SideNav.js
@@ -8,11 +8,14 @@
         if (m.offsetLeft - expandWidth < 0) {
             m.style.marginLeft = `${expandWidth + 40}px`
         }
+    
+        document.getElementById("nav-content-inline").style.display = "none";
     }
 
     function closeSideNav() {
         document.getElementById("side-nav").style.width = "0";
         document.getElementById("main-markdown").style.marginLeft = null;
+        document.getElementById("nav-content-inline").style.display = "initial";
     }
 
     var EXPAND_ALL = "⊞";
@@ -44,22 +47,34 @@
     };
 
     var onLoad = function () {
-        var treeListItems = document.querySelectorAll('nav ul a');
+        var treeListItems = document.querySelectorAll('nav ul li');
         for (var i = 0; i < treeListItems.length; i++) {
+
+            var isLeaf = treeListItems[i].getElementsByTagName('ul').length == 0;
+            if (isLeaf) {
+                treeListItems[i].classList.add("leaf")
+                continue;
+            }
+
             // click handler
-            treeListItems[i].addEventListener('click', function (e) {
-                var parent = e.target.parentElement;
-                var classList = parent.classList;
-                if (classList.contains("open")) { // close the element and its children
-                    classList.remove('open');
-                    var openChildrenList = parent.querySelectorAll(':scope .open');
-                    for (var j = 0; j < openChildrenList.length; j++) {
-                        openChildrenList[j].classList.remove('open');
+            treeListItems[i].addEventListener('click',
+                function (e) {
+                    var target = e.target;
+
+                    var classList = target.classList;
+                    if (classList.contains("open")) { // close the element and its children
+                        classList.remove('open');
+                        var openChildrenList = target.querySelectorAll(':scope li.open');
+                        for (var j = 0; j < openChildrenList.length; j++) {
+                            openChildrenList[j].classList.remove('open');
+                        }
+                    } else { // open the element
+                        classList.add('open');
                     }
-                } else { // open the element
-                    classList.add('open');
+
+                    e.stopPropagation();
                 }
-            });
+            );
         }
     }
 
diff --git a/convert/pandoc/includes/Template.html b/convert/pandoc/includes/Template.html
index 80c8c87..7bc3dbd 100644
--- a/convert/pandoc/includes/Template.html
+++ b/convert/pandoc/includes/Template.html
@@ -46,7 +46,20 @@
 ${ Title.html() }
 $endif$
 $if(abstract)$
-<div class="abstract">$abstract$</div>
+<div class="abstract">
+<div class="abstract-title">$abstract-title$</div>
+$abstract$
+</div>
+$endif$
+$if(toc)$
+<div id="nav-content-inline">
+    <nav id="$idprefix$TOC">
+        $if(toc-title)$
+        <h2 id="$idprefix$toc-title">$toc-title$</h2>
+        $endif$
+        $table-of-contents$
+    </nav>
+</div>
 $endif$
 $body$
 </div>
diff --git a/convert/pandoc/includes/TemplateSidebar.html b/convert/pandoc/includes/TemplateSidebar.html
index d5ea81f..60a2806 100644
--- a/convert/pandoc/includes/TemplateSidebar.html
+++ b/convert/pandoc/includes/TemplateSidebar.html
@@ -10,7 +10,7 @@
 
 <div id="side-nav" class="sidenav">
     <div id="nav-menu">
-        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()">⊞</a>
+        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()" style="baseline-shift:-10%">⊞</a>
         <a class="close-btn" href="javascript:void(0)" onclick="closeSideNav()">&times;</a>
     </div>
     $if(toc)$