diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index 827e6d2c499..f7a1617720e 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -9,17 +9,20 @@
             <div v-html="program.description"></div>
         </div>
         <div class='text-right p-3'>
+            <button class='btn btn-secondary btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
             <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
-                    {{ buttonName }}
+                {{ buttonName }}
             </a-button>
             <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
             <a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
         </div>
+        <VideoModal :title="program.program_name" :video="program.intro_video"/>
     </div>
 </div>
 </template>
 <script>
 import AButton from './Button.vue';
+import VideoModal from './VideoModal.vue';
 export default {
     props: ['program', 'enrolled'],
     name: "ProgramCard",
@@ -38,7 +41,6 @@ export default {
             lms.call('enroll_in_program', {
                 program_name: this.program.name,
             }).then(data => {
-                console.log(data)
                 lms.store.updateEnrolledPrograms()
                 this.$router.push(this.programRoute)
             })
@@ -61,7 +63,8 @@ export default {
         }
     },
     components: {
-        AButton
+        AButton,
+        VideoModal
     }
 };
 </script>
diff --git a/erpnext/public/js/education/lms/components/VideoModal.vue b/erpnext/public/js/education/lms/components/VideoModal.vue
new file mode 100644
index 00000000000..d169ccdbef9
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/VideoModal.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="modal" id="videoModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">{{ title }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="embed-responsive embed-responsive-16by9">
+            <iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script type="text/javascript">
+export default {
+  name: 'VideoModal',
+  props: ['title', 'video'],
+  computed: {
+      videoID() {
+          if (!Array.prototype.last){
+              Array.prototype.last = function(){
+                  return this[this.length - 1];
+              };
+          };
+          if (this.video.includes('v=')){
+              return this.video.split('v=')[1].split('&')[0]
+          }
+          else if (this.video.includes('youtu.be')) {
+              return this.video.split('/').last().split('?')[0]
+          }
+      }
+  }
+};
+</script>
\ No newline at end of file