diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 983c6f236..00273d504 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -30,15 +30,13 @@ module.exports = {
       },
       {
         property: "og:description",
-        content: `${
-          frontmatter.description ? frontmatter.description : description
-        }`,
+        content: `${frontmatter.description ? frontmatter.description : description
+          }`,
       },
       {
         name: "description",
-        content: `${
-          frontmatter.description ? frontmatter.description : description
-        }`,
+        content: `${frontmatter.description ? frontmatter.description : description
+          }`,
       },
     ];
     for (const meta of default_metas) {
@@ -140,18 +138,31 @@ module.exports = {
           ],
         },
         {
-          // Enrichments
-          title: "Enrichments",
+          title: "Pupil Cloud",
           children: [
-            { title: "Overview", path: "/enrichments/" },
             {
-              title: "Reference Image Mapper",
-              path: "/enrichments/reference-image-mapper/",
+              // Enrichments
+              title: "Enrichments",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/enrichments/" },
+                {
+                  title: "Reference Image Mapper",
+                  path: "/pupil-cloud/enrichments/reference-image-mapper/",
+                },
+                { title: "Marker Mapper", path: "/pupil-cloud/enrichments/marker-mapper/" },
+                { title: "Face Mapper", path: "/pupil-cloud/enrichments/face-mapper/" },
+              ],
             },
-            { title: "Marker Mapper", path: "/enrichments/marker-mapper/" },
-            { title: "Face Mapper", path: "/enrichments/face-mapper/" },
-            { title: "Gaze Overlay", path: "/enrichments/gaze-overlay/" },
-          ],
+            {
+              // Visualizations
+              title: "Visualizations",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/visualizations/" },
+                { title: "Video Renderer", path: "/pupil-cloud/visualizations/video-renderer/" },
+                { title: "Heatmap", path: "/pupil-cloud/visualizations/heatmap/" },
+              ],
+            }
+          ]
         },
         {
           // How-To Guides
@@ -273,27 +284,31 @@ module.exports = {
           ],
         },
         {
-          // Enrichments
-          title: "Enrichments",
+          title: "Pupil Cloud",
           children: [
             {
-              title: "Overview",
-              path: "/enrichments",
-            },
-            {
-              title: "Reference Image Mapper",
-              path: "/enrichments/reference-image-mapper",
-            },
-            {
-              title: "Marker Mapper",
-              path: "/enrichments/marker-mapper/",
+              // Enrichments
+              title: "Enrichments",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/enrichments/" },
+                {
+                  title: "Reference Image Mapper",
+                  path: "/pupil-cloud/enrichments/reference-image-mapper/",
+                },
+                { title: "Marker Mapper", path: "/pupil-cloud/enrichments/marker-mapper/" },
+                { title: "Face Mapper", path: "/pupil-cloud/enrichments/face-mapper/" },
+              ],
             },
-            { title: "Face Mapper", path: "/enrichments/face-mapper" },
             {
-              title: "Gaze Overlay",
-              path: "/enrichments/gaze-overlay",
-            },
-          ],
+              // Visualizations
+              title: "Visualizations",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/visualizations/" },
+                { title: "Video Renderer", path: "/pupil-cloud/visualizations/video-renderer/" },
+                { title: "Heatmap", path: "/pupil-cloud/visualizations/heatmap/" },
+              ],
+            }
+          ]
         },
         {
           // How-To Guides
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 93bbda7c9..d0f7ac546 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -36,6 +36,12 @@ export default {
     return {
       isSidebarOpen: false,
       previousPageUrl: null,
+      undeclaredRoutes: [
+        "pupil-cloud",
+        "enrichments",
+        "export-formats",
+        "visualizations",
+      ],
     };
   },
 
@@ -53,8 +59,9 @@ export default {
       /* Fail safe, previousPage will be null if coming from external source, thus load neon for enrichments and export formats*/
       if (this.previousPageUrl === null) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/neon/";
         } else {
@@ -89,20 +96,23 @@ export default {
       /* This part here checks from which page comes from and sets the previous url accordingly.*/
       if (from.path.includes("invisible")) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/invisible/";
         } else {
           this.previousPageUrl = to.path;
         }
       } else if (
-        from.path.includes("enrichments") ||
-        from.path.includes("export-formats")
+        this.undeclaredRoutes.some((item) =>
+          this.$page.regularPath.includes(item)
+        )
       ) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = from.$page.previousPageUrl;
         } else {
@@ -110,8 +120,9 @@ export default {
         }
       } else {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/neon/";
         } else {
diff --git a/src/enrichments/face-mapper.md b/src/pupil-cloud/enrichments/face-mapper.md
similarity index 92%
rename from src/enrichments/face-mapper.md
rename to src/pupil-cloud/enrichments/face-mapper.md
index 088cc508f..5f6931356 100644
--- a/src/enrichments/face-mapper.md
+++ b/src/pupil-cloud/enrichments/face-mapper.md
@@ -7,7 +7,7 @@ permalink: /enrichments/face-mapper
 
 <div class="pb-4" style="display:flex;justify-content:center;">
   <v-img
-    :src="require('../media/enrichments/face_mapper_header.png')"
+    :src="require('../../media/enrichments/face_mapper_header.png')"
     max-width=100%
   >
   </v-img>
diff --git a/src/enrichments/marker-mapper.md b/src/pupil-cloud/enrichments/marker-mapper.md
similarity index 84%
rename from src/enrichments/marker-mapper.md
rename to src/pupil-cloud/enrichments/marker-mapper.md
index eebab13a7..cd16d1a62 100644
--- a/src/enrichments/marker-mapper.md
+++ b/src/pupil-cloud/enrichments/marker-mapper.md
@@ -5,7 +5,7 @@ permalink: /enrichments/marker-mapper
 # Marker Mapper
 
 <div class="mb-4" style="display:flex;justify-content:center;">
-  <v-img class="rounded" :src="require('../media/enrichments/marker_mapper_header.png')"
+  <v-img class="rounded" :src="require('../../media/enrichments/marker_mapper_header.png')"
   width="80%" 
   alt="A screenshot of the Marker Mapper enrichment on Pupil Cloud."
   title="A screenshot of the Marker Mapper enrichment on Pupil Cloud" />
@@ -18,11 +18,11 @@ For robust detection, you should place enough markers on your surface such that
 You can use these images as a template for printing markers:
 
 <div class="pb-4" style="display:grid;grid-template-columns:1fr 1fr;gap:40px;">
-  <a download="apriltags_tag36h11_0-23.jpg" href="../media/shared/imgs/apriltags_tag36h11_0-23.jpg" title="AprilTags 0-23">
-    <img src="../media/shared/imgs/apriltags_tag36h11_0-23.jpg">
+  <a download="apriltags_tag36h11_0-23.jpg" href="../../media/shared/imgs/apriltags_tag36h11_0-23.jpg" title="AprilTags 0-23">
+    <img src="../../media/shared/imgs/apriltags_tag36h11_0-23.jpg">
   </a>
-  <a download="apriltags_tag36h11_24-47.jpg" href="../../media/shared/imgs/apriltags_tag36h11_24-47.jpg" title="AprilTags 0-23">
-    <img src="../media/shared/imgs/apriltags_tag36h11_24-47.jpg">
+  <a download="apriltags_tag36h11_24-47.jpg" href="../../../media/shared/imgs/apriltags_tag36h11_24-47.jpg" title="AprilTags 0-23">
+    <img src="../../media/shared/imgs/apriltags_tag36h11_24-47.jpg">
   </a>
 </div>
 
@@ -42,7 +42,7 @@ Note that when adding a new marker to the surface definition, another marker tha
 A surface definition always needs to contain at least 2 markers. Thus, at least 2 markers have to be visible in the video frame when initially creating the surface, and you cannot remove further markers from the surface definition when the marker count is down to 2.
 
 <div class="mb-4" style="display:flex;justify-content:center;">
-  <v-img class="rounded" :src="require('../media/enrichments/marker_mapper_additional.png')"
+  <v-img class="rounded" :src="require('../../media/enrichments/marker_mapper_additional.png')"
   width="80%" 
   alt="A screenshot of the Marker Mapper enrichment on Pupil Cloud."
   title="A screenshot of the Marker Mapper enrichment on Pupil Cloud" />
diff --git a/src/enrichments/overview.md b/src/pupil-cloud/enrichments/overview.md
similarity index 86%
rename from src/enrichments/overview.md
rename to src/pupil-cloud/enrichments/overview.md
index 310c00adf..a0414a2dd 100644
--- a/src/enrichments/overview.md
+++ b/src/pupil-cloud/enrichments/overview.md
@@ -1,6 +1,6 @@
 ---
 description: Explanation of all available enrichments including setup instructions.
-permalink: /enrichments
+permalink: /pupil-cloud/enrichments
 ---
 
 # What are Enrichments? 
@@ -21,7 +21,7 @@ From mapping your gaze to real-world features of the environment, like surfaces,
             aspect-ratio="1.4"
             style="margin-bottom:32px;"
             :position="item.position"
-            :src="require(`../media/enrichments/${item.img}`)"
+            :src="require(`../../media/enrichments/${item.img}`)"
           />
           <p class="caption--1 font-weight-bold pb-3">{{ item.title }}</p>
         </router-link>
@@ -47,36 +47,24 @@ export default {
       enrichments: [
         {
           title: "Reference image mapper",
-          to: "/enrichments/reference-image-mapper",
+          to: "/pupil-cloud/enrichments/reference-image-mapper",
           text: "Our markerless solution to map gaze data from the real world onto a reference image.",
           img: "reference_image_mapper_header.png",
         },
         {
           title: "Marker mapper",
-          to: "/enrichments/marker-mapper",
+          to: "/pupil-cloud/enrichments/marker-mapper",
           text: "Use apriltags to get your gaze onto a surface.",
           img: "marker_mapper_header.png",
         },
         {
           title: "Face mapper",
-          to: "/enrichments/face-mapper",
+          to: "/pupil-cloud/enrichments/face-mapper",
           text: "Map gaze data to faces in the scene video.",
           img: "face_mapper_header.png",
         },
-        {
-          title: "Gaze overlay",
-          to: "/enrichments/gaze-overlay",
-          text: "Visualise your gaze on top of the scene video and undistort the scene video.",
-          img: "gaze_overlay_header.png",
-        },
       ],
     };
   },
 }
 </script>
-
-
-
-
-
-
diff --git a/src/enrichments/reference-image-mapper.md b/src/pupil-cloud/enrichments/reference-image-mapper.md
similarity index 91%
rename from src/enrichments/reference-image-mapper.md
rename to src/pupil-cloud/enrichments/reference-image-mapper.md
index 7ca815702..abc8b0c04 100644
--- a/src/enrichments/reference-image-mapper.md
+++ b/src/pupil-cloud/enrichments/reference-image-mapper.md
@@ -1,6 +1,6 @@
 ---
 description: Powerful tool to map gaze data from the scene camera onto a reference image 
-permalink: /enrichments/reference-image-mapper
+permalink: /pupil-cloud/enrichments/reference-image-mapper
 ---
 
 # Reference Image Mapper
@@ -34,10 +34,10 @@ In this guide, we will show you how the Reference Image Mapper can be used in a
 Below, gaze is mapped in four very different environments: to a **magazine cover**, a **basketball backboard**, a **supermarket shelf**, and even a **whole building**!
 
 <PhotoGrid :images="[
-  require(`../media/enrichments/rim/heatmap-0.jpg`),
-  require(`../media/enrichments/rim/heatmap-1.jpg`),
-  require(`../media/enrichments/rim/heatmap-2.jpg`),
-  require(`../media/enrichments/rim/heatmap-3.jpg`),
+  require(`../../media/enrichments/rim/heatmap-0.jpg`),
+  require(`../../media/enrichments/rim/heatmap-1.jpg`),
+  require(`../../media/enrichments/rim/heatmap-2.jpg`),
+  require(`../../media/enrichments/rim/heatmap-3.jpg`),
 ]"/>
 
 Let's take a look at what the Reference Image and Scanning Recording look like to produce these heatmaps.
@@ -50,7 +50,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/magazine-img.jpg')"
+    :src="require('../../media/enrichments/rim/magazine-img.jpg')"
   ></v-img>
     First, we need a high-resolution .jpeg of the page.
   </div>
@@ -71,7 +71,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/basketball-img.jpg')"
+    :src="require('../../media/enrichments/rim/basketball-img.jpg')"
   ></v-img>
     Here we can take a photo of the basketball hoop and court background.
   </div>
@@ -91,7 +91,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/supermarket-img.jpg')"
+    :src="require('../../media/enrichments/rim/supermarket-img.jpg')"
   ></v-img>
     This photo captures the assortment of packagíng in the coffee aisle of a supermarket.
   </div>
@@ -111,7 +111,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/building-img.jpg')"
+    :src="require('../../media/enrichments/rim/building-img.jpg')"
     ></v-img>
     This is a photo of the <i>entire</i> building
   </div>
@@ -144,7 +144,7 @@ Why not try replicating the above examples? Or even try it with your own use cas
   <v-img
     class="rounded" 
     style="margin-bottom:32px;"
-    :src="require('../media/enrichments/rim/rim-in-cloud.png')"
+    :src="require('../../media/enrichments/rim/rim-in-cloud.png')"
     max-width=90%
   >
   </v-img>
@@ -163,7 +163,7 @@ Now when you play back the recording you can see where gaze is mapped to on your
 <div class="pb-4" style="display:flex;justify-content:center;">
   <v-img
     class="rounded" 
-    :src="require('../media/enrichments/rim/basketball-occlusion.png')"
+    :src="require('../../media/enrichments/rim/basketball-occlusion.png')"
     max-width=400px
   >
   </v-img>
diff --git a/src/pupil-cloud/visualizations/heatmap.md b/src/pupil-cloud/visualizations/heatmap.md
new file mode 100644
index 000000000..922939e6a
--- /dev/null
+++ b/src/pupil-cloud/visualizations/heatmap.md
@@ -0,0 +1,15 @@
+---
+description: Create rich visualizations of gaze data by overlaying it onto scene video.
+permalink: /visualizations/heatmap
+---
+## Heatmap
+<div class="pb-4" style="display:flex;justify-content:center;">
+  <v-img
+    :src="require('../../media/enrichments/gaze_overlay_header.png')"
+    max-width=100%
+  >
+  </v-img>
+</div>
+
+TBD
+
diff --git a/src/pupil-cloud/visualizations/overview.md b/src/pupil-cloud/visualizations/overview.md
new file mode 100644
index 000000000..808e612f5
--- /dev/null
+++ b/src/pupil-cloud/visualizations/overview.md
@@ -0,0 +1,61 @@
+---
+description: Explanation of all available enrichments including setup instructions.
+permalink: /pupil-cloud/visualizations
+---
+
+# Visualizations 
+TBD
+
+<div>
+    <div class="grid grid-cols-1 sm-grid-cols-2 md-grid-cols-3 lg-grid-cols-2 xl-grid-cols-3 gap-8">
+      <div v-for="(item, index) in visualizations">
+        <router-link
+          :key="index"
+          :to="item.to"
+        >
+          <v-img
+            class="rounded"
+            aspect-ratio="1.4"
+            style="margin-bottom:32px;"
+            :position="item.position"
+            :src="require(`../../media/enrichments/${item.img}`)"
+          />
+          <p class="caption--1 font-weight-bold pb-3">{{ item.title }}</p>
+        </router-link>
+        <p class="caption--1">
+          {{ item.text }}
+        </p>
+      </div>
+    </div>
+</div>
+
+
+<script>
+export default {
+  data() {
+    return {
+      panel: null,
+      visualizations: [
+        {
+          title: "Video Renderer",
+          to: "/pupil-cloud/visualizations/video-renderer",
+          text: "TBD",
+          img: "reference_image_mapper_header.png",
+        },
+        {
+          title: "Heatmap",
+          to: "/pupil-cloud/visualizations/Heatmap",
+          text: "TBD",
+          img: "reference_image_mapper_header.png",
+        },
+      ],
+    };
+  },
+}
+</script>
+
+
+
+
+
+
diff --git a/src/enrichments/gaze-overlay.md b/src/pupil-cloud/visualizations/video-renderer.md
similarity index 84%
rename from src/enrichments/gaze-overlay.md
rename to src/pupil-cloud/visualizations/video-renderer.md
index 9908e12a6..f1f31d2b5 100644
--- a/src/enrichments/gaze-overlay.md
+++ b/src/pupil-cloud/visualizations/video-renderer.md
@@ -1,11 +1,11 @@
 ---
 description: Create rich visualizations of gaze data by overlaying it onto scene video.
-permalink: /enrichments/gaze-overlay
+permalink: /visualizations/video-renderer
 ---
-## Gaze Overlay
+## Video Renderer
 <div class="pb-4" style="display:flex;justify-content:center;">
   <v-img
-    :src="require('../media/enrichments/gaze_overlay_header.png')"
+    :src="require('../../media/enrichments/gaze_overlay_header.png')"
     max-width=100%
   >
   </v-img>