diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
new file mode 100644
index 0000000..3e00c79
--- /dev/null
+++ b/erpnext/www/lms/content.html
@@ -0,0 +1,136 @@
+{% extends "templates/base.html" %}
+{% block title %}{% endblock %}
+
+{% 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);
+		}
+
+		.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>
+	<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 }}</h1>
+		</div>
+		<div class="col-md-5 text-right">
+			{% if previous %}
+				<a href="/lms/content?course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn btn-outline-secondary'>Previous</a>
+			{% else %}
+				<a href="/lms/course?name={{ course }}" class='btn btn-outline-secondary'>Back to Course</a>
+			{% endif %}
+
+			{% if next %}
+				<button id="nextButton" onclick="handle('/lms/content?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 }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
+			{% endif %}
+		</div>
+	</div>
+{% endmacro %}
+
+{% macro video() %}
+<div class="mb-5">
+	{{ navigation() }}
+	<div class="text-muted">
+		{% if content.duration %}
+			{{ content.duration }} Mins
+		{% endif %}
+
+		{% if content.publish_date and content.duration%}
+			-
+		{% endif %}
+
+		{% if content.publish_date %}
+			Published on {{ content.publish_date.strftime('%d, %b %Y') }}
+		{% endif %}
+	</div>
+</div>
+<div id="player" data-plyr-provider="{{ content.provider|lower }}" data-plyr-embed-id="{{ content.url }}"></div>
+<div class="my-5">
+	{{ content.description }}
+</div>
+
+{% block script %}
+	<script src="https://cdn.plyr.io/3.5.3/plyr.js"></script>
+	<script>
+		const player = new Plyr('#player');
+
+		frappe.ready(() => {
+			next = document.getElementById('nextButton')
+			next.disabled = false;
+		})
+
+		function handle(url) {
+			frappe.call('ping').then((r) => {
+				frappe.call("add_activity",
+					{
+						course: {{ course }},
+						content_type: {{ content_type }},
+						content: {{ content.name }},
+					}
+				)
+			})
+		}
+	</script>
+{% endblock %}
+{% endmacro %}
+
+{% macro article() %}
+<div class="mb-5">
+	{{ navigation() }}
+	<div class="text-muted">
+		{% if content.author or content.publish_date %}
+			Published
+		{% endif %}
+		{% if content.author %}
+			by {{ content.author }}
+		{% endif %}
+		{% if content.publish_date %}
+			on {{ content.publish_date.strftime('%d, %b %Y') }}
+		{% endif %}
+	</div>
+</div>
+<div>
+	{{ content.content }}
+</div>
+{% endmacro %}
+
+{% block content %}
+<section class="section">
+	<div>
+		<div class='container pb-5'>
+			{% if content_type=='Video' %}
+				{{ video() }}
+			{% elif content_type=='Article'%}
+				{{ article() }}
+			{% elif content_type=='Quiz' %}
+				<h2>Quiz: {{ content.name }}</h2>
+			{% endif %}
+		</div>
+	</div>
+</section>
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/lms/content.py b/erpnext/www/lms/content.py
new file mode 100644
index 0000000..9d26a32
--- /dev/null
+++ b/erpnext/www/lms/content.py
@@ -0,0 +1,39 @@
+from __future__ import unicode_literals
+import erpnext.education.utils as utils
+import frappe
+
+no_cache = 1
+
+def get_context(context):
+	context.course = frappe.form_dict['course']
+	context.topic = frappe.form_dict['topic']
+	content = frappe.form_dict['content']
+	context.content_type = frappe.form_dict['type']
+
+	context.content = frappe.get_doc(context.content_type, content).as_dict()
+
+	context.previous = get_previous_content(context.topic, context.course, context.content, context.content_type)
+
+	context.next = get_next_content(context.topic, context.course, context.content, context.content_type)
+
+def get_next_content(topic, course, content, content_type):
+	if frappe.session.user == "Guest":
+		return None
+	topic = frappe.get_doc("Topic", topic)
+	content_list = [{'content_type':item.doctype, 'content':item.name} for item in topic.get_contents()]
+	current_index = content_list.index({'content': content.name, 'content_type': content_type})
+	try:
+		return content_list[current_index + 1]
+	except IndexError:
+		return None
+
+def get_previous_content(topic, course, content, content_type):
+	if frappe.session.user == "Guest":
+		return None
+	topic = frappe.get_doc("Topic", topic)
+	content_list = [{'content_type':item.doctype, 'content':item.name} for item in topic.get_contents()]
+	current_index = content_list.index({'content': content.name, 'content_type': content_type})
+	if current_index == 0:
+		return None
+	else:
+		return content_list[current_index - 1]
\ No newline at end of file