diff --git a/.github/workflows/build-and-preview-docs.yml b/.github/workflows/build-and-preview-docs.yml
index 3ea042c285d..ddf08ce9223 100644
--- a/.github/workflows/build-and-preview-docs.yml
+++ b/.github/workflows/build-and-preview-docs.yml
@@ -71,6 +71,7 @@ jobs:
       - name: Build PR preview
         if: github.event.action != 'closed'
         env:
+          BASE_URL: /pr-preview/pr-${{ github.event.pull_request.number }}/
           HUGO_PREVIEW: 'true'
         run: |
           npm run build:preview
@@ -145,7 +146,7 @@ jobs:
         with:
           header: pr-preview
           message: |
-            🚀 Preview deployment: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-preview/pr-${{ github.event.pull_request.number }}/
+            🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-${{ github.event.pull_request.number }}/
             > *Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment [here](https://github.com/${{ github.repository }}/actions/workflows/pages/pages-build-deployment)*
 
       - name: Comment on pruned previews
diff --git a/Makefile b/Makefile
index 1b3f5fdd2e3..05a333703ef 100644
--- a/Makefile
+++ b/Makefile
@@ -27,6 +27,9 @@ site: check-go
 build:
 	hugo
 
+docs-build-production:
+	npm run build:production
+
 ## Empty build cache and run docs.layer5.io on your local machine.
 clean: 
 	hugo --cleanDestinationDir
@@ -45,4 +48,4 @@ docker:
 
 ## Format code using Prettier
 format:
-	npm run format
\ No newline at end of file
+	npm run format
diff --git a/assets/js/offline-search.js b/assets/js/offline-search.js
index 5016dd78052..c6e2e4f8399 100644
--- a/assets/js/offline-search.js
+++ b/assets/js/offline-search.js
@@ -123,9 +123,10 @@
         } else {
           results.forEach((r) => {
             const doc = resultDetails.get(r.ref);
-            const href =
-              $searchInput.data('offline-search-base-href') +
-              r.ref.replace(/^\//, '');
+            const href = resolveSearchResultHref(
+              $targetSearchInput.data('offline-search-base-href'),
+              r.ref
+            );
   
             const $entry = $('<div>').addClass('mt-4');
   
@@ -165,6 +166,33 @@
         popover.show();
       };
 
+      const resolveSearchResultHref = (baseHref, ref) => {
+        if (!ref || typeof ref !== 'string') return ref;
+        if (/^(?:[a-z]+:)?\/\//i.test(ref)) return ref;
+        if (/^(?:data:|mailto:|tel:|#)/i.test(ref)) return ref;
+
+        const basePath = new URL(baseHref || '/', window.location.origin)
+          .pathname
+          .replace(/\/+$/, '/');
+
+        if (ref.startsWith('/')) {
+          const baseWithoutTrailingSlash = basePath.replace(/\/$/, '');
+
+          if (
+            basePath === '/' ||
+            ref === baseWithoutTrailingSlash ||
+            ref.startsWith(basePath)
+          ) {
+            return ref;
+          }
+
+          return `${basePath}${ref.replace(/^\//, '')}`;
+        }
+
+        const resolvedUrl = new URL(ref, new URL(basePath, window.location.origin));
+        return `${resolvedUrl.pathname}${resolvedUrl.search}${resolvedUrl.hash}`;
+      };
+
       //Bring focus to search bar
       $(document).on('keydown', function (event) {
         if (event.key === '/' && !(document.activeElement instanceof HTMLInputElement)) {
diff --git a/assets/scss/_fonts_project.scss b/assets/scss/_fonts_project.scss
index 8dca4895683..4ac9d920dee 100644
--- a/assets/scss/_fonts_project.scss
+++ b/assets/scss/_fonts_project.scss
@@ -1,27 +1,27 @@
 @font-face {
     font-family: "Qanelas Soft Black";
-    src: url('/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBlack.otf") format('opentype');
     font-weight: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Black Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBlackItalic.otf") format('opentype');
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Heavy";
-    src: url('/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftHeavy.otf") format('opentype');
     font-weight: 900;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Heavy Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftHeavyItalic.otf") format('opentype');
     font-weight: 900;
     font-style: italic;
     font-display: swap;
@@ -29,14 +29,14 @@
 
 @font-face {
     font-family: "Qanelas Soft ExtraBold";
-    src: url('/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftExtraBold.otf") format('opentype');
     font-weight: 800;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft ExtraBold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf") format('opentype');
     font-weight: 800;
     font-style: italic;
     font-display: swap;
@@ -44,14 +44,14 @@
 
 @font-face {
     font-family: "Qanelas Soft Bold";
-    src: url('/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBold.otf") format('opentype');
     font-weight: bold;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Bold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBoldItalic.otf") format('opentype');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
@@ -59,14 +59,14 @@
 
 @font-face {
     font-family: "Qanelas Soft";
-    src: url('/fonts/qanelas-soft/QanelasSoftSemiBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftSemiBold.otf") format('opentype');
     font-weight: 600;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft SemiBold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf") format('opentype');
     font-weight: 600;
     font-style: italic;
     font-display: swap;
@@ -74,14 +74,14 @@
 
 @font-face {
     font-family: "Qanelas Soft Medium";
-    src: url('/fonts/qanelas-soft/QanelasSoftMedium.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftMedium.otf") format('opentype');
     font-weight: 500;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Medium Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftMediumItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftMediumItalic.otf") format('opentype');
     font-weight: 500;
     font-style: italic;
     font-display: swap;
@@ -89,14 +89,14 @@
 
 @font-face {
     font-family: "Qanelas Soft";
-    src: url('/fonts/qanelas-soft/QanelasSoftRegular.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftRegular.otf") format('opentype');
     font-weight: 400;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Regular Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftRegularItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftRegularItalic.otf") format('opentype');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
@@ -104,14 +104,14 @@
 
 @font-face {
     font-family: "Qanelas Soft Light";
-    src: url('/fonts/qanelas-soft/QanelasSoftLight.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftLight.otf") format('opentype');
     font-weight: 300;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Light Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftLightItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftLightItalic.otf") format('opentype');
     font-weight: 300;
     font-style: italic;
     font-display: swap;
@@ -119,14 +119,14 @@
 
 @font-face {
     font-family: "Qanelas Soft UltraLight";
-    src: url('/fonts/qanelas-soft/QanelasSoftUltraLight.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftUltraLight.otf") format('opentype');
     font-weight: 200;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft UltraLight Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf") format('opentype');
     font-weight: 200;
     font-style: italic;
     font-display: swap;
@@ -134,14 +134,14 @@
 
 @font-face {
     font-family: "Qanelas Soft Thin";
-    src: url('/fonts/qanelas-soft/QanelasSoftThin.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftThin.otf") format('opentype');
     font-weight: 100;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Thin Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftThinItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftThinItalic.otf") format('opentype');
     font-weight: 100;
     font-style: italic;
     font-display: swap;
diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss
index 10810fd56bf..2dd5652a296 100644
--- a/assets/scss/_landing_project.scss
+++ b/assets/scss/_landing_project.scss
@@ -81,10 +81,10 @@
 } 
 .playground-section {
   &.playground-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/meshery-light-icon.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/meshery-light-icon.svg");
   }
   &.video-play-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/video-play.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/video-play.svg");
   }
     &.playground-logo, &.video-play-logo {
     background-repeat: no-repeat;
@@ -102,13 +102,13 @@
 
 .catalog-section {
   &.catalog-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/catalog.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/catalog.svg");
   }
   &.academy-logo{
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/academy.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/academy.svg");
   }
   &.recognition-program-logo{
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/recognition-program.png");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/recognition-program.png");
   }
   &.catalog-logo, &.academy-logo , &.recognition-program-logo {
     background-repeat: no-repeat;
diff --git a/content/en/_index.md b/content/en/_index.md
index cf1084b862e..bff01b6339e 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -14,27 +14,31 @@ description: >
 </div>
 <div>
 <h1 style="margin:4.5rem auto 1.5rem auto">Explore tutorials & documentation</h1>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/cloud" aria-label="Cloud Docs"
-onmouseover="changeImage('layer5', 'images/logos/layer5-light.svg')" onmouseout="restoreImage('layer5', 'images/logos/5-light-no-trim.svg')">
-    <img id="layer5" src="images/logos/5-light-no-trim.svg" alt="Layer5 Cloud Docs Logo" />
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="{{< ref "cloud/_index.md" >}}" aria-label="Cloud Docs"
+data-hover='{{< static "images/logos/layer5-light.svg" >}}' data-default='{{< static "images/logos/5-light-no-trim.svg" >}}'
+onmouseover="changeImage('layer5', this.dataset.hover)" onmouseout="restoreImage('layer5', this.dataset.default)">
+    <img id="layer5" src='{{< static "images/logos/5-light-no-trim.svg" >}}' alt="Layer5 Cloud Docs Logo" />
     Cloud Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/kanvas" aria-label="Kanvas Docs"
-onmouseover="changeImage('Kanvas', 'images/logos/kanvas-light.svg')" onmouseout="restoreImage('Kanvas', 'images/logos/kanvas-icon-color.svg')">
-    <img id="Kanvas" src="images/logos/kanvas-icon-color.svg" alt="Layer5 Kanvas Docs Logo" />
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="{{< ref "kanvas/_index.md" >}}" aria-label="Kanvas Docs"
+data-hover='{{< static "images/logos/kanvas-light.svg" >}}' data-default='{{< static "images/logos/kanvas-icon-color.svg" >}}'
+onmouseover="changeImage('Kanvas', this.dataset.hover)" onmouseout="restoreImage('Kanvas', this.dataset.default)">
+    <img id="Kanvas" src='{{< static "images/logos/kanvas-icon-color.svg" >}}' alt="Layer5 Kanvas Docs Logo" />
     Kanvas Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
 <a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://docs.meshery.io" aria-label="Meshery Docs"
-onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseout="restoreImage('meshery', 'images/logos/meshery-light-icon.svg')">
-    <img id="meshery" src="images/logos/meshery-light-icon.svg" alt="Meshery Docs Logo" />
+data-hover='{{< static "images/logos/meshery-light.svg" >}}' data-default='{{< static "images/logos/meshery-light-icon.svg" >}}'
+onmouseover="changeImage('meshery', this.dataset.hover)" onmouseout="restoreImage('meshery', this.dataset.default)">
+    <img id="meshery" src='{{< static "images/logos/meshery-light-icon.svg" >}}' alt="Meshery Docs Logo" />
     Meshery Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
 <a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://getnighthawk.dev" aria-label="Nighthawk Docs"
-  onmouseover="changeImage('nighthawk', 'images/logos/nighthawk-light.svg')" onmouseout="restoreImage('nighthawk', 'images/logos/nighthawk-logo.svg')">
-    <img id="nighthawk" src="images/logos/nighthawk-logo.svg" alt="Layer5 Nighthawk Docs Logo" />
+data-hover='{{< static "images/logos/nighthawk-light.svg" >}}' data-default='{{< static "images/logos/nighthawk-logo.svg" >}}'
+onmouseover="changeImage('nighthawk', this.dataset.hover)" onmouseout="restoreImage('nighthawk', this.dataset.default)">
+    <img id="nighthawk" src='{{< static "images/logos/nighthawk-logo.svg" >}}' alt="Layer5 Nighthawk Docs Logo" />
     Nighthawk Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
@@ -48,7 +52,7 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
 
   <!-- Video Library -->
   <div class="playground-card grow-1">
-    <a href="/videos">
+    <a href="{{< ref "videos/_index.md" >}}">
     <!-- Wave Visualizer Background
     <canvas id="visualizer" style="position:absolute; top:0; left:0; margin:auto;  width:300px; height:300px;"></canvas> -->
       <div class="landing-card">
@@ -121,7 +125,7 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
               <p>Get help. Find your answer on the forum. Share your knowledge with others.</p>
           </div>
           <div class="forum-image">
-              <img src="images/landing/discuss.png" alt="Discussion Forum Image" />
+              <img src='images/landing/discuss.png' alt="Discussion Forum Image" />
           </div>
         </div>
       </a>
@@ -223,4 +227,4 @@ function restoreImage(imgId, originalSrc) {
       animate();
     }
   </script>
-  <!-- Wave Visualizer Script -->
\ No newline at end of file
+  <!-- Wave Visualizer Script -->
diff --git a/content/en/charts/_index.md b/content/en/charts/_index.md
index 3fb1a38bf77..86f95b75a50 100644
--- a/content/en/charts/_index.md
+++ b/content/en/charts/_index.md
@@ -12,19 +12,19 @@ cascade:
 {{< alert type="info" title="Repository Only">}}
 This page only contains a brief synopsis of the Helm repository.
 
-See the [Self-Hosted section](/cloud/guides/self-hosted/) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
+See the [Self-Hosted section]({{< ref "cloud/guides/self-hosted/_index.md" >}}) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
 {{< /alert >}}
 
 ## Repository Contents
 
-Contained in the Layer5 Helm repository is the [Meshery Remote Provider](https://docs.meshery.io/extensibility/providers) charts (and it's subcharts) for Layer5 Cloud. See the repository's <a href="/charts/index.yaml">full index</a> of Layer5 Helm charts</a>.
+Contained in the Layer5 Helm repository is the [Meshery Remote Provider](https://docs.meshery.io/extensibility/providers) charts (and it's subcharts) for Layer5 Cloud. See the repository's [full index]({{< static "charts/index.yaml" >}}) of Layer5 Helm charts.
 
 ## Chart Source
 
 <p>The source for this chart is located in the <code>layer5io/meshery-cloud</code> repository under <code>install/kubernetes/</code>.</p>
 
 {{< alert type="info" title="Complete Deployment Instructions">}}
-Layer5 Cloud's Helm chart supports a number of [configuration options]({{<ref "/cloud/guides/self-hosted/deployment/helm-chart-values" >}})
+Layer5 Cloud's Helm chart supports a number of [configuration options]({{<ref "cloud/guides/self-hosted/deployment/helm-chart-values.md" >}})
 
-See the [Self-Hosted section](/cloud/guides/self-hosted/) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
+See the [Self-Hosted section]({{< ref "cloud/guides/self-hosted/_index.md" >}}) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
 {{< /alert >}}
diff --git a/content/en/cloud/_index.md b/content/en/cloud/_index.md
index 4003789717e..5ed03f7db28 100755
--- a/content/en/cloud/_index.md
+++ b/content/en/cloud/_index.md
@@ -58,10 +58,10 @@ cascade:
 </div>
 </div>
 
-<a href="/kanvas">
+<a href="{{< ref "kanvas/_index.md" >}}">
   <div class="hidden-highlight-box">
     <div style="min-width:50px; align-self:center;">
-      <img src="/images/logos/kanvas-icon-color.svg" alt="kanvas logo" style="height:65px;width:65px;margin-left:-.45rem; border:0 ; background-color: transparent;" />
+      <img src='{{< static "images/logos/kanvas-icon-color.svg" >}}' alt="kanvas logo" style="height:65px;width:65px;margin-left:-.45rem; border:0 ; background-color: transparent;" />
     </div>
     <div style="margin:auto; padding-left:1rem; color:#ccc; line-height:1.85rem;">
       <strong>Kanvas</strong> delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence.
@@ -76,7 +76,7 @@ cascade:
 
 Layer5 Cloud is the centralized management console and identity provider for the Layer5 ecosystem — specifically for **Kanvas** and **Meshery** deployments. It provides an extensible, highly flexible authorization framework that enables organizations to govern complex, multi-cloud infrastructure with confidence. Think of it as the command center where your teams, workspaces, and cloud-native assets come together under a single, unified platform.
 
-Layer5 Cloud is available both as a fully managed service and as a [self-hosted](/cloud/guides/self-hosted/) deployment, giving organizations the flexibility to meet their own security and compliance requirements.
+Layer5 Cloud is available both as a fully managed service and as a [self-hosted]({{< ref "cloud/guides/self-hosted/_index.md" >}}) deployment, giving organizations the flexibility to meet their own security and compliance requirements.
 
 ## Why use Layer5 Cloud?
 
diff --git a/content/en/cloud/academy/creating-content/building-certifications/index.md b/content/en/cloud/academy/creating-content/building-certifications/index.md
index ea42b0632a4..91bdf56d191 100644
--- a/content/en/cloud/academy/creating-content/building-certifications/index.md
+++ b/content/en/cloud/academy/creating-content/building-certifications/index.md
@@ -128,7 +128,7 @@ A certification is primarily composed of exams. However, you can also include st
 {{< alert type="info" title="How to Create and Configure Exams" >}}
 Every "Exam" file within a certification follows the unified Academy assessment standard.
 
-For detailed instructions on how to write an exam file, define various question types, set scoring and passing percentages, and use advanced options, please refer to our comprehensive [Integrating Assessments in the Academy](../integrating-assessments-in-the-academy/) guide.
+For detailed instructions on how to write an exam file, define various question types, set scoring and passing percentages, and use advanced options, please refer to our comprehensive [Integrating Assessments in the Academy]({{< ref "cloud/academy/creating-content/integrating-assessments-in-the-academy.md" >}}) guide.
 {{< /alert >}}
 
 ### 4. Managing Question Pools and Test Attempts
diff --git a/content/en/cloud/academy/creating-content/extending-the-academy/index.md b/content/en/cloud/academy/creating-content/extending-the-academy/index.md
index dac7aff95fd..478c4530ab1 100644
--- a/content/en/cloud/academy/creating-content/extending-the-academy/index.md
+++ b/content/en/cloud/academy/creating-content/extending-the-academy/index.md
@@ -49,7 +49,7 @@ For example, a **Learning Path** named **"Mastering Kubernetes"** might contain:
       * **Module 2: "Networking Principles"**, containing a **Page** that covers "Services and Ingress" and a **Tests** on networking concepts.
 
 {{< alert type="warning" title="Content Isolation" >}}
-To ensure security and isolation, all of your content files must be placed within a directory named for your organization UUID. You'll learn the specifics of how to do this in our [hands-on tutorial](/cloud/academy/creating-your-learning-path/).
+To ensure security and isolation, all of your content files must be placed within a directory named for your organization UUID. You'll learn the specifics of how to do this in our [hands-on tutorial]({{< ref "cloud/academy/creating-content/creating-your-learning-path/index.md" >}}).
 {{< /alert >}}
 
 ### Advanced Content Features
@@ -172,7 +172,7 @@ The Layer5 Academy platform supports all Hugo shortcode features. For more advan
 
 ### Branded Email Communications
 
-When using the Academy with [white-labeling](/cloud/guides/self-hosted/white-labeling) enabled, all system-generated emails (badge awards, certificate awards, challenge registrations) automatically reflect your organization's branding.
+When using the Academy with [white-labeling]({{< ref "cloud/guides/self-hosted/white-labeling/_index.md" >}}) enabled, all system-generated emails (badge awards, certificate awards, challenge registrations) automatically reflect your organization's branding.
 
 Below is an example email template showing how badge award notifications appear when white-labeling is enabled. The parts enclosed in `{{}}` are automatically replaced with your organization's specific information:
 
diff --git a/content/en/cloud/academy/creating-content/instructor-console-guide/index.md b/content/en/cloud/academy/creating-content/instructor-console-guide/index.md
index 87689faf56e..86c5b9eebc9 100644
--- a/content/en/cloud/academy/creating-content/instructor-console-guide/index.md
+++ b/content/en/cloud/academy/creating-content/instructor-console-guide/index.md
@@ -37,12 +37,12 @@ This tool walks you through three quick steps to create your content's boilerpla
 
 2. **Content Details**: Next, you'll refine additional properties for the content.
 
-> Need help understanding these properties? [Learn more](/cloud/academy/creating-content/creating-your-learning-path/#2-structure-your-learning-path).
+> Need help understanding these properties? [Learn more]({{< ref "cloud/academy/creating-content/creating-your-learning-path/index.md#2-structure-your-learning-path" >}}).
 
 3. **Copy Template**: Finally, the Creation Tool presents you with a **"Generated Front Matter & Setup Guide"**. You'll copy this YAML configuration and place it at the top of the corresponding `_index.md` file in your content repository.
 
 {{< alert type="info" title="Console Creation Tool vs. Full Guides" >}}
-Think of the console's creation tool as a 'quick start' generator. It generates the necessary configuration boilerplate, but the detailed work of writing, structuring files, and publishing your content is done in your Git repository. For that, you'll need to follow our [comprehensive guides](/cloud/academy/creating-content/).
+Think of the console's creation tool as a 'quick start' generator. It generates the necessary configuration boilerplate, but the detailed work of writing, structuring files, and publishing your content is done in your Git repository. For that, you'll need to follow our [comprehensive guides]({{< ref "cloud/academy/creating-content/_index.md" >}}).
 {{< /alert >}}
 
 ## Understanding the Dashboard
@@ -85,7 +85,7 @@ This widget provides a quick inventory of your academy's content:
 {{< alert type="info" title="Content Versioning and Release Process" >}}
 If you've recently published new content but don't see the version number updated here, it is likely due to the platform's two-stage release process. Your updates become fully live only after both your content repository's GitHub Release is created and the subsequent Layer5 Cloud release is deployed. 
 
-For a complete walkthrough of this workflow, see the [Publishing Your Content Guide](/cloud/academy/creating-content/creating-your-learning-path/#5-publishing-your-learning-path).
+For a complete walkthrough of this workflow, see the [Publishing Your Content Guide]({{< ref "cloud/academy/creating-content/creating-your-learning-path/index.md#5-publishing-your-learning-path" >}}).
 {{< /alert >}}
 
 ### Learner Registration
diff --git a/content/en/cloud/academy/creating-content/integrating-assessments-in-the-academy/index.md b/content/en/cloud/academy/creating-content/integrating-assessments-in-the-academy.md
similarity index 100%
rename from content/en/cloud/academy/creating-content/integrating-assessments-in-the-academy/index.md
rename to content/en/cloud/academy/creating-content/integrating-assessments-in-the-academy.md
diff --git a/content/en/cloud/academy/platform-development/index.md b/content/en/cloud/academy/platform-development.md
similarity index 98%
rename from content/en/cloud/academy/platform-development/index.md
rename to content/en/cloud/academy/platform-development.md
index cf4bcf0eb88..e6ecc34aecc 100644
--- a/content/en/cloud/academy/platform-development/index.md
+++ b/content/en/cloud/academy/platform-development.md
@@ -33,7 +33,7 @@ Content repositories automatically import this theme as a Go Module. As a conten
 
 This is the "starter kit" for anyone new to creating Academy content. It provides a pre-configured site that new organizations can fork to get started quickly.
 
-> [Learn How](../creating-your-learning-path/) to create your own learning path
+> [Learn How]({{< ref "cloud/academy/creating-content/creating-your-learning-path/index.md" >}}) to create your own learning path
 
 This content repository doesn't build the final website itself. Instead, it uses an automated workflow to act as a "gatekeeper" for new content. When you create a new GitHub Release, it triggers the following process:
 
diff --git a/content/en/cloud/concepts/_index.md b/content/en/cloud/concepts/_index.md
index 3767458d1b0..9f53c0801fe 100644
--- a/content/en/cloud/concepts/_index.md
+++ b/content/en/cloud/concepts/_index.md
@@ -38,4 +38,4 @@ To get the most out of Layer5 Cloud, it is important to understand how these com
 | **Design to Catalog** | Many-to-One | Designs can be published to a catalog for broader consumption and version control. |
 
 ### Next Steps
-For a deeper dive into the technical implementation of these concepts, please refer to our [Architecture Documentation](/docs/architecture).
+For a deeper dive into the technical implementation of these concepts, please refer to our [Architecture Documentation](https://docs.meshery.io/architecture).
diff --git a/content/en/cloud/concepts/catalog/_index.md b/content/en/cloud/concepts/catalog/_index.md
index 6d8a8863b1b..3ef1f3d7236 100644
--- a/content/en/cloud/concepts/catalog/_index.md
+++ b/content/en/cloud/concepts/catalog/_index.md
@@ -14,13 +14,13 @@ aliases:
 Public Catalog: https://cloud.layer5.io/catalog
 {{%/pageinfo%}}
 
-<!-- {{< figure src="/cloud/concepts/catalog/images/delivering-catalog-content.svg" alt="Delivering-catalog-content" class="image-center-shadow" >}} -->
+<!-- {{< figure src="images/delivering-catalog-content.svg" alt="Delivering-catalog-content" class="image-center-shadow" >}} -->
 
-<img src="/cloud/concepts/catalog/images/delivering-catalog-content.svg" alt="Delivering-catalog-content" />
+<img src="images/delivering-catalog-content.svg" alt="Delivering-catalog-content" />
 
 The Cloud Catalog is a web-based, public catalog to facilitate easy discovery of existing designs. Designs that are published into the catalog can be, but are not always curated for known best practices and patterns. Content is published at [cloud.layer5.io/catalog](https://cloud.layer5.io/catalog), and one-click import of catalog content into Meshery Server is seamlessly integrated.
 
-![Flow for sharing design](./images/Slide51.svg)
+![Flow for sharing design](../../images/Slide51.svg)
 
 ### Content Visibility
 
diff --git a/content/en/cloud/concepts/catalog/images/card-view.png b/content/en/cloud/concepts/catalog/exploring-the-catalog/images/card-view.png
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/card-view.png
rename to content/en/cloud/concepts/catalog/exploring-the-catalog/images/card-view.png
diff --git a/content/en/cloud/concepts/catalog/images/catalog-view.gif b/content/en/cloud/concepts/catalog/exploring-the-catalog/images/catalog-view.gif
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/catalog-view.gif
rename to content/en/cloud/concepts/catalog/exploring-the-catalog/images/catalog-view.gif
diff --git a/content/en/cloud/concepts/catalog/images/design-edit.png b/content/en/cloud/concepts/catalog/exploring-the-catalog/images/design-edit.png
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/design-edit.png
rename to content/en/cloud/concepts/catalog/exploring-the-catalog/images/design-edit.png
diff --git a/content/en/cloud/concepts/catalog/images/design-view.gif b/content/en/cloud/concepts/catalog/exploring-the-catalog/images/design-view.gif
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/design-view.gif
rename to content/en/cloud/concepts/catalog/exploring-the-catalog/images/design-view.gif
diff --git a/content/en/cloud/concepts/catalog/exploring-the-catalog.md b/content/en/cloud/concepts/catalog/exploring-the-catalog/index.md
similarity index 91%
rename from content/en/cloud/concepts/catalog/exploring-the-catalog.md
rename to content/en/cloud/concepts/catalog/exploring-the-catalog/index.md
index 36d6a02edd6..a6eb1e8a17c 100644
--- a/content/en/cloud/concepts/catalog/exploring-the-catalog.md
+++ b/content/en/cloud/concepts/catalog/exploring-the-catalog/index.md
@@ -11,7 +11,7 @@ aliases:
 
 The [Cloud Catalog](https://cloud.layer5.io/catalog) is the central hub for well-architected cloud and cloud native patterns and best practices templates. Here, you can discover and share designs with the wider community.
 
-![Catalog main page view](/cloud/concepts/catalog/images/catalog-view.gif)
+![Catalog main page view](images/catalog-view.gif)
 
 ## Viewing Catalog Items
 
@@ -19,13 +19,13 @@ Meshery Catalog displays all published designs in an organized, searchable forma
 
 ### Top Performers
 
-At the top of the page, you can find the **Top Performers** section. This provides a snapshot of the **Leaderboard**, highlighting the most popular designs based on various [metrics](/cloud/concepts/catalog/metrics/).
+At the top of the page, you can find the **Top Performers** section. This provides a snapshot of the **Leaderboard**, highlighting the most popular designs based on various [metrics]({{< ref "cloud/concepts/catalog/metrics/index.md" >}}).
 
 - To see the complete rankings, click the **Open Leaderboard** button.
 - You can toggle the visibility of this section using the **Hide Performers** / **Show Performers** button.
 
 {{< alert type="info" title="Learn More About Leaderboard" >}}
-To learn more about Leaderboard, see the [Leaderboard documentation](/cloud/concepts/catalog/leaderboard/).
+To learn more about Leaderboard, see the [Leaderboard documentation]({{< ref "cloud/concepts/catalog/leaderboard/index.md" >}}).
 {{< /alert >}}
 
 ### Grid View
@@ -39,10 +39,10 @@ Each card provides key information at a glance:
 - **Metrics:** A row of icons at the bottom displays key usage statistics (Opens, Downloads, Deploys, Clones, Shares)
 - **Detailed Information (on hover):** When you hover over a card, it flips to reveal more details, including the author, design version, technologies used, and the last updated time
 
-<img src="/cloud/concepts/catalog/images/card-view.png" alt="Card View" style="width: 40%" />
+<img src="images/card-view.png" alt="Card View" style="width: 40%" />
 
 {{< alert type="info" title="Understanding Design Metrics" >}}
-To better understand what these Metrics represent, you can learn more about [design metrics](/cloud/concepts/catalog/metrics/).
+To better understand what these Metrics represent, you can learn more about [design metrics]({{< ref "cloud/concepts/catalog/metrics/index.md" >}}).
 {{< /alert >}}
 
 ### Table View
@@ -51,7 +51,7 @@ Table view provides a dense, list-based format that's ideal for sorting and comp
 
 To customize the information displayed in this view, click the **View Columns icon** and select the attributes you want to see, such as Author, Created At, or Downloads.
 
-![Catalog table view](/cloud/concepts/catalog/images/design-view.gif)
+![Catalog table view](images/design-view.gif)
 
 ## Filtering and Sorting Catalog Items
 
@@ -84,7 +84,7 @@ These filters correspond to the metadata authors provide when they publish desig
 
 When you click on any design, you'll see its detail page. This page provides a complete overview of the design's purpose, technical details, and how you can use it.
 
-![Catalog modal](/cloud/concepts/catalog/images/design_model.png)
+![Catalog modal](../images/design_model.png)
 
 ### Key Information
 
@@ -117,7 +117,7 @@ When you clone a design:
 
 The **Download** button allows you to save the design as a `Design (YAML)` file. This is useful for offline backups or sharing the file directly.
 
-> For more advanced use cases, Meshery also supports exporting designs into other formats. To learn more, see the guide on [Exporting Designs](/kanvas/designer/export-designs/).
+> For more advanced use cases, Meshery also supports exporting designs into other formats. To learn more, see the guide on [Exporting Designs]({{< ref "kanvas/designer/export-designs/index.md" >}}).
 
 {{< alert type="warning" title="Metadata Not Included in Download" >}}
 Design downloads include only the core YAML definition, excluding associated catalog metadata such as descriptions, technology, or class.
@@ -127,7 +127,7 @@ Design downloads include only the core YAML definition, excluding associated cat
 
 After you've published a design, you might need to update its metadata or description. Clicking the **Edit** button opens a dialog where you can make your changes.
 
-![Design edit modal](/cloud/concepts/catalog/images/design-edit.png)
+![Design edit modal](images/design-edit.png)
 
 You can modify the following fields:
 
@@ -148,5 +148,5 @@ Some properties of a published design are immutable and cannot be changed:
 If you no longer want a design to be published in the catalog, you can use the **Unpublish** button. This action will remove the design from  Meshery Catalog but does **not delete** it. The design will remain as a private design in your account.
 
 {{< alert type="info" title="Permissions Required" >}}
-Editing/Unpublish published designs requires specific user roles and permissions. Learn more: [Default Permissions documentation](/cloud/reference/default-permissions/).
+Editing/Unpublish published designs requires specific user roles and permissions. Learn more: [Default Permissions documentation]({{< ref "cloud/reference/default-permissions.md" >}}).
 {{< /alert >}}
diff --git a/content/en/cloud/concepts/catalog/images/leaderboard-action.png b/content/en/cloud/concepts/catalog/leaderboard/images/leaderboard-action.png
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/leaderboard-action.png
rename to content/en/cloud/concepts/catalog/leaderboard/images/leaderboard-action.png
diff --git a/content/en/cloud/concepts/catalog/images/leaderboard-page.gif b/content/en/cloud/concepts/catalog/leaderboard/images/leaderboard-page.gif
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/leaderboard-page.gif
rename to content/en/cloud/concepts/catalog/leaderboard/images/leaderboard-page.gif
diff --git a/content/en/cloud/concepts/catalog/images/leaderboard_button.png b/content/en/cloud/concepts/catalog/leaderboard/images/leaderboard_button.png
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/leaderboard_button.png
rename to content/en/cloud/concepts/catalog/leaderboard/images/leaderboard_button.png
diff --git a/content/en/cloud/concepts/catalog/leaderboard.md b/content/en/cloud/concepts/catalog/leaderboard/index.md
similarity index 82%
rename from content/en/cloud/concepts/catalog/leaderboard.md
rename to content/en/cloud/concepts/catalog/leaderboard/index.md
index 1c216d61c4a..a183c0b3968 100644
--- a/content/en/cloud/concepts/catalog/leaderboard.md
+++ b/content/en/cloud/concepts/catalog/leaderboard/index.md
@@ -12,10 +12,10 @@ aliases:
 
 Leaderboard provides a clear and engaging way to view and compare the performance of different Designs, highlighting the most popular and actively used ones within the Cloud.
 
-![Leaderboard page overview](/cloud/concepts/catalog/images/leaderboard-page.gif)
+![Leaderboard page overview](images/leaderboard-page.gif)
 
 {{< alert type="info" title="Understanding Metrics" >}}
-Metrics are quantifiable measures used to track and assess the status, progress, and performance of various activities and user interactions with Designs. Learn more about [Metrics](/cloud/concepts/catalog/metrics/)
+Metrics are quantifiable measures used to track and assess the status, progress, and performance of various activities and user interactions with Designs. Learn more about [Metrics]({{< ref "cloud/concepts/catalog/metrics/index.md" >}})
 {{< /alert >}}
 
 ### How to Access the Leaderboard
@@ -25,7 +25,7 @@ You can reach the Leaderboard page in two ways:
 1. **Global Navigation Bar:** Click the Leaderboard icon in the main navigation bar for quick access.
 2. **From the Catalog Page:** While Browse the Catalog, you can click the 'Open Leaderboard' button in the **Top Performers** section
 
-![Leaderboard Button](/cloud/concepts/catalog/images/leaderboard_button.png)
+![Leaderboard Button](images/leaderboard_button.png)
 
 ### Using the Leaderboard Page
 
@@ -36,4 +36,4 @@ The Leaderboard page offers several ways to explore and interact with:
 - **Customize Your View:** Click the **View Columns** icon to show or hide specific metric columns.
 - **Take Actions:** Click the **Actions** icon to download, share, or perform other actions.
 
-![Leaderboard action menu](/cloud/concepts/catalog/images/leaderboard-action.png)
+![Leaderboard action menu](images/leaderboard-action.png)
diff --git a/content/en/cloud/concepts/catalog/images/cards.png b/content/en/cloud/concepts/catalog/metrics/images/cards.png
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/cards.png
rename to content/en/cloud/concepts/catalog/metrics/images/cards.png
diff --git a/content/en/cloud/concepts/catalog/metrics.md b/content/en/cloud/concepts/catalog/metrics/index.md
similarity index 89%
rename from content/en/cloud/concepts/catalog/metrics.md
rename to content/en/cloud/concepts/catalog/metrics/index.md
index c6cf83d9bd0..405d92afa1a 100644
--- a/content/en/cloud/concepts/catalog/metrics.md
+++ b/content/en/cloud/concepts/catalog/metrics/index.md
@@ -16,16 +16,16 @@ The design catalog can be accessed from the _Layer5 Cloud_ catalog page at [Laye
 
 {{< alert type="info" title="Design Capabilities" >}}
 
-Designs can be imported, exported, versioned, forked, merged, snapshotted, published, shared, embedded, templatized, and more. Learn more about [Designs](/kanvas/getting-started/)
+Designs can be imported, exported, versioned, forked, merged, snapshotted, published, shared, embedded, templatized, and more. Learn more about [Designs]({{< ref "kanvas/getting-started/_index.md" >}})
 
 {{< /alert >}}
 
 You can view the metrics of a Design in two ways:
 1. Below each Design's catalog card, you can see its metrics.
-![Catalog card](/cloud/concepts/catalog/images/cards.png)
+![Catalog card](images/cards.png)
 
 2. By clicking on the catalog card, a modal will pop up displaying all the information about the Design, including its metrics.
-![Catalog modal](/cloud/concepts/catalog/images/design_model.png)
+![Catalog modal](../images/design_model.png)
 
 Here’s a detailed explanation of each metric we track:
 
diff --git a/content/en/cloud/concepts/identity-and-security/_index.md b/content/en/cloud/concepts/identity-and-security/_index.md
index cf408989bfe..45b1cc480f6 100755
--- a/content/en/cloud/concepts/identity-and-security/_index.md
+++ b/content/en/cloud/concepts/identity-and-security/_index.md
@@ -55,8 +55,8 @@ Access is granted through Role-Based Access Control (RBAC). Roles are assigned a
 
 It is tempting to assume that organization membership alone decides what a user can see and do. It does not. Identity, access, and authorization in Layer5 Cloud are decided by a *combination* of three independent mechanisms that compose on top of the organization:
 
-* **Authentication — the organization's connected identity provider (IdP).** Each organization is connected to an identity provider that establishes *who* a user is. More than one organization can — and commonly does — share the same identity provider. An organization may instead **bring its own** identity provider (BYOC), in which case it authenticates against its own dedicated provider. See [Identity Services](/cloud/guides/self-hosted/planning/identity-services/).
-* **Generic authorization — keys → keychains → roles.** Permission [keys](/cloud/concepts/identity-and-security/keys/) roll up into [keychains](/cloud/concepts/identity-and-security/keychains/), which are assigned to [roles](/cloud/concepts/identity-and-security/roles/), which are assigned to users. This decides *what operations* a user may perform — and it is evaluated per organization. The same person can hold different roles, and therefore a different effective set of capabilities, in each organization they belong to.
+* **Authentication — the organization's connected identity provider (IdP).** Each organization is connected to an identity provider that establishes *who* a user is. More than one organization can — and commonly does — share the same identity provider. An organization may instead **bring its own** identity provider (BYOC), in which case it authenticates against its own dedicated provider. See [Identity Services]({{< ref "cloud/guides/self-hosted/planning/identity-services/index.md" >}}).
+* **Generic authorization — keys → keychains → roles.** Permission [keys]({{< ref "cloud/concepts/identity-and-security/keys.md" >}}) roll up into [keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}), which are assigned to [roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}), which are assigned to users. This decides *what operations* a user may perform — and it is evaluated per organization. The same person can hold different roles, and therefore a different effective set of capabilities, in each organization they belong to.
 * **Granular access — resource-access mappings.** A specific resource (for example, a single design) can be shared with an individual user. These mappings grant access to that one resource and **deliberately cross organizational boundaries**: a user does not need to be a member of an organization to open a resource in it when a mapping grants that access. This is by design — it is what makes cross-organization collaboration possible.
 
 The practical consequence is that the same human can be a member of several organizations and have a *different* set of capabilities in each, while also being able to reach individual shared resources in organizations they do not belong to at all.
@@ -73,7 +73,7 @@ Because identity and authorization are layered, "where is the boundary?" has two
 
 > **Same identity provider source means the same security boundary.**
 
-Organizations that share an identity provider — typical for the canonical host and for custom subdomains that use the shared, central provider — sit within the *same* authentication boundary. An organization that brings its own identity provider (BYOC) is a *distinct* authentication boundary, regardless of how its host is named. The DNS shape of the host is not the boundary; the identity provider behind it is. See [Identity Services](/cloud/guides/self-hosted/planning/identity-services/) and [Social sign-in on a custom domain](/cloud/guides/self-hosted/white-labeling/#social-sign-in-on-a-custom-domain) for how this plays out across host types.
+Organizations that share an identity provider — typical for the canonical host and for custom subdomains that use the shared, central provider — sit within the *same* authentication boundary. An organization that brings its own identity provider (BYOC) is a *distinct* authentication boundary, regardless of how its host is named. The DNS shape of the host is not the boundary; the identity provider behind it is. See [Identity Services]({{< ref "cloud/guides/self-hosted/planning/identity-services/index.md" >}}) and [Social sign-in on a custom domain]({{< ref "cloud/guides/self-hosted/white-labeling/_index.md#social-sign-in-on-a-custom-domain" >}}) for how this plays out across host types.
 
 ## Key Management and Tokens
 
@@ -96,4 +96,4 @@ Tokens provide temporary, secure access to the platform.
 
 ### Need more detail?
 
-Check out the [Roles Reference](/cloud/concepts/identity-and-security/roles/) for a complete matrix of permissions for each role.
+Check out the [Roles Reference]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}) for a complete matrix of permissions for each role.
diff --git a/content/en/cloud/concepts/identity-and-security/keychains.md b/content/en/cloud/concepts/identity-and-security/keychains.md
index d5998790286..fbe71e8bdb0 100644
--- a/content/en/cloud/concepts/identity-and-security/keychains.md
+++ b/content/en/cloud/concepts/identity-and-security/keychains.md
@@ -9,7 +9,7 @@ aliases:
 
 ---
 
-In Layer5 Cloud, a collection of permissions is represented as a keychain. One or more keychains can are grouped together and assigned to a [role](/cloud/concepts/identity-and-security/roles). Later, a role can be assigned to a user. This is the general flow of how keychains are assigned to a user.
+In Layer5 Cloud, a collection of permissions is represented as a keychain. One or more keychains can are grouped together and assigned to a [role]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}). Later, a role can be assigned to a user. This is the general flow of how keychains are assigned to a user.
 
 For instance, consider a system shipped default keychain `Team Management`, which is a collection of eight keys: `View All Teams`, `Add User to Team`, `Invite User to Team`, `Remove User from Team`, `Create Team`, `Delete Team`, `Remove User Role from Team`, and `Assign User Role in a Team`. This implies that you can perform all these operations only if your user account possesses a role to which `Team Management` keychain is assigned in a given organization.
 
@@ -67,9 +67,9 @@ If you don't have permission to view keychains for your selected organization, y
 
 1. Select the organization for which you wish to assign keychains to users. You can do this by selecting the organization from the organization context switcher in the top navigation bar.
 2. Navigate to the [Roles](https://cloud.layer5.io/security/roles) page.
-3. Choose from the existing set of roles or create a new role to which you want to assign the keychain. For more information, see [Roles](/cloud/concepts/identity-and-security/roles).
+3. Choose from the existing set of roles or create a new role to which you want to assign the keychain. For more information, see [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 4. Navigate to [Users](https://cloud.layer5.io/identity/users) page.
-5. Select the user to whom you want to assign the role with a new set of permissions. Alternatively, you can invite a new user and assign the role with the new set of permissions separately. For more information, see [Users](/cloud/concepts/identity-and-security/users).
+5. Select the user to whom you want to assign the role with a new set of permissions. Alternatively, you can invite a new user and assign the role with the new set of permissions separately. For more information, see [Users]({{< ref "cloud/concepts/identity-and-security/users/_index.md" >}}).
 
 {{< alert title="Note" >}}
 
diff --git a/content/en/cloud/concepts/identity-and-security/keys.md b/content/en/cloud/concepts/identity-and-security/keys.md
index ea26d890a5d..e50aacf4537 100644
--- a/content/en/cloud/concepts/identity-and-security/keys.md
+++ b/content/en/cloud/concepts/identity-and-security/keys.md
@@ -9,7 +9,7 @@ aliases:
 
 ---
 
-In Layer5 Cloud, permissions are represented as keys, each serving as a unique identifier for a specific permission. One or more keys can be grouped together and assigned to a [keychain](/cloud/concepts/identity-and-security/keychains). Then this keychain can be assigned to a [role](/cloud/concepts/identity-and-security/roles) and that role can be assigned to a user. This is the general flow of how keys are assigned to a user.
+In Layer5 Cloud, permissions are represented as keys, each serving as a unique identifier for a specific permission. One or more keys can be grouped together and assigned to a [keychain]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}). Then this keychain can be assigned to a [role]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}) and that role can be assigned to a user. This is the general flow of how keys are assigned to a user.
 
 For instance, consider a system shipped default key `Create Organization`, which corresponds to the permission to create an organization in the Cloud. This implies that to create an organization, you need to have `Create Organization` key assigned to a keychain, which, in turn, is assigned to a role that's associated with your user account for a given organization.
 
@@ -21,7 +21,7 @@ For instance, consider a system shipped default key `Create Organization`, which
 
 {{< /alert >}}
 
-Because every key is evaluated in the context of an organization, a user's *effective* set of keys can — and will — differ from one organization to another. The same person holds whatever capabilities their role(s) grant them **within each specific organization**, so being able to perform an action in one organization implies nothing about the same action in another. This is why an organization context is itself an authorization boundary. For how this fits with authentication and cross-organization resource sharing, see [Identity and Security → Security Boundaries](/cloud/concepts/identity-and-security/#security-boundaries).
+Because every key is evaluated in the context of an organization, a user's *effective* set of keys can — and will — differ from one organization to another. The same person holds whatever capabilities their role(s) grant them **within each specific organization**, so being able to perform an action in one organization implies nothing about the same action in another. This is why an organization context is itself an authorization boundary. For how this fits with authentication and cross-organization resource sharing, see [Identity and Security → Security Boundaries]({{< ref "cloud/concepts/identity-and-security/_index.md#security-boundaries" >}}).
 
 ### Keys Types
 
@@ -32,13 +32,13 @@ Generally, there are four types of keys:
 3. **Update** - Update keys permit you to update resources. For instance, `Update Organization` key allows you to update an organization details.
 4. **Delete** - Delete keys permit you to delete resources. For instance, `Delete Organization` key allows you to delete an organization.
 
-There are also some special types of keys which don't fall into the standard CRUD (CREATE, READ, UPDATE, DELETE) category. For example, the `Approve Catalog Request` key allows you to approve a catalog request to publish a cloud native design to [Cloud Catalog](/cloud/concepts/catalog) or `Connect Github Account to Workspace` key enables you to connect your GitHub Account to your [workspace](/cloud/concepts/spaces/workspaces) in context of any organization.
+There are also some special types of keys which don't fall into the standard CRUD (CREATE, READ, UPDATE, DELETE) category. For example, the `Approve Catalog Request` key allows you to approve a catalog request to publish a cloud native design to [Cloud Catalog]({{< ref "cloud/concepts/catalog/_index.md" >}}) or `Connect Github Account to Workspace` key enables you to connect your GitHub Account to your [workspace]({{< ref "cloud/concepts/spaces/workspaces.md" >}}) in context of any organization.
 
 
 ### Keys Enforcement
 
 The primary purpose of key enforcement is to ensure that you can only perform actions for which you have the necessary permissions within the context of your selected/available organization. This is achieved by disabling or hiding the UI elements associated with actions for which you lack the required permissions. This approach not only provides clarity regarding what actions you are authorized to perform but also prevents you from attempting actions that you do not have authorization to execute.
-For more information on managing permissions within an organization and use of organization context switcher, see [Organizations](/cloud/concepts/identity-and-security/organizations).
+For more information on managing permissions within an organization and use of organization context switcher, see [Organizations]({{< ref "cloud/concepts/identity-and-security/organizations/_index.md" >}}).
 
 Each key is enforced at specific UI elements. For instance, the `Create Organization` key is enforced at the **Create Organization** button in the **Organizations** page. This implies that the button is disabled if you don't have the `Create Organization` assigned to a keychain, which, in turn, is assigned to a role that's associated with your user account for a given organization.
 
@@ -59,12 +59,12 @@ If you don't have permission to view keys for your selected organization, you wi
 
 1. Select the organization for which you wish to assign keys to users. You can do this by selecting the organization from the organization context switcher in the top navigation bar.
 2. Navigate to [Keychains](https://cloud.layer5.io/security/keychains) page.
-3. Choose from the existing set of keychains or create a new keychain to which you want to assign keys. For more information, see [Keychains](/cloud/concepts/identity-and-security/keychains).
+3. Choose from the existing set of keychains or create a new keychain to which you want to assign keys. For more information, see [Keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}).
 4. Choose one more of your desired keys from the list of available keys.
 5. Navigate to the [Roles](https://cloud.layer5.io/security/roles) page.
-6. Choose from the existing set of roles or create a new role to which you want to assign the keychain. For more information, see [Roles](/cloud/concepts/identity-and-security/roles).
+6. Choose from the existing set of roles or create a new role to which you want to assign the keychain. For more information, see [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 7. Navigate to [Users](https://cloud.layer5.io/identity/users) page.
-8. Select the user to whom you want to assign the role with a new set of permissions. Alternatively, you can invite a new user and assign the role with the new set of permissions separately. For more information, see [Users](/cloud/concepts/identity-and-security/users).
+8. Select the user to whom you want to assign the role with a new set of permissions. Alternatively, you can invite a new user and assign the role with the new set of permissions separately. For more information, see [Users]({{< ref "cloud/concepts/identity-and-security/users/_index.md" >}}).
 
 {{< alert title="Note" >}}
 
diff --git a/content/en/cloud/concepts/identity-and-security/organizations/_index.md b/content/en/cloud/concepts/identity-and-security/organizations/_index.md
index 8c5b2f28dfa..116757c2273 100755
--- a/content/en/cloud/concepts/identity-and-security/organizations/_index.md
+++ b/content/en/cloud/concepts/identity-and-security/organizations/_index.md
@@ -14,11 +14,11 @@ Organizations are the basic unit of multi-tenancy — and the core security boun
 
 Outside of grouping users together, teams offer control access to workspaces and to workspace resources such as environments and managed and unmanaged connections
 
-<img src="/cloud/concepts/identity-and-security/images/organization_units.svg" alt="Organizational units" style="width: 35%;" />
+<img src="images/organization_units.svg" alt="Organizational units" style="width: 35%;" />
 
 ## Example: The Orbital Labs Ecosystem
 
-The following organizations illustrate how multi-tenancy works across provider, startup, and enterprise tiers. Follow along in the rest of the docs using [Five and the cast at Orbital Labs](/cloud/getting-started/meet-five).
+The following organizations illustrate how multi-tenancy works across provider, startup, and enterprise tiers. Follow along in the rest of the docs using [Five and the cast at Orbital Labs]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 
 {{< cardpane >}}
 {{% card header="**Constellation Cloud** — Provider" %}}
@@ -57,9 +57,9 @@ Users of one organization may be granted access to resources (workspaces, design
 Cross-organization access works through **resource-access mappings** — a grant attached to an individual resource (such as a single design) that names the user it is shared with. These mappings **deliberately cross the organization boundary**: a user does *not* need to be a member of an organization to open a resource that has been shared with them there. For example, when Maya at Orbital Labs shares the `stellar-saas-platform` design with Marcus at Stellar Dynamics, Marcus can open that one design even though he is not a member of Orbital Labs. This is intentional — it is the mechanism that makes cross-org collaboration possible — and it is distinct from organization membership and from the org-scoped roles described below. Sharing a single resource grants access to *that resource only*; it does not make the recipient a member of the organization or grant them any of its other resources.
 
 {{< alert type="info" >}}
-Identity and authorization are decided by a combination of mechanisms, not by organization membership alone. For how the connected identity provider, org-scoped roles, and resource-access mappings fit together — and what counts as a security boundary — see [Identity and Security → Security Boundaries](/cloud/concepts/identity-and-security/#security-boundaries).
+Identity and authorization are decided by a combination of mechanisms, not by organization membership alone. For how the connected identity provider, org-scoped roles, and resource-access mappings fit together — and what counts as a security boundary — see [Identity and Security → Security Boundaries]({{< ref "cloud/concepts/identity-and-security/_index.md#security-boundaries" >}}).
 {{< /alert >}}
 
 {{< alert type="info" >}}
-See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full narrative reference, including team structure and workspace inventory.
+See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full narrative reference, including team structure and workspace inventory.
 {{< /alert >}}
diff --git a/content/en/cloud/concepts/identity-and-security/images/organization_units.svg b/content/en/cloud/concepts/identity-and-security/organizations/images/organization_units.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/organization_units.svg
rename to content/en/cloud/concepts/identity-and-security/organizations/images/organization_units.svg
diff --git a/content/en/cloud/concepts/identity-and-security/roles/_index.md b/content/en/cloud/concepts/identity-and-security/roles/_index.md
index 0a2ccdee45b..e225cfe5be2 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/_index.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/_index.md
@@ -12,13 +12,13 @@ aliases:
 
 Roles map permissions to users. Roles contain any number of keychains, which contain any number of keys (permissions). Assign roles to users to grant permissions.
 
-![roles](/cloud/concepts/identity-and-security/images/roles-overview.svg "image-center-no-shadow")
+![roles](images/roles-overview.svg "image-center-no-shadow")
 
 ## Provider Admin Role
 
 {{< cardpane >}}
 {{% card header="<a href='https://docs.layer5.io/cloud/reference/default-permissions/#Provider+Admin' target='_blank'>Provider Admin Role</a>" %}}
-![role-provider](/cloud/concepts/identity-and-security/images/role-provider-admin.svg)
+![role-provider](images/role-provider-admin.svg)
 {{% /card %}}
 {{% card %}}
 
@@ -55,7 +55,7 @@ Roles map permissions to users. Roles contain any number of keychains, which con
 
 {{< cardpane >}}
 {{% card %}}
-![organization-administrator and manager](/cloud/concepts/identity-and-security/images/organization-roles.svg)
+![organization-administrator and manager](images/organization-roles.svg)
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -116,14 +116,14 @@ Organization owners carry the organization administrator role, and may be joined
 
 The entitlement of "organization owner" is automatically bestowed to the creator of a organization. The individual user who created a given organization initially is therefore granted certain administrative privileges beyond that of other organization administrators. Specifically, organization owners retain the sole permission to delete the organization.
 
-For more information, see [Organization](/cloud/concepts/identity-and-security/organizations).
+For more information, see [Organization]({{< ref "cloud/concepts/identity-and-security/organizations/_index.md" >}}).
 {{< /alert >}}
 
 ## Workspace Roles
 
 {{< cardpane >}}
 {{% card %}}
-![workspace-administrator](/cloud/concepts/identity-and-security/images/workspace-roles.svg)
+![workspace-administrator](images/workspace-roles.svg)
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -166,7 +166,7 @@ The entitlement of "workspace owner" is automatically bestowed to the creator of
 
 {{< cardpane >}}
 {{% card %}}
-![team-admins-and-manager](/cloud/concepts/identity-and-security/images/team-roles.svg)
+![team-admins-and-manager](images/team-roles.svg)
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -215,14 +215,14 @@ Team owners carry the team administrator role, and may be joined in their team a
 
 The entitlement of "team owner" is automatically bestowed to the creator of a team. The individual user who created a given team initially is therefore granted certain administrative privileges beyond that of other team administrators. Specifically, team owners retain the sole permission to delete the team.
 
-For more information, see [Teams](/cloud/concepts/identity-and-security/teams).
+For more information, see [Teams]({{< ref "cloud/concepts/identity-and-security/teams/_index.md" >}}).
 {{< /alert >}}
 
 ## Example: The Orbital Labs Role Hierarchy
 
-The following illustrates how Provider Admin, Org Admin, and Team Admin roles stack in practice across the Orbital Labs ecosystem. See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full narrative.
+The following illustrates how Provider Admin, Org Admin, and Team Admin roles stack in practice across the Orbital Labs ecosystem. See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full narrative.
 
-<img src="/images/five/layer5-five-mascot-means-business.svg" alt="Five means business" style="width:90px; float:right; margin-left:1.5rem; margin-bottom:1rem;" />
+<img src='../../../images/five/layer5-five-mascot-means-business.svg' alt="Five means business" style="width:90px; float:right; margin-left:1.5rem; margin-bottom:1rem;" />
 
 {{< cardpane >}}
 {{% card header="**Dr. Aiko Sato** — Provider Admin" %}}
diff --git a/content/en/cloud/concepts/identity-and-security/images/academy-admin.svg b/content/en/cloud/concepts/identity-and-security/roles/academy-roles/images/academy-admin.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/academy-admin.svg
rename to content/en/cloud/concepts/identity-and-security/roles/academy-roles/images/academy-admin.svg
diff --git a/content/en/cloud/concepts/identity-and-security/images/learner.svg b/content/en/cloud/concepts/identity-and-security/roles/academy-roles/images/learner.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/learner.svg
rename to content/en/cloud/concepts/identity-and-security/roles/academy-roles/images/learner.svg
diff --git a/content/en/cloud/concepts/identity-and-security/roles/academy-roles.md b/content/en/cloud/concepts/identity-and-security/roles/academy-roles/index.md
similarity index 81%
rename from content/en/cloud/concepts/identity-and-security/roles/academy-roles.md
rename to content/en/cloud/concepts/identity-and-security/roles/academy-roles/index.md
index af1ed9e3ea4..51917879d7f 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/academy-roles.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/academy-roles/index.md
@@ -12,7 +12,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card header="Academy Administrator" %}}
-<img src="/cloud/concepts/identity-and-security/images/academy-admin.svg" link="images/academy-admin.svg"  width="100%" alt="Academy Administrator Roles" />
+<img src="images/academy-admin.svg" link="images/academy-admin.svg"  width="100%" alt="Academy Administrator Roles" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -42,15 +42,15 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
 
 {{< cardpane >}}
 {{% card header="Learner" %}}
-Learner = A [User](../roles/user-role.md) who has registered for academy content.
-<img src="/cloud/concepts/identity-and-security/images/learner.svg" link="images/learner.svg"  width="100%" alt="Learner Roles" />
+Learner = A [User]({{< ref "cloud/concepts/identity-and-security/roles/user-role/index.md" >}}) who has registered for academy content.
+<img src="images/learner.svg" link="images/learner.svg"  width="100%" alt="Learner Roles" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -86,7 +86,7 @@ While the maximum number of instances is unlimited, the available seats for Lear
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 **Status as a Learner**
 
diff --git a/content/en/cloud/concepts/identity-and-security/images/organization-roles.svg b/content/en/cloud/concepts/identity-and-security/roles/images/organization-roles.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/organization-roles.svg
rename to content/en/cloud/concepts/identity-and-security/roles/images/organization-roles.svg
diff --git a/content/en/cloud/concepts/identity-and-security/images/role-provider-admin.svg b/content/en/cloud/concepts/identity-and-security/roles/images/role-provider-admin.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/role-provider-admin.svg
rename to content/en/cloud/concepts/identity-and-security/roles/images/role-provider-admin.svg
diff --git a/content/en/cloud/concepts/identity-and-security/images/roles-overview.svg b/content/en/cloud/concepts/identity-and-security/roles/images/roles-overview.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/roles-overview.svg
rename to content/en/cloud/concepts/identity-and-security/roles/images/roles-overview.svg
diff --git a/content/en/cloud/concepts/identity-and-security/images/team-roles.svg b/content/en/cloud/concepts/identity-and-security/roles/images/team-roles.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/team-roles.svg
rename to content/en/cloud/concepts/identity-and-security/roles/images/team-roles.svg
diff --git a/content/en/cloud/concepts/identity-and-security/images/workspace-roles.svg b/content/en/cloud/concepts/identity-and-security/roles/images/workspace-roles.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/workspace-roles.svg
rename to content/en/cloud/concepts/identity-and-security/roles/images/workspace-roles.svg
diff --git a/content/en/cloud/concepts/identity-and-security/roles/organization-roles.md b/content/en/cloud/concepts/identity-and-security/roles/organization-roles.md
index 13f9a2d028a..94e4ff4f2e7 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/organization-roles.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/organization-roles.md
@@ -12,7 +12,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card header="Default Organization Roles" %}}
-<img src="/cloud/concepts/identity-and-security/images/organization-roles.svg" link="images/organization-roles.svg"  width="100%" alt="Organization Roles" />
+<img src="../images/organization-roles.svg" link="../images/organization-roles.svg"  width="100%" alt="Organization Roles" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -43,7 +43,7 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
@@ -73,7 +73,7 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
diff --git a/content/en/cloud/concepts/identity-and-security/roles/provider-admin-roles.md b/content/en/cloud/concepts/identity-and-security/roles/provider-admin-roles.md
index 3fa0126d02e..56ad2de2407 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/provider-admin-roles.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/provider-admin-roles.md
@@ -13,7 +13,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card %}}
-<img src="/cloud/concepts/identity-and-security/images/role-provider-admin.svg" />
+<img src="../images/role-provider-admin.svg" />
 {{% /card %}}
 {{% card header="## Provider Administrator" %}}
 
diff --git a/content/en/cloud/concepts/identity-and-security/roles/team-roles.md b/content/en/cloud/concepts/identity-and-security/roles/team-roles.md
index 51ded8f84dc..30312f6b9d6 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/team-roles.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/team-roles.md
@@ -12,7 +12,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card header="Default Team Roles" %}}
-<img src="/cloud/concepts/identity-and-security/images/team-roles.svg" link="images/team-roles.svg"  width="100%" alt="Team Roles" />
+<img src="../images/team-roles.svg" link="../images/team-roles.svg"  width="100%" alt="Team Roles" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -42,7 +42,7 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
diff --git a/content/en/cloud/concepts/identity-and-security/images/user-role.svg b/content/en/cloud/concepts/identity-and-security/roles/user-role/images/user-role.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/images/user-role.svg
rename to content/en/cloud/concepts/identity-and-security/roles/user-role/images/user-role.svg
diff --git a/content/en/cloud/concepts/identity-and-security/roles/user-role.md b/content/en/cloud/concepts/identity-and-security/roles/user-role/index.md
similarity index 82%
rename from content/en/cloud/concepts/identity-and-security/roles/user-role.md
rename to content/en/cloud/concepts/identity-and-security/roles/user-role/index.md
index b13c9fe4897..f81d362605d 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/user-role.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/user-role/index.md
@@ -12,7 +12,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card header="Default User Role" %}}
-<img src="/cloud/concepts/identity-and-security/images/user-role.svg" link="images/user-role.svg"  width="100%" alt="User Role" />
+<img src="images/user-role.svg" link="images/user-role.svg"  width="100%" alt="User Role" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -41,7 +41,7 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
diff --git a/content/en/cloud/concepts/identity-and-security/roles/workspace-roles.md b/content/en/cloud/concepts/identity-and-security/roles/workspace-roles.md
index b3cf3b64381..78feac53851 100644
--- a/content/en/cloud/concepts/identity-and-security/roles/workspace-roles.md
+++ b/content/en/cloud/concepts/identity-and-security/roles/workspace-roles.md
@@ -12,7 +12,7 @@ aliases:
 
 {{< cardpane >}}
 {{% card %}}
-<img src="/cloud/concepts/identity-and-security/images/workspace-roles.svg" link="images/workspace-roles.svg"  width="100%" alt="Workspace Roles" />
+<img src="../images/workspace-roles.svg" link="../images/workspace-roles.svg"  width="100%" alt="Workspace Roles" />
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -43,7 +43,7 @@ aliases:
 
 **What permissions does this role have?**
 
-- Check [Permissions Reference](/cloud/reference/default-permissions/)
+- Check [Permissions Reference]({{< ref "cloud/reference/default-permissions.md" >}})
 
 {{% /card %}}
 {{< /cardpane >}}
diff --git a/content/en/cloud/concepts/identity-and-security/teams/_index.md b/content/en/cloud/concepts/identity-and-security/teams/_index.md
index 3b63e77a2ea..852672e88c7 100755
--- a/content/en/cloud/concepts/identity-and-security/teams/_index.md
+++ b/content/en/cloud/concepts/identity-and-security/teams/_index.md
@@ -16,9 +16,9 @@ Outside of grouping users together, teams offer control access to workspaces and
 
 ## Example: Orbital Labs Teams
 
-The following teams illustrate how organizations use teams to segment access and responsibilities. Follow the full story at [Meet Five and the Cast](/cloud/getting-started/meet-five).
+The following teams illustrate how organizations use teams to segment access and responsibilities. Follow the full story at [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 
-<img src="/images/five/team-of-fives.svg" alt="Team of Fives" style="width:120px; float:right; margin-left:1.5rem; margin-bottom:1rem;" />
+<img src='images/team-of-fives.svg' alt="Team of Fives" style="width:120px; float:right; margin-left:1.5rem; margin-bottom:1rem;" />
 
 {{< cardpane >}}
 {{% card header="**Infrastructure Team**" %}}
@@ -38,7 +38,7 @@ Controls access to the development workspace (`orbital-dev`). Rex deploys often;
 {{< /cardpane >}}
 
 {{< alert type="info" >}}
-An Org Admin may also serve as a Team Admin — Maya Chen holds both roles at Orbital Labs. See [Roles](/cloud/concepts/identity-and-security/roles/) for more on how role assignments stack.
+An Org Admin may also serve as a Team Admin — Maya Chen holds both roles at Orbital Labs. See [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}) for more on how role assignments stack.
 {{< /alert >}}
 
 ## Add a Team
@@ -49,7 +49,7 @@ A team is simply a group that an administrator can create in the Google Admin co
 
 Below the top-level organization, you can add as many teams as you want - at the same level. Hierarchal teams are not currently supported. When you change a setting at the higher level organization, the settings for all child teams that inherit that setting also change. Custom settings at the team level, however, remain unchanged.
 
->Learn more about the [organizational structure](/cloud/concepts/identity-and-security).
+>Learn more about the [organizational structure]({{< ref "cloud/concepts/identity-and-security/_index.md" >}}).
 
 {{< alert type="info" title="Team Ownership">}}
 If you are the current team owner, you can’t remove yourself from the team until you transfer ownership to another team administrator.
@@ -59,7 +59,7 @@ If you are the current team owner, you can’t remove yourself from the team unt
 
 The "Open Team Invite" feature allows administrators to use shareable "Team Invite Links" for users to join a particular team. This link-based invitation method functions much like an [Open Org Invite Link](https://docs.layer5.io/cloud/guides/organizations/org-management/), but is tailored for team-specific invitations and provides a direct alternative to adding members manually.
 
-![Process of open team invite](/cloud/concepts/identity-and-security/teams/open_team_invite.gif)
+![Process of open team invite](images/open_team_invite.gif)
 
 ### When to Use
 
diff --git a/content/en/cloud/concepts/identity-and-security/teams/open_team_invite.gif b/content/en/cloud/concepts/identity-and-security/teams/images/open_team_invite.gif
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/teams/open_team_invite.gif
rename to content/en/cloud/concepts/identity-and-security/teams/images/open_team_invite.gif
diff --git a/static/images/five/team-of-fives.svg b/content/en/cloud/concepts/identity-and-security/teams/images/team-of-fives.svg
similarity index 100%
rename from static/images/five/team-of-fives.svg
rename to content/en/cloud/concepts/identity-and-security/teams/images/team-of-fives.svg
diff --git a/content/en/cloud/concepts/identity-and-security/tokens.md b/content/en/cloud/concepts/identity-and-security/tokens.md
index 12df225221f..4e39d0c946f 100644
--- a/content/en/cloud/concepts/identity-and-security/tokens.md
+++ b/content/en/cloud/concepts/identity-and-security/tokens.md
@@ -19,7 +19,7 @@ Layer5 Cloud REST API uses [OAuth 2.0](https://oauth.net/2/) for authentication
 Access tokens are opaque tokens that conform to the OAuth 2.0 framework. They contain authorization information, but not identity information. They are used to authenticate and provide authorization information to Layer5 APIs. Access tokens are associated with a user account. They have an unlimited lifetime and can be revoked at any time.
 
 {{< alert type="info" title="API Tokens are User-Scoped, Not Organization-Scoped" >}}
-Layer5 Cloud API tokens are scoped to your user account, not to a specific organization. This means a single API token provides access to all organizations you are a member of, similar to how [GitHub Personal Access Tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) work. For users who belong to multiple organizations, see [Specifying Organization Context](/cloud/reference/api-reference/#specifying-organization-context) in the REST API documentation to learn how to control which organization your API requests operate on.
+Layer5 Cloud API tokens are scoped to your user account, not to a specific organization. This means a single API token provides access to all organizations you are a member of, similar to how [GitHub Personal Access Tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) work. For users who belong to multiple organizations, see [Specifying Organization Context]({{< ref "cloud/reference/api-reference/_index.md#specifying-organization-context" >}}) in the REST API documentation to learn how to control which organization your API requests operate on.
 {{< /alert >}}
 
 ## Creating tokens
diff --git a/content/en/cloud/concepts/identity-and-security/users/_index.md b/content/en/cloud/concepts/identity-and-security/users/_index.md
index 32fcde02625..1fed3950147 100755
--- a/content/en/cloud/concepts/identity-and-security/users/_index.md
+++ b/content/en/cloud/concepts/identity-and-security/users/_index.md
@@ -16,7 +16,7 @@ Anyone who uses Layer5 Cloud signs into a user account. Your user account is you
 
 {{< cardpane >}}
 {{% card header="**Five** — Platform Engineer" %}}
-<img src="/images/five/1.svg" alt="Five" style="width:70px; float:right; margin-left:1rem; background:#fff;" />
+<img src='../../../images/five/1.svg' alt="Five" style="width:70px; float:right; margin-left:1rem; background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** User (Platform Engineer)  
@@ -24,10 +24,10 @@ Anyone who uses Layer5 Cloud signs into a user account. Your user account is you
 
 Curious, enthusiastic, and reliably the first to discover that a feature works differently than the docs say it does.
 
-[See full cast →](/cloud/getting-started/meet-five)
+[See full cast →]({{< ref "cloud/getting-started/meet-five/_index.md" >}})
 {{% /card %}}
 {{% card header="**Maya Chen** — Org Admin" %}}
-<img src="/images/five/2.svg" alt="Maya Chen" style="width:70px; float:right; margin-left:1rem; background:#fff;" />
+<img src='../../../images/five/2.svg' alt="Maya Chen" style="width:70px; float:right; margin-left:1rem; background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** Org Admin + Development Team Admin  
@@ -35,7 +35,7 @@ Curious, enthusiastic, and reliably the first to discover that a feature works d
 
 Voice of reason. Has a calendar block called "Preventing Five from touching prod" that recurs every Friday at 4:45 PM.
 
-[See full cast →](/cloud/getting-started/meet-five)
+[See full cast →]({{< ref "cloud/getting-started/meet-five/_index.md" >}})
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -52,7 +52,7 @@ For more information, see [Layer5 subscription plans](https://layer5.io/pricing)
 Teams allow you to organize users into groups and conveniently assign access to workspaces or to assign roles with associated keychains and keys to control permissions.
 
 {{< alert type="info" >}}
-You need to have the default `Team Admin` role to assign permissions to users in your team. For more information, see [Teams](/cloud/concepts/identity-and-security/teams).
+You need to have the default `Team Admin` role to assign permissions to users in your team. For more information, see [Teams]({{< ref "cloud/concepts/identity-and-security/teams/_index.md" >}}).
 {{< /alert >}}
 
 Organizations may have any number of teams and teams may have any number of users. User accounts are treated as sovereign entities that are owned by individual individuals, not by corporations.
@@ -62,7 +62,7 @@ Organization and teams may have any number of users accounts. User accounts are
 Users and their tokens may be authorized to access resources. Users can be created and managed by the Provider Admins, Organization Admins, or Team Admins. Users of one organization may be granted access to resources (e.g. Workspaces and Designs) of another organization. User entitlement, roles and permissions are org-scoped, meaning that the entitlements and permissions that a given user has in one organization does not necessarily reflect the same level of access that their membership in another oganziation does.
 
 {{< alert type="info" >}}
-Only Provider Admins and Organization Admin can create users. For more information, see [Roles](/cloud/concepts/identity-and-security/roles/).
+Only Provider Admins and Organization Admin can create users. For more information, see [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 {{< /alert >}}
 
 ## Account Linking
diff --git a/content/en/cloud/concepts/identity-and-security/users/default-permissions.md b/content/en/cloud/concepts/identity-and-security/users/default-permissions.md
index 67b69955110..1c7651f9e9e 100644
--- a/content/en/cloud/concepts/identity-and-security/users/default-permissions.md
+++ b/content/en/cloud/concepts/identity-and-security/users/default-permissions.md
@@ -32,4 +32,4 @@ aliases:
 {{< alert title="*Organization Owner" type="warning" >}}
 _Permissions marked with * apply only if you are the owner of the organization._{{< /alert >}}
 
-{{< alert title="Customizable Permissions" type="info" >}}Default permissions can be easily customized by simply creating your own [keychains](/cloud/concepts/identity-and-security/keychains/) and [roles](/cloud/concepts/identity-and-security/roles).{{< /alert >}}
+{{< alert title="Customizable Permissions" type="info" >}}Default permissions can be easily customized by simply creating your own [keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}) and [roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).{{< /alert >}}
diff --git a/content/en/cloud/concepts/identity-and-security/users/Slide41.svg b/content/en/cloud/concepts/identity-and-security/users/images/Slide41.svg
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/Slide41.svg
rename to content/en/cloud/concepts/identity-and-security/users/images/Slide41.svg
diff --git a/content/en/cloud/concepts/identity-and-security/users/notification-preferences.gif b/content/en/cloud/concepts/identity-and-security/users/notification-preferences/images/notification-preferences.gif
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/notification-preferences.gif
rename to content/en/cloud/concepts/identity-and-security/users/notification-preferences/images/notification-preferences.gif
diff --git a/content/en/cloud/concepts/identity-and-security/users/notification-preferences.md b/content/en/cloud/concepts/identity-and-security/users/notification-preferences/index.md
similarity index 94%
rename from content/en/cloud/concepts/identity-and-security/users/notification-preferences.md
rename to content/en/cloud/concepts/identity-and-security/users/notification-preferences/index.md
index 8e1d45a53be..929d8ab2565 100644
--- a/content/en/cloud/concepts/identity-and-security/users/notification-preferences.md
+++ b/content/en/cloud/concepts/identity-and-security/users/notification-preferences/index.md
@@ -11,7 +11,7 @@ aliases:
 
 Layer5 Cloud offers a range of user-configurable preferences that allows you to control the types of email notifications you receive.
 
-<img src="/cloud/concepts/identity-and-security/users/notification-preferences.gif" alt="How to set your notifications preferences" />
+<img src="images/notification-preferences.gif" alt="How to set your notifications preferences" />
 
 ## To change the notification preferences
 
diff --git a/content/en/cloud/concepts/identity-and-security/users/user-invitations/index.md b/content/en/cloud/concepts/identity-and-security/users/user-invitations/index.md
index eb35d9c2eb2..d78594a0103 100644
--- a/content/en/cloud/concepts/identity-and-security/users/user-invitations/index.md
+++ b/content/en/cloud/concepts/identity-and-security/users/user-invitations/index.md
@@ -102,7 +102,7 @@ From the table you can perform the following management actions on each invitati
 
 The **Quota** column in the invitations table always shows the number of users who have accepted an invitation alongside the configured limit — for example, `2 / 5` if a quota is set, or `2 / Unlimited` if no quota is configured. This lets you monitor uptake at a glance.
 
-To see the individual users who are now members of the organization, navigate to the [User Management](/cloud/concepts/identity-and-security/users/user-management/) page. Members who joined via invitation appear there alongside their assigned roles.
+To see the individual users who are now members of the organization, navigate to the [User Management]({{< ref "cloud/concepts/identity-and-security/users/user-management/index.md" >}}) page. Members who joined via invitation appear there alongside their assigned roles.
 
 ### What happens when a user accepts an invitation
 
diff --git a/content/en/cloud/concepts/identity-and-security/users/add-user.gif b/content/en/cloud/concepts/identity-and-security/users/user-management/images/add-user.gif
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/add-user.gif
rename to content/en/cloud/concepts/identity-and-security/users/user-management/images/add-user.gif
diff --git a/content/en/cloud/concepts/identity-and-security/users/create-user.gif b/content/en/cloud/concepts/identity-and-security/users/user-management/images/create-user.gif
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/create-user.gif
rename to content/en/cloud/concepts/identity-and-security/users/user-management/images/create-user.gif
diff --git a/content/en/cloud/concepts/identity-and-security/users/org_invite.png b/content/en/cloud/concepts/identity-and-security/users/user-management/images/org_invite.png
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/org_invite.png
rename to content/en/cloud/concepts/identity-and-security/users/user-management/images/org_invite.png
diff --git a/content/en/cloud/concepts/identity-and-security/users/remove_user.png b/content/en/cloud/concepts/identity-and-security/users/user-management/images/remove_user.png
similarity index 100%
rename from content/en/cloud/concepts/identity-and-security/users/remove_user.png
rename to content/en/cloud/concepts/identity-and-security/users/user-management/images/remove_user.png
diff --git a/content/en/cloud/concepts/identity-and-security/users/user-management.md b/content/en/cloud/concepts/identity-and-security/users/user-management/index.md
similarity index 83%
rename from content/en/cloud/concepts/identity-and-security/users/user-management.md
rename to content/en/cloud/concepts/identity-and-security/users/user-management/index.md
index 18ec8c03169..662742525c3 100644
--- a/content/en/cloud/concepts/identity-and-security/users/user-management.md
+++ b/content/en/cloud/concepts/identity-and-security/users/user-management/index.md
@@ -12,23 +12,23 @@ aliases:
 
 This guide outlines methods for creating user accounts, adding users to organizations, inviting new members, and managing user access within Layer5 Cloud to maintain a secure and organized environment.
 
-![User Management options](/cloud/concepts/identity-and-security/users/org_invite.png)
+![User Management options](images/org_invite.png)
 
 ## Create User Account
 
 Seamlessly initiate new user accounts, ensuring a smooth onboarding process. Specify user details, such as email, and tailor their access by adding them to one or more organizations. Optionally assign roles, defining their scope within the platform. Complete the process by sending a personalized account setup email, streamlining the user's introduction to Layer5 Cloud.
 
-![Create User](/cloud/concepts/identity-and-security/users/create-user.gif)
+![Create User](images/create-user.gif)
 
 {{< alert type="info" title="Permission Required for User Creation" >}}
-Only Provider Admins and Organization Admins can create users. For more information, see [Roles](/cloud/concepts/identity-and-security/roles).
+Only Provider Admins and Organization Admins can create users. For more information, see [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 {{< /alert >}}
 
 ## Add / Remove Existing User
 
 This section explains how to add existing Layer5 Cloud users to one of your organizations or remove them.
 
-{{< meshery-design-embed  src="/export-designs/embedded-design-page-open-source.js"  id="embedded-design-066b0ef3-7956-4c3b-a5cc-1d276ac13ec6" >}}
+{{< meshery-design-embed  src="export-designs/embedded-design-page-open-source.js"  id="embedded-design-066b0ef3-7956-4c3b-a5cc-1d276ac13ec6" >}}
 
 ### Adding a User to an Organization
 
@@ -40,7 +40,7 @@ If someone already has a Layer5 Cloud account but isn't part of your organizatio
 4. Select the user from the list of available users.
 5. Assign appropriate roles within the organization.
 
-![Add User to Organization](/cloud/concepts/identity-and-security/users/add-user.gif)
+![Add User to Organization](images/add-user.gif)
 
 ### Removing Users from an Organization
 
@@ -56,7 +56,7 @@ You can remove users from an organization one by one or several at once. This ac
    * **Use Bulk Action:** Click the "Delete" button.
    * **Confirm:** When prompted, confirm that you want to remove all the selected users from the organization.
 
-![Removing Users from an Organization](/cloud/concepts/identity-and-security/users/remove_user.png)
+![Removing Users from an Organization](images/remove_user.png)
 
 ## Invite User via Email
 
@@ -70,5 +70,5 @@ You can invite new or existing users to join one of your organizations by sendin
 * **What the User Does:** The person you invited will click a link in the email to accept. If they're new to Layer5 Cloud, they'll need to create an account first before they can join your organization.
 
 {{< alert type="info" title="Permissions for Role Assignment" >}}
-An Organization Admin can assign organization roles to users, but provider roles can only be assigned by Provider Admins. For more information, see [Roles](/cloud/concepts/identity-and-security/roles).
+An Organization Admin can assign organization roles to users, but provider roles can only be assigned by Provider Admins. For more information, see [Roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/cloud/concepts/spaces/environments.md b/content/en/cloud/concepts/spaces/environments.md
index d6480565c48..255d71f2659 100644
--- a/content/en/cloud/concepts/spaces/environments.md
+++ b/content/en/cloud/concepts/spaces/environments.md
@@ -12,7 +12,7 @@ Environments allow you to logically group related [Connections](#connections) an
 
 ### Assigning Resources to Environments
 
-Assign any number of Connections to an environment whether that Connection is managed or unmanaged (see [MeshSync](https://docs.meshery.io/concepts/architecture/meshsync) to learn more about managed and unmanaged Connections). In-turn, assign any number of Environments to one or more [Workspaces](../workspaces). Connections (and any associated Credentials) that are assigned to an Environment become immediately available for use in any associated Workspace.
+Assign any number of Connections to an environment whether that Connection is managed or unmanaged (see [MeshSync](https://docs.meshery.io/concepts/architecture/meshsync) to learn more about managed and unmanaged Connections). In-turn, assign any number of Environments to one or more [Workspaces]({{< ref "cloud/concepts/spaces/workspaces.md" >}}). Connections (and any associated Credentials) that are assigned to an Environment become immediately available for use in any associated Workspace.
 
 ### Sharing Resources between Environments
 
@@ -30,7 +30,7 @@ Environments represent a collection of resources in the form of Connections - bo
 
 - **Logical Grouping** Environments allow you to logically group related connections and their associated credentials. This makes it easier to manage, share, and work with a subset of resources instead of dealing with all your connections individually.
 
-- **Resource Sharing** Environments can be seamlessly assigned to [Workspaces](../workspaces), another essential concept in Meshery. When you assign an Environment to a Workspace, you enable resource sharing among team members. This collaborative approach simplifies the sharing of connections and resources, making it easier to work together in cloud native environments.
+- **Resource Sharing** Environments can be seamlessly assigned to [Workspaces]({{< ref "cloud/concepts/spaces/workspaces.md" >}}), another essential concept in Meshery. When you assign an Environment to a Workspace, you enable resource sharing among team members. This collaborative approach simplifies the sharing of connections and resources, making it easier to work together in cloud native environments.
 
 ## Key Components
 
@@ -48,7 +48,7 @@ Credentials in an Environment are the keys to securely authenticate and access m
 
 ## Example: Orbital Labs Environment Setup
 
-The following illustrates how Five and Zara set up multi-cloud environments at Orbital Labs, spanning AWS, GCP, and Azure. See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full seed inventory.
+The following illustrates how Five and Zara set up multi-cloud environments at Orbital Labs, spanning AWS, GCP, and Azure. See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full seed inventory.
 
 ### Environment Inventory
 
diff --git a/content/en/cloud/concepts/spaces/workspaces.md b/content/en/cloud/concepts/spaces/workspaces.md
index 4fd62210d3b..6c6c63de292 100644
--- a/content/en/cloud/concepts/spaces/workspaces.md
+++ b/content/en/cloud/concepts/spaces/workspaces.md
@@ -41,7 +41,7 @@ Like a shared drive (or shared collection of files), Workspaces are your Google
 - Same environment can be assigned to multiple workspaces.
 
 {{< alert type="info" title="Assigning Environments to Workspaces" >}}
-Assign any number of Environments to one or more Workspaces. See [Environments](/cloud/concepts/spaces/environments) section for more information.
+Assign any number of Environments to one or more Workspaces. See [Environments]({{< ref "cloud/concepts/spaces/environments.md" >}}) section for more information.
 {{< /alert >}}
 
 ### Designs
@@ -61,7 +61,7 @@ Designs belong to only one Workspace at any given time. See [Designs](https://do
 - Same team can be assigned to multiple workspaces.
 
 {{< alert type="info" title="Team Access Control in Workspaces" >}}
-Teams offer control access to workspaces and to workspace resources such as environments and managed and unmanaged connections. See [Teams](/cloud/concepts/identity-and-security/teams).
+Teams offer control access to workspaces and to workspace resources such as environments and managed and unmanaged connections. See [Teams]({{< ref "cloud/concepts/identity-and-security/teams/_index.md" >}}).
 {{< /alert >}}
 
 ### Connections
@@ -85,12 +85,12 @@ To make the most of Workspaces, here are some best practices:
 Workspaces enhance collaboration within your teams, providing a structured environment for sharing and managing resources. By following best practices and understanding the core components of Workspaces, you can maximize the benefits of this feature.
 
 {{< alert type="info" title="Looking for Practical Workspace Management?" >}}
-For a step-by-step guide on how to create, edit, and manage your workspaces, see the [Managing Workspaces](/cloud/guides/workspaces/managing-workspaces/) documentation.
+For a step-by-step guide on how to create, edit, and manage your workspaces, see the [Managing Workspaces]({{< ref "cloud/guides/workspaces/managing-workspaces/index.md" >}}) documentation.
 {{< /alert >}}
 
 ## Example: Orbital Labs Workspace Setup
 
-The following illustrates how Five and Maya set up workspaces at Orbital Labs to segment access across infrastructure and development workflows. See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full seed inventory.
+The following illustrates how Five and Maya set up workspaces at Orbital Labs to segment access across infrastructure and development workflows. See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full seed inventory.
 
 ### Workspace Inventory
 
diff --git a/content/en/cloud/getting-started/_index.md b/content/en/cloud/getting-started/_index.md
index 6e06c229c69..cec3e131bb7 100644
--- a/content/en/cloud/getting-started/_index.md
+++ b/content/en/cloud/getting-started/_index.md
@@ -41,8 +41,8 @@ To verify your setup, try deploying a sample design:
 ---
 
 ### Need Help?
-If you run into issues during setup, join our [Slack Community](http://slack.layer5.io) or check the [Troubleshooting Guide](/docs/troubleshooting).
+If you run into issues during setup, join our [Slack Community](http://slack.layer5.io)
 
 {{< alert type="info" title="Follow Along with Five" >}}
-Throughout these docs you'll follow Five — a Platform Engineer at Orbital Labs — and his colleagues as they set up organizations, configure workspaces, deploy designs, and navigate the occasional Friday-afternoon incident. [Meet Five and the full cast →]({{< relref "/cloud/getting-started/meet-five/_index.md" >}})
+Throughout these docs you'll follow Five — a Platform Engineer at Orbital Labs — and his colleagues as they set up organizations, configure workspaces, deploy designs, and navigate the occasional Friday-afternoon incident. [Meet Five and the full cast →]({{< relref "cloud/getting-started/meet-five/_index.md" >}})
 {{< /alert >}}
diff --git a/content/en/cloud/getting-started/getting-started-with-layer5-account.md b/content/en/cloud/getting-started/getting-started-with-layer5-account.md
index 31140efbb26..a7cea0a3251 100644
--- a/content/en/cloud/getting-started/getting-started-with-layer5-account.md
+++ b/content/en/cloud/getting-started/getting-started-with-layer5-account.md
@@ -17,7 +17,7 @@ The first steps in starting with Layer5 are to create an account, verify your em
 To sign up for an account on Layer5 Cloud, navigate to <https://cloud.layer5.io/signup>.
 You may choose to either signup with your personal email or any of our supported OAuth providers like Github and Gmail. See "OAuth Providers" for more information.
 
-{{< meshery-design-embed src="/export-designs/embedded-design-flows.js" id="embedded-design-8c9106f6-2b0e-4bd1-8eea-8ccdab5c117d" >}}
+{{< meshery-design-embed src="export-designs/embedded-design-flows.js" id="embedded-design-8c9106f6-2b0e-4bd1-8eea-8ccdab5c117d" >}}
 
 
 
@@ -44,7 +44,7 @@ On successful login, you will be prompted to setup your first organization and w
 Organization are unit of tenant in Layer5 Cloud. Every user on Layer5 Cloud is part of at least one organization. You can create your own organization or join an existing one. By default you are the owner of the organization you create.
 
 {{< alert type="info" >}}
-For more information, see [Organizations](/cloud/concepts/identity-and-security/organizations/)
+For more information, see [Organizations]({{< ref "cloud/concepts/identity-and-security/organizations/_index.md" >}})
 {{< /alert >}}
 
 
@@ -55,7 +55,7 @@ Give your organization a name and a description. For more information, see "Crea
 Workspaces are logical group of shared set of resources like environments, connections, credentials, infrastructural designs and more. Every user on Layer5 Cloud is part of at least one workspace. You can create your own workspace or join an existing one. By default you are the owner of the workspace you create. You can share access to resources in your workspaces through teams.
 
 {{< alert type="info" >}}
-For more information, see [Workspaces](/cloud/concepts/spaces/workspaces/)
+For more information, see [Workspaces]({{< ref "cloud/concepts/spaces/workspaces.md" >}})
 {{< /alert >}}
 
 Give your workspace a name and a description. For more information, see "Creating a workspace."
diff --git a/content/en/cloud/getting-started/images/github/add_repo.png b/content/en/cloud/getting-started/github-integration/images/github/add_repo.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/add_repo.png
rename to content/en/cloud/getting-started/github-integration/images/github/add_repo.png
diff --git a/content/en/cloud/getting-started/images/github/add_workflows.png b/content/en/cloud/getting-started/github-integration/images/github/add_workflows.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/add_workflows.png
rename to content/en/cloud/getting-started/github-integration/images/github/add_workflows.png
diff --git a/content/en/cloud/getting-started/images/github/authorize.png b/content/en/cloud/getting-started/github-integration/images/github/authorize.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/authorize.png
rename to content/en/cloud/getting-started/github-integration/images/github/authorize.png
diff --git a/content/en/cloud/getting-started/images/github/catalog.png b/content/en/cloud/getting-started/github-integration/images/github/catalog.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/catalog.png
rename to content/en/cloud/getting-started/github-integration/images/github/catalog.png
diff --git a/content/en/cloud/getting-started/images/github/configure_secrets.png b/content/en/cloud/getting-started/github-integration/images/github/configure_secrets.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/configure_secrets.png
rename to content/en/cloud/getting-started/github-integration/images/github/configure_secrets.png
diff --git a/content/en/cloud/getting-started/images/github/connections.png b/content/en/cloud/getting-started/github-integration/images/github/connections.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/connections.png
rename to content/en/cloud/getting-started/github-integration/images/github/connections.png
diff --git a/content/en/cloud/getting-started/images/github/dashboard.png b/content/en/cloud/getting-started/github-integration/images/github/dashboard.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/dashboard.png
rename to content/en/cloud/getting-started/github-integration/images/github/dashboard.png
diff --git a/content/en/cloud/getting-started/images/github/delete_connection.png b/content/en/cloud/getting-started/github-integration/images/github/delete_connection.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/delete_connection.png
rename to content/en/cloud/getting-started/github-integration/images/github/delete_connection.png
diff --git a/content/en/cloud/getting-started/images/github/extensions.png b/content/en/cloud/getting-started/github-integration/images/github/extensions.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/extensions.png
rename to content/en/cloud/getting-started/github-integration/images/github/extensions.png
diff --git a/content/en/cloud/getting-started/images/github/finish.png b/content/en/cloud/getting-started/github-integration/images/github/finish.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/finish.png
rename to content/en/cloud/getting-started/github-integration/images/github/finish.png
diff --git a/content/en/cloud/getting-started/images/github/github.png b/content/en/cloud/getting-started/github-integration/images/github/github.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/github.png
rename to content/en/cloud/getting-started/github-integration/images/github/github.png
diff --git a/content/en/cloud/getting-started/images/github/install_meshery.png b/content/en/cloud/getting-started/github-integration/images/github/install_meshery.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/install_meshery.png
rename to content/en/cloud/getting-started/github-integration/images/github/install_meshery.png
diff --git a/content/en/cloud/getting-started/images/github/integrations.png b/content/en/cloud/getting-started/github-integration/images/github/integrations.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/integrations.png
rename to content/en/cloud/getting-started/github-integration/images/github/integrations.png
diff --git a/content/en/cloud/getting-started/images/github/select-repo.png b/content/en/cloud/getting-started/github-integration/images/github/select-repo.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/select-repo.png
rename to content/en/cloud/getting-started/github-integration/images/github/select-repo.png
diff --git a/content/en/cloud/getting-started/images/github/select_connection.png b/content/en/cloud/getting-started/github-integration/images/github/select_connection.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/select_connection.png
rename to content/en/cloud/getting-started/github-integration/images/github/select_connection.png
diff --git a/content/en/cloud/getting-started/images/github/select_design.png b/content/en/cloud/getting-started/github-integration/images/github/select_design.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/select_design.png
rename to content/en/cloud/getting-started/github-integration/images/github/select_design.png
diff --git a/content/en/cloud/getting-started/images/github/select_file.png b/content/en/cloud/getting-started/github-integration/images/github/select_file.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/select_file.png
rename to content/en/cloud/getting-started/github-integration/images/github/select_file.png
diff --git a/content/en/cloud/getting-started/images/github/show_all_files.png b/content/en/cloud/getting-started/github-integration/images/github/show_all_files.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/show_all_files.png
rename to content/en/cloud/getting-started/github-integration/images/github/show_all_files.png
diff --git a/content/en/cloud/getting-started/images/github/spaces.png b/content/en/cloud/getting-started/github-integration/images/github/spaces.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/spaces.png
rename to content/en/cloud/getting-started/github-integration/images/github/spaces.png
diff --git a/content/en/cloud/getting-started/images/github/workflow_exists.png b/content/en/cloud/getting-started/github-integration/images/github/workflow_exists.png
similarity index 100%
rename from content/en/cloud/getting-started/images/github/workflow_exists.png
rename to content/en/cloud/getting-started/github-integration/images/github/workflow_exists.png
diff --git a/content/en/cloud/getting-started/github-integration.md b/content/en/cloud/getting-started/github-integration/index.md
similarity index 85%
rename from content/en/cloud/getting-started/github-integration.md
rename to content/en/cloud/getting-started/github-integration/index.md
index 529d4d5eafe..32b2111a33c 100644
--- a/content/en/cloud/getting-started/github-integration.md
+++ b/content/en/cloud/getting-started/github-integration/index.md
@@ -28,21 +28,21 @@ You can commence the integration process from the "**Extensions Page in Meshery*
 1. Click on **Enable** for **GitHub Action: Kanvas Snapshot**.
 1. You will be redirected to the Integrations page.
 
-    ![Extensions](/cloud/getting-started/images/github/extensions.png)
+    ![Extensions](images/github/extensions.png)
 
 ### Navigate to the Integrations Page via the Layer5 Cloud Dashboard
 
 1. On [Layer5 Cloud](https://cloud.layer5.io/dashboard), click on the **menu icon** on the navigation bar to open the global navigation menu.
 
-    ![Dashboard](/cloud/getting-started/images/github/dashboard.png)
+    ![Dashboard](images/github/dashboard.png)
 
 1. From the **Spaces** drop down, select **Integrations**.
 
-    ![Spaces](/cloud/getting-started/images/github/spaces.png)
+    ![Spaces](images/github/spaces.png)
 
 1. You will be redirected to the Integrations page. Click **Connect** to begin the integration process.
 
-    ![Integrations](/cloud/getting-started/images/github/integrations.png)
+    ![Integrations](images/github/integrations.png)
 
 ### Connect GitHub and Import Designs
 
@@ -51,18 +51,18 @@ Let’s go through the steps required to connect your GitHub account and import
 1. **Connect GitHub App**: This initiates the authorization process where you'll link your GitHub account with Meshery.
     - Click **Connect**.
 
-      ![Connect GitHub](/cloud/getting-started/images/github/github.png)
+      ![Connect GitHub](images/github/github.png)
 
     - You will be asked to sign in to your GitHub account if you are not already signed in.
     - Once signed in, GitHub will prompt you to select the GitHub account where you want to install the Meshery GitHub App. This account could be your personal account or an organization account you can access.
 
-      ![Install Meshery](/cloud/getting-started/images/github/install_meshery.png)
+      ![Install Meshery](images/github/install_meshery.png)
 
     - After selecting the account, GitHub will prompt you to authorize the Meshery GitHub App so it can access your account.
     - You can choose to allow access to all repositories or select specific ones.
     - After making your selection, click **Install and Authorize** to complete the authorization process.
 
-      ![Install and Authorize](/cloud/getting-started/images/github/authorize.png)
+      ![Install and Authorize](images/github/authorize.png)
 
 > Note: When you install a GitHub App on your account or organization, you grant the app permission to access the organization and repository resources that it requested. You also specify which repositories the app can access.
 
@@ -70,7 +70,7 @@ Let’s go through the steps required to connect your GitHub account and import
 
     - Select the repository or repositories you want, then click **Next**.
 
-      ![Select repository](/cloud/getting-started/images/github/select-repo.png)
+      ![Select repository](images/github/select-repo.png)
 
     **Reconfigure Repository Selection**
 
@@ -80,13 +80,13 @@ Let’s go through the steps required to connect your GitHub account and import
     1. Reconfigure repository access for GitHub accounts that already have the Meshery GitHub App installed or
     1. Install the Meshery GitHub App on a new GitHub account to gain access to the repositories there.
 
-        ![Add Repository](/cloud/getting-started/images/github/add_repo.png)
+        ![Add Repository](images/github/add_repo.png)
 
 1. **Import Design Files**: The files in the repository are displayed for you to select the ones you want to import as designs.
 
     - There is a checkbox that allows you to choose between displaying all file types or only the file types that are typically supported by Meshery for import.
 
-      ![Show all File Types](/cloud/getting-started/images/github/show_all_files.png)
+      ![Show all File Types](images/github/show_all_files.png)
 
     - The file types supported for import are:
       1. Helm charts
@@ -97,7 +97,7 @@ Let’s go through the steps required to connect your GitHub account and import
     - Select the checkbox beside the directory name to import all the files in the directory, or individually select the files you want to import and click **Import**.
     - If you want to go back and change your selection or choose a different repository, click **Back**.
 
-      ![Select Files](/cloud/getting-started/images/github/select_file.png)
+      ![Select Files](images/github/select_file.png)
     - After the import, the files that were imported successfully and those that weren't will be indicated on the screen.
 
       <!-- ![After Import](/cloud/getting-started/images/github/png) -->
@@ -108,19 +108,19 @@ These next steps are optional. By enabling snapshots, you can choose a design fr
 
 1. **Select Designs**: Select the design from the repository you want to enable snapshots for, then click **Next**.
 
-    ![Select Designs](/cloud/getting-started/images/github/select_design.png)
+    ![Select Designs](images/github/select_design.png)
 
     **Warning: Workflow Already Exists**
 
     If you attempt to add a workflow to a repository that already contains an existing workflow from this process, you will see a warning message. Proceeding to the next step after receiving this warning will overwrite the existing snapshot workflow in that repository.
 
-    ![Workflow Exists](/cloud/getting-started/images/github/workflow_exists.png)
+    ![Workflow Exists](images/github/workflow_exists.png)
 
 1. **Configure Secrets**:
     - Copy the **API TOKEN** and add it to the secrets page of your selected repository. To learn more about configuring secrets check out [Using secrets in GitHub Actions](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
     - Tick the check box to confirm that you have added the token.
 
-      ![Configure Secrets](/cloud/getting-started/images/github/configure_secrets.png)
+      ![Configure Secrets](images/github/configure_secrets.png)
 
 1. **Add workflows**: Allowing Meshery to add this workflow ensures the smooth integration of Meshery Snapshot with your GitHub repository. The workflow:
 
@@ -132,7 +132,7 @@ These next steps are optional. By enabling snapshots, you can choose a design fr
 
     With the workflow active in your repository, you can now visualize changes to your infrastructure directly in your pull requests, making it easier to track and review updates on designs.
 
-    ![Add workflow](/cloud/getting-started/images/github/add_workflows.png)
+    ![Add workflow](images/github/add_workflows.png)
 
     Click **Next** to finish setting up!
 
@@ -144,7 +144,7 @@ You have successfully Integrated GitHub with Meshery! This page provides an over
 1. Click on the **View** icon to open the Meshery Catalog and see the design.
 1. If everything looks good, click **Finish**. If you need to make any updates, you can go **Back** to the previous steps.
 
-    ![Finish Set up](/cloud/getting-started/images/github/finish.png)
+    ![Finish Set up](images/github/finish.png)
 
 ## View Imported Designs
 
@@ -153,13 +153,13 @@ To view imported designs:
 1. Go to [Meshery Catalog](https://cloud.layer5.io/catalog).
 1. Click on **My Designs** on the navigation bar.
 
-    ![Catalog](/cloud/getting-started/images/github/catalog.png)
+    ![Catalog](images/github/catalog.png)
 
 ## View GitHub Integration Connection on Meshery Playground
 
 To view and manage the GitHub connection, on the left sidebar of the playground, click on **Lifecycle** > **Connections**.
 
-![View GitHub Connection](/cloud/getting-started/images/github/connections.png)
+![View GitHub Connection](images/github/connections.png)
 
 ## Delete GitHub Integration
 
@@ -173,10 +173,10 @@ On the Connections page in Meshery:
 On the [Integrations Page in Layer5 Cloud](https://cloud.layer5.io/spaces/integrations) page:
 
   1. Click on the GitHub Connection.
-      ![Select Connection](/cloud/getting-started/images/github/select_connection.png)
+      ![Select Connection](images/github/select_connection.png)
 
   1. Tick the checkbox then **delete**.
-      ![Delete Connection](/cloud/getting-started/images/github/delete_connection.png)
+      ![Delete Connection](images/github/delete_connection.png)
 
 ## Conclusion
 
diff --git a/content/en/cloud/getting-started/meet-five/_index.md b/content/en/cloud/getting-started/meet-five/_index.md
index a2452464f81..71bda154b7f 100644
--- a/content/en/cloud/getting-started/meet-five/_index.md
+++ b/content/en/cloud/getting-started/meet-five/_index.md
@@ -50,7 +50,7 @@ Orbital Labs operates as a tenant of Constellation Cloud, an MSP whose Provider
 
 {{< cardpane >}}
 {{% card header="**Dr. Aiko Sato** — Provider Admin" %}}
-<img src="/images/five/layer5-five-mascot-means-business.svg" alt="Dr. Aiko Sato — Provider Admin at Constellation Cloud" style="background:#fff;" />
+<img src='../../images/five/layer5-five-mascot-means-business.svg' alt="Dr. Aiko Sato — Provider Admin at Constellation Cloud" style="background:#fff;" />
 
 **Organization:** Constellation Cloud  
 **Role:** Provider Admin  
@@ -64,7 +64,7 @@ Has seen every misconfigured RBAC policy known to humankind. Responds to Slack m
 
 {{< cardpane >}}
 {{% card header="**Five** — Platform Engineer" %}}
-<img src="/images/five/1.svg" alt="Five — Platform Engineer at Orbital Labs" style="background:#fff;" />
+<img src='../../images/five/1.svg' alt="Five — Platform Engineer at Orbital Labs" style="background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** User (Platform Engineer)  
@@ -73,7 +73,7 @@ Has seen every misconfigured RBAC policy known to humankind. Responds to Slack m
 The protagonist — curious, enthusiastic, and reliably the first to discover that a feature works differently than the docs say it does.
 {{% /card %}}
 {{% card header="**Maya Chen** — Org Admin & Development Team Admin" %}}
-<img src="/images/five/2.svg" alt="Maya Chen — Org Admin and Development Team Admin at Orbital Labs" style="background:#fff;" />
+<img src='../../images/five/2.svg' alt="Maya Chen — Org Admin and Development Team Admin at Orbital Labs" style="background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** Org Admin + Development Team Admin  
@@ -85,7 +85,7 @@ Voice of reason. Has a calendar block called "Preventing Five from touching prod
 
 {{< cardpane >}}
 {{% card header="**Zara Osei** — Infrastructure Team Admin" %}}
-<img src="/images/five/3.svg" alt="Zara Osei — Infrastructure Team Admin at Orbital Labs" style="background:#fff;" />
+<img src='images/five/3.svg' alt="Zara Osei — Infrastructure Team Admin at Orbital Labs" style="background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** Team Admin, Infrastructure Team  
@@ -94,7 +94,7 @@ Voice of reason. Has a calendar block called "Preventing Five from touching prod
 Sole keeper of the keychain permission matrix. Responds to access requests with a 48-hour SLA and a knowing look.
 {{% /card %}}
 {{% card header="**Rex Park** — Developer" %}}
-<img src="/images/five/4.svg" alt="Rex Park — Developer at Orbital Labs" style="background:#fff;" />
+<img src='images/five/4.svg' alt="Rex Park — Developer at Orbital Labs" style="background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** User, Developer Team  
@@ -103,7 +103,7 @@ Sole keeper of the keychain permission matrix. Responds to access requests with
 Opens design review requests and immediately asks Five if they have been approved yet. Deploys with confidence; reads error logs with less.
 {{% /card %}}
 {{% card header="**Jordan Reyes** — Developer & Designer" %}}
-<img src="/images/five/5.svg" alt="Jordan Reyes — Developer and Designer at Orbital Labs" style="background:#fff;" />
+<img src='images/five/5.svg' alt="Jordan Reyes — Developer and Designer at Orbital Labs" style="background:#fff;" />
 
 **Organization:** Orbital Labs  
 **Role:** User, Developer Team  
@@ -117,7 +117,7 @@ Crafts Kanvas designs of alarming elegance. Considers a 47-component architectur
 
 {{< cardpane >}}
 {{% card header="**Marcus Webb** — Org Admin" %}}
-<img src="/images/five/layer5-five-mascot-means-business.svg" alt="Marcus Webb — Org Admin at Stellar Dynamics" style="background:#fff;" />
+<img src='../../images/five/layer5-five-mascot-means-business.svg' alt="Marcus Webb — Org Admin at Stellar Dynamics" style="background:#fff;" />
 
 **Organization:** Stellar Dynamics  
 **Role:** Org Admin  
diff --git a/content/en/cloud/getting-started/meet-five/five-narrative-plan.md b/content/en/cloud/getting-started/meet-five/five-narrative-plan.md
index 32c1a1af1e9..07f9fdfec56 100644
--- a/content/en/cloud/getting-started/meet-five/five-narrative-plan.md
+++ b/content/en/cloud/getting-started/meet-five/five-narrative-plan.md
@@ -13,12 +13,12 @@ aliases:
 ---
 
 {{< alert type="info" >}}
-This page is a working document for documentation contributors. For the narrative itself — characters, organizations, and seed data — see [Meet Five and the Cast](/cloud/getting-started/meet-five/).
+This page is a working document for documentation contributors. For the narrative itself — characters, organizations, and seed data — see [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 {{< /alert >}}
 
 ## Objective
 
-Layer5 Cloud and Kanvas documentation adopts a continuous narrative centered on Five and his colleagues at Orbital Labs. Rather than using generic placeholders ("User A", "Organization X"), every major docs section uses the canonical cast and scenarios defined in [Meet Five and the Cast](/cloud/getting-started/meet-five/). This plan maps which characters and scenarios belong in which sections, which Five illustrations to use, and the priority order for rolling out updates.
+Layer5 Cloud and Kanvas documentation adopts a continuous narrative centered on Five and his colleagues at Orbital Labs. Rather than using generic placeholders ("User A", "Organization X"), every major docs section uses the canonical cast and scenarios defined in [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}). This plan maps which characters and scenarios belong in which sections, which Five illustrations to use, and the priority order for rolling out updates.
 
 ## Integration Map
 
@@ -76,7 +76,7 @@ When capturing screenshots for any section that references the Five narrative, f
 | Provider Admin, cross-tenant | Dr. Aiko | `aiko@constellation-cloud.example` |
 | Enterprise org, cross-org access | Marcus | `marcus@stellar-dynamics.example` |
 
-**Which workspace/environment to use:** Match the section's purpose to the Seed Inventory table in [Meet Five and the Cast](/cloud/getting-started/meet-five/). Use `dev-local` for all getting-started screenshots (no real cloud credentials required).
+**Which workspace/environment to use:** Match the section's purpose to the Seed Inventory table in [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}). Use `dev-local` for all getting-started screenshots (no real cloud credentials required).
 
 **File naming:** `<section>-<scenario>-<YYYY-MM-DD>.png`, e.g., `workspaces-orbital-staging-creation-2026-04-28.png`. Store in the `images/` subdirectory of the relevant content section.
 
diff --git a/static/images/five/3.svg b/content/en/cloud/getting-started/meet-five/images/five/3.svg
similarity index 100%
rename from static/images/five/3.svg
rename to content/en/cloud/getting-started/meet-five/images/five/3.svg
diff --git a/static/images/five/4.svg b/content/en/cloud/getting-started/meet-five/images/five/4.svg
similarity index 100%
rename from static/images/five/4.svg
rename to content/en/cloud/getting-started/meet-five/images/five/4.svg
diff --git a/static/images/five/5.svg b/content/en/cloud/getting-started/meet-five/images/five/5.svg
similarity index 100%
rename from static/images/five/5.svg
rename to content/en/cloud/getting-started/meet-five/images/five/5.svg
diff --git a/content/en/cloud/getting-started/support.md b/content/en/cloud/getting-started/support.md
index 87a3f9c58c9..b76b1dd1b4b 100644
--- a/content/en/cloud/getting-started/support.md
+++ b/content/en/cloud/getting-started/support.md
@@ -30,4 +30,4 @@ If you've forgotten your Layer5 Cloud account password, don't worry. You can eas
 
 6. After successfully resetting your password, you can now login to your Layer5 Cloud account using your new password.
 
-{{< meshery-design-embed  src="/export-designs/embedded-design-account-recovery.js"  id="embedded-design-f4d47d8d-0a16-46d3-ae79-829a1d16b2fa" >}}
+{{< meshery-design-embed  src="export-designs/embedded-design-account-recovery.js"  id="embedded-design-f4d47d8d-0a16-46d3-ae79-829a1d16b2fa" >}}
diff --git a/content/en/cloud/guides/integrations/github-actions/_index.md b/content/en/cloud/guides/integrations/github-actions/_index.md
index d17b4e589ce..7ba4ab5c62f 100644
--- a/content/en/cloud/guides/integrations/github-actions/_index.md
+++ b/content/en/cloud/guides/integrations/github-actions/_index.md
@@ -29,7 +29,7 @@ Kanvas introduces the Kanvas Snapshot GitHub Actions, a tool that allows you to
 
 ### Configuring Kanvas Snapshots
 
-For setup steps, see the [Kanvas Snapshots tutorial](/cloud/guides/tutorials/gitops-snapshots/).
+For setup steps, see the [Kanvas Snapshots tutorial]({{< ref "cloud/guides/tutorials/gitops-snapshots.md" >}}).
 
 {{%pageinfo%}}
 The Kanvas GitHub App requires authorization to interact with your repositories. If you would like to use your GitHub user's personal access token, instead, [please let us know](https://cloud.layer5.io/support). {{%/pageinfo%}}
diff --git a/content/en/cloud/guides/organizations/org-management/_index.md b/content/en/cloud/guides/organizations/org-management/_index.md
index 8713f017a40..6cdcd860405 100644
--- a/content/en/cloud/guides/organizations/org-management/_index.md
+++ b/content/en/cloud/guides/organizations/org-management/_index.md
@@ -13,7 +13,7 @@ aliases:
 
 This guide covers creating new organizations, editing their details, inviting members, and deleting organizations when necessary.
 
-![Organization Overview](/cloud/guides/organizations/org-management/org_overview.png)
+![Organization Overview](images/org_overview.png)
 
 {{< alert title="Permissions Required" type="info" >}}
 Operations described on this page for managing your Organization typically require Organization Administrator or similar administrative roles. To understand the specific roles needed for each action, please refer to the [Default Permissions reference](https://docs.layer5.io/cloud/reference/default-permissions/).
@@ -32,7 +32,7 @@ An Organization provides a way to structure your teams, users, and resource acce
     -   Region (Optional): Choose the time zone for your Organization.
     -   Add Organization Members (Optional): You can begin adding **existing** Layer5 Cloud users to your new Organization in this field.
 
-<img src="/cloud/guides/organizations/org-management/create_org.png" alt="Filling out new Organization details" style="width: 30%;" />
+<img src="images/create_org.png" alt="Filling out new Organization details" style="width: 30%;" />
 
 {{< alert type="info" title="Unable to Create More Organizations?" >}}
 If the "Add Organization" button is disabled, it means your current role does not permit creating additional Organizations. Only users with roles like Organization Administrator or Provider Administrator can create new Organizations.
@@ -51,7 +51,7 @@ You can update your Organization's name, location, associated teams, branding, a
     -   Logos: Upload specific logo versions for various display contexts by clicking the respective **"Upload"** buttons.
     -   Invitations: Access a shareable link to invite users to your Organization.
 
-<img src="/cloud/guides/organizations/org-management/edit_org.png" alt="Editing Organization Details" style="width: 30%;" />
+<img src="images/edit_org.png" alt="Editing Organization Details" style="width: 30%;" />
 
 ## Using the Open Organization Invitation Link
 
@@ -62,7 +62,7 @@ To invite multiple users to your organization at once, or to allow open sign-ups
 * Public Sign-ups: To let people sign up openly, for instance, by posting the link on a community page or another public resource.
 * Cross-Organizational Collaboration: To make it easy for collaborators from other organizations or external partners to join.
 
-![Obtain Organization Invite Link](/cloud/guides/organizations/org-management/org_open_invite.gif)
+![Obtain Organization Invite Link](images/org_open_invite.gif)
 
 {{< alert title="Inviting Users to Specific Teams" type="info" >}}
 If you want to invite users directly to a specific team within your organization, please refer to the documentation on [Open Team Invites](https://docs.layer5.io/cloud/concepts/identity-and-security/teams/)
@@ -115,6 +115,6 @@ Avoid deleting an Organization if:
 2.  A confirmation modal will appear, requiring you to verify this action.
 3. Click the "Delete" button to permanently remove the Organization. To abort the deletion, click "Cancel".
 
-<img src="/cloud/guides/organizations/org-management/delete_org.png" alt="Delete Organization" style="width: 30%;" />
+<img src="images/delete_org.png" alt="Delete Organization" style="width: 30%;" />
 
 [^1]: Existing users who click this invitation link might encounter a "Page not found" error. This is a temporary bug and is being addressed.
diff --git a/content/en/cloud/guides/organizations/org-management/create_org.png b/content/en/cloud/guides/organizations/org-management/images/create_org.png
similarity index 100%
rename from content/en/cloud/guides/organizations/org-management/create_org.png
rename to content/en/cloud/guides/organizations/org-management/images/create_org.png
diff --git a/content/en/cloud/guides/organizations/org-management/delete_org.png b/content/en/cloud/guides/organizations/org-management/images/delete_org.png
similarity index 100%
rename from content/en/cloud/guides/organizations/org-management/delete_org.png
rename to content/en/cloud/guides/organizations/org-management/images/delete_org.png
diff --git a/content/en/cloud/guides/organizations/org-management/edit_org.png b/content/en/cloud/guides/organizations/org-management/images/edit_org.png
similarity index 100%
rename from content/en/cloud/guides/organizations/org-management/edit_org.png
rename to content/en/cloud/guides/organizations/org-management/images/edit_org.png
diff --git a/content/en/cloud/guides/organizations/org-management/org_open_invite.gif b/content/en/cloud/guides/organizations/org-management/images/org_open_invite.gif
similarity index 100%
rename from content/en/cloud/guides/organizations/org-management/org_open_invite.gif
rename to content/en/cloud/guides/organizations/org-management/images/org_open_invite.gif
diff --git a/content/en/cloud/guides/organizations/org-management/org_overview.png b/content/en/cloud/guides/organizations/org-management/images/org_overview.png
similarity index 100%
rename from content/en/cloud/guides/organizations/org-management/org_overview.png
rename to content/en/cloud/guides/organizations/org-management/images/org_overview.png
diff --git a/content/en/cloud/guides/organizations/org-management/navigating-organizations/index.md b/content/en/cloud/guides/organizations/org-management/navigating-organizations.md
similarity index 98%
rename from content/en/cloud/guides/organizations/org-management/navigating-organizations/index.md
rename to content/en/cloud/guides/organizations/org-management/navigating-organizations.md
index 33c15660b45..0234964d545 100644
--- a/content/en/cloud/guides/organizations/org-management/navigating-organizations/index.md
+++ b/content/en/cloud/guides/organizations/org-management/navigating-organizations.md
@@ -90,4 +90,4 @@ Your roles and permissions are organization-scoped. This means:
 - Administrative capabilities in one organization do not automatically grant administrative access in another.
 - Team memberships and their associated permissions are specific to each organization.
 
-For more details about roles and permissions, see the [Roles documentation](/cloud/concepts/identity-and-security/roles/).
+For more details about roles and permissions, see the [Roles documentation]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
diff --git a/content/en/cloud/guides/self-hosted/planning/_index.md b/content/en/cloud/guides/self-hosted/planning/_index.md
index d0045f41e19..3b8643473e5 100644
--- a/content/en/cloud/guides/self-hosted/planning/_index.md
+++ b/content/en/cloud/guides/self-hosted/planning/_index.md
@@ -148,4 +148,4 @@ Layer5 acknowledges the importance of air-gapped deployments and ensures content
 
 Plan for comprehensive observability across your Layer5 Cloud deployment, including metrics, logs, tracing, dashboards, and alerting. Establish SLOs for latency, availability, and saturation; size telemetry storage appropriately; and ensure privacy and access controls for operational data.
 
-See: [Monitoring](/cloud/guides/self-hosted/planning/monitoring/)
+See: [Monitoring]({{< ref "cloud/guides/self-hosted/planning/monitoring.md" >}})
diff --git a/content/en/cloud/guides/self-hosted/planning/images/self-hosted-deployment.svg b/content/en/cloud/guides/self-hosted/planning/identity-services/images/self-hosted-deployment.svg
similarity index 100%
rename from content/en/cloud/guides/self-hosted/planning/images/self-hosted-deployment.svg
rename to content/en/cloud/guides/self-hosted/planning/identity-services/images/self-hosted-deployment.svg
diff --git a/content/en/cloud/guides/self-hosted/planning/identity-services.md b/content/en/cloud/guides/self-hosted/planning/identity-services/index.md
similarity index 79%
rename from content/en/cloud/guides/self-hosted/planning/identity-services.md
rename to content/en/cloud/guides/self-hosted/planning/identity-services/index.md
index d85ac0ce602..47b8822117f 100644
--- a/content/en/cloud/guides/self-hosted/planning/identity-services.md
+++ b/content/en/cloud/guides/self-hosted/planning/identity-services/index.md
@@ -9,19 +9,19 @@ aliases:
 
 ---
 
-Layer5 Cloud offers a built-in identity provider (IDP), supporting OIDC for normal users and token-based authentication (access, ID, refresh tokens) for API clients with JSON Web Signature (JWS) for token signing. Layer5 Cloud users can sign-up via email and password in addition to social identity providers (Google and GitHub) via OAuth2. See [Getting Started with a Layer5 Account](/cloud/getting-started/getting-started-with-layer5-account/) for details.
+Layer5 Cloud offers a built-in identity provider (IDP), supporting OIDC for normal users and token-based authentication (access, ID, refresh tokens) for API clients with JSON Web Signature (JWS) for token signing. Layer5 Cloud users can sign-up via email and password in addition to social identity providers (Google and GitHub) via OAuth2. See [Getting Started with a Layer5 Account]({{< ref "cloud/getting-started/getting-started-with-layer5-account.md" >}}) for details.
 
 Layer5 Cloud identity services include features such as account recovery, email verification, automatica social sign-in account linking, and multi-factor authentication (coming soon).
 
 {{< alert type="info" >}}
-For more information, see [User Account Linking](/cloud/concepts/identity-and-security/users).
+For more information, see [User Account Linking]({{< ref "cloud/concepts/identity-and-security/users/_index.md" >}}).
 {{< /alert >}}
 
 Layer5 Cloud is also working toward being the IDP for Layer5 by supporting OIDC. It will leverage social authentication with Google, GitHub, Twitter, and LinkedIn based on OIDC to authenticate normal users. After authentication, Layer5 Cloud will be able to generate the access token, ID token, and refresh token for normal users. Applications, on the other hand, will use client credential OAUTH2 to get an access token.
 
 The following diagram illustrates the architecture of Layer5 Cloud.
 
-![self-hosted-deployment](../images/self-hosted-deployment.svg "image-center-no-shadow")
+![self-hosted-deployment](images/self-hosted-deployment.svg "image-center-no-shadow")
 
 ## Identity providers and custom domains
 
@@ -29,11 +29,11 @@ By default, every organization signs users in through your deployment's **shared
 
 ### Bring Your Own Credentials (BYOC)
 
-An organization can optionally **bring its own credentials (BYOC)**: its own Google OAuth client and GitHub OAuth App. With BYOC, the upstream consent screen, the registered redirect URL, and the entire OAuth round trip carry the organization's own branding and stay on the organization's own domain. BYOC is enabled per organization by a [Provider Administrator](/cloud/concepts/identity-and-security/roles/#provider-admin-role); an organization owner then registers the OAuth client ID and secret.
+An organization can optionally **bring its own credentials (BYOC)**: its own Google OAuth client and GitHub OAuth App. With BYOC, the upstream consent screen, the registered redirect URL, and the entire OAuth round trip carry the organization's own branding and stay on the organization's own domain. BYOC is enabled per organization by a [Provider Administrator]({{< ref "cloud/concepts/identity-and-security/roles/_index.md#provider-admin-role" >}}); an organization owner then registers the OAuth client ID and secret.
 
 ### When BYOC is optional vs. required
 
-Whether BYOC is *optional* or *required* depends on your organization's [custom domain](/cloud/guides/self-hosted/white-labeling/#social-sign-in-on-a-custom-domain) and how it relates to the **base domain** (the registrable domain, or eTLD+1) of your deployment:
+Whether BYOC is *optional* or *required* depends on your organization's [custom domain]({{< ref "cloud/guides/self-hosted/white-labeling/_index.md#social-sign-in-on-a-custom-domain" >}}) and how it relates to the **base domain** (the registrable domain, or eTLD+1) of your deployment:
 
 | Organization's domain | Default identity providers | BYOC |
 | --- | --- | --- |
@@ -59,8 +59,8 @@ Organizations that share an identity provider sit within the same authentication
 
 The canonical host and on-eTLD custom hosts typically draw on the shared, central identity provider, so organizations reached through them are within one shared authentication boundary. An organization with its own (BYOC) identity provider is its own boundary, no matter how its host is named. The DNS shape of the host is not the boundary — the identity provider behind it is.
 
-This is the authentication (host-class) view of the boundary. It composes with the **authorization** view — where each organization context independently scopes what a user is permitted to do via [keys](/cloud/concepts/identity-and-security/keys/), [keychains](/cloud/concepts/identity-and-security/keychains/), and [roles](/cloud/concepts/identity-and-security/roles/) — and with **granular** resource-access sharing that can cross organizations. For the complete picture of how these layers fit together, see [Identity and Security → Security Boundaries](/cloud/concepts/identity-and-security/#security-boundaries).
+This is the authentication (host-class) view of the boundary. It composes with the **authorization** view — where each organization context independently scopes what a user is permitted to do via [keys]({{< ref "cloud/concepts/identity-and-security/keys.md" >}}), [keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}), and [roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}) — and with **granular** resource-access sharing that can cross organizations. For the complete picture of how these layers fit together, see [Identity and Security → Security Boundaries]({{< ref "cloud/concepts/identity-and-security/_index.md#security-boundaries" >}}).
 
 {{< alert type="info" >}}
-For the custom-domain setup walkthrough and the on-eTLD vs. off-eTLD distinction, see [White-labeling → Social sign-in on a custom domain](/cloud/guides/self-hosted/white-labeling/#social-sign-in-on-a-custom-domain).
+For the custom-domain setup walkthrough and the on-eTLD vs. off-eTLD distinction, see [White-labeling → Social sign-in on a custom domain]({{< ref "cloud/guides/self-hosted/white-labeling/_index.md#social-sign-in-on-a-custom-domain" >}}).
 {{< /alert >}}
diff --git a/content/en/cloud/guides/self-hosted/planning/images/kanvas-collaboration-networking.svg b/content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication/images/kanvas-collaboration-networking.svg
similarity index 100%
rename from content/en/cloud/guides/self-hosted/planning/images/kanvas-collaboration-networking.svg
rename to content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication/images/kanvas-collaboration-networking.svg
diff --git a/content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication.md b/content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication/index.md
similarity index 94%
rename from content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication.md
rename to content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication/index.md
index 7a51d9ca368..442983689e0 100644
--- a/content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication.md
+++ b/content/en/cloud/guides/self-hosted/planning/peer-to-peer-communication/index.md
@@ -20,7 +20,7 @@ Characteristics of the peer-to-peer communication include:
 - Very little server load
 - Not suited for a large amount of collaborators on a single document (each peer is connected to each other)
 
-![kanvas-collaboration-networking](../images/kanvas-collaboration-networking.svg "image-center-no-shadow")
+![kanvas-collaboration-networking](images/kanvas-collaboration-networking.svg "image-center-no-shadow")
 
 ### Default Configuration
 
diff --git a/content/en/cloud/guides/self-hosted/white-labeling/_index.md b/content/en/cloud/guides/self-hosted/white-labeling/_index.md
index 42e33b126b4..aca35b2e36c 100644
--- a/content/en/cloud/guides/self-hosted/white-labeling/_index.md
+++ b/content/en/cloud/guides/self-hosted/white-labeling/_index.md
@@ -38,7 +38,7 @@ This example includes a custom branding with colors and full-sized logo.
 
 Layer5 Cloud supports customizing themes on a per organization basis. This includes the ability to upload your own logo and define your own color scheme. Your logo will be displayed in the top left corner of the dashboard. Both a full-sized logo and a logo mark are supported.
 
-As an [Organization Administrator](/cloud/concepts/identity-and-security/roles/organization-roles/), you can add your organization's logo to the global navigation bar, which supports a large, horizontal logo for desktop users and a small, square logo for mobile users. The logo appears at the top of each user's window for all Layer5 Cloud pages within your organization.
+As an [Organization Administrator]({{< ref "cloud/concepts/identity-and-security/roles/organization-roles.md" >}}), you can add your organization's logo to the global navigation bar, which supports a large, horizontal logo for desktop users and a small, square logo for mobile users. The logo appears at the top of each user's window for all Layer5 Cloud pages within your organization.
 
 {{% card header="Preference Example" footer="<i>Example: Selection of theme</i>" %}}
 This example shows how to customize through different themes
@@ -141,7 +141,7 @@ To set up a www or custom subdomain, such as `www.example.com` or `meshery.examp
 
 In Layer5 Cloud, navigate to your Provider Organization.
 
-Under your Organization name, click Edit. If you cannot click the "Edit" action, verify that you are a [Provider Administrator](/cloud/concepts/identity-and-security/roles).
+Under your Organization name, click Edit. If you cannot click the "Edit" action, verify that you are a [Provider Administrator]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).
 
 Under "Custom domain", type your custom domain, then click Save. This will create a server configuration that will require a reboot in order to take effect.
 
@@ -191,10 +191,10 @@ Whether social sign-in (Google and GitHub) works on a custom domain depends on h
 - **Different base domain (fully-custom).** If the custom domain sits on a different base domain — for example you CNAME `meshery.yourcompany.com` to the hosted `cloud.layer5.io`, where `yourcompany.com` and `layer5.io` are different base domains — the secure social sign-in handshake cannot hand off between the two unrelated domains using the shared default identity providers. **Social sign-in on a fully-custom domain therefore requires your organization to bring its own identity provider credentials (BYOC)**: your own Google OAuth client and GitHub OAuth App, registered against your domain.
 
 {{< alert title="Social buttons are hidden until your own identity providers are configured" color="info" >}}
-On a fully-custom domain **without** its own identity providers, the Google and GitHub buttons are **hidden** on the login and sign-up screens — they would otherwise lead to a sign-in that cannot complete. **Email-and-password sign-in and sign-up both remain fully available** — the **Log In / Sign Up** toggle stays visible, so new users can still register and existing users can still sign in. Only the social buttons are hidden. They reappear automatically once your organization configures its own identity providers. See [Identity Services](/cloud/guides/self-hosted/planning/identity-services/) for what BYOC is and when it is required.
+On a fully-custom domain **without** its own identity providers, the Google and GitHub buttons are **hidden** on the login and sign-up screens — they would otherwise lead to a sign-in that cannot complete. **Email-and-password sign-in and sign-up both remain fully available** — the **Log In / Sign Up** toggle stays visible, so new users can still register and existing users can still sign in. Only the social buttons are hidden. They reappear automatically once your organization configures its own identity providers. See [Identity Services]({{< ref "cloud/guides/self-hosted/planning/identity-services/index.md" >}}) for what BYOC is and when it is required.
 {{< /alert >}}
 
-The same base domain / different base domain split above is not only about whether social buttons appear — it also marks an **authentication boundary**. Organizations that share an identity provider (the canonical host and on-eTLD custom subdomains that use the shared, central provider) sit within the same authentication boundary, while an organization that brings its own (BYOC) provider is a distinct authentication boundary: **same identity provider source means the same security boundary**, regardless of how the host is named. See [Identity Services → The identity provider is the security boundary](/cloud/guides/self-hosted/planning/identity-services/#the-identity-provider-is-the-security-boundary) and [Identity and Security → Security Boundaries](/cloud/concepts/identity-and-security/#security-boundaries).
+The same base domain / different base domain split above is not only about whether social buttons appear — it also marks an **authentication boundary**. Organizations that share an identity provider (the canonical host and on-eTLD custom subdomains that use the shared, central provider) sit within the same authentication boundary, while an organization that brings its own (BYOC) provider is a distinct authentication boundary: **same identity provider source means the same security boundary**, regardless of how the host is named. See [Identity Services → The identity provider is the security boundary]({{< ref "cloud/guides/self-hosted/planning/identity-services/index.md#the-identity-provider-is-the-security-boundary" >}}) and [Identity and Security → Security Boundaries]({{< ref "cloud/concepts/identity-and-security/_index.md#security-boundaries" >}}).
 
 ## Frequently asked questions about white labeling
 
diff --git a/content/en/cloud/guides/tutorials/images/embedding-badges-modal.svg b/content/en/cloud/guides/tutorials/assigning-user-badges/images/embedding-badges-modal.svg
similarity index 100%
rename from content/en/cloud/guides/tutorials/images/embedding-badges-modal.svg
rename to content/en/cloud/guides/tutorials/assigning-user-badges/images/embedding-badges-modal.svg
diff --git a/content/en/cloud/guides/tutorials/assigning-user-badges.md b/content/en/cloud/guides/tutorials/assigning-user-badges/index.md
similarity index 97%
rename from content/en/cloud/guides/tutorials/assigning-user-badges.md
rename to content/en/cloud/guides/tutorials/assigning-user-badges/index.md
index f8d642677cc..956cccdbd0d 100755
--- a/content/en/cloud/guides/tutorials/assigning-user-badges.md
+++ b/content/en/cloud/guides/tutorials/assigning-user-badges/index.md
@@ -44,7 +44,7 @@ To share your badges on other social profiles, utilize the provided embedded cod
 3. Copy the html or the markdown code by clicking the Embed Code icon
 4. Paste the code in your site
 
-{{< figure src="/cloud/guides/tutorials/images/embedding-badges-modal.svg" alt="Embedding-badges-modal">}}
+{{< figure src="images/embedding-badges-modal.svg" alt="Embedding-badges-modal">}}
 
 ### FAQ
 - **Is there a limit to the number of badges that I can earn?**  
diff --git a/content/en/cloud/guides/tutorials/promoting-a-design.md b/content/en/cloud/guides/tutorials/promoting-a-design.md
index e1cafe370cf..6d919d089b1 100644
--- a/content/en/cloud/guides/tutorials/promoting-a-design.md
+++ b/content/en/cloud/guides/tutorials/promoting-a-design.md
@@ -13,7 +13,7 @@ aliases:
 
 This guide walks through how Five promotes the `prod-deployment-v2` design from the `orbital-staging` workspace to `orbital-production`, with Zara Osei (Infrastructure Team Admin) approving the environment assignment.
 
-See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full Orbital Labs narrative reference.
+See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full Orbital Labs narrative reference.
 
 ## Overview
 
@@ -69,7 +69,7 @@ If your organization requires Team Admin approval before production deployments,
 3. She clicks **Approve** — the deployment proceeds to `prod-aws`.
 
 {{< alert type="info" title="Why does Zara need to approve?" >}}
-The Infrastructure team's keychain grants `orbital-production` workspace access and `prod-aws` environment deployment rights only to members who have been explicitly granted those keys. Zara, as Team Admin, holds the approval authority for production environment assignments. See [Keychains](/cloud/concepts/identity-and-security/keychains/) for how this is configured.
+The Infrastructure team's keychain grants `orbital-production` workspace access and `prod-aws` environment deployment rights only to members who have been explicitly granted those keys. Zara, as Team Admin, holds the approval authority for production environment assignments. See [Keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md" >}}) for how this is configured.
 {{< /alert >}}
 
 ### Step 5 — Verify the deployment
@@ -82,6 +82,6 @@ After approval:
 
 ## What's Next
 
-- To give the Development team visibility into the production design (read-only), Five can share the design individually with Rex and Jordan. See [Sharing a Workspace](/cloud/guides/tutorials/sharing-a-workspace/).
+- To give the Development team visibility into the production design (read-only), Five can share the design individually with Rex and Jordan. See [Sharing a Workspace]({{< ref "cloud/guides/tutorials/sharing-a-workspace.md" >}}).
 - To set up a parallel deployment to `prod-gcp`, Five repeats Steps 3–5 selecting `prod-gcp` as the environment.
 - To roll back, Five transfers `prod-deployment-v2` back to `orbital-staging` and deploys the previous version from there.
diff --git a/content/en/cloud/guides/tutorials/sharing-a-workspace.md b/content/en/cloud/guides/tutorials/sharing-a-workspace.md
index 1eebdc90b91..b0503f90f18 100644
--- a/content/en/cloud/guides/tutorials/sharing-a-workspace.md
+++ b/content/en/cloud/guides/tutorials/sharing-a-workspace.md
@@ -25,7 +25,7 @@ In your browser, go to [Layer5 Cloud](https://cloud.layer5.io).
 4. Set the permission level — Five gives Rex **edit** access so he can deploy and modify the design.
 5. Click **Send**.
 
-![Flow for sharing designs](/cloud/concepts/catalog/images/Slide51.svg)
+![Flow for sharing designs](../../../images/Slide51.svg)
 
 Rex receives an invitation and can now open `microservices-baseline` in the `orbital-dev` workspace.
 
@@ -92,5 +92,5 @@ Someone you don't know might be viewing your design because:
 - Someone who can edit your design shared it further.
 
 {{< alert type="info" >}}
-See [Meet Five and the Cast](/cloud/getting-started/meet-five) for the full Orbital Labs workspace and character reference.
+See [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}) for the full Orbital Labs workspace and character reference.
 {{< /alert >}}
diff --git a/content/en/cloud/guides/workspaces/images/assign-designs-views.gif b/content/en/cloud/guides/workspaces/managing-workspaces/images/assign-designs-views.gif
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/assign-designs-views.gif
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/assign-designs-views.gif
diff --git a/content/en/cloud/guides/workspaces/images/assign-teams.gif b/content/en/cloud/guides/workspaces/managing-workspaces/images/assign-teams.gif
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/assign-teams.gif
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/assign-teams.gif
diff --git a/content/en/cloud/guides/workspaces/images/assign_environment.png b/content/en/cloud/guides/workspaces/managing-workspaces/images/assign_environment.png
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/assign_environment.png
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/assign_environment.png
diff --git a/content/en/cloud/guides/workspaces/images/create-workspace.gif b/content/en/cloud/guides/workspaces/managing-workspaces/images/create-workspace.gif
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/create-workspace.gif
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/create-workspace.gif
diff --git a/content/en/cloud/guides/workspaces/images/delete-workspace.gif b/content/en/cloud/guides/workspaces/managing-workspaces/images/delete-workspace.gif
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/delete-workspace.gif
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/delete-workspace.gif
diff --git a/content/en/cloud/guides/workspaces/images/edit-workspace.gif b/content/en/cloud/guides/workspaces/managing-workspaces/images/edit-workspace.gif
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/edit-workspace.gif
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/edit-workspace.gif
diff --git a/content/en/cloud/guides/workspaces/images/grid-view.png b/content/en/cloud/guides/workspaces/managing-workspaces/images/grid-view.png
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/grid-view.png
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/grid-view.png
diff --git a/content/en/cloud/guides/workspaces/images/security-audit.png b/content/en/cloud/guides/workspaces/managing-workspaces/images/security-audit.png
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/security-audit.png
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/security-audit.png
diff --git a/content/en/cloud/guides/workspaces/images/table-view.png b/content/en/cloud/guides/workspaces/managing-workspaces/images/table-view.png
similarity index 100%
rename from content/en/cloud/guides/workspaces/images/table-view.png
rename to content/en/cloud/guides/workspaces/managing-workspaces/images/table-view.png
diff --git a/content/en/cloud/guides/workspaces/managing-workspaces.md b/content/en/cloud/guides/workspaces/managing-workspaces/index.md
similarity index 83%
rename from content/en/cloud/guides/workspaces/managing-workspaces.md
rename to content/en/cloud/guides/workspaces/managing-workspaces/index.md
index 1c4f9623194..06a18632f79 100644
--- a/content/en/cloud/guides/workspaces/managing-workspaces.md
+++ b/content/en/cloud/guides/workspaces/managing-workspaces/index.md
@@ -11,10 +11,10 @@ aliases:
 
 This guide walks you through the practical steps of managing your Workspaces. Here, you'll learn how to create, edit, and delete Workspaces, as well as how to manage access by assigning teams and resources like Environments, Designs, and Views to them.
 
-If you're new to the concept of Workspaces, we recommend starting with the [Workspaces Overview](/cloud/concepts/spaces/workspaces/) to understand what a Workspace is and how it relates to key components like Environments, Designs, and Teams.
+If you're new to the concept of Workspaces, we recommend starting with the [Workspaces Overview]({{< ref "cloud/concepts/spaces/workspaces.md" >}}) to understand what a Workspace is and how it relates to key components like Environments, Designs, and Teams.
 
 {{< alert type="info" title="A Note on Permissions" >}}
-Every action described in this guide is governed by roles and permissions. To see a detailed breakdown of what your assigned role allows you to do, please refer to the [Default Permissions](/cloud/reference/default-permissions/) documentation.
+Every action described in this guide is governed by roles and permissions. To see a detailed breakdown of what your assigned role allows you to do, please refer to the [Default Permissions]({{< ref "cloud/reference/default-permissions.md" >}}) documentation.
 {{< /alert >}}
 
 ### View Workspaces
@@ -25,14 +25,14 @@ The [Workspaces page](https://cloud.layer5.io/spaces/workspaces) is where you ca
 
 #### Grid View
 The grid view offers a card-based layout, perfect for quickly identifying workspaces at a glance. Each card displays essential information, and you can flip it to reveal management options like editing or deleting and get audit history.
-![Grid view of workspaces showing card-based layout](/cloud/guides/workspaces/images/grid-view.png)
+![Grid view of workspaces showing card-based layout](images/grid-view.png)
 
 #### Table View
 The table view provides a dense, list-based format that is ideal for managing a large number of workspaces. This view allows for sorting and gives you more control over the specific details you see.
 
 To customize the information displayed, click the **View Columns** icon and select the attributes you want to see, such as Owner ID or Created Date.
 
-![Table view of workspaces showing list-based format with sorting options](/cloud/guides/workspaces/images/table-view.png)
+![Table view of workspaces showing list-based format with sorting options](images/table-view.png)
 
 {{< alert type="info" title="Consistent Actions Across Views" >}}
 Both the grid and table views provide the same set of management capabilities. You can choose the layout that best fits your needs without losing any functionality.
@@ -53,7 +53,7 @@ To create a workspace:
 3. Enter a descriptive **Name** and an optional **Description**, then click **Save**.
 4. Your new workspace will now appear on the page.
 
-![Animation showing workspace creation process](/cloud/guides/workspaces/images/create-workspace.gif)
+![Animation showing workspace creation process](images/create-workspace.gif)
 
 ### Edit a Workspace
 
@@ -62,7 +62,7 @@ You can modify a workspace's name and description at any time after it has been
 - **From the Grid View:** Flip the workspace card, then click the **pencil icon**.
 - **From the Table View:** Click the **pencil icon** in the row of the workspace you wish to modify.
 
-![Animation showing workspace editing process](/cloud/guides/workspaces/images/edit-workspace.gif)
+![Animation showing workspace editing process](images/edit-workspace.gif)
 
 ### Delete a Workspace
 
@@ -78,7 +78,7 @@ You can delete a single workspace or multiple workspaces at once.
   1. Select the checkboxes on the cards of the workspaces you want to delete.
   2. Click the **Delete** button that appears at the top of the page.
 
-![Animation showing workspace deletion process](/cloud/guides/workspaces/images/delete-workspace.gif)
+![Animation showing workspace deletion process](images/delete-workspace.gif)
 
 {{< alert type="info" title="Deletion Restrictions" >}}
 Meshery requires at least one workspace to exist within an organization at all times, so you cannot delete the last remaining workspace.
@@ -100,7 +100,7 @@ When a Workspace is deleted:
 ### Assign Teams to a Workspace
 Assigning teams is the way you grant users access to a workspace. Once a team is assigned, its members can access all of the Designs, Views, and Environments linked to that workspace.
 
-![Animation showing team assignment process](/cloud/guides/workspaces/images/assign-teams.gif)
+![Animation showing team assignment process](images/assign-teams.gif)
 
 You can open the team management Dialog from either the grid or table view.
 
@@ -118,14 +118,14 @@ Inside the assignment Dialog, you will see two lists: **Available Teams** on the
 3. Click **Save** to apply your changes.
 
 {{< alert type="info" title="Team and Workspace Relationships" >}}
-You can assign multiple teams to a single workspace, and a single team can also be a member of multiple workspaces. This provides flexible access control across your projects. For more restrictions, see [Workspaces documentation](/cloud/concepts/spaces/workspaces/).
+You can assign multiple teams to a single workspace, and a single team can also be a member of multiple workspaces. This provides flexible access control across your projects. For more restrictions, see [Workspaces documentation]({{< ref "cloud/concepts/spaces/workspaces.md" >}}).
 {{< /alert >}}
 
 ### Link Environments to a Workspace
-When you link an [Environment](/cloud/concepts/spaces/environments/) to a Workspace, you make all the connections (like those to Kubernetes clusters or databases) grouped within that Environment available. This means any team members with access to that Workspace can then deploy their applications or configurations to the resources.
+When you link an [Environment]({{< ref "cloud/concepts/spaces/environments.md" >}}) to a Workspace, you make all the connections (like those to Kubernetes clusters or databases) grouped within that Environment available. This means any team members with access to that Workspace can then deploy their applications or configurations to the resources.
 
 The process of linking environments is almost the same as assigning teams.
-![Animation showing environment assignment process](/cloud/guides/workspaces/images/assign_environment.png)
+![Animation showing environment assignment process](images/assign_environment.png)
 
 {{< alert type="info" title="Many-to-Many Relationship" >}}
 An Environment can be linked to multiple Workspaces, and a Workspace can have multiple Environments. This allows you to share common environments across different projects.
@@ -144,17 +144,17 @@ When you create a new Design, it is automatically added to your current Workspac
 3. Use the arrow buttons to move the selected Design(s) or View(s) to the target workspace.
 4. Click **Save**.
 
-![Animation showing design and view assignment process](/cloud/guides/workspaces/images/assign-designs-views.gif)
+![Animation showing design and view assignment process](images/assign-designs-views.gif)
 
 {{< alert type="info" title="Exclusive Ownership" >}}
-A Design or View can only exist in one Workspace at a time. Moving it to a new Workspace will automatically remove it from its original location. For more detailed information, see [Workspaces documentation](/cloud/concepts/spaces/workspaces/).
+A Design or View can only exist in one Workspace at a time. Moving it to a new Workspace will automatically remove it from its original location. For more detailed information, see [Workspaces documentation]({{< ref "cloud/concepts/spaces/workspaces.md" >}}).
 {{< /alert >}}
 
 ### View Recent Activity
 
 Meshery keeps a detailed audit log for each workspace, allowing you to track all significant events. This is useful for maintaining security and troubleshooting issues.
 
-![Workspace audit log showing recent activity](/cloud/guides/workspaces/images/security-audit.png)
+![Workspace audit log showing recent activity](images/security-audit.png)
 
 The activity log captures a variety of events, including:
 - The creation or deletion of the workspace.
@@ -184,7 +184,7 @@ Think of a private workspace as your personal Google "My Drive." You can use it
 **3. Template Library** 
 
 Create a separate, access-controlled Workspace to serve as your organization's internal, private template library. This is for storing non-public, organization-specific, or sensitive patterns. 
-> This practice complements the [public Catalog](/cloud/concepts/catalog/exploring-the-catalog/), which is used for sharing generic, non-sensitive designs with the community. A dedicated Organization Catalog feature is also planned for the future.
+> This practice complements the [public Catalog]({{< ref "cloud/concepts/catalog/exploring-the-catalog/index.md" >}}), which is used for sharing generic, non-sensitive designs with the community. A dedicated Organization Catalog feature is also planned for the future.
 
 **4. The Team Space** 
 
@@ -202,7 +202,7 @@ For teams requiring strict separation between environments, this pattern is esse
   - **Access**: Access to the Design is determined by the Teams assigned to its new Workspace.
   - **Cross-Organization Transfers**: You can move a Design you own into a Workspace in a different Organization, provided you have the necessary permissions in the target Organization. 
 
-> A key restriction is that a user, even with a [Workspace Admin](/cloud/concepts/identity-and-security/roles/workspace-roles/) role, cannot manage a Design they **do not own**. This action requires [Organization Admin](/cloud/concepts/identity-and-security/roles/organization-roles/) or Organization Owner permissions.
+> A key restriction is that a user, even with a [Workspace Admin]({{< ref "cloud/concepts/identity-and-security/roles/workspace-roles.md" >}}) role, cannot manage a Design they **do not own**. This action requires [Organization Admin]({{< ref "cloud/concepts/identity-and-security/roles/organization-roles.md" >}}) or Organization Owner permissions.
 
 #### 2. What can other users of a Workspace do with my design? Can they delete my design?
 
@@ -220,7 +220,7 @@ Currently, it is **not possible** to receive direct notifications or see a colla
 
 No. A user with whom you share a private Design cannot re-share it with others.
 
-> [learn more about sharing designs](/kanvas/designer/sharing/).
+> [learn more about sharing designs]({{< ref "kanvas/designer/sharing/index.md" >}}).
 
 #### 6. Does a workspace have space limitations or file count limitations?
 
@@ -228,7 +228,7 @@ Currently, there are no specific space or file count limitations for Workspaces.
 
 #### 7. How can I make my design publicly available, but read-only to other users?
 
-To make a Design available to everyone but in a read-only state, you should **[Publish](/kanvas/designer/publishing-designs/)** it. A **Published** design can be viewed and cloned by any user, but the original cannot be edited by others.
+To make a Design available to everyone but in a read-only state, you should **[Publish]({{< ref "kanvas/designer/publishing-designs/index.md" >}})** it. A **Published** design can be viewed and cloned by any user, but the original cannot be edited by others.
 
 #### 8. How do I share a private design with a specific team for collaboration?
 
diff --git a/content/en/cloud/concepts/catalog/images/Slide51.svg b/content/en/cloud/images/Slide51.svg
similarity index 100%
rename from content/en/cloud/concepts/catalog/images/Slide51.svg
rename to content/en/cloud/images/Slide51.svg
diff --git a/static/images/five/1.svg b/content/en/cloud/images/five/1.svg
similarity index 100%
rename from static/images/five/1.svg
rename to content/en/cloud/images/five/1.svg
diff --git a/static/images/five/2.svg b/content/en/cloud/images/five/2.svg
similarity index 100%
rename from static/images/five/2.svg
rename to content/en/cloud/images/five/2.svg
diff --git a/static/images/five/layer5-five-mascot-means-business.svg b/content/en/cloud/images/five/layer5-five-mascot-means-business.svg
similarity index 100%
rename from static/images/five/layer5-five-mascot-means-business.svg
rename to content/en/cloud/images/five/layer5-five-mascot-means-business.svg
diff --git a/content/en/cloud/reference/api-reference/_index.md b/content/en/cloud/reference/api-reference/_index.md
index 9810e1ca31c..bce8373ca5c 100644
--- a/content/en/cloud/reference/api-reference/_index.md
+++ b/content/en/cloud/reference/api-reference/_index.md
@@ -10,7 +10,7 @@ To create integrations, retrieve data, and automate your cloud native infrastruc
 
 ## Authenticating with the API
 
-In order to authenticate to Layer5 Cloud's REST API, you need to generate and use a [security token](/cloud/concepts/identity-and-security/tokens/). Visit your [user account's security tokens](https://cloud.layer5.io/security/tokens) and generate a long-lived token. Security tokens remain valid until you revoke them, and you can issue as many as you need.
+In order to authenticate to Layer5 Cloud's REST API, you need to generate and use a [security token]({{< ref "cloud/concepts/identity-and-security/tokens.md" >}}). Visit your [user account's security tokens](https://cloud.layer5.io/security/tokens) and generate a long-lived token. Security tokens remain valid until you revoke them, and you can issue as many as you need.
 
 To authenticate with the API, pass the token as a bearer token in the `Authorization` header. For example, in cURL:
 
@@ -153,7 +153,7 @@ The following example demonstrate how to retrieve information from the Academy R
 
 ### Get the total number of registered learners in Academy
 
-Use the Layer5 Cloud API to retrieve the *total* number of registered learners. Pass your [Security Token](https://docs.layer5.io/cloud/concepts/identity-and-security/tokens/) as a Bearer token in the `Authorization` header (as shown in [Authenticating with API](/cloud/reference/api-reference/#authenticating-with-the-api)). The response JSON includes an array of user objects.
+Use the Layer5 Cloud API to retrieve the *total* number of registered learners. Pass your [Security Token](https://docs.layer5.io/cloud/concepts/identity-and-security/tokens/) as a Bearer token in the `Authorization` header (as shown in [Authenticating with API]({{< ref "cloud/reference/api-reference/_index.md#authenticating-with-the-api" >}})). The response JSON includes an array of user objects.
 
 
 {{< tabpane >}}
diff --git a/content/en/cloud/reference/default-permissions.md b/content/en/cloud/reference/default-permissions.md
index 2ca694b6101..26463c9edba 100644
--- a/content/en/cloud/reference/default-permissions.md
+++ b/content/en/cloud/reference/default-permissions.md
@@ -6,7 +6,7 @@ categories: [Identity]
 tags: [perms]
 ---
 
-{{< alert title="Customizable Permissions" type="info" >}}Default permissions can be easily customized by simply creating your own [keychains](/cloud/concepts/identity-and-security/keychains/#keychains-management) and [roles](/cloud/concepts/identity-and-security/roles).{{< /alert >}}
+{{< alert title="Customizable Permissions" type="info" >}}Default permissions can be easily customized by simply creating your own [keychains]({{< ref "cloud/concepts/identity-and-security/keychains.md#keychains-management" >}}) and [roles]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}).{{< /alert >}}
 
 **Legend:**
 
diff --git a/content/en/contributing/contributing-to-docs.md b/content/en/contributing/contributing-to-docs.md
index a6358edaaa7..83ea22ca220 100644
--- a/content/en/contributing/contributing-to-docs.md
+++ b/content/en/contributing/contributing-to-docs.md
@@ -167,13 +167,36 @@ You can override the default styles and add new ones:
 
 ### Image styling
 
-By default, Markdown images are written like this:
+### Link and asset paths
+
+Use Hugo `ref` when linking from one documentation page to another documentation page:
+
+```markdown
+[About]({{</* ref "about.md" */>}})
+```
+
+For images and other assets that live next to `index.md` or `_index.md`, or inside that page bundle, use a normal relative path:
 
 ```markdown
-![Alt text](/path/to/image.png)
+![Alt text](images/example.png)
 ```
 
-These are rendered with:
+If you need HTML for custom sizing, keep the same relative path:
+
+```html
+<img src="images/example.png" alt="Example description" style="max-width: 40vw; max-height: 60vh; display: block; margin: 1rem auto;" />
+```
+
+For global shared assets that physically live under `static/`, use the `static` shortcode:
+
+```markdown
+![Layer5 logo]({{</* static "images/logo.svg" */>}})
+```
+
+Do not use the `static` shortcode for assets under `content/`.
+
+By default, Markdown images are rendered with:
+
 * `max-width: 70%` of the viewport
 * `max-height: 80vh` of the viewport height
 * centered block layout
@@ -181,14 +204,14 @@ These are rendered with:
 This default styling works well for most landscape (horizontal) images. However, if an image is very tall, narrow, or otherwise looks awkward, you can override the default by embedding raw HTML and specifying a custom size:
 
 ```html
-<img src="./images/example.png" alt="Example description" style="max-width: 40vw; max-height: 60vh; display: block; margin: 1rem auto;" />
+<img src="images/example.png" alt="Example description" style="max-width: 40vw; max-height: 60vh; display: block; margin: 1rem auto;" />
 ```
 
 If you want your image to include a caption for explanation or accessibility, you can use the `<figure>` element:
 
 ```html
 <figure>
-  <img src="./images/example.png" alt="Example description" />
+  <img src="images/example.png" alt="Example description" />
   <figcaption>Example: Control which layers of your design are visible using the Layers panel.</figcaption>
 </figure>
 ```
diff --git a/static/images/landing/discuss.png b/content/en/images/landing/discuss.png
similarity index 100%
rename from static/images/landing/discuss.png
rename to content/en/images/landing/discuss.png
diff --git a/content/en/kanvas/_index.md b/content/en/kanvas/_index.md
index 0913c1fe65d..90e060f22d6 100755
--- a/content/en/kanvas/_index.md
+++ b/content/en/kanvas/_index.md
@@ -56,7 +56,7 @@ aliases:
 </style>  
 ## Understanding the Layer5 Ecosystem
 
-<a href="/cloud">
+<a href="{{< ref "cloud/_index.md" >}}">
 <div class="hidden-highlight-box"  style="display:flex; gap: 1.5rem;">
 <div style="min-width:50px;align-self:center;line-height:1.85rem;">{{< svg name="cloud" >}}</div>
 <div style="margin:auto;color:#ccc;">
@@ -66,10 +66,10 @@ aliases:
 </a>
 
 
-<a href="/kanvas">
+<a href="{{< ref "kanvas/_index.md" >}}">
 <div class="highlight-box" style="display:flex; gap: .5rem;">
 <div style="min-width:50px;align-self:center;">
-<img src="/images/logos/kanvas-icon-color.svg" style="height:65px;width:65px;margin-left:-.45rem; border:0px;  background-color: transparent;" alt="kanvas logo"/></div>
+<img src='{{< static "images/logos/kanvas-icon-color.svg" >}}' style="height:65px;width:65px;margin-left:-.45rem; border:0px;  background-color: transparent;" alt="kanvas logo"/></div>
 <div style="margin:auto; padding-left:1rem; color:#ccc; line-height:1.85rem;">
 <strong>Kanvas</strong> delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence.</div></div>
 </a>
@@ -88,16 +88,16 @@ Choose your mode of operation for Kanvas.
 
 <div style="display:flex;justify-content:center;">
 {{< cardpane >}}
-    <a href="../kanvas/designer/">
+    <a href="{{< ref "kanvas/designer/_index.md" >}}">
   {{< card header="Designer" >}}
-    <a href="../kanvas/designer/">Designer</a> mode is for those who want to create their own Kanvas, using the palette of components.
+    <a href="{{< ref "kanvas/designer/_index.md" >}}">Designer</a> mode is for those who want to create their own Kanvas, using the palette of components.
     <p>Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components.</p>
     <p>Use context-aware relationships configure your infrastructure intuitively.</p>
   {{< /card >}}
     </a>
-  <a href="../kanvas/operator/">
+  <a href="{{< ref "kanvas/operator/_index.md" >}}">
   {{< card header="Operator" >}}
-    <a href="../kanvas/operator/">Operator</a> mode is for operating your Kubernetes clusters and cloud native infrastructure.
+    <a href="{{< ref "kanvas/operator/_index.md" >}}">Operator</a> mode is for operating your Kubernetes clusters and cloud native infrastructure.
     <p>Bring all your Kubernetes clusters under a common management. Deploy designs, apply patterns, manage and operate your deployments and services in real-time.</p>
     <p>Interactively connect to pods and containers to debug and troubleshoot.</p>
   {{< /card >}}
diff --git a/content/en/kanvas/advanced/autopan/index.md b/content/en/kanvas/advanced/autopan.md
similarity index 88%
rename from content/en/kanvas/advanced/autopan/index.md
rename to content/en/kanvas/advanced/autopan.md
index f84da1b84e0..e16d92d4b5f 100644
--- a/content/en/kanvas/advanced/autopan/index.md
+++ b/content/en/kanvas/advanced/autopan.md
@@ -97,19 +97,19 @@ Autopan is not a static decision taken when you load a design. Kanvas re-evaluat
 This is driven by the shared `useReactiveFeatureGate` hook in Kanvas's source, which any future feature gated by (user preference × render mode × graph size) can reuse.
 
 {{< alert type="note" title="When autopan is disabled automatically" >}}
-If you are working on a large design and autopan seems to not kick in at the edge, check the [Render Modes](/kanvas/advanced/render-modes/) page. Your graph has probably exceeded the threshold for the current render mode and Kanvas has disabled autopan for performance. You can either switch to a lower-fidelity render mode — which raises the threshold — or pan manually for the remaining operations.
+If you are working on a large design and autopan seems to not kick in at the edge, check the [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) page. Your graph has probably exceeded the threshold for the current render mode and Kanvas has disabled autopan for performance. You can either switch to a lower-fidelity render mode — which raises the threshold — or pan manually for the remaining operations.
 {{< /alert >}}
 
 ### Tuning autopan for your design
 
 If autopan is disabled on a design where you would like it to be active, you have three levers:
 
-1. **Switch to a lower-fidelity render mode.** Wireframe and View-Only raise the threshold to 1,000 nodes. See the [Render Modes](/kanvas/advanced/render-modes/) page for what each mode costs and what it hides.
-2. **Reduce the live listener count.** The [Layers Panel](/kanvas/advanced/performance/) lets you disable layers of visual information (badges, tags, feasibility indicators) that contribute to the pan fan-out. Turning off a layer effectively moves the threshold upward because there are fewer listeners to amplify each pan.
+1. **Switch to a lower-fidelity render mode.** Wireframe and View-Only raise the threshold to 1,000 nodes. See the [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) page for what each mode costs and what it hides.
+2. **Reduce the live listener count.** The [Layers Panel]({{< ref "kanvas/advanced/performance/index.md" >}}) lets you disable layers of visual information (badges, tags, feasibility indicators) that contribute to the pan fan-out. Turning off a layer effectively moves the threshold upward because there are fewer listeners to amplify each pan.
 3. **Break the design into smaller designs.** If you are consistently bumping the threshold in your preferred render mode, the design might be past the scale Kanvas targets for interactive editing. Splitting it into referenced sub-designs keeps each one within the sweet spot.
 
 ### Related pages
 
-- [Render Modes](/kanvas/advanced/render-modes/) — what each mode renders, what it hides, and how Adaptive Render Mode flips between them automatically.
-- [Performance Limits and Tuning](/kanvas/advanced/performance/) — overall Kanvas performance envelope and the Layers Panel.
-- [Design Render Quality](/kanvas/advanced/url-parameters/) — overriding the render mode via URL parameters (useful for snapshots and embeds).
+- [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) — what each mode renders, what it hides, and how Adaptive Render Mode flips between them automatically.
+- [Performance Limits and Tuning]({{< ref "kanvas/advanced/performance/index.md" >}}) — overall Kanvas performance envelope and the Layers Panel.
+- [Design Render Quality]({{< ref "kanvas/advanced/url-parameters/index.md" >}}) — overriding the render mode via URL parameters (useful for snapshots and embeds).
diff --git a/content/en/kanvas/advanced/performance/layers-panel.png b/content/en/kanvas/advanced/performance/images/layers-panel.png
similarity index 100%
rename from content/en/kanvas/advanced/performance/layers-panel.png
rename to content/en/kanvas/advanced/performance/images/layers-panel.png
diff --git a/content/en/kanvas/advanced/performance/index.md b/content/en/kanvas/advanced/performance/index.md
index 2a0e3ef1fda..a868d395935 100644
--- a/content/en/kanvas/advanced/performance/index.md
+++ b/content/en/kanvas/advanced/performance/index.md
@@ -43,11 +43,11 @@ Kanvas supports up to 1,000 relationships per design. Exceeding this limit can i
 
 #### Maximum Number of TagSet Relationships
 
-![Labels and Annotations](../../designer/tagsets/group-components.png)
+![Labels and Annotations](../../images/group-components.png)
 
 Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design.
 
-Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the "Group Components" button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/).
+Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the "Group Components" button in the Designer dock. For more information, see [Working with Tags]({{< ref "kanvas/designer/tagsets/index.md" >}}).
 
 <!--
 #### Maximum Number of Relationships per Component
@@ -55,7 +55,7 @@ Upon loading a design exceeds that exceeds 20 tags within a single design, Kanva
 
 ### Maximum Number of Users
 
-Under the Free [subscription plan](https://layer5.io/pricing), Kanvas supports at least 20 users per design. As resources allow, up to 34 users may simultaneously collaborate within a given design. If you have a large team collaborating on a design, be mindful of the number of users active at the same time. Too many users can strain the performance of your design, leading to slower response times and potential data loss. See [Layer5 Cloud Networking Services](/cloud/guides/self-hosted/planning/peer-to-peer-communication) for more details.
+Under the Free [subscription plan](https://layer5.io/pricing), Kanvas supports at least 20 users per design. As resources allow, up to 34 users may simultaneously collaborate within a given design. If you have a large team collaborating on a design, be mindful of the number of users active at the same time. Too many users can strain the performance of your design, leading to slower response times and potential data loss. See [Layer5 Cloud Networking Services]({{< ref "cloud/guides/self-hosted/planning/peer-to-peer-communication/index.md" >}}) for more details.
 
 ### Impact of Images
 
@@ -72,7 +72,7 @@ Under the Free subscription plan, Kanvas support a single image size of up to 50
 To improve the performance of your design, consider optimizing by disabling one or more layers.
 
 <figure>
-  <img src="./layers-panel.png" alt="Layers panel in Kanvas Designer" />
+  <img src="images/layers-panel.png" alt="Layers panel in Kanvas Designer" />
   <figcaption>Control which layers of your design are visible using the Layers panel.</figcaption>
 </figure>
 
@@ -104,7 +104,7 @@ To optimize performance, consider the following:
 As your designs grow in complexity, certain design patterns can impact how smoothly Kanvas responds. Understanding these factors helps you create designs that remain fast and responsive.
 
 {{< alert type="info" title="Related performance controls" >}}
-This page covers the design patterns and tuning levers that affect Kanvas performance. For the per-mode rendering ladder (Full, Medium, Wireframe, View-Only) and automatic fidelity management, see [Render Modes](/kanvas/advanced/render-modes/). For the drag-to-edge viewport pan and its per-render-mode size thresholds, see [Auto-pan on Drag](/kanvas/advanced/autopan/).
+This page covers the design patterns and tuning levers that affect Kanvas performance. For the per-mode rendering ladder (Full, Medium, Wireframe, View-Only) and automatic fidelity management, see [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}). For the drag-to-edge viewport pan and its per-render-mode size thresholds, see [Auto-pan on Drag]({{< ref "kanvas/advanced/autopan.md" >}}).
 {{< /alert >}}
 
 ### Working with Grouped Components
@@ -118,7 +118,7 @@ When you create groups of components (placing multiple components inside a paren
 - Screen updates appear slower during interactions
 
 {{< alert type="warning" title="Large Groups" >}}
-Groups containing 100 or more components may experience noticeable lag during drag operations. Consider breaking large groups into smaller, logical subgroups for better performance. If dragging across a design that extends past your viewport feels slow, see [Auto-pan on Drag](/kanvas/advanced/autopan/) for the per-render-mode thresholds that gate the drag-to-edge pan.
+Groups containing 100 or more components may experience noticeable lag during drag operations. Consider breaking large groups into smaller, logical subgroups for better performance. If dragging across a design that extends past your viewport feels slow, see [Auto-pan on Drag]({{< ref "kanvas/advanced/autopan.md" >}}) for the per-render-mode thresholds that gate the drag-to-edge pan.
 {{< /alert >}}
 
 ### How Kanvas Optimizes Your Design
@@ -341,6 +341,6 @@ Kanvas can paint the same design at four distinct fidelity levels — **Full**,
 
 Render modes are the primary performance lever once a design grows past a few hundred components. Rather than duplicate the details here, see:
 
-- [Render Modes](/kanvas/advanced/render-modes/) — what each mode renders, the per-mode feature-size gates, and how Adaptive mode decides when to upshift or downshift.
-- [Auto-pan on Drag](/kanvas/advanced/autopan/) — the most visible feature that is gated per render mode (autopan disables itself on graphs past 100 / 500 / 1,000 elements for Full / Medium / Wireframe respectively).
-- [Design Render Quality](/kanvas/advanced/url-parameters/) — URL parameters (`render=full|medium|wireframe|viewOnly`, `adaptive=true`) for forcing a render mode or enabling adaptive behavior on a specific link.
+- [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) — what each mode renders, the per-mode feature-size gates, and how Adaptive mode decides when to upshift or downshift.
+- [Auto-pan on Drag]({{< ref "kanvas/advanced/autopan.md" >}}) — the most visible feature that is gated per render mode (autopan disables itself on graphs past 100 / 500 / 1,000 elements for Full / Medium / Wireframe respectively).
+- [Design Render Quality]({{< ref "kanvas/advanced/url-parameters/index.md" >}}) — URL parameters (`render=full|medium|wireframe|viewOnly`, `adaptive=true`) for forcing a render mode or enabling adaptive behavior on a specific link.
diff --git a/content/en/kanvas/advanced/render-modes/index.md b/content/en/kanvas/advanced/render-modes.md
similarity index 95%
rename from content/en/kanvas/advanced/render-modes/index.md
rename to content/en/kanvas/advanced/render-modes.md
index c985403e3b9..1cb31992bd9 100644
--- a/content/en/kanvas/advanced/render-modes/index.md
+++ b/content/en/kanvas/advanced/render-modes.md
@@ -78,7 +78,7 @@ You can also set the render mode via URL query parameter. Append the `render` pa
 
 For example: `https://kanvas.new/extension/meshmap?render=wireframe&mode=design&design=xxxx`
 
-For more details on URL parameters, see [Design Render Quality](/kanvas/advanced/url-parameters/).
+For more details on URL parameters, see [Design Render Quality]({{< ref "kanvas/advanced/url-parameters/index.md" >}}).
 
 ## Feature size gates by render mode
 
@@ -88,14 +88,14 @@ Threshold table:
 
 | Feature                      | Full                     | Medium                   | Wireframe                | View-Only                | Notes                                                                                           |
 | ---------------------------- | -----------------------: | -----------------------: | -----------------------: | -----------------------: | ----------------------------------------------------------------------------------------------- |
-| **Auto-pan on Drag**         |                      100 |                      500 |                    1,000 |                    1,000 | See [Auto-pan on Drag](/kanvas/advanced/autopan/).                                              |
+| **Auto-pan on Drag**         |                      100 |                      500 |                    1,000 |                    1,000 | See [Auto-pan on Drag]({{< ref "kanvas/advanced/autopan.md" >}}).                                              |
 | **Layout animation**         |                      100 |                       —¹ |                       —¹ |                       —¹ | Animated layouts only run in Full mode with ≤100 edges.                                         |
 | **TagSet visual grouping**   |                    20²  |                      20²  |                      20²  |                      20²  | TagSets display auto-disables past 20 tags; re-enable via **Group Components** in the dock.    |
 | **Feasibility evaluation**   |      zoom-gated³       |      zoom-gated³       |      zoom-gated³       |      zoom-gated³       | Gated on zoom, not size — hidden when you zoom out past the detail threshold.                   |
 | **Component style editing**  |      zoom-gated³       |      zoom-gated³       |      zoom-gated³       |      zoom-gated³       | Same: revealed only at detailed zoom levels.                                                    |
 
 ¹ *Layout animation is a Full-mode-only feature by design. Kanvas falls back to instant (unanimated) layouts in other modes, so the per-mode threshold doesn't apply.*
-² *TagSet threshold is tag count, not node count. See [Working with Tags](/kanvas/designer/tagsets/).*
+² *TagSet threshold is tag count, not node count. See [Working with Tags]({{< ref "kanvas/designer/tagsets/index.md" >}}).*
 ³ *Zoom-gated features activate when your zoom level is above `MIN_ZOOM_FOR_DETAILED_RENDERING`. Zooming out suppresses them regardless of render mode.*
 
 ### How size gates interact with render modes
@@ -205,7 +205,7 @@ Each suggestion is shown at most once per minute to avoid notification fatigue.
 | Lay out a 500+ component design efficiently                | Switch to **Wireframe** for the layout pass, then bump back to Medium or Full for the detail pass.                  |
 | Share a read-only view                                     | Pick **View-Only** and share the design URL.                                                                        |
 | Recover autopan that stopped working                       | Either switch to a lower-fidelity render mode or delete/hide components to drop below the per-mode size threshold.  |
-| Make a snapshot with all badges and TagSets forced visible | Use `?render=full` in the URL — see [Design Render Quality](/kanvas/advanced/url-parameters/).                     |
+| Make a snapshot with all badges and TagSets forced visible | Use `?render=full` in the URL — see [Design Render Quality]({{< ref "kanvas/advanced/url-parameters/index.md" >}}).                     |
 
 ## Best practices
 
@@ -214,7 +214,7 @@ Each suggestion is shown at most once per minute to avoid notification fatigue.
 3. **Switch to Wireframe for layout work** — it is the fastest mode for rearranging large designs.
 4. **Use View Only for sharing** — when embedding designs or sharing read-only snapshots where editing should be prevented.
 5. **Set an appropriate ceiling** — if you do not need badges or tagsets, set the ceiling to Medium to avoid unnecessary rendering overhead.
-6. **Break large designs into smaller ones** — designs beyond 500 components benefit from being split regardless of render mode. See [Performance Limits and Tuning](/kanvas/advanced/performance/) for more guidance.
+6. **Break large designs into smaller ones** — designs beyond 500 components benefit from being split regardless of render mode. See [Performance Limits and Tuning]({{< ref "kanvas/advanced/performance/index.md" >}}) for more guidance.
 
 ## Known limitations
 
@@ -234,6 +234,6 @@ All four render modes work in both Designer and Operator contexts:
 
 ## Related pages
 
-- [Auto-pan on Drag](/kanvas/advanced/autopan/) — the most visible feature gated per render mode.
-- [Performance Limits and Tuning](/kanvas/advanced/performance/) — full performance envelope and the Layers Panel.
-- [Design Render Quality](/kanvas/advanced/url-parameters/) — URL parameter overrides for render mode.
+- [Auto-pan on Drag]({{< ref "kanvas/advanced/autopan.md" >}}) — the most visible feature gated per render mode.
+- [Performance Limits and Tuning]({{< ref "kanvas/advanced/performance/index.md" >}}) — full performance envelope and the Layers Panel.
+- [Design Render Quality]({{< ref "kanvas/advanced/url-parameters/index.md" >}}) — URL parameter overrides for render mode.
diff --git a/content/en/kanvas/advanced/url-parameters/no-tagsets.png b/content/en/kanvas/advanced/url-parameters/images/no-tagsets.png
similarity index 100%
rename from content/en/kanvas/advanced/url-parameters/no-tagsets.png
rename to content/en/kanvas/advanced/url-parameters/images/no-tagsets.png
diff --git a/content/en/kanvas/advanced/url-parameters/with-tagsets.png b/content/en/kanvas/advanced/url-parameters/images/with-tagsets.png
similarity index 100%
rename from content/en/kanvas/advanced/url-parameters/with-tagsets.png
rename to content/en/kanvas/advanced/url-parameters/images/with-tagsets.png
diff --git a/content/en/kanvas/advanced/url-parameters/index.md b/content/en/kanvas/advanced/url-parameters/index.md
index 05a0584fc9b..7f02e38ae64 100644
--- a/content/en/kanvas/advanced/url-parameters/index.md
+++ b/content/en/kanvas/advanced/url-parameters/index.md
@@ -18,12 +18,12 @@ To activate this full render mode, you will need to add the `render=full` parame
 The images below illustrate the difference this parameter makes:
 
 <figure>
-  <img src="/kanvas/advanced/url-parameters/no-tagsets.png" alt="Design rendering in Kanvas with default settings" />
+  <img src="images/no-tagsets.png" alt="Design rendering in Kanvas with default settings" />
   <figcaption>A design with default rendering; TagSets may not be visible</figcaption>
 </figure>
 
 <figure>
-  <img src="/kanvas/advanced/url-parameters/with-tagsets.png" alt="The design in Kanvas showing full details" />
+  <img src="images/with-tagsets.png" alt="The design in Kanvas showing full details" />
   <figcaption>The same design with `render=full` applied; TagSets and all other details are now visible</figcaption>
 </figure>
 
@@ -65,7 +65,7 @@ You can specify render modes via the `render` parameter:
 
 For example: `https://kanvas.new/extension/meshmap?render=wireframe&mode=design&design=xxxx`
 
-See [Render Modes](/kanvas/advanced/render-modes/) for detailed descriptions of each mode.
+See [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) for detailed descriptions of each mode.
 
 ## Adaptive Mode Parameter
 
@@ -73,4 +73,4 @@ You can enable Adaptive mode via URL parameter:
 
 `https://kanvas.new/extension/meshmap?adaptive=true&mode=design&design=xxxx`
 
-When `adaptive=true` is set, Kanvas will automatically monitor performance and switch render modes as needed. The current render mode (set via the `render` parameter or the default) becomes the ceiling -- the highest fidelity Adaptive mode will use. See [Render Modes](/kanvas/advanced/render-modes/) for details.
\ No newline at end of file
+When `adaptive=true` is set, Kanvas will automatically monitor performance and switch render modes as needed. The current render mode (set via the `render` parameter or the default) becomes the ceiling -- the highest fidelity Adaptive mode will use. See [Render Modes]({{< ref "kanvas/advanced/render-modes.md" >}}) for details.
\ No newline at end of file
diff --git a/content/en/kanvas/concepts/images/helm-chart-color.svg b/content/en/kanvas/concepts/helm-kanvas-snapshot/images/helm-chart-color.svg
similarity index 100%
rename from content/en/kanvas/concepts/images/helm-chart-color.svg
rename to content/en/kanvas/concepts/helm-kanvas-snapshot/images/helm-chart-color.svg
diff --git a/content/en/kanvas/concepts/helm-kanvas-snapshot.md b/content/en/kanvas/concepts/helm-kanvas-snapshot/index.md
similarity index 84%
rename from content/en/kanvas/concepts/helm-kanvas-snapshot.md
rename to content/en/kanvas/concepts/helm-kanvas-snapshot/index.md
index e7220698505..cdd75b75200 100644
--- a/content/en/kanvas/concepts/helm-kanvas-snapshot.md
+++ b/content/en/kanvas/concepts/helm-kanvas-snapshot/index.md
@@ -4,7 +4,7 @@ description: Helm CLI plugin to visually render a snapshot of your Helm charts.
 display_title: false
 categories: [kanvas]
 ---
-<img style="text-align: left; position:relative; display:inline; height: 32px; width: 32px;" src="/kanvas/concepts/images/helm-chart-color.svg" /> The **Kanvas Snapshot Helm Plugin** allows users to generate a visual snapshot of their Helm charts directly from the command line. It simplifies the process of creating Meshery Snapshots, providing a visual representation of packaged Helm charts. This plugin integrates with Meshery Cloud and GitHub Actions to automate the workflow of snapshot creation, which is especially useful for Helm users who need to quickly visualize their chart configurations.
+<img style="text-align: left; position:relative; display:inline; height: 32px; width: 32px;" src="images/helm-chart-color.svg" /> The **Kanvas Snapshot Helm Plugin** allows users to generate a visual snapshot of their Helm charts directly from the command line. It simplifies the process of creating Meshery Snapshots, providing a visual representation of packaged Helm charts. This plugin integrates with Meshery Cloud and GitHub Actions to automate the workflow of snapshot creation, which is especially useful for Helm users who need to quickly visualize their chart configurations.
 
 Helm charts can be complex, especially when custom configurations are applied via `values.yaml` files. This Meshery extension bridges the gap between Helm chart configurations and their visual representation by converting Helm charts into **Kanvas Snapshots**. These snapshots can be received either via email or as a URL displayed directly in the terminal.
 
diff --git a/content/en/kanvas/concepts/images/kanvas-icon-color.svg b/content/en/kanvas/concepts/kanvas-snapshot/images/kanvas-icon-color.svg
similarity index 100%
rename from content/en/kanvas/concepts/images/kanvas-icon-color.svg
rename to content/en/kanvas/concepts/kanvas-snapshot/images/kanvas-icon-color.svg
diff --git a/content/en/kanvas/concepts/images/kanvas-snapshot.png b/content/en/kanvas/concepts/kanvas-snapshot/images/kanvas-snapshot.png
similarity index 100%
rename from content/en/kanvas/concepts/images/kanvas-snapshot.png
rename to content/en/kanvas/concepts/kanvas-snapshot/images/kanvas-snapshot.png
diff --git a/content/en/kanvas/concepts/kanvas-snapshot.md b/content/en/kanvas/concepts/kanvas-snapshot/index.md
similarity index 95%
rename from content/en/kanvas/concepts/kanvas-snapshot.md
rename to content/en/kanvas/concepts/kanvas-snapshot/index.md
index 8b078ee6f2f..74900b26e98 100644
--- a/content/en/kanvas/concepts/kanvas-snapshot.md
+++ b/content/en/kanvas/concepts/kanvas-snapshot/index.md
@@ -7,14 +7,14 @@ aliases:
 - /kanvas/concepts/snapshot
 ---
 
-<img style="height: 32px; width: 32px;" src="/kanvas/concepts/images/kanvas-icon-color.svg" /> Kanvas Snapshot is a screenshot service provided via Kanvas for your designs. Visualize changes to your code-base with each pull request made. The SnapShot GitHub Action is configurable from within your Cloud account.
+<img style="height: 32px; width: 32px;" src="images/kanvas-icon-color.svg" /> Kanvas Snapshot is a screenshot service provided via Kanvas for your designs. Visualize changes to your code-base with each pull request made. The SnapShot GitHub Action is configurable from within your Cloud account.
 
 <details>
 <summary>How the SnapShot service works</summary>
 
 <h3>Functional Sequence Diagram</h3>
 
-<img src="/kanvas/concepts/images/kanvas-snapshot.png" />
+<img src="images/kanvas-snapshot.png" />
 </details>
 
 <h3>Installing Kanvas Snapshot: Github Pull Request</h3>
diff --git a/content/en/kanvas/concepts/relationships/EdgeMountRelationship.svg b/content/en/kanvas/concepts/relationships/images/EdgeMountRelationship.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/EdgeMountRelationship.svg
rename to content/en/kanvas/concepts/relationships/images/EdgeMountRelationship.svg
diff --git a/content/en/kanvas/concepts/relationships/EdgeNetworkRelationship.svg b/content/en/kanvas/concepts/relationships/images/EdgeNetworkRelationship.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/EdgeNetworkRelationship.svg
rename to content/en/kanvas/concepts/relationships/images/EdgeNetworkRelationship.svg
diff --git a/content/en/kanvas/concepts/relationships/Hierachical_Inventory_Relationships.svg b/content/en/kanvas/concepts/relationships/images/Hierachical_Inventory_Relationships.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/Hierachical_Inventory_Relationships.svg
rename to content/en/kanvas/concepts/relationships/images/Hierachical_Inventory_Relationships.svg
diff --git a/content/en/kanvas/concepts/relationships/Hierarchical_Parent_Relationship.svg b/content/en/kanvas/concepts/relationships/images/Hierarchical_Parent_Relationship.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/Hierarchical_Parent_Relationship.svg
rename to content/en/kanvas/concepts/relationships/images/Hierarchical_Parent_Relationship.svg
diff --git a/content/en/kanvas/concepts/relationships/edge_firewall_relationship_pod_to_pod.svg b/content/en/kanvas/concepts/relationships/images/edge_firewall_relationship_pod_to_pod.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/edge_firewall_relationship_pod_to_pod.svg
rename to content/en/kanvas/concepts/relationships/images/edge_firewall_relationship_pod_to_pod.svg
diff --git a/content/en/kanvas/concepts/relationships/edge_permission_relationship_cluster_role_service_account.svg b/content/en/kanvas/concepts/relationships/images/edge_permission_relationship_cluster_role_service_account.svg
similarity index 100%
rename from content/en/kanvas/concepts/relationships/edge_permission_relationship_cluster_role_service_account.svg
rename to content/en/kanvas/concepts/relationships/images/edge_permission_relationship_cluster_role_service_account.svg
diff --git a/content/en/kanvas/concepts/relationships/reference-deployment-configmap.png b/content/en/kanvas/concepts/relationships/images/reference-deployment-configmap.png
similarity index 100%
rename from content/en/kanvas/concepts/relationships/reference-deployment-configmap.png
rename to content/en/kanvas/concepts/relationships/images/reference-deployment-configmap.png
diff --git a/content/en/kanvas/concepts/relationships/tags.png b/content/en/kanvas/concepts/relationships/images/tags.png
similarity index 100%
rename from content/en/kanvas/concepts/relationships/tags.png
rename to content/en/kanvas/concepts/relationships/images/tags.png
diff --git a/content/en/kanvas/concepts/relationships/index.md b/content/en/kanvas/concepts/relationships/index.md
index 3540fd0a5e0..bd0d2dd9db9 100644
--- a/content/en/kanvas/concepts/relationships/index.md
+++ b/content/en/kanvas/concepts/relationships/index.md
@@ -28,25 +28,25 @@ Edge relationships indicate the possibility of traffic flow between two componen
 
 The Edge-Network relationship type configures the networking between one or more components. This deals with IP addresses and DNS names and provides stable endpoints for communication. For instance, a “Service” provides a stable endpoint for accessing multiple replicas of a “Deployment”. Here's a visual representation of this kind of relationship.
 
-  ![example of edge-network relationship](./EdgeNetworkRelationship.svg)
+  ![example of edge-network relationship](images/EdgeNetworkRelationship.svg)
 
 **ii. Edge-Firewall**
 
 This acts as intermediary for communications which include standard networking protocols like TCP and UDP. It can enforce network policies to control traffic between components, for example between two Pods.
 
-   ![example of edge-firewall relationship](./edge_firewall_relationship_pod_to_pod.svg)
+   ![example of edge-firewall relationship](images/edge_firewall_relationship_pod_to_pod.svg)
 
 **iii. Edge-Mount**
 
    This subtype addresses the storage and access possibility between involved components. For example, a “PersistentVolume” can be mounted to a “Pod” to provide persistent storage for the pod’s data.
 
-   ![example of edge-mount relationship](./EdgeMountRelationship.svg)
+   ![example of edge-mount relationship](images/EdgeMountRelationship.svg)
 
 **iv. Edge-Permission**
 
    This defines the permissions for components if they can have a possible relationship with other components. It ensures that only authorized components can interact with each other. For example, a “Role” can define permissions for Components to access specific resources.
 
-   ![example of edge-permission relationship](./edge_permission_relationship_cluster_role_service_account.svg)
+   ![example of edge-permission relationship](images/edge_permission_relationship_cluster_role_service_account.svg)
 
 
 
@@ -86,7 +86,7 @@ spec:
 
 
 
-   ![example of edge-reference relationship](./reference-deployment-configmap.png)
+   ![example of edge-reference relationship](images/reference-deployment-configmap.png)
 
 ### 2. Hierarchical Relationships
 
@@ -96,16 +96,16 @@ Hierarchical relationships involve either an ancestral connection of the compone
 
   This is a relationship between components where the configuration settings of one component, known as the parent, are combined or integrated with the configuration settings of another component, known as the child. This implies that changes or updates made to the parent component can affect or influence the configuration of the child component. Here's an example of a Hierarchical-Inventory relationship
 
-   ![example of edge-permission relationship](./Hierachical_Inventory_Relationships.svg)
+   ![example of edge-permission relationship](images/Hierachical_Inventory_Relationships.svg)
 
 **ii. Hierarchical-Parent**
 
 A parent-child relationship implies that the parent component must be present or established before the child component can be created. For instance, in Kubernetes, a 'Namespace' can serve as a parent to 'Pods' within that namespace. Therefore, the namespace must be created beforehand for pods to be deployed within it. Here's an example of a Hierarchical-Parent relationship
 
-   ![example of edge-permission relationship](./Hierarchical_Parent_Relationship.svg)
+   ![example of edge-permission relationship](images/Hierarchical_Parent_Relationship.svg)
 
 ### 3. TagSets Relationships
 
 These represent relationships between components of same Labels or Annotations key/value pairs. Labels and Annotations are two different types of Tags. Labels are often used to identify components and are visible on the design canvas. Annotations are often used to provide additional information about components.
 
-![example of Tag sets](./tags.png)
+![example of Tag sets](images/tags.png)
diff --git a/content/en/kanvas/designer/_index.md b/content/en/kanvas/designer/_index.md
index 54ee85c51d9..c813ae99caf 100644
--- a/content/en/kanvas/designer/_index.md
+++ b/content/en/kanvas/designer/_index.md
@@ -28,5 +28,5 @@ Rex opens `api-platform-aws` in Kanvas Designer and traces the connection paths
 Jordan sees the notification and comes back to the canvas. They hash it out in the comment thread, land on the ALB approach, and Jordan draws a new connection representing the internal Application Load Balancer sitting between Lambda and the cluster's service mesh entry point. The design updates in place — no version-named duplicates, no stale exported images — and Rex can reload and see the revised architecture immediately.
 
 {{< alert type="info" title="Meet the team" >}}
-Meet Jordan, Rex, and the rest of the Orbital Labs team in [Meet Five and the Cast](/cloud/getting-started/meet-five).
+Meet Jordan, Rex, and the rest of the Orbital Labs team in [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/kanvas/designer/comments/Right-click.png b/content/en/kanvas/designer/comments/images/Right-click.png
similarity index 100%
rename from content/en/kanvas/designer/comments/Right-click.png
rename to content/en/kanvas/designer/comments/images/Right-click.png
diff --git a/content/en/kanvas/designer/comments/Toolbar1.png b/content/en/kanvas/designer/comments/images/Toolbar1.png
similarity index 100%
rename from content/en/kanvas/designer/comments/Toolbar1.png
rename to content/en/kanvas/designer/comments/images/Toolbar1.png
diff --git a/content/en/kanvas/designer/comments/Toolbar2.png b/content/en/kanvas/designer/comments/images/Toolbar2.png
similarity index 100%
rename from content/en/kanvas/designer/comments/Toolbar2.png
rename to content/en/kanvas/designer/comments/images/Toolbar2.png
diff --git a/content/en/kanvas/designer/comments/comment-canvas.png b/content/en/kanvas/designer/comments/images/comment-canvas.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comment-canvas.png
rename to content/en/kanvas/designer/comments/images/comment-canvas.png
diff --git a/content/en/kanvas/designer/comments/comment-cloud-manage.png b/content/en/kanvas/designer/comments/images/comment-cloud-manage.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comment-cloud-manage.png
rename to content/en/kanvas/designer/comments/images/comment-cloud-manage.png
diff --git a/content/en/kanvas/designer/comments/comment-copy.gif b/content/en/kanvas/designer/comments/images/comment-copy.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/comment-copy.gif
rename to content/en/kanvas/designer/comments/images/comment-copy.gif
diff --git a/content/en/kanvas/designer/comments/comment-dock.png b/content/en/kanvas/designer/comments/images/comment-dock.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comment-dock.png
rename to content/en/kanvas/designer/comments/images/comment-dock.png
diff --git a/content/en/kanvas/designer/comments/comment-notificationBell.png b/content/en/kanvas/designer/comments/images/comment-notificationBell.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comment-notificationBell.png
rename to content/en/kanvas/designer/comments/images/comment-notificationBell.png
diff --git a/content/en/kanvas/designer/comments/comments-color.png b/content/en/kanvas/designer/comments/images/comments-color.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comments-color.png
rename to content/en/kanvas/designer/comments/images/comments-color.png
diff --git a/content/en/kanvas/designer/comments/comments-conversation.gif b/content/en/kanvas/designer/comments/images/comments-conversation.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/comments-conversation.gif
rename to content/en/kanvas/designer/comments/images/comments-conversation.gif
diff --git a/content/en/kanvas/designer/comments/comments-grouped.png b/content/en/kanvas/designer/comments/images/comments-grouped.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comments-grouped.png
rename to content/en/kanvas/designer/comments/images/comments-grouped.png
diff --git a/content/en/kanvas/designer/comments/comments-hide.png b/content/en/kanvas/designer/comments/images/comments-hide.png
similarity index 100%
rename from content/en/kanvas/designer/comments/comments-hide.png
rename to content/en/kanvas/designer/comments/images/comments-hide.png
diff --git a/content/en/kanvas/designer/comments/comments-unresolved.gif b/content/en/kanvas/designer/comments/images/comments-unresolved.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/comments-unresolved.gif
rename to content/en/kanvas/designer/comments/images/comments-unresolved.gif
diff --git a/content/en/kanvas/designer/comments/conversation-screenshot.png b/content/en/kanvas/designer/comments/images/conversation-screenshot.png
similarity index 100%
rename from content/en/kanvas/designer/comments/conversation-screenshot.png
rename to content/en/kanvas/designer/comments/images/conversation-screenshot.png
diff --git a/content/en/kanvas/designer/comments/example-notification-email.png b/content/en/kanvas/designer/comments/images/example-notification-email.png
similarity index 100%
rename from content/en/kanvas/designer/comments/example-notification-email.png
rename to content/en/kanvas/designer/comments/images/example-notification-email.png
diff --git a/content/en/kanvas/designer/comments/grouping -comments.gif b/content/en/kanvas/designer/comments/images/grouping -comments.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/grouping -comments.gif
rename to content/en/kanvas/designer/comments/images/grouping -comments.gif
diff --git a/content/en/kanvas/designer/comments/kanvas-annotations.gif b/content/en/kanvas/designer/comments/images/kanvas-annotations.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/kanvas-annotations.gif
rename to content/en/kanvas/designer/comments/images/kanvas-annotations.gif
diff --git a/content/en/kanvas/designer/comments/kanvas-comment.png b/content/en/kanvas/designer/comments/images/kanvas-comment.png
similarity index 100%
rename from content/en/kanvas/designer/comments/kanvas-comment.png
rename to content/en/kanvas/designer/comments/images/kanvas-comment.png
diff --git a/content/en/kanvas/designer/comments/locking-comment.gif b/content/en/kanvas/designer/comments/images/locking-comment.gif
similarity index 100%
rename from content/en/kanvas/designer/comments/locking-comment.gif
rename to content/en/kanvas/designer/comments/images/locking-comment.gif
diff --git a/content/en/kanvas/designer/comments/naming-comments.png b/content/en/kanvas/designer/comments/images/naming-comments.png
similarity index 100%
rename from content/en/kanvas/designer/comments/naming-comments.png
rename to content/en/kanvas/designer/comments/images/naming-comments.png
diff --git a/content/en/kanvas/designer/comments/index.md b/content/en/kanvas/designer/comments/index.md
index b47f956b05f..aaa8474be61 100644
--- a/content/en/kanvas/designer/comments/index.md
+++ b/content/en/kanvas/designer/comments/index.md
@@ -13,7 +13,7 @@ aliases:
 Kanvas's Designer enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.
 
 <figure>
-  <img src="./kanvas-comment.png" alt="Comments in Designer" />
+  <img src="images/kanvas-comment.png" alt="Comments in Designer" />
   <figcaption>Example of comments in Designer</figcaption>
 </figure>
 
@@ -29,7 +29,7 @@ You can add comments in a number of convenient ways. Since designs are public by
 2. You can also create a comment by dragging and dropping the comment icon from the Dock to your design. This method allows you to place comments directly on specific elements or areas of your design.
 
 <figure>
-<img src="./comment-dock.png" alt="Create a comment from the Dock" />
+<img src="images/comment-dock.png" alt="Create a comment from the Dock" />
   <figcaption>Create a comment from the Dock</figcaption>
 </figure>
 
@@ -38,7 +38,7 @@ You can add comments in a number of convenient ways. Since designs are public by
 Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - _in context_.
 
 <figure>
-<img src="./comment-canvas.png" alt="Comment by context-clicking on your design" />
+<img src="images/comment-canvas.png" alt="Comment by context-clicking on your design" />
   <figcaption>Comment by context-clicking on your design</figcaption>
 </figure>
 
@@ -49,7 +49,7 @@ Context-click on any area of your design, and from the contextual menu, select "
 ## Design review using comments
 
 <figure>
-  <img src="./conversation-screenshot.png" alt="Peer review using comments in Designer" />
+  <img src="images/conversation-screenshot.png" alt="Peer review using comments in Designer" />
   <figcaption>Peer review using comments in Designer</figcaption>
 </figure>
 
@@ -80,7 +80,7 @@ You can also reopen comments.
 ### View Comment History
 
 <figure>
-  <img src="./comments-conversation.gif" alt="View comment history" />
+  <img src="images/comments-conversation.gif" alt="View comment history" />
   <figcaption>View comment history</figcaption>
 </figure>
 
@@ -115,7 +115,7 @@ Copying a comment into another design does **not** change the target design’s
 - Participants from the original thread may not have access
 - Notifications may still be sent, but users might not be able to view or respond
 
-Learn more about [sharing settings](/kanvas/designer/sharing).
+Learn more about [sharing settings]({{< ref "kanvas/designer/sharing/index.md" >}}).
 
 {{< /alert >}}
 
@@ -124,7 +124,7 @@ Learn more about [sharing settings](/kanvas/designer/sharing).
 - **Right-click and Copy**: Choose **Copy** to manually paste it later.
 
   <figure>
-    <img src="./comment-copy.gif" alt="Copy a comment" />
+    <img src="images/comment-copy.gif" alt="Copy a comment" />
     <figcaption>Copy a comment</figcaption>
   </figure>
 
@@ -159,7 +159,7 @@ You can temporarily hide or reveal open comments using the Layers panel—just l
 This helps you focus on the most important parts of your design and improves clarity during reviews.
 
 <figure>
-  <img src="./comments-hide.png" alt="Hide comments using Layers" />
+  <img src="images/comments-hide.png" alt="Hide comments using Layers" />
   <figcaption>Hide comments using the Layers panel</figcaption>
 </figure>
 
@@ -172,7 +172,7 @@ Want to improve the performance of your workspace? [Learn more about using the L
 If you plan to keep certain comments in your design for documentation, team reference, or historical context, it's a good idea to give them meaningful names. This simple habit improves clarity for both you and your team—especially when reviewing or revisiting designs later.
 
 <figure>
-  <img src="./naming-comments.png" alt="Naming a comment in Designer" />
+  <img src="images/naming-comments.png" alt="Naming a comment in Designer" />
     <figcaption>Naming a comment in Designer</figcaption>
 </figure>
 
@@ -188,7 +188,7 @@ If a comment is resolved by mistake, it can be reopened. Adding a new comment to
 Follow the steps below to reopen a comment:
 
 <figure>
-<img src="./comments-unresolved.gif" alt="Unresolving comments in designer" />
+<img src="images/comments-unresolved.gif" alt="Unresolving comments in designer" />
   <figcaption>Unresolving comments in designer</figcaption>
 </figure>
 
@@ -197,7 +197,7 @@ Follow the steps below to reopen a comment:
 Each time that a new comment is made in a design, remark placed into existing comment, a comment is resolved or reopened, you and your collaborators might receive notification via email.
 
 <figure>
-<img src="./example-notification-email.png" alt="Example email notification received when design comment is made" />
+<img src="images/example-notification-email.png" alt="Example email notification received when design comment is made" />
   <figcaption>Example email notification received when design comment is made.</figcaption>
 </figure>
 
@@ -209,14 +209,14 @@ Collaborators (users you have shared the design with) do not receive notificatio
 
 ### Enable Email Notifications
 
-Customize your [notification preferences](/cloud/concepts/identity-and-security/users/notification-preferences) to receive emails for comments on your design. When this is enabled, you'll be notified when comments are made on your design, you're mentioned in a comment, or someone adds a comment to a thread you've previously engaged with.
+Customize your [notification preferences]({{< ref "cloud/concepts/identity-and-security/users/notification-preferences/index.md" >}}) to receive emails for comments on your design. When this is enabled, you'll be notified when comments are made on your design, you're mentioned in a comment, or someone adds a comment to a thread you've previously engaged with.
 
 ### Muting Comment Notifications
 
 Customize your notification preferences to mute email notifications for comments on your design. With notifications for new comments silenced, you won't receive email notifications for new comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter.
 
 <figure>
-  <img src="./comment-notificationBell.png" alt="Turn Off notification from comments in designer" style="width:auto">
+  <img src="images/comment-notificationBell.png" alt="Turn Off notification from comments in designer" style="width:auto">
   <figcaption>Example of comments in Designer</figcaption>
 </figure>
 
@@ -227,7 +227,7 @@ Muting a comment thread applies only to participants in that thread. Design owne
 You can also manage all your comment notification settings centrally through the **Cloud -> Account -> [Preference](https://docs.layer5.io/cloud/concepts/identity-and-security/users/notification-preferences/)**.
 
 <figure>
-  <img src="./comment-cloud-manage.png" alt="Manage comment notifications in the Cloud Portal" style="width:auto">
+  <img src="images/comment-cloud-manage.png" alt="Manage comment notifications in the Cloud Portal" style="width:auto">
   <figcaption>Manage all comment notifications centrally in the Cloud</figcaption>
 </figure>
 
@@ -264,7 +264,7 @@ You can use color to visually categorize your comments. Here is one common examp
 
 
 <figure>
-  <img src="./comments-color.png" alt="Categorize Comments" />
+  <img src="images/comments-color.png" alt="Categorize Comments" />
   <figcaption>Use color to visually categorize your comments</figcaption>
 </figure>
 
@@ -282,7 +282,7 @@ Link your comment to a specific part of the design using **annotation arrows**.
 Follow the steps about how to annotate the comment:
 
 <figure>
-<img src="./kanvas-annotations.gif" alt="use of annotation arrows" />
+<img src="images/kanvas-annotations.gif" alt="use of annotation arrows" />
   <figcaption>Annotating a comment</figcaption>
 </figure>
 
@@ -293,7 +293,7 @@ Lock comments in place to keep them visible even as you continue working. This i
 
 Example on how to lock your comment:
 <figure>
-<img src="./locking-comment.gif" alt="Lock the comment" />
+<img src="images/locking-comment.gif" alt="Lock the comment" />
   <figcaption>Locking comments </figcaption>
 </figure>
 
@@ -302,7 +302,7 @@ Example on how to lock your comment:
 Bundle multiple related comments using the **Group** feature. This keeps threads organized and easier to track, especially for complex designs with many parts.
 
 <figure>
-<img src="./grouping -comments.gif" alt="Grouping of Comments" />
+<img src="images/grouping -comments.gif" alt="Grouping of Comments" />
   <figcaption>Two related comments Grouped</figcaption>
 </figure>
 
diff --git a/content/en/kanvas/designer/embedding-designs/embed-designs.gif b/content/en/kanvas/designer/embedding-designs/images/embed-designs.gif
similarity index 100%
rename from content/en/kanvas/designer/embedding-designs/embed-designs.gif
rename to content/en/kanvas/designer/embedding-designs/images/embed-designs.gif
diff --git a/content/en/kanvas/designer/embedding-designs/index.md b/content/en/kanvas/designer/embedding-designs/index.md
index 5f2cb937dce..89ad4922528 100644
--- a/content/en/kanvas/designer/embedding-designs/index.md
+++ b/content/en/kanvas/designer/embedding-designs/index.md
@@ -17,7 +17,7 @@ To embed your Kanvas design, follow these steps:
 
 1. **Access Embed Option**: Within the [Kanvas Designer](https://kanvas.new/), select the design you wish to embed. Click on the export icon in the menu for the selected design. The export modal will appear, click on the "Embed" option.
 
-   ![Embed Designs from Kanvas](./embed-designs.gif)
+   ![Embed Designs from Kanvas](images/embed-designs.gif)
 
 2. **Download the Embedding Script**: Click on the download icon presented in the same modal to download the embedding script.
 
diff --git a/content/en/kanvas/designer/export-designs/embed-code.png b/content/en/kanvas/designer/export-designs/images/embed-code.png
similarity index 100%
rename from content/en/kanvas/designer/export-designs/embed-code.png
rename to content/en/kanvas/designer/export-designs/images/embed-code.png
diff --git a/content/en/kanvas/designer/export-designs/export-modal.gif b/content/en/kanvas/designer/export-designs/images/export-modal.gif
similarity index 100%
rename from content/en/kanvas/designer/export-designs/export-modal.gif
rename to content/en/kanvas/designer/export-designs/images/export-modal.gif
diff --git a/content/en/kanvas/designer/export-designs/index.md b/content/en/kanvas/designer/export-designs/index.md
index 128a82402e8..8e9086a739e 100644
--- a/content/en/kanvas/designer/export-designs/index.md
+++ b/content/en/kanvas/designer/export-designs/index.md
@@ -26,7 +26,7 @@ Kanvas let's you export a design in several formats, so you can:
 2. Pick an export format 
    Choose the option that matches your workflow (see table below).
 
-![Export Icon](./export-modal.gif)
+![Export Icon](images/export-modal.gif)
 
 ## Quick Reference: Export Formats
 
@@ -95,7 +95,7 @@ This format includes only Kubernetes resource definitions.  Design layout, annot
 Exporting your design as an embedding allows you to integrate it into websites, blogs, or other platforms that support HTML, CSS, and JavaScript. 
 
 The embedded design version offers a visually interactive representation of your design, making it easy to share with infrastructure stakeholders.
-> [Learn more](../embedding-designs) about Embedding Designs.
+> [Learn more]({{< ref "kanvas/designer/embedding-designs/index.md" >}}) about Embedding Designs.
 
 ## Best Practices and Tips
 
diff --git a/content/en/kanvas/designer/pin-model-to-dock/pin-to-dock.png b/content/en/kanvas/designer/pin-model-to-dock/images/pin-to-dock.png
similarity index 100%
rename from content/en/kanvas/designer/pin-model-to-dock/pin-to-dock.png
rename to content/en/kanvas/designer/pin-model-to-dock/images/pin-to-dock.png
diff --git a/content/en/kanvas/designer/pin-model-to-dock/pinned-model-location.png b/content/en/kanvas/designer/pin-model-to-dock/images/pinned-model-location.png
similarity index 100%
rename from content/en/kanvas/designer/pin-model-to-dock/pinned-model-location.png
rename to content/en/kanvas/designer/pin-model-to-dock/images/pinned-model-location.png
diff --git a/content/en/kanvas/designer/pin-model-to-dock/unpin-model-1.png b/content/en/kanvas/designer/pin-model-to-dock/images/unpin-model-1.png
similarity index 100%
rename from content/en/kanvas/designer/pin-model-to-dock/unpin-model-1.png
rename to content/en/kanvas/designer/pin-model-to-dock/images/unpin-model-1.png
diff --git a/content/en/kanvas/designer/pin-model-to-dock/unpin-model-2.png b/content/en/kanvas/designer/pin-model-to-dock/images/unpin-model-2.png
similarity index 100%
rename from content/en/kanvas/designer/pin-model-to-dock/unpin-model-2.png
rename to content/en/kanvas/designer/pin-model-to-dock/images/unpin-model-2.png
diff --git a/content/en/kanvas/designer/pin-model-to-dock/use-pinned-models-components.png b/content/en/kanvas/designer/pin-model-to-dock/images/use-pinned-models-components.png
similarity index 100%
rename from content/en/kanvas/designer/pin-model-to-dock/use-pinned-models-components.png
rename to content/en/kanvas/designer/pin-model-to-dock/images/use-pinned-models-components.png
diff --git a/content/en/kanvas/designer/pin-model-to-dock/index.md b/content/en/kanvas/designer/pin-model-to-dock/index.md
index f885932836a..5863af8f84d 100644
--- a/content/en/kanvas/designer/pin-model-to-dock/index.md
+++ b/content/en/kanvas/designer/pin-model-to-dock/index.md
@@ -23,13 +23,13 @@ Pinning a model adds it to the dock at the bottom of the Designer interface. Thi
 3. The model will now appear in the dock at the bottom of the Designer.
 
 
-![Pin To Dock action](pin-to-dock.png)
+![Pin To Dock action](images/pin-to-dock.png)
 
 ## Pinned Model in the Dock
 
 After you pin a model, it appears as an icon in the dock at the bottom of the Designer and remains there for quick access throughout your workflow. This makes it easy to find and reuse your favorite models at any time.
 
-![Pinned model displayed in the dock](pinned-model-location.png)
+![Pinned model displayed in the dock](images/pinned-model-location.png)
 
 ## How to Use a Pinned Model
 
@@ -39,7 +39,7 @@ Clicking a pinned model in the dock gives you quick access to all its components
 Only models can be pinned to the dock. Individual components within a model cannot be pinned directly.
 {{< /alert >}}
 
-![How to use pinned model's components](use-pinned-models-components.png)
+![How to use pinned model's components](images/use-pinned-models-components.png)
 
 ## How to Remove a Model from the Dock
 
@@ -51,14 +51,14 @@ You can remove a model from the dock in two ways:
 2. Click the pin icon again (the tooltip will show "Remove From Dock").
 
 
-![Remove From Dock action](unpin-model-1.png)
+![Remove From Dock action](images/unpin-model-1.png)
 
 ### Method 2: Using the Close Button
 
 1. Click the X (close) button on the pinned model icon in the dock to remove it instantly.
 
 
-![Unpin using close button](unpin-model-2.png)
+![Unpin using close button](images/unpin-model-2.png)
 
 
 {{< alert type="info" title="Good to Know" >}}
diff --git a/content/en/kanvas/designer/publishing-designs/index.md b/content/en/kanvas/designer/publishing-designs/index.md
index eec5f13597d..6d6c22a329e 100644
--- a/content/en/kanvas/designer/publishing-designs/index.md
+++ b/content/en/kanvas/designer/publishing-designs/index.md
@@ -19,10 +19,10 @@ Navigate to Meshery [Kanvas Designer](https://playground.meshery.io/extension/me
 Publish designs through two methods. Click the **info ("i")** button for details.
 
 - **Option 1:** View designs in the sidebar
-  ![Sidebar Design List](/kanvas/designer/publishing-designs/images/designs-select-sidebar.png)
+  ![Sidebar Design List](images/designs-select-sidebar.png)
 
 - **Option 2:** Go to Configuration → Designs
-  ![Design Details](/kanvas/designer/publishing-designs/images/designs-select-design.png)
+  ![Design Details](images/designs-select-design.png)
 
 ### Step 3: Submit Design Metadata
 Fill out the publication form:
@@ -32,7 +32,7 @@ Fill out the publication form:
 - **Description:** Explain purpose and usage
 - **Caveats:** Add important considerations
 
-![Publish Modal](/kanvas/designer/publishing-designs/images/publish-form.png)
+![Publish Modal](images/publish-form.png)
 
 ### Step 4: Review Process
 Approval workflow based on user role:
@@ -41,7 +41,7 @@ Approval workflow based on user role:
 
 Submissions in the “Pending Review” state will remain unpublished until they are manually reviewed and either approved or rejected by an Organization Admin or Provider Admin. This review process may take some time depending on the availability of reviewers. Regardless of approval or rejection, submitters will receive an email notification with the decision.
 
-![Approval Queue](/kanvas/designer/publishing-designs/images/approval-queue.png)
+![Approval Queue](images/approval-queue.png)
 
 ### Step 5: Post-Approval Status
 Once the review process is complete, you will receive an email notification informing you of the decision.  
@@ -68,7 +68,7 @@ To modify published designs:
 ### 1. Design State Lifecycle
 A design transitions through multiple states from creation to publication. The diagram below visually represents this process.
 
-![Publishing Flow](/kanvas/designer/publishing-designs/images/Publishing-flow.svg)
+![Publishing Flow](images/Publishing-flow.svg)
 
 #### Phases of Publishing Process
 - **Pre-Publish:** Users freely create and edit designs.  
diff --git a/content/en/kanvas/designer/relationship-evaluation/index.md b/content/en/kanvas/designer/relationship-evaluation.md
similarity index 96%
rename from content/en/kanvas/designer/relationship-evaluation/index.md
rename to content/en/kanvas/designer/relationship-evaluation.md
index 5bd7490e283..2a349257ec9 100644
--- a/content/en/kanvas/designer/relationship-evaluation/index.md
+++ b/content/en/kanvas/designer/relationship-evaluation.md
@@ -10,7 +10,7 @@ tags: [designs, relationships, components, troubleshooting]
 ---
 
 As you build a design, Kanvas continuously evaluates the
-[relationships](/kanvas/concepts/relationships/) between your components — to
+[relationships]({{< ref "kanvas/concepts/relationships/index.md" >}}) between your components — to
 identify connections, validate them, and keep related configuration in sync.
 This page explains how you can choose which engine performs that evaluation, how
 to read the relationship indicator, and how to diagnose results that look wrong.
@@ -149,7 +149,7 @@ Relationship Evaluation Diagnostics view so the issue can be reproduced:
 
 {{< alert type="info" title="Related reading" >}} For an overview of what
 relationships are and the kinds Kanvas supports, see
-[Understanding Relationships](/kanvas/concepts/relationships/). For creating and
+[Understanding Relationships]({{< ref "kanvas/concepts/relationships/index.md" >}}). For creating and
 managing relationships in a design, see
-[Creating Relationships](/kanvas/getting-started/creating-relationships/).
+[Creating Relationships]({{< ref "kanvas/getting-started/creating-relationships/index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/kanvas/designer/sharing/model-where.gif b/content/en/kanvas/designer/sharing/images/model-where.gif
similarity index 100%
rename from content/en/kanvas/designer/sharing/model-where.gif
rename to content/en/kanvas/designer/sharing/images/model-where.gif
diff --git a/content/en/kanvas/designer/sharing/share-model.png b/content/en/kanvas/designer/sharing/images/share-model.png
similarity index 100%
rename from content/en/kanvas/designer/sharing/share-model.png
rename to content/en/kanvas/designer/sharing/images/share-model.png
diff --git a/content/en/kanvas/designer/sharing/index.md b/content/en/kanvas/designer/sharing/index.md
index 5d3d29d0360..ddbebe9da55 100644
--- a/content/en/kanvas/designer/sharing/index.md
+++ b/content/en/kanvas/designer/sharing/index.md
@@ -12,7 +12,7 @@ aliases:
 In Kanvas, you can share your designs with other members of your organization and teams, and you can control access permissions. This page describes the different access types for designs and how to effectively use them.
 
 {{< alert title="Sharing Views" type="info">}}
-You can share and control access to [Views](/kanvas/operator/views) in the same fashion as you do for Designs.
+You can share and control access to [Views]({{< ref "kanvas/operator/views/index.md" >}}) in the same fashion as you do for Designs.
 {{< /alert >}}
 
 ## Understanding visibility levels
@@ -27,7 +27,7 @@ Designs have visibility statuses that defines who can access your designs. These
 Public status is useful for sharing designs broadly, for example, as open-source templates, public demonstrations, or for soliciting feedback from a wider community. If your goal is to share broadly only within your organization, consider using a combination of private designs shared with specific organization-wide teams or workspaces.
 {{< /alert >}}
 
-- **Published:**  The published visibility setting is designed for sharing designs with a wider audience. Published designs become discoverable to other users and allow them to view, download, and clone the design. Users can find published designs through [Cloud Catalog](/cloud/concepts/catalog) ([open catalog](https://cloud.layer5.io/catalog)).
+- **Published:**  The published visibility setting is designed for sharing designs with a wider audience. Published designs become discoverable to other users and allow them to view, download, and clone the design. Users can find published designs through [Cloud Catalog]({{< ref "cloud/concepts/catalog/_index.md" >}}) ([open catalog](https://cloud.layer5.io/catalog)).
 
 ## Granting access to individual users
 
@@ -45,11 +45,11 @@ There are two primary ways to open the "Share" modal for a design:
     * Click the **more options icon** (often represented by three vertical dots ⋮) associated with that design.
     * Select **"Share"** from the context menu that appears.
 
-![Ways to open Share modal](/kanvas/designer/sharing/model-where.gif)
+![Ways to open Share modal](images/model-where.gif)
 
 Once the "Share" modal is open, type the names or email addresses of the users or teams you want to invite as Collaborators. From the "Share" modal, you can also typically change the overall visibility status of the design (e.g., switching between Private and Public).
 
-![Share Modal](/kanvas/designer/sharing/share-model.png)
+![Share Modal](images/share-model.png)
 
 ## Owner vs. Collaborator
 
@@ -94,7 +94,7 @@ As the Owner of a design, you can manage who has access to it at any time using
 
 {{< alert title="Implications of adding a Design to a Workspace">}}
 When you add design to a workspace, it signifies that all teams associated with that workspace will be allowed to access your designs even if it is private. Review your workspace's team assignments in order to verify which users will be granted access.
-Learn more about [auditing and assigning Workspace access](/cloud/concepts/spaces/workspaces/).
+Learn more about [auditing and assigning Workspace access]({{< ref "cloud/concepts/spaces/workspaces.md" >}}).
 {{< /alert >}}
 
 ## Sharing Your Design with a Link
@@ -128,7 +128,7 @@ There are two primary ways to share designs with teams:
         2.  Assign one or more Teams to that same Workspace.
         3.  By this association, members of the assigned Team(s) should then inherit access to the **designs** within that Workspace, including Private designs.
 
-> Learn more about auditing the access permission within [workspace](/cloud/concepts/spaces/workspaces/)
+> Learn more about auditing the access permission within [workspace]({{< ref "cloud/concepts/spaces/workspaces.md" >}})
 
 [^1]: This functionality is not fully implemented yet. Users might occasionally observe that even when a team is assigned to a workspace, members of that team may not be able to access private designs within that workspace without explicit individual or team-level sharing for the design itself.
 [^2]: This feature (direct sharing with teams via the "Share" modal) is not yet fully implemented and is planned for a future update.
\ No newline at end of file
diff --git a/content/en/kanvas/designer/tagsets/tagsets.gif b/content/en/kanvas/designer/tagsets/images/tagsets.gif
similarity index 100%
rename from content/en/kanvas/designer/tagsets/tagsets.gif
rename to content/en/kanvas/designer/tagsets/images/tagsets.gif
diff --git a/content/en/kanvas/designer/tagsets/index.md b/content/en/kanvas/designer/tagsets/index.md
index fc05520d76d..a1a9a8c236f 100644
--- a/content/en/kanvas/designer/tagsets/index.md
+++ b/content/en/kanvas/designer/tagsets/index.md
@@ -19,13 +19,13 @@ Kubernetes resources are capable of being assigned Label and Annotation key/valu
 
 To group components using tags, follow these steps.
 
-![Tags](./tagsets.gif)
+![Tags](images/tagsets.gif)
 
 ## Labels and Annotations
 
 Designs support two different types of tags: Labels and Annotations. Labels are often used to identify components and are visible on the design canvas. Annotations are often used to provide additional information about components.
 
-<img alt="Labels and Annotations" src="./group-components.png" width="50%" />
+<img alt="Labels and Annotations" src="../../images/group-components.png" width="50%" />
 
 {{< alert title="Performance Consideration" type="warning">}}
 Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design.
diff --git a/content/en/kanvas/designer/understanding-tool-modes/click.png b/content/en/kanvas/designer/understanding-tool-modes/images/click.png
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/click.png
rename to content/en/kanvas/designer/understanding-tool-modes/images/click.png
diff --git a/content/en/kanvas/designer/understanding-tool-modes/click_and_drag.gif b/content/en/kanvas/designer/understanding-tool-modes/images/click_and_drag.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/click_and_drag.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/click_and_drag.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/click_move_ptm.gif b/content/en/kanvas/designer/understanding-tool-modes/images/click_move_ptm.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/click_move_ptm.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/click_move_ptm.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/click_release_ptm.gif b/content/en/kanvas/designer/understanding-tool-modes/images/click_release_ptm.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/click_release_ptm.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/click_release_ptm.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/click_while_connecting_ptm.gif b/content/en/kanvas/designer/understanding-tool-modes/images/click_while_connecting_ptm.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/click_while_connecting_ptm.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/click_while_connecting_ptm.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/customize_end.gif b/content/en/kanvas/designer/understanding-tool-modes/images/customize_end.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/customize_end.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/customize_end.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/default.gif b/content/en/kanvas/designer/understanding-tool-modes/images/default.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/default.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/default.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/double_click.png b/content/en/kanvas/designer/understanding-tool-modes/images/double_click.png
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/double_click.png
rename to content/en/kanvas/designer/understanding-tool-modes/images/double_click.png
diff --git a/content/en/kanvas/designer/understanding-tool-modes/draw_line.gif b/content/en/kanvas/designer/understanding-tool-modes/images/draw_line.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/draw_line.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/draw_line.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/mouse_down.gif b/content/en/kanvas/designer/understanding-tool-modes/images/mouse_down.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/mouse_down.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/mouse_down.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/mouse_down_plus_cmd.gif b/content/en/kanvas/designer/understanding-tool-modes/images/mouse_down_plus_cmd.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/mouse_down_plus_cmd.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/mouse_down_plus_cmd.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/mouse_down_plus_shift.gif b/content/en/kanvas/designer/understanding-tool-modes/images/mouse_down_plus_shift.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/mouse_down_plus_shift.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/mouse_down_plus_shift.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/mouse_up.gif b/content/en/kanvas/designer/understanding-tool-modes/images/mouse_up.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/mouse_up.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/mouse_up.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/pen_hover.gif b/content/en/kanvas/designer/understanding-tool-modes/images/pen_hover.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/pen_hover.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/pen_hover.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/pencil.gif b/content/en/kanvas/designer/understanding-tool-modes/images/pencil.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/pencil.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/pencil.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/pencil_hover.gif b/content/en/kanvas/designer/understanding-tool-modes/images/pencil_hover.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/pencil_hover.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/pencil_hover.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/pencil_ink.gif b/content/en/kanvas/designer/understanding-tool-modes/images/pencil_ink.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/pencil_ink.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/pencil_ink.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/right_click.png b/content/en/kanvas/designer/understanding-tool-modes/images/right_click.png
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/right_click.png
rename to content/en/kanvas/designer/understanding-tool-modes/images/right_click.png
diff --git a/content/en/kanvas/designer/understanding-tool-modes/scroll_left_right.gif b/content/en/kanvas/designer/understanding-tool-modes/images/scroll_left_right.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/scroll_left_right.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/scroll_left_right.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/scroll_up_down.gif b/content/en/kanvas/designer/understanding-tool-modes/images/scroll_up_down.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/scroll_up_down.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/scroll_up_down.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/select.gif b/content/en/kanvas/designer/understanding-tool-modes/images/select.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/select.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/select.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/text-box-double-click.gif b/content/en/kanvas/designer/understanding-tool-modes/images/text-box-double-click.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/text-box-double-click.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/text-box-double-click.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/tool-mode-placeholder.svg b/content/en/kanvas/designer/understanding-tool-modes/images/tool-mode-placeholder.svg
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/tool-mode-placeholder.svg
rename to content/en/kanvas/designer/understanding-tool-modes/images/tool-mode-placeholder.svg
diff --git a/content/en/kanvas/designer/understanding-tool-modes/zoom_in_out.gif b/content/en/kanvas/designer/understanding-tool-modes/images/zoom_in_out.gif
similarity index 100%
rename from content/en/kanvas/designer/understanding-tool-modes/zoom_in_out.gif
rename to content/en/kanvas/designer/understanding-tool-modes/images/zoom_in_out.gif
diff --git a/content/en/kanvas/designer/understanding-tool-modes/index.md b/content/en/kanvas/designer/understanding-tool-modes/index.md
index 5c670880012..f1f868c218e 100644
--- a/content/en/kanvas/designer/understanding-tool-modes/index.md
+++ b/content/en/kanvas/designer/understanding-tool-modes/index.md
@@ -28,16 +28,16 @@ You can switch between mouse modes using hotkeys or tool selection. Here are hot
 
 | Action                         | Cursor Style        | Behavior                                                                     | Example                                                                 |
 |--------------------------------|---------------------|------------------------------------------------------------------------------|-------------------------------------------------------------------------|
-| **Hover**                      | `default (arrow)`   | Nothing                                                                      | ![Click](./default.gif)                                                |
-| **Click-and-drag**             | `move`              | Moves component in the direction of the mouse                                | ![Click and drag](./click_and_drag.gif)                                |
-| **Click**                      | `default (arrow)`   | Displays component toolbar, resize box, and connection handles               | ![Click](./click.png)                                                  |
-| **Double-click (component)**   | `pointer`           | Opens the component configurator                                             | ![Double-click component](./double_click.png)                          |
-| **Double-click (textbox)**     | `text`              | Enables text editing inside the component                                    | ![Double-click textbox](./text-box-double-click.gif)                   |
-| **Right-click**                | `default (arrow)`   | Opens the circular component context menu                                    | ![Right-click](./right_click.png)                                      |
-| **Click-and-hold**             | `crosshair`         | Initiates box selection for selecting multiple components                    | ![Box selection](./select.gif)                                         |
-| **Scroll wheel**               | `default (arrow)`   | Pan up or down                                                               | ![Scroll](./scroll_up_down.gif)                                        |
-| **Scroll wheel + CMD/CTRL**    | `default (arrow)`   | Zoom in/out                                                                  | ![Zoom](./zoom_in_out.gif)                                             |
-| **Horizontal scroll wheel**    | `default (arrow)`   | Pan left or right                                                            | ![Scroll left/right](./scroll_left_right.gif)                          |
+| **Hover**                      | `default (arrow)`   | Nothing                                                                      | ![Click](images/default.gif)                                                |
+| **Click-and-drag**             | `move`              | Moves component in the direction of the mouse                                | ![Click and drag](images/click_and_drag.gif)                                |
+| **Click**                      | `default (arrow)`   | Displays component toolbar, resize box, and connection handles               | ![Click](images/click.png)                                                  |
+| **Double-click (component)**   | `pointer`           | Opens the component configurator                                             | ![Double-click component](images/double_click.png)                          |
+| **Double-click (textbox)**     | `text`              | Enables text editing inside the component                                    | ![Double-click textbox](images/text-box-double-click.gif)                   |
+| **Right-click**                | `default (arrow)`   | Opens the circular component context menu                                    | ![Right-click](images/right_click.png)                                      |
+| **Click-and-hold**             | `crosshair`         | Initiates box selection for selecting multiple components                    | ![Box selection](images/select.gif)                                         |
+| **Scroll wheel**               | `default (arrow)`   | Pan up or down                                                               | ![Scroll](images/scroll_up_down.gif)                                        |
+| **Scroll wheel + CMD/CTRL**    | `default (arrow)`   | Zoom in/out                                                                  | ![Zoom](images/zoom_in_out.gif)                                             |
+| **Horizontal scroll wheel**    | `default (arrow)`   | Pan left or right                                                            | ![Scroll left/right](images/scroll_left_right.gif)                          |
 
 {{< /tab >}}
 
@@ -47,13 +47,13 @@ Pencil lines do not connect individual components, but offer annotating capabili
 
 | Action                      | Cursor Style        | Behavior                                              | Example                                                        |
 |-----------------------------|---------------------|--------------------------------------------------------|----------------------------------------------------------------|
-| **Hover**                   | `custom(pencil)`    | Nothing                                                | ![Pencil hover](./pencil_hover.gif)                            |
-| **Mouse down + drag**       | `custom(pencil)`    | Start drawing a freeform line                          | ![Freeform line](./pencil.gif)                                 |
-| **Mouse down + SHIFT**      | `custom(pencil)`    | Start drawing a straight vertical or horizontal line   | ![Straight line](./mouse_down_plus_shift.gif)                  |
-| **Mouse up**                | `custom(pencil)`    | Complete the line and render into a styled component   | ![Mouse up](./mouse_up.gif)                                    |
-| **Click**                   | `custom(pencil)`    | Draws ink from the pencil                              | ![Ink](./pencil_ink.gif)                                       |
-| **Scroll wheel**            | `custom(pencil)`    | Nothing                                                | ![Mouse down](./mouse_down.gif)                                |
-| **Scroll wheel + CMD/CTRL** | `custom(pencil)`    | Nothing                                                | ![Zoom](./zoom_in_out.gif)                                     |
+| **Hover**                   | `custom(pencil)`    | Nothing                                                | ![Pencil hover](images/pencil_hover.gif)                            |
+| **Mouse down + drag**       | `custom(pencil)`    | Start drawing a freeform line                          | ![Freeform line](images/pencil.gif)                                 |
+| **Mouse down + SHIFT**      | `custom(pencil)`    | Start drawing a straight vertical or horizontal line   | ![Straight line](images/mouse_down_plus_shift.gif)                  |
+| **Mouse up**                | `custom(pencil)`    | Complete the line and render into a styled component   | ![Mouse up](images/mouse_up.gif)                                    |
+| **Click**                   | `custom(pencil)`    | Draws ink from the pencil                              | ![Ink](images/pencil_ink.gif)                                       |
+| **Scroll wheel**            | `custom(pencil)`    | Nothing                                                | ![Mouse down](images/mouse_down.gif)                                |
+| **Scroll wheel + CMD/CTRL** | `custom(pencil)`    | Nothing                                                | ![Zoom](images/zoom_in_out.gif)                                     |
 
 <!-- *Developer notes:*
 1. *In the future, the canvas moves with the pen/pencil as they near the edge of the viewport.*
@@ -77,9 +77,9 @@ The Pen tool operates as a creator of annotation edges. Note that the pen tool h
 
 | Phase                         | Cursor Style | Behavior                                                     | Example                                                         |
 |------------------------------|--------------|--------------------------------------------------------------|-----------------------------------------------------------------|
-| **1. Click & release**       | `pen`        | Initiate connection                                           | ![Phase 1](./click_release_ptm.gif)                            |
-| **2. Click-and-move**        | `pen`        | Move the ghost edge around if a connection was initiated      | ![Phase 2](./click_move_ptm.gif)                               |
-| **3. Click while connecting**| `pen`        | Establish and render the connection                           | ![Phase 3](./click_while_connecting_ptm.gif)                   |
+| **1. Click & release**       | `pen`        | Initiate connection                                           | ![Phase 1](images/click_release_ptm.gif)                            |
+| **2. Click-and-move**        | `pen`        | Move the ghost edge around if a connection was initiated      | ![Phase 2](images/click_move_ptm.gif)                               |
+| **3. Click while connecting**| `pen`        | Establish and render the connection                           | ![Phase 3](images/click_while_connecting_ptm.gif)                   |
 
 <!--
 *Developer notes:*
diff --git a/content/en/kanvas/designer/whiteboarding/canvas-preferences.png b/content/en/kanvas/designer/whiteboarding/images/canvas-preferences.png
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/canvas-preferences.png
rename to content/en/kanvas/designer/whiteboarding/images/canvas-preferences.png
diff --git a/content/en/kanvas/designer/whiteboarding/comment.gif b/content/en/kanvas/designer/whiteboarding/images/comment.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/comment.gif
rename to content/en/kanvas/designer/whiteboarding/images/comment.gif
diff --git a/content/en/kanvas/designer/whiteboarding/line-editing.gif b/content/en/kanvas/designer/whiteboarding/images/line-editing.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/line-editing.gif
rename to content/en/kanvas/designer/whiteboarding/images/line-editing.gif
diff --git a/content/en/kanvas/designer/whiteboarding/marching-ants.gif b/content/en/kanvas/designer/whiteboarding/images/marching-ants.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/marching-ants.gif
rename to content/en/kanvas/designer/whiteboarding/images/marching-ants.gif
diff --git a/content/en/kanvas/designer/whiteboarding/overview.png b/content/en/kanvas/designer/whiteboarding/images/overview.png
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/overview.png
rename to content/en/kanvas/designer/whiteboarding/images/overview.png
diff --git a/content/en/kanvas/designer/whiteboarding/section.gif b/content/en/kanvas/designer/whiteboarding/images/section.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/section.gif
rename to content/en/kanvas/designer/whiteboarding/images/section.gif
diff --git a/content/en/kanvas/designer/whiteboarding/shapes_introduction.gif b/content/en/kanvas/designer/whiteboarding/images/shapes_introduction.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/shapes_introduction.gif
rename to content/en/kanvas/designer/whiteboarding/images/shapes_introduction.gif
diff --git a/content/en/kanvas/designer/whiteboarding/text-customization.png b/content/en/kanvas/designer/whiteboarding/images/text-customization.png
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/text-customization.png
rename to content/en/kanvas/designer/whiteboarding/images/text-customization.png
diff --git a/content/en/kanvas/designer/whiteboarding/textbox.gif b/content/en/kanvas/designer/whiteboarding/images/textbox.gif
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/textbox.gif
rename to content/en/kanvas/designer/whiteboarding/images/textbox.gif
diff --git a/content/en/kanvas/designer/whiteboarding/tooltip.png b/content/en/kanvas/designer/whiteboarding/images/tooltip.png
similarity index 100%
rename from content/en/kanvas/designer/whiteboarding/tooltip.png
rename to content/en/kanvas/designer/whiteboarding/images/tooltip.png
diff --git a/content/en/kanvas/designer/whiteboarding/index.md b/content/en/kanvas/designer/whiteboarding/index.md
index 051f1adaa2c..5d051a65ba8 100644
--- a/content/en/kanvas/designer/whiteboarding/index.md
+++ b/content/en/kanvas/designer/whiteboarding/index.md
@@ -10,7 +10,7 @@ aliases:
 # https://github.com/layer5labs/meshery-extensions/tree/master/kanvas/src/components/designer/drawer/ComponentDrawerTabContent/exportModal.js
 ---
 
-![Shapes Introduction](./overview.png)
+![Shapes Introduction](images/overview.png)
 
 The whiteboarding feature introduces versatile, freestyle drawing capabilities within Kanvas. Enabling the whiteboard feature augments your ability to diagram with a suite of predefined shapes, and pen and pencil annotation, allowing you full freedom of expression of your engineering diagrams.
 
@@ -32,7 +32,7 @@ If not already enabled, follow these steps to access the whiteboarding feature w
 ### Step 1: Accessing Preferences
 
 1. Navigate to canvas preferences and enable "Whiteboard Beta"
-![Canvas Preferences](./canvas-preferences.png)
+![Canvas Preferences](images/canvas-preferences.png)
 1. **Toggle Whiteboard Feature**
    1. Inside the 'Preferences' menu, find the section related to 'Canvas Settings' or 'Features'.
    1. Look for the option labeled 'Whiteboard' or similar.
@@ -77,19 +77,19 @@ The Whiteboard (Beta) feature might undergo updates or improvements during its b
 
 #### Shape Customization
 
-![Shapes Customization](./shapes_introduction.gif)
+![Shapes Customization](images/shapes_introduction.gif)
 
 Shapes within the canvas offer flexibility. Select any shape to access a tooltip with options to resize, reshape, and change colors. This allows for precise adjustments similar to popular design software.
 
 #### Text Annotation Customization
 
-![Text Box](./text-customization.png)
+![Text Box](images/text-customization.png)
 
 Text annotations come with various options. Customize fonts, sizes, alignments, and styles easily. Text boxes resize for seamless integration with the canvas.
 
 #### Interactive Tooltip Interface
 
-![Tooltip](./tooltip.png)
+![Tooltip](images/tooltip.png)
 
 The tooltip is your gateway to customization. It's simple and intuitive, offering a range of editing options upon selection. It's designed for easy navigation, mirroring popular design software.
 
@@ -101,13 +101,13 @@ Manage layers, group elements, for better organization. These advanced tools ens
 
 You have the flexibility to customize lines to fit your design needs and architectural specifications. Lines can represent various relationships, such as data flow, dependencies, or communication between components. By adjusting line properties like curve style, arrow style, and line type (e.g., solid or dashed), you can visually convey different meanings, making your design easier for others to interpret. Use the design tooltip to adjust these visual elements and create clear, meaningful connections between components in your architecture.
 
-![Edit Line](./line-editing.gif)
+![Edit Line](images/line-editing.gif)
 
 #### Adding Line Animations
 
 Take your designs a step further by adding animations to the lines, like the `marching ants` effect, to emphasize flow or movement between components. This feature improves visual clarity by highlighting the direction and movement of processes or data throughout your system, making interactions more intuitive. Adding this animation is simple, just click on the line and use the design tooltip.
 
-![Marching Ants Animation](./marching-ants.gif)
+![Marching Ants Animation](images/marching-ants.gif)
 
 #### Consistent Functionality
 
diff --git a/content/en/kanvas/getting-started/_index.md b/content/en/kanvas/getting-started/_index.md
index 8397fd8431e..ee9462c2aab 100644
--- a/content/en/kanvas/getting-started/_index.md
+++ b/content/en/kanvas/getting-started/_index.md
@@ -9,7 +9,7 @@ aliases:
 ---
 
 {{< alert type="info" title="Follow Along with Jordan and Five" >}}
-Throughout the Kanvas docs, you'll follow **Jordan Reyes** — a developer and designer at Orbital Labs — as she creates, shares, and iterates on infrastructure designs. **Five** reviews her work and occasionally discovers that a design works better in practice than it does in theory. Their starting point is the `microservices-baseline` design in the `orbital-dev` workspace. [Meet the full cast →](/cloud/getting-started/meet-five)
+Throughout the Kanvas docs, you'll follow **Jordan Reyes** — a developer and designer at Orbital Labs — as she creates, shares, and iterates on infrastructure designs. **Five** reviews her work and occasionally discovers that a design works better in practice than it does in theory. Their starting point is the `microservices-baseline` design in the `orbital-dev` workspace. [Meet the full cast →]({{< ref "cloud/getting-started/meet-five/_index.md" >}})
 {{< /alert >}}
 
 ## Use Kanvas for your Diagrams
diff --git a/content/en/kanvas/getting-started/images/relationships/EdgeNetwork.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/EdgeNetwork.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/EdgeNetwork.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/EdgeNetwork.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/create-inventory-wallet.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/create-inventory-wallet.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/create-inventory-wallet.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/create-inventory-wallet.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/create-matchlabels.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/create-matchlabels.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/create-matchlabels.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/create-matchlabels.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/create-parent-child.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/create-parent-child.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/create-parent-child.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/create-parent-child.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/delete-edge.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/delete-edge.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/delete-edge.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/delete-edge.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/delete-parent-child.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/delete-parent-child.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/delete-parent-child.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/delete-parent-child.gif
diff --git a/content/en/kanvas/getting-started/images/relationships/layers-panel-relationships.gif b/content/en/kanvas/getting-started/creating-relationships/images/relationships/layers-panel-relationships.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/relationships/layers-panel-relationships.gif
rename to content/en/kanvas/getting-started/creating-relationships/images/relationships/layers-panel-relationships.gif
diff --git a/content/en/kanvas/getting-started/creating-relationships.md b/content/en/kanvas/getting-started/creating-relationships/index.md
similarity index 89%
rename from content/en/kanvas/getting-started/creating-relationships.md
rename to content/en/kanvas/getting-started/creating-relationships/index.md
index 399a67f9ba1..253138921d9 100644
--- a/content/en/kanvas/getting-started/creating-relationships.md
+++ b/content/en/kanvas/getting-started/creating-relationships/index.md
@@ -27,7 +27,7 @@ Meshery recognizes different kinds of relationships:
 - **Edge Relationships**: Connections depicting how components interact with each other
 - **TagSets Relationships**: Connections based on shared Labels or Annotations
 
-👉 [Learn more about relationships](/kanvas/concepts/relationships/)
+👉 [Learn more about relationships]({{< ref "kanvas/concepts/relationships/index.md" >}})
 
 ## Creating Relationships in Kanvas
 
@@ -44,7 +44,7 @@ Edge relationships represent connections between components that interact with e
 
 Kanvas will highlight compatible target components as you drag the connection line, making it easier to identify potential relationships.
 
-![Edge Network Relationships](/kanvas/getting-started/images/relationships/EdgeNetwork.gif)
+![Edge Network Relationships](images/relationships/EdgeNetwork.gif)
 
 ### Creating Hierarchical Parent-Child Relationships
 
@@ -56,7 +56,7 @@ Hierarchical relationships represent parent-child connections between components
 For example, dragging a Kubernetes Pod into a Namespace creates a hierarchical relationship where the Namespace is the parent of the Pod.
 
 
-![Create Parent Child Relationships](/kanvas/getting-started/images/relationships/create-parent-child.gif)
+![Create Parent Child Relationships](images/relationships/create-parent-child.gif)
 
 ### Creating Inventory Wallet Relationships 
 
@@ -68,7 +68,7 @@ To create an Inventory Wallet relationship:
 3. Clicking on this badge reveals all inventory items
 
 
-![Create Inventory Wallet Relationships](/kanvas/getting-started/images/relationships/create-inventory-wallet.gif)
+![Create Inventory Wallet Relationships](images/relationships/create-inventory-wallet.gif)
 
 ### Creating MatchLabel Relationships
 
@@ -77,7 +77,7 @@ MatchLabel relationships (also referred to as TagSets) are automatically created
 For example, if you add the same label `app: frontend` to both a Service and a Deployment, Kanvas will automatically establish a MatchLabel relationship between them and visualize it as a tagset around the matching components.
 
 
-![Create MatchLabel Relationships](/kanvas/getting-started/images/relationships/create-matchlabels.gif)
+![Create MatchLabel Relationships](images/relationships/create-matchlabels.gif)
 
 ## Keeping Configuration in Sync
 
@@ -94,11 +94,11 @@ Similar to creation, relationships of different kinds can be deleted in differen
 
 1. **Edge Relationships**: Can be deleted by clicking the delete button on the edge menu which can be opened by tapping on the edge
 
-![Delete Edge Relationships](/kanvas/getting-started/images/relationships/delete-edge.gif)
+![Delete Edge Relationships](images/relationships/delete-edge.gif)
 
 2. **Hierarchical Parent-Child Relationships**: Can be deleted by dragging the child component out of the parent
 
-![Delete Parent Child Relationships](/kanvas/getting-started/images/relationships/delete-parent-child.gif)
+![Delete Parent Child Relationships](images/relationships/delete-parent-child.gif)
 
 <!-- Not implemented yet
 3. **Inventory Wallet Relationships**: Can be deleted by clicking the cross icon on the wallet item (coming soon)
@@ -122,5 +122,5 @@ Individual relationship kinds can be toggled on or off from the relationships se
 This gives you control over which types of relationships you want to focus on in your infrastructure design.
 
 
-![Relationships Layers Panel](/kanvas/getting-started/images/relationships/layers-panel-relationships.gif)
+![Relationships Layers Panel](images/relationships/layers-panel-relationships.gif)
 
diff --git a/content/en/kanvas/getting-started/images/importing-designs/cloud-url.gif b/content/en/kanvas/getting-started/import-designs/images/importing-designs/cloud-url.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/importing-designs/cloud-url.gif
rename to content/en/kanvas/getting-started/import-designs/images/importing-designs/cloud-url.gif
diff --git a/content/en/kanvas/getting-started/images/importing-designs/drag-drop.gif b/content/en/kanvas/getting-started/import-designs/images/importing-designs/drag-drop.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/importing-designs/drag-drop.gif
rename to content/en/kanvas/getting-started/import-designs/images/importing-designs/drag-drop.gif
diff --git a/content/en/kanvas/getting-started/images/importing-designs/file-import.gif b/content/en/kanvas/getting-started/import-designs/images/importing-designs/file-import.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/importing-designs/file-import.gif
rename to content/en/kanvas/getting-started/import-designs/images/importing-designs/file-import.gif
diff --git a/content/en/kanvas/getting-started/import-designs.md b/content/en/kanvas/getting-started/import-designs/index.md
similarity index 95%
rename from content/en/kanvas/getting-started/import-designs.md
rename to content/en/kanvas/getting-started/import-designs/index.md
index 163cf092636..0780986f563 100644
--- a/content/en/kanvas/getting-started/import-designs.md
+++ b/content/en/kanvas/getting-started/import-designs/index.md
@@ -21,28 +21,28 @@ There are multiple ways to import a design.
 {{% tab header="Drag and Drop" lang="en" active="true" %}}
 
 You can drag a file from your local computer directly onto the Kanvas canvas to import a design.
-![Drag and Drop Import](/kanvas/getting-started/images/importing-designs/drag-drop.gif)
+![Drag and Drop Import](images/importing-designs/drag-drop.gif)
 
 {{< /tab >}}
 
 {{% tab header="From Kanvas Toolbar" lang="en" %}}
 
 The most direct method is to click the **hamburger menu** (☰) in the top-left corner, then select the "Import" button in the Kanvas toolbar.
-![File Import Process](/kanvas/getting-started/images/importing-designs/file-import.gif)
+![File Import Process](images/importing-designs/file-import.gif)
 
 {{< /tab >}}
 
 {{% tab header="From Layer5 Cloud" lang="en" %}}
 
 Navigate to the [My Designs](https://cloud.layer5.io/catalog/content/my-designs) page and click the "Import" button.
-![Cloud Import Process](/kanvas/getting-started/images/importing-designs/cloud-url.gif)
+![Cloud Import Process](images/importing-designs/cloud-url.gif)
 
 {{< /tab >}}
 
 {{% tab header="Via GitHub Integration" lang="en" %}}
 
 For a more advanced, repository-based workflow, you can establish a persistent connection between your GitHub account and Meshery. This allows you to browse your repositories and import multiple designs directly.
-> Learn more about [GitHub integration](/cloud/getting-started/github-integration/).
+> Learn more about [GitHub integration]({{< ref "cloud/getting-started/github-integration/index.md" >}}).
 
 {{< /tab >}}
 
@@ -126,7 +126,7 @@ The "File Upload" dialog is designed to process one file or package at a time. I
   <summary>After importing a file, can I download my original, unaltered file?</summary>
   
 No. When a file is imported, it is converted into a native Design. The original source file is not stored and cannot be downloaded later. The export function will generate a new file based on the **current** state of your design.
-> For more details, see the [Exporting Designs](/kanvas/designer/export-designs/) guide.
+> For more details, see the [Exporting Designs]({{< ref "kanvas/designer/export-designs/index.md" >}}) guide.
 
 </details>
 
diff --git a/content/en/kanvas/getting-started/images/working-with-components/configuration-panel.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/configuration-panel.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/configuration-panel.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/configuration-panel.png
diff --git a/content/en/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-paste.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-rightclick-paste.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-paste.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-rightclick-paste.png
diff --git a/content/en/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-select.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-rightclick-select.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-select.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-rightclick-select.png
diff --git a/content/en/kanvas/getting-started/images/working-with-components/copy-paste-save.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-save.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/copy-paste-save.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste-save.png
diff --git a/content/en/kanvas/getting-started/images/working-with-components/copy-paste.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/copy-paste.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/copy-paste.png
diff --git a/content/en/kanvas/getting-started/images/working-with-components/radial-menu.png b/content/en/kanvas/getting-started/working-with-components/images/working-with-components/radial-menu.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/working-with-components/radial-menu.png
rename to content/en/kanvas/getting-started/working-with-components/images/working-with-components/radial-menu.png
diff --git a/content/en/kanvas/getting-started/working-with-components.md b/content/en/kanvas/getting-started/working-with-components/index.md
similarity index 91%
rename from content/en/kanvas/getting-started/working-with-components.md
rename to content/en/kanvas/getting-started/working-with-components/index.md
index 9c5735dd68d..dffd76f0c84 100644
--- a/content/en/kanvas/getting-started/working-with-components.md
+++ b/content/en/kanvas/getting-started/working-with-components/index.md
@@ -13,7 +13,7 @@ aliases:
 
 Once you’ve added components to your design in Kanvas, configuring them is a critical step in customizing and optimizing your cloud-native infrastructure. Configuring components allows you to fine-tune their behavior, set specific parameters, and ensure they meet the precise needs of your architecture.
 
-![configuration-panel](/kanvas/getting-started/images/working-with-components/configuration-panel.png)
+![configuration-panel](images/working-with-components/configuration-panel.png)
 
 **Steps to Configure Components:**
 
@@ -39,7 +39,7 @@ Kanvas' **radial context menu** provides an intuitive way to interact with compo
 
     **Use Case:** Style components to represent various application states, environments (production vs. development), or priority levels in your infrastructure design.
 
-![radial-menu](/kanvas/getting-started/images/working-with-components/radial-menu.png)
+![radial-menu](images/working-with-components/radial-menu.png)
 
 3. **Duplicating Components:** The radial menu also provides a quick way to duplicate a component. This feature is beneficial when you need multiple instances of the same component with identical configurations.
 
@@ -83,13 +83,13 @@ You can copy and paste one or more components — even if you're going from one
 
 You might be able to copy and paste with the right-click menu, but for security reasons, most browsers don't allow web apps (like Kanvas) to use your computer's clipboard through menus.
 
-![copy-paste](/kanvas/getting-started/images/working-with-components/copy-paste.png)
+![copy-paste](images/working-with-components/copy-paste.png)
 
 To copy and paste, you can use keyboard shortcuts:
 
 To copy and paste:
 
-1. Use [keyboard shortcuts](/kanvas/reference/keyboard-shortcuts/)
+1. Use [keyboard shortcuts]({{< ref "kanvas/reference/keyboard-shortcuts.md" >}})
 1. Use the right-click menu
 
 <!-- Image needed -->
@@ -102,14 +102,14 @@ To copy and paste:
 ### Use the Right-Click Menu
 
 1. Right-click on the canvas and select Select All Components.
-   ![copy-paste-rightclick-select](/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-select.png)
+   ![copy-paste-rightclick-select](images/working-with-components/copy-paste-rightclick-select.png)
 2. Right-click again and choose Paste or press CMD+V (Mac) or CTRL+V (Windows) to paste the copied components.
-   ![copy-paste-rightclick-paste](/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-paste.png)
+   ![copy-paste-rightclick-paste](images/working-with-components/copy-paste-rightclick-paste.png)
 
 ### Use the Save As Option
 
 1. Go to the design toolbar and select Save As.
-   ![copy-paste-save](/kanvas/getting-started/images/working-with-components/copy-paste-save.png)
+   ![copy-paste-save](images/working-with-components/copy-paste-save.png)
 2. A copy of all components will be saved in your new design file, which you can then paste into another design.
 
 
diff --git a/content/en/kanvas/designer/tagsets/group-components.png b/content/en/kanvas/images/group-components.png
similarity index 100%
rename from content/en/kanvas/designer/tagsets/group-components.png
rename to content/en/kanvas/images/group-components.png
diff --git a/content/en/kanvas/operator/_index.md b/content/en/kanvas/operator/_index.md
index 4bb2a4ecba3..4d5c38730d0 100644
--- a/content/en/kanvas/operator/_index.md
+++ b/content/en/kanvas/operator/_index.md
@@ -24,5 +24,5 @@ Using the search bar, you can search for specific resources and select them. The
 
 Operator supports connecting to Kubernetes pods via the following methods.
 
-- [Log Streaming](/kanvas/operator/log-streaming): Learn how to live-tail logs from your Kubernetes pods and containers directly within the visual topology.
-- [Interactive Terminal](/kanvas/operator/interactive-terminal): Learn how to establish an interactive shell session with your containers.
+- [Log Streaming]({{< ref "kanvas/operator/log-streaming/index.md" >}}): Learn how to live-tail logs from your Kubernetes pods and containers directly within the visual topology.
+- [Interactive Terminal]({{< ref "kanvas/operator/interactive-terminal/index.md" >}}): Learn how to establish an interactive shell session with your containers.
diff --git a/static/images/interactive-terminal-sequence-diagram.svg b/content/en/kanvas/operator/interactive-terminal/images/interactive-terminal-sequence-diagram.svg
similarity index 100%
rename from static/images/interactive-terminal-sequence-diagram.svg
rename to content/en/kanvas/operator/interactive-terminal/images/interactive-terminal-sequence-diagram.svg
diff --git a/content/en/kanvas/operator/interactive-terminal.md b/content/en/kanvas/operator/interactive-terminal/index.md
similarity index 93%
rename from content/en/kanvas/operator/interactive-terminal.md
rename to content/en/kanvas/operator/interactive-terminal/index.md
index 6a7a14e1e7c..1bad4d4f9c2 100644
--- a/content/en/kanvas/operator/interactive-terminal.md
+++ b/content/en/kanvas/operator/interactive-terminal/index.md
@@ -71,11 +71,11 @@ While using the interactive terminal, understand that you can only open one sess
 
 <!-- {{< figure src="images/interactive-terminal-sequence-diagram.svg" link="images/interactive-terminal-sequence-diagram.svg"  width="100%" alt="interactive-terminal-sequence-diagram" >}} -->
 
-![interactive-terminal-sequence-diagram](/images/interactive-terminal-sequence-diagram.svg)
+![interactive-terminal-sequence-diagram](images/interactive-terminal-sequence-diagram.svg)
 
 ***
 
 ### See Also
 
-* **[Log Streaming](/kanvas/operator/log-streaming):** Learn how to live-tail logs for real-time application monitoring.
-<!-- * **[Performance Management](/kanvas/performance):** Run load tests and analyze performance profiles. -->
+* **[Log Streaming]({{< ref "kanvas/operator/log-streaming/index.md" >}}):** Learn how to live-tail logs for real-time application monitoring.
+<!-- * **[Performance Management]({{< ref "kanvas/advanced/performance/index.md" >}}):** Run load tests and analyze performance profiles. -->
diff --git a/static/images/log-stream-sequence-diagram.svg b/content/en/kanvas/operator/log-streaming/images/log-stream-sequence-diagram.svg
similarity index 100%
rename from static/images/log-stream-sequence-diagram.svg
rename to content/en/kanvas/operator/log-streaming/images/log-stream-sequence-diagram.svg
diff --git a/content/en/kanvas/operator/log-streaming.md b/content/en/kanvas/operator/log-streaming/index.md
similarity index 92%
rename from content/en/kanvas/operator/log-streaming.md
rename to content/en/kanvas/operator/log-streaming/index.md
index 24df41294d7..a085d8e6470 100644
--- a/content/en/kanvas/operator/log-streaming.md
+++ b/content/en/kanvas/operator/log-streaming/index.md
@@ -60,11 +60,11 @@ Once the stream is active, the Log Streamer panel will display the output.
 
 The Log Streamer utilizes a robust architecture where the **Meshery Operator** signals the **MeshSync** controller to start the log flow. Data is streamed using **NATS** to the Meshery Broker, preprocessed, and then delivered to your browser via a **WebSocket** connection using GraphQL subscriptions. This ensures minimal latency and high performance, even when streaming data from multiple active containers.
 
-![log-stream-sequence-diagram](/images/log-stream-sequence-diagram.svg)
+![log-stream-sequence-diagram](images/log-stream-sequence-diagram.svg)
 
 ***
 
 ### See Also
 
-* **[Interactive Terminal](/kanvas/terminal):** Learn how to establish an interactive shell session with your containers.
-* **[Performance Management](/kanvas/performance):** Run ad-hoc performance tests alongside your log monitoring.
+* **[Interactive Terminal]({{< ref "kanvas/operator/interactive-terminal/index.md" >}}):** Learn how to establish an interactive shell session with your containers.
+* **[Performance Management]({{< ref "kanvas/advanced/performance/index.md" >}}):** Run ad-hoc performance tests alongside your log monitoring.
diff --git a/content/en/kanvas/operator/images/operator-container-details.png b/content/en/kanvas/operator/resource-details/images/operator-container-details.png
similarity index 100%
rename from content/en/kanvas/operator/images/operator-container-details.png
rename to content/en/kanvas/operator/resource-details/images/operator-container-details.png
diff --git a/content/en/kanvas/operator/images/operator-node-details.png b/content/en/kanvas/operator/resource-details/images/operator-node-details.png
similarity index 100%
rename from content/en/kanvas/operator/images/operator-node-details.png
rename to content/en/kanvas/operator/resource-details/images/operator-node-details.png
diff --git a/content/en/kanvas/operator/resource-details.md b/content/en/kanvas/operator/resource-details/index.md
similarity index 86%
rename from content/en/kanvas/operator/resource-details.md
rename to content/en/kanvas/operator/resource-details/index.md
index cc8d9c8ed03..d86f065be57 100644
--- a/content/en/kanvas/operator/resource-details.md
+++ b/content/en/kanvas/operator/resource-details/index.md
@@ -14,13 +14,13 @@ Depending on the type of resource selected, the Instance Details tab will displa
 <div style="display:flex;justify-content:center;">
 {{< cardpane >}}
   {{< card header="Node Details" >}}
-    <img src="/kanvas/operator/images/operator-node-details.png" alt="Example description" />
+    <img src="images/operator-node-details.png" alt="Example description" />
     <p><i>Example: Kubernetes Node details.</i></p>
   {{< /card >}}
     </a>
   
   {{< card header="Container Details" >}}  
-    <img src="/kanvas/operator/images/operator-container-details.png" alt="Example description" />
+    <img src="images/operator-container-details.png" alt="Example description" />
     <p><i>Example: Kubernetes Pod Container details.</i></p>
   {{< /card >}}
   </a>
diff --git a/content/en/kanvas/operator/images/ActionsIcon.png b/content/en/kanvas/operator/views/images/ActionsIcon.png
similarity index 100%
rename from content/en/kanvas/operator/images/ActionsIcon.png
rename to content/en/kanvas/operator/views/images/ActionsIcon.png
diff --git a/content/en/kanvas/operator/images/DeleteView.png b/content/en/kanvas/operator/views/images/DeleteView.png
similarity index 100%
rename from content/en/kanvas/operator/images/DeleteView.png
rename to content/en/kanvas/operator/views/images/DeleteView.png
diff --git a/content/en/kanvas/operator/images/ExportView2.png b/content/en/kanvas/operator/views/images/ExportView2.png
similarity index 100%
rename from content/en/kanvas/operator/images/ExportView2.png
rename to content/en/kanvas/operator/views/images/ExportView2.png
diff --git a/content/en/kanvas/operator/images/SaveView.png b/content/en/kanvas/operator/views/images/SaveView.png
similarity index 100%
rename from content/en/kanvas/operator/images/SaveView.png
rename to content/en/kanvas/operator/views/images/SaveView.png
diff --git a/content/en/kanvas/operator/images/ShareModal.PNG b/content/en/kanvas/operator/views/images/ShareModal.PNG
similarity index 100%
rename from content/en/kanvas/operator/images/ShareModal.PNG
rename to content/en/kanvas/operator/views/images/ShareModal.PNG
diff --git a/content/en/kanvas/operator/images/ShareView.png b/content/en/kanvas/operator/views/images/ShareView.png
similarity index 100%
rename from content/en/kanvas/operator/images/ShareView.png
rename to content/en/kanvas/operator/views/images/ShareView.png
diff --git a/content/en/kanvas/operator/images/ViewInfo.png b/content/en/kanvas/operator/views/images/ViewInfo.png
similarity index 100%
rename from content/en/kanvas/operator/images/ViewInfo.png
rename to content/en/kanvas/operator/views/images/ViewInfo.png
diff --git a/content/en/kanvas/operator/images/Views.svg b/content/en/kanvas/operator/views/images/Views.svg
similarity index 100%
rename from content/en/kanvas/operator/images/Views.svg
rename to content/en/kanvas/operator/views/images/Views.svg
diff --git a/content/en/kanvas/operator/images/Visibility.png b/content/en/kanvas/operator/views/images/Visibility.png
similarity index 100%
rename from content/en/kanvas/operator/images/Visibility.png
rename to content/en/kanvas/operator/views/images/Visibility.png
diff --git a/content/en/kanvas/operator/views.md b/content/en/kanvas/operator/views/index.md
similarity index 82%
rename from content/en/kanvas/operator/views.md
rename to content/en/kanvas/operator/views/index.md
index 58ac73d3157..d990630753b 100644
--- a/content/en/kanvas/operator/views.md
+++ b/content/en/kanvas/operator/views/index.md
@@ -8,7 +8,7 @@ categories: [Operator]
 
 The Views tab is located on the right side of the screen just beside the Details tab in Kanvas Operator. It allows you to see all containers the present in your Kubernetes cluster. Think of views for Operator mode as you would design for the Designer mode.
 
-![Operator Views](/kanvas/operator/images/Views.svg)
+![Operator Views](images/Views.svg)
 
 ## Managing Views
 
@@ -18,13 +18,13 @@ Here's what you can do with views in Operator:
 
   To save a view, simply give your view a title in the Name field at the top of the canvas. Any changes made to the view will be automatically saved. Alternatively, click on the "Save as" button at the top of the canvas. A modal will pop up for you to give your view a name and save it.
 
-![Save a view](/kanvas/operator/images/SaveView.png)
+![Save a view](images/SaveView.png)
   
 ### 2. Set view visibility
 
   You can choose to set your views to be either public or private. When views are set as public, everyone within your workspace can access these views. Views set as private are visible only to the person who created the view, ie the owner.
 
-![Set view visibility](/kanvas/operator/images/Visibility.png)
+![Set view visibility](images/Visibility.png)
   
 ### 3. Share a view
 
@@ -33,15 +33,15 @@ Here's what you can do with views in Operator:
 
   1. Click on the actions icon to the right of the view you want to share.
 
-     ![Actions](/kanvas/operator/images/ActionsIcon.png)
+     ![Actions](images/ActionsIcon.png)
 
   2. You'll find a list of actions. Share is the third icon from the left
 
-     ![Share a view](/kanvas/operator/images/ShareView.png)
+     ![Share a view](images/ShareView.png)
 
   3. Click on the share icon to open up the share modal.
 
-     ![Share a view](/kanvas/operator/images/ShareModal.PNG)
+     ![Share a view](images/ShareModal.PNG)
 
   4. Enter the name of the user you want to share a view with and set the view access.
 
@@ -49,16 +49,16 @@ Here's what you can do with views in Operator:
 
   You can delete a view when you no longer have use of it. You can only delete a view that you created. Views created by others and made public cannot be deleted, except by the owner of that view.
 
-![Delete a view](/kanvas/operator/images/DeleteView.png)
+![Delete a view](images/DeleteView.png)
   
 ### 5. Export a view
 
   To export a view, click on the export icon in the actions list. The view will be downloaded to your device in json format.
 
- ![Export a view](/kanvas/operator/images/ExportView2.png)
+ ![Export a view](images/ExportView2.png)
 
 ### 6. View info
 
   View info shows you the owner of the design, the view visibility (whether it's set to public or private), the date the design was created and the date it was last modified. If you're the owner of the view, you'll also see an input field where you can add notes about the design.
 
-  ![View Info](/kanvas/operator/images/ViewInfo.png)
+  ![View Info](images/ViewInfo.png)
diff --git a/content/en/kanvas/reference/releases/v0.7.119-4.md b/content/en/kanvas/reference/releases/v0.7.119-4.md
index a8d565143aa..c9e13236b58 100644
--- a/content/en/kanvas/reference/releases/v0.7.119-4.md
+++ b/content/en/kanvas/reference/releases/v0.7.119-4.md
@@ -6,12 +6,12 @@ prerelease: false
 toc_hide: true
 ---
 
-## What's New
-## 🔤 General
-* Manually built and packaged graphql plugin.
-
-## 👨🏽‍💻 Contributors
-
-Thank you to our contributors for making this release possible:
-@leecalcote 
+## What's New
+## 🔤 General
+* Manually built and packaged graphql plugin.
+
+## 👨🏽‍💻 Contributors
+
+Thank you to our contributors for making this release possible:
+@leecalcote 
 
diff --git a/content/en/kanvas/reference/releases/v0.7.122-1.md b/content/en/kanvas/reference/releases/v0.7.122-1.md
index aafc535a761..7b48d5c8885 100644
--- a/content/en/kanvas/reference/releases/v0.7.122-1.md
+++ b/content/en/kanvas/reference/releases/v0.7.122-1.md
@@ -6,31 +6,31 @@ prerelease: false
 toc_hide: true
 ---
 
-## What's New
-## 🔤 General
-## 🖌️ Designer
-
-- [Modals] Enhance one of kanvas.new modals for self-hosting @leecalcote (#3003)
-- fix height and width of the quick tip modal @amitamrutiya (#2997)
-- update new empty kanvas svgs @amitamrutiya (#2996)
-- build(deps-dev): bump eslint-plugin-react from 7.33.2 to 7.37.1 in /meshmap @dependabot (#2993)
-- build(deps-dev): bump css-loader from 6.8.1 to 7.1.2 in /meshmap @dependabot (#2994)
-
-## 🐛 Bug Fixes
-
-- fix height and width of the quick tip modal @amitamrutiya (#2997)
-
-## 🧰 Maintenance
-
-- [CI] Add Checkout Repo @leecalcote (#3002)
-- [CI] Enhance to use full base+extension versioning (Attempt #2) @leecalcote (#3001)
-- [CI] Enhance to use full base+extension versioning @leecalcote (#3000)
-- add extension version logic to release drafter w/singoff @Jougan-0 (#2999)
-- uncomment go mod code w/singoff @Jougan-0 (#2998)
-- build(deps-dev): bump eslint-plugin-react from 7.33.2 to 7.37.1 in /meshmap @dependabot (#2993)
-- build(deps-dev): bump css-loader from 6.8.1 to 7.1.2 in /meshmap @dependabot (#2994)
-
-## 👨🏽‍💻 Contributors
-
-Thank you to our contributors for making this release possible:
+## What's New
+## 🔤 General
+## 🖌️ Designer
+
+- [Modals] Enhance one of kanvas.new modals for self-hosting @leecalcote (#3003)
+- fix height and width of the quick tip modal @amitamrutiya (#2997)
+- update new empty kanvas svgs @amitamrutiya (#2996)
+- build(deps-dev): bump eslint-plugin-react from 7.33.2 to 7.37.1 in /meshmap @dependabot (#2993)
+- build(deps-dev): bump css-loader from 6.8.1 to 7.1.2 in /meshmap @dependabot (#2994)
+
+## 🐛 Bug Fixes
+
+- fix height and width of the quick tip modal @amitamrutiya (#2997)
+
+## 🧰 Maintenance
+
+- [CI] Add Checkout Repo @leecalcote (#3002)
+- [CI] Enhance to use full base+extension versioning (Attempt #2) @leecalcote (#3001)
+- [CI] Enhance to use full base+extension versioning @leecalcote (#3000)
+- add extension version logic to release drafter w/singoff @Jougan-0 (#2999)
+- uncomment go mod code w/singoff @Jougan-0 (#2998)
+- build(deps-dev): bump eslint-plugin-react from 7.33.2 to 7.37.1 in /meshmap @dependabot (#2993)
+- build(deps-dev): bump css-loader from 6.8.1 to 7.1.2 in /meshmap @dependabot (#2994)
+
+## 👨🏽‍💻 Contributors
+
+Thank you to our contributors for making this release possible:
 @Jougan-0, @aabidsofi19, @amitamrutiya, @dependabot, @dependabot[bot], @l5io and @leecalcote
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/clone-design.gif b/content/en/kanvas/tasks/designs/cloning-a-design/images/deploy-designs/clone-design.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/clone-design.gif
rename to content/en/kanvas/tasks/designs/cloning-a-design/images/deploy-designs/clone-design.gif
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/my-designs.gif b/content/en/kanvas/tasks/designs/cloning-a-design/images/deploy-designs/my-designs.gif
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/my-designs.gif
rename to content/en/kanvas/tasks/designs/cloning-a-design/images/deploy-designs/my-designs.gif
diff --git a/content/en/kanvas/tasks/designs/cloning-a-design.md b/content/en/kanvas/tasks/designs/cloning-a-design/index.md
similarity index 98%
rename from content/en/kanvas/tasks/designs/cloning-a-design.md
rename to content/en/kanvas/tasks/designs/cloning-a-design/index.md
index 4aab53cd9dc..bed62dfcc17 100644
--- a/content/en/kanvas/tasks/designs/cloning-a-design.md
+++ b/content/en/kanvas/tasks/designs/cloning-a-design/index.md
@@ -16,14 +16,14 @@ aliases:
 3. Select a design from the list that appears in the panel.
 4. A modal will pop up requesting you to clone (create a copy of) the design you’ve selected.
 
-![Copy of a Design](/kanvas/getting-started/images/deploy-designs/clone-design.gif)
+![Copy of a Design](images/deploy-designs/clone-design.gif)
 
 This will create a copy of the catalog item to a new design, now owned by you.
 
 1. Click “clone” and a copy of the design will appear on your Kanvas canvas. You can then configure the design to suit your purposes.
 2. To access your newly cloned design, click the three-shapes icon, then click through: Workspaces → My Workspaces → Explore Workspaces → My Designs.
 
-![Copy of a Design](/kanvas/getting-started/images/deploy-designs/my-designs.gif)
+![Copy of a Design](images/deploy-designs/my-designs.gif)
 
 You are now free to deploy it as it is or modify it further. 
 
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/empty-ls.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/empty-ls.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/empty-ls.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/empty-ls.png
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/error-code.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/error-code.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/error-code.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/error-code.png
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/missing-ns.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/missing-ns.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/missing-ns.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/missing-ns.png
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/notification-center.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/notification-center.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/notification-center.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/notification-center.png
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/notification.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/notification.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/notification.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/notification.png
diff --git a/content/en/kanvas/getting-started/images/deploy-designs/success-deploy.png b/content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/success-deploy.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/deploy-designs/success-deploy.png
rename to content/en/kanvas/tasks/designs/deploying-designs/images/deploy-designs/success-deploy.png
diff --git a/content/en/kanvas/tasks/designs/deploying-designs.md b/content/en/kanvas/tasks/designs/deploying-designs/index.md
similarity index 96%
rename from content/en/kanvas/tasks/designs/deploying-designs.md
rename to content/en/kanvas/tasks/designs/deploying-designs/index.md
index cfffd3b5220..344e7a23db4 100644
--- a/content/en/kanvas/tasks/designs/deploying-designs.md
+++ b/content/en/kanvas/tasks/designs/deploying-designs/index.md
@@ -19,17 +19,17 @@ aliases:
 
 5. Click **Finish**
 
-![success-deploy](/kanvas/getting-started/images/deploy-designs/success-deploy.png)
+![success-deploy](images/deploy-designs/success-deploy.png)
 
 ### Deployment Errors
 
 1. **Missing Namespace**: This error occurs when you attempt to create a Kubernetes resource without specifying a namespace. Kubernetes requires that all resources have an associated namespace.
 
-![missing-ns](/kanvas/getting-started/images/deploy-designs/missing-ns.png)
+![missing-ns](images/deploy-designs/missing-ns.png)
 
 2. **Empty Label Selector**: This error indicates an empty label selector.
 
-![empty-ls](/kanvas/getting-started/images/deploy-designs/empty-ls.png)
+![empty-ls](images/deploy-designs/empty-ls.png)
 
 ### Troubleshooting Errors
 
@@ -41,7 +41,7 @@ For the comprehensive list of error codes refer to [Error Code Reference](https:
 
 If you encounter persistent issues consider consulting the [Meshery Community forum](https://discuss.layer5.io/c/meshery/5)
 
-![error-code](/kanvas/getting-started/images/deploy-designs/error-code.png)
+![error-code](images/deploy-designs/error-code.png)
 
 
 ### Using the Notification Center for Troubleshooting
@@ -53,9 +53,9 @@ The Notification Center in Meshery helps manage events during the deployment pro
 1. Offers links to detailed documentation and guides for resolving common problems.
 1. Keeps a log of past notifications, allowing you to track and review previous errors and their resolutions.
 
-![notification](/kanvas/getting-started/images/deploy-designs/notification.png) 
+![notification](images/deploy-designs/notification.png) 
 
-![notification-center](/kanvas/getting-started/images/deploy-designs/notification-center.png)
+![notification-center](images/deploy-designs/notification-center.png)
 
 By actively monitoring the Notification Center, you can promptly address issues as they arise, ensuring a smoother deployment process. Learn more about [Managing Events with the Notification Center](https://docs.meshery.io/guides/events-management).
 
diff --git a/content/en/kanvas/getting-started/images/dry-running-designs/invalid-field-value-1.png b/content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/invalid-field-value-1.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/dry-running-designs/invalid-field-value-1.png
rename to content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/invalid-field-value-1.png
diff --git a/content/en/kanvas/getting-started/images/dry-running-designs/invalid-field-value-2.png b/content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/invalid-field-value-2.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/dry-running-designs/invalid-field-value-2.png
rename to content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/invalid-field-value-2.png
diff --git a/content/en/kanvas/getting-started/images/dry-running-designs/missing-field.png b/content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/missing-field.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/dry-running-designs/missing-field.png
rename to content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/missing-field.png
diff --git a/content/en/kanvas/getting-started/images/dry-running-designs/missing-resource.png b/content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/missing-resource.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/dry-running-designs/missing-resource.png
rename to content/en/kanvas/tasks/designs/dry-running-a-design/images/dry-running-designs/missing-resource.png
diff --git a/content/en/kanvas/tasks/designs/dry-running-a-design.md b/content/en/kanvas/tasks/designs/dry-running-a-design/index.md
similarity index 80%
rename from content/en/kanvas/tasks/designs/dry-running-a-design.md
rename to content/en/kanvas/tasks/designs/dry-running-a-design/index.md
index c4b8631332c..1122f672404 100644
--- a/content/en/kanvas/tasks/designs/dry-running-a-design.md
+++ b/content/en/kanvas/tasks/designs/dry-running-a-design/index.md
@@ -29,15 +29,15 @@ A dry run in Meshery simulates the deployment of your design in the selected tar
 
 This error indicates that a field has an invalid value. For example, when configuring a Kubernetes Service, the fields `spec.ports[0].port` and `spec.ports[0].targetPort` may have invalid values of 0. These values must be between 1 and 65535, inclusive.
 
-![Invalid Field Value Error](/kanvas/getting-started/images/dry-running-designs/invalid-field-value-1.png)
+![Invalid Field Value Error](images/dry-running-designs/invalid-field-value-1.png)
 
-![Invalid Field Value Details](/kanvas/getting-started/images/dry-running-designs/invalid-field-value-2.png)
+![Invalid Field Value Details](images/dry-running-designs/invalid-field-value-2.png)
 
 ### Missing Required Field
 
 This error occurs when a required field in the configuration has not been provided. Ensure all required fields are properly configured before running the dry run.
 
-![Missing Required Field Error](/kanvas/getting-started/images/dry-running-designs/missing-field.png)
+![Missing Required Field Error](images/dry-running-designs/missing-field.png)
 
 ### Missing Dependencies
 
@@ -45,4 +45,4 @@ This error occurs because a Kubernetes Custom Resource Definition (CRD) should h
 
 To resolve this, ensure that all necessary dependencies, such as CRDs, are deployed before deploying the components that rely on them.
 
-![Missing Dependencies Error](/kanvas/getting-started/images/dry-running-designs/missing-resource.png)
+![Missing Dependencies Error](images/dry-running-designs/missing-resource.png)
diff --git a/content/en/kanvas/getting-started/images/undeploying-designs/undeploy.png b/content/en/kanvas/tasks/designs/undeploying-designs/images/undeploying-designs/undeploy.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/undeploying-designs/undeploy.png
rename to content/en/kanvas/tasks/designs/undeploying-designs/images/undeploying-designs/undeploy.png
diff --git a/content/en/kanvas/tasks/designs/undeploying-designs.md b/content/en/kanvas/tasks/designs/undeploying-designs/index.md
similarity index 99%
rename from content/en/kanvas/tasks/designs/undeploying-designs.md
rename to content/en/kanvas/tasks/designs/undeploying-designs/index.md
index 9802faadefe..3b7be6ca135 100644
--- a/content/en/kanvas/tasks/designs/undeploying-designs.md
+++ b/content/en/kanvas/tasks/designs/undeploying-designs/index.md
@@ -15,7 +15,7 @@ To undeploy the resources
 
 2. Click on the **Undeploy** icon.
 
-![undeploying designs](/kanvas/getting-started/images/undeploying-designs/undeploy.png)
+![undeploying designs](images/undeploying-designs/undeploy.png)
 
 <!-- Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
 
diff --git a/content/en/kanvas/getting-started/images/validating-designs/performing-validation-1.png b/content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/performing-validation-1.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/validating-designs/performing-validation-1.png
rename to content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/performing-validation-1.png
diff --git a/content/en/kanvas/getting-started/images/validating-designs/performing-validation-2.png b/content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/performing-validation-2.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/validating-designs/performing-validation-2.png
rename to content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/performing-validation-2.png
diff --git a/content/en/kanvas/getting-started/images/validating-designs/successful-validation.png b/content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/successful-validation.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/validating-designs/successful-validation.png
rename to content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/successful-validation.png
diff --git a/content/en/kanvas/getting-started/images/validating-designs/validation-error.png b/content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/validation-error.png
similarity index 100%
rename from content/en/kanvas/getting-started/images/validating-designs/validation-error.png
rename to content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/validation-error.png
diff --git a/content/en/kanvas/tasks/designs/validating-designs.md b/content/en/kanvas/tasks/designs/validating-designs/index.md
similarity index 96%
rename from content/en/kanvas/tasks/designs/validating-designs.md
rename to content/en/kanvas/tasks/designs/validating-designs/index.md
index a47e182c3a4..60788bd12e3 100644
--- a/content/en/kanvas/tasks/designs/validating-designs.md
+++ b/content/en/kanvas/tasks/designs/validating-designs/index.md
@@ -25,15 +25,15 @@ This comprehensive validation ensures that:
 
 1. To validate your design, navigate to the Actions button at the top of the Design canvas.
 
-![Navigate to Actions button](/kanvas/getting-started/images/validating-designs/performing-validation-1.png)
+![Navigate to Actions button](images/validating-designs/performing-validation-1.png)
 
 2. Click on the **Validate** Icon.
 
-![Click on the Validate icon](/kanvas/getting-started/images/validating-designs/performing-validation-2.png)
+![Click on the Validate icon](images/validating-designs/performing-validation-2.png)
 
 If the validation is successful, you will see a modal displaying the number of components validated and the number of annotations, similar to the one shown below:
 
-![Successful Validation](/kanvas/getting-started/images/validating-designs/successful-validation.png)
+![Successful Validation](images/validating-designs/successful-validation.png)
 
 ## Handling Validation Errors
 
@@ -45,7 +45,7 @@ A common validation error is:
 
 **Missing Required Field:** This happens when a required field is not provided. For example, in the image below, the first error indicates that the field ".spec.template.spec.containers.0.env.0" must have a value.
 
-![Validation Error](/kanvas/getting-started/images/validating-designs/validation-error.png)
+![Validation Error](images/validating-designs/validation-error.png)
 
 
 To troubleshoot and remediate validation issues:
diff --git a/content/en/kanvas/tutorials/_index.md b/content/en/kanvas/tutorials/_index.md
index e5db7a29674..a243dd88bf3 100755
--- a/content/en/kanvas/tutorials/_index.md
+++ b/content/en/kanvas/tutorials/_index.md
@@ -10,5 +10,5 @@ aliases:
 Kanvas tutorials walk through real-world design scenarios using two fictional organizations — Orbital Labs, a cloud-native startup on the Team plan, and Stellar Dynamics, their enterprise client on the Enterprise plan — both managed under the Constellation Cloud provider. Each tutorial follows a cast of named characters as they build, share, and collaborate on infrastructure designs, so you can see how Kanvas permissions, workspaces, environments, and cross-org access work together in practice.
 
 {{< alert type="info" >}}
-Meet Five, Maya, Zara, Marcus, Dr. Aiko, and the full cast at [Meet Five and the Cast](/cloud/getting-started/meet-five).
+Meet Five, Maya, Zara, Marcus, Dr. Aiko, and the full cast at [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_1.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_1.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_1.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_1.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_2.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_2.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_2.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_2.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_3.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_3.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_3.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_3.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_4.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_4.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_4.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_4.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_5.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_5.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_5.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/2024-07-30_5.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/add_repo.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/add_repo.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/add_repo.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/add_repo.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/artifacthub_control_panel.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/artifacthub_control_panel.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/artifacthub_control_panel.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/artifacthub_control_panel.png
diff --git a/content/en/kanvas/tutorials/images/publish-to-artifacthub/kind_design_repo.png b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/kind_design_repo.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/publish-to-artifacthub/kind_design_repo.png
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/images/publish-to-artifacthub/kind_design_repo.png
diff --git a/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub.md b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/index.md
similarity index 77%
rename from content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub.md
rename to content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/index.md
index 5ee4f577923..a2ecac6aed9 100644
--- a/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub.md
+++ b/content/en/kanvas/tutorials/artifacthub/publish-to-artifacthub/index.md
@@ -20,33 +20,33 @@ In this tutorial, we'll see how to export a Design from Meshery which we will us
 ## Steps
 
 ### 1. Open the hamburger menu in Kanvas
-![](/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_1.png)
+![](images/publish-to-artifacthub/2024-07-30_1.png)
 
 
 ### 2. Click Open
-![](/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_2.png)
+![](images/publish-to-artifacthub/2024-07-30_2.png)
 
 
 ### 3. Find the Design in the Panel
-![](/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_3.png)
+![](images/publish-to-artifacthub/2024-07-30_3.png)
 
 
 ### 4. Click Export Design
-![](/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_4.png)
+![](images/publish-to-artifacthub/2024-07-30_4.png)
 
 ### 5. Click on EXPORT under OCI
-![](/kanvas/tutorials/images/publish-to-artifacthub/2024-07-30_5.png)
+![](images/publish-to-artifacthub/2024-07-30_5.png)
 
 ### 6. Prepare your Artifact Hub repo
 You will need to have an Artifact Hub repository already created with `Kind` as `Meshery Designs`. See [Artifact Hub documentation](https://artifacthub.io/docs/topics/repositories/meshery-designs/) for more information on managing repositories.
 1. Navigate to the Artifact Hub control panel.
 2. Click **ADD** to create a new repository.
 
-![](/kanvas/tutorials/images/publish-to-artifacthub/add_repo.png)
+![](images/publish-to-artifacthub/add_repo.png)
 
 3. Select `Meshery designs` as the repository kind and fill in the repository details.
 
-![](/kanvas/tutorials/images/publish-to-artifacthub/kind_design_repo.png)
+![](images/publish-to-artifacthub/kind_design_repo.png)
 
 ### 7. Push Design to Artifact Hub repository
 After exporting your design as a Meshery Design (OCI image) from Kanvas, a `.tar` archive will be downloaded.
@@ -58,4 +58,4 @@ After exporting your design as a Meshery Design (OCI image) from Kanvas, a `.tar
 
 ### 8. Verify Repository in Artifact Hub
 After pushing the files, wait for Artifact Hub to index your repository. Once indexing is complete, verify the published Meshery Design from the Artifact Hub control panel.
-![](/kanvas/tutorials/images/publish-to-artifacthub/artifacthub_control_panel.png)
\ No newline at end of file
+![](images/publish-to-artifacthub/artifacthub_control_panel.png)
\ No newline at end of file
diff --git a/content/en/kanvas/tutorials/images/aws-controllers/aws-connection.png b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/aws-connection.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/aws-controllers/aws-connection.png
rename to content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/aws-connection.png
diff --git a/content/en/kanvas/tutorials/images/aws-controllers/configure-secret.png b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/configure-secret.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/aws-controllers/configure-secret.png
rename to content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/configure-secret.png
diff --git a/content/en/kanvas/tutorials/images/aws-controllers/controller-chart.png b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/controller-chart.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/aws-controllers/controller-chart.png
rename to content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/controller-chart.png
diff --git a/content/en/kanvas/tutorials/images/aws-controllers/controller-operator-mode.png b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/controller-operator-mode.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/aws-controllers/controller-operator-mode.png
rename to content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/images/aws-controllers/controller-operator-mode.png
diff --git a/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery.md b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/index.md
similarity index 88%
rename from content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery.md
rename to content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/index.md
index f9014350d45..07be2c2641d 100644
--- a/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery.md
+++ b/content/en/kanvas/tutorials/aws/deploy-aws-ec2-instances-with-meshery/index.md
@@ -13,13 +13,13 @@ aliases:
 
 Meshery is a powerful multi-cloud management platform that enables you to configure, deploy, and manage AWS resources, such as EC2 instances. In order to manage AWS resources, Meshery uses [AWS Controllers for Kubernetes (ACK)](https://aws.amazon.com/blogs/containers/aws-controllers-for-kubernetes-ack/). ACK facilitates the bridge between Kubernetes and AWS services, enabling Meshery to manage AWS resources and Meshery enabling you to benefit from the enhanced experience that Meshery and its extensions offer.
 
-Meshery has a number of extensions, adapters, and plugins. In this tutorial, we will use the [Kanvas](/extensions/kanvas) extension to provide an intuitive, visual experience for configuring and deploying an AWS EC2 instance. Among other aspects, Kanvas provides an alternative to command-line tools like `kubectl` by offering infrastructure as design. Once you connect your Kubernetes cluster to Meshery, you can configure, deploy, and manage AWS resources directly from the Kanvas interface, making deployments more intuitive and collaborative 
+Meshery has a number of extensions, adapters, and plugins. In this tutorial, we will use the [Kanvas](https://docs.meshery.io/extensions/kanvas) extension to provide an intuitive, visual experience for configuring and deploying an AWS EC2 instance. Among other aspects, Kanvas provides an alternative to command-line tools like `kubectl` by offering infrastructure as design. Once you connect your Kubernetes cluster to Meshery, you can configure, deploy, and manage AWS resources directly from the Kanvas interface, making deployments more intuitive and collaborative 
 
 In this guide, you’ll explore how to deploy AWS resources, including setup and architecture details. This guide also covers how to access pre-configured designs from [Meshery Catalog](https://meshery.io/catalog) and demonstrates how to visualize deployed resources using Kanvas' operator mode, offering a comprehensive understanding of AWS resource management.
 
 ### Prerequisites
 
-1. [Self Hosted Meshery Installation](/installation).
+1. [Self Hosted Meshery Installation](https://docs.meshery.io/installation).
 1. **AWS Account**: An active AWS account is required for accessing AWS resources.
 1. **Kubernetes Cluster**: A running Kubernetes cluster, such as Minikube or EKS.
 
@@ -60,9 +60,9 @@ To begin, connect your Kubernetes cluster to Meshery. This guide uses `minikube`
 
 - **Out-of-Cluster Deployment**: Runs Meshery in Docker containers, allowing external connectivity to the Minikube cluster.
 
-For this guide, the `in-cluster deployment` method is used.  Follow this [setup guide for Meshery on Minikube](/installation/kubernetes/minikube) to deploy Meshery in-cluster. After the deployment, open the Meshery UI at `localhost:9081` to verify that the cluster is listed. Click on the cluster name to ping and confirm connectivity.
+For this guide, the `in-cluster deployment` method is used.  Follow this [setup guide for Meshery on Minikube](https://docs.meshery.iohttps://docs.meshery.io/installation/kubernetes/minikube) to deploy Meshery in-cluster. After the deployment, open the Meshery UI at `localhost:9081` to verify that the cluster is listed. Click on the cluster name to ping and confirm connectivity.
 
-![Connect Minikube Cluster](/kanvas/tutorials/images/aws-controllers/aws-connection.png)
+![Connect Minikube Cluster](images/aws-controllers/aws-connection.png)
 
 ### 2. Configure and Deploy the EC2 Controller
 
@@ -70,7 +70,7 @@ In this section, you will set up the EC2 controller and configure it to connect
 
 1. **Clone the EC2 Controller Design**: Start by [cloning the EC2 controller design](https://meshery.io/catalog/deployment/ec2-controller-design-8f7e1431-3885-4ebf-9ef7-d2ec64bd4eb5.html) from the catalog. To do this, click on **Clone** on the catalog page. Once cloned, open the design in the playground, and you will see it displayed on the Kanvas.
 
-    ![EC2 Controller Chart](/kanvas/tutorials/images/aws-controllers/controller-chart.png)
+    ![EC2 Controller Chart](images/aws-controllers/controller-chart.png)
 
 2. **Set the Deployment Namespace**: This design has been configured to be deployed in the `ack-system` namespace.
 
@@ -93,7 +93,7 @@ To connect the EC2 controller to AWS, create a Kubernetes secret containing your
 
     Encode your AWS key and secret with a [base64 encoder](https://www.base64encode.org/), then enter them in the configuration.
 
-    ![Configure Secret](/kanvas/tutorials/images/aws-controllers/configure-secret.png)
+    ![Configure Secret](images/aws-controllers/configure-secret.png)
 
 #### Configure the EC2 Controller Pod to Use the Secret
 
@@ -114,7 +114,7 @@ After configuring your design, the next step is deployment. To learn more about
 
 1. Once the deployment is complete, click **Open in Visualizer** to switch to Operator mode and see a pre-filtered view of your just deployed resources in the cluster. Alternatively, you can click *Operate* at the top of the Kanvas to enter **Operator** mode.
 
-    ![Operator Mode](/kanvas/tutorials/images/aws-controllers/controller-operator-mode.png)
+    ![Operator Mode](images/aws-controllers/controller-operator-mode.png)
 
 To get the filtered view shown above, click the filter icon and adjust the following settings:
 
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/clone-azure-operator.png b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/clone-azure-operator.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/clone-azure-operator.png
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/clone-azure-operator.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/configure-secret-settings.png b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/configure-secret-settings.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/configure-secret-settings.png
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/configure-secret-settings.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/deploy-azure-operator.png b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/deploy-azure-operator.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/deploy-azure-operator.png
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/deploy-azure-operator.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/search-azure-operator.png b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/search-azure-operator.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/search-azure-operator.png
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/search-azure-operator.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/start-from-template.png b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/start-from-template.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-resources-with-meshery/start-from-template.png
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/images/deploy-azure-resources-with-meshery/start-from-template.png
diff --git a/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery.md b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/index.md
similarity index 92%
rename from content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery.md
rename to content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/index.md
index 1f23824f3c8..ec2c2c92f47 100644
--- a/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery.md
+++ b/content/en/kanvas/tutorials/azure/deploy-azure-resources-with-meshery/index.md
@@ -119,15 +119,15 @@ Azure Service Operator requires a Kubernetes secret with your Azure identity:
 ### 4. Deploy Azure Service Operator using Kanvas
 
 1. Click **Start from template**.
-[Start From Template](../images/deploy-azure-resources-with-meshery/start-from-template.png)
+[Start From Template](images/deploy-azure-resources-with-meshery/start-from-template.png)
 2. Search for the **Azure Service Operator** design.
-[Search Azure Operator](../images/deploy-azure-resources-with-meshery/search-azure-operator.png)
+[Search Azure Operator](images/deploy-azure-resources-with-meshery/search-azure-operator.png)
 3. Once found, click on the **Azure Service Operator** design, then click **Clone** to add it to your canvas.
-[Clone Azure Operator](../images/deploy-azure-resources-with-meshery/clone-azure-operator.png)
+[Clone Azure Operator](images/deploy-azure-resources-with-meshery/clone-azure-operator.png)
 4. Update the secret **aso-controller-settings** in the design template. The details are also mentioned in the catalog.
-[Configure Secret Settings](../images/deploy-azure-resources-with-meshery/configure-secret-settings.png)
+[Configure Secret Settings](images/deploy-azure-resources-with-meshery/configure-secret-settings.png)
 5. Click **Actions → Deploy**.
-[Deploy Azure Operator](../images/deploy-azure-resources-with-meshery/deploy-azure-operator.png)
+[Deploy Azure Operator](images/deploy-azure-resources-with-meshery/deploy-azure-operator.png)
 
 
 ### 5. Start deployment of Azure resources using Kanvas
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/config-storage-account.png b/content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/config-storage-account.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/config-storage-account.png
rename to content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/config-storage-account.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/deploy-storage-account.png b/content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/deploy-storage-account.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/deploy-storage-account.png
rename to content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/deploy-storage-account.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/search-storage-account.png b/content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/search-storage-account.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/search-storage-account.png
rename to content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/search-storage-account.png
diff --git a/content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/select-components.png b/content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/select-components.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-azure-storage-account-with-meshery/select-components.png
rename to content/en/kanvas/tutorials/azure/images/deploy-azure-storage-account-with-meshery/select-components.png
diff --git a/content/en/kanvas/tutorials/data-pipeline-gcp.md b/content/en/kanvas/tutorials/data-pipeline-gcp.md
index d89c5477908..c8d32799e48 100644
--- a/content/en/kanvas/tutorials/data-pipeline-gcp.md
+++ b/content/en/kanvas/tutorials/data-pipeline-gcp.md
@@ -81,5 +81,5 @@ Five receives an in-app notification. When he opens the design, he can see all f
 The `data-pipeline-gcp` design is now live in `orbital-production`, connected to real infrastructure, and ready for collaborative review.
 
 {{< alert type="info" >}}
-Meet Zara and the rest of the team at [Meet Five and the Cast](/cloud/getting-started/meet-five).
+Meet Zara and the rest of the team at [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/kanvas/tutorials/kubernetes-request-flow.md b/content/en/kanvas/tutorials/kubernetes-request-flow.md
index 9bd4ae9ae8a..ebae3112ae8 100644
--- a/content/en/kanvas/tutorials/kubernetes-request-flow.md
+++ b/content/en/kanvas/tutorials/kubernetes-request-flow.md
@@ -41,7 +41,7 @@ We will visually explore how all the Kubernetes components come together using K
 
 Start by opening the prebuilt design from here:
 
-[![Kubernetes Flow Diagram](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)](https://kanvas.new/extension/meshmap?mode=design&design=629b6039-ebb3-4bd8-9b1b-19184fade225)
+[![Kubernetes Flow Diagram](../images/kubernetes-request-flow/k8s-request-flow.png)](https://kanvas.new/extension/meshmap?mode=design&design=629b6039-ebb3-4bd8-9b1b-19184fade225)
 
 {{< alert type="info" title="Note" >}}
 Click the image above to open the interactive design in Kanvas.
@@ -111,7 +111,7 @@ If we want to recreate this flow from scratch, we can drag and drop the same com
 
 ### Diagram Screenshot
 
-[![Kubernetes Flow Diagram](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)
+[![Kubernetes Flow Diagram](../images/kubernetes-request-flow/k8s-request-flow.png)](../images/kubernetes-request-flow/k8s-request-flow.png)
 
 {{< alert type="info" title="Note" >}}
 You can design this yourself using the components in Kanvas.
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-1.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-1.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-1.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-1.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-2.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-2.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-2.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-2.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-3.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-3.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-3.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-3.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-4.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-4.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-4.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-4.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-5.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-5.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-5.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-5.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-6.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-6.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-6.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-6.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-7.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-7.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-7.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-7.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-8.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-8.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-8.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-8.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/cassandra-9.png b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-9.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/cassandra-9.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/images/screenshots/cassandra-9.png
diff --git a/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset.md b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/index.md
similarity index 86%
rename from content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset.md
rename to content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/index.md
index c8c4d867964..0d8c88814b0 100644
--- a/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset.md
+++ b/content/en/kanvas/tutorials/kubernetes/deploy-apache-cassandra-with-statefulset/index.md
@@ -13,7 +13,7 @@ aliases:
 
 In this tutorial, we will learn how to deploy a **Apache Cassandra with a StatefulSet** using Meshery Playground. Meshery Playground is an interactive and collaborative live cluster environment that simplifies the deployment process and enhances user experience by providing visual tools for managing Kubernetes resources.
 
-> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](/kanvas/tutorials/kubernetes-pods) tutorial first.
+> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground]({{< ref "kanvas/tutorials/kubernetes/kubernetes-pods/index.md" >}}) tutorial first.
 
 ### Prerequisites
 
@@ -57,23 +57,23 @@ These YAML files contain the Cassandra Service and Cassandra StatefulSet manifes
 
    - Select `Kubernetes Manifest` from the "Design Type" dropdown menu.
 
-        ![Import modal](/kanvas/tutorials/images/screenshots/cassandra-1.png)
+        ![Import modal](images/screenshots/cassandra-1.png)
 
    - Choose `File Upload` for the upload method, and select the file you just downloaded.
 
    - Then, click on `Import`
 
-        ![Import cassandra-service](/kanvas/tutorials/images/screenshots/cassandra-2.png)
+        ![Import cassandra-service](images/screenshots/cassandra-2.png)
 
 3. Under the "Designs" tab, you will see that we have successfully imported the `cassandra-service` design.
 
    When you click on the names of the designs on the `Designs` tab, you can see the visual representations of the various Kubernetes resources and their relationships on the canvas.
 
-    ![Imported designs on canvas](/kanvas/tutorials/images/screenshots/cassandra-3.png)
+    ![Imported designs on canvas](images/screenshots/cassandra-3.png)
 
 4. Now, follow the same steps to import the `cassandra-statefulset` file.
 
-    ![cassandra-statefulset](/kanvas/tutorials/images/screenshots/cassandra-4.png)
+    ![cassandra-statefulset](images/screenshots/cassandra-4.png)
 
 #### Merging the Designs
 
@@ -83,15 +83,15 @@ To merge the Service deployment design with the StatefulSet deployment design:
 
 1. Click and drag the `cassandra-service` design from the left panel and drop it onto the design canvas of the `cassandra-statefulset`.
 
-    ![drag and drop design](/kanvas/tutorials/images/screenshots/cassandra-5.png)
+    ![drag and drop design](images/screenshots/cassandra-5.png)
 
 2. This action will open a merge modal asking if you want to merge the design, Click on `Merge`.
 
-    ![merge modal](/kanvas/tutorials/images/screenshots/cassandra-6.png)
+    ![merge modal](images/screenshots/cassandra-6.png)
 
 3. Click on `Save As` and enter `cassandra-service-statefulset` as the new file name.
 
-    ![save design](/kanvas/tutorials/images/screenshots/cassandra-7.png)
+    ![save design](images/screenshots/cassandra-7.png)
 
 #### Visualizing the Deployed Resources
 
@@ -107,7 +107,7 @@ To view the resources deployed we will use the Visualize section of the _MeshMap
 
     After selecting your filters, you should see a view displaying only your relevant resources, as shown in the image below.
 
-    ![Filter resources](/kanvas/tutorials/images/screenshots/cassandra-8.png)
+    ![Filter resources](images/screenshots/cassandra-8.png)
 
 #### Resource Details
 
@@ -115,7 +115,7 @@ You can click on any resource to view more details about it in the "Details" sec
 
 **Deployment**
 
-![Get more details about deployment](/kanvas/tutorials/images/screenshots/cassandra-9.png)
+![Get more details about deployment](images/screenshots/cassandra-9.png)
 
 #### Deleting Resources
 
diff --git a/content/en/kanvas/tutorials/images/screenshots/app-canvas.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/app-canvas.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/app-canvas.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/app-canvas.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/operate-layers-expand.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-layers-expand.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/operate-layers-expand.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-layers-expand.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/operate-layers.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-layers.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/operate-layers.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-layers.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/operate-logs-menu.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-logs-menu.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/operate-logs-menu.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-logs-menu.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/operate-logs.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-logs.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/operate-logs.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate-logs.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/operate.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/operate.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/operate.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-leader-deployment.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-leader-deployment.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-leader-deployment.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-leader-deployment.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-deploy.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-deploy.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-deploy.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-deploy.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-deployment.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-deployment.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-deployment.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-deployment.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-dryrun.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-dryrun.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-dryrun.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-dryrun.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-finalize.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-finalize.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-finalize.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-finalize.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-identify.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-identify.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-identify.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-identify.png
diff --git a/content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-validate.png b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-validate.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/screenshots/redis-php-guestbook-validate.png
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/images/screenshots/redis-php-guestbook-validate.png
diff --git a/content/en/kanvas/tutorials/kubernetes/deploy-php-redis.md b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/index.md
similarity index 80%
rename from content/en/kanvas/tutorials/kubernetes/deploy-php-redis.md
rename to content/en/kanvas/tutorials/kubernetes/deploy-php-redis/index.md
index 310d2973f64..6e8fe076949 100644
--- a/content/en/kanvas/tutorials/kubernetes/deploy-php-redis.md
+++ b/content/en/kanvas/tutorials/kubernetes/deploy-php-redis/index.md
@@ -13,7 +13,7 @@ aliases:
 
 In this tutorial, we will learn how to deploy a **PHP Guestbook application with Redis** using Meshery Playground. Meshery Playground is an interactive and collaborative live cluster environment that simplifies the deployment process and enhances user experience by providing visual tools for managing Kubernetes resources.
 
-> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](/kanvas/tutorials/kubernetes-pods) tutorial first.
+> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground]({{< ref "kanvas/tutorials/kubernetes/kubernetes-pods/index.md" >}}) tutorial first.
 
 ### Prerequisites
 - Basic understanding of Kubernetes concepts.
@@ -67,30 +67,30 @@ These YAML files contain the Service definitions and Deployment configurations f
 
 6. Then, click on `Import`
 
-![Import redis-leader-deployment](/kanvas/tutorials/images/screenshots/redis-leader-deployment.png)
+![Import redis-leader-deployment](images/screenshots/redis-leader-deployment.png)
 
 
 Now, follow the same steps (1-6) to import the rest of the files.
 
 Under the “Designs” tab, you will see that we have successfully imported the manifest as designs, then you can drag and drop them in the canvas. This will "Merge" all the designs since it's all just one application
 
-![merging all designs](/kanvas/tutorials/images/screenshots/app-canvas.png)
+![merging all designs](images/screenshots/app-canvas.png)
 
 #### 4. **Deploy the files:**
 
 1. Click Actions in the top right corner and click on Deploy.
-![Import redis-php-guestbook-deploy](/kanvas/tutorials/images/screenshots/redis-php-guestbook-deploy.png)
+![Import redis-php-guestbook-deploy](images/screenshots/redis-php-guestbook-deploy.png)
 
 1. The design will be validated to make sure there are no errors.
-![Import redis-php-guestbook-validate](/kanvas/tutorials/images/screenshots/redis-php-guestbook-validate.png)
+![Import redis-php-guestbook-validate](images/screenshots/redis-php-guestbook-validate.png)
 1. Choose the Kubernetes cluster you want to deploy to.
-![Import redis-php-guestbook-identify](/kanvas/tutorials/images/screenshots/redis-php-guestbook-identify.png)
+![Import redis-php-guestbook-identify](images/screenshots/redis-php-guestbook-identify.png)
 1. A Dry-Run will be triggered.
-![Import redis-php-guestbook-dryrun](/kanvas/tutorials/images/screenshots/redis-php-guestbook-dryrun.png)
+![Import redis-php-guestbook-dryrun](images/screenshots/redis-php-guestbook-dryrun.png)
 1. Finally your deployment and click Deploy to deploy the application to the cluster.
-![Import redis-php-guestbook-finalize](/kanvas/tutorials/images/screenshots/redis-php-guestbook-finalize.png)
+![Import redis-php-guestbook-finalize](images/screenshots/redis-php-guestbook-finalize.png)
 1. On successful deployment you will see the following modal asking you to open you deployment in visualizer
-![Import redis-php-guestbook-finalize](/kanvas/tutorials/images/screenshots/redis-php-guestbook-deployment.png)
+![Import redis-php-guestbook-finalize](images/screenshots/redis-php-guestbook-deployment.png)
 
 
 #### 5. **Updating the Deployments:**
@@ -103,12 +103,12 @@ kubectl set image deployment/<deployment-name> <container-name>=new-image:tag
 #### 6. Open the files in Operate
 
 1. Once deployment is successful user can click on Open in Operate, or click on notification on top right click on the deployment successful notification and click on Open in Operate, or directly click on the Operate tab beside Design on the design and visualize the design inside operate mode.
-![Operate](/kanvas/tutorials/images/screenshots/operate.png)
+![Operate](images/screenshots/operate.png)
 
 2. Click on the Layers option below to view all available filters.
-![Operate layers](/kanvas/tutorials/images/screenshots/operate-layers.png)
+![Operate layers](images/screenshots/operate-layers.png)
 Now you can utilize this filter to visualize your design.
-![Operate layers expanded](/kanvas/tutorials/images/screenshots/operate-layers-expand.png)
+![Operate layers expanded](images/screenshots/operate-layers-expand.png)
 
 3. After selecting your filters, you should see a view displaying only your relevant resources.
 
@@ -116,12 +116,12 @@ Now you can utilize this filter to visualize your design.
 #### 7. Using built-in terminal for logs
 
 1. Right click on a pod, to open the circular-content menu.
-![Operate logs menu](/kanvas/tutorials/images/screenshots/operate-logs-menu.png)
+![Operate logs menu](images/screenshots/operate-logs-menu.png)
 
 2. Select the logs option from circular-context menu, this will start the session for logs
 
 3. Now you can use the in built terminal to view logs
-![Operate logs ](/kanvas/tutorials/images/screenshots/operate-logs.png)
+![Operate logs ](images/screenshots/operate-logs.png)
 
 
 #### 8. Deleting the resources
diff --git a/content/en/kanvas/tutorials/images/app-deploy.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/app-deploy.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/app-deploy.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/app-deploy.png
diff --git a/content/en/kanvas/tutorials/images/click-deploy.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/click-deploy.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/click-deploy.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/click-deploy.png
diff --git a/content/en/kanvas/tutorials/images/click-import.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/click-import.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/click-import.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/click-import.png
diff --git a/content/en/kanvas/tutorials/images/configuration-menu-design-import.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/configuration-menu-design-import.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/configuration-menu-design-import.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/configuration-menu-design-import.png
diff --git a/content/en/kanvas/tutorials/images/delete.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/delete.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/delete.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/delete.png
diff --git a/content/en/kanvas/tutorials/images/deploy-app.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy-app.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-app.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy-app.png
diff --git a/content/en/kanvas/tutorials/images/deploy-success.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy-success.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy-success.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy-success.png
diff --git a/content/en/kanvas/tutorials/images/deploy.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/deploy.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/deploy.png
diff --git a/content/en/kanvas/tutorials/images/design-auto-save.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/design-auto-save.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/design-auto-save.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/design-auto-save.png
diff --git a/content/en/kanvas/tutorials/images/design-cronjob.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/design-cronjob.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/design-cronjob.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/design-cronjob.png
diff --git a/content/en/kanvas/tutorials/images/navigate-kanvas.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/navigate-kanvas.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/navigate-kanvas.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/navigate-kanvas.png
diff --git a/content/en/kanvas/tutorials/images/save-app.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/save-app.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/save-app.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/save-app.png
diff --git a/content/en/kanvas/tutorials/images/save.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/save.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/save.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/save.png
diff --git a/content/en/kanvas/tutorials/images/scale.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/scale.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/scale.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/scale.png
diff --git a/content/en/kanvas/tutorials/images/select-cronjob.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/select-cronjob.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/select-cronjob.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/select-cronjob.png
diff --git a/content/en/kanvas/tutorials/images/tool-bar.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/tool-bar.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/tool-bar.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/tool-bar.png
diff --git a/content/en/kanvas/tutorials/images/toolbar-cronjob.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/toolbar-cronjob.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/toolbar-cronjob.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/toolbar-cronjob.png
diff --git a/content/en/kanvas/tutorials/images/view.png b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/view.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/view.png
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/images/view.png
diff --git a/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs.md b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/index.md
similarity index 80%
rename from content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs.md
rename to content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/index.md
index 7e21548f004..007e6c8f727 100644
--- a/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs.md
+++ b/content/en/kanvas/tutorials/kubernetes/exploring-kubernetes-cronjobs/index.md
@@ -39,20 +39,20 @@ To deploy a web application on Meshery, follow these steps:
 1. Navigate to the Configuration menu in Meshery.
 2. Select "Designs" from the menu.
 3. Click on the "Import Design" button.
-[![Configuration menu](/kanvas/tutorials/images/configuration-menu-design-import.png)](/kanvas/tutorials/images/configuration-menu-design-import.png)
+[![Configuration menu](images/configuration-menu-design-import.png)](images/configuration-menu-design-import.png)
 4. Fill in the required details for your application or design, including the Design File Name, Design Type, and choose your preferred upload method:
    - For File Upload, click "Browse" to locate and select the design file.
    - For URL Import, paste the link to the design.
 5. Click the "Import" button to initiate the upload process.
-[![Click import button](/kanvas/tutorials/images/click-import.png)](/kanvas/tutorials/images/click-import.png)
+[![Click import button](images/click-import.png)](images/click-import.png)
 6. Upon successful import, a pop-up message will confirm the completion, and it will also indicate that your design has been automatically saved in Meshery.
-[![Design is auto-saved](/kanvas/tutorials/images/design-auto-save.png)](/kanvas/tutorials/images/design-auto-save.png)
+[![Design is auto-saved](images/design-auto-save.png)](images/design-auto-save.png)
 7. Locate your design and click the deploy button to initiate the deployment process.
-[![Located App](/kanvas/tutorials/images/app-deploy.png)](/kanvas/tutorials/images/app-deploy.png)
+[![Located App](images/app-deploy.png)](images/app-deploy.png)
 8. Once the popup window opens, wait for the dry run to complete, and then click the deploy button.
-[![Dry Run](/kanvas/tutorials/images/click-deploy.png)](/kanvas/tutorials/images/click-deploy.png)
+[![Dry Run](images/click-deploy.png)](images/click-deploy.png)
 9. Upon successful deployment, a confirmation pop-up will appear, indicating that your app has been successfully deployed.
-[![Deployment Success](/kanvas/tutorials/images/deploy-success.png)](/kanvas/tutorials/images/deploy-success.png)
+[![Deployment Success](images/deploy-success.png)](images/deploy-success.png)
 
 <!-- 
 
@@ -75,21 +75,21 @@ Show user how to do this using Kanvas Designer to drag and drop components and c
 2. Upon opening Kanvas, ensure that you are on the Design tab, which can be found at the top center of the canvas.
 3. Navigate to the Design option located in the top menu of the left panel. Using the search bar, type in the name of your app, which in this instance is the Minecraft App.
 4. Once your app appears in the list, click on it to upload the design file onto the canvas.
-[![Navigate Kanvas](/kanvas/tutorials/images/navigate-kanvas.png)](/kanvas/tutorials/images/navigate-kanvas.png)
+[![Navigate Kanvas](images/navigate-kanvas.png)](images/navigate-kanvas.png)
 5. Locate the control panel at the bottom of the canvas and choose the Kubernetes option.
 6. Using the search bar, enter "Cron Job" and click on the corresponding icon to display it on the canvas.
-[![Select CronJob item](/kanvas/tutorials/images/select-cronjob.png)](/kanvas/tutorials/images/select-cronjob.png)
+[![Select CronJob item](images/select-cronjob.png)](images/select-cronjob.png)
 7. Once the cronjob component appears on the canvas, click on it to open the toolbar and begin configuration.
-[![CronJob Toolbar](/kanvas/tutorials/images/toolbar-cronjob.png)](/kanvas/tutorials/images/toolbar-cronjob.png)
+[![CronJob Toolbar](images/toolbar-cronjob.png)](images/toolbar-cronjob.png)
 8. Fill out the details for the CronJob i.e Name field: "backup-cronjob". Under **Spec**, enter the specifications, i.e schedule: "0 * * * *" to run every hour.
-[![CronJob Toolbar](/kanvas/tutorials/images/tool-bar.png)](/kanvas/tutorials/images/tool-bar.png)
+[![CronJob Toolbar](images/tool-bar.png)](images/tool-bar.png)
 9. Locate the **Save As** icon in the top right, once the pop up modal opens, give your design a name, then click save.
-[![Save CronJob](/kanvas/tutorials/images/save.png)](/kanvas/tutorials/images/save.png)
+[![Save CronJob](images/save.png)](images/save.png)
 
 10. Thereafter click on the **Action** drop down menu also located in the top right and click on the **Deploy** option.
-[![Deploy CronJob](/kanvas/tutorials/images/deploy.png)](/kanvas/tutorials/images/deploy.png)
+[![Deploy CronJob](images/deploy.png)](images/deploy.png)
 11. In the pop-up window, review and correct any errors as necessary. Then, click the deploy button.
-[![Deploy CronJob](/kanvas/tutorials/images/deploy-app.png)](/kanvas/tutorials/images/deploy-app.png)
+[![Deploy CronJob](images/deploy-app.png)](images/deploy-app.png)
 12. You'll receive a confirmation message indicating that your app has been successfully deployed.
 
 #### 4. **Verifying CronJob Execution:**
@@ -102,7 +102,7 @@ To view the resources created for the CronJob, we will utilize the Visualize tab
    3. Click on the filter icon.
    4. Choose appropriate filters; for this lab, select the kind item that was set earlier during the CronJob creation, i.e., 'CronJob'.
    5. Click the filter icon again to close. This action should display a filtered view with only your resources, similar to the screenshot below:
-   [![Vizualize CronJob](/kanvas/tutorials/images/view.png)](/kanvas/tutorials/images/view.png)
+   [![Vizualize CronJob](images/view.png)](images/view.png)
 
 
 <!-- 
@@ -120,17 +120,17 @@ Show user how to use Views and filters in Kanvas Visualizer.
         Choose the design that contains the CronJob you want to scale from the list of existing designs.
    3. Locate the CronJob Component:
         Within the design canvas, identify the representation of the CronJob you wish to scale. It should be labeled as "CronJob" or have a specific icon associated with CronJobs.
-        [![Vizualize CronJob](/kanvas/tutorials/images/design-cronjob.png)](/kanvas/tutorials/images/design-cronjob.png)
+        [![Vizualize CronJob](images/design-cronjob.png)](images/design-cronjob.png)
    4.  Select the CronJob Component:
         Click on the CronJob component to open the toolbar..
    5. Continue to configure your cronjob with your preffered specifications that match your desired scaling options.
    6. Adjust the Number of Replicas or Parallelism:
         Within the toolbar, locate the field related to the number of replicas or parallelism for the CronJob. Adjust this value to scale the CronJob up or down according to your requirements.
-        [![Vizualize CronJob](/kanvas/tutorials/images/scale.png)](/kanvas/tutorials/images/scale.png)
+        [![Vizualize CronJob](images/scale.png)](images/scale.png)
 
    7.  Save Changes:
         After verifying the adjustments, save the changes made to the CronJob settings within the Kanvas Designer interface to ensure they are retained for future reference.
-        [![Save CronJob](/kanvas/tutorials/images/save.png)](/kanvas/tutorials/images/save.png)
+        [![Save CronJob](images/save.png)](images/save.png)
 <!-- 
 
 Show user how to use Designs and components in Kanvas Designer.
@@ -146,10 +146,10 @@ Use Meshery Playground to visualize the changes and observe the impact on the sc
     Within the design canvas, find the representation of the CronJob you wish to delete. It should be labeled as "CronJob" or have a specific icon associated with CronJobs.
 2. Select the CronJob Component:
     Click on the CronJob component to open the tooltip. This action will enable access to the delete icon. Click to delete the CronJob.
-    [![Save CronJob](/kanvas/tutorials/images/delete.png)](/kanvas/tutorials/images/delete.png)
+    [![Save CronJob](images/delete.png)](images/delete.png)
 3. Save Changes:
     After deleting the CronJob, save the changes made within the Kanvas Designer interface to reflect the cleanup.
-    [![Save CronJob](/kanvas/tutorials/images/save-app.png)](/kanvas/tutorials/images/save-app.png)
+    [![Save CronJob](images/save-app.png)](images/save-app.png)
 <!-- 
 
 Show user how to use Designs and components in Kanvas Designer.
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-13.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-13.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-13.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-13.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-18.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-18.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-18.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-18.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-42.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-42.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-42.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-42.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-56.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-56.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-56.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-56.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-57.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-57.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-57.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_00-57.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-00.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-00.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-00.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-00.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-19.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-19.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-19.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-19.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-25.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-25.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-25.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-25.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-27.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-27.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-27.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-27.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-29.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-29.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-29.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_01-29.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-03.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-03.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-03.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-03.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-19.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-19.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-19.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-19.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-25.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-25.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-25.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-25.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-26.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-26.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-26.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-16_18-26.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-17_20-01.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-17_20-01.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-17_20-01.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/images/kubernetes-configmaps-secrets/2024-04-17_20-01.png
diff --git a/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets.md b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/index.md
similarity index 79%
rename from content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets.md
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/index.md
index 6b368d99b11..4cfc634ed3d 100644
--- a/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets.md
+++ b/content/en/kanvas/tutorials/kubernetes/kubernetes-configmaps-secrets/index.md
@@ -13,7 +13,7 @@ aliases:
 
 In this tutorial, we will work with Kubernetes ConfigMaps and Secrets. _ConfigMaps_ are used to manage configuration data, while _Secrets_ are used for sensitive information such as passwords. Using Meshery Playground, an interactive live cluster environment, we'll perform hands-on exercises to gain practical knowledge into working with these Kubernetes objects.
 
-> **_NOTE:_** If this is your fist time working with Meshery Playground start with the [Kubernetes Pods with Meshery](/kanvas/tutorials/images/kubernetes-pods.md).
+> **_NOTE:_** If this is your fist time working with Meshery Playground start with the [Kubernetes Pods with Meshery]({{< ref "kanvas/tutorials/kubernetes/kubernetes-pods/index.md" >}}).
 
 ## Prerequisites
 
@@ -45,7 +45,7 @@ For this tutorial we will start with an existing design and later add _ConfigMap
 
 Select the **Catalog** tab and search for the word _'tutorial'_ (1). Click on the **[Tutorial] Simple MySQL Pod** (2) design and when prompted click **Clone** (3).
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-17_20-01.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-17_20-01.png)
 
 Label the pod with a unique key-value pair for easier filtering later. For example, _user:johndoe_. Use the same key-value pair fot labelling all the other resources. The tutorial uses _environment:tutorial_, do not use the same.
 
@@ -54,19 +54,19 @@ Label the pod with a unique key-value pair for easier filtering later. For examp
 
 Click Kubernetes from the dock and select Config Map from the list. This will put the ConfigMap component on the canvas.  
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-03.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_18-03.png)
 
 Click the _ConfigMap_ component to load the configuration window.
 
  1. Change the **Name** if required. (Using a unique name helps with easier identification later)
  2. Click **+** next to Data and set the ConfigMap data as a key value pair. In this example, the _Key_ is **CREATEDB** and the _Value_ is **myDB**.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-13.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_00-13.png)
 
  3. Click on the **label**.
  4. Set a label for easier filtering later during Visualization.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-18.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_00-18.png)
 
  5. Click outside the window to close it. 
 
@@ -79,7 +79,7 @@ Make a note of the ConfigMap component _name_ and _key_ for use later.
 
 Click Kubernetes from the dock and select Secret from the list. This will put the Secret component on the canvas.  
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-19.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_18-19.png)
 
 Click on the _Secret_ component to load the configuration window.
 
@@ -87,13 +87,13 @@ Click on the _Secret_ component to load the configuration window.
  2. Set _Type_ as **Opaque**.
  3. Click **+** next to _Data_ and add the secret as a key value pair. For this tutorial, the _Key_ is **SUPERSECRETPASSWORD** and the _Value_ is **c3Ryb25ncGFzc3dvcmQ=**.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-25.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_18-25.png)
 
  4. Click **Labels**.
  5. Set the same label as used earlier in the ConfigMap.
  6. Click outside the window to close it.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_18-26.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_18-26.png)
 
 ### Configure the Pod to use the ConfigMap and Secret
 
@@ -101,22 +101,22 @@ Click on the _Pod_ component to load its configuration window. We will set the S
 
  1. Scroll down to _Container_ and expand _Containers-0_.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-42.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_00-42.png)
 
  2. Scroll down to _Env_. An existing environment variable for the MySQL root password is already set. We will modify this to retrieve the password from the Secret.
  3. Expand _Env-0_ and delete the contents of _Value_.
  4. Expand _Value From_, expand _Secret Key Ref_ and set the _Key_ to the name of the key in the Secret and the _Name_ to the name of the Secret which in this example is **SUPERSECRETPASSWORD** and **mysql-secret-eb**.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-56.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_00-56.png)
 
  5. Next, click **+** next to Env to add a second environment variable. 
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_00-57.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_00-57.png)
 
  6. Expand _Env-1_ and set _Name_ to **MYSQL_DATABASE**.
  7. Expand _Value From_, expand _Secret Key Ref_ and set the _Key_ to the name of the key in the ConfigMap and the _Name_ to the name of the ConfigMap which in this example is **CREATEDB** and **mysql-config-map-by**.
 
-    ![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-00.png)
+    ![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_01-00.png)
 
 
 ### Validate and Deploy the Design
@@ -129,23 +129,23 @@ Move to the Visualize tab.
 
 Filter to show the resources pod, configmap and secret and use the lables set earlier to display only your resources. In this example, that is _environment:tutorials_.
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-19.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_01-19.png)
 
 Select the Pod (1) and then choose Actions (2) to the right. Click Open Interactive Terminal (3) to open the terminal to the container.
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-25.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_01-25.png)
 
 Run the following command in the terminal to verify that you are able to use the MySQL root password set as secret to login to MySQL. When prompted enter the root password (in plain text), i.e. _strongpassword_ for this tutorial.
 
 `mysql -uroot -p` 
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-27.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_01-27.png)
 
 Run the following MySQL command to verify that the database set as a ConfigMap was indeed created.
 
 `show databases;`
 
-![Configure the ConfigMap](/kanvas/tutorials/images/kubernetes-configmaps-secrets/2024-04-16_01-29.png)
+![Configure the ConfigMap](images/kubernetes-configmaps-secrets/2024-04-16_01-29.png)
 
 ### Deleting the resources
 
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_16-59.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_16-59.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_16-59.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_16-59.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-03.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-03.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-03.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-03.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-16.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-16.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-16.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-16.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-20.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-20.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-20.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-20.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-51.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-51.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-51.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-51.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-55.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-55.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-55.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_17-55.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-00.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-00.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-00.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-00.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-03.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-03.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-03.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-03.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-08.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-08.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-08.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-08.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-09.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-09.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-09.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-09.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-21.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-21.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-21.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-21.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-23.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-23.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-23.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-23.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-26.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-26.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-26.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-26.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-27.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-27.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-27.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-27.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-32.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-32.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-32.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_18-32.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-20.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_22-20.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-20.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_22-20.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-22.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_22-22.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-22.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-27_22-22.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-03.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-28_15-03.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-03.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-28_15-03.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-10.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-28_15-10.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-10.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/images/kubernetes-deployments/2025-02-28_15-10.png
diff --git a/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments.md b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/index.md
similarity index 78%
rename from content/en/kanvas/tutorials/kubernetes/kubernetes-deployments.md
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/index.md
index 12472fa11d8..20bd6ffa10d 100644
--- a/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments.md
+++ b/content/en/kanvas/tutorials/kubernetes/kubernetes-deployments/index.md
@@ -13,7 +13,7 @@ aliases:
 
 In this tutorial, we'll learn about Kubernetes **Deployments**. Using Meshery Playground, an interactive live environment, we'll perform hands-on exercises to gain practical experience in deploying, managing, and understanding a Kubernetes _Deployment_ without writing any YAML.
 
-> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](/kanvas/tutorials/kubernetes-pods) tutorial first.
+> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground]({{< ref "kanvas/tutorials/kubernetes/kubernetes-pods/index.md" >}}) tutorial first.
 
 ### Prerequisites
 
@@ -35,63 +35,63 @@ Learn how to create, manage, and explore _Kubernetes Deployments_ within the con
 - Log in to the [Meshery Playground](https://playground.meshery.io) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required).
 - Click **Kanvas** from the left menu to navigate to the _Kanvas_ design page.
 
-  ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_16-59.png)
+  ![](images/kubernetes-deployments/2025-02-27_16-59.png)
 
 > **_NOTE:_** Kanvas is still in beta.
 
 #### Create a Deployment
 
 1. In the _Kanvas Design_ page, start by renaming the design to a name of your choice for easier identification later.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-03.png)
+    ![](images/kubernetes-deployments/2025-02-27_17-03.png)
 2. From the floating dock below, click the **Kubernetes** icon and then click **Deployment** from the list. This will create the _Deployment_ component on the design canvas. 
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-16.png)
+    ![](images/kubernetes-deployments/2025-02-27_17-16.png)
 3. Click once to select the _Deployment_ component and choose **Configure**.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-20.png)
+    ![](images/kubernetes-deployments/2025-02-27_17-20.png)
 4. Change the **Name** of the deployment and the **Namespace** if required. For this demonstration, we will leave them as they are and deploy this to the _default_ namespace.
 5. A deployment consists of replicas. We must set a value for **Replicas**. If nothing is set, the default is 1. For this example we will set it to **2**. We must also set the _Selector_ property. To do this, expand **Selector** and click **MatchLabels**. Set a _matchLabel_ pair. Here we have set `tutorial:deployment`.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-51.png)
+    ![](images/kubernetes-deployments/2025-02-27_17-51.png)
 6. Next, expand **Templates** and open **Metadata** configuration modal. On the _metadata_ modal, click **+** next to **Labels** and set the label to the same key-value pair as in the previous step. Here it is `tutorial:deployment`.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-21.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-21.png)
 7. While still under **Template** and click **Spec** to load the _spec_ configuration modal. Then scroll down and click **+** next to **Containers**. This will create a container.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_17-55.png)
+    ![](images/kubernetes-deployments/2025-02-27_17-55.png)
 8. Expand **Containers-1** and fill in the mandatory details such as _Image_ and _Name_. For this example we set the **Image** to `meshery/meshery-milestone:latest` and **Name** to `meshery-milestone`. 
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-00.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-00.png)
 9. Click on an empty area in the canvas to close the configuration modals. This completes designing the _Deployment_ and should looks similar to the screenshot below.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-32.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-32.png)
 
 #### Validating and deploying the Deployment
 
 In the next set of steps we will validate the design and deploying it.
 
 1. To validate the design, click **Actions** and then **Validate** from the top menu.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-03.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-03.png)
 
     This should show a pop-up with details such as the number of components, annotations and validation errors (if any). Ensure there are no errors before deploying. If there are errors, fix them before moving forward.
 
 2. To deploy, click **Actions** and then **Deploy** to load the deployment workflow. The first step is design validation which should already be marked as done. Click **Next**.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-08.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-08.png)
 
 3. In the following step, select the _Deployment Targets_ where you want to deploy this. When done click **Next**.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-09.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-09.png)
 
 4. In the third step, a _Dry Run_ is performed. Fix any errors displayed here.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-23.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-23.png)
 
 5. Finally, click **Deploy** in the next step. You may choose to open the design in _Operate_ mode after this step to explore the resources by checking the **Open in Operator** checkbox.
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-26.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-26.png)
 
 6. Click **Finish** to close the workflow. 
-    ![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_18-27.png)
+    ![](images/kubernetes-deployments/2025-02-27_18-27.png)
 
 You should see a few alerts on the bottom right about the deployment.
 
 #### Viewing and Operating the Deployment
 
 To view and perform operations on the resources deployed, i.e. the _Deployment_ in this exmaple, we will use the **Operate** functionality of _Kanvas_. You can open the design in _Operate_ mode during the _Deploy_ workflow or later by click the **Operate** tab. It will load the deployed resources in _Operate_ view similar to the screenshot below.
-![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-03.png)
+![](images/kubernetes-deployments/2025-02-28_15-03.png)
 
 You can click on any of the resources to view various details and actions applicable to them. For example, click on the _Deployment_ i.e. `deployment-bl` in this case (shown with a green border in the image below), to view deployment details such as _Age_, _Kind_, _Pods_, _Replicas_, _Namespace_ etc. 
-![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-28_15-10.png)
+![](images/kubernetes-deployments/2025-02-28_15-10.png)
 
 Take some time to explore other resources such as _Pod_, _Container_ etc.
 
@@ -99,10 +99,10 @@ Take some time to explore other resources such as _Pod_, _Container_ etc.
 #### Deleting the Deployment
 
 To delete the deployment, click **Actions** and select **Undeploy**.
-![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-20.png)
+![](images/kubernetes-deployments/2025-02-27_22-20.png)
 
 Follow the _Undeploy_ workflow (similar to the _Deploy_ workflow) and click **Undeploy** in the Finalize Deployment step.
-![](/kanvas/tutorials/images/kubernetes-deployments/2025-02-27_22-22.png)
+![](images/kubernetes-deployments/2025-02-27_22-22.png)
 
 ### Conclusion
 
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-20.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-20.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-20.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-20.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-32.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-32.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-32.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-32.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-35.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-35.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-35.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-22_18-35.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-54.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-54.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54_1.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-54_1.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54_1.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-54_1.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-57.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-57.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-57.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_11-57.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-52.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-52.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-52.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-52.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-54.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-54.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-54.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-54.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-56.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-56.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-56.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-23_19-56.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_17-38.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_17-38.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_17-38.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_17-38.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-18.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-18.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-18.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-18.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-22.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-22.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-22.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-22.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-25.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-25.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-25.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-25_18-25.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-05.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-05.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-05.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-05.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-10.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-10.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-10.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-10.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-11.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-11.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-11.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-11.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-33.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-33.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-33.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-33.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-35.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-35.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-35.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-35.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-37.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-37.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-37.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-37.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-45.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-45.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-45.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-45.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-48.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-48.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-48.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-48.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-53.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-53.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-53.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-28_11-53.png
diff --git a/content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-29_20-37.png b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-29_20-37.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/kubernetes-pods/2024-02-29_20-37.png
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/images/kubernetes-pods/2024-02-29_20-37.png
diff --git a/content/en/kanvas/tutorials/kubernetes/kubernetes-pods.md b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/index.md
similarity index 81%
rename from content/en/kanvas/tutorials/kubernetes/kubernetes-pods.md
rename to content/en/kanvas/tutorials/kubernetes/kubernetes-pods/index.md
index 4d008e3334f..9c0ed1a957d 100644
--- a/content/en/kanvas/tutorials/kubernetes/kubernetes-pods.md
+++ b/content/en/kanvas/tutorials/kubernetes/kubernetes-pods/index.md
@@ -42,29 +42,29 @@ Learn how to create, manage, and explore _Kubernetes Pods and Services_ within t
 1. In the Kanvas screen, rename the design from _Untitled Design_ to a name of choice. This helps in identifying the design later easily.
 2. Click **Components** tab.
 3. Search for **Pod** in the list of components.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-20.png)
+    ![](images/kubernetes-pods/2024-02-22_18-20.png)
 4. Scroll down, _select and drag_ the **Pod** component from the search results to the design canvas on the right.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-32.png)
+    ![](images/kubernetes-pods/2024-02-22_18-32.png)
 5. You should now have a pod in the design canvas for further configuration. It has a default name assigned to it.
     Click the pod component to load the configuration modal.
 6. Rename the pod, if necessary.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-22_18-35.png)
+    ![](images/kubernetes-pods/2024-02-22_18-35.png)
 
 #### Add a container to the Pod
 
 The pod at this stage does not have a container, so we will add one. This is similar to defining the containers in the _spec:_ section of a YAML file. For this hands-on we will make some basic and necessary configurations only.
 
 7. Scroll down within the Pod configuration modal to the Containers section. Click **+** to add a container.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54.png)
+    ![](images/kubernetes-pods/2024-02-23_11-54.png)
 8. Expand **Containers-0**.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-54_1.png)
+    ![](images/kubernetes-pods/2024-02-23_11-54_1.png)
 9. Next, fill out some of the required container specifications. Start by entering the container image, we will use _nginx:latest_ for this exercise.
 10. Give the container a name.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_11-57.png)
+    ![](images/kubernetes-pods/2024-02-23_11-57.png)
 11. Additionally, we will also give it a label. This will server many advantages later in this exercise. To do so, click the label icon on the modal.
 12. Click **+** next to _Labels_.
 13. Set any label of choice. Preferably, give a unique label since the playground is a shared environment.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-18.png)
+    ![](images/kubernetes-pods/2024-02-25_18-18.png)
 14. Click outside to close the modal.
 
 #### Validating and Deploying the Pod
@@ -72,13 +72,13 @@ The pod at this stage does not have a container, so we will add one. This is sim
 The next step in this process is to validate the design, after which we can deploy it.
 
 To do this, click **Validate** on the top.
-![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-52.png)
+![](images/kubernetes-pods/2024-02-23_19-52.png)
 
 This should show a pop-up with details such as the number of components, annotations and errors (if any).
-![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-54.png)
+![](images/kubernetes-pods/2024-02-23_19-54.png)
 
 Ensure there are no errors before deploying. To deploy, click the **Deploy** (1) tab in the pop-up modal and then click **Deploy** (2) again.
-![](/kanvas/tutorials/images/kubernetes-pods/2024-02-23_19-56.png)
+![](images/kubernetes-pods/2024-02-23_19-56.png)
 
 You should see a few alerts on the bottom right about the deployment.
 
@@ -90,10 +90,10 @@ To view the resources deployed we will use the **Visualize** section of the _Kan
 2.  Give the view a name (rename).
 3.  Click the filter icon.
 4.  Choose appropriate filters, for this hands-on choose the label that was set earlier during the pod creation. This helps in showing limited resources in the view.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-22.png)
+    ![](images/kubernetes-pods/2024-02-25_18-22.png)
 
 Click the filter icon again to close. This should show a filtered view with only your resources something similar to the screenshot below:
-![](/kanvas/tutorials/images/kubernetes-pods/2024-02-25_18-25.png)
+![](images/kubernetes-pods/2024-02-25_18-25.png)
 
 #### Pod state and information
 
@@ -105,7 +105,7 @@ The details tab shows the following:
 - Image details of the container in the pod like image tag and name.
 - It also shows the number of restarts and uptime.
 
-![](/kanvas/tutorials/images/kubernetes-pods/2024-02-25_17-38.png)
+![](images/kubernetes-pods/2024-02-25_17-38.png)
 
 #### Connecting to the Pods / containers
 
@@ -114,11 +114,11 @@ Meshery Playground provides terminal capabilities to connect to the container(s)
 1.  Select the **Pod** (or container). If you have multiple containers in a pod, select a container.
 2.  Select the **Actions** tab to the right.
 3.  Click **Open Interactive Terminal**.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-05.png)
+    ![](images/kubernetes-pods/2024-02-28_11-05.png)
     This displays the terminal on the screen.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-10.png)
+    ![](images/kubernetes-pods/2024-02-28_11-10.png)
 4.  To view streaming logs, click **Stream Container Logs** to the right and an additional logs view is added to the terminal window.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-11.png)
+    ![](images/kubernetes-pods/2024-02-28_11-11.png)
 
 #### Exposing a Pod with a Service
 
@@ -127,22 +127,22 @@ Meshery Playground provides terminal capabilities to connect to the container(s)
 1.  Go back to the _Design_ view.
 2.  From **Components** search for _service_ and the drag the service component to the design canvas.
 3.  Click the _service_ component to load the configuration modal.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-33.png)
+    ![](images/kubernetes-pods/2024-02-28_11-33.png)
 4.  Rename it if required.
 5.  Change _Type_ to **NodePort** for this tutorial.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-35.png)
+    ![](images/kubernetes-pods/2024-02-28_11-35.png)
 6.  Click **+** to add a Port.
 7.  Expand the **Ports-0** service port to make changes.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-37.png)
+    ![](images/kubernetes-pods/2024-02-28_11-37.png)
 8.  For this tutorial we set the **Target Port** value to 80.
 9.  We also set the **Port** value to 80.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-45.png)
+    ![](images/kubernetes-pods/2024-02-28_11-45.png)
 10. Click **+** next to Selector and add the key value pair **app:9870**. This is the same pair that is used as label in the Pod.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-48.png)
+    ![](images/kubernetes-pods/2024-02-28_11-48.png)
 11. Finally label this service too, with the same key value pair. This also helps in filtering resources specific to us in the Visualize screen.
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-28_11-53.png)
+    ![](images/kubernetes-pods/2024-02-28_11-53.png)
 12. Move your mouse over the service component until you see the green dots on all four sides. Move your mouse over one of the green dots to reveal an arrow, then click the arrow. Select **Network** option, and then move your mouse to the pod to create the _relationship_. It should look similar to the screenshot below:
-    ![](/kanvas/tutorials/images/kubernetes-pods/2024-02-29_20-37.png)
+    ![](images/kubernetes-pods/2024-02-29_20-37.png)
 13. Validate the design. Click **Validate** from the top menu to do so.
 
 #### Updating the deployment
diff --git a/content/en/kanvas/tutorials/kubernetes/kubernetes-request-flow.md b/content/en/kanvas/tutorials/kubernetes/kubernetes-request-flow.md
index 9186295fa6a..8361ad5d0d6 100644
--- a/content/en/kanvas/tutorials/kubernetes/kubernetes-request-flow.md
+++ b/content/en/kanvas/tutorials/kubernetes/kubernetes-request-flow.md
@@ -40,7 +40,7 @@ This is a common real-world pattern seen in microservices architectures and back
 ### Accessing the Visual Guide Design
 
 - Start by opening the prebuilt design from here:
-  [![Kubernetes Flow Diagram](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)](https://kanvas.new/extension/meshmap?mode=design&design=629b6039-ebb3-4bd8-9b1b-19184fade225)
+  [![Kubernetes Flow Diagram](../../images/kubernetes-request-flow/k8s-request-flow.png)](https://kanvas.new/extension/meshmap?mode=design&design=629b6039-ebb3-4bd8-9b1b-19184fade225)
 
 >  Click the image above to open the interactive design in Meshery Kanvas.
 
@@ -115,7 +115,7 @@ If we want to recreate this flow from scratch, we can drag and drop the same com
 
 ### Diagram Screenshot
 
-[![Kubernetes Flow Diagram](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)](/kanvas/tutorials/images/kubernetes-request-flow/k8s-request-flow.png)
+[![Kubernetes Flow Diagram](../../images/kubernetes-request-flow/k8s-request-flow.png)](../../images/kubernetes-request-flow/k8s-request-flow.png)
 
 > Note: You can design this yourself using the components in Meshery Kanvas.
 
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp1.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp1.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp1.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp1.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp10.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp10.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp10.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp10.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp11.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp11.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp11.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp11.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp12.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp12.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp12.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp12.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp13.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp13.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp13.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp13.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp14.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp14.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp14.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp14.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp15.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp15.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp15.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp15.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp16.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp16.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp16.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp16.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp17.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp17.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp17.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp17.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp18.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp18.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp18.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp18.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp19.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp19.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp19.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp19.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp2.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp2.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp2.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp2.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp20.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp20.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp20.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp20.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp21.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp21.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp21.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp21.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp22.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp22.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp22.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp22.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp23.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp23.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp23.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp23.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp3.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp3.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp3.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp3.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp4.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp4.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp4.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp4.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp5.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp5.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp5.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp5.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp6.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp6.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp6.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp6.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp7.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp7.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp7.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp7.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp8.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp8.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp8.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp8.png
diff --git a/content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp9.png b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp9.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp9.png
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/images/wordpress-mysql-persistentvolume/wp9.png
diff --git a/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume.md b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/index.md
similarity index 80%
rename from content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume.md
rename to content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/index.md
index 72ec9284f8b..8c9f5e1e687 100644
--- a/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume.md
+++ b/content/en/kanvas/tutorials/kubernetes/wordpress-mysql-persistentvolume/index.md
@@ -15,7 +15,7 @@ aliases:
 
 In this tutorial, we will learn how to deploy a **WordPress site and a MySQL database with Persistent Volumes** using Meshery Playground. Meshery Playground is an interactive and collaborative live cluster environment that simplifies the deployment process and enhances user experience by providing visual tools for managing Kubernetes resources.
 
-> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](/kanvas/tutorials/kubernetes-pods) tutorial first.
+> **NOTE:** If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground]({{< ref "kanvas/tutorials/kubernetes/kubernetes-pods/index.md" >}}) tutorial first.
 
 ### Prerequisites
 
@@ -59,23 +59,23 @@ These YAML files contain the Service definitions, Persistent Volume Claims, and
 
    - Select `Kubernetes Manifest` from the "Design Type" dropdown menu.
 
-        ![Import modal](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp1.png)
+        ![Import modal](images/wordpress-mysql-persistentvolume/wp1.png)
 
    - Choose `File Upload` for the upload method, and select the file you just downloaded.
 
    - Then, click on `Import`
 
-        ![Import mysql-deployment](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp2.png)
+        ![Import mysql-deployment](images/wordpress-mysql-persistentvolume/wp2.png)
 
 3. Under the "Designs" tab, you will see that we have successfully imported the `mysql-deployment` design.
 
    When you click on the names of the designs on the `Designs` tab, you can see the visual representations of the various Kubernetes resources and their relationships on the canvas.
 
-    ![Imported designs on canvas](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp3.png)
+    ![Imported designs on canvas](images/wordpress-mysql-persistentvolume/wp3.png)
 
 4. Now, follow the same steps to import the `wordpress-deployment` file.
 
-    ![wordpress-deployment](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp4.png)
+    ![wordpress-deployment](images/wordpress-mysql-persistentvolume/wp4.png)
 
 #### Merging the Designs
 
@@ -84,15 +84,15 @@ Next, we will combine the WordPress and MySQL designs into a single design file.
 To merge the MySQL deployment design with the WordPress deployment design:/
 1. Click and drag the `mysql-deployment` design from the left panel and drop it onto the design canvas of the `wordpress-deployment`.
 
-    ![drag and drop design](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp5.png)
+    ![drag and drop design](images/wordpress-mysql-persistentvolume/wp5.png)
 
 2. This action will open a merge modal asking if you want to merge the design, Click on `Merge`.
 
-    ![merge modal](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp6.png)
+    ![merge modal](images/wordpress-mysql-persistentvolume/wp6.png)
 
 3. Click on `Save As` and enter `wordpress-mysql-deployment` as the new file name.
 
-    ![save design](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp7.png)
+    ![save design](images/wordpress-mysql-persistentvolume/wp7.png)
 
 #### Create and Configure Secret for MySQL Database
 
@@ -111,7 +111,7 @@ Before you proceed, choose a password and convert it into base64 format. You can
 
 1. Click on the Kubernetes icon on the dock, search for `secret`, and click on it or drag it to the canvas.
 
-    ![Create secret component](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp8.png)
+    ![Create secret component](images/wordpress-mysql-persistentvolume/wp8.png)
 
 2. Click on the Secret component to open the configuration window.
 
@@ -119,7 +119,7 @@ Before you proceed, choose a password and convert it into base64 format. You can
     - Set the _Type_ as `Opaque`.
     - Click **+** next to Data and add the secret as a key value pair `password:cGFzc3dvcmQ=`
 
-        ![Configure secret](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp9.png)
+        ![Configure secret](images/wordpress-mysql-persistentvolume/wp9.png)
 
 3. Click outside the window to close the configuration tab.
 
@@ -133,7 +133,7 @@ Please note that using `hostPath` for Persistent Volumes is generally not recomm
 
 1. Click on the Kubernetes icon on the dock, search for `Persistent Volume`, and select it. We will create two PV's.
 
-    ![Create persistent volume](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp10.png)
+    ![Create persistent volume](images/wordpress-mysql-persistentvolume/wp10.png)
 
 2. Click on the wordpress PV to open the configuration window.
 
@@ -141,15 +141,15 @@ Please note that using `hostPath` for Persistent Volumes is generally not recomm
     - Set the "StorageClassName" as `manual`
     - Click **+** next to "AccessMode" and enter `ReadWriteOnce`
 
-        ![Configure persistent volume](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp11.png)
+        ![Configure persistent volume](images/wordpress-mysql-persistentvolume/wp11.png)
 
     - Scroll down to "Capacity" and enter in the key pair `storage:20Gi`
 
-        ![Persistent volume capacity](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp12.png)
+        ![Persistent volume capacity](images/wordpress-mysql-persistentvolume/wp12.png)
 
     - Scroll down to "Hostpath" and input `mnt/data/wp-pv` for the _path_ and `DirectoryOrCreate` for the _type_.
 
-        ![Persistent volume hostpath](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp13.png)
+        ![Persistent volume hostpath](images/wordpress-mysql-persistentvolume/wp13.png)
 
 3. Repeat similar steps for the Mysql Persistent Volume
 
@@ -173,7 +173,7 @@ To make it easier to filter and manage our resources during visualization, let's
 3. Add the label `dev:tutorial`.
 4. Do this for **all** the resources on the canvas.
 
-    ![Add label](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp14.png)
+    ![Add label](images/wordpress-mysql-persistentvolume/wp14.png)
 
 5. Now click on `Save As` and save the design.
 
@@ -183,31 +183,31 @@ The _**Group Components**_ icon on the dock below allows you to group resources
 
 This functionality aids in visualizing the relationships between various resources, making it easier to manage them, troubleshoot issues, and understand the overall cluster architecture.
 
-![Group Components](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp21.png)
+![Group Components](images/wordpress-mysql-persistentvolume/wp21.png)
 
 #### Deploy the Resources
 
 1. Click `Actions` in the top right corner and click on `Deploy`.
 
-    ![Actions dropdown menu](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp15.png)
+    ![Actions dropdown menu](images/wordpress-mysql-persistentvolume/wp15.png)
 
 2. The design will be validated to make sure there are no errors.
 
-    ![Validate design](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp16.png)
+    ![Validate design](images/wordpress-mysql-persistentvolume/wp16.png)
 
 3. Choose the Kubernetes cluster you want to deploy to.
 
-    ![Choose deployment Environment](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp17.png)
+    ![Choose deployment Environment](images/wordpress-mysql-persistentvolume/wp17.png)
 
     **_Note_**: The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full control over these clusters but you can also have the option to add your own Kubernetes cluster to the Playground.
 
 4. Finally click `Deploy` to deploy the application to the cluster.
 
-    ![Deploy resources](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp18.png)
+    ![Deploy resources](images/wordpress-mysql-persistentvolume/wp18.png)
 
 5. To check the status of your deployment, click on the notification icon on the top right corner. You can click on `Open In visualizer` to navigate to the Visualize section or follow the steps below.
 
-    ![Deploy resources](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp22.png)
+    ![Deploy resources](images/wordpress-mysql-persistentvolume/wp22.png)
 
 
 #### Visualizing the Deployed Resources
@@ -224,7 +224,7 @@ To view the resources deployed we will use the Visualize section of the _Kanvas_
 
     After selecting your filters, you should see a view displaying only your relevant resources, as shown in the image below.
 
-    ![Filter resources](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp19.png)
+    ![Filter resources](images/wordpress-mysql-persistentvolume/wp19.png)
 
 #### Resource Details
 
@@ -232,13 +232,13 @@ You can click on any resource to view more details about it in the "Details" sec
 
 **Deployment**
 
-![Get more details about deployment](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp23.png)
+![Get more details about deployment](images/wordpress-mysql-persistentvolume/wp23.png)
 
 **Service**
 
 The Service details only display the cluster IP for now. So there is no means for us to access the application externally.
 
-![Get more details about service](/kanvas/tutorials/images/wordpress-mysql-persistentvolume/wp20.png)
+![Get more details about service](images/wordpress-mysql-persistentvolume/wp20.png)
 
 #### Deleting Resources
 
diff --git a/content/en/kanvas/tutorials/stellar-saas-platform.md b/content/en/kanvas/tutorials/stellar-saas-platform.md
index 77cac174522..142f326b0ec 100644
--- a/content/en/kanvas/tutorials/stellar-saas-platform.md
+++ b/content/en/kanvas/tutorials/stellar-saas-platform.md
@@ -73,7 +73,7 @@ Marcus opens the **Share** panel on `stellar-saas-platform`. He types Five's nam
 Marcus clicks **Share**. Five receives an in-app notification in his Orbital Labs account.
 
 {{< alert type="info" title="Cross-Org Access" >}}
-Cross-organization design sharing requires that both organizations exist under a shared Provider (Constellation Cloud in this scenario). The Provider Admin (Dr. Aiko Sato) must have configured cross-org permissions before sharing can occur. See [Roles and Keychains](/cloud/concepts/identity-and-security/roles/) for the permission model.
+Cross-organization design sharing requires that both organizations exist under a shared Provider (Constellation Cloud in this scenario). The Provider Admin (Dr. Aiko Sato) must have configured cross-org permissions before sharing can occur. See [Roles and Keychains]({{< ref "cloud/concepts/identity-and-security/roles/_index.md" >}}) for the permission model.
 {{< /alert >}}
 
 ### Step 6: Five reviews the design from Orbital Labs
@@ -101,5 +101,5 @@ Marcus resolves Five's WAF comment and replies: "Added Application Gateway (WAF
 The `stellar-saas-platform` design now reflects the correct architecture, the review loop is documented in the comment history, and the cross-org collaboration happened entirely within Kanvas — no design files exported, no screenshots emailed.
 
 {{< alert type="info" >}}
-Meet Marcus, Five, Dr. Aiko, and the rest of the cast at [Meet Five and the Cast](/cloud/getting-started/meet-five).
+Meet Marcus, Five, Dr. Aiko, and the rest of the cast at [Meet Five and the Cast]({{< ref "cloud/getting-started/meet-five/_index.md" >}}).
 {{< /alert >}}
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/add-custom-html.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/add-custom-html.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/add-embedded-html.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/add-embedded-html.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/copy-js.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/copy-js.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/copy-script.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/copy-script.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/embedded-design-preview.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/embedded-design-preview.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/embeddesign-HTML.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/embeddesign-HTML.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/expand-designs-kanvas.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/expand-designs-kanvas.png
diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/quickaction-exportdesign.png
similarity index 100%
rename from content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/images/embedding-design-in-wordpress/quickaction-exportdesign.png
diff --git a/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/index.md
similarity index 73%
rename from content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md
rename to content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/index.md
index 3d8485f4402..3b9cf7aa64f 100644
--- a/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md
+++ b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress/index.md
@@ -24,21 +24,21 @@ This tutorial assumes that you have created a design or have an existing one. If
 
 1. Expand the **Actions** menu on the left and select export.
    
-   ![Expand Designs](/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png)
+   ![Expand Designs](images/embedding-design-in-wordpress/expand-designs-kanvas.png)
 
 2. Click the download icon next to **Embed Design**
    
-   ![Export Design](/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png)
+   ![Export Design](images/embedding-design-in-wordpress/quickaction-exportdesign.png)
 
 3. This will show the `js` file to download and the HTML code snippet to copy.
    
-   ![Embed Design](/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png)
+   ![Embed Design](images/embedding-design-in-wordpress/embeddesign-HTML.png)
 
 4. Now, create a `js` folder in the path of your current WordPress theme
 
 5. Next, copy the downloaded `js` file into this folder.
    
-   ![Copy JS](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png)
+   ![Copy JS](images/embedding-design-in-wordpress/copy-js.png)
 
 6. To the following script, replace `design.js` with the name of the `js` file which you just downloaded. Once this is done,  go to the `functions.php` file in your current WordPress theme and copy the script.
 
@@ -55,18 +55,18 @@ This tutorial assumes that you have created a design or have an existing one. If
    add_action('wp_enqueue_scripts', 'kanvas_design_script');
    ```
 
-   ![Copy Script](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png)
+   ![Copy Script](images/embedding-design-in-wordpress/copy-script.png)
 
 7. Open the WordPress post where you want to embed the design in edit mode and add a _Custom HTML_ block.
 
-   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png)
+   ![Copy URL](images/embedding-design-in-wordpress/add-custom-html.png)
 
 8. Paste the div element from the Embed Code copied from Kanvas. 
 
-   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png)
+   ![Copy URL](images/embedding-design-in-wordpress/add-embedded-html.png)
 
 9. Click **Preview** to validate that the design is rendered.
    
-   ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png)
+   ![Copy URL](images/embedding-design-in-wordpress/embedded-design-preview.png)
 
 10. Publish the WordPress post and share.
\ No newline at end of file
diff --git a/content/en/videos/_index.md b/content/en/videos/_index.md
index 10411aab7ea..cbc4271eaa5 100644
--- a/content/en/videos/_index.md
+++ b/content/en/videos/_index.md
@@ -8,7 +8,7 @@ cascade:
     type: video
 weight: 2
 featured_video: true
-featured_image: /images/kanvas/layer5-kanvas-designer.webp
+featured_image: images/kanvas/layer5-kanvas-designer.webp
 layout: "video"
 videoId: 034nVaQUyME
 ---
diff --git a/content/en/videos/getting-started/basics/designer-overview.md b/content/en/videos/getting-started/basics/designer-overview.md
index 2e5d0024675..aff05508ecb 100644
--- a/content/en/videos/getting-started/basics/designer-overview.md
+++ b/content/en/videos/getting-started/basics/designer-overview.md
@@ -14,4 +14,4 @@ duration: "1:38"
 
 ### Related Docs
 
-- [Exploring Designer](/kanvas/designer/)
\ No newline at end of file
+- [Exploring Designer]({{< ref "kanvas/designer/_index.md" >}})
\ No newline at end of file
diff --git a/content/en/videos/getting-started/basics/operator-overview.md b/content/en/videos/getting-started/basics/operator-overview.md
index 6100cbb084d..75bd411f425 100644
--- a/content/en/videos/getting-started/basics/operator-overview.md
+++ b/content/en/videos/getting-started/basics/operator-overview.md
@@ -14,4 +14,4 @@ duration: "2:11"
 
 ### Related Docs
 
-- [Exploring Operator](/kanvas/operator/)
\ No newline at end of file
+- [Exploring Operator]({{< ref "kanvas/operator/_index.md" >}})
\ No newline at end of file
diff --git a/hugo.toml b/hugo.toml
index c09dc4bc362..31b9036ab86 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,6 +1,6 @@
 baseURL = "https://docs.layer5.io"
 title = "Layer5 Documentation"
-relativeURLs = true
+relativeURLs = false
 canonifyURLs = false
 
 # Language settings
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
new file mode 100644
index 00000000000..a1dba56b8b9
--- /dev/null
+++ b/layouts/partials/breadcrumb.html
@@ -0,0 +1,29 @@
+{{ $isSingle := true -}}
+{{ with .Parent -}}
+  {{ $isSingle = .IsHome -}}
+{{ end -}}
+<nav aria-label="breadcrumb" class="td-breadcrumbs
+    {{- if $isSingle }} td-breadcrumbs__single {{- end }}">
+  <ol class="breadcrumb">
+    {{- template "breadcrumbnav" (dict "p1" . "p2" .) }}
+  </ol>
+</nav>
+
+{{- define "breadcrumbnav" -}}
+  {{ if .p1.Parent -}}
+    {{ if not .p1.Parent.IsHome -}}
+      {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  -}}
+    {{ end -}}
+  {{ else if not .p1.IsHome -}}
+    {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  -}}
+  {{ end -}}
+  {{ $isActive := eq .p1 .p2 }}
+  <li class="breadcrumb-item{{ if $isActive }} active{{ end }}"
+      {{- if $isActive }} aria-current="page"{{ end }}>
+    {{ if $isActive -}}
+      {{ .p1.LinkTitle -}}
+    {{ else -}}
+      <a href="{{ .p1.RelPermalink }}">{{ .p1.LinkTitle }}</a>
+    {{- end -}}
+  </li>
+{{- end -}}
diff --git a/layouts/partials/favicon.html b/layouts/partials/favicon.html
index 5252ddc753e..a47714e5c3a 100644
--- a/layouts/partials/favicon.html
+++ b/layouts/partials/favicon.html
@@ -1,9 +1,9 @@
-<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
-<link rel="manifest" href="/favicons/site.webmanifest">
-<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg">
-<link rel="shortcut icon" href="/favicons/favicon.ico">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicons/apple-touch-icon.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicons/favicon-32x32.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicons/favicon-16x16.png" | relURL }}">
+<link rel="manifest" href="{{ "favicons/site.webmanifest" | relURL }}">
+<link rel="mask-icon" href="{{ "favicons/safari-pinned-tab.svg" | relURL }}">
+<link rel="shortcut icon" href="{{ "favicons/favicon.ico" | relURL }}">
 <meta name="msapplication-TileColor" content="#da532c">
-<meta name="msapplication-config" content="/favicons/browserconfig.xml">
-<meta name="theme-color" content="#ffffff">
\ No newline at end of file
+<meta name="msapplication-config" content="{{ "favicons/browserconfig.xml" | relURL }}">
+<meta name="theme-color" content="#ffffff">
diff --git a/layouts/partials/feature-info.html b/layouts/partials/feature-info.html
index c3784864132..b5f41ae239c 100644
--- a/layouts/partials/feature-info.html
+++ b/layouts/partials/feature-info.html
@@ -55,7 +55,7 @@
 <div class="matterinfo">
   <a href="https://layer5.io/pricing" class="tier-link" target="_blank">
   <div class="plan-support all-plans">
-    <img src="/images/subscription.svg" alt="Icon" class="support-icon adaptive-icon" data-modal="false">
+    <img src="{{ "images/subscription.svg" | relURL }}" alt="Icon" class="support-icon adaptive-icon" data-modal="false">
     Subscription:
       <span class="tier">{{ delimit $uniqueTiers ", " }}</span>
     </div>
@@ -63,4 +63,4 @@
 </div>
 {{ end }}
 {{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 596973488f5..e4a3001eae2 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -4,7 +4,7 @@
   <!----------------->
   <div class="row footer-top">
     <div class="col-lg-6">
-      <a href="/" aria-label="Home">
+      <a href="{{ "" | relURL }}" aria-label="Home">
         {{ $svg := resources.Get "icons/logo.svg" }}
         <img class="footer-logo" src="{{ $svg.Permalink }}" alt="Footer Logo Layer5" data-modal="false">
       </a>
diff --git a/layouts/partials/head-css.html b/layouts/partials/head-css.html
index b2d8a058879..436b6bdcf59 100644
--- a/layouts/partials/head-css.html
+++ b/layouts/partials/head-css.html
@@ -1,6 +1,6 @@
 {{ $scssMain := "scss/main.scss" -}}
 {{ $css := resources.Get $scssMain
-      | toCSS (dict "enableSourceMap" (not hugo.IsProduction)) -}}
+      | toCSS (dict "enableSourceMap" (not hugo.IsProduction) "targetPath" "css/main.css") -}}
 
 {{/* NOTE: we only apply `postCSS` in production or for RTL languages. This
 makes it snappier to develop in Chrome, but it may look sub-optimal in other
@@ -9,7 +9,7 @@
 {{ if eq .Site.Language.Direction "rtl" -}}
   {{ $css = $css
       | postCSS (dict "use" "autoprefixer rtlcss" "noMap" true)
-      | resources.Copy (replace $scssMain "." ".rtl.") -}}
+      | resources.Copy "css/main.rtl.css" -}}
 {{ else if hugo.IsProduction -}}
   {{ $css = $css | postCSS -}}
 {{ end -}}
diff --git a/layouts/partials/navbar-version-selector.html b/layouts/partials/navbar-version-selector.html
new file mode 100644
index 00000000000..9aae47697ec
--- /dev/null
+++ b/layouts/partials/navbar-version-selector.html
@@ -0,0 +1,18 @@
+<div class="dropdown">
+  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    {{- .Site.Params.version_menu -}}
+  </a>
+  <ul class="dropdown-menu">
+    {{ $path := "" -}}
+    {{ if .Site.Params.version_menu_pagelinks -}}
+      {{ $path = strings.TrimPrefix .Site.Home.RelPermalink .Page.RelPermalink -}}
+    {{ end -}}
+    {{ range .Site.Params.versions -}}
+      {{ $url := .url -}}
+      {{ if not (or (hasPrefix $url "http://") (hasPrefix $url "https://") (hasPrefix $url "//")) -}}
+        {{ $url = $url | relURL -}}
+      {{ end -}}
+      <li><a class="dropdown-item" href="{{ $url }}{{ $path }}">{{ .version }}</a></li>
+    {{ end -}}
+  </ul>
+</div>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index a7bdc93a78b..f814aff57ab 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -6,10 +6,10 @@
     class="td-navbar navbar-dark js-navbar-scroll td-navbar-cover navbar-bg-onscroll--fade"
   >
     <div class="container-fluid flex-column flex-md-row">
-      <a class="navbar-brand" href="/" aria-label="Home">
+      <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}" aria-label="Home">
         <span class="navbar-brand__logo navbar-logo">
           {{ $svg := resources.Get "icons/logo.svg" }}
-          <img class="footer-logo" src="/images/logo.svg" alt="logo" data-modal="false" />
+          <img class="footer-logo" src="{{ "images/logo.svg" | relURL }}" alt="logo" data-modal="false" />
         </span>
         <span class="navbar-brand__name"></span
       ></a>
@@ -25,10 +25,10 @@
                     </li> -->
                     <div class="d-flex">
                       <li class="nav-item">
-                        <a id="cloud" class="nav-link" href="/cloud/"> Cloud</a>
+                        <a id="cloud" class="nav-link" href="{{ "cloud/" | relURL }}"> Cloud</a>
                       </li>
                       <li class="nav-item">
-                        <a id="kanvas" class="nav-link" href="/kanvas/"> Kanvas</a>
+                        <a id="kanvas" class="nav-link" href="{{ "kanvas/" | relURL }}"> Kanvas</a>
                       </li>
                       <li class="nav-item dropdown" data-bs-theme="dark">
                         <div
@@ -48,7 +48,7 @@
                           >
                             <div class="logo-container">
                               <img
-                                src="/images/academy-icon.svg"
+                                src="{{ "images/academy-icon.svg" | relURL }}"
                                 alt="Meshery Logo"
                               />
                             </div>
@@ -57,12 +57,12 @@
                           <div class="dropdown-divider"></div>
                           <a
                           class="dropdown-item dropdown-item--row"
-                          href="/videos"
+                          href="{{ "videos" | relURL }}"
                           aria-label="Videos"
                           >
                             <div class="logo-container">
                               <img
-                                src="/images/video-play.svg"
+                                src="{{ "images/video-play.svg" | relURL }}"
                                 alt="Meshery Logo"
                               />
                             </div>
@@ -91,7 +91,7 @@
             data-toggle="dropdown"
             style="padding-top:6px"
             >
-            <img width="28px" src="/images/grid-icon.svg" alt="Products" class="grid-icon" data-modal="false" />
+            <img width="28px" src="{{ "images/grid-icon.svg" | relURL }}" alt="Products" class="grid-icon" data-modal="false" />
 
           </div>
           <div class="dropdown-menu" aria-labelledby="productsDropdown" style="margin-left:-4.5rem;visibility:hidden;">
@@ -103,7 +103,7 @@
             >
               <div class="logo-container">
                 <img
-                  src="/images/logos/meshery-light-icon.svg"
+                  src="{{ "images/logos/meshery-light-icon.svg" | relURL }}"
                   alt="Meshery Logo"
                 />
               </div>
@@ -118,7 +118,7 @@
               >
                 <div class="logo-container">
                   <img
-                    src="/images/logos/kanvas-icon-color.svg"
+                    src="{{ "images/logos/kanvas-icon-color.svg" | relURL }}"
                     alt="Layer5 Kanvas Logo"
                     style="height:40px; width:40px;"
                   />
@@ -135,7 +135,7 @@
               >
                 <div class="logo-container">
                   <img
-                    src="/images/logos/catalog.svg"
+                    src="{{ "images/logos/catalog.svg" | relURL }}"
                     alt="Layer5 Catalog Logo"
                   />
                 </div>
@@ -151,7 +151,7 @@
               >
                 <div class="logo-container">
                   <img
-                    src="/images/logos/smp-light.png"
+                    src="{{ "images/logos/smp-light.png" | relURL }}"
                     alt="Layer5 Cloud Native Performance Logo"
                   />
                 </div>
@@ -167,7 +167,7 @@
               >
                 <div class="logo-container">
                   <img
-                    src="/images/logos/nighthawk-logo.svg"
+                    src="{{ "images/logos/nighthawk-logo.svg" | relURL }}"
                     alt="Layer5 Nighthawk Logo"
                   />
                 </div>
@@ -184,7 +184,7 @@
               >
                 <div class="logo-container">
                   <img
-                    src="/images/logos/academy.svg"
+                    src="{{ "images/logos/academy.svg" | relURL }}"
                     alt="Layer5 Academy Logo"
                   />
                 </div>
diff --git a/layouts/partials/search-input-nav.html b/layouts/partials/search-input-nav.html
index 22b39b84cd8..df069081bc7 100644
--- a/layouts/partials/search-input-nav.html
+++ b/layouts/partials/search-input-nav.html
@@ -41,7 +41,7 @@
     aria-label="{{ T "ui_search" }}"
     autocomplete="off"
     data-offline-search-index-json-src="{{ $offlineSearchLink }}"
-    data-offline-search-base-href="/"
+    data-offline-search-base-href="{{ .Site.Home.RelPermalink }}"
     data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
   >
   <button id="searchKey" style="margin-left:-2rem;" class="kbc-button kbc-button-xs">/</button>
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
index f58d40915e0..21072caa20c 100644
--- a/layouts/partials/search-input.html
+++ b/layouts/partials/search-input.html
@@ -41,7 +41,7 @@
     aria-label="{{ T "ui_search" }}"
     autocomplete="off"
     data-offline-search-index-json-src="{{ $offlineSearchLink }}"
-    data-offline-search-base-href="/"
+    data-offline-search-base-href="{{ .Site.Home.RelPermalink }}"
     data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
   >
   
@@ -53,4 +53,4 @@
 {{ if gt (.Scratch.Get "docsy-search") 1 -}}
 {{ warnf `You have more than one site-search option configured: choose only one.
       For details, see https://www.docsy.dev/docs/adding-content/search.` -}}
-{{ end -}}
\ No newline at end of file
+{{ end -}}
diff --git a/layouts/partials/video-landing-page.html b/layouts/partials/video-landing-page.html
index d053dc2c00f..f48bdf9d6af 100644
--- a/layouts/partials/video-landing-page.html
+++ b/layouts/partials/video-landing-page.html
@@ -70,10 +70,10 @@
                         {{ else if .Params.thumbnail }}
                           <img src="{{ .Params.thumbnail }}" alt="{{ .Title }}">
                         {{ else }}
-                          <img src="/images/video-placeholder-thumbnail.jpg" alt="{{ .Title }}">
+                          <img src="{{ "images/video-placeholder-thumbnail.jpg" | relURL }}" alt="{{ .Title }}">
                         {{ end }}
                       {{ else }}
-                        <img src="/images/video-placeholder-thumbnail.jpg" alt="{{ .Title }}">
+                        <img src="{{ "images/video-placeholder-thumbnail.jpg" | relURL }}" alt="{{ .Title }}">
                       {{ end }}
                       <div class="play-button-overlay">
                         <div class="play-button">
@@ -92,7 +92,7 @@ <h3>{{ .Title }}</h3>
                       {{ if .Params.tags }}
                       <div class="taxonomy-terms" style="margin-bottom: 0.6rem;">
                         {{ range .Params.tags }}
-                          <a href="/tags/{{ . }}" class="video-tag"><span class="taxonomy-term" style="font-size: .9rem">{{ . }}</span></a>
+                          <a href="{{ printf "tags/%s" . | relURL }}" class="video-tag"><span class="taxonomy-term" style="font-size: .9rem">{{ . }}</span></a>
                         {{ end }}
                       </div>
                     {{ end }}
@@ -121,10 +121,10 @@ <h3>{{ .Title }}</h3>
                         {{ else if .Params.thumbnail }}
                           <img src="{{ .Params.thumbnail }}" alt="{{ .Title }}">
                         {{ else }}
-                          <img src="/images/video-placeholder-thumbnail.jpg" alt="{{ .Title }}">
+                          <img src="{{ "images/video-placeholder-thumbnail.jpg" | relURL }}" alt="{{ .Title }}">
                         {{ end }}
                       {{ else }}
-                        <img src="/images/video-placeholder-thumbnail.jpg" alt="{{ .Title }}">
+                        <img src="{{ "images/video-placeholder-thumbnail.jpg" | relURL }}" alt="{{ .Title }}">
                       {{ end }}
                       <div class="play-button-overlay">
                         <div class="play-button">
@@ -143,7 +143,7 @@ <h3>{{ .Title }}</h3>
                       {{ if .Params.tags }}
                       <div class="taxonomy-terms">
                         {{ range .Params.tags }}
-                          <a href="/tags/{{ . }}" class="video-tag"><span class="taxonomy-term" style="font-size: .9rem">{{ . }}</span></a>
+                          <a href="{{ printf "tags/%s" . | relURL }}" class="video-tag"><span class="taxonomy-term" style="font-size: .9rem">{{ . }}</span></a>
                         {{ end }}
                       </div>
                     {{ end }}
diff --git a/layouts/partials/video-section-index.html b/layouts/partials/video-section-index.html
index 4cce47bd9c6..c4855c2930d 100644
--- a/layouts/partials/video-section-index.html
+++ b/layouts/partials/video-section-index.html
@@ -63,7 +63,7 @@
                                     {{ if .Params.videoId }}
                                     <img src="https://i.ytimg.com/vi/{{ .Params.videoId }}/maxresdefault.jpg" alt="{{ .Title }}" />
                                     {{ else }}
-                                    <img src="/images/video-placeholder-thumbnail.jpg" alt="{{ .Title }}">
+                                    <img src="{{ "images/video-placeholder-thumbnail.jpg" | relURL }}" alt="{{ .Title }}">
                                     {{ end }}
                                     <!-- <iframe 
                                         src="https://www.youtube.com/embed/{{ .Params.videoId }}" 
diff --git a/layouts/shortcodes/csvtable-roles.html b/layouts/shortcodes/csvtable-roles.html
index f22c1a0c469..81a869000d2 100644
--- a/layouts/shortcodes/csvtable-roles.html
+++ b/layouts/shortcodes/csvtable-roles.html
@@ -42,7 +42,7 @@
       {{ else }}
         {{ $urlPath = print "roles/" $sectionName | urlize }}
       {{ end }}
-      <h2><a href="/cloud/concepts/identity-and-security/{{ $urlPath }}">{{ $category }} Role</a></h2>
+      <h2><a href="{{ printf "cloud/concepts/identity-and-security/%s" $urlPath | relURL }}">{{ $category }} Role</a></h2>
       <table class="csvtable td-initial">
         <thead>
           <tr>
diff --git a/layouts/shortcodes/csvtable.html b/layouts/shortcodes/csvtable.html
index 31ac0b45acc..4ca41f71a7a 100644
--- a/layouts/shortcodes/csvtable.html
+++ b/layouts/shortcodes/csvtable.html
@@ -55,7 +55,7 @@ <h2>{{ $category }} Permissions</h2>
                 {{ else }}
                   {{ $urlPath = print "roles/" }}
                 {{ end }}
-                <th><a href="/cloud/concepts/identity-and-security/{{ $urlPath }}">{{ $col }}</a></th>
+                <th><a href="{{ printf "cloud/concepts/identity-and-security/%s" $urlPath | relURL }}">{{ $col }}</a></th>
               {{ end }}
             {{ end }}
           {{ end }}
diff --git a/layouts/shortcodes/local-video.html b/layouts/shortcodes/local-video.html
index 073d5bd4dd0..2c144cae0f1 100644
--- a/layouts/shortcodes/local-video.html
+++ b/layouts/shortcodes/local-video.html
@@ -1,5 +1,5 @@
 <video 
-  src="{{ .Get "src" }}" 
+  src="{{ .Get "src" | relURL }}" 
   class="card-img-top w-100 h-100 object-fit-cover" 
   {{ if .Get "muted" }}muted{{ end }} 
   {{ if .Get "autoplay" }}autoplay{{ end }}
diff --git a/layouts/shortcodes/meshery-design-embed.html b/layouts/shortcodes/meshery-design-embed.html
index 59a1808ba01..3812ab0802d 100644
--- a/layouts/shortcodes/meshery-design-embed.html
+++ b/layouts/shortcodes/meshery-design-embed.html
@@ -20,6 +20,9 @@
   The `src` attribute specifies the script location, as provided by the user. 
 -->
 {{ $script := .Get "src" }}
+{{ if and (not (hasPrefix $script "../")) (not (hasPrefix $script "./")) (not (hasPrefix $script "http://")) (not (hasPrefix $script "https://")) (not (hasPrefix $script "//")) }}
+  {{ $script = $script | relURL }}
+{{ end }}
 
 <!-- 
   Retrieve the unique ID for the embedded Meshery design. 
diff --git a/layouts/shortcodes/static.html b/layouts/shortcodes/static.html
new file mode 100644
index 00000000000..26a5033d612
--- /dev/null
+++ b/layouts/shortcodes/static.html
@@ -0,0 +1 @@
+{{- .Get 0 | relURL -}}
diff --git a/layouts/video/video.html b/layouts/video/video.html
index 02686a8f0ff..4782ee210ed 100644
--- a/layouts/video/video.html
+++ b/layouts/video/video.html
@@ -14,11 +14,15 @@ <h1>{{ .Title }}</h1>
     <p class="hero-subtitle">{{ .Description }}</p>
     
     {{ if .Params.featured_video }}
+    {{ $featuredImage := .Params.featured_image }}
+    {{ if and $featuredImage (not (hasPrefix $featuredImage "http://")) (not (hasPrefix $featuredImage "https://")) (not (hasPrefix $featuredImage "//")) }}
+      {{ $featuredImage = $featuredImage | relURL }}
+    {{ end }}
     <div class="hero-video-wrapper">
       <div class="hero-video-container" id="videoContainer">
         <div class="video-overlay bg-gradient-overlay">
           <div style="max-height: 100%;">
-            <img src="{{ .Params.featured_image }}" data-modal="false" alt="{{ .Title }}" style="width: 100%; height: 100%; object-fit: cover;">
+            <img src="{{ $featuredImage }}" data-modal="false" alt="{{ .Title }}" style="width: 100%; height: 100%; object-fit: cover;">
           </div>
           <div class="video-btn-wrapper">
             <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 57 60">
diff --git a/package.json b/package.json
index 83fe7f2200c..42c0c0f47a2 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "_hugo": "hugo --cleanDestinationDir",
     "_hugo-dev": "npm run _hugo -- -e dev -DFE",
     "_serve": "npm run _hugo-dev -- --minify serve",
-    "build:preview": "npm run _hugo-dev -- --minify --baseURL \"${DEPLOY_PRIME_URL:-/}\"",
-    "build:production": "npm run _hugo -- --minify",
+    "build:preview": "npm run _hugo-dev -- --minify --baseURL \"${BASE_URL:-${DEPLOY_PRIME_URL:-/}}\"",
+    "build:production": "npm run _hugo -- --minify --baseURL \"${BASE_URL:-/}\"",
     "build": "npm run _build",
     "check:links:all": "HTMLTEST_ARGS= npm run _check:links",
     "check:links": "npm run _check:links",
diff --git a/static/favicons/browserconfig.xml b/static/favicons/browserconfig.xml
index d469e489bbe..20ef75a4646 100644
--- a/static/favicons/browserconfig.xml
+++ b/static/favicons/browserconfig.xml
@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
             <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>