diff --git a/content/en/videos/_index.md b/content/en/videos/_index.md
new file mode 100644
index 00000000..95163b04
--- /dev/null
+++ b/content/en/videos/_index.md
@@ -0,0 +1,10 @@
+---
+title: Videos
+description: >
+  Videos on Cloud and Kanvas
+linkTitle: Videos
+type: video
+cascade: 
+    type: video
+---
+
diff --git a/content/en/videos/advanced/_index.md b/content/en/videos/advanced/_index.md
new file mode 100644
index 00000000..3f455be1
--- /dev/null
+++ b/content/en/videos/advanced/_index.md
@@ -0,0 +1,9 @@
+---
+title: Advanced Videos
+description: >
+  Advanced Videos on Cloud and Kanvas
+linkTitle: Advanced Videos
+weight: 4
+videoGrid: true
+---
+
diff --git a/content/en/videos/advanced/advanced-videos/video.md b/content/en/videos/advanced/advanced-videos/video.md
new file mode 100644
index 00000000..ef67d21c
--- /dev/null
+++ b/content/en/videos/advanced/advanced-videos/video.md
@@ -0,0 +1,11 @@
+---
+title: "Local video 1"
+description: "Birth of Kanvas logo from Meshery Birth of Kanvas logo from Meshery"
+src: "/videos/pattern-import.mp4"
+videoType: local
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+---
+
+{{< local-video src="/videos/pattern-import.mp4" muted="true" autoplay="true" loop="true" >}}
diff --git a/content/en/videos/getting-started/_index.md b/content/en/videos/getting-started/_index.md
new file mode 100644
index 00000000..fa3ec0fa
--- /dev/null
+++ b/content/en/videos/getting-started/_index.md
@@ -0,0 +1,8 @@
+---
+title: Getting Started Videos
+description: >
+  Getting started Video on Cloud and Kanvas
+linkTitle: Getting Started
+weight: 2
+videoGrid: true
+---
\ No newline at end of file
diff --git a/content/en/videos/getting-started/comments/adding-comments.md b/content/en/videos/getting-started/comments/adding-comments.md
new file mode 100644
index 00000000..a80475f1
--- /dev/null
+++ b/content/en/videos/getting-started/comments/adding-comments.md
@@ -0,0 +1,12 @@
+---
+title: Reviewing Designs
+description: >
+  Getting Started with Kanvas and Design Reviews
+video_id: "bb6J--aApk8"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+---
+
+{{< youtube bb6J--aApk8 >}}
\ No newline at end of file
diff --git a/content/en/videos/intermediate/_index.md b/content/en/videos/intermediate/_index.md
new file mode 100644
index 00000000..242771fc
--- /dev/null
+++ b/content/en/videos/intermediate/_index.md
@@ -0,0 +1,9 @@
+---
+title: Intermediate Videos
+description: >
+  Intermediate videos
+linkTitle: Intermediate vidoes
+weight: 3
+videoGrid: true
+---
+
diff --git a/content/en/videos/intermediate/layer5/kanvas.md b/content/en/videos/intermediate/layer5/kanvas.md
new file mode 100644
index 00000000..e4a35b81
--- /dev/null
+++ b/content/en/videos/intermediate/layer5/kanvas.md
@@ -0,0 +1,10 @@
+---
+title: "Layer5 kanvas Video"
+description: "Layer5 kanvas - figma for DevOps. Design, deploy and manage your cloudnative infrastructure."
+video_id: "Do7htKrRzDA"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+---
+{{< youtube Do7htKrRzDA >}}
\ No newline at end of file
diff --git a/content/en/videos/intermediate/meshery/meshery-teaser.md b/content/en/videos/intermediate/meshery/meshery-teaser.md
new file mode 100644
index 00000000..986cd4d3
--- /dev/null
+++ b/content/en/videos/intermediate/meshery/meshery-teaser.md
@@ -0,0 +1,10 @@
+---
+title: "Meshery Playground Teaser Video"
+description: "Meshery Playground - Explore features and capabilities of Meshery."
+video_id: "Do7htKrRzDA"
+videoType: youtube  # or "local"
+muted: true  # optional
+autoplay: true  # optional
+loop: true #optional
+---
+{{< youtube Do7htKrRzDA >}}
\ No newline at end of file
diff --git a/layouts/partials/video-section-index.html b/layouts/partials/video-section-index.html
new file mode 100644
index 00000000..2fdcea17
--- /dev/null
+++ b/layouts/partials/video-section-index.html
@@ -0,0 +1,82 @@
+<div class="section-index">
+    {{ $page := .Page -}}
+    {{ $pages := (where .Site.Pages "Section" .Section).ByWeight -}}
+    {{ $pages = (where $pages "Type" "!=" "search") }}
+    {{ $pages = (where $pages ".Params.hide_summary" "!=" true) -}}
+    {{ $pages = (where $pages ".Parent" "!=" nil) -}}
+    {{ $pages = (where $pages ".Parent.File" "!=" nil) -}}
+    {{ if $page.File -}}
+        {{ $pages = (where $pages "Parent.File.UniqueID" "==" $page.File.UniqueID) -}}
+    {{ end -}}
+    {{ if or $page.Params.no_list (eq (len $pages) 0) -}}
+    {{/* If no_list is true or we don't have subpages we don't show a list of subpages */}}
+    {{ else if $page.Params.simple_list -}}
+    {{/* If simple_list is true we show a bulleted list of subpages */}}
+        <ul>
+            {{ range $pages -}}
+                {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) }}
+                <li><a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{- .Title -}}</a></li>
+            {{ end -}}
+        </ul>
+    {{ else if $page.Params.videoGrid -}}
+    <div class="container">
+    <div class="row">
+        {{ range $pages -}}
+           {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) }}
+            <a href="{{ $manualLink }}"
+              {{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}
+              {{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="col-md-4 mb-4">
+            <!-- <div > -->
+                <div class="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;">
+                        {{ if .Params.videoType }}
+                            {{ if eq .Params.videoType "local" }}
+                                <video 
+                                    src="{{ .Params.src }}" 
+                                    class="card-img-top w-100 h-100 object-fit-cover" 
+                                    {{ if .Params.muted }}muted{{ end }} 
+                                    {{ if .Params.autoplay }}autoplay{{ end }} 
+                                    {{ if .Params.loop }}loop{{ end }}
+                                    controls
+                                ></video>
+                            {{ else if eq .Params.videoType "youtube" }}
+                                <div class="ratio ratio-16x9 h-100">
+                                    <img src="https://i.ytimg.com/vi/{{ .Params.video_id }}/maxresdefault.jpg" alt="{{ .Title }}" />
+                                    <!-- <iframe 
+                                        src="https://www.youtube.com/embed/{{ .Params.video_id }}" 
+                                        title="{{ .Title }}" 
+                                        frameborder="0" 
+                                        class="w-100 h-100"
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                        allowfullscreen
+                                    ></iframe> -->
+                                </div>
+                            {{ end }}
+                            <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"></div>
+                        {{ end }}
+                    </div>
+                    
+                    <div class="card-body">
+                        <h5 class="card-title">{{ .Title }}</h5>
+                        <p class="card-text" style="margin-top: .5rem;">{{ .Description }}</p>
+                    </div>
+                </div>
+            <!-- </div> -->
+        </a>
+        {{ end -}}
+    </div>
+</div>
+    {{ else -}}
+    {{/* Otherwise we show a nice formatted list of subpages with page descriptions */}}
+    <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>
+            </div>
+        {{ end -}}
+    {{ end -}}
+</div>
diff --git a/layouts/shortcodes/local-video.html b/layouts/shortcodes/local-video.html
new file mode 100644
index 00000000..073d5bd4
--- /dev/null
+++ b/layouts/shortcodes/local-video.html
@@ -0,0 +1,8 @@
+<video 
+  src="{{ .Get "src" }}" 
+  class="card-img-top w-100 h-100 object-fit-cover" 
+  {{ if .Get "muted" }}muted{{ end }} 
+  {{ if .Get "autoplay" }}autoplay{{ end }}
+  {{ if .Get "loop" }}loop{{ end }} 
+  controls>
+</video>
\ No newline at end of file
diff --git a/layouts/video/baseof.html b/layouts/video/baseof.html
new file mode 100644
index 00000000..25e3cb6b
--- /dev/null
+++ b/layouts/video/baseof.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html
+  itemscope
+  itemtype="http://schema.org/WebPage"
+  lang="{{ .Site.Language.Lang }}"
+  class="no-js"
+>
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body
+    class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}"
+  >
+    <header>{{ partial "navbar.html" . }}</header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-xl-nowrap">
+          <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            {{ partial "sidebar.html" . }}
+          </aside>
+          <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
+            {{ partial "page-meta-links.html" . }} {{ partial "toc.html" . }} {{
+            partial "taxonomy_terms_clouds.html" . }}
+          </aside>
+          <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
+            {{ partial "version-banner.html" . }} {{ if not
+            .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" .
+            }}{{ end }} {{ block "main" . }}{{ end }} 
+          </main>
+        </div>
+      </div>
+      {{ partial "footer.html" . }}
+    </div>
+    {{ partial "scripts.html" . }} {{ partial "image-modal.html" . }}
+  </body>
+</html>
diff --git a/layouts/video/list.html b/layouts/video/list.html
new file mode 100644
index 00000000..89cdca87
--- /dev/null
+++ b/layouts/video/list.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+<div class="td-content">
+	<h1>{{ .Title }}</h1>
+  {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+	<header class="article-meta{{ if or .Params.categories .Params.tags }} article-meta-bg{{ end }}">
+		{{ partial "taxonomy_terms_article_wrapper.html" . -}}
+		{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) -}}
+			{{ partial "reading-time.html" . -}}
+		{{ end -}}
+	</header>
+	{{ with .Params.plan }}
+        {{ partial "plan-info.html" (dict "plan" .) }}
+    {{ end }}
+	{{- partial "feature-info.html" . -}}
+	{{ .Content }}
+  {{ partial "video-section-index.html" . -}}
+	
+	{{ if (.Site.Config.Services.Disqus.Shortname) -}}
+		<br />
+		{{- partial "disqus-comment.html" . -}}
+	{{ end -}}{{ partial "pager.html" . }}
+	{{ partial "page-meta-lastmod.html" . -}}
+	{{ partial "recent-discussions.html" . -}}
+</div>
+{{ end -}}
diff --git a/layouts/video/single.html b/layouts/video/single.html
new file mode 100644
index 00000000..b8ae29bb
--- /dev/null
+++ b/layouts/video/single.html
@@ -0,0 +1,7 @@
+{{ define "main" }}
+{{ partial "feature-info.html" . }}
+{{ .Render "content" }}
+<div style="margin-top:2rem;">
+{{ partial "recent-discussions.html" . }}
+</div>
+{{ end }}
diff --git a/static/videos/comment.gif b/static/videos/comment.gif
new file mode 100644
index 00000000..5a587c66
Binary files /dev/null and b/static/videos/comment.gif differ
diff --git a/static/videos/pattern-import.mp4 b/static/videos/pattern-import.mp4
new file mode 100644
index 00000000..beca1c21
Binary files /dev/null and b/static/videos/pattern-import.mp4 differ