diff --git a/school/lms/web_template/course_cards/course_cards.html b/school/lms/web_template/course_cards/course_cards.html
index 437ab432..16ef3012 100644
--- a/school/lms/web_template/course_cards/course_cards.html
+++ b/school/lms/web_template/course_cards/course_cards.html
@@ -6,4 +6,10 @@
     {{ widgets.CourseCard(course=course, read_only=False) }}
     {% endfor %}
   </div>
+  <a class="button-links d-flex justify-content-center mt-10 intercative-link" style="color: var(--gray-800);" href="/courses">
+    <div>
+      Explore More
+    </div>
+    <img src="/assets/school/icons/arrow.svg" class="ml-2"/>
+  </a>
 </div>
diff --git a/school/lms/web_template/courses_enrolled/courses_enrolled.html b/school/lms/web_template/courses_enrolled/courses_enrolled.html
index 6f05187d..b0dc295e 100644
--- a/school/lms/web_template/courses_enrolled/courses_enrolled.html
+++ b/school/lms/web_template/courses_enrolled/courses_enrolled.html
@@ -16,7 +16,7 @@
   {% set site_name = frappe.db.get_single_value("System Settings", "app_name") %}
   <div class="empty-state">
     <div class="course-home-headings text-center mb-0" style="color: inherit;">You haven't enrolled for any courses</div>
-    <p class="text-center mb-8">Here are a few courses we recommend for you to get started with {{ site_name }}</p>
+    <p class="small text-center mb-8">Here are a few courses we recommend for you to get started with {{ site_name }}</p>
     {% set recommended_courses = [course1, course2, course3] %}
     <div class="cards-parent">
     {% for recommended_course in recommended_courses %}
diff --git a/school/lms/widgets/CourseCard.html b/school/lms/widgets/CourseCard.html
index f826b9e0..0c84e952 100644
--- a/school/lms/widgets/CourseCard.html
+++ b/school/lms/widgets/CourseCard.html
@@ -77,36 +77,36 @@
 
   {% if certificate %}
   <div class="view-course-link is-default">
-    _("Get Certificate") <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Get Certificate") }}
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
 
   {% elif course.enable_certification and progress == 100 %}
   <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
-    {{ _("Get Certificate") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Get Certificate") }}
   </div>
 
   {% elif progress == 100 %}
   <div class="view-course-link is-default">
-    {{ _("Course Completed") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Course Completed") }}
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
   {% elif course.upcoming %}
   <div class="view-course-link is-secondary border">
-    {{ _("Upcoming Course") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Upcoming Course") }}
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
   {% elif membership %}
   <div class="view-course-link is-primary">
-    {{ _("Continue Course") }} <img class="ml-1" src="/assets/school/icons/white-arrow.svg" />
+    {{ _("Continue Course") }}
   </div>
   <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
 
   {% else %}
   <div class="view-course-link is-default">
-    {{ _("View Course") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("View Course") }}
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html
index b0aecb4c..89264fe8 100644
--- a/school/lms/widgets/Reviews.html
+++ b/school/lms/widgets/Reviews.html
@@ -37,18 +37,19 @@
   </div>
 
   {% else %}
-  <div class="common-card-style thread-card">
-    <div class="w-25 text-center" style="margin: 0 auto;">
-      <span class="font-weight-bold"> No Reviews </span>
-      <div class="small">
-        There are no reviews for this course.
-      </div>
-      {% if course.is_eligible_to_review(membership) %}
+  <div class="empty-state text-center">
+    <img class="icon icon-xl" src="/assets/frappe/icons/timeless/message.svg">
+    <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("Review the course") }} </div>
+    <div class="small mb-6"> {{ _("Help us improve our course material.") }} </div>
+    {% if course.is_eligible_to_review(membership) %}
       <span class="review-link button is-secondary ml-auto mr-auto mt-3">
         Write a review
       </span>
-      {% endif %}
-    </div>
+    {% elif frappe.session.user == "Guest" %}
+    <a class="button is-secondary dark-links ml-auto mr-auto mt-3" href="/login?redirect-to=/courses/{{ course.name }}"> {{ _("Login") }} </a>
+    {% elif not membership %}
+    <div class="button is-secondary join-batch ml-auto mr-auto mt-3" data-course="{{ course.name | urlencode }}"> {{ _("Start Learning") }} </div>
+    {% endif %}
   </div>
   {% endif %}
 </div>
diff --git a/school/public/css/school.bundle.less b/school/public/css/school.bundle.less
index 84e96562..f420befa 100644
--- a/school/public/css/school.bundle.less
+++ b/school/public/css/school.bundle.less
@@ -1,3 +1,2 @@
 
 @import "./style.css";
-@import "./vars.css";
diff --git a/school/public/css/style.css b/school/public/css/style.css
index c0f3c1df..2feca386 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -1,26 +1,5 @@
 :root {
-  --c1: #fefae0;
-  --c2: #264653;
-  --c3: #e9c46a;
-  --c4: #2a9d8f;
-  --c5: #f4a261;
-  --c6: #e76f51;
-  --c7: #ccd5ae;
-  --c8: #EEEEEE;
-  --bg: var(--c1);
-  --header-bg: var(--c2);
-  --header-color: var(--c3);
-  --tag-color: var(--c7);
-  --sidebar-bg: var(--c7);
-  --h-color: var(--c2);
-  --text-color: #192734;
-  --text-color-light: #ccc;
-  --cta-color: var(--c4);
-  --send-message: var(--c7);
-  --received-message: var(--c8);
-  --checkbox-size: 14px;
-  --control-bg: var(--gray-100);
-  --button-background: #EEF0F2;
+  --text-color-dark: #192734;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;
@@ -29,6 +8,7 @@
   --text-xl: 18px;
   --text-2xl: 20px;
   --text-3xl: 22px;
+  --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08)
 }
 
 input[type=checkbox] {
@@ -106,7 +86,7 @@ input[type=checkbox] {
   border-radius: 8px;
   position: relative;
   border: 1px solid #EEF0F2;
-  box-shadow: 0 0px 4px 2px #19273405;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .course-card {
@@ -138,7 +118,7 @@ input[type=checkbox] {
   font-size: 18px;
   line-height: 156%;
   letter-spacing: -0.014em;
-  color: var(--text-color);
+  color: var(--text-color-dark);
   align-self: stretch;
   margin-bottom: 1.5rem;
   height: 56px;
@@ -164,7 +144,7 @@ input[type=checkbox] {
   margin-left: 8px;
   font-size: 12px;
   line-height: 135%;
-  color: var(--text-color);
+  color: var(--text-color-dark);
 }
 
 .course-student-count {
@@ -414,7 +394,7 @@ input[type=checkbox] {
   font-weight: 600;
   font-size: 40px;
   line-height: 120%;
-  color: #192734;
+  color: var(--text-color-dark);
   margin-bottom: 8px;
 }
 
@@ -485,7 +465,7 @@ input[type=checkbox] {
 
 .is-default {
   background: #F4F5F6;
-  color: #1F272E;
+  color: var(--text-color-dark);
 }
 
 @media (max-width: 600px) {
@@ -730,7 +710,7 @@ input[type=checkbox] {
   font-weight: 600;
   font-size: var(--text-3xl);
   letter-spacing: -0.0175em;
-  color: #192734;
+  color: var(--text-color-dark);
   margin-bottom: 1rem;
 }
 
@@ -903,7 +883,7 @@ input[type=checkbox] {
   align-items: center;
   font-size: 12px;
   line-height: 135%;
-  color: var(--text-color);
+  color: var(--text-color-dark);
 }
 
 .course-details-outline {
@@ -1313,7 +1293,7 @@ pre {
 .certificate-heading {
   font-size: 3rem;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--text-color-dark);
 }
 
 .certificate-para {
@@ -1372,3 +1352,19 @@ pre {
   display: flex;
   align-items: center;
 }
+
+.navbar {
+  box-shadow: var(--navbar-shadow);
+}
+
+.interactive-arrow {
+  background-image: url("/assets/school/icons/arrow.svg");
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+.intercative-link:hover .interactive-arrow{
+  background-image: url("/assets/school/icons/blue-arrow.svg");
+  margin-left: 1.5rem;
+}
diff --git a/school/public/css/vars.css b/school/public/css/vars.css
deleted file mode 100644
index b499df29..00000000
--- a/school/public/css/vars.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Define all your css variables here. */
-:root {
-  --tag-color: #737373;
-  --sidebar-bg: #F6F6F6;
-  --sidebar-border: #C4C4C4;
-}
diff --git a/school/public/icons/arrow.svg b/school/public/icons/arrow.svg
new file mode 100644
index 00000000..93cefe4a
--- /dev/null
+++ b/school/public/icons/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5205 6.64645C15.3253 6.45118 15.0087 6.45118 14.8134 6.64645C14.6182 6.84171 14.6182 7.15829 14.8134 7.35355L18.9598 11.4999L4.00014 11.4958C3.724 11.4957 3.50008 11.7195 3.5 11.9956C3.49992 12.2718 3.72372 12.4957 3.99986 12.4958L18.9599 12.4999L14.8134 16.6464C14.6182 16.8417 14.6182 17.1583 14.8134 17.3536C15.0087 17.5488 15.3253 17.5488 15.5205 17.3536L20.5205 12.3536C20.7158 12.1583 20.7158 11.8417 20.5205 11.6464L15.5205 6.64645Z" fill="#1F272E"/>
+</svg>
diff --git a/school/public/icons/black-arrow.svg b/school/public/icons/black-arrow.svg
deleted file mode 100644
index b242af38..00000000
--- a/school/public/icons/black-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.9649 0.313118C8.76964 0.117856 8.45306 0.117856 8.2578 0.313118C8.06253 0.50838 8.06253 0.824963 8.2578 1.02023L10.7374 3.49985L1.16683 3.49719C0.890684 3.49712 0.666764 3.72091 0.666687 3.99705C0.66661 4.2732 0.890406 4.49712 1.16655 4.49719L10.7377 4.49985L8.2578 6.97978C8.06253 7.17505 8.06253 7.49163 8.2578 7.68689C8.45306 7.88215 8.76964 7.88215 8.9649 7.68689L12.2982 4.35356C12.4935 4.1583 12.4935 3.84171 12.2982 3.64645L8.9649 0.313118Z" fill="#4C5A67"/>
-</svg>
diff --git a/school/public/icons/blue-arrow.svg b/school/public/icons/blue-arrow.svg
new file mode 100644
index 00000000..2eed8ea1
--- /dev/null
+++ b/school/public/icons/blue-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5205 6.64645C15.3253 6.45118 15.0087 6.45118 14.8134 6.64645C14.6182 6.84171 14.6182 7.15829 14.8134 7.35355L18.9598 11.4999L4.00014 11.4958C3.724 11.4957 3.50008 11.7195 3.5 11.9956C3.49992 12.2718 3.72372 12.4957 3.99986 12.4958L18.9599 12.4999L14.8134 16.6464C14.6182 16.8417 14.6182 17.1583 14.8134 17.3536C15.0087 17.5488 15.3253 17.5488 15.5205 17.3536L20.5205 12.3536C20.7158 12.1583 20.7158 11.8417 20.5205 11.6464L15.5205 6.64645Z" fill="#2490EF"/>
+</svg>
diff --git a/school/public/icons/down-arrow1.svg b/school/public/icons/down-arrow1.svg
deleted file mode 100644
index cff41a0f..00000000
--- a/school/public/icons/down-arrow1.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<path d="M6 9l6 6 6-6"/>
-</svg>
\ No newline at end of file
diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html
index 1adf85bd..ad1bca49 100644
--- a/school/www/batch/learn.html
+++ b/school/www/batch/learn.html
@@ -113,9 +113,11 @@
 {% set condition = is_instructor if is_instructor else membership %}
 {% set doctype, docname = "Course Lesson", lesson.name %}
 {% set title = "Questions" %}
-{% set cta_title = "New Question" %}
+{% set cta_title = "Ask a Question" %}
 {% set button_name = "Start Learning" %}
 {% set redirect_to = "/courses/" + course.name %}
+{% set empty_state_title = "Have a doubt?" %}
+{% set empty_state_subtitle = "Post it here, our mentors will help you out." %}
 
 {% include "frappe/templates/discussions/discussions_section.html" %}
 {% endmacro %}