diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 1a6a62d4..46050580 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -1309,14 +1309,12 @@ pre {
 }
 
 .question-number {
-  padding: 0.25rem 0.75rem;
-  border-radius: 50%;
-  box-shadow: var(--shadow-sm);
+  padding-right: 0.25rem;
 }
 
 .option-text {
   padding: 0.75rem;
-  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
   flex: 1;
 }
diff --git a/lms/templates/quiz.html b/lms/templates/quiz.html
index fcf34e7b..a2e885e6 100644
--- a/lms/templates/quiz.html
+++ b/lms/templates/quiz.html
@@ -25,11 +25,11 @@
       <div class="question hide"
         data-question="{{ question.question }}" data-multi="{{ question.multiple }}" data-qt-index="{{ loop.index }}">
         <div class="question-header">
-            <div class="question-number">{{ loop.index }}</div>
+            <div class="question-number">{{ loop.index }}. </div>
             <div class="question-text">
                 {{ frappe.utils.md_to_html(question.question) }}
             </div>
-            <div class="course-meta"> {{ instruction }} </div>
+            <div class="small"> {{ instruction }} </div>
         </div>
 
         {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
@@ -38,7 +38,7 @@
         <div class="mb-2">
           <div class="custom-checkbox">
             <label class="quiz-label">
-              <div class="course-meta font-weight-bold ml-3"> {{ convert_number_to_character(loop.index - 1) }}</div>
+              <div class="course-meta font-weight-bold"> {{ convert_number_to_character(loop.index - 1) }}</div>
               <input class="option" value="{{ option | urlencode }}"
                 data-correct="{{ question['is_correct_' + loop.index | string] }}" {% if question.multiple %}
                 type="checkbox" {% else %} type="radio" name="{{ question.question | urlencode }}" {% endif %}>
@@ -48,7 +48,7 @@
 
           {% set explanation = question['explanation_' + loop.index | string] %}
           {% if explanation %}
-          <small class="explanation ml-3 hide">{{ explanation }}</small>
+          <small class="explanation ml-10 hide">{{ explanation }}</small>
           {% endif %}
         </div>
         {% endif %}
diff --git a/lms/www/batch/learn.js b/lms/www/batch/learn.js
index dc533e7d..17c0e076 100644
--- a/lms/www/batch/learn.js
+++ b/lms/www/batch/learn.js
@@ -237,7 +237,13 @@ const parse_options = () => {
 const add_icon = (element, icon) => {
   $(element).closest(".custom-checkbox").removeClass("active-option");
   var label = $(element).siblings(".option-text").text();
-  $(element).parent().empty().html(`<div class="option-text"><img class="mr-3" src="/assets/lms/icons/${icon}.svg"> ${label}</div>`);
+  $(element).siblings(".option-text").html(`
+    <div>
+        <img class="mr-3" src="/assets/lms/icons/${icon}.svg">
+        ${label}
+    </div>
+  `);
+  //$(element).parent().empty().html(`<div class="option-text"><img class="mr-3" src="/assets/lms/icons/${icon}.svg"> ${label}</div>`);
 };
 
 const add_to_local_storage = (quiz_name, current_index, answer, is_correct) => {