diff --git a/erpnext/public/js/education/web-academy/components/ContentArticle.vue b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
index 27d16a732e7..64bfb86a3e2 100644
--- a/erpnext/public/js/education/web-academy/components/ContentArticle.vue
+++ b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
@@ -1,21 +1,8 @@
 <template>
 <div>
-    <section class='article-top-section video-section-bg'>
-        <div class='container'>
-            <div class="row">
-                <div class="col-md-8">
-                    <h2>{{ contentData.title }}</h2>
-                    <span class="text-muted">
-                        Published on {{ contentData.publish_date }}, by {{ contentData.author }}
-                    </span>
-                </div>
-                <div class="col-md-4 text-right">
-                	<slot></slot>
-                </div>
-            </div>
-            <hr>
-        </div>
-    </section>
+    <ContentTitle :title="contentData.title" :author="contentData.author" :publishDate="contentData.publish_date">
+        <slot></slot>
+    </ContentTitle>
     <section class="article-content-section">
         <div class='container'>
             <div class="content" v-html="contentData.content"></div>
@@ -30,6 +17,7 @@
 </div>
 </template>
 <script>
+import ContentTitle from './ContentTitle.vue'
 export default {
 	props: ['content', 'type'],
 	name: 'ContentArticle',
@@ -48,6 +36,9 @@ export default {
     	}).then(r => {
     			this.contentData = r.message
     	});
+    },
+    components: {
+        ContentTitle
     }
 };
 </script>
diff --git a/erpnext/public/js/education/web-academy/components/ContentTitle.vue b/erpnext/public/js/education/web-academy/components/ContentTitle.vue
new file mode 100644
index 00000000000..ad6b3bb7fa9
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentTitle.vue
@@ -0,0 +1,33 @@
+<template>
+    <section class='article-top-section video-section-bg'>
+        <div class='container'>
+            <div class="row">
+                <div class="col-md-8">
+                    <h2>{{ title }}</h2>
+                    <span v-if="typeof author !== 'undefined' || variable !== null" class="text-muted">
+                        Published on {{ publishDate }}, by {{ author }}
+                    </span>
+                </div>
+                <div class="col-md-4 text-right">
+                    <slot></slot>
+                </div>
+            </div>
+            <hr>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    props: ['title', 'publishDate', 'author'],
+    name: 'ContentTitle',
+    data() {
+        return {
+
+        };
+    },
+};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
index 1616ba69185..ca5434b7657 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
@@ -79,7 +79,7 @@ export default {
 }
 
 .quiz-section {
-	padding-top: 3rem !important;
+	padding-top: 0.5em !important;
 	padding-bottom: 0rem !important;
 }
 </style>
\ No newline at end of file