diff --git a/assets/scss/_videos.scss b/assets/scss/_videos.scss
index b7c75310..9071407b 100644
--- a/assets/scss/_videos.scss
+++ b/assets/scss/_videos.scss
@@ -45,4 +45,36 @@
     font-size: .9rem;
     margin-top: .5rem;
     font-style: italic;
-  }
\ No newline at end of file
+  }
+  related-videos {
+    margin: 2rem 0;
+}
+.carousel-item {
+    padding: 1rem;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+    width: 5%;
+    opacity: 0.7;
+}
+
+.carousel-control-prev:hover,
+.carousel-control-next:hover {
+    opacity: 1;
+}
+
+.carousel-indicators {
+    bottom: -40px;
+}
+
+.carousel-indicators button {
+    background-color: #666;
+    height: 3px;
+    opacity: 0.5;
+}
+
+.carousel-indicators button.active {
+    background-color: #fff;
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/content/en/videos/advanced/advanced-videos/video.md b/content/en/videos/advanced/advanced-videos/video.md
index ef67d21c..67be6270 100644
--- a/content/en/videos/advanced/advanced-videos/video.md
+++ b/content/en/videos/advanced/advanced-videos/video.md
@@ -3,6 +3,7 @@ title: "Local video 1"
 description: "Birth of Kanvas logo from Meshery Birth of Kanvas logo from Meshery"
 src: "/videos/pattern-import.mp4"
 videoType: local
+video_id: "Do7htKrRzdA"
 muted: true  # optional
 autoplay: true  # optional
 loop: true #optional
diff --git a/content/en/videos/getting-started/comments/adding-c.md b/content/en/videos/getting-started/comments/adding-c.md
new file mode 100644
index 00000000..9613a6c5
--- /dev/null
+++ b/content/en/videos/getting-started/comments/adding-c.md
@@ -0,0 +1,15 @@
+---
+title: "Design Reviews: Adding Comments"
+description: >
+   Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews.
+video_id: "bb6J--aApk8"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+categories: [Designer]
+formats: [video]
+tags: [review, collaboration, comments]
+---
+
+{{< youtube bb6J--aApk8 >}}
\ No newline at end of file
diff --git a/content/en/videos/getting-started/comments/adding-cm2.md b/content/en/videos/getting-started/comments/adding-cm2.md
new file mode 100644
index 00000000..9613a6c5
--- /dev/null
+++ b/content/en/videos/getting-started/comments/adding-cm2.md
@@ -0,0 +1,15 @@
+---
+title: "Design Reviews: Adding Comments"
+description: >
+   Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews.
+video_id: "bb6J--aApk8"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+categories: [Designer]
+formats: [video]
+tags: [review, collaboration, comments]
+---
+
+{{< youtube bb6J--aApk8 >}}
\ No newline at end of file
diff --git a/content/en/videos/getting-started/comments/adding-cm4.md b/content/en/videos/getting-started/comments/adding-cm4.md
new file mode 100644
index 00000000..9613a6c5
--- /dev/null
+++ b/content/en/videos/getting-started/comments/adding-cm4.md
@@ -0,0 +1,15 @@
+---
+title: "Design Reviews: Adding Comments"
+description: >
+   Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews.
+video_id: "bb6J--aApk8"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+categories: [Designer]
+formats: [video]
+tags: [review, collaboration, comments]
+---
+
+{{< youtube bb6J--aApk8 >}}
\ No newline at end of file
diff --git a/layouts/partials/video-section-related.html b/layouts/partials/video-section-related.html
index 292c84d5..51c5a549 100644
--- a/layouts/partials/video-section-related.html
+++ b/layouts/partials/video-section-related.html
@@ -1,19 +1,97 @@
 <div class="section-index">
-    {{ $page := .Page -}}
-    
-    {{ $pages := (where .Site.Pages ".Params.video_id" "!=" nil)  -}}
-    
-    {{ if or $page.Params.no_list (eq (len $pages) 0) -}}
-
-    <hr class="panel-line">
-        {{ range $pages -}}
-            {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) -}}
-            <div class="entry">
-                <h5>
-                    <a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{- .Title -}}</a>
-                </h5>
-                <p>{{ .Description | markdownify -}}</p>
+    {{ $currentPage := .Page }}
+    {{ $currentTags := .Params.tags }}
+    {{ $currentCategories := .Params.categories }}
+
+    {{ $videoPages := (where .Site.Pages ".Params.video_id" "!=" nil) }}
+
+    {{ $matchingVideos := slice }}
+
+    {{ range $videoPages }}
+    {{ $page := . }}
+    {{ $matchScore := 0 }}
+
+    {{ range $currentTags }}
+    {{ if in $page.Params.tags . }}
+    {{ $matchScore = add $matchScore 1 }}
+    {{ end }}
+    {{ end }}
+
+    {{ range $currentCategories }}
+    {{ if in $page.Params.categories . }}
+    {{ $matchScore = add $matchScore 2 }}
+    {{ end }}
+    {{ end }}
+
+    {{ if gt $matchScore 0 }}
+    {{ $matchingVideos = $matchingVideos | append (dict "page" $page "score" $matchScore) }}
+    {{ end }}
+ 
+    {{ end }}
+
+    {{ $sortedVideos := sort $matchingVideos "score" "desc" }}
+
+
+    {{ if gt (len $sortedVideos) 0 }}
+    <div class="related-videos">
+        <h2>Related Videos</h2>
+        <div id="videoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
+            <div class="carousel-indicators">
+                {{ range $index, $_ := $sortedVideos }}
+                <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="{{ $index }}" {{ if eq $index 0
+                    }}class="active" aria-current="true" {{ end }} aria-label="Slide {{ add $index 1 }}">
+                </button>
+                {{ end }}
+            </div>
+
+            <div class="carousel-inner">
+                {{ range $index, $video := $sortedVideos }}
+                <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
+                    <div class="row justify-content-center">
+                        <div class="col-12 col-md-8 col-lg-6">
+                            <a href="{{ .page.RelPermalink }}" class="video-link text-decoration-none">
+                                <div class="video card h-100 bg-dark text-white border border-secondary shadow-lg p-1">
+                                    <div class="video-container position-relative"
+                                        style="height: max-content; overflow: hidden;">
+                                        <div class="ratio ratio-16x9 h-100">
+                                            <img src="https://i.ytimg.com/vi/{{ .page.Params.video_id }}/maxresdefault.jpg"
+                                                alt="{{ .page.Title }}" class="img-fluid" />
+                                        </div>
+                                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay">
+                                            <div
+                                                class="video-btn-wrapper position-absolute top-50 start-50 translate-middle">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 60">
+                                                    <path class="play-icon-path"
+                                                        d="M39.5298 29.028L21.7045 39.395C21.6471 39.4284 21.5893 39.4603 21.5311 39.4908C20.9134 39.8161 20.2107 40 19.4654 40C16.9992 40 15 37.9861 15 35.5018V14.5102C15 13.6377 15.2466 12.8233 15.6734 12.1337C16.9369 10.0722 19.6075 9.38388 21.7044 10.6034L39.5291 20.97C40.2869 21.3504 40.9459 21.9517 41.401 22.7457C41.811 23.4611 42.0038 24.2428 41.9999 25.0133C41.999 25.7747 41.806 26.5461 41.4009 27.2527C40.9461 28.0464 40.2873 28.6476 39.5298 29.028Z" />
+                                                </svg>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <h4 class="video-title text-white mb-0">{{ .page.Title }}</h4>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                {{ end }}
             </div>
-        {{ end -}}
-    {{ end -}}
+
+            <button class="carousel-control-prev" type="button" data-bs-target="#videoCarousel" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#videoCarousel" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+    </div>
+    {{ end }}
 </div>
+
+
+<style>
+
+</style>
\ No newline at end of file