diff --git a/src/build_docs_website.js b/src-build/docs-website/build_docs_website.js
similarity index 78%
rename from src/build_docs_website.js
rename to src-build/docs-website/build_docs_website.js
index 3738ff8ff..29564aa76 100644
--- a/src/build_docs_website.js
+++ b/src-build/docs-website/build_docs_website.js
@@ -1,44 +1,23 @@
 const fs = require("fs-extra");
-const utils = require("./services/utils.js");
+const utils = require("../../src/services/utils.js");
 const html = require("html");
 
+const SRC_DIR = './src-build/docs-website';
 const USER_GUIDE_DIR = './docs/user_guide';
 const META_PATH = USER_GUIDE_DIR + '/!!!meta.json';
 const WEB_TMP_DIR = './tmp/user_guide_web';
 fs.copySync(USER_GUIDE_DIR, WEB_TMP_DIR);
 
-const meta = JSON.parse(fs.readFileSync(META_PATH).toString());
+const meta = JSON.parse(readFile(META_PATH));
 const rootNoteMeta = meta.files[0];
 const noteIdToMeta = {};
 createNoteIdToMetaMapping(rootNoteMeta);
 
 addNavigationAndStyle(rootNoteMeta, WEB_TMP_DIR);
 
-fs.writeFileSync(WEB_TMP_DIR + '/style.css', getCss());
-
-function getCss() {
-    return `
-body {
-    display: flex;
-    flex-direction: row-reverse;
-    width: 1000px;
-    margin: auto;
-}
-
-.note-tree-nav {
-    width: 200px;
-    margin-right: 20px;
-    overflow-x: auto;
-}
-
-.note-tree-nav ul {
-    padding-left: 20px;
-}
-
-.content {
-    width: 780px;
-}`;
-}
+fs.writeFileSync(WEB_TMP_DIR + '/main.js', readFile(SRC_DIR + "/main.js"));
+fs.writeFileSync(WEB_TMP_DIR + '/main.css', readFile(SRC_DIR + "/main.css"));
+fs.cpSync('libraries/ckeditor/ckeditor-content.css' ,WEB_TMP_DIR + '/ckeditor-content.css');
 
 function addNavigationAndStyle(noteMeta, parentDirPath) {
     const nav = createNavigation(rootNoteMeta, noteMeta);
@@ -48,10 +27,13 @@ function addNavigationAndStyle(noteMeta, parentDirPath) {
 
         console.log(`Adding nav to ${filePath}`);
 
-        const content = fs.readFileSync(filePath).toString();
+        const content = readFile(filePath);
         const depth = noteMeta.notePath.length - 1;
         const updatedContent = content
-            .replaceAll("</head>", `<link rel="stylesheet" href="${"../".repeat(depth)}styles.css">`)
+            .replaceAll("</head>", `
+<link rel="stylesheet" href="${"../".repeat(depth)}main.css">
+<link rel="stylesheet" href="${"../".repeat(depth)}ckeditor-content.css">
+<script src="${"../".repeat(depth)}main.js"></script>`)
             .replaceAll("</body>", nav + "</body>");
         const prettified = html.prettyPrint(updatedContent, {indent_size: 2});
         fs.writeFileSync(filePath, prettified);
@@ -63,8 +45,8 @@ function addNavigationAndStyle(noteMeta, parentDirPath) {
 }
 
 function createNavigation(rootMeta, sourceMeta) {
-    function saveNavigationInner(meta) {
-        let html = '<li>';
+    function saveNavigationInner(meta, parentNoteId = 'root') {
+        let html = `<li data-branch-id="${parentNoteId}_${meta.noteId}">`;
 
         const escapedTitle = utils.escapeHtml(`${meta.prefix ? `${meta.prefix} - ` : ''}${meta.title}`);
 
@@ -81,7 +63,7 @@ function createNavigation(rootMeta, sourceMeta) {
             html += '<ul>';
 
             for (const child of meta.children) {
-                html += saveNavigationInner(child);
+                html += saveNavigationInner(child, meta.noteId);
             }
 
             html += '</ul>'
@@ -141,3 +123,7 @@ function getTargetUrl(targetNoteId, sourceMeta) {
 
     return url;
 }
+
+function readFile(filePath) {
+    return fs.readFileSync(filePath).toString();
+}
diff --git a/src-build/docs-website/main.css b/src-build/docs-website/main.css
new file mode 100644
index 000000000..7ae2ed218
--- /dev/null
+++ b/src-build/docs-website/main.css
@@ -0,0 +1,45 @@
+body {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 1100px;
+    margin: auto;
+    font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
+}
+
+.note-tree-nav {
+    padding-top: 10px;
+    width: 300px;
+    margin-right: 20px;
+    overflow-x: auto;
+}
+
+.note-tree-nav ul {
+    padding-left: 20px;
+    list-style-type: none;
+}
+
+.note-tree-nav ul li {
+    line-height: 150%;
+    font-size: 105%;
+}
+
+.note-tree-nav > ul > li > a {
+    font-size: x-large;
+}
+
+.note-tree-nav a {
+    text-decoration: none;
+}
+
+.note-tree-nav li span.expander, .note-tree-nav li span.spacer {
+    width: 1em;
+    display: inline-block;
+}
+
+.note-tree-nav li span.expander {
+    cursor: pointer;
+}
+
+.content {
+    width: 780px;
+}
diff --git a/src-build/docs-website/main.js b/src-build/docs-website/main.js
new file mode 100644
index 000000000..16c04cd58
--- /dev/null
+++ b/src-build/docs-website/main.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function () {
+    for (const li of document.querySelectorAll('.note-tree-nav li')) {
+        const branchId = li.getAttribute("data-branch-id");
+        if (branchId.startsWith("root_")) {
+            // first level is expanded and cannot be collapsed
+            continue;
+        }
+
+        const newDiv = document.createElement("span");
+        const subList = li.querySelector('ul');
+
+        if (subList) {
+            const toggleVisibility = (show) => {
+                newDiv.innerHTML = show ? "&blacktriangledown; " : "&blacktriangleright; ";
+                subList.style.display = show ? 'block' : 'none';
+
+                localStorage.setItem(branchId, show ? "true" : "false");
+            };
+
+            newDiv.classList.add("expander");
+            newDiv.addEventListener('click', () => toggleVisibility(subList.style.display === 'none'));
+
+            toggleVisibility(localStorage.getItem(branchId) === "true");
+        } else {
+            newDiv.classList.add("spacer");
+        }
+
+        li.prepend(newDiv);
+    }
+}, false);
diff --git a/src/transform_api_docs.js b/src-build/transform_api_docs.js
similarity index 100%
rename from src/transform_api_docs.js
rename to src-build/transform_api_docs.js