diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 4cf0b31..1a502ba 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -72,6 +72,14 @@
   background-size: cover;
 }
 
+@mixin toggle-off-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>')
+}
+
+@mixin toggle-on-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8" /> </svg>')
+}
+
 .page_nav nav ul {
   padding-left: 0;
   list-style-type: none;
@@ -83,56 +91,126 @@
   }
 
   a:hover {
-    text-decoration: underline;
+    // text-decoration: underline;
   }
 
   ul {
-    // padding-left: 1.5rem;
+    padding-left: 0rem;
   }
 }
 
+details.switch {
+  >summary {
+    display: flex;
+  }
 
-summary,
-summary a {
-  font-size: 1rem;
-  font-style: normal;
+  >summary::after {
+    @include toggle-off-icon(to-rgb(map-get($theme-colors, "dark")));
+    width: 1rem;
+    height: 1rem;
+    float: inline-end;
+    transition: 0.4s;
+    content: '';
+    margin-top: 0.25rem;
+    margin-right: 0;
+    margin-left: 0.5rem
+  }
 }
 
-summary {
-  display: flex;
-  line-height: 2rem;
-}
-
-summary::before {
-  @include details-icon(to-rgb(map-get($theme-colors, "dark")));
-  content: '';
-  float: inline-end;
-  width: 0.7rem;
-  height: 1rem;
-  margin-top: 0.5rem;
-  margin-right: 6px;
-  // background: url('chevron-right.svg');
-  // background-size: cover;
-  margin-left: 0;
-  transition: 0.2s;
+details.switch[open]>summary::after {
+  @include toggle-on-icon(to-rgb(map-get($theme-colors, "dark")));
 }
 
 @include color-mode(dark) {
-  summary::before {
-    @include details-icon(to-rgb(map-get($theme-colors, "light")));
-    // content: '';
-    // float: inline-end;
-    // width: 0.7rem;
-    // height: 1rem;
-    // margin-top: 0.5rem;
-    // margin-right: 6px;
-    // // background: url('chevron-right.svg');
-    // // background-size: cover;
-    // margin-left: 0;
-    // transition: 0.2s;
+  details.switch summary::after {
+    @include toggle-off-icon(to-rgb(map-get($theme-colors, "light")));
   }
 }
 
-details[open]>summary::before {
+@include color-mode(dark) {
+  details.switch[open]>summary::after {
+    @include toggle-on-icon(to-rgb(map-get($theme-colors, "light")));
+  }
+}
+
+// details.tree[open]:has(summary.active) {
+//   border: solid 1px $primary;
+
+// }
+
+details.tree {
+
+  >summary,
+  >summary a {
+    font-size: 1rem;
+    font-style: normal;
+  }
+
+  >summary {
+    display: flex;
+    line-height: 2rem;
+    padding-left: 12px;
+    // padding-top: 8px;
+    // padding-bottom: 8px;
+  }
+
+  >summary.active {
+    border-left: solid 8px $primary;
+    border-right: solid 8px $primary;
+    // border: solid 1px $primary;
+    // background-color: $gray-800;
+    padding-left: 8px;
+    // padding-top: 8px;
+  }
+
+  >summary::before {
+    @include details-icon(to-rgb(map-get($theme-colors, "dark")));
+    content: '';
+    float: inline-end;
+    width: 0.7rem;
+    height: 1rem;
+    margin-top: 0.5rem;
+    margin-right: 6px;
+    // background: url('chevron-right.svg');
+    // background-size: cover;
+    margin-left: 0px;
+    transition: 0.2s;
+  }
+
+  ul {
+    // li:hover {
+    //   border-left: solid 2px $white;
+    //   padding-left: 36px;
+    // }
+
+    li {
+      padding-left: 38px;
+
+      a {
+        display: block;
+      }
+    }
+
+    li:has(a.active) {
+      border-left: solid 2px $primary;
+      padding-left: 36px;
+      // background-color: $gray-900;
+    }
+  }
+}
+
+@include color-mode(dark) {
+  details.tree summary::before {
+    @include details-icon(to-rgb(map-get($theme-colors, "light")));
+  }
+}
+
+details.tree[open]>summary::before {
   transform: rotate(90deg);
-}
\ No newline at end of file
+  padding-bottom: 0;
+}
+
+
+// summary.active::before {
+//   @include details-icon(to-rgb($primary));
+// }
\ No newline at end of file
diff --git a/app/javascript/controllers/bs_scrollspy_controller.js b/app/javascript/controllers/bs_scrollspy_controller.js
new file mode 100644
index 0000000..53e2f0f
--- /dev/null
+++ b/app/javascript/controllers/bs_scrollspy_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+import * as bootstrap from 'bootstrap'
+
+// Connects to data-controller="bs-scrollspy"
+export default class extends Controller {
+  connect() {
+    // console.log(this.element)
+    const target = this.element.getAttribute("data-bs-scrollspy-target")
+    const scrollSpy = new bootstrap.ScrollSpy(this.element, {
+      target: target
+    })
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 6414a8f..9c8e4f7 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -7,6 +7,9 @@ import { application } from "./application"
 import AutosubmitController from "./autosubmit_controller"
 application.register("autosubmit", AutosubmitController)
 
+import BsScrollspyController from "./bs_scrollspy_controller"
+application.register("bs-scrollspy", BsScrollspyController)
+
 import CheckLinkController from "./check_link_controller"
 application.register("check-link", CheckLinkController)
 
diff --git a/app/views/pages/_page.html.erb b/app/views/pages/_page.html.erb
index a9e1bf1..e25a2f4 100644
--- a/app/views/pages/_page.html.erb
+++ b/app/views/pages/_page.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= dom_id page %>" class="mb-3">
+<div id="<%= dom_id page %>" class="mb-3"data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav) %>" data-controller="bs-scrollspy">
   <h2>
     <i class="bi bi-file-earmark-check"></i>
     <%= page.position %> <%= page.path %></h2>
diff --git a/app/views/reports/_page_nav.html.slim b/app/views/reports/_page_nav.html.slim
index a0c8341..a2c946d 100644
--- a/app/views/reports/_page_nav.html.slim
+++ b/app/views/reports/_page_nav.html.slim
@@ -1,26 +1,30 @@
 div id=dom_id(report, :page_nav)
   - if report.pages.any?
-    details open=true 
-      summary Struktur
+    details.switch open=true 
+      summary.justify-content-end
+        span Pfade
       nav
         ul
           - report.pages.each do |page|
             - is_current = current_page == page
             li
-              details open=current_page_displayed(page) class=""
-                summary
-                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "-fill" : "" }"
+              details.tree open=current_page_displayed(page) class=""
+                summary class=(is_current ? "active" : nil)
+                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
                   - if is_current
-                    =< "#{page.position} #{page.path}" 
+                      =< "#{page.position} #{page.path}" 
                   - else
-                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), class: "#{is_current ? " active text-decoration-underline" : nil  }", data: { "turbo-frame": :_top })
+                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top })
                 ul id=dom_id(page, :page_nav_elements)
                   - page.elements.each do |element| 
                     li 
-                      i.bi.bi-boxes.me-1
                       - if current_page == page
-                        =< link_to("#{element.number} #{element.title}", "##{dom_id(element)}", data: { "turbo": false })
+                        =< link_to("##{dom_id(element)}", data: { "turbo": false }) do
+                          i.bi.bi-boxes.me-1
+                          =< "#{element.number} #{element.title}"
                       - else 
-                        =< link_to("#{element.number} #{element.title}", report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false })
+                        =< link_to(report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) do
+                          i.bi.bi-boxes.me-1
+                          =< "#{element.number} #{element.title}"
   = turbo_frame_tag "new_page_frame" do
     = render partial: "reports/new_page_button", locals: { report: report }
\ No newline at end of file
diff --git a/app/views/reports/show.html.slim b/app/views/reports/show.html.slim
index e312ee6..4b9c26c 100644
--- a/app/views/reports/show.html.slim
+++ b/app/views/reports/show.html.slim
@@ -11,13 +11,13 @@ h1
   .smb-4.lead.mb-3
     = @report.comment
 .row 
-  .col-lg-3.col-md-6.col-sm-12
+  .col-lg-4.col-md-6.col-sm-12
     .page_nav.sticky-top
       = render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page }
       - if @current_page
         = turbo_frame_tag(dom_id(@current_page, :notes)) do 
           = render partial: "pages/notes", locals: { page: @current_page }
-  .col-lg-9.col-md-6.col-sm-12
+  .col-lg-8.col-md-6.col-sm-12
     - if @current_page
         = render @current_page
     - else