diff --git a/src/styles/breadcrumbs.css b/src/styles/breadcrumbs.css
deleted file mode 100644
index 23fd91d3f..000000000
--- a/src/styles/breadcrumbs.css
+++ /dev/null
@@ -1,48 +0,0 @@
-#breadcrumbs {
-    margin: 0 0 30px 0;
-    display: flex;
-    align-items: center;
-    list-style: none;
-    padding: 16px 0 0 0;
-    overflow-x: auto;
-}
-
-#breadcrumbs li {
-    display: flex;
-    align-items: center;
-}
-
-#breadcrumbs a {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    padding: 5px 10px;
-    border-radius: 20px;
-    transition: color 200ms ease, transform 200ms ease, background-color 200ms ease;
-}
-
-#breadcrumbs img {
-    width: 18px;
-    min-width: 18px;
-    filter: invert(100%);
-}
-
-#breadcrumbs li:not(:last-child)::after {
-    background: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 256 256\"><g><g><polygon points=\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>") center;
-    content: " ";
-    display: inline-block;
-    filter: invert(0.64) sepia(0.11) saturate(0) hue-rotate(149deg) brightness(0.99) contrast(0.95);
-    height: 8px;
-    margin: 0 8px;
-    opacity: .5;
-    width: 8px;
-}
-
-#breadcrumbs li:last-child a,
-#breadcrumbs li a:hover {
-    background: #202127;
-}
-
-#breadcrumbs li a:hover {
-    transform: translateY(-3px);
-}
\ No newline at end of file
diff --git a/src/styles/childlinks.css b/src/styles/childlinks.css
new file mode 100644
index 000000000..094f48efb
--- /dev/null
+++ b/src/styles/childlinks.css
@@ -0,0 +1,53 @@
+#childLinks,
+#childLinks ul,
+#childLinks li {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+#childLinks {
+    padding-top: 10px;
+    flex-direction: column;
+    gap: 0px;
+    justify-content: center;
+    border-top: 1px solid var(--background-highlight);
+}
+
+#childLinks ul {
+    padding: 0;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+#childLinks li {
+    background: var(--background-highlight);
+    padding: 2px 12px;
+    border-radius: 12px;
+}
+
+
+.no-content + #childLinks {
+    border: 0;
+}
+
+#childLinks.grid li {
+    padding: 0;
+}
+
+#childLinks.grid li a {
+    padding: 50px;
+    border-radius: 12px;
+    background: var(--background-highlight);
+    color: var(--text-primary);
+    transform: translateY(0);
+    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
+}
+
+#childLinks.grid li a:hover {
+    background: var(--background-active);
+    color: var(--background-secondary);
+    text-decoration: none;
+    transform: translateY(-5px);
+}
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 6fcf80bcc..8ae5f3043 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,291 +1,103 @@
-@import "./breadcrumbs.css";
+@import "./childlinks.css";
 @import "./externallinks.css";
-@import "./navbar.css";
-@import "./sidebar.css";
 @import "./swagger.css";
 @import "./toc.css";
 
+@import "./navbar/index.css";
+@import "./popouts/index.css";
+
 @import "./mobile.css";
 
 
-* {box-sizing: border-box;}
+* {
+    box-sizing: border-box;
+}
 
 :root {
-    --shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    --blue: #3E82E5;
-    --blue-strong: #008CBD;
-    --gray: gray;
-    --ck-color-table-caption-text: gray;
-    --bg-primary: #1E1E1E;
-    --bg-secondary: #3C3C3C;
-    --text-muted: #777;
-    --text-primary: #ddd;
-    --text-heading: #fff;
-    
-    --bottom-layer: #040405;
-    --middle-layer: #0C0D10;
-    --top-layer: #14151B;
-    --accent-layer: #20212B;
-    --accent-color: #3E82E5;
-    
-    --container-width: 1400px /*calc(100% - 10%)*/;
-    --pane-size: 20%;
+    --background-primary: #333333;
+    --background-secondary: #1F1F1F;
+    --background-highlight: #484848;
+    --background-active: #777777;
+    --text-primary: #cccccc;
+    --text-heading: #cccccc;
+    --text-menu: #AAAAAA;
+    --text-link: #87CEFA;
+    --text-menu-active: #000000;
+}
 
-    
-    scroll-padding-top: calc(72px + 1rem);
-    color-scheme: dark;
+body.theme-light {
+    --background-primary: #FFFFFF;
+    --background-secondary: #F3F3F3;
+    --background-highlight: #DDDDDD;
+    --background-active: #777777;
+    --text-primary: #000000;
+    --text-heading: #000000;
+    --text-menu: #333333;
+    --text-link: #0000ff;
 }
 
 body {
-    margin: 0px;
-    padding: 0px;
-    background: var(--middle-layer);
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background: var(--background-primary);
+    font-family: 'Montserrat', 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
+    line-height: 1.5;
     color: var(--text-primary);
-    margin-bottom: 200px;
 }
 
 a {
+    color: var(--text-link);
     text-decoration: none;
-    color:  var(--text-primary);
-    transition: color 200ms ease;
 }
 
 a:hover {
-    color: var(--accent-color);
+    text-decoration: underline;
 }
 
-
-
-
-#content {
-    font-size: 16px;
-    font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
-    line-height: 1.5;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-    letter-spacing: 0.02em;
-}
-
-#main h1,
-#main h2,
-#main h3,
-#main h4,
-#main h5,
-#main h6 {
-    color: var(--text-heading);
-    line-height: 36px;
-    padding: 5px 0px;
-    letter-spacing: 0.02em;
-    font-weight: 800;
-    position: relative;
-}
-
-/*     #content h2::before,
-#content h3::before,
-#content h4::before{
-    content: '#';
-    color: var(--blue);
-    position: absolute;
-    left: -20px;
-} */
-
-#main h1 a,
-#main h2 a,
-#main h3 a,
-#main h4 a,
-#main h5 a,
-#main h6 a {
-    color: var(--blue);
-    margin-left: 10px;
-}
-
-#content h2 {
-    font-size: 24px;
-}
-
-#content h3 {
-    font-size: 20px;
-}
-
-#content h4 {
-    font-size: 16px;
-}
-
-#content p {
-    margin-block-start: 12px;
-    margin-block-end: 12px;
-    text-align: justify;
-    overflow: hidden;
-}
-
-#content hr {
-    height: 1px;
-}
-
-#content blockquote {
-    margin-block-start: 12px;
-    margin-block-end: 24px;
-    margin-inline-start: 32px;
-    margin-inline-end: 32px;
-    padding-block-start: 12px;
-    padding-block-end: 12px;
-    padding-inline-start: 16px;
-    padding-inline-end: 16px;
-    background-color: hsla(0deg, 0%, 0%, 0.054);
-}
-
-#noteClippedFrom {
-    color: var(--gray);
-    margin-bottom: 0.5rem;
-    font-style:italic;
-}
-
-.table {
-    overflow-wrap: anywhere;
-}
-
-.pdf-view {
-    width: 100%;
-    min-height: 40rem;
-}
-
-.type-file > button {
-    display: block;
-    margin: 2rem auto;
-    background-color: var(--blue);
-    border: none;
-    color: white;
-    padding: 1rem 2rem;
-    text-align: center;
-    text-decoration: none;
-    font-size: 1rem;
-    border-radius: 0.25rem;
-    box-shadow: var(--shadow);
-}
-
-.mermaid {
-    text-align: center;
-}
-
-/* Menu */
-
-#toggleMenuButton {
-    display: none;
-}
-
-
-
-
-body {
-    display: flex;
-    justify-content: center;
-}
-
-#layout {
+#split-pane {
     display: flex;
     flex-direction: row;
-    width: var(--container-width);
-    max-width: var(--container-width);
-    margin-top: calc(72px + 1rem);
-    position: relative;
-    height: 100%;
-    gap: 16px;
+    gap: 50px;
 }
 
-@media screen and (max-width: 1500px) {
-    #layout {
-        width: 1300px;
-        max-width: 1300px;
-    }
+#left-pane {
+    display: flex;
+    width: calc((100vw - 900px) / 2);
+    min-width: fit-content;
+    height: calc(100vh);
+    background: var(--background-secondary);
+    border-right: 5px solid var(--background-highlight);
+    justify-content: flex-end;
+    position: sticky;
+    top: 0;
 }
 
-@media screen and (max-width: 1300px) {
-    #layout {
-        width: 1100px;
-        max-width: 1200px;
-    }
-}
-
-
-
-#main {
-    flex: 100%;
-}
-
-#layout.toc #main,
-#sidebar + #main {
-    flex: calc(100% - var(--pane-size));
-}
-
-#layout.toc #sidebar + #main {
-    flex: calc(100% - (2 * var(--pane-size)));
+#right-pane {
+    display: flex;
+    margin: 0 auto;
+    gap: 40px;
+    flex: 1;
+    padding-bottom: 500px;
+    padding-right: 50px;
 }
 
 #main {
-    contain: content;
-    background-color: var(--top-layer);
-    padding: 1rem 3rem 2rem 3rem;
-    box-shadow: 0 2px 10px #00000040;
-    border-radius: 6px;
+    order: 2;
+    max-width: 900px;
+    flex: 1;
 }
 
 
 
-
-
-
-
-
-
-
-
-
-
-.ck-content code {
-    background-color: var(--accent-layer);
-    border-radius: 6px;
-    padding: 3px;
-}
 .ck-content pre {
-    background: var(--accent-layer);
-    border-radius: 6px;
-    border: 0;
-    box-shadow: 0 2px 4px #0003;
+    color: var(--text-primary);
 }
 
-
-#childLinks.list {
-    display: none;
-}
-
-
-
-
-
-#parentLink {
-    display: none;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-#childLinks.grid ul li a {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-#childLinks.grid ul li a:hover {
-    background: rgba(255, 255, 255, 0.1);
+#content h1,
+#content h2,
+#content h3,
+#content h4,
+#content h5,
+#content h6 {
+    color: var(--text-heading);
+    border-bottom: 1px solid var(--background-highlight);
+    padding-bottom: 5px;
 }
\ No newline at end of file
diff --git a/src/styles/mobile.css b/src/styles/mobile.css
index 967ee166a..d0959b351 100644
--- a/src/styles/mobile.css
+++ b/src/styles/mobile.css
@@ -1,157 +1,95 @@
-.expand {
-    display: none
+#mobile-header {
+    display: none;
+    background: var(--background-secondary);
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
 }
 
-button.expand {
-    position: relative;
-    padding: 9px;
-    margin: 9.5px 0;
-    border: 0 solid #000;
-    border-radius: 4px;
-    background: 0 0;
-    color: #fff;
-    -webkit-transition: -webkit-transform .5s;
-    -moz-transition: transform .5s;
-    -o-transition: transform .5s;
-    transition: transform .5s
+#mobile-header a {
+    display: flex;
+    align-items: center;
+    gap: 5px;
 }
 
-.expanded button.expand {
-    background-color: #000;
-    -webkit-transition: -webkit-transform .5s, background-color .5s;
-    -moz-transition: transform .5s, background-color .5s;
-    -o-transition: transform .5s, background-color .5s;
-    transition: transform .5s, background-color .5s;
-    -ms-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg)
+#mobile-header a img {
+    max-width: 32px;
 }
 
-.expanded .rectangle {
-    background: #fff;
+#mobile-header button {
+    color: var(--text-menu);
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 6px;
+    transform: rotate(0);
+    transition: background-color 200ms ease, transform 200ms ease;
 }
 
-.rectangle {
-    display: block;
-    width: 24px;
-    height: 4px;
-    border-radius: 1px;
-    background: var(--text-heading);
-    transition: transform .5s, background-color .5s;
-}
 
-.rectangle + .rectangle {
-    margin-top: 5px
-}
 
-@media screen and (max-width: 768px) {
-    #toc {
-        display: none;
+@media (max-width: 48em) {
+    
+    #right-pane, #main {
+        width: 100%;
+        overflow: hidden;
+        padding: 0;
     }
     
     #main {
         padding: 1rem;
     }
     
-    #layout {
-        overflow: hidden;
+    
+    #mobile-header {
+        display: flex;
     }
     
-    #menu {
-        width: auto;
+    #mobile-header button svg {
+        width: 32px;
+        height: 32px;
     }
     
-    .expand {
-        display: inline-block
-    }
-    
-    #menu::after {
-        content: "";
+    #left-pane {
         position: fixed;
         top: 0;
-        right: 0;
-        bottom: 0;
         left: 0;
-        height: 100%;
-        width: 100%;
-        transition: background-color 200ms ease;
-        pointer-events: none;
-    }
-    
-    #menu.expanded::after {
-        width: 100%;
-        background: rgba(0,0,0,0.7);
-    }
-    
-    
-    
-    #menu > ul {
-        position: fixed;
+        width: auto;
         transform: translateX(-100%);
         transition: transform 200ms ease;
-        transform-origin: 0 0;
-        z-index: 1;
-        background: #040405;
-        display: initial;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        height: 100%;
-        
-        width: 70%;
-        padding: 1rem;
-        overflow: auto;
+        z-index: 2;
     }
     
-    #menu #go-back {
-        margin-bottom: 20px;
-    }
-    
-    #menu.expanded > ul.active {
+    .menu-open #left-pane {
         transform: translateX(0);
     }
     
-    #menu #sidebar .category > p > a {
-        font-weight: 400;
+    body::before {
+        content: "";
+        display: block;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0,0,0,0);
+        pointer-events: none;
+        transition: background-color 200ms ease;
+        z-index: 1;
     }
     
-    #menu > ul > li > p > a {
-        padding: 3px 6px;
-    }
-    
-    #menu > ul > li > ul {
-        background: none;
-        opacity: 1;
-        position: initial;
-        transform: none;
-        margin-top: 0;
-        pointer-events: initial;
-        padding: 0;
-    }
-    
-    #menu > ul > li.submenu-item > p > a::after {
-        display: none;
-    }
-    
-    #menu > ul > li > ul > li > ul {
-        display: initial;
+    body.menu-open::before {
+        background: rgba(0,0,0, 0.6);
     }
     
     
-    #menu > ul:not(#sidebar) > li > ul > li > ul {
-        display: none;
-    }
-    
-    #menu > ul:not(#sidebar) ul {
-        margin-left: 20px;
-    }
-
-    #menu > ul:not(#sidebar) ul {
-        margin-left: 20px;
-    }
-
-    #menu > ul:not(#sidebar) a.active {
-        background: var(--accent-color);
-        border-radius: 6px;
+    body.menu-open #show-menu-button {
+        background: var(--background-highlight);
+        transform: rotate(90deg);
     }
 }
\ No newline at end of file
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
deleted file mode 100644
index a2685fb47..000000000
--- a/src/styles/navbar.css
+++ /dev/null
@@ -1,152 +0,0 @@
-#menu {
-    display: flex;
-    position: fixed;
-    justify-content: space-between;
-    align-items: center;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: inherit;
-    margin: 0 auto;
-    overflow: visible;
-    z-index: 10;
-    background: var(--bottom-layer);
-    padding: 8px 16px;
-}
-
-#menu::before {
-    content: "";
-    position: fixed;
-    left: 0;
-    right: 0;
-    background: var(--bottom-layer);
-    height: 72px;
-    z-index: -1;
-}
-
-#menu > p > a {
-    display: flex;
-    white-space: nowrap;
-    gap: 10px;
-    align-items: center;
-/*         color: var(--text-heading); */
-}
-
-#main a {
-    color: var(--accent-color);
-}
-
-#main a:hover {
-    color: var(--text-heading);
-}
-
-#menu > p > a::before {
-    content: "";
-    display: flex;
-    background: url("https://raw.githubusercontent.com/zadam/trilium/master/images/icon-color.svg");
-    height: 40px;
-    width: 53px;
-}
-
-/*     #logo {
-    order: 1;
-    height: 40px;
-} */
-
-/*     #menu > p > strong::before {
-    content: "";
-    display: flex;
-    background: url("https://notes.cloud.zerebos.com/assets/v0.60.4/images/icon-black.svg");
-} */
-
-#menu ul, #sidebar ul {
-    list-style: none;
-    padding: 0;
-    position: relative;
-}
-
-#menu > ul {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 30px;
-}
-
-#menu > ul > li {
-    margin: 0;
-    padding: 0;
-    position: relative;
-}
-
-
-
-#menu > ul > li > p > a {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    font-weight: 700;
-    padding: 16px 0;
-}
-
-/*     #menu > ul > li > p > a::after {
-    content: '';
-    border: 4px solid transparent;
-    border-top: 4px solid white;
-    display: flex;
-    align-items: center;
-    margin-bottom: -8px;
-} */
-
-#menu > ul > li.submenu-item > p > a::after {
-    content: "";
-    border-color: currentcolor #0000;
-    border-style: solid;
-    border-width: .4em .4em 0;
-    position: relative;
-    display: flex;
-    top: 2px;
-    align-items: center;
-/*         transform: translateY(-50%); */
-}
-
-#menu > ul > li.submenu-item.hidden > ul,
-#menu > ul > li.submenu-item.hidden > p > a::after{
-    display: none;
-}
-
-#menu > ul > li > ul {
-/*         display: none; */
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 40px;
-    background: #242526;
-    border-radius: 6px;
-    min-width: 150px;
-    right: 50%;
-    transform: translateX(50%);
-    padding: 8px;
-    transition: top 200ms ease, opacity 200ms ease;
-}
-
-#menu > ul > li > ul > li a {
-    display: flex;
-    border-radius: 6px;
-    padding: 3px 6px;
-    transition: background-color 200ms ease;
-}
-
-#menu > ul > li > ul > li a:hover {
-    background: rgba(255,255,255,0.05);
-}
-
-#menu > ul > li > ul > li > ul {
-    display: none;
-}
-
-#menu > ul > li:hover > ul {
-/*         display: flex; */
-    top: 50px;
-    opacity: 1;
-    pointer-events: initial;
-}
\ No newline at end of file
diff --git a/src/styles/navbar/header.css b/src/styles/navbar/header.css
new file mode 100644
index 000000000..b17e873d1
--- /dev/null
+++ b/src/styles/navbar/header.css
@@ -0,0 +1,141 @@
+#site-header {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+#site-header > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+
+ /* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 27px; /* 32 */
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--text-primary);;
+  transition: .4s;
+    border-radius: 34px;
+}
+
+.slider::before {
+  position: absolute;
+  content: "";
+  height: 19px; /* 26px */
+  width: 19px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+     border-radius: 50%;
+    z-index: 2;
+}
+
+input:checked + .slider {
+  background-color: var(--background-highlight);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--background-highlight);
+}
+
+input:checked + .slider:before {
+  transform: translateX(33px); /* whole width - slider width - 8px padding*/
+}
+
+
+.theme-selection {
+    display: flex;
+    align-items: center;
+   justify-content: space-between;
+}
+
+
+.theme-selection label {
+    position: relative;
+}
+
+.dark-icon, .light-icon {
+    display: flex;
+    opacity: 0;
+    transition: opacity 400ms ease, color 400ms ease;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 24px;
+}
+
+/*     input ~ .dark-icon {
+    display: none;
+} */
+
+input:not(:checked) ~ .light-icon {
+    opacity: 1;
+}
+
+input:checked ~ .dark-icon {
+    opacity: 1;
+}
+
+/*     input:checked ~ .light-icon {
+    display: none;
+} */
+
+
+.dark-icon {
+    left: 5px;
+    color: var(--text-primary);
+}
+
+.light-icon {
+    right: 5px;
+    color: var(--background-highlight);
+}
+
+
+.search-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.search-input {
+    color: var(--text-primary);
+    background: var(--background-highlight);
+    outline: 0;
+    border: 0;
+    flex: 1;
+    padding: 5px 5px 5px 32px;
+    width: 200px;
+}
+
+.search-icon {
+    display: flex;
+    color: var(--text-primary);
+    position: absolute;
+    width: 20px;
+    left: 5px;
+}
\ No newline at end of file
diff --git a/src/styles/navbar/index.css b/src/styles/navbar/index.css
new file mode 100644
index 000000000..e77988f54
--- /dev/null
+++ b/src/styles/navbar/index.css
@@ -0,0 +1,2 @@
+@import "./header.css";
+@import "./navbar.css";
\ No newline at end of file
diff --git a/src/styles/navbar/navbar.css b/src/styles/navbar/navbar.css
new file mode 100644
index 000000000..7e1adf0e8
--- /dev/null
+++ b/src/styles/navbar/navbar.css
@@ -0,0 +1,141 @@
+#navigation {
+    display: flex;
+    flex-direction: column;
+    padding: 25px;
+    gap: 10px;
+}
+
+#menu {
+    order: 1;
+/*         margin-left: auto; */
+
+    white-space: nowrap;
+
+    flex: 0;
+/*         padding: 25px; */
+}
+
+#menu > ul {
+    overflow-y: auto;
+    list-style: none;
+    padding-left: 0!important;
+}
+
+/*     #menu > ul, #menu > div {
+    width: fit-content;
+    margin-left: auto;
+} */
+
+#menu ul {
+    overflow-y: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding-left: 20px;
+}
+
+#menu li {
+/*         overflow-y: hidden; */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+     list-style: none;
+    cursor: pointer;
+}
+
+#menu li .collapsible-label {
+    display: flex;
+    flex: 1
+}
+
+#menu li > ul {
+    transition: height 1000ms ease;
+}
+
+#menu li:not(.expanded) > ul {
+    height: 0!important;
+/*         transition: height 1000ms ease; */
+}
+
+#menu li.expanded > ul {
+/*         max-height: 500px; */
+}
+
+#menu p {
+    display: flex;
+}
+
+#menu li.item > a {
+    padding-left: 24px;
+}
+
+#menu a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    color: var(--text-menu);
+    text-decoration: none;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    flex: 1;
+    padding: 2px 6px;
+    font-weight: 400;
+}
+
+#menu a:hover {
+    border-color: var(--text-menu);
+}
+
+#menu a.active {
+    background: var(--background-active);
+    color: var(--background-secondary);
+    font-weight: 700;
+}
+
+#menu li ul {
+    position: relative;
+}
+
+#menu li ul::before {
+    content: "";
+    display: flex;
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    left: 10px;
+    width: 2px;
+    background: var(--background-highlight);
+}
+
+.active .collapse-button {
+    background: none;
+    color: var(--background-secondary);
+}
+
+
+.collapse-button {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: var(--background-secondary);
+    border: 0;
+    color: var(--text-menu);
+/*         position: absolute; */
+/*         top: 2px; */
+/*         left: -18px; */
+    transform: rotate(-90deg);
+    transition: transform 200ms ease;
+}
+
+.expanded > .collapse-button,
+.expanded > a > .collapse-button {
+    transform: rotate(0);
+}
+
+.collapse-button svg {
+    width: 14px;
+}
\ No newline at end of file
diff --git a/src/styles/popouts/index.css b/src/styles/popouts/index.css
new file mode 100644
index 000000000..52ded226e
--- /dev/null
+++ b/src/styles/popouts/index.css
@@ -0,0 +1 @@
+@import "./search.css";
\ No newline at end of file
diff --git a/src/styles/popouts/search.css b/src/styles/popouts/search.css
new file mode 100644
index 000000000..3ab336906
--- /dev/null
+++ b/src/styles/popouts/search.css
@@ -0,0 +1,34 @@
+.search-results {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background: var(--background-highlight);
+    margin-top: 10px;
+    border-radius: 12px;
+    padding: 0;
+    overflow: hidden;
+    z-index: 5;
+}
+
+.search-result-item {
+    display: flex;
+    flex-direction: column;
+    padding: 4px 12px;
+    color: var(--text-primary);
+}
+
+.search-result-item:hover {
+    cursor: pointer;
+    background: var(--background-active);
+    color: var(--text-menu-active);
+    text-decoration: none;
+}
+
+.search-result-item:hover .search-result-note {
+    color: var(--text-menu-active);
+}
+
+.search-result-note {
+    font-size: 12px;
+    color: var(--text-menu);
+}
\ No newline at end of file
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
deleted file mode 100644
index acf97f222..000000000
--- a/src/styles/sidebar.css
+++ /dev/null
@@ -1,66 +0,0 @@
-#sidebar {
-    flex: var(--pane-size);
-    height: fit-content;
-    position: sticky;
-    top: calc(72px + 1rem);
-}
-
-#sidebar, #sidebar ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-#sidebar {
-/*         padding-right: 20px; */
-}
-
-
-
-/*     #sidebar .title {
-    text-transform: uppercase;
-    text-align: center;
-    letter-spacing: 5px;
-    color: #777;
-    font-weight: 700;
-    border-bottom: 1px solid #777;
-} */
-
-#sidebar p {
-    display: flex;
-    margin: 0;
-}
-
-#sidebar a {
-    flex: 1;
-    padding: 6px 6px 6px 12px;
-    border-radius: 6px;
-    transition: color 200ms ease, background-color 200ms ease;
-}
-
-#sidebar a:hover {
-    background: rgba(255,255,255,0.05);
-}
-
-#sidebar > li > ul > li.submenu-item > p > a {
-    text-transform: uppercase;
-    font-weight: 700;
-    color: #555;
-}
-
-#sidebar li > ul {
-    margin-top: 5px;
-}
-
-#sidebar > li > ul.hasSubmenu,
-#sidebar > li > ul > li.submenu-item + li.submenu-item {
-    margin-top: 20px;
-}
-
-#sidebar a.active,
-#sidebar > li > ul > li.submenu-item > p > a.active {
-    background: var(--accent-color);
-    /* background: rgba(255, 255, 255, 0.1); */
-    color: var(--text-heading);
-    font-weight: 700;
-}
\ No newline at end of file
diff --git a/src/styles/swagger.css b/src/styles/swagger.css
index 472a5043f..310ece9d3 100644
--- a/src/styles/swagger.css
+++ b/src/styles/swagger.css
@@ -1,5 +1,5 @@
 #main .swagger-ui .scheme-container {
-    background: #20212B;
+    background: var(--background-secondary);
 }
 
 #main .swagger-ui .opblock .opblock-section-header {
@@ -7,7 +7,7 @@
 }
 
 #main .swagger-ui .opblock-body pre.microlight {
-    background: #20212B!important;
+    background: var(--background-secondary) !important;
 }
 
 #main .swagger-ui,
@@ -22,6 +22,10 @@
     color: var(--text-primary);
 }
 
+
+#main .swagger-ui .opblock .opblock-summary-operation-id,
+#main .swagger-ui .opblock .opblock-summary-path,
+#main .swagger-ui .opblock .opblock-summary-path__deprecated,
 #main .swagger-ui .btn,
 #main .swagger-ui .model,
 #main .swagger-ui .tab li,
@@ -35,11 +39,11 @@
 }
 
 #main .swagger-ui .model .property.primitive {
-    color: var(--text-muted);
+    color: var(--text-menu);
 }
 
 #main .swagger-ui .prop-type {
-    color: var(--accent-color);
+    color: var(--text-link);
 }
 
 #main .swagger-ui svg {
@@ -82,4 +86,32 @@
 
 #main .swagger-ui .authorization__btn {
     padding-left: 0;
+}
+
+.swagger-ui .info .title small {
+    top: 0;
+    padding: 4px 8px;
+    background: var(--background-highlight);
+}
+
+#main .swagger-ui .info .title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#main .swagger-ui .info .title small pre {
+    color: var(--text-heading);
+    min-width: 0;
+    border: 0;
+    background: none;
+}
+
+#main .swagger-ui .info .title > span {
+    display: flex;
+    align-items: center;
+}
+
+.swagger-ui .info .title small.version-stamp {
+    background: var(--background-highlight);
 }
\ No newline at end of file
diff --git a/src/styles/toc.css b/src/styles/toc.css
index 6ae6962c4..234c25eef 100644
--- a/src/styles/toc.css
+++ b/src/styles/toc.css
@@ -1,12 +1,23 @@
-#toc {
-    flex: var(--pane-size);
-    position: sticky;
-    top: calc(72px + 1rem);
+#toc-pane {
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+    position: sticky;
+    top: 0;
+    order: 3;
+/*         padding: 16px 16px 16px 32px; */
+}
+
+#toc-pane h3 {
+    text-transform: uppercase;
+}
+
+#toc {
+    position: relative;
     height: fit-content;
-    background: var(--top-layer);
     margin: 0;
-    padding: 16px 16px 16px 32px;
     border-radius: 6px;
+    padding: 0 0 0 16px;
 }
 
 #toc, #toc ul {
@@ -18,22 +29,59 @@
 }
 
 #toc li a {
+/*         position: relative; */
+    display: flex;
+    align-items: center;
     color: var(--text-heading);
     transition: color 200ms ease;
+    white-space: nowrap;
 }
 
 #toc li a:hover,
 #toc li a.active {
-    color: var(--accent-color);
+    color: var(--text-link);
+    text-decoration: none;
+}
+
+#toc li a::before {
+    content: "";
+    display: flex;
+    position: absolute;
+    width: 2px;
+    height: 16px;
+    background: transparent;
+    left: 0;
+    transition: background-color 200ms ease;
+}
+
+#toc li a.active::before {
+    background: var(--text-link);
 }
 
 #toc::before {
     content: "";
     display: block;
     position: absolute;
-    left: 16px;
-    top: 20px;
+    left: 0px;
+    top: 4px;
     width: 2px;
-    height: calc(100% - 40px);
-    background: rgba(255, 255, 255, 0.1);
+    height: calc(100% - 8px);
+    background: var(--background-highlight);
+}
+
+#content h1 a.toc-anchor,
+#content h2 a.toc-anchor,
+#content h3 a.toc-anchor,
+#content h4 a.toc-anchor,
+#content h5 a.toc-anchor,
+#content h6 a.toc-anchor {
+    margin-left: 10px;
+}
+
+
+
+@media (max-width: 1200px) {
+    #toc-pane {
+        display: none;
+    }
 }
\ No newline at end of file