diff --git a/erpnext/public/js/education/lms/components/ContentNavigation.vue b/erpnext/public/js/education/lms/components/ContentNavigation.vue
index e58e1eb3a9..a07c0f85f4 100644
--- a/erpnext/public/js/education/lms/components/ContentNavigation.vue
+++ b/erpnext/public/js/education/lms/components/ContentNavigation.vue
@@ -37,9 +37,4 @@ export default {
 </script>
 
 <style lang="css" scoped>
-	.nav-buttons {
-		position: absolute;
-  		bottom: 0;
-  		right: 0;
-	}
 </style>
diff --git a/erpnext/public/js/education/lms/components/Video.vue b/erpnext/public/js/education/lms/components/Video.vue
index 29d973a5c6..27f922f487 100644
--- a/erpnext/public/js/education/lms/components/Video.vue
+++ b/erpnext/public/js/education/lms/components/Video.vue
@@ -2,7 +2,6 @@
 <div>
     <section class='mt-2'>
     <div>
-        <youtube-player :url="contentData.url"/>
         <div class="mt-3 row">
             <div class="col-md-8">
                 <h2>{{ contentData.name }}</h2>
@@ -12,15 +11,16 @@
                 </span>
             </div>
             <div class="col-md-4 text-right">
-                    <slot></slot>
+                <slot></slot>
             </div>
         </div>
+        <youtube-player :url="contentData.url" class="mt-3"/>
         <hr>
     </div>
 </section>
 <section class="video-description-section">
     <div>
-        <div class="content" :html="contentData.description">
+        <div class="content" v-html="contentData.description">
         </div>
         <div class="text-right hidden">
             <a class='btn btn-outline-secondary' href="/classrooms/module">Previous</a>
diff --git a/erpnext/public/js/education/lms/lmsRoot.vue b/erpnext/public/js/education/lms/lmsRoot.vue
index cfa9dd166f..d359265c58 100644
--- a/erpnext/public/js/education/lms/lmsRoot.vue
+++ b/erpnext/public/js/education/lms/lmsRoot.vue
@@ -17,3 +17,29 @@ export default {
 	}
 };
 </script>
+<style>
+	div.card-hero-img {
+        height: 220px;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: rgb(250, 251, 252);
+    }
+
+    .card-image-wrapper {
+        display: flex;
+        overflow: hidden;
+        height: 220px;
+        background-color: rgb(250, 251, 252);
+        justify-content: center;
+    }
+
+    .image-body {
+        align-self: center;
+        color: #d1d8dd;
+        font-size: 24px;
+        font-weight: 600;
+        line-height: 1;
+        padding: 20px;
+    }
+</style>