diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 1e60fc7..6fdbca0 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -3,6 +3,7 @@
 
 	let data = import.meta.glob("/src/routes/**/+page.md");
 	let paths = data;
+	export let items;
 
 	/**
 	 * @param {Record<string, () => Promise<unknown>>} paths
@@ -37,24 +38,52 @@
 	}
 
 	const nestedFolders = buildHierarchy(paths);
+	console.log(nestedFolders)
 
 	// Helper function to recursively render the nested list
 	/**
 	 * @param {{ [x: string]: any; }} node
 	 */
-	function renderNestedList(node, prefix = "") {
-		return Object.keys(node)
-			.map((key) => {
-				const fullPath = `${prefix}/${key}`;
-				return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(
-					node[key],
-					fullPath
-				)}</ul></li>`;
-			})
-			.join("");
-	}
+	// function renderNestedList(node, prefix = "") {
+	// 	return Object.keys(node)
+	// 		.map((key) => {
+	// 			const fullPath = `${prefix}/${key}`;
+	// 			return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(
+	// 				node[key],
+	// 				fullPath
+	// 			)}</ul></li>`;
+	// 		})
+	// 		.join("");
+	// }
+
+	function createHtmlList(obj, parentPath = '') {
+    let html = '';
+
+    for (const key in obj) {
+      const currentPath = parentPath ? `${parentPath}/${key}` : key;
+
+      if (typeof obj[key] === 'object' && Object.keys(obj[key]).length > 0) {
+        // If the value is an object and not empty, create a nested div
+        html += `
+		<details>
+          	<summary><a href="/${currentPath}">${key}</a></summary>
+            <ul>
+              ${createHtmlList(obj[key], currentPath)}
+            </ul>
+          </details>
+        `;
+      } else {
+        // If the value is not an object or empty, create a clickable list item
+        html += `<li><a href="/${currentPath}">${key}</a></li>`;
+      }
+    }
+
+    return html;
+  }
+
+	//const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
+	const renderedList = createHtmlList(nestedFolders);
 
-	const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
 </script>
 
 <div class="container navbar">
diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css
index 069b6c2..3973525 100644
--- a/src/lib/styles/style.css
+++ b/src/lib/styles/style.css
@@ -14,6 +14,7 @@
 	--container-background-color: #26292f;
 	--text-color: #fff;
 	--link-text-color: #afb9c4;
+	--collapsed-background-color: #414753;
 }
 
 @media (prefers-color-scheme: light) {
@@ -72,10 +73,14 @@ main {
 .navbar {
 	float: left;
 	padding: 2rem;
+	min-width: 300px;
+	margin-right: 2rem;
+	font-size: 1.2rem;
 }
 
 ul {
 	padding-left: 10px;
+	padding-right: 20px;
 }
 
 .container {
@@ -104,4 +109,19 @@ a {
 
 a:hover {
 	color: var(--text-color);
+}
+
+details {
+	cursor: pointer;
+	background-color: var(--collapsed-background-color);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	margin: 0.25rem;
+	width: 100%;
+}
+
+details a {
+	padding-left: 0.5rem;
 }
\ No newline at end of file
diff --git a/src/routes/Api/+page.md b/src/routes/Api/+page.md
new file mode 100644
index 0000000..ce62cb2
--- /dev/null
+++ b/src/routes/Api/+page.md
@@ -0,0 +1,6 @@
+# Jonas_Jones API
+---
+This is the documentation on the public part of the Jonas_Jones API. 
+
+
+Part of the API is opensource and can be found on [GitHub](https://github.com/J-onasJones/api-worker). That part of the API is a Couldflare worker and acts as a front-end of the different API endpoints that it serves. Only few commands are currently available since the API is in an early stage and most planned publically available commands haven't been implemented yet.
\ No newline at end of file
diff --git a/src/routes/Api/References/+page.md b/src/routes/Api/References/+page.md
new file mode 100644
index 0000000..92cdf0a
--- /dev/null
+++ b/src/routes/Api/References/+page.md
@@ -0,0 +1,5 @@
+# References
+---
+
+The following are the cureently publically available API calls:
+
diff --git a/src/routes/Api/References/help/+page.md b/src/routes/Api/References/help/+page.md
new file mode 100644
index 0000000..692356f
--- /dev/null
+++ b/src/routes/Api/References/help/+page.md
@@ -0,0 +1,16 @@
+# Help
+---
+Get the link to the documentation.
+
+### Call
+
+```js
+/v1/help
+```
+
+### Response
+*text/plain*
+```
+Please refer to the wiki at https://wiki.jonasjones.dev/Api/
+
+```
diff --git a/src/routes/Api/References/ping/+page.md b/src/routes/Api/References/ping/+page.md
new file mode 100644
index 0000000..a643289
--- /dev/null
+++ b/src/routes/Api/References/ping/+page.md
@@ -0,0 +1,15 @@
+# Ping
+---
+Test the API connection.
+
+### Call
+
+```js
+/v1/ping
+```
+
+### Response
+*text/plain*
+```
+pong
+```
diff --git a/src/routes/Api/References/version/+page.md b/src/routes/Api/References/version/+page.md
new file mode 100644
index 0000000..781bae4
--- /dev/null
+++ b/src/routes/Api/References/version/+page.md
@@ -0,0 +1,16 @@
+# Version
+---
+Get the API version
+
+### Call
+
+```js
+/v1/version
+```
+
+### Response
+*application/json*
+```json
+["0.0.1+alpha-build01"]
+
+```