diff --git a/docs/4-user-guide/_category_.json b/docs/4-user-guide/_category_.json
index b8bd815..bee39b1 100644
--- a/docs/4-user-guide/_category_.json
+++ b/docs/4-user-guide/_category_.json
@@ -1,6 +1,7 @@
 {
   "label": "User Guide",
   "position": 4,
+  "collapsed": false,
   "link": {
     "type": "generated-index"
   }
diff --git a/old/examples/grid-astar.trace.json b/docs/4-user-guide/examples/grid-astar.trace.json
similarity index 100%
rename from old/examples/grid-astar.trace.json
rename to docs/4-user-guide/examples/grid-astar.trace.json
diff --git a/old/examples/tile.trace.json b/docs/4-user-guide/examples/tile.trace.json
similarity index 100%
rename from old/examples/tile.trace.json
rename to docs/4-user-guide/examples/tile.trace.json
diff --git a/docs/4-user-guide/overview.md b/docs/4-user-guide/overview.md
index 07dd0c5..c605b5a 100644
--- a/docs/4-user-guide/overview.md
+++ b/docs/4-user-guide/overview.md
@@ -1 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # Overview
+
+[TODO]
diff --git a/old/renderers/2D-renderer/2D-inbuilts.md b/docs/4-user-guide/renderer/2D-inbuilts.md
similarity index 58%
rename from old/renderers/2D-renderer/2D-inbuilts.md
rename to docs/4-user-guide/renderer/2D-inbuilts.md
index 3dbcd38..b8d1a74 100644
--- a/old/renderers/2D-renderer/2D-inbuilts.md
+++ b/docs/4-user-guide/renderer/2D-inbuilts.md
@@ -3,23 +3,25 @@
 This document covers the four inbuilt components/views for that the 2D renderer implements.
 
 ## Inbuilt Views
-Here are the structures/formats for the different inbuilts for the 2D renderer. All primitives used by these Inbuilts are [2D renderer primitives](). To use any of these `Inbuilt Views` the [renderer]() property of the view must be set to "2d-pixi".
+
+Here are the structures/formats for the different inbuilts for the 2D renderer. All primitives used by these Inbuilts are [2D renderer primitives](about:blank). To use any of these `Inbuilt Views` the [renderer](about:blank) property of the view must be set to "2d-pixi".
 
 ### Grid View
+
 The Grid View is for grid based pathfinding algorithms, on standard 2D plane. Below is the strucutre of the Grid View component.
 
 ```ts
 GridView = {
   "grid-view": [
     {
-      "$": "rect",
-      "width": 1,
-      "height": 1,
-      "x": "{{x}}",
-      "y": "{{y}}"
-    }
-  ]
-}
+      $: "rect",
+      width: 1,
+      height: 1,
+      x: "{{x}}",
+      y: "{{y}}",
+    },
+  ],
+};
 ```
 
 The Grid View can be utilized by using view like the following
@@ -31,108 +33,108 @@ The Grid View can be utilized by using view like the following
 For the search trace to be renderer each event should include an appropriate `x` and `y` coordinate for the `grid-view` to reference too.
 
 ### Polyanya View
+
 The Polyanya View is an example of navigation mesh based pathfinding algorithms, on standard 2D plane. Below is the strucutre of the Polyanya View component.
 
 ```ts
 PolyanyaView = {
-  "node": [
+  node: [
     {
-      "$": "circle",
-      "radius": 1,
-      "x": "{{x1}}",
-      "y": "{{y1}}"
-    }
+      $: "circle",
+      radius: 1,
+      x: "{{x1}}",
+      y: "{{y1}}",
+    },
   ],
-  "line1": [
+  line1: [
     {
-      "$": "path",
-      "points": [
+      $: "path",
+      points: [
         {
-          "x": "{{x2}}",
-          "y": "{{y2}}"
+          x: "{{x2}}",
+          y: "{{y2}}",
         },
         {
-          "x": "{{x3}}",
-          "y": "{{y3}}"
-        }
+          x: "{{x3}}",
+          y: "{{y3}}",
+        },
       ],
-      "lineWidth" : 0.5
-    }
+      lineWidth: 0.5,
+    },
   ],
-  "line2": [
+  line2: [
     {
-      "$": "path",
-      "points": [
+      $: "path",
+      points: [
         {
-          "x": "{{x1}}",
-          "y": "{{y1}}"
+          x: "{{x1}}",
+          y: "{{y1}}",
         },
         {
-          "x": "{{x2}}",
-          "y": "{{y2}}"
-        }
+          x: "{{x2}}",
+          y: "{{y2}}",
+        },
       ],
-      "lineWidth" : 0.5
-    }
+      lineWidth: 0.5,
+    },
   ],
-  "line3": [
+  line3: [
     {
-      "$": "path",
-      "points": [
+      $: "path",
+      points: [
         {
-          "x": "{{x1}}",
-          "y": "{{y1}}"
+          x: "{{x1}}",
+          y: "{{y1}}",
         },
         {
-          "x": "{{x3}}",
-          "y": "{{y3}}"
-        }
+          x: "{{x3}}",
+          y: "{{y3}}",
+        },
       ],
-      "lineWidth" : 0.5
-      
-    }
+      lineWidth: 0.5,
+    },
   ],
-  "triangle": [
+  triangle: [
     {
-      "$": "polygon",
-      "points": [
+      $: "polygon",
+      points: [
         {
-          "x": "{{x1}}",
-          "y": "{{y1}}"
+          x: "{{x1}}",
+          y: "{{y1}}",
         },
         {
-          "x": "{{x2}}",
-          "y": "{{y2}}"
+          x: "{{x2}}",
+          y: "{{y2}}",
         },
         {
-          "x": "{{x3}}",
-          "y": "{{y3}}"
-        }
-      ]
-    }
+          x: "{{x3}}",
+          y: "{{y3}}",
+        },
+      ],
+    },
   ],
   "polyanya-view": [
     {
-      "$": "node"
+      $: "node",
     },
     {
-      "$": "line1",
-      "persist": false
+      $: "line1",
+      persist: false,
     },
     {
-      "$": "line2",
-      "persist": false
+      $: "line2",
+      persist: false,
     },
     {
-      "$": "line3",
-      "persist": false
+      $: "line3",
+      persist: false,
     },
     {
-      "$": "triangle",
-      "persist": false
-    }
-  ]
-}
+      $: "triangle",
+      persist: false,
+    },
+  ],
+};
 ```
 
 The Polyanya View can be utilized by using view like the following
@@ -141,51 +143,51 @@ The Polyanya View can be utilized by using view like the following
 "main": { "renderer": "2d-pixi", "components" : {"$":"polyanya-view"}}
 ```
 
-The Polyanya View has 3 main sets of variables that each event should inclue. These are the `x` and `y` coordinate for 3 points. 
+The Polyanya View has 3 main sets of variables that each event should inclue. These are the `x` and `y` coordinate for 3 points.
 
 - (x1,y1) : are the coordinates for the current location/node
 - (x2,y2) : are the coordinates for the [TODO]
 - (x3,y3) : are the coordinates for the [TODO]
 
 ### Road Network View
+
 The Road Network View is for network based pathfinding algorithms, on standard 2D plane. Below is the strucutre of the Road Network View component.
 
 ```ts
 RoadView = {
-"node": [
+  node: [
     {
-      "$": "circle",
-      "radius": 0.3,
-      "x": "{{x}}",
-      "y": "{{y}}"
-    }
+      $: "circle",
+      radius: 0.3,
+      x: "{{x}}",
+      y: "{{y}}",
+    },
   ],
-  "line": [
+  line: [
     {
-      "$": "path",
-      "points": [
+      $: "path",
+      points: [
         {
-          "x": "{{parent.x}}",
-          "y": "{{parent.y}}"
+          x: "{{parent.x}}",
+          y: "{{parent.y}}",
         },
         {
-          "x": "{{x}}",
-          "y": "{{y}}"
-        }
+          x: "{{x}}",
+          y: "{{y}}",
+        },
       ],
-      "lineWidth" : 1
-    }
+      lineWidth: 1,
+    },
   ],
-  "road-view":[
-    {
-        "$": "node"
-      },
-      {
-        "$": "line"
-      }
-  ]
-  
-}
+  "road-view": [
+    {
+      $: "node",
+    },
+    {
+      $: "line",
+    },
+  ],
+};
 ```
 
 The Road Network View can be utilized by using view like the following
@@ -197,44 +199,44 @@ The Road Network View can be utilized by using view like the following
 For the search trace to be renderer each event should include an appropriate `x` and `y` coordinate for the `road-view` to reference too.
 
 ### Tree View
+
 The Tree View is for network based pathfinding algorithms, on standard 2D plane. Below is the strucutre of the Road Network View component.
 
 ```ts
 RoadView = {
-"node": [
+  node: [
     {
-      "$": "circle",
-      "radius": 0.3,
-      "x": "{{x}}",
-      "y": "{{y}}"
-    }
+      $: "circle",
+      radius: 0.3,
+      x: "{{x}}",
+      y: "{{y}}",
+    },
   ],
-  "line": [
+  line: [
     {
-      "$": "path",
-      "points": [
+      $: "path",
+      points: [
         {
-          "x": "{{parent.x}}",
-          "y": "{{parent.y}}"
+          x: "{{parent.x}}",
+          y: "{{parent.y}}",
         },
         {
-          "x": "{{x}}",
-          "y": "{{y}}"
-        }
+          x: "{{x}}",
+          y: "{{y}}",
+        },
       ],
-      "lineWidth" : 1
-    }
+      lineWidth: 1,
+    },
+  ],
+  "tree-view": [
+    {
+      $: "node",
+    },
+    {
+      $: "line",
+    },
   ],
-  "tree-view":[
-    {
-        "$": "node"
-      },
-      {
-        "$": "line"
-      }
-  ]
-  
-}
+};
 ```
 
 The Road Network View can be utilized by using view like the following
@@ -243,4 +245,4 @@ The Road Network View can be utilized by using view like the following
 "main": { "renderer": "2d-pixi", "components" : {"$":"tree-view"}}
 ```
 
-Currently, the Tree View component is identical in form to the Road View. However, unlike the Road View the Tree View does not require `x` and `y` values for the events. If these are not provided (this is determined by checking if the source has an `x` and `y`) then `x` and `y` will be automatically generated for all the events in a direct tree format.
\ No newline at end of file
+Currently, the Tree View component is identical in form to the Road View. However, unlike the Road View the Tree View does not require `x` and `y` values for the events. If these are not provided (this is determined by checking if the source has an `x` and `y`) then `x` and `y` will be automatically generated for all the events in a direct tree format.
diff --git a/old/renderers/2D-renderer/2D-renderer.md b/docs/4-user-guide/renderer/2D-renderer.md
similarity index 94%
rename from old/renderers/2D-renderer/2D-renderer.md
rename to docs/4-user-guide/renderer/2D-renderer.md
index 5e9654a..d5df830 100644
--- a/old/renderers/2D-renderer/2D-renderer.md
+++ b/docs/4-user-guide/renderer/2D-renderer.md
@@ -1,9 +1,11 @@
 # 2D Renderer
+
 The 2D Renderer is used for the rendering of two dimensional components. This document covers the four primitive components that the 2D Renderer implements.
 
-To use any primities or inbuilts from the 2D renderer the [renderer]() property of the view must be set to "2d-pixi".
+To use any primities or inbuilts from the 2D renderer the [renderer](about:blank) property of the view must be set to "2d-pixi".
 
 ## Primitives
+
 Here are the structures/formats for the different primitives for the 2D renderer.
 
 ### General Types
@@ -38,7 +40,8 @@ type RectIntrinsicComponent = {
   $: "rect";
   width: number;
   height: number;
-} & Point & GenericInstrinsicComponent;
+} & Point &
+  GenericInstrinsicComponent;
 ```
 
  
@@ -47,12 +50,12 @@ type RectIntrinsicComponent = {
 
 The Circle primitive is a simple type with the radius property and a property of type [Point](#general-types) which is the center of the circle.
 
-
 ```ts
 type CircleIntrinsicComponent = {
   $: "circle";
   radius: number;
-} & Point & GenericInstrinsicComponent;
+} & Point &
+  GenericInstrinsicComponent;
 ```
 
  
@@ -74,7 +77,7 @@ type PolygonIntrinsicComponent = {
 
 ### Bezier Path Primitive
 
-The Path primitive is formatted in a general way which allows for extensibility, as it is implemented to also allow for the usage of Bezier paths. This means that the path can be straight and curved based on the user's needs. 
+The Path primitive is formatted in a general way which allows for extensibility, as it is implemented to also allow for the usage of Bezier paths. This means that the path can be straight and curved based on the user's needs.
 Note: The actual usage of Bezier Paths (straight paths are fine) has not be extensively tested and may have potential bugs.
 
 ```ts
@@ -108,4 +111,4 @@ const component: BezierPathIntrinsicComponent = {
     {x: 2, y: 3},
   ]
 }
-```
\ No newline at end of file
+```
diff --git a/docs/4-user-guide/renderer/_category_.json b/docs/4-user-guide/renderer/_category_.json
new file mode 100644
index 0000000..cf27c83
--- /dev/null
+++ b/docs/4-user-guide/renderer/_category_.json
@@ -0,0 +1,7 @@
+{
+  "label": "Renderer",
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/old/renderers/standard-renderers.md b/docs/4-user-guide/renderer/standard-renderers.md
similarity index 90%
rename from old/renderers/standard-renderers.md
rename to docs/4-user-guide/renderer/standard-renderers.md
index 3d91938..24d904c 100644
--- a/old/renderers/standard-renderers.md
+++ b/docs/4-user-guide/renderer/standard-renderers.md
@@ -2,9 +2,10 @@
 
 _Version 1.0.1_
 
-This document defines all the standard renderers and details there main purposes/usages. All standard renderers will consist of a few intrinsic components which can be used by to user to visual the search traces. 
+This document defines all the standard renderers and details there main purposes/usages. All standard renderers will consist of a few intrinsic components which can be used by to user to visual the search traces.
 
 There are two types of intrinsic components,
+
 - `Primitives` which are foundational components which can be used to construct more complex components (eg. rects, circles)
 - `Inbuilts` these are predefined components for specific search formats like a `grid` or `tree` search view.
 
@@ -14,9 +15,9 @@ There is currently only one renderer implemented which is the 2D Renderer.
 
 ## 2D Renderer
 
-The 2D Renderer is used for the rendering of two dimensional components. It is comprises of 4 Primitive and 4 Inbuilt components, which are briefly outlined below. 
+The 2D Renderer is used for the rendering of two dimensional components. It is comprises of 4 Primitive and 4 Inbuilt components, which are briefly outlined below.
 
-Refer to [2D-renderer.md]() for more specific details.
+Refer to [2D-renderer.md](about:blank) for more specific details.
 
 ### Primitives
 
@@ -34,4 +35,4 @@ There are 4 predefined components for the 2D renderer these are,
 - Grid
 - Road Network
 - Aurora Mesh
-- Tree
\ No newline at end of file
+- Tree
diff --git a/docs/5-tutorials/_category_.json b/docs/5-tutorials/_category_.json
index 8b9b59e..1491374 100644
--- a/docs/5-tutorials/_category_.json
+++ b/docs/5-tutorials/_category_.json
@@ -1,6 +1,7 @@
 {
   "label": "Tutorials",
   "position": 5,
+  "collapsed": false,
   "link": {
     "type": "generated-index"
   }
diff --git a/docs/5-tutorials/overview.md b/docs/5-tutorials/overview.md
index 07dd0c5..0d2060c 100644
--- a/docs/5-tutorials/overview.md
+++ b/docs/5-tutorials/overview.md
@@ -1 +1,3 @@
 # Overview
+
+[TODO]
diff --git a/docs/6-api/_category_.json b/docs/6-api/_category_.json
index d80bc38..e2f2e1e 100644
--- a/docs/6-api/_category_.json
+++ b/docs/6-api/_category_.json
@@ -1,6 +1,7 @@
 {
   "label": "API Reference",
   "position": 6,
+  "collapsed": false,
   "link": {
     "type": "generated-index"
   }
diff --git a/docs/6-api/overview.md b/docs/6-api/overview.md
index 07dd0c5..0d2060c 100644
--- a/docs/6-api/overview.md
+++ b/docs/6-api/overview.md
@@ -1 +1,3 @@
 # Overview
+
+[TODO]
diff --git a/docs/7-contributing/_category_.json b/docs/7-contributing/_category_.json
index 59b9270..fd88b66 100644
--- a/docs/7-contributing/_category_.json
+++ b/docs/7-contributing/_category_.json
@@ -1,6 +1,7 @@
 {
   "label": "Contributing",
   "position": 7,
+  "collapsed": false,
   "link": {
     "type": "generated-index"
   }
diff --git a/docs/7-contributing/overview.md b/docs/7-contributing/overview.md
index 07dd0c5..0d2060c 100644
--- a/docs/7-contributing/overview.md
+++ b/docs/7-contributing/overview.md
@@ -1 +1,3 @@
 # Overview
+
+[TODO]
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 7e6f9b9..7fa8de6 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -19,7 +19,7 @@ const config: Config = {
   organizationName: "path-visualiser", // Usually your GitHub org/user name.
   projectName: "docs", // Usually your repo name.
 
-  onBrokenLinks: "throw",
+  onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
 
   // Even if you don't use internationalization, you can use this field to set
diff --git a/src/css/custom.css b/src/css/custom.css
index 99ff4fc..398c268 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -125,7 +125,8 @@ header > p {
 }
 
 .theme-doc-sidebar-item-link-level-2,
-.theme-doc-sidebar-item-link-level-3 {
+.theme-doc-sidebar-item-link-level-3,
+.theme-doc-sidebar-item-category-level-2 .menu__link--sublist {
   --ifm-menu-color: var(--ifm-color-gray-600);
 }