diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 214e75e5..d8e6b3aa 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -1996,7 +1996,7 @@ select {
     border-radius: 0.75rem;
     /* border: 1px solid var(--gray-200); */
 	box-shadow: var(--shadow-sm);
-    padding: 1rem;
+    padding: 0.5rem;
 	height: 100%;
 	position: relative;
 }
@@ -2015,4 +2015,15 @@ select {
 
 .add-students ul li:nth-last-child(-n+2) {
 	display: none;
-}
\ No newline at end of file
+}
+
+.lms-card-title {
+	color: var(--gray-900);
+	font-weight: 500;
+}
+
+.lms-card-parent {
+	display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-gap: 1.5rem;
+}
diff --git a/lms/public/icons/symbol-defs.svg b/lms/public/icons/symbol-defs.svg
index 167397e1..37a0ec86 100644
--- a/lms/public/icons/symbol-defs.svg
+++ b/lms/public/icons/symbol-defs.svg
@@ -70,4 +70,8 @@
 	<svg id="icon-green-check-circled" width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.8734 10.1402C17.264 9.74969 17.264 9.11652 16.8734 8.726C16.4829 8.33547 15.8498 8.33547 15.4592 8.726L14.6259 9.55933L12.9592 11.226L10.333 13.8522L9.37345 12.8927L8.54011 12.0593C8.14959 11.6688 7.51643 11.6688 7.1259 12.0593C6.73538 12.4499 6.73538 13.083 7.1259 13.4735L7.95923 14.3069L9.6259 15.9735C9.81344 16.1611 10.0678 16.2664 10.333 16.2664C10.5982 16.2664 10.8526 16.1611 11.0401 15.9735L14.3734 12.6402L16.0401 10.9735L16.8734 10.1402Z" fill="#68D391"/>
 	</svg>
+    <svg xmlns="http://www.w3.org/2000/svg" id="icon-clock" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1F272E" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 6 12 12 16 14"></polyline>
+    </svg>
 </svg>
diff --git a/lms/www/classes/class.html b/lms/www/classes/class.html
index e0399052..50270274 100644
--- a/lms/www/classes/class.html
+++ b/lms/www/classes/class.html
@@ -35,16 +35,15 @@
 		{{ class_info.title }}
 	</div>
 	<div class="mt-2">
-		{% if class_info.start_date %}
+		<svg class="icon icon-sm">
+			<use href="#icon-calendar"></use>
+		</svg>
 		<span>
-			{{ frappe.utils.format_date(class_info.start_date, "medium") }} -
+			{{ frappe.utils.format_date(class_info.start_date, "long") }} -
 		</span>
-		{% endif %}
-		{% if class_info.end_date %}
 		<span>
-			{{ frappe.utils.format_date(class_info.end_date, "medium") }}
+			{{ frappe.utils.format_date(class_info.end_date, "long") }}
 		</span>
-		{% endif %}
 	</div>
 	{% if class_info.description %}
 	<div class="">
@@ -166,7 +165,7 @@
 
 	</table>
 	{% else %}
-	<p class="text-muted mt-3"> {{ _("No Students are added to this class.") }} </p>
+	<p class="text-muted mt-3 ml-5"> {{ _("No Students are added to this class.") }} </p>
 	{% endif %}
 
 </div>
@@ -229,44 +228,50 @@
 
 
 {% macro LiveClassList(class_info, live_classes) %}
-<div class="cards-parent mt-8">
+<div class="lms-card-parent mt-8">
 	{% for class in live_classes %}
 	<div class="lms-card">
-		<div class="course-card-title mb-0">
-			{{ class.title }}
+
+		<div class="mb-0">
+			<div class="dropdown pull-right">
+				<svg class="icon icon-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<use href="#icon-dot-horizontal"></use>
+				</svg>
+				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+					{% if class.owner == frappe.session.user %}
+					<li>
+						<a class="dropdown-item small" href="{{ class.start_url }}"> {{ _("Start") }} </a>
+					</li>
+					{% endif %}
+					{% if is_student %}
+					<li>
+						<a class="dropdown-item small" href="{{ class.join_url }}"> {{ _("Join") }} </a>
+					</li>
+					{% endif %}
+
+				</ul>
+			</div>
+			<div class="lms-card-title mb-4">
+				{{ class.title }}
+			</div>
 		</div>
-		<div class="small">
-			{{ frappe.utils.format_date(class.date, "medium") }} {{ _("at") }}
+		<div>
+			<svg class="icon icon-sm">
+				<use href="#icon-calendar"></use>
+			</svg>
+			{{ frappe.utils.format_date(class.date, "full") }}
+		</div>
+		<div>
+			<svg class="icon icon-sm">
+				<use href="#icon-clock"></use>
+			</svg>
 			{{ frappe.utils.format_time(class.time, "hh:mm a") }}
 		</div>
-		<div class="my-4">
+
+		<div class="mt-4">
 			{{ class.description }}
 		</div>
 
-		<div class="live-class-panel">
-			{% if class.owner == frappe.session.user %}
-			<a class="btn btn-secondary btn-sm mr-2" target="_blank" href="{{ class.start_url }}">
-				{{ _("Start") }}
-			</a>
-			{% endif %}
-
-			{% if is_student %}
-			<a class="btn btn-secondary btn-sm mt-auto" target="_blank" href="{{ class.join_url }}">
-				{{ _("Join Class") }}
-			</a>
-			{% endif %}
-
-			<!-- {% if class.owner == frappe.session.user %}
-			<a class="btn btn-secondary btn-sm mr-2" href="{{ class.start_url }}">
-				{{ _("Edit") }}
-			</a>
-
-			<a class="btn btn-secondary btn-sm" href="{{ class.start_url }}">
-				{{ _("Delete") }}
-			</a>
-			{% endif %} -->
-		</div>
-
 	</div>
 	{% endfor %}
 </div>
diff --git a/lms/www/classes/index.html b/lms/www/classes/index.html
index 74e26d29..ad18f817 100644
--- a/lms/www/classes/index.html
+++ b/lms/www/classes/index.html
@@ -29,36 +29,40 @@
 
 
 {% macro ClassCards(classes) %}
-<div class="cards-parent">
+<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}) %}
 
 	<div class="lms-card">
-		<div class="text-muted small">
+
+		<div class="lms-card-title">
+			{{ class.title }}
+		</div>
+
+		<div class="text-muted small mb-4">
 			{% if course_count %}
-			<span>
+			<span class="mr-3">
 				{{ course_count }} {{ _("Courses") }}
 			</span>
 			{% endif %}
 
 			{% if student_count %}
-			<span class="ml-3">
+			<span>
 				{{ student_count }} {{ _("Students") }}
 			</span>
 			{% endif %}
 		</div>
 
-		<div class="course-card-title mb-4">
-			{{ class.title }}
-		</div>
-
 		<div class="">
+			<svg class="icon icon-sm">
+				<use href="#icon-calendar"></use>
+			</svg>
 			<span>
-				{{ frappe.utils.format_date(class.start_date, "medium") }} -
+				{{ frappe.utils.format_date(class.start_date, "long") }} -
 			</span>
 			<span>
-				{{ frappe.utils.format_date(class.end_date, "medium") }}
+				{{ frappe.utils.format_date(class.end_date, "long") }}
 			</span>
 		</div>
 		<a class="stretched-link" href="/classes/{{ class.name }}"></a>