diff --git a/lms/lms/doctype/lms_class/lms_class.py b/lms/lms/doctype/lms_class/lms_class.py
index 203ab4a4..60726434 100644
--- a/lms/lms/doctype/lms_class/lms_class.py
+++ b/lms/lms/doctype/lms_class/lms_class.py
@@ -75,12 +75,11 @@ def add_student(email, class_name):
 @frappe.whitelist()
 def remove_student(student, class_name):
 	frappe.db.delete("Class Student", {"student": student, "parent": class_name})
-	return True
 
 
 @frappe.whitelist()
 def remove_course(course, parent):
-	frappe.db.delete("Class Course", {"name": course, "parent": parent})
+	frappe.db.delete("Class Course", {"course": course, "parent": parent})
 
 
 @frappe.whitelist()
diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index e4f532bd..c04f26b1 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -124,7 +124,7 @@ textarea.field-input {
 	border-bottom: none;
 }
 
-.level {
+.outline-lesson .level {
 	justify-content: start;
 }
 
@@ -526,24 +526,6 @@ input[type=checkbox] {
   margin: 0.25rem 0;
 }
 
-.button {
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem 1.25rem;
-  font-size: var(--text-md);
-  line-height: 20px;
-  box-shadow: var(--btn-shadow);
-  border: none;
-  width: fit-content;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-}
-
 .wide-button {
 	padding: 0.3rem 4rem;
 	width: 100%;
@@ -555,35 +537,6 @@ input[type=checkbox] {
 	}
 }
 
-.is-secondary {
-  background: #FFFFFF;
-  color: var(--gray-900);
-}
-
-.is-secondary:hover {
-  text-decoration: none;
-  color: var(--gray-900);
-}
-
-.is-default {
-  background: var(--gray-100);
-  color: var(--gray-900);
-}
-
-.is-default:disabled {
-  color: var(--gray-500);
-}
-
-.is-primary {
-  background: var(--primary-color);
-  color: #FFFFFF;
-}
-
-.is-primary:hover {
-  text-decoration: none;
-  color: #FFFFFF;
-}
-
 .course-home-page .course-home-outline {
 	padding-bottom: 4rem;
 }
@@ -2194,3 +2147,11 @@ select {
 	background-color: var(--red-50);
 }
 
+.list-row {
+	border-bottom: 1px solid var(--gray-300);
+	padding: 0.75rem 0;
+}
+
+.list-row:last-child {
+	border-bottom: none;
+}
\ No newline at end of file
diff --git a/lms/www/classes/class.html b/lms/www/classes/class.html
index 1738e6d7..e115cb31 100644
--- a/lms/www/classes/class.html
+++ b/lms/www/classes/class.html
@@ -31,10 +31,10 @@
 {% macro ClassDetails(class_info) %}
 <div class="class-details" data-class="{{ class_info.name }}">
 
-	<div class="course-home-headings">
+	<div class="page-title">
 		{{ class_info.title }}
 	</div>
-	<div class="mt-2">
+	<div class="mt-1">
 		<svg class="icon icon-sm">
 			<use href="#icon-calendar"></use>
 		</svg>
@@ -46,7 +46,7 @@
 		</span>
 	</div>
 	{% if class_info.description %}
-	<div class="">
+	<div class="mt-1">
 		{{ class_info.description }}
 	</div>
 	{% endif %}
@@ -62,20 +62,28 @@
 {% macro ClassSections(class_info, class_courses, class_students, published_courses) %}
 <div class="mt-4">
 
-	<button class="btn btn-secondary btn-sm pull-right" id="create-class">
+	{% if is_moderator %}
+	<button class="btn btn-default btn-sm pull-right" id="create-class">
 		{{ _("Edit") }}
 	</button>
+	{% endif %}
 
 	<ul class="nav lms-nav" id="classes-tab">
 		<li class="nav-item">
 			<a class="nav-link active" data-toggle="tab" href="#courses">
 				{{ _("Courses") }}
+				<span class="course-list-count">
+					{{ class_courses | length }}
+				</span>
 			</a>
 		</li>
 
 		<li class="nav-item">
 			<a class="nav-link" data-toggle="tab" href="#students">
 				{{ _("Students") }}
+				<span class="course-list-count">
+					{{ class_students | length }}
+				</span>
 			</a>
 		</li>
 
@@ -114,30 +122,41 @@
 {% macro CoursesSection(class_info, class_courses, published_courses) %}
 <article>
 	<header class="mb-5">
-		{% if is_moderator %}
-		<button class="btn btn-secondary btn-sm btn-add-course pull-right">
-			{{ _("Add Courses") }}
-		</button>
-		{% endif %}
-		<div class="bold-heading">
-			{{ _("Courses") }}
+		<div class="edit-header">
+			<div class="bold-heading">
+				{{ _("Courses") }}
+			</div>
+			{% if is_moderator %}
+			<button class="btn btn-default btn-sm btn-add-course">
+				{{ _("Add Courses") }}
+			</button>
+			{% endif %}
 		</div>
 	</header>
 
+	{% if class_courses | length %}
 	<div>
 		{% for course in class_courses %}
-		<div class="mb-4">
-			<div class="pull-right">
-				<svg class="icon icon-md pull-right btn-remove-course" data-course="{{ course.name }}">
+		<div class="list-row level">
+			<div {% if is_moderator %} class="clickable" {% endif %}>
+				{{ course.title }}
+			</div>
+			{% if is_moderator %}
+			<div type="button" class="btn-remove-course" data-course="{{ course.course }}">
+				<svg class="icon icon-sm">
 					<use href="#icon-delete"></use>
 				</svg>
 			</div>
-			<div>
-				{{ course.title }}
-			</div>
+			{% endif %}
 		</div>
 		{% endfor %}
 	</div>
+	{% else %}
+	<div class="">
+		{{ _("No courses") }}
+	</div>
+	{% endif %}
+
 
 </article>
 
@@ -145,66 +164,63 @@
 
 
 {% macro StudentsSection(class_info, class_students) %}
-<div class="">
-
+<article>
 	<header>
-		<div class="pull-right">
-			<button class="btn btn-secondary btn-sm btn-add-student">
+		<div class="edit-header mb-5">
+			<div class="bold-heading">
+				{{ _("Students") }}
+			</div>
+			{% if is_moderator %}
+			<button class="btn btn-default btn-sm btn-add-student">
 				{{ _("Add Students") }}
 			</button>
-		</div>
-		<div class="bold-heading">
-			{{ _("Students") }}
+			{% endif %}
 		</div>
 	</header>
 
 	{% if class_students | length %}
-	<table class="table">
-		<tr>
-			<th style="width: 70%">
-				{{ _("Student") }}
-			</th>
-			<th style="width: 20%">
-				{{ _("Last Active") }}
-			</th>
-			{% if is_moderator %}
-			<th style="width: 10%"></th>
-			{% endif %}
-		</tr>
+	<div>
 		{% for student in class_students %}
 		{% set last_active = frappe.db.get_value("User", student.student, "last_active") %}
 		{% set allow_progress = is_moderator or student.student == frappe.session.user or (frappe.db.get_single_value("LMS Settings", "allow_student_progress") and
 		is_student) %}
-		<tr>
-			<td>
-				<a class="subheading button-links d-block" {% if allow_progress %} href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
+
+		<div class="list-row level">
+			<div>
+				<a {% if allow_progress %} class="clickable" href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
 					{{ student.student_name }}
 				</a>
-			</td>
-			<td>
-				{{ frappe.utils.format_datetime(last_active, "medium") }}
-			</td>
+			</div>
 			{% if is_moderator %}
-			<td>
-				<svg class="icon icon-md pull-right remove-student" data-student="{{ student.student }}">
+			<div type="button" class="btn-remove-student" data-student="{{ student.student }}">
+				<svg class="icon icon-sm">
 					<use href="#icon-delete"></use>
 				</svg>
-			</td>
+			</div>
 			{% endif %}
-		</tr>
+		</div>
+
 		{% endfor %}
-
-	</table>
+	</div>
 	{% else %}
-	<p class="text-muted mt-3"> {{ _("No Students are added to this class.") }} </p>
+	<p class="text-muted mt-3"> {{ _("No Students") }} </p>
 	{% endif %}
-
-</div>
+</article>
 {% endmacro %}
 
 
 {% macro LiveClassSection(class_info, live_classes) %}
-<div>
+<article>
+	<header class="edit-header">
+		<div class="bold-heading">
+			{{ _("Live Class") }}
+		</div>
+		{% if is_moderator %}
+		<button class="btn btn-default btn-sm" id="open-class-modal">
+			{{ _("Create a Live Class") }}
+		</button>
+		{% endif %}
+	</header>
 	{{ CreateLiveClass(class_info) }}
 	{{ LiveClassList(class_info, live_classes) }}
 </div>
@@ -214,9 +230,6 @@
 {% macro CreateLiveClass(class_info) %}
 
 {% if is_moderator %}
-<button class="btn btn-secondary btn-sm" id="open-class-modal">
-	{{ _("Create a Live Class") }}
-</button>
 
 <div class="modal fade live-class-modal" id="live-class-modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
@@ -249,7 +262,8 @@
 
 
 {% macro LiveClassList(class_info, live_classes) %}
-<div class="lms-card-parent mt-8">
+<div class="lms-card-parent mt-5">
+	{% if live_classes | length %}
 	{% for class in live_classes %}
 	<div class="lms-card">
 
@@ -295,6 +309,9 @@
 
 	</div>
 	{% endfor %}
+	{% else %}
+	<p class=""> {{ _("No Live Classes") }} </p>
+	{% endif %}
 </div>
 {% endmacro %}
 
@@ -318,10 +335,4 @@
 	{% endif %}
 
     {{ include_script('controls.bundle.js') }}
-{% endblock %}
-
-{% set classes = frappe.get_all("LMS Class", filters = {
-    "start_date": [">", frappe.utils.getdate()],
-    "title": ["like", "%ERPNext%"]
-    }, fields=["name", "title", "start_date", "end_date"])
-%}
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/lms/www/classes/class.js b/lms/www/classes/class.js
index 54c8f487..686f99c7 100644
--- a/lms/www/classes/class.js
+++ b/lms/www/classes/class.js
@@ -3,7 +3,7 @@ frappe.ready(() => {
 		show_student_modal(e);
 	});
 
-	$(".remove-student").click((e) => {
+	$(".btn-remove-student").click((e) => {
 		remove_student(e);
 	});
 
@@ -323,26 +323,6 @@ const get_timezones = () => {
 	];
 };
 
-const make_add_students_section = () => {
-	this.field_group = new frappe.ui.FieldGroup({
-		fields: [
-			{
-				fieldname: "student_input",
-				fieldtype: "Link",
-				options: "User",
-				label: "Add Student",
-				filters: {
-					ignore_user_type: 1,
-				},
-			},
-		],
-		body: $(".add-students").get(0),
-	});
-	this.field_group.make();
-	$(".add-students .form-section:last").removeClass("empty-section");
-	$(".add-students .frappe-control").removeClass("hide-control");
-};
-
 const show_course_modal = () => {
 	let course_modal = new frappe.ui.Dialog({
 		title: "Add Course",
@@ -354,6 +334,12 @@ const show_course_modal = () => {
 				fieldname: "course",
 				reqd: 1,
 			},
+			{
+				fieldtype: "HTML",
+				fieldname: "instructions",
+				label: __("Instructions"),
+				options: __("Select a course to add to this class."),
+			},
 		],
 		primary_action_label: __("Add"),
 		primary_action(values) {
@@ -383,25 +369,31 @@ const show_course_modal = () => {
 		},
 	});
 	course_modal.show();
+	setTimeout(() => {
+		$(".modal-body").css("min-height", "200px");
+		$(".modal-body input").focus();
+	}, 1000);
 };
 
 const remove_course = (e) => {
-	frappe.call({
-		method: "lms.lms.doctype.lms_class.lms_class.remove_course",
-		args: {
-			course: $(e.target).data("course"),
-			parent: $(".class-details").data("class"),
-		},
-		callback(r) {
-			frappe.show_alert(
-				{
-					message: __("Course Removed"),
-					indicator: "green",
-				},
-				3
-			);
-			window.location.reload();
-		},
+	frappe.confirm("Are you sure you want to remove this course?", () => {
+		frappe.call({
+			method: "lms.lms.doctype.lms_class.lms_class.remove_course",
+			args: {
+				course: $(e.currentTarget).data("course"),
+				parent: $(".class-details").data("class"),
+			},
+			callback(r) {
+				frappe.show_alert(
+					{
+						message: __("Course Removed"),
+						indicator: "green",
+					},
+					3
+				);
+				window.location.reload();
+			},
+		});
 	});
 };
 
@@ -419,6 +411,14 @@ const show_student_modal = () => {
 					ignore_user_type: 1,
 				},
 			},
+			{
+				fieldtype: "HTML",
+				fieldname: "instructions",
+				label: __("Instructions"),
+				options: __(
+					"Please ensure a user account exists for the student before adding them to the class. Only users can be enrolled as students."
+				),
+			},
 		],
 		primary_action_label: __("Add"),
 		primary_action(values) {
@@ -448,4 +448,8 @@ const show_student_modal = () => {
 		},
 	});
 	student_modal.show();
+	setTimeout(() => {
+		$(".modal-body").css("min-height", "200px");
+		$(".modal-body input").focus();
+	}, 1000);
 };
diff --git a/lms/www/classes/class.py b/lms/www/classes/class.py
index 03b6e969..edc7b6eb 100644
--- a/lms/www/classes/class.py
+++ b/lms/www/classes/class.py
@@ -32,11 +32,17 @@ def get_context(context):
 	)
 
 	context.class_courses = frappe.get_all(
-		"Class Course", {"parent": class_name}, ["name", "course", "title"]
+		"Class Course",
+		{"parent": class_name},
+		["name", "course", "title"],
+		order_by="creation desc",
 	)
 
 	class_students = frappe.get_all(
-		"Class Student", {"parent": class_name}, ["student", "student_name", "username"]
+		"Class Student",
+		{"parent": class_name},
+		["student", "student_name", "username"],
+		order_by="creation desc",
 	)
 
 	for student in class_students:
diff --git a/lms/www/classes/index.html b/lms/www/classes/index.html
index c8438ac6..c1059373 100644
--- a/lms/www/classes/index.html
+++ b/lms/www/classes/index.html
@@ -6,40 +6,46 @@
 {% block page_content %}
 <div class="common-page-style lms-page-style">
 	<div class="container">
-		{% if is_moderator %}
-		<button class="btn btn-secondary btn-sm pull-right" id="create-class">
-			{{ _("Create Class") }}
-		</button>
-		{% endif %}
-		<div class="course-home-headings"> {{ _("All Classes") }} </div>
+		{{ Header() }}
 		{% if past_classes | length or upcoming_classes | length %}
 		{{ ClassTabs(past_classes, upcoming_classes) }}
 		{% else %}
-		<div class="empty-state">
-			<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
-			<div class="empty-state-text">
-				<div class="empty-state-heading">{{ _("No Classes") }}</div>
-				<div class="course-meta">{{ _("Nothing to see here.") }}</div>
-			</div>
-		</div>
+		{{ EmptyState() }}
 		{% endif %}
 	</div>
 </div>
 {% endblock %}
 
+{% macro Header() %}
+<header class="edit-header">
+	<div class="page-title mb-6"> {{ _("All Classes") }} </div>
+	{% if is_moderator %}
+	<button class="btn btn-default btn-sm pull-right" id="create-class">
+		{{ _("Create Class") }}
+	</button>
+	{% endif %}
+</header>
+{% endmacro %}
+
 {% macro ClassTabs(past_classes, upcoming_classes) %}
 <article>
 	<ul class="nav lms-nav" id="courses-tab">
 
 		<li class="nav-item">
 			<a class="nav-link active" data-toggle="tab" href="#upcoming">
-				{{ _("Upcoming") }} ({{ upcoming_classes | length }})
+				{{ _("Upcoming") }}
+				<span class="course-list-count">
+					{{ upcoming_classes | length }}
+				</span>
 			</a>
 		</li>
 
 		<li class="nav-item">
 			<a class="nav-link" data-toggle="tab" href="#past">
-				{{ _("Past Classes") }} ({{ past_classes | length }})
+				{{ _("Past Classes") }}
+				<span class="course-list-count">
+					{{ past_classes | length }}
+				</span>
 			</a>
 		</li>
 
@@ -64,14 +70,18 @@
 <div class="lms-card-parent">
 	{% for class in classes %}
 	{% set course_count = frappe.db.count("Class Course", {"parent": class.name}) %}
-    {% set student_count = frappe.db.count("Class Student", {"parent": class.name}) %}
+	{% set student_count = frappe.db.count("Class Student", {"parent": class.name}) %}
 
 	<div class="lms-card">
 
-		<div class="text-muted small mb-2">
+		<div class="lms-card-title mb-4">
+			{{ class.title }}
+		</div>
+
+		<!-- <div class="text-muted small mb-4">
 			{% if course_count %}
 			<span class="mr-3">
-				{{ course_count }} {{ _("Courses") }}
+
 			</span>
 			{% endif %}
 
@@ -80,17 +90,7 @@
 				{{ student_count }} {{ _("Students") }}
 			</span>
 			{% endif %}
-
-			{% if class.seats_left %}
-			<span class="indicator-pill yellow pull-right">
-				{{ class.seats_left }} {{ _("seats left") }}
-			</span>
-			{% endif  %}
-		</div>
-
-		<div class="lms-card-title mb-4">
-			{{ class.title }}
-		</div>
+		</div> -->
 
 		<div class="">
 			<svg class="icon icon-sm">
@@ -104,18 +104,27 @@
 			</span>
 		</div>
 
-		{% if class.paid_class and class.start_date > frappe.utils.getdate() %}
-		<a class="btn btn-secondary btn-sm mt-4">
-			{{ _("Register") }}
-		</a>
-		{% endif  %}
-
 		<a class="stretched-link" href="/classes/{{ class.name }}"></a>
 	</div>
 	{% endfor %}
 </div>
 {% endmacro %}
 
+{% macro EmptyState() %}
+<div class="empty-state">
+	<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
+	<div class="empty-state-text">
+		<div class="empty-state-heading">{{ _("No Classes") }}</div>
+		<div class="course-meta">{{ _("Nothing to see here.") }}</div>
+	</div>
+</div>
+{% endmacro %}
+
+{% block style %}
+	{{ super() }}
+	{{ include_style('controls.bundle.css') }}
+{% endblock %}
+
 {%- block script %}
     {{ super() }}
     {{ include_script('controls.bundle.js') }}
diff --git a/lms/www/classes/index.py b/lms/www/classes/index.py
index 58e7510d..379c481a 100644
--- a/lms/www/classes/index.py
+++ b/lms/www/classes/index.py
@@ -13,12 +13,6 @@ def get_context(context):
 
 	past_classes, upcoming_classes = [], []
 	for class_ in classes:
-		if class_.seat_count:
-			filled_seats = frappe.db.count(
-				"Class Student",
-				filters={"parent": class_.name},
-			)
-			class_.seats_left = class_.seat_count - filled_seats
 
 		if getdate(class_.start_date) < getdate():
 			past_classes.append(class_)
diff --git a/lms/www/courses/create.html b/lms/www/courses/create.html
index fcc21299..3fff7c13 100644
--- a/lms/www/courses/create.html
+++ b/lms/www/courses/create.html
@@ -64,7 +64,7 @@
                 {{ _("Short Introduction") }}
             </div>
             <div class="field-description">
-                {{ _("A one line breif description") }}
+                {{ _("A one line brief description") }}
             </div>
         </div>
         <div class="">
diff --git a/lms/www/jobs/index.html b/lms/www/jobs/index.html
index 54971584..da82e70f 100644
--- a/lms/www/jobs/index.html
+++ b/lms/www/jobs/index.html
@@ -7,7 +7,7 @@
 
     <div class="container">
         {% if allow_posting %}
-        <a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+        <a class="btn btn-primary btn-sm pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
         {% endif %}
 
         <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
diff --git a/lms/www/jobs/job.html b/lms/www/jobs/job.html
index e148e218..9e1db41c 100644
--- a/lms/www/jobs/job.html
+++ b/lms/www/jobs/job.html
@@ -35,10 +35,10 @@
 
                     {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
                     <div class="job-actions">
-                        <a class="button is-primary mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
-                        <div class="button is-default mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
+                        <a class="btn btn-primary btn-sm mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
+                        <div class="btn btn-default btn-sm mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
                         {% if job.owner == frappe.session.user %}
-                        <a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
+                        <a class="btn btn-defaultb btn-sm button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
                         {% endif %}
                     </div>