diff --git a/erpnext/www/lms/all-programs.html b/erpnext/www/lms/all-programs.html
index 02df51acdf..11ca21485d 100644
--- a/erpnext/www/lms/all-programs.html
+++ b/erpnext/www/lms/all-programs.html
@@ -28,6 +28,10 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index 92cfec2c8c..bdbacc1f3d 100644
--- a/erpnext/www/lms/content.html
+++ b/erpnext/www/lms/content.html
@@ -3,58 +3,67 @@
 
 {% block head_include %}
 	<style>
-		div.card-hero-img {
-			height: 220px;
-			background-size: cover;
-			background-repeat: no-repeat;
-			background-position: center;
-			background-color: rgb(250, 251, 252);
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+		.plyr--video .plyr__control.plyr__tab-focus,
+		.plyr--video .plyr__control:hover,
+		.plyr--video .plyr__control[aria-expanded='true'] {
+			 background: #5e64ff !important;
 		}
 
-		.card-image-wrapper {
-			display: flex;
-			overflow: hidden;
-			height: 220px;
-			background-color: rgb(250, 251, 252);
-			justify-content: center;
+		.plyr__control--overlaid:focus,
+		.plyr__control--overlaid:hover {
+		  background: #5e64ff !important;
 		}
 
-		.image-body {
-			align-self: center;
-			color: #d1d8dd;
-			font-size: 24px;
-			font-weight: 600;
-			line-height: 1;
-			padding: 20px;
+		.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+    		background: #5e64ff !important;
+		}
+
+		.plyr__menu__container
+		.plyr__control[role='menuitemradio'][aria-checked='true']::before {
+		  background: #5e64ff;
+		}
+		.plyr--full-ui input[type='range'] {
+		  color: #5e64ff !important;
+		}
+
+		.plyr__control--overlaid {
+			background: rgba(94, 100, 255, 0.8) !important;
 		}
 	</style>
 	<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
 {% endblock %}
 
-{% macro navigation() %}
-<div class="row">
-		<div class="col-md-7">
-			<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
-		</div>
-		<div id="nav-buttons" class="col-md-5 text-right" {{ 'hidden' if content_type=='Quiz' }}>
-			{% if previous %}
-				<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">Previous</a>
-			{% else %}
-				<a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
-			{% endif %}
-
-			{% if next %}
-				<button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
-			{% else %}
-				<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
-			{% endif %}
-		</div>
+{% macro title() %}
+	<div class="mb-3">
+		<a href="#" class="text-muted">
+				Back to Course
+		</a>
 	</div>
+	<div>
+		<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
+	</div>
+{% endmacro %}
+
+{% macro navigation() %}
+		{% if previous %}
+			<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">Previous</a>
+		{% else %}
+			<a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
+		{% endif %}
+
+		{% if next %}
+			<button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
+		{% else %}
+			<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
+		{% endif %}
 {% endmacro %}
 
 {% macro video() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.duration %}
 			{{ content.duration }} Mins
@@ -77,7 +86,7 @@
 
 {% macro article() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.author or content.publish_date %}
 			Published
@@ -97,11 +106,7 @@
 
 {% macro quiz() %}
 <div class="mb-5">
-	<div class="row">
-		<div class="col-md-7">
-			<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
-		</div>
-	</div>
+	{{ title() }}
 </div>
 <div id="quiz-wrapper">
 </div>
@@ -118,6 +123,9 @@
 			{% elif content_type=='Quiz' %}
 				{{ quiz() }}
 			{% endif %}
+			<div class="pull-right" {{ 'hidden' if content_type=='Quiz'}}>
+				{{ navigation() }}
+			</div>
 		</div>
 	</div>
 </section>
diff --git a/erpnext/www/lms/course.html b/erpnext/www/lms/course.html
index d046ac8514..381af01a7a 100644
--- a/erpnext/www/lms/course.html
+++ b/erpnext/www/lms/course.html
@@ -28,6 +28,9 @@
 			line-height: 1;
 			padding: 20px;
 		}
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
@@ -84,7 +87,7 @@
 {% endmacro %}
 
 {% block content %}
-<section class="section ">
+<section class="section">
 	{{ hero(course.course_name, course.description, has_access, {'name': 'Program', 'url': '/lms/program?program=' + program }) }}
 	<div class='container'>
 		<div class="row mt-5">
diff --git a/erpnext/www/lms/index.html b/erpnext/www/lms/index.html
index 6661e22ce3..c33aeb59d5 100644
--- a/erpnext/www/lms/index.html
+++ b/erpnext/www/lms/index.html
@@ -30,11 +30,15 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
 {% block content %}
-<section class="top-section ">
+<section class="top-section" style="padding: 6rem 0rem;">
 	<div class='container pb-5'>
 		<h1>{{ education_settings.portal_title }}</h1>
 		<p class='lead'>{{ education_settings.description }}</p>
@@ -54,42 +58,4 @@
 		</p>
 	</div>
 </section>
-<section class="section-padding section-bg">
-	<div class='container'>
-	<div class='card-deck'>
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/balloon.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Curated Courses</h5>
-				<div>Start with a 14 day trial to get instant access to your own ERPNext Instance. Get expert support and world class hosting too.</div>
-			</div>
-		</div>
-
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/umbrella.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Built by Experts</h5>
-				<div>For self hosted users, ERPNext Support provides you the priority support and bug fix guarantee, so you can stop worrying.</div>
-			</div>
-		</div>
-
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/sun.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Learn from the OEMs</h5>
-				<div>ERPNext is open source and infinitely extensible. Customize it, build upon it, add your own apps built with <a href="https://frappe.io/frappe" class="underline">Frappe Framework</a>.</div>
-			</div>
-		</div>
-	</div>
-	</div>
-</section>
-<section class='section-padding'>
-	<div class='container text-center'>
-		<h3 class='text-center'>About ERPNext</h3>
-		<p class='lead'>ERPNext is the world's best 100% open source ERP used by over 5000 companies worldwide.</p>
-		<div class='mt-4 '>
-			<a class="btn btn-primary btn-lg" href="/pricing">Start Learning</a>
-		</div>
-	</div>
-</section>
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index ffed8e9ee0..f77b514801 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/erpnext/www/lms/macros/card.html
@@ -11,7 +11,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ program.program_name }}</h5>
-			<div>{{ program.description or '' }}</div>
+			<div class="text-muted">{{ program.description or '' }}</div>
 		</div>
 		{% if has_access or program.intro_video%}
 		<div class='card-footer'>
diff --git a/erpnext/www/lms/macros/hero.html b/erpnext/www/lms/macros/hero.html
index 85052e1171..66bb861c46 100644
--- a/erpnext/www/lms/macros/hero.html
+++ b/erpnext/www/lms/macros/hero.html
@@ -2,7 +2,7 @@
 	<div class='container pb-5'>
 		<div class="mb-3">
 			<a href="{{ back.url }}" class="text-muted">
-				<i class="octicon octicon-chevron-left"></i> Back to {{ back.name }}
+				Back to {{ back.name }}
 			</a>
 		</div>
 		<h1>{{ title }}</h1>
diff --git a/erpnext/www/lms/profile.html b/erpnext/www/lms/profile.html
index be4d677566..9508daedb7 100644
--- a/erpnext/www/lms/profile.html
+++ b/erpnext/www/lms/profile.html
@@ -2,6 +2,14 @@
 {% block title %}Profile{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
 
+{% block head_include %}
+	<style>
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+	</style>
+{% endblock %}
+
 {% macro card(program) %}
 <div class="col-sm-4 mb-4 text-left">
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
@@ -15,7 +23,7 @@
 					{% elif course.started %} <span class="indicator orange">
 					{% else %} <span class="indicator blue">
 					{% endif %}
-						<a class="text-muted" href="/lms/course?program={{ program.name }}&name={{ course.course }}">{{ course.course }}</a>
+						<a class="text-muted" href="/lms/course?name={{ course.name }}&program={{ program.name }}">{{ course.course }}</a>
 					</span>
 				</li>
 				{% endfor %}
@@ -35,7 +43,7 @@
 		<div class="mb-3 row">
 			<div class="col-md-7">
 				<a href="/lms" class="text-muted">
-					<i class="fa fa-chevron-left"></i> Back to Home
+					Back to Home
 				</a>
 			</div>
 			<div class="col-md-5 text-right">
diff --git a/erpnext/www/lms/program.html b/erpnext/www/lms/program.html
index 615abd50de..2cdf95ca55 100644
--- a/erpnext/www/lms/program.html
+++ b/erpnext/www/lms/program.html
@@ -28,6 +28,10 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
@@ -45,7 +49,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ course.course_name }}</h5>
-			<div>{{ course.description or '' }}</div>
+			<div class="text-muted">{{ course.description or '' }}</div>
 		</div>
 		{% if has_access and progress[course.name] %}
 		<div class='card-footer'>
diff --git a/erpnext/www/lms/topic.html b/erpnext/www/lms/topic.html
index bb960075f7..54685a7966 100644
--- a/erpnext/www/lms/topic.html
+++ b/erpnext/www/lms/topic.html
@@ -2,6 +2,14 @@
 {% block title %}Topic Title{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
 
+{% block head_include %}
+	<style>
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+	</style>
+{% endblock %}
+
 
 {% macro card(content, index, length) %}
 <div class="col-sm-{{ 12 if length%3 == 1 and index == 1 else 6 if length%3 == 2 and index in [1,2] else 4}} mb-4 text-left">