Merge branch 'master' of https://github.com/FOSSEE/online_test into add-test-cases-for-QRcode-based-upload

44 files changed, 1564 insertions, 1323 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index cba56cb..73861c7 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -24,6 +24,8 @@
   <link rel="stylesheet" type="text/css" href="{% static 'yaksh/css/simplemde.min.css' %}">
   <link rel="stylesheet" href="{% static 'yaksh/css/toastr.min.css' %}" />
   <!-- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css -->
+  <link rel="stylesheet" href="{% static 'yaksh/css/argon.css' %}" />
+  <link rel="stylesheet" href="{% static 'yaksh/css/argon.min.css' %}" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
 
 
@@ -47,7 +49,12 @@
   </script>
   <script type="text/javascript" src="{% static 'yaksh/js/toastr.min.js' %}">
   </script>
-
+  <script type="text/javascript" src="{% static 'yaksh/js/js.cookie.js' %}">
+  </script>
+  <script type="text/javascript" src="{% static 'yaksh/js/argon.js' %}">
+  </script>
+  <script type="text/javascript" src="{% static 'yaksh/js/argon.min.js' %}">
+  </script>
   <!-- The loading of KaTeX is deferred to speed up page rendering -->
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
 
@@ -63,8 +70,8 @@
           document.body,
           {
             delimiters: [
-              {left: "$$", right: "$$", display: false},
-              {left: "$", right: "$", display: true},
+              {left: "$$", right: "$$", display: true},
+              {left: "$", right: "$", display: false},
             ]
           }
         );
@@ -100,32 +107,27 @@
   
   {% block nav %}
   {% endblock %}
-
-     <div class="base-content">
-         <div class="header">
-             <h3><center>{% block pagetitle %}{% endblock pagetitle %}</center></h3>
-         </div>
-         <h4><center>{% block subtitle %}{% endblock %}</center></h4>
-         {% block content %}
-         {% endblock %}
-     </div>
-     
-
-  {% block footer %}
+    <div class="base-content">
+       <div class="header">
+           <h3><center>{% block pagetitle %}{% endblock pagetitle %}</center></h3>
+       </div>
+       <h4><center>{% block subtitle %}{% endblock %}</center></h4>
+       {% block content %}
+       {% endblock %}
+       <br>
+    </div>
     <footer class="footer">
-          <div class="container">
-              <div class="row">
-                <div class="col">
-                  Developed by FOSSEE group, IIT Bombay
-                </div>
-                <div class="col">
-                  Contact: pythonsupport@fossee.in
-                </div>
-              </div>
-           </div>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            Developed by FOSSEE group, IIT Bombay
+          </div>
+          <div class="col">
+            Contact: pythonsupport@fossee.in
+          </div>
+        </div>
+      </div>
     </footer>
-  {% endblock %}
-
 </body>
 </html>
 
diff --git a/yaksh/templates/exam.html b/yaksh/templates/exam.html
index a773076..2290ca4 100644
--- a/yaksh/templates/exam.html
+++ b/yaksh/templates/exam.html
@@ -88,14 +88,14 @@
       </div>
       <br>
       <div>
-          <table class="table table-bordered table-responsive-sm">
-            <thead>
+          <table class="table table-dark table-responsive-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Category</th>
                 <th>Question No.</th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="list">
               {% for category, question_number in paper.get_categorized_question_indices.items %}
               <tr>
                 <td>
diff --git a/yaksh/templates/manage.html b/yaksh/templates/manage.html
index 047f784..7a2830c 100644
--- a/yaksh/templates/manage.html
+++ b/yaksh/templates/manage.html
@@ -65,14 +65,6 @@
     </ul>
     </div>
 </nav>
-<script type="text/javascript">
-    $(document).ready(function() {
-        $(".alert").delay(2000).slideUp(200, function() {
-            $(this).alert('close');
-        });
-    });
-</script>
-
 {% endblock %}
 {% block content %}
 <div class="container">
diff --git a/yaksh/templates/user.html b/yaksh/templates/user.html
index 7211d5c..40a5edd 100644
--- a/yaksh/templates/user.html
+++ b/yaksh/templates/user.html
@@ -15,6 +15,16 @@
             <li class="nav-item"><a class="nav-link" href="{% url 'yaksh:index' %}"><i class="fa fa-home" style="size: 18px"></i>&nbsp;Home</a></li>
         </ul>
         <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a class="nav-link" href="{% url 'yaksh:view_notifications' %}">
+                <i class="fa fa-bell" style="size: 18px"></i>&nbsp;Notifications
+                {% if request.custom_notifications > 0 %}
+                    <span class="badge badge-success badge-pill">
+                        {{request.custom_notifications}}
+                    </span>
+                {% endif %}
+              </a>
+            </li>
             <li class="nav-item dropdown my-lg-0" style="font-size: 1.2rem">
                 <a class="dropdown-toggle nav-link" id="user_dropdown" data-toggle="dropdown" href="#">{{user.get_full_name|title}}
                 </a>
@@ -43,14 +53,6 @@
     </nav>
 </div>
 {% endblock %}
-<script type="text/javascript">
-    $(document).ready(function() {
-        $(".alert").delay(2000).slideUp(200, function() {
-            $(this).alert('close');
-        });
-    });
-</script>
-
 {% block content %}  
   {% block main %}
     {% block navtab %}
diff --git a/yaksh/templates/yaksh/add_course.html b/yaksh/templates/yaksh/add_course.html
index 0072a95..1afa34b 100644
--- a/yaksh/templates/yaksh/add_course.html
+++ b/yaksh/templates/yaksh/add_course.html
@@ -6,13 +6,15 @@
 {% endblock %}
 
 {% block script %}
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'yaksh/js/jquery.datetimepicker.full.min.js' %}">
 </script>
+<script type="text/javascript" src="{% static 'yaksh/js/add_course.js' %}"></script>
 {% endblock %}
 {% block title %} Add Course {% endblock %}
 {% block pagetitle %} Add Course {% endblock %}
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row">
         <div class="col-md-8">
             <ul class="nav nav-pills" id="course_tabs">
@@ -35,10 +37,11 @@
         </div>
     </div>
     <hr>
+    <div class="container">
     <form name=frm id=frm action="" method="post" >
         {% csrf_token %}
         <center>
-        <table class="table table-bordered table-responsive-sm">
+        <table class="table table-responsive-sm">
         {{ form.as_table }}
         </table>
         <br/>
@@ -58,5 +61,6 @@
         </center>
         <br>
     </form>
+    </div>
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 4400032..137dbc3 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -11,6 +11,7 @@
 </script>
 <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
 </script>
+
 {% endblock %}
 
 {% block css %}
@@ -74,7 +75,9 @@
                                 <h3>Description Preview</h3>
                             </center>
                         </div>
-                        <div class="card-body" id="description_body" style="max-height: 400px; overflow-y: auto;">
+                        <div class="card-body">
+                        <div id="description_body" style="max-height: 400px; overflow-y: auto;">
+                        </div>
                         </div>
                     </div>
                     <br>
@@ -83,9 +86,12 @@
                     Active:&nbsp;{{lesson_form.active}}
                     <br><br>
                     Video Path:
-                    <span class="badge badge-info">
-                        {{lesson_form.video_path.help_text}}    
-                    </span>
+                    <a data-toggle="tooltip" id="video_msg">
+                        <i class="fa fa-question-circle"></i>
+                    </a>
+                    {{lesson_form.video_option}}
+                    <br><br>
+                    {{lesson_form.video_url}}
                     {{lesson_form.video_path}}
                     <br>
                     Video File:
@@ -132,12 +138,13 @@
                     </center>
                     {% endif %}
                     <center>
-                        <button class="btn btn-success btn-lg" type="submit" id="submit" name="Save">
+                        <button class="btn btn-success btn-lg" type="submit" id="submit-lesson" name="Save">
                             <i class="fa fa-save"></i>
                             Save
                         </button>
                         {% if lesson_files %}
-                        <button class="btn btn-danger btn-lg" type="submit" id="submit" name="Delete"> <i class="fa fa-trash"></i>&nbsp;Delete Files
+                        <button class="btn btn-danger btn-lg" type="submit" name="Delete">
+                            <i class="fa fa-trash"></i>&nbsp;Delete Files
                         </button>
                         {% endif %}
                     </center>
@@ -230,4 +237,4 @@
         </div>
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/yaksh/templates/yaksh/add_module.html b/yaksh/templates/yaksh/add_module.html
index aee50c1..9df194a 100644
--- a/yaksh/templates/yaksh/add_module.html
+++ b/yaksh/templates/yaksh/add_module.html
@@ -1,6 +1,8 @@
 {% extends "manage.html" %}
 {% load static %}
-{% block title %}Create/Edit Learning Module{% endblock %}
+{% block title %}
+    Create/Edit Learning Module
+{% endblock %}
 
 {% block script %}
 <script type="text/javascript" src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}">
diff --git a/yaksh/templates/yaksh/add_question.html b/yaksh/templates/yaksh/add_question.html
index 07e8c74..ba780b1 100644
--- a/yaksh/templates/yaksh/add_question.html
+++ b/yaksh/templates/yaksh/add_question.html
@@ -64,13 +64,11 @@
       <tr>
         <td> File: </td>
         <td>
-          <div class="input-group mb-3">
-            <div class="custom-file">
-              {{ fileform.file_field }}{{ fileform.file_field.errors }}
-                <label class="custom-file-label" for="id_file_field">
-                    Choose file
-                </label>
-            </div>
+          <div class="custom-file">
+            {{ fileform.file_field }}{{ fileform.file_field.errors }}
+              <label class="custom-file-label" for="id_file_field">
+                  Choose file
+              </label>
           </div>
         </td>
       </tr>
@@ -136,15 +134,15 @@
           <div id="accordion">
             {% for form in formset %}
               <div class="card">
-                <div class="card-header">
+                <div class="card-header bg-success">
                   <div class="row">
                     <div class="col-md-4">
-                      <span class="badge badge-info">
+                      <span class="badge badge-success">
                         Test case {{forloop.counter}}.
                       </span>
                     </div>
                     <div class="ml-auto">
-                      <a class="card-link" data-toggle="collapse" href="#collapse{{form.instance.id}}">
+                      <a class="card-link text-white" data-toggle="collapse" href="#collapse{{form.instance.id}}">
                         Details&nbsp;<i class="fa fa-angle-down"></i></i>
                       </a>
                     </div>
diff --git a/yaksh/templates/yaksh/add_quiz.html b/yaksh/templates/yaksh/add_quiz.html
index 9b80e0d..1609639 100644
--- a/yaksh/templates/yaksh/add_quiz.html
+++ b/yaksh/templates/yaksh/add_quiz.html
@@ -12,6 +12,7 @@
 {% block script %}
 
 <script src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 <script src="{% static 'yaksh/js/add_quiz.js' %}"></script>
 <script src="{% static 'yaksh/js/jquery.datetimepicker.full.min.js' %}"></script>
 <script type="text/javascript">
@@ -87,7 +88,6 @@
         </button>
       </div>
       <div class="modal-body">
-        <p>
           <b>Try as student:</b> Attempt quiz the way students will attempt i.e. -
               <ul class="list-group list-group-flush">
                 <li class="list-group-item">Quiz will have the same duration as that of the original quiz.</li>
@@ -95,7 +95,6 @@
                 <li class="list-group-item">You will be notified about quiz prerequisites.(You can still attempt the quiz though)</li>
               </ul>
           <b>Try as teacher:</b> Attempt quiz without any time or eligibilty constraints.
-        </p>
       </div>
     </div>
   </div>
diff --git a/yaksh/templates/yaksh/addteacher.html b/yaksh/templates/yaksh/addteacher.html
index 58f48d9..7f59de6 100644
--- a/yaksh/templates/yaksh/addteacher.html
+++ b/yaksh/templates/yaksh/addteacher.html
@@ -2,15 +2,14 @@
 <center><h3>Add Teachers/TAs</h3><br></center>
 <form action="{% url 'yaksh:search_teacher' course.id %}" method="post">
     {% csrf_token %}
-    <div class="form-group">
+    <div class="input-group">
         <input class="form-control form-control-lg" type="text" name="uname" id="inputLarge" placeholder="Search teachers with username, firstname, lastname, email" required>
+        <div class="input-group-append">
+            <button class="btn btn-info btn-lg" type="submit">
+            <i class="fa fa-search"></i>&nbsp;Search
+            </button>
+        </div>
     </div>
-    <center>
-        <button class="btn btn-info btn-lg" type="submit">
-            <i class="fa fa-search"></i>
-            Search
-        </button>
-    </center>
 </form>
 <br><br>
 
@@ -27,18 +26,29 @@
         <br>
         <form action="{% url 'yaksh:add_teacher' course.id %}" method="post">
         {% csrf_token %}
-        <table class="table table-striped table-responsive-sm course-detail">
-            <th></th>
-            <th>Username</th>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Email</th>
-            <th>Institute</th>
-            <th>Department</th>
-            <th>Position</th>
+        <div class="card">
+        {% if teachers|length > 10 %}
+        <div class="table-responsive" style="height: 700px">
+        {% else %}
+        <div class="table-responsive">
+        {% endif %}
+        <table class="table table-responsive-sm table-dark course-detail">
+            <thead class="thead-dark">
+                <tr>
+                <th></th>
+                <th>Username</th>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Email</th>
+                <th>Institute</th>
+                <th>Department</th>
+                <th>Position</th>
+                </tr>
+            </thead>
+            <tbody class="list">
             {% for teacher in teachers %}
                 {% if teacher not in course.get_teachers %}
-                <tr class="yakshgreen">
+                <tr>
                 <td><input type="checkbox" name="check" value="{{ teacher.id }}"></td>
                 <td>{{ teacher.username }}</td>
                 <td>{{ teacher.first_name }}</td>
@@ -50,7 +60,10 @@
                 </tr>
                 {% endif %}
             {% endfor %}
+            </tbody>
         </table>
+        </div>
+        </div>
         </br>
         <button class="btn btn-success btn-lg" type="submit">
             <i class="fa fa-plus-circle"></i>
diff --git a/yaksh/templates/yaksh/complete.html b/yaksh/templates/yaksh/complete.html
index 2b3897e..4d921e1 100644
--- a/yaksh/templates/yaksh/complete.html
+++ b/yaksh/templates/yaksh/complete.html
@@ -25,28 +25,27 @@
         <center>
         <div class="col-md-8">
             <h3>Submission Status</h3>
-            <table class="table table-bordered table-responsive-sm" >
-                <thead>
-                    <tr class="text-center">
+            <table class="table table-dark table-responsive-sm" >
+                <thead class="thead-dark">
+                    <tr>
                         <th> Question</th>
                         <th> Status </th>
                     </tr>
                 </thead>
-
+                <tbody class="list">
                 {% for question in paper.questions.all %}
-                    <tbody>
-                        {% if question in paper.questions_answered.all %}
-                            <tr class="table-success">
-                            <td> {{ question.summary }} </td>
-                            <td> Attempted </td>
-                        {% else %}
-                            <tr class="table-warning">
-                            <td> {{ question }} </td>
-                            <td> Not completed </td>
-                        {% endif %}
-                        </tr>
-                    </tbody>
+                    {% if question in paper.questions_answered.all %}
+                        <tr>
+                        <td> {{ question.summary }} </td>
+                        <td> <span class="badge badge-success">Attempted</span> </td>
+                    {% else %}
+                        <tr>
+                        <td> {{ question }} </td>
+                        <td> <span class="badge badge-warning">Not Attempted</span> </td>
+                    {% endif %}
+                    </tr>
                 {% endfor %}
+                </tbody>
             </table>
         </div>
         </center>
diff --git a/yaksh/templates/yaksh/course_added_modules.html b/yaksh/templates/yaksh/course_added_modules.html
index d420b95..9119180 100644
--- a/yaksh/templates/yaksh/course_added_modules.html
+++ b/yaksh/templates/yaksh/course_added_modules.html
@@ -1,3 +1,4 @@
+{% load custom_filters %}
 {% if is_modules %}
     {% block pagetitle %} <center> <h3>Course Modules</h3> </center> {% endblock %}
         <a href="{% url 'yaksh:add_module' course.id %}" class="btn btn-primary btn-lg">
@@ -45,11 +46,17 @@
                     <br>
                     {% with module.get_learning_units as units %}
                         {% if units %}
+                        {% if units|length > 5 %}
+                        <div class="table-responsive" style="height: 400px">
+                        {% else %}
+                        <div class="table-responsive">
+                        {% endif %}
                             <p><b><u>Lessons/Quizzes/Exercise</u></b><p>
                             <table class="table table-responsive-sm">
                                 {% for unit in units %}
                                     <tr>
-                                        <td>
+                                        <td>{{forloop.counter}}</td>
+                                        <td width="25%">
                                         {% if unit.type == "quiz" %}
                                             {% if unit.quiz.is_exercise %}
                                                 <a href="{% url 'yaksh:edit_exercise' course.id module.id unit.quiz.id %}">
@@ -69,12 +76,12 @@
                                             {% if quiz.questionpaper_set.get.id %}
                                                 <a href="{% url 'yaksh:designquestionpaper' course.id quiz.id quiz.questionpaper_set.get.id %}" class="btn btn-primary">
                                                   <i class="fa fa-edit"></i>
-                                                  Edit Question Paper
+                                                  Question Paper
                                                 </a>
                                             {% else %}
                                                 <a href="{% url 'yaksh:designquestionpaper' course.id quiz.id %}" class="btn btn-success">
                                                     <i class="fa fa-plus-circle"></i>
-                                                    Add Question Paper
+                                                    Question Paper
                                                 </a>
                                             {% endif %}
                                         {% endwith %}
@@ -95,6 +102,14 @@
                                         </td>
                                         <td>
                                             {% if unit.type == "quiz" %}
+                                                ----
+                                            {% else %}
+                                                {% get_lesson_views course.id unit.lesson.id as views %}
+                                                {{views.0}} completed out of {{views.1}}
+                                            {% endif %}
+                                        </td>
+                                        <td>
+                                            {% if unit.type == "quiz" %}
                                                 {% if unit.quiz.questionpaper_set.get.id %}
                                                     <a href="{% url 'yaksh:show_statistics' unit.quiz.questionpaper_set.get.id course.id %}" class="btn btn-outline-primary">
                                                         <i class="fa fa-line-chart"></i>
@@ -104,14 +119,29 @@
                                                     ----
                                                 {% endif %}
                                             {% else %}
-                                                <a href="{% url 'yaksh:lesson_statistics' course.id unit.lesson.id %}" class="btn btn-outline-primary">
-                                                    <i class="fa fa-line-chart"></i>&nbsp;Statistics
+                                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+                                                <button type="button" class="btn btn-outline-primary">
+                                                    <i class="fa fa-line-chart"></i>
+                                                    Statistics
+                                                </button>
+                                                <div class="btn-group" role="group">
+                                                <button id="btnGroupDrop1" type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
+                                                <a class="dropdown-item" href="{% url 'stats:view_lesson_watch_stats' course.id unit.lesson.id %}">
+                                                    Video Views
                                                 </a>
+                                                <a class="dropdown-item" href="{% url 'yaksh:lesson_statistics' course.id unit.lesson.id %}">
+                                                    Quiz Submissions
+                                                </a>
+                                                </div>
+                                                </div>
+                                                </div>
                                             {% endif %}
                                         </td>
                                     </tr>
                                 {% endfor %}
                             </table>
+                        </div>
                         {% else %}
                             <center>
                                 <span class="badge badge-warning">
diff --git a/yaksh/templates/yaksh/course_detail.html b/yaksh/templates/yaksh/course_detail.html
index 654f373..8661aea 100644
--- a/yaksh/templates/yaksh/course_detail.html
+++ b/yaksh/templates/yaksh/course_detail.html
@@ -24,69 +24,70 @@
     <p id="error_msg"></p>
 </div>
 <div class="container-fluid">
-    <div class="row">
-        <div class="col-sm-3">
-            {% include "yaksh/course_detail_options.html" %}
-        </div>
-        <div class="col-md-9">
-            <div class="tab-content">
-                {% if messages %}
-                    {% for message in messages %}
-                    <div class="alert alert-dismissible alert-{{ message.tags }}">
-                        <button type="button" class="close" data-dismiss="alert">
-                            <i class="fa fa-close"></i>
-                        </button>
-                        <strong>{{ message }}</strong>
-                    </div>
-                    {% endfor %}
-                {% endif %}
-                {% if is_students %}
-                    {% include "yaksh/course_students.html" %}
-                {% elif is_mail %}
-                    {% include "yaksh/course_send_mail.html" %}
-                {% elif is_progress %}
-                    {% include "yaksh/course_progress.html" %}
-                {% elif is_modules %}
-                    {% include "yaksh/course_added_modules.html" %}
-                {% elif is_design_course %}
-                    {% include "yaksh/design_course_session.html" %}
-                {% elif is_add_teacher %}
-                    {% include "yaksh/addteacher.html" %}
-                {% elif is_teachers %}
-                    {% include "yaksh/course_teachers.html" %}
-                {% else %}
-                    <div class="jumbotron">
-                        <h1 class="display-4">Manage Course</h1>
-                        <hr class="my-4">
-                        <p>
-                            <ul>
-                                <li>
-                                    Students enrollments
-                                </li>
-                                <li>
-                                    Add and View Modules, Lessons and Quizzes
-                                </li>
-                                <li>
-                                    Send mail to the students
-                                </li>
-                                <li>
-                                    View Students course progress
-                                </li>
-                                <li>
-                                    Add and View Teachers/TAs
-                                </li>
-                            </ul>
-                        </p>
-                        <p class="lead">
-                            <a class="btn btn-primary btn-lg" href="https://yaksh.readthedocs.io/en/latest/moderator_docs/creating_course.html" role="button" target="blank">
-                                <i class="fa fa-info-circle"></i>
-                                Learn more
-                            </a>
-                        </p>
-                    </div>
-                {% endif %}
+    <div class="justify-content-center">
+        {% include "yaksh/course_detail_options.html" %}
+    </div>
+</div>
+<br><br>
+<div class="container">
+    <div class="tab-content">
+        {% if messages %}
+            {% for message in messages %}
+            <div class="alert alert-dismissible alert-{{ message.tags }}">
+                <button type="button" class="close" data-dismiss="alert">
+                    <i class="fa fa-close"></i>
+                </button>
+                <strong>{{ message }}</strong>
+            </div>
+            {% endfor %}
+        {% endif %}
+        {% if is_students %}
+            {% include "yaksh/course_students.html" %}
+        {% elif is_mail %}
+            {% include "yaksh/course_send_mail.html" %}
+        {% elif is_progress %}
+            {% include "yaksh/course_progress.html" %}
+        {% elif is_modules %}
+            {% include "yaksh/course_added_modules.html" %}
+        {% elif is_design_course %}
+            {% include "yaksh/design_course_session.html" %}
+        {% elif is_add_teacher %}
+            {% include "yaksh/addteacher.html" %}
+        {% elif is_teachers %}
+            {% include "yaksh/course_teachers.html" %}
+        {% elif is_upload_download_md %}
+            {% include "yaksh/upload_download_course_md.html" %}
+        {% else %}
+            <div class="jumbotron">
+                <h1 class="display-4">Manage Course</h1>
+                <hr class="my-4">
+                <p>
+                    <ul>
+                        <li>
+                            Students enrollments
+                        </li>
+                        <li>
+                            Add and View Modules, Lessons and Quizzes
+                        </li>
+                        <li>
+                            Send mail to the students
+                        </li>
+                        <li>
+                            View Students course progress
+                        </li>
+                        <li>
+                            Add and View Teachers/TAs
+                        </li>
+                    </ul>
+                </p>
+                <p class="lead">
+                    <a class="btn btn-primary btn-lg" href="https://yaksh.readthedocs.io/en/latest/moderator_docs/creating_course.html" role="button" target="blank">
+                        <i class="fa fa-info-circle"></i>
+                        Learn more
+                    </a>
+                </p>
             </div>
-        </div>
+        {% endif %}
     </div>
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/course_detail_options.html b/yaksh/templates/yaksh/course_detail_options.html
index 4dd4dda..f9393ed 100644
--- a/yaksh/templates/yaksh/course_detail_options.html
+++ b/yaksh/templates/yaksh/course_detail_options.html
@@ -1,47 +1,51 @@
-<ul class="nav nav-pills list-group">
+<a href="{% url 'yaksh:courses' %}" class="btn btn-primary" title="View all the courses" data-placement="top" data-toggle="tooltip">
+    <i class="fa fa-arrow-left"></i>&nbsp;Back
+</a>
+<br><br>
+<ul class="nav nav-pills nav-fill flex-column flex-sm-row" role="tablist">
     <li class="nav-item">
-        <a href="{% url 'yaksh:courses' %}" class="nav-link list-group-item" title="View all the courses" data-placement="top" data-toggle="tooltip">
-            Back to Courses
+        <a href="{% url 'yaksh:course_students' course.id %}" id="enroll-students" class="nav-link  {% if is_students %} active {% endif %}" title="View the course requested, rejected and enrolled students" data-placement="top" data-toggle="tooltip">
+            Enrollments
         </a>
     </li>
     <li class="nav-item">
-        <a href="{% url 'yaksh:course_students' course.id %}" id="enroll-students" class="nav-link list-group-item {% if is_students %} active {% endif %}" title="View the course requested, rejected and enrolled students" data-placement="top" data-toggle="tooltip">
-            Enroll Students
-        </a>
-    </li>
-    <li class="nav-item">
-        <a class="nav-link list-group-item {% if is_modules %} active {% endif %}" href="{% url 'yaksh:get_course_modules' course.id %}" title="View modules added to the course" data-placement="top" data-toggle="tooltip">
+        <a class="nav-link {% if is_modules %} active {% endif %}" href="{% url 'yaksh:get_course_modules' course.id %}" title="View modules added to the course" data-placement="top" data-toggle="tooltip">
         Course Modules
         </a>
     </li>
     <li class="nav-item">
-        <a class="nav-link list-group-item {% if is_design_course %} active {% endif %}" href="{% url 'yaksh:design_course' course.id %}" title="Additional course settings" data-placement="top" data-toggle="tooltip">
+        <a class="nav-link {% if is_design_course %} active {% endif %}" href="{% url 'yaksh:design_course' course.id %}" title="Additional course settings" data-placement="top" data-toggle="tooltip">
         Design Course
         </a>
     </li>
     <li class="nav-item">
-        <a href="{% url 'yaksh:course_status' course.id %}" class="nav-link list-group-item {% if is_progress %} active {% endif %}" title="View Students course progress" data-placement="top" data-toggle="tooltip">
+        <a href="{% url 'yaksh:course_status' course.id %}" class="nav-link {% if is_progress %} active {% endif %}" title="View Students course progress" data-placement="top" data-toggle="tooltip">
             Course Progress
         </a>
     </li>
     <li class="nav-item">
-        <a href="{% url 'yaksh:send_mail' course.id %}" class="nav-link list-group-item {% if is_mail %} active {% endif %}" title="Send mail to course students" data-placement="top" data-toggle="tooltip">
+        <a href="{% url 'yaksh:send_mail' course.id %}" class="nav-link {% if is_mail %} active {% endif %}" title="Send mail to course students" data-placement="top" data-toggle="tooltip">
             Send Mail
         </a>
     </li>
     <li class="nav-item">
-        <a href="{% url 'yaksh:course_forum' course.id %}" class="nav-link list-group-item" title="Discussion forum of this course" data-placement="top" data-toggle="tooltip">
+        <a href="{% url 'yaksh:course_forum' course.id %}" class="nav-link" title="Discussion forum of this course" data-placement="top" data-toggle="tooltip">
             Discussion Forum
         </a>
     </li>
     <li class="nav-item">
-        <a class="nav-link list-group-item {% if is_add_teacher %} active {% endif %}" href="{% url 'yaksh:search_teacher' course.id %}" data-toggle="tooltip" title="Add Teachers/TAs to this course" data-placement="top">
+        <a class="nav-link {% if is_add_teacher %} active {% endif %}" href="{% url 'yaksh:search_teacher' course.id %}" data-toggle="tooltip" title="Add Teachers/TAs to this course" data-placement="top">
         Add Teachers/TAs
         </a>
     </li>
     <li class="nav-item">
-        <a class="nav-link list-group-item {% if is_teachers %} active {% endif %}" href="{% url 'yaksh:course_teachers' course.id %}" data-toggle="tooltip" title="View all the Teachers/TAs for this course" data-placement="top">
+        <a class="nav-link {% if is_teachers %} active {% endif %}" href="{% url 'yaksh:course_teachers' course.id %}" data-toggle="tooltip" title="View all the Teachers/TAs for this course" data-placement="top">
         Current Teachers/TAs
         </a>
     </li>
+    <li class="nav-item">
+        <a class="nav-link list-group-item {% if is_upload_download_md %} active {% endif %}" href="{% url 'yaksh:upload_download_course_md' course.id %}" data-toggle="tooltip" title="Upload / Download MD files" data-placement="top">
+        Upload / Download MD
+        </a>
+    </li>
 </ul>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/course_forum.html b/yaksh/templates/yaksh/course_forum.html
index b98688b..86195dd 100644
--- a/yaksh/templates/yaksh/course_forum.html
+++ b/yaksh/templates/yaksh/course_forum.html
@@ -5,7 +5,6 @@
 {% endblock title %}
 {% block content %}
     <div id="wrapper" class="d-flex">
-        {% include "yaksh/sidebar.html" %}
         <div class="container" id="page-content-wrapper">
             <div>
                 <h2><center>{{course.name}}</center></h2>
@@ -69,6 +68,8 @@
               </div>
             </div>
             <br>
+            {% include "yaksh/sidebar.html" %}
+            <br>
             {% with objects as posts %}
                 {% if posts %}
                     <div class="row justify-content-center">
@@ -93,8 +94,14 @@
                     <br>
                     {% include "yaksh/paginator.html" %}
                     <br>
-                    <table id="posts_table" class="tablesorter table">
-                        <thead class="thread-inverse">
+                    <div class="card">
+                    {% if posts|length > 10 %}
+                    <div class="table-responsive" style="height: 700px">
+                    {% else %}
+                    <div class="table-responsive">
+                    {% endif %}
+                    <table id="posts_table" class="table table-responsive-sm">
+                        <thead class="thread-inverse thead-light">
                             <tr>
                                 <th width="700">Posts</th>
                                 <th>Created by</th>
@@ -103,12 +110,12 @@
                                 <th></th>
                             </tr>
                         </thead>
-                        <tbody>
+                        <tbody class="list">
                             {% for post in posts %}
                                 <tr>
                                     <td>
                                         <a href="{% url 'yaksh:post_comments' course.id post.uid %}">{{post.title}}</a>
-                                        <small class="text-muted d-block">{{ post.description|truncatewords:30 }}</small>
+                                        <small class="text-muted d-block">{{ post.description|truncatewords:10 }}</small>
                                         <small class="text-muted"><strong>Last updated: {{post.modified_at}}</strong></small>
                                     </td>
                                     <td>
@@ -137,6 +144,8 @@
                             {% endfor %}
                         </tbody>
                     </table>
+                    </div>
+                    </div>
                     <br>
                     {% include "yaksh/paginator.html" %}
                 {% else %}
diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index b808562..39b9c97 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -7,7 +7,7 @@
     <div class="card">
         <div class="card-header">
             {{ course.name }}
-            <a href="{% url "yaksh:course_forum" course.id %}" class="btn btn-info pull-right">Discussion Forum</a>
+            <a href="{% url 'yaksh:course_forum' course.id %}" class="btn btn-info pull-right">Discussion Forum</a>
         </div>
         <div class="card-body">
             {% if course.view_grade %}
@@ -24,155 +24,173 @@
                 </div>
             {% endif %}
             {% if modules %}
-            <strong>Overall Course Progress:</strong>
-            <div class="progress">
-                {% if course_percentage %}
-                    {% if course_percentage <= 50 %}
-                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{course_percentage}}"
-                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-                    {% elif course_percentage <= 75 %}
-                        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{course_percentage}}"
-                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-                    {% else %}
-                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{course_percentage}}"
-                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-                    {% endif %}
-                    <b style="color: white;">{{course_percentage}}% Completed</b>
+            <div class="progress-wrapper">
+                <div class="progress-info">
+                    <div class="progress-label">
+                      <span>Course completed</span>
+                    </div>
+                    <div class="progress-percentage">
+                      <span>
+                        {% if course_percentage %} {{course_percentage}} {% else %} 0 {% endif %}%
+                      </span>
                     </div>
-                {% else %}
-                    <b style="color: black;">0% Completed</b>
-                {% endif %}
+                </div>
+                <div class="progress">
+                    {% if course_percentage %}
+                        {% if course_percentage <= 50 %}
+                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{course_percentage}}"
+                            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                            </div>
+                        {% elif course_percentage <= 75 %}
+                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{course_percentage}}"
+                            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                            </div>
+                        {% else %}
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{course_percentage}}"
+                            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                            </div>
+                        {% endif %}
+                    {% endif %}
+                </div>
             </div>
             {% else %}
                 <div class="alert alert-danger">
                     <strong>No lectures found</strong>
                 </div>
             {% endif %}
-            <br>
-            {% for module, percent in modules %}
-            <div class="accordian-{{module.id}}">
-                <div class="card">
-                    <div class="card-header">
-                        <div class="row">
-                            <div class="col-md-4">
-                                {{ module.name|title }}
+        </div>
+    </div>
+    <br>
+    {% for module, percent in modules %}
+    <div class="accordian-{{module.id}}">
+        <div class="card">
+            <div class="card-header">
+                <div class="row">
+                    <div class="col-md-4">
+                        {{ module.name|title }}
+                    </div>
+                    <div class="col-md-3">
+                        <a class="card-link btn btn-outline-info" data-toggle="collapse" href="#collapse-{{module.id}}">
+                            Details&nbsp;<i class="fa fa-toggle-down"></i>
+                        </a>
+                    </div>
+                    <div class="col-md-2">
+                        <a href="{% url 'yaksh:view_module' module.id course.id %}">
+                        {% get_module_status user module course as module_status %}
+                        {% if module_status == "completed" %}
+                        <div class="btn btn-info ">
+                            View
+                        </div>
+                        {% elif module_status == "inprogress" %}
+                        <div class="btn btn-primary">
+                            Continue
+                        </div>
+                        {% else %}
+                        <div class="btn btn-success ">
+                            Start
+                        </div>
+                        {% endif %}
+                        </a>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="progress-wrapper">
+                        <div class="progress-info">
+                            <div class="progress-label">
+                              <span>Module completed</span>
                             </div>
-                            <div class="col-md-3">
-                                <a class="card-link btn btn-outline-info" data-toggle="collapse" href="#collapse-{{module.id}}">
-                                    Details&nbsp;<i class="fa fa-toggle-down"></i>
-                                </a>
+                            <div class="progress-percentage">
+                              <span>
+                                {% if percent %} {{percent}} {% else %} 0 {% endif %}%
+                              </span>
                             </div>
-                            <div class="col-md-2">
-                                <a href="{% url 'yaksh:view_module' module.id course.id %}">
+                        </div>
+                        <div class="progress">
+                            {% if percent %}
                                 {% get_module_status user module course as module_status %}
                                 {% if module_status == "completed" %}
-                                <div class="btn btn-info ">
-                                    View
-                                </div>
+                                  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                  aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%"></div>
                                 {% elif module_status == "inprogress" %}
-                                <div class="btn btn-primary">
-                                    Continue
-                                </div>
-                                {% else %}
-                                <div class="btn btn-success ">
-                                    Start
-                                </div>
+                                  <div class="progress-bar bg-warning" role="progressbar"
+                                  aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%"></div>
                                 {% endif %}
-                                </a>
-                            </div>
-                            <div class="col-md-3">
-                                <div class="progress bg-white">
-                                    {% if percent %}
-                                        {% get_module_status user module course as module_status %}
-                                        {% if module_status == "completed" %}
-                                          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
-                                          aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                        {% elif module_status == "inprogress" %}
-                                          <div class="progress-bar bg-warning" role="progressbar"
-                                          aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                        {% endif %}
-                                        <b style="color: white;">{{percent}}% Completed</b>
-                                        </div>
-                                    {% else %}
-                                        <b style="color: black;">0% Completed</b>
-                                    {% endif %}
-                                </div>
-                            </div>
+                            {% endif %}
                         </div>
-                    </div>
-                    <div id="collapse-{{module.id}}" class="collapse hide" data-parent="#accordion-{{module.id}}">
-                        <div class="card-body">
-                            <table class="table yakshwell">
-                                {% for unit in module.get_learning_units %}
-                                <tr>
-                                    <td>
-                                    {% if unit.type == "quiz" %}
-                                        {% if unit.quiz.is_exercise %}
-                                            <span class="fa fa-pencil"></span>
-                                        {% else %}
-                                            <span class="fa fa-puzzle-piece"></span>
-                                        {% endif %}
-                                    {% else %}
-                                        <span class="fa fa-book"></span>
-                                    {% endif %}
-                                    </td>
-                                    <td>
-                                    {% if unit.type == "quiz" %}
-                                        {{unit.quiz.description}}
-                                    {% else %}
-                                        {{unit.lesson.name}}
-                                    {% endif %}
-                                    </td>
-                                    <td>
-                                        {% if unit.type == "lesson" %}
-                                            <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="btn btn-outline-info">
-                                                View
-                                            </a>
-                                        {% else %}
-                                            {% if unit.quiz.questionpaper_set.get %}
-                                                <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="btn btn-outline-info">
-                                                    View
-                                                </a>
-                                            {% endif %}
-                                        {% endif %}
-                                    </td>
-                                    <td>
-                                    {% get_unit_status course module unit user as status %}
-                                    {% if status == "completed" %}
-                                        <span class="badge badge-success">{{status|title}}
-                                        </span>
-                                    {% elif status == "inprogress" %}
-                                        <span class="badge badge-info">{{status|title}}
-                                        </span>
-                                    {% else %}
-                                        <span class="badge badge-warning">{{status|title}}
-                                        </span>
-                                    {% endif %}
-                                    </td>
-                                    <td>
-                                    {% if unit.type == "quiz" %}
-                                        {% if unit.quiz.view_answerpaper %}
-                                            <a href="{% url 'yaksh:view_answerpaper' unit.quiz.questionpaper_set.get.id course.id %}" >
-                                            <i class="fa fa-eye"></i>&nbsp;Answer paper</a>
-                                        {% else %}
-                                            <a >
-                                            <i class="fa fa-eye-slash" aria-hidden="true">
-                                            </i>Answer paper</a>
-                                        {% endif %}
-                                    {% else %}
-                                        ------
-                                    {% endif %}
-                                    </td>
-                                </tr>
-                                {% endfor %}
-                            </table>
                         </div>
                     </div>
                 </div>
             </div>
-            <br>
-            {% endfor %}
+            <div id="collapse-{{module.id}}" class="collapse hide" data-parent="#accordion-{{module.id}}">
+                <div class="card-body">
+                    <table class="table table-responsive-sm">
+                        {% for unit in module.get_learning_units %}
+                        <tr>
+                            <td>
+                            {% if unit.type == "quiz" %}
+                                {% if unit.quiz.is_exercise %}
+                                    <span class="fa fa-pencil"></span>
+                                {% else %}
+                                    <span class="fa fa-puzzle-piece"></span>
+                                {% endif %}
+                            {% else %}
+                                <span class="fa fa-book"></span>
+                            {% endif %}
+                            </td>
+                            <td>
+                            {% if unit.type == "quiz" %}
+                                {{unit.quiz.description}}
+                            {% else %}
+                                {{unit.lesson.name}}
+                            {% endif %}
+                            </td>
+                            <td>
+                                {% if unit.type == "lesson" %}
+                                    <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="btn btn-outline-info">
+                                        View
+                                    </a>
+                                {% else %}
+                                    {% if unit.quiz.questionpaper_set.get %}
+                                        <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="btn btn-outline-info">
+                                            View
+                                        </a>
+                                    {% endif %}
+                                {% endif %}
+                            </td>
+                            <td>
+                            {% get_unit_status course module unit user as status %}
+                            {% if status == "completed" %}
+                                <span class="badge badge-success">{{status|title}}
+                                </span>
+                            {% elif status == "inprogress" %}
+                                <span class="badge badge-info">{{status|title}}
+                                </span>
+                            {% else %}
+                                <span class="badge badge-warning">{{status|title}}
+                                </span>
+                            {% endif %}
+                            </td>
+                            <td>
+                            {% if unit.type == "quiz" %}
+                                {% if unit.quiz.view_answerpaper %}
+                                    <a href="{% url 'yaksh:view_answerpaper' unit.quiz.questionpaper_set.get.id course.id %}" >
+                                    <i class="fa fa-eye"></i>&nbsp;Answer paper</a>
+                                {% else %}
+                                    <a >
+                                    <i class="fa fa-eye-slash" aria-hidden="true">
+                                    </i>Answer paper</a>
+                                {% endif %}
+                            {% else %}
+                                ------
+                            {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </table>
+                </div>
+            </div>
         </div>
     </div>
+    <br>
+    {% endfor %}
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/course_progress.html b/yaksh/templates/yaksh/course_progress.html
index 826f84b..2d3dbf7 100644
--- a/yaksh/templates/yaksh/course_progress.html
+++ b/yaksh/templates/yaksh/course_progress.html
@@ -18,8 +18,14 @@
         </div>
         <br>
         {% include "yaksh/paginator.html" %}
-        <table class="tablesorter table table-bordered table-responsive-sm" id="course_table" data-sortlist="[0,0]">
-        <thead>
+        <div class="card">
+        {% if student_details|length > 10 %}
+        <div class="table-responsive" style="height: 700px">
+        {% else %}
+        <div class="table-responsive">
+        {% endif %}
+        <table class="table table-responsive-sm" id="course_table" data-sortlist="[0,0]">
+        <thead class="thead-light">
             <tr>
                 <th>Sr. No</th>
                 <th>Roll No.</th>
@@ -29,7 +35,7 @@
                 <th>Grade</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody class="list">
             {% for student, grade, percent, unit in student_details %}
                 <tr>
                     <td>{{forloop.counter}}</td>
@@ -66,6 +72,8 @@
             {% endfor %}
         </tbody>
         </table>
+        </div>
+        </div>
         {% include "yaksh/paginator.html" %}
     {% else %}
         <center>
diff --git a/yaksh/templates/yaksh/course_send_mail.html b/yaksh/templates/yaksh/course_send_mail.html
index 57442a6..ce79739 100644
--- a/yaksh/templates/yaksh/course_send_mail.html
+++ b/yaksh/templates/yaksh/course_send_mail.html
@@ -9,12 +9,10 @@
                 <textarea name="subject" class="form-control" id="subject" placeholder="Email Subject"></textarea>
                 <br><br>
                 <textarea name="body" id="email_body"></textarea><br>
-                Attachments: 
-                <div class="input-group mb-3">
-                    <div class="custom-file">
-                        <input type="file" class="custom-file-input" name="email_attach" id="upload" multiple="">
-                        <label class="custom-file-label" for="upload">Choose file</label>
-                    </div>
+                Attachments:
+                <div class="custom-file">
+                    <input type="file" class="custom-file-input" name="email_attach" id="upload" multiple="">
+                    <label class="custom-file-label" for="upload">Choose file</label>
                 </div>
                 <br>
             </div>
@@ -23,15 +21,21 @@
         <input type="checkbox" class="send_check"/>&nbsp;
         <font size="5">Select all</font>
         <div id="sender_list">
-            <table id="mail_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]">
-                <thead>
+            <div class="card">
+            {% if enrolled|length > 10 %}
+            <div class="table-responsive" style="height: 700px">
+            {% else %}
+            <div class="table-responsive">
+            {% endif %}
+            <table id="mail_table" class="table table-responsive-sm table-dark course-detail" data-sortlist="[1,0]">
+                <thead class="thead-dark">
                     <th></th>
                     <th>Full Name&nbsp;<i class="fa fa-sort"></i></th>
                     <th>Email&nbsp;<i class="fa fa-sort"></i></th>
                     <th>Roll Number&nbsp;<i class="fa fa-sort"></i></th>
                     <th>Institute&nbsp;<i class="fa fa-sort"></i></th>
                 </thead>
-                <tbody>
+                <tbody class="list">
                     {% for enroll in enrolled %}
                         <tr>
                         <td>
@@ -48,6 +52,8 @@
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
+            </div>
             <button class="btn btn-success btn-lg" type="submit" name='send_mail' value='send_mail' id="send_mail">
                 Send Mail
             </button>
diff --git a/yaksh/templates/yaksh/course_students.html b/yaksh/templates/yaksh/course_students.html
index e8ca800..40ac759 100644
--- a/yaksh/templates/yaksh/course_students.html
+++ b/yaksh/templates/yaksh/course_students.html
@@ -11,17 +11,16 @@
     <div class="card-body">
         <form id="upload_users" action="{% url 'yaksh:upload_users' course.id %}" method="POST" enctype="multipart/form-data">
             {% csrf_token %}
-            <div class="input-group mb-3">
-                <div class="custom-file">
-                    <input type="file" class="custom-file-input" name="csv_file" id="upload"/>
-                    <label class="custom-file-label" for="upload">Choose file</label>
-                </div>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-primary" type="submit">
-                        <i class="fa fa-upload"></i>
-                        Upload
-                    </button>
-                </div>
+            <div class="custom-file">
+                <input type="file" class="custom-file-input" name="csv_file" id="upload"/>
+                <label class="custom-file-label" for="upload">Choose file</label>
+            </div>
+            <br><br>
+            <div class="input-group-append">
+                <button class="btn btn-outline-primary" type="submit">
+                    <i class="fa fa-upload"></i>
+                    Upload
+                </button>
             </div>
         </form>
         <hr>
@@ -59,8 +58,14 @@
         <div id="enroll-all">
             <form action="{% url 'yaksh:enroll_reject_user' course.id %}" method="post">
                 {% csrf_token %}
-                <table id="requested_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]">
-                    <thead>
+                <div class="card">
+                    {% if requested_users|length > 10 %}
+                    <div class="table-responsive" style="height: 700px">
+                    {% else %}
+                    <div class="table-responsive">
+                    {% endif %}
+                <table id="requested_table" class="table table-responsive-sm table-dark course-detail" data-sortlist="[1,0]">
+                    <thead class="thead-dark">
                         <th></th>
                         <th>Full Name <i class="fa fa-sort"></i></th>
                         <th>Email <i class="fa fa-sort"></i></th>
@@ -69,7 +74,7 @@
                         <th>Department <i class="fa fa-sort"></i></th>
                         <th>Enroll/Reject</th>
                     </thead>
-                    <tbody>
+                    <tbody class="list">
                         {% for user in requested_users %}
                         <tr>
                         <td>
@@ -97,10 +102,14 @@
                         {% endfor %}
                     </tbody>
                 </table>
-                <input class="btn btn-success btn-lg" type="submit" name='enroll' value='enroll selected'>
-                </input>
-                <input class="btn btn-danger btn-lg" type="submit" name='reject' value='reject selected'>
-                </input>
+                </div>
+                </div>
+                <button class="btn btn-danger" type="submit" name="reject">
+                    <i class="fa fa-minus-square"></i>&nbsp;Reject selected
+                </button>
+                <button class="btn btn-success" type="submit" name="enroll">
+                    <i class="fa fa-plus-square"></i>&nbsp;Enroll selected
+                </button>
             </form>                                   
         </div>
     {% else %}
@@ -126,8 +135,14 @@
         <div id="reject">
             <form action="{% url 'yaksh:reject_enrolled_users' course.id %}" method="post" id="reject-form">
                 {% csrf_token %}
-                <table id="enrolled_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]" style="width: 100%">
-                    <thead>
+                <div class="card">
+                    {% if enrolled_users|length > 10 %}
+                    <div class="table-responsive" style="height: 700px">
+                    {% else %}
+                    <div class="table-responsive">
+                    {% endif %}
+                <table id="enrolled_table" class="table table-responsive-sm table-dark" data-sortlist="[1,0]">
+                    <thead class="thead-dark">
                     <th></th>
                     <th>Full Name <i class="fa fa-sort"></i></th>
                     <th>Email <i class="fa fa-sort"></i></th>
@@ -136,7 +151,7 @@
                     <th>Department <i class="fa fa-sort"></i></th>
                     <th>Reject</th>
                     </thead>
-                    <tbody>
+                    <tbody class="list">
                     {% for user in enrolled_users %}
                         <tr>
                         <td>
@@ -160,8 +175,11 @@
                     {% endfor %}
                     </tbody>
                 </table>
-                <input class="btn btn-danger btn-lg" type="submit" name='reject' value='reject selected'>
-                </input>
+                </div>
+                </div>
+                <button class="btn btn-danger" type="submit" name="reject">
+                    <i class="fa fa-minus-square"></i>&nbsp;Reject selected
+                </button>
             </form>
         </div>
     {% else %}
@@ -188,8 +206,15 @@
     <div id="enroll">
         <form action="{% url 'yaksh:enroll_rejected_users' course.id %}" method="post">
             {% csrf_token %}
-            <table id="rejected_table" class="tablesorter table table-striped table-responsive-sm course-detail" data-sortlist="[1,0]">
-                <thead>
+            <div class="card">
+                {% if rejected_users|length > 10 %}
+                <div class="table-responsive" style="height: 700px">
+                {% else %}
+                <div class="table-responsive">
+                {% endif %}
+            <table id="rejected_table" class="table table-responsive-sm table-dark course-detail" data-sortlist="[1,0]">
+                <thead class="thead-dark">
+                    <th></th>
                     <th>Full Name <i class="fa fa-sort"></i></th>
                     <th>Email <i class="fa fa-sort"></i></th>
                     <th>Roll Number <i class="fa fa-sort"></i></th>
@@ -197,7 +222,7 @@
                     <th>Department <i class="fa fa-sort"></i></th>
                     <th>Enroll</th>
                 </thead>
-                <tbody>
+                <tbody class="list">
                     {% for user in rejected_users %}
                         <tr>
                         <td>
@@ -221,9 +246,12 @@
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
+            </div>
             <br>
-            <input class="btn btn-success btn-lg" type="submit" name='enroll' value='enroll selected'>
-            </input>
+            <button class="btn btn-success" type="submit" name="enroll">
+                <i class="fa fa-plus-square"></i>&nbsp;Enroll selected
+            </button>
             <br>                         
         </form>
     </div>
diff --git a/yaksh/templates/yaksh/course_teachers.html b/yaksh/templates/yaksh/course_teachers.html
index ebbbb57..1a32e51 100644
--- a/yaksh/templates/yaksh/course_teachers.html
+++ b/yaksh/templates/yaksh/course_teachers.html
@@ -5,12 +5,21 @@
     <form action="{% url 'yaksh:remove_teacher' course.id %}" method="post">
     {% csrf_token %}
     <div class="container">
-        <table class="table table-responsive-sm course-detail">
+        <div class="card">
+        {% if teachers|length > 10 %}
+        <div class="table-responsive" style="height: 700px">
+        {% else %}
+        <div class="table-responsive">
+        {% endif %}
+        <table class="table table-responsive-sm table-dark course-detail">
+            <thead class="thead-dark">
             <tr>
                 <th>Select</th>
                 <th>Name</th>
                 <th>Email</th>
             </tr>
+            </thead>
+            <tbody class="list">
             {% for teacher in teachers %}
                 <tr>
                     <td><input type="checkbox" name="remove" value="{{ teacher.id }}"></td>
@@ -18,7 +27,10 @@
                     <td>{{ teacher.email }}</td>
                 </tr>
             {% endfor %}
-        <table>
+            </tbody>
+        </table>
+        </div>
+        </div>
     </div>
     <br>
     <button class="btn btn-danger" type="submit" data-toggle="tooltip" title="Remove Selected Teachers from this course">
diff --git a/yaksh/templates/yaksh/courses.html b/yaksh/templates/yaksh/courses.html
index 151e1fb..b9e48d6 100644
--- a/yaksh/templates/yaksh/courses.html
+++ b/yaksh/templates/yaksh/courses.html
@@ -10,125 +10,254 @@
 
 {% block content %}
 <div class="container-fluid">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8">
-                <ul class="nav nav-pills" id="course_tabs">
-                    <li class="nav-item">
-                        <a class="nav-link {% if created %}active{% endif %}" href="{% url 'yaksh:courses' %}">
-                            My Courses
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'yaksh:add_course' %}">
-                            Add/Edit Course
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="{% url 'grades:grading_systems'%}" class="nav-link" >
-                            Add/View Grading Systems
-                        </a>
-                    </li>
-                </ul>
-            </div>
+    <div class="row">
+        <div class="col-md-8">
+            <ul class="nav nav-pills" id="course_tabs">
+                <li class="nav-item">
+                    <a class="nav-link {% if created %}active{% endif %}" href="{% url 'yaksh:courses' %}">
+                        My Courses
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'yaksh:add_course' %}">
+                        Add/Edit Course
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{% url 'grades:grading_systems'%}" class="nav-link" >
+                        Add/View Grading Systems
+                    </a>
+                </li>
+            </ul>
         </div>
     </div>
-    <div class="container">
+    <br>
+    <div>
         {% if not objects %}
             <br><br>
             <div class="alert alert-info">
                 <center> <h3> No Courses Found </h3> </center>
             </div>
         {% else %}
-            <hr>
-            <form name=frm action="" method="get">
-                <div class="card">
-                    <div class="card-header">
-                        <h3>Search/Filter Courses</h3>
-                    </div>
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-6">
-                                {{ form.search_tags }}
+            <div class="row">
+                <div class="col">
+                    <form name=frm action="" method="get">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3>Search/Filter Courses</h3>
                             </div>
-                            <div class="col-md-3">
-                                {{ form.search_status }}
+                            <div class="card-body">
+                                <div>
+                                    {{form.search_tags}}
+                                    <br>
+                                    {{form.search_status}}
+                                </div>
+                                <br>
+                                <button class="btn btn-outline-success" type="submit">
+                                    <i class="fa fa-search"></i>&nbsp;Search
+                                </button>
+                                <a class="btn btn-outline-danger" href="{% url 'yaksh:courses' %}">
+                                    <i class="fa fa-times"></i>&nbsp;Clear
+                                </a>
                             </div>
                         </div>
-                        <br>
-                        <button class="btn btn-outline-success" type="submit">
-                            <i class="fa fa-search"></i>&nbsp;Search
-                        </button>
-                        <a class="btn btn-outline-danger" href="{% url 'yaksh:courses' %}">
-                            <i class="fa fa-times"></i>&nbsp;Clear
-                        </a>
-                    </div>
+                    </form>
                 </div>
-            </form>
-            <hr>
-            <center><h4 class="badge badge-success">{{ courses_found }} Course(s) Available</h4></center>
+                <div id="course-list">
+                    <center><h4 class="badge badge-success">{{ courses_found }} Course(s) Available</h4></center>
 
-            {% if messages %}
-                {% for message in messages %}
-                <div class="alert alert-dismissible alert-{{ message.tags }}">
-                    <button type="button" class="close" data-dismiss="alert">
-                        <i class="fa fa-close"></i>
-                    </button>
-                    <strong>{{ message }}</strong>
-                </div>
-                {% endfor %}
-            {% endif %}
-            {% with objects as courses %}
-            <div class="row">
-                <div class="col-md-4">
-                    {% include "yaksh/paginator.html" %}
-                </div>
-                <div class="ml-auto">
-                    <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
-                        <a  id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true">
-                            <i class="fa fa-list"></i>
-                        </a>
-                        <a  id="gridbtn" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false">
-                            <i class="fa fa-columns"></i>
-                        </a>
+                    {% if messages %}
+                        {% for message in messages %}
+                        <div class="alert alert-dismissible alert-{{ message.tags }}">
+                            <button type="button" class="close" data-dismiss="alert">
+                                <i class="fa fa-close"></i>
+                            </button>
+                            <strong>{{ message }}</strong>
+                        </div>
+                        {% endfor %}
+                    {% endif %}
+                    {% with objects as courses %}
+                    <div class="row">
+                        <div class="col-md-4">
+                            {% include "yaksh/paginator.html" %}
+                        </div>
+                        <div class="ml-auto">
+                            <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
+                                <a  id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true">
+                                    <i class="fa fa-list"></i>
+                                </a>
+                                <a  id="gridbtn" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false">
+                                    <i class="fa fa-columns"></i>
+                                </a>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <div class="tab-content">
-                <div class="tab-pane active" id="gridview" role="tabpanel" aria-labelledby="gridbtn">
-                    <!-- GridView -->
-                    <br>
-                    <div class="row">
-                        <br>
-                        {% for course in courses %}
-                            <div class="col-md-6">
-                                <div class="card border-primary">
-                                    <div class="card-header" style="height: 150px">
-                                        {{course.name}}
-                                    </div>
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col">
-                                                <strong>Starts On:</strong>
-                                                {{course.start_enroll_time}}
-                                                <br>
-                                                <strong>Ends On:</strong>
-                                                {{course.end_enroll_time}}
-                                            </div>
-                                        </div>
-                                        <hr>
-                                        <div class="row">
-                                            <div class="col-md-5">
-                                                <span class="badge badge-pill badge-info">
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="gridview" role="tabpanel" aria-labelledby="gridbtn">
+                            <!-- GridView -->
+                            <br>
+                            <div class="row">
+                                <br>
+                                {% for course in courses %}
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header" style="height: 150px">
+                                                <strong>
+                                                <a href="{% url 'yaksh:edit_course' course.id %}">
+                                                    <i class="fa fa-edit"></i>&nbsp;
+                                                    {{course.name}}
+                                                </a>
+                                                </strong>
+                                                <div>
                                                     {% if user.id != course.creator.id %}
+                                                    <span class="badge badge-pill badge-warning">
                                                         Allotted Course
+                                                    </span>
                                                     {% else %}
+                                                    <span class="badge badge-pill badge-primary">
                                                         Created Course
+                                                    </span>
                                                     {% endif %}
-                                                </span>
+                                                </div>
+                                                <div>
+                                                    <div class="nav-item dropdown">
+                                                        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" style="color: blue;">More
+                                                        </a>
+                                                        <div class="dropdown-menu dropdown-menu-right">
+                                                        <a class="dropdown-item" href="{% url 'yaksh:toggle_course_status' course.id %}">
+                                                        {% if course.active %}
+                                                            <i class="fa fa-toggle-on fa-2x"></i>
+                                                            Deactivate Course
+                                                        {% else %}
+                                                            <i class="fa fa-toggle-off fa-2x"></i>
+                                                            Activate Course
+                                                        {% endif %}
+                                                        </a>
+                                                        <div class="dropdown-divider"></div>
+                                                        <a class="dropdown-item" href="{% url 'yaksh:course_detail' course.id %}">
+                                                            <i class="fa fa-tasks"></i>
+                                                            Manage Course
+                                                        </a>
+                                                        <div class="dropdown-divider"></div>
+                                                        <a class="dropdown-item" href="{% url 'yaksh:duplicate_course' course.id %}">
+                                                            <i class="fa fa-clone"></i>
+                                                            Clone Course
+                                                        </a>
+                                                        <div class="dropdown-divider"></div>
+                                                        <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
+                                                            <i class="fa fa-download"></i>
+                                                            Download CSV
+                                                        </a>
+                                                        <div class="dropdown-divider"></div>
+                                                        <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
+                                                            <i class="fa fa-download"></i>
+                                                            Download Course
+                                                        </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="row">
+                                                    <div class="col-md-8">
+                                                        <strong>Status:</strong>
+                                                        {% if course.active %}
+                                                            <span class="badge badge-pill badge-success">
+                                                            Active
+                                                            </span>
+                                                        {% else %}
+                                                            <span class="badge badge-pill badge-danger">
+                                                            Inactive
+                                                            </span>
+                                                        {% endif %}
+                                                        <br>
+                                                        <strong>Creator:</strong>
+                                                        {{course.creator.get_full_name}}
+                                                        <br>
+                                                        <strong>Starts On:</strong>
+                                                        {{course.start_enroll_time}}
+                                                        <br>
+                                                        <strong>Ends On:</strong>
+                                                        {{course.end_enroll_time}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                                <br>
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="listview" role="tabpanel" aria-labelledby="gridbtn">
+                            <!-- ListView -->
+                            <br>
+                            {% for course in courses %}
+                                <div class="card">
+                                    <div class="card-header bg-secondary">
+                                        <div class="row">
+                                            <div class="col-md-7">
+                                                <strong>
+                                                    <a href="{% url 'yaksh:edit_course' course.id %}">
+                                                        <i class="fa fa-edit"></i>
+                                                        {{course.name}}
+                                                    </a>
+                                                </strong>
                                             </div>
                                             <div class="col-md-3">
+                                                {% if user.id != course.creator.id %}
+                                                    <span class="badge badge-pill badge-warning">
+                                                        Allotted Course
+                                                    </span>
+                                                {% else %}
+                                                    <span class="badge badge-pill badge-primary">
+                                                        Created Course
+                                                    </span>
+                                                {% endif %}
+                                            </div>
+                                            <div class="col">
+                                                <li class="nav-item dropdown">
+                                                    <a class="dropdown-toggle nav-link" id="user_dropdown" data-toggle="dropdown" href="#" style="color: blue;">More
+                                                    </a>
+                                                    <div class="dropdown-menu dropdown-menu-right">
+                                                    <a class="dropdown-item" href="{% url 'yaksh:toggle_course_status' course.id %}">
+                                                    {% if course.active %}
+                                                        <i class="fa fa-toggle-on fa-2x"></i>
+                                                        Deactivate Course
+                                                    {% else %}
+                                                        <i class="fa fa-toggle-off fa-2x"></i>
+                                                        Activate Course
+                                                    {% endif %}
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a class="dropdown-item" href="{% url 'yaksh:course_detail' course.id %}">
+                                                        <i class="fa fa-tasks"></i>
+                                                        Manage Course
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a class="dropdown-item" href="{% url 'yaksh:duplicate_course' course.id %}">
+                                                        <i class="fa fa-clone"></i>
+                                                        Clone Course
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
+                                                        <i class="fa fa-download"></i>
+                                                        Download CSV
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
+                                                        <i class="fa fa-download"></i>
+                                                        Download Course
+                                                    </a>
+                                                    </div>
+                                                </li>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col">
+                                                <strong>Status:</strong>
                                                 {% if course.active %}
                                                     <span class="badge badge-pill badge-success">
                                                     Active
@@ -138,168 +267,28 @@
                                                     Inactive
                                                     </span>
                                                 {% endif %}
-                                            </div>
-                                            <div class="col-md-4">
-                                                <a href="{% url 'yaksh:toggle_course_status' course.id %}">
-                                                {% if course.active %}
-                                                    <i class="fa fa-toggle-on fa-2x"></i>
-                                                {% else %}
-                                                    <i class="fa fa-toggle-off fa-2x"></i>
-                                                {% endif %}
-                                                </a>
-                                            </div>
-                                        </div>
-                                        <hr>
-                                        <div class="row">
-                                            <div class="col-md-5">
-                                                <a href="{% url 'yaksh:edit_course' course.id %}" class="btn btn-info">
-                                                    <i class="fa fa-edit"></i>
-                                                    Edit Course
-                                                </a>
-                                            </div>
-                                            <div class="col-md-5">
-                                                <a href="{% url 'yaksh:course_detail' course.id %}" class="btn btn-primary">
-                                                    <i class="fa fa-tasks"></i>
-                                                    Manage Course
-                                                </a>
-                                            </div>
-                                        </div>
-                                        <br>
-                                        <div class="row">
-                                            <div class="col-md-5">
-                                                <a href="{% url 'yaksh:duplicate_course' course.id %}" class="btn btn-secondary">
-                                                    <i class="fa fa-clone"></i>
-                                                    Clone Course
-                                                </a>
-                                            </div>
-                                            <div class="col-md-5">
-                                                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-                                                <button type="button" class="btn btn-secondary">
-                                                    <i class="fa fa-download"></i>
-                                                    Download
-                                                </button>
-                                                <div class="btn-group" role="group">
-                                                <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
-                                                <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
-                                                    CSV
-                                                </a>
-                                                <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
-                                                    Course
-                                                </a>
-                                                </div>
-                                                </div>
-                                                </div>
+                                                <br>
+                                                <strong>Creator:</strong>
+                                                {{course.creator.get_full_name}}
+                                                <br>
+                                                <strong>Starts On:</strong>
+                                                {{course.start_enroll_time}}
+                                                <br>
+                                                <strong>Ends On:</strong>
+                                                {{course.end_enroll_time}}
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <br>
-                            </div>
-                        {% endfor %}
-                        <br>
-                    </div>
-                </div>
-                <div class="tab-pane" id="listview" role="tabpanel" aria-labelledby="gridbtn">
-                    <!-- ListView -->
-                    <br>
-                    {% for course in courses %}
-                        <div class="card">
-                            <div class="card-header bg-secondary">
-                                <div class="row">
-                                    <div class="col-md-5">
-                                        {{course.name}}  
-                                    </div>
-                                    <div class="col-md-3">
-                                        <span class="badge badge-pill badge-info">
-                                            {% if user.id != course.creator.id %}
-                                                Allotted Course
-                                            {% else %}
-                                                Created Course
-                                            {% endif %}
-                                        </span>
-                                    </div>
-                                    <div class="col-md-2">
-                                        {% if course.active %}
-                                            <span class="badge badge-pill badge-success">
-                                            Active
-                                            </span>
-                                        {% else %}
-                                            <span class="badge badge-pill badge-danger">
-                                            Inactive
-                                            </span>
-                                        {% endif %}
-                                    </div>
-                                    <div class="col-md-2">
-                                        <a href="{% url 'yaksh:toggle_course_status' course.id %}">
-                                        {% if course.active %}
-                                            <i class="fa fa-toggle-on fa-2x"></i>
-                                        {% else %}
-                                            <i class="fa fa-toggle-off fa-2x"></i>
-                                        {% endif %}
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="card-body">
-                                <div class="row">
-                                    <div class="col">
-                                        <strong>Starts On:</strong>
-                                        {{course.start_enroll_time}}
-                                        <br>
-                                        <strong>Ends On:</strong>
-                                        {{course.end_enroll_time}}
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:edit_course' course.id %}" class="btn btn-info">
-                                            <i class="fa fa-edit"></i>
-                                            Edit Course
-                                        </a>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:course_detail' course.id %}" class="btn btn-primary">
-                                            <i class="fa fa-tasks"></i>
-                                            Manage Course
-                                        </a>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-                                            <button type="button" class="btn btn-secondary">
-                                                <i class="fa fa-download"></i>
-                                                Download
-                                            </button>
-                                            <div class="btn-group" role="group">
-                                            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
-                                            <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
-                                                CSV
-                                            </a>
-                                            <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
-                                                Course
-                                            </a>
-                                            </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:duplicate_course' course.id %}" class="btn btn-secondary">
-                                            <i class="fa fa-clone"></i>
-                                            Clone Course
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
+                            {% endfor %}
+                            <br>
                         </div>
-                        <br>
-                    {% endfor %}
-                    <br>
+                    </div>
+                    {% include "yaksh/paginator.html" %}
+                    {% endwith %}
                 </div>
             </div>
-            {% include "yaksh/paginator.html" %}
-            {% endwith %}
         {% endif %}
     </div>
 </div>
diff --git a/yaksh/templates/yaksh/design_course_session.html b/yaksh/templates/yaksh/design_course_session.html
index 88ecc16..1da7647 100644
--- a/yaksh/templates/yaksh/design_course_session.html
+++ b/yaksh/templates/yaksh/design_course_session.html
@@ -18,7 +18,7 @@
                 <div id="fixed-available-wrapper">
                     <p><u><b>Available Modules:</b></u></p>
                     <div id="fixed-available">
-                        <table id="course-details" class="table table-bordered table-responsive-sm">
+                        <table id="course-details" class="table table-responsive-sm">
                         <tr class="bg-light">
                         <th width="2%">Select</th>
                         <th>Modules</th>
@@ -60,7 +60,7 @@
                 <div id="fixed-added-wrapper">
                     <p><u><b>Chosen Modules:</b></u></p>
                     <div id="fixed-added">
-                        <table id="course-details" class="table table-bordered table-responsive-sm">
+                        <table id="course-details" class="table table-responsive-sm">
                         <tr class="bg-light">
                         <th width="5%">Select</th>
                         <th>Module</th>
diff --git a/yaksh/templates/yaksh/grade_user.html b/yaksh/templates/yaksh/grade_user.html
index 341fd7c..32cf09c 100644
--- a/yaksh/templates/yaksh/grade_user.html
+++ b/yaksh/templates/yaksh/grade_user.html
@@ -2,9 +2,9 @@
 {% load custom_filters %}
 {% load static %}
 
-{% block title %} Grader {% endblock %}
+{% block title %} Quizzes {% endblock %}
 
-{% block pagetitle %} Grader {% endblock pagetitle %}
+{% block pagetitle %} Quizzes {% endblock pagetitle %}
 
 {% block script %}
 <script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}">
@@ -308,18 +308,18 @@ function searchNames() {
                 </div>
               </div>
               <div class="card-body">
-                <table class="tablesorter table table-striped table-bordered table-responsive-sm" id='marks_table'>
-                  <thead>
+                <div class="table-responsive" style="height: 400px">
+                <table class="table table-dark table-responsive-sm" id='marks_table'>
+                  <thead class="thead-dark">
                     <tr>
                     <th>Questions</th>
                     <th>Type</th>
                     <th>Marks Obtained</th>
-                    <th>Regrade by question</th>
+                    <th>Regrade</th>
                     </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="list">
                     {% for question, answers in paper.get_question_answers.items %}
-                      {% with answers|last as answer %}
                           <tr>
                           <td>
                             <a href="#question_{{question.id}}">
@@ -327,17 +327,18 @@ function searchNames() {
                             </a>
                           </td>
                           <td>{{ question.type }}</td>
-                          <td>{{ answer.marks }}</td>
+                          <td>{{ answers|last }}</td>
                           <td>
                             <a href="{% url 'yaksh:regrade_by_question' course_id quiz.questionpaper_set.get.id paper.id question.id %}" class="btn btn-outline-success">
                               <i class="fa fa-repeat"></i>&nbsp;Regrade
                             </a>
                           </td>
                           </tr>
-                      {% endwith %}
                     {% endfor %}
                     </tbody>
                 </table>
+                </div>
+                <br>
                 <form name=frm id="q{{ paper.quiz.id }}_form"
                   action="{% url 'yaksh:grade_user' quiz_id user_id paper.attempt_number course_id %}"
                   method="post">
@@ -437,30 +438,33 @@ function searchNames() {
                             </center>
                           {% endif %} <!-- End has_user_assignments -->
                         {% else %}
-                        {% for ans in answers %}
+                        {% if answers|first is None %}
+                            <p> Did not attempt </p>
+                        {% else %}
+                        {% for ans in answers|slice:":-1" %}
                           <strong>
                             Attempt Number: {{forloop.counter}}
                           </strong>
                           <div id="accordian">
                             <div class="card">
                               {% if ans.answer.correct %}
-                                <div class="card-header">
+                                <div class="card-header bg-success">
                                   <span class="badge badge-success">
                                     Correct answer:
                                   </span>
                                   <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                                    <span class="pull-right">
+                                    <span class="pull-right text-white">
                                       Details&nbsp;<i class="fa fa-toggle-down"></i>
                                     </span>
                                   </a>
                                 </div>
                               {% else %}
-                                <div class="card-header">
+                                <div class="card-header bg-danger">
                                   <span class="badge badge-danger">
                                     Error:
                                   </span>
                                   <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                                    <span class="pull-right">
+                                    <span class="pull-right text-white">
                                       Details&nbsp;<i class="fa fa-toggle-down"></i>
                                     </span>
                                   </a>
@@ -555,10 +559,14 @@ function searchNames() {
                                   {% endif %}
                                 </div>
                               </div>
+                              <br>
+                              <b>Comment:</b>
+                              <textarea class="form-control" readonly="">{{ans.answer.comment}}</textarea>
                             </div>
                           </div>
                           <br>
                         {% endfor %} <!-- End for ans in answers -->
+                        {% endif %}<!-- check if attempted -->
                       </div>
                     </div>
                     {% endif %}
@@ -566,9 +574,7 @@ function searchNames() {
                     <div class="form-group">
                       <div class="col-md-2">
                         <label class="col-form-label" for="q{{ question.id }}">Marks:</label>
-                        {% with answers|last as answer %}
-                        <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answer.marks }}"><br><br>
-                        {% endwith %}
+                        <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answers|last }}"><br><br>
                       </div>
                     </div>
                     <hr/>
diff --git a/yaksh/templates/yaksh/lessons_forum.html b/yaksh/templates/yaksh/lessons_forum.html
index 58fb360..070738f 100644
--- a/yaksh/templates/yaksh/lessons_forum.html
+++ b/yaksh/templates/yaksh/lessons_forum.html
@@ -5,8 +5,11 @@
 {% endblock title %}
 {% block content %}
     <div id="wrapper" class="d-flex">
-        {% include "yaksh/sidebar.html" %}
         <div class="container" id="page-content-wrapper">
+            <div>
+                <h2><center>{{course.name}}</center></h2>
+                <center>Discussion Forum</center>
+            </div>
             <div class="d-flex p-2 bd-highlight">
                 <div class="col-md-4">
                     {% if moderator %}
@@ -20,13 +23,32 @@
                     {% endif %}
                 </div>
             </div>
-            {% if posts %}
+            {% if messages %}
                 <div>
-                    <h2><center>{{course.name}}</center></h2>
-                    <center>Discussion Forum</center>
-                </div>
-                <table class="table">
-                    <thead class="thread-inverse">
+                  <center>
+                      {% for message in messages %}
+                          <div class="alert alert-dismissible alert-{{ message.tags }}">
+                              <button type="button" class="close" data-dismiss="alert">
+                                  <i class="fa fa-close"></i>
+                              </button>
+                              <strong>{{ message }}</strong>
+                          </div>
+                      {% endfor %}
+                  </center>
+               </div>
+            {% endif %}
+            <br>
+            {% include "yaksh/sidebar.html" %}
+            <br>
+            {% if posts %}
+                <div class="card">
+                {% if posts|length > 10 %}
+                <div class="table-responsive" style="height: 700px">
+                {% else %}
+                <div class="table-responsive">
+                {% endif %}
+                <table class="table table-responsive-sm">
+                    <thead class="thread-inverse thead-light">
                         <tr>
                             <th width="700">Posts</th>
                             <th>Created by</th>
@@ -35,40 +57,42 @@
                             <th></th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="list">
                         {% for post in posts %}
-                                <tr>
-                                    <td>
-                                        <a href="{% url 'yaksh:post_comments' course.id post.uid %}">{{post.title}}</a>
-                                        <small class="text-muted d-block">{{ post.description|truncatewords:30 }}</small>
-                                        <small class="text-muted"><strong>Last updated: {{post.modified_at}}</strong></small>
-                                    </td>
-                                    <td>
-                                        {% if post.anonymouse %}
-                                            Anonymous
+                            <tr>
+                                <td>
+                                    <a href="{% url 'yaksh:post_comments' course.id post.uid %}">{{post.title}}</a>
+                                    <small class="text-muted d-block">{{ post.description|safe|truncatewords:10 }}</small>
+                                    <small class="text-muted"><strong>Last updated: {{post.modified_at}}</strong></small>
+                                </td>
+                                <td>
+                                    {% if post.anonymouse %}
+                                        Anonymous
+                                    {% else %}
+                                        {{post.creator.username}}
+                                    {% endif %}
+                                </td>
+                                <td>{{post.get_comments_count}}</td>
+                                <td>
+                                    {% with post.get_last_comment as last_comment %}
+                                        {% if last_comment %}
+                                            {{last_comment.creator}}
                                         {% else %}
-                                            {{post.creator.username}}
-                                        {% endif %}
-                                    </td>
-                                    <td>{{post.get_comments_count}}</td>
-                                    <td>
-                                        {% with post.get_last_comment as last_comment %}
-                                            {% if last_comment %}
-                                                {{last_comment.creator}}
-                                            {% else %}
-                                                None
-                                            {% endif %}
-                                        {% endwith %}
-                                    </td>
-                                    <td>
-                                        {% if user == course.creator or user in course.get_teachers %}
-                                            <small><a href="{% url 'yaksh:hide_post' course.id post.uid %}" class="pull-right fa fa-trash"></i></a></small>
+                                            None
                                         {% endif %}
-                                    </td>
-                                </tr>
-                            {% endfor %}
+                                    {% endwith %}
+                                </td>
+                                <td>
+                                    {% if user == course.creator or user in course.get_teachers %}
+                                        <small><a href="{% url 'yaksh:hide_post' course.id post.uid %}" class="pull-right fa fa-trash"></i></a></small>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
                     </tbody>
                 </table>
+                </div>
+                </div>
             {% else %}
                 <div>
                     <center>No Lesson posts here. They will appear when someone comments on video lessons.</center>
diff --git a/yaksh/templates/yaksh/login.html b/yaksh/templates/yaksh/login.html
index 63a2ef2..7195167 100644
--- a/yaksh/templates/yaksh/login.html
+++ b/yaksh/templates/yaksh/login.html
@@ -4,7 +4,7 @@
 {% block title %} Login {% endblock %}
 
 {% block nav %}
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="{% url 'yaksh:index' %}">
         <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
     </a>
@@ -12,71 +12,86 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-6 col-md-offset-6">
-            <div class="card border-primary">
-                <div class="card-header">
-                    <h3>Log in to Your Account</h3>
-                </div>
-                <div class="card-body">
-                    <div class="form-group">
-                        <form action="" method="post">
-                        {% csrf_token %}
-
-                        <center>
-                            <table class="table table-borderless">
-                            {% if form.errors %}
-                                {% for field in form %}
-                                    {% for error in field.errors %}
-                                        <div class="alert alert-dismissible alert-danger">
-                                            <button type="button" class="close" data-dismiss="alert">
-                                                <i class="fa fa-close"></i>
-                                            </button>
-                                            <strong>{{ error|escape }}</strong>
-                                        </div>
-                                    {% endfor %}
-                                {% endfor %}
-                                {% for error in form.non_field_errors %}
-                                    <div class="alert alert-dismissible alert-danger">
-                                        <button type="button" class="close" data-dismiss="alert">
-                                            <i class="fa fa-close"></i>
-                                        </button>
-                                        <strong>{{ error|escape }}</strong>
-                                    </div>
-                                {% endfor %}
-                            {% endif %}
-                            {{form.username}}
-                            <br>
-                            {{form.password}}
-                            </table>
-                        </center>
-                        <div class="row justify-content-center">
-                            <button class="btn btn-lg btn-success btn-block" type="submit" id="login-btn">
-                                <i class="fa fa-sign-in"></i>&nbsp;Login
+<br><br>
+<div class="container mt--8 pb-5">
+   <div class="row justify-content-center">
+    <div class="col-lg-5 col-md-7">
+      <div class="card bg-secondary border-0 mb-0">
+        <div class="card-header bg-transparent pb-5">
+          <div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
+          <div class="btn-wrapper text-center">
+            <a href="{% url 'social:begin' 'google-oauth2' %}" class="btn btn-neutral btn-icon">
+              <span class="btn-inner--icon">
+                <span class="fa fa-google" style="color: red;"></span>
+              </span>
+              <span class="btn-inner--text" style="color: red;">Google</span>
+            </a>
+            <a href="{% url 'social:begin' 'facebook' %}" class="btn btn-neutral btn-icon">
+              <span class="btn-inner--icon">
+                  <span class="fa fa-facebook-square">
+              </span>
+              <span class="btn-inner--text">Facebook</span>
+            </a>
+          </div>
+        </div>
+        <div class="card-body px-lg-5 py-lg-5">
+          <div class="text-center text-muted mb-4">
+            <small>Or Sign in with credentials</small>
+          </div>
+          <form role="form" action="" method="post">
+            {% csrf_token %}
+            {% if form.errors %}
+                {% for field in form %}
+                    {% for error in field.errors %}
+                        <div class="alert alert-dismissible alert-danger">
+                            <button type="button" class="close" data-dismiss="alert">
+                                <i class="fa fa-close"></i>
                             </button>
-                            <a href="{% url 'yaksh:register' %}" class="btn btn-lg btn-primary btn-block" id="signup-btn">
-                                <i class="fa fa-user-plus"></i>&nbsp;NEW USER? SIGN UP
-                            </a>
-                            <a class="btn btn-lg btn-primary btn-block" href="{% url 'password_reset' %}" id="forgot-btn">
-                                Forgot Password?
-                            </a>
+                            <strong>{{ error|escape }}</strong>
                         </div>
-                        <hr>
-                        <center><h1> OR </h1></center>
-                        Login with
-                        <a class="btn btn-social-icon btn-google" href="{% url 'social:begin' 'google-oauth2' %}">
-                            <span class="fa fa-google" style="font-size:32px;color:red" ></span>
-                        </a>
-                        <a class="btn btn-social-icon btn-facebook"  href="{% url 'social:begin' 'facebook' %}">
-                            <span class="fa fa-facebook-square" style="font-size:32px"></span>
-                        </a>
-                        </form>
-                        </br>
+                    {% endfor %}
+                {% endfor %}
+                {% for error in form.non_field_errors %}
+                    <div class="alert alert-dismissible alert-danger">
+                        <button type="button" class="close" data-dismiss="alert">
+                            <i class="fa fa-close"></i>
+                        </button>
+                        <strong>{{ error|escape }}</strong>
                     </div>
+                {% endfor %}
+            {% endif %}
+            <div class="form-group mb-3">
+              <div class="input-group input-group-merge input-group-alternative">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fa fa-user"></i></span>
+                </div>
+                {{form.username}}
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="input-group input-group-merge input-group-alternative">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fa fa-lock"></i></span>
                 </div>
+                {{form.password}}
+              </div>
+            </div>
+            <div class="text-center">
+              <button type="submit" class="btn btn-primary my-4">Sign in</button>
             </div>
+          </form>
+        </div>
+      </div>
+      <div class="row mt-3">
+        <div class="col-6">
+          <a href="{% url 'password_reset' %}" class="text-muted"><small>Forgot password?</small></a>
+        </div>
+        <div class="col-6 text-right">
+          <a href="{% url 'yaksh:register' %}" class="text-muted"><small>Create new account</small>
+          </a>
         </div>
+      </div>
     </div>
-</div>     
+   </div>
+</div>
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/micromanaged.html b/yaksh/templates/yaksh/micromanaged.html
index 5d7e58c..5339d71 100644
--- a/yaksh/templates/yaksh/micromanaged.html
+++ b/yaksh/templates/yaksh/micromanaged.html
@@ -12,7 +12,7 @@
                 Start Special Attempt
                </a>
             {% else %}
-                <span class="badge badge-secondary">Exhausted</span>
+                <span class="badge badge-warning badge-pill">Exhausted</span>
             {% endif %}
              </div>
     {% endif %}
diff --git a/yaksh/templates/yaksh/micromonitor.html b/yaksh/templates/yaksh/micromonitor.html
index cc059aa..bc64469 100644
--- a/yaksh/templates/yaksh/micromonitor.html
+++ b/yaksh/templates/yaksh/micromonitor.html
@@ -1,9 +1,9 @@
 {% if micromanager %}
     {% if micromanager.can_student_attempt %}
-        <a class="btn btn-danger" href="{% url 'yaksh:revoke_special_attempt' micromanager.id %}">Revoke</a>
+        <a class="btn btn-danger btn-sm" href="{% url 'yaksh:revoke_special_attempt' micromanager.id %}">Revoke</a>
     {% else %}
-        <a class="btn btn-success" href="{% url 'yaksh:allow_special_attempt' user_id course_id quiz_id %}">Allow </a>
+        <a class="btn btn-success btn-sm" href="{% url 'yaksh:allow_special_attempt' user_id course_id quiz_id %}">Allow </a>
     {% endif %}
 {% else %}
-    <a class="btn btn-success" href="{% url 'yaksh:allow_special_attempt' user_id course_id quiz_id %}">Allow </a>
+    <a class="btn btn-success btn-sm" href="{% url 'yaksh:allow_special_attempt' user_id course_id quiz_id %}">Allow </a>
 {% endif %}
diff --git a/yaksh/templates/yaksh/moderator_dashboard.html b/yaksh/templates/yaksh/moderator_dashboard.html
index b2d38b0..3a3d8b9 100644
--- a/yaksh/templates/yaksh/moderator_dashboard.html
+++ b/yaksh/templates/yaksh/moderator_dashboard.html
@@ -68,7 +68,7 @@
                                 </a>
                             </div>
                             <div class="col-md">
-                                <a class="card-link btn btn-info" data-toggle="collapse" href="#collapse{{course.id}}">
+                                <a class="card-link btn btn-outline-info" data-toggle="collapse" href="#collapse{{course.id}}">
                                     Details
                                     <i class="fa fa-toggle-down" id="toggle_course_{{course.id}}"></i>
                                 </a>
@@ -80,7 +80,7 @@
                             <strong>{{ course.name }}</strong>
                             {% get_course_details course as course_details %}
                             {% if course_details %}
-                                <table class="table table-bordered table-responsive-sm">
+                                <table class="table table-responsive-sm">
                                     <tr>
                                         <th>Quiz</th>
                                         <th>Taken By</th>
diff --git a/yaksh/templates/yaksh/monitor.html b/yaksh/templates/yaksh/monitor.html
index 2b43ec1..6fd3cb1 100644
--- a/yaksh/templates/yaksh/monitor.html
+++ b/yaksh/templates/yaksh/monitor.html
@@ -38,219 +38,230 @@ $(document).ready(function()
 {% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
+  {% if messages %}
+      {% for message in messages %}
+      <div class="alert alert-dismissible alert-{{ message.tags }}">
+          <button type="button" class="close" data-dismiss="alert">
+              <i class="fa fa-close"></i>
+          </button>
+          <strong>{{ message }}</strong>
+      </div>
+      {% endfor %}
+  {% endif %}
   {% if quiz %}
     {% if papers %}
+    <div class="row">
+      <div class="col-md-3">
       <div class="card">
+        <div class="card-body">
           <div class="table-responsive">
-              <table id="course-detail" class="table">
-                  <tr>
-                      <td><b>Course Name:&nbsp</b></td>
-                      <td>{{course.name}}</td>
-                  </tr>
-                  <tr>
-                      <td><b>Quiz Name:&nbsp</b></td>
-                      <td>{{quiz.description}}</td>
-                  </tr>
-                  <tr>
-                      <td><b>Number of papers: &nbsp</b></td>
-                      <td>{{papers|length}}</td>
-                  </tr>
-                  <tr>
-                      <td><b>Papers Completed: &nbsp</b></td>
-                      <td>
-                          {% completed papers as completed_papers %}
-                          <b>{{completed_papers}}</b>
-                      </td>
-                  </tr>
-                  <tr>
-                      <td><b>Papers in progress: &nbsp</b></td>
-                      <td>
-                          {% inprogress papers as inprogress_papers %}
-                          <b>{{ inprogress_papers }}</b>
-                      </td>
-                  </tr>
-              </table>
+            <table id="course-detail" class="table">
+                <tr>
+                    <td><b>Course Name:&nbsp</b></td>
+                    <td>{{course.name}}</td>
+                </tr>
+                <tr>
+                    <td><b>Quiz Name:&nbsp</b></td>
+                    <td>{{quiz.description}}</td>
+                </tr>
+                <tr>
+                  <td><b>Number of papers: &nbsp</b></td>
+                  <td>{{total_papers}}</td>
+                </tr>
+                <tr>
+                    <td><b>Papers Completed: &nbsp</b></td>
+                    <td>
+                        <b>{{completed_papers}}</b>
+                    </td>
+                </tr>
+                <tr>
+                    <td><b>Papers in progress: &nbsp</b></td>
+                    <td>
+                        <b>{{ inprogress_papers }}</b>
+                    </td>
+                </tr>
+            </table>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="col">
+            <div class="badge badge-info">
+              Auto-Refreshes every 5 minutes
+            </div>
           </div>
-      </div>
-      <br>
           <br>
-          {% if messages %}
-              {% for message in messages %}
-              <div class="alert alert-dismissible alert-{{ message.tags }}">
-                  <button type="button" class="close" data-dismiss="alert">
-                      <i class="fa fa-close"></i>
-                  </button>
-                  <strong>{{ message }}</strong>
-              </div>
-              {% endfor %}
-          {% endif %}
+          <div class="col">
+            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#csvModal">
+              <i class="fa fa-download"></i>&nbsp;Download CSV
+            </button>
+          </div>
           <br>
-      <div class="row">
-        <div class="col-md-4">
-          <button type="button" class="btn btn-info" data-toggle="modal" data-target="#csvModal">
-            <i class="fa fa-download"></i>&nbsp;Download CSV
-          </button>
-        </div>
-        <div class="col-md-4">
-          <a href="{% url 'yaksh:show_statistics' papers.0.question_paper.id course.id %}" class="btn btn-primary">
-            <i class="fa fa-line-chart"></i>&nbsp;Question Statistics
-          </a>
-        </div>
-        <div class="col-md-4">
-          <div class="badge badge-info">
-            Auto-Refreshes every 5 minutes
+          <div class="col">
+            <a href="{% url 'yaksh:show_statistics' papers.0.question_paper.id course.id %}" class="btn btn-primary">
+              <i class="fa fa-line-chart"></i>&nbsp;Question Statistics
+            </a>
           </div>
         </div>
       </div>
-      <hr>
-      <div class="row">
-        <div class="col-md-6">
-        <p>
-        <b>
-        - Download the CSV file from the button above<br />
-        - Edit and upload the same <br />
-        </b>
-        </p>
-        </div>
-        <div class="col-md-6">
-        <form id="upload_users" action="{% url 'yaksh:upload_marks' course.id papers.0.question_paper.id %}" method="POST" enctype="multipart/form-data">
-            {% csrf_token %}
-            <div class="input-group mb-3">
-                <div class="custom-file">
-                    <input type="file" class="custom-file-input" name="csv_file" id="upload"/>
-                    <label class="custom-file-label" for="upload">Select</label>
-                </div>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-primary" type="submit">
-                        <i class="fa fa-upload"></i>
-                        Upload
-                    </button>
-                </div>
-            </div>
-              <script>
-                  $('#upload').on('change',function(){
-                      //get the file name
-                      var fileName = $(this).val();
-                      //replace the "Choose a file" label
-                      $(this).next('.custom-file-label').html(fileName);
-                  })
-              </script>
-        </form>
-        </div>
       </div>
-      <br>
-      <table id="result-table" class="tablesorter table table-striped table-responsive-sm">
-          <thead>
-          <tr>
-            <th> Sr No. </th>
-            <th> Name&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Username&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Roll No&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Institute&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Attempts&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Time Left&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Status&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Extend time&nbsp;<i class="fa fa-sort"></i> </th>
-            <th> Special Attempt&nbsp;<i class="fa fa-sort"></i> </th>
-          </tr>
-          </thead>
-          <tbody>
-          {% for paper in latest_attempts %}
-          <tr>
-              <td>{{forloop.counter}}</td>
-              <td> <a href="{% url 'yaksh:user_data' paper.user.id paper.question_paper.id course.id %}">
-              {{ paper.user.get_full_name.title }}</a> </td>
-              <td> {{ paper.user.username }} </td>
-              <td> {{ paper.user.profile.roll_number }} </td>
-              <td> {{ paper.user.profile.institute }} </td>
-              <td> {{ paper.marks_obtained }} </td>
-              <td> {{ paper.answers.count }} </td>
-              <td id="time_left{{forloop.counter0}}"> {{ paper.time_left }} </td>
-              <td> {% if paper.is_attempt_inprogress %}
-                        <span class="badge badge-secondary"> Inprogress </span>
-                    {% else %}
-                        <span class="badge badge-secondary"> Completed </span>
-                   {% endif %}
-              </td>
-              <td>
-                   <form method="post" action="{% url 'yaksh:extend_time' paper.id %}">
-                       {% csrf_token %}
-                       <div class="form-group">
-                            <label for="extra_time"> Time in mins </label>
-                            <input type="number" step="any" class="form-control" id="extra_time" name="extra_time" required>
-                       </div>
-                       <button type="submit" class="btn btn-primary">Extend Time</button>
-                   </form>
-              </td>
-              <td>{% specail_attempt_monitor paper.user.id course.id quiz.id %}</td>
-          </tr>
-          {% endfor %}
-          </tbody>
-      </table>
-      <!-- CSV Modal -->
-      <div class="modal fade" id="csvModal" role="dialog">
-          <div class="modal-dialog">
-          <!-- Modal content-->
-          <div class="modal-content">
-          <div class="modal-header">
-            <h3 class="modal-title">Download CSV for {{quiz.description}} </h3>
-            <button type="button" class="close" data-dismiss="modal">
-              <i class="fa fa-close"></i>
-            </button>
+      <div class="col-md-9">
+        <div class="row">
+          <div class="col-md-5">
+            <ul>
+              <li>
+                Download the CSV file from the button
+              </li>
+              <li>
+                Edit and upload the same
+              </li>
+              <li>
+                <b>Note: Do not change the CSV Headers</b>
+              </li>
+            </ul>
           </div>
-          <form action="{% url 'yaksh:download_quiz_csv' course.id quiz.id %}" method="post">
-          {% csrf_token %}
-          <div class="modal-body">
-            <b>Uncheck unwanted columns</b>
-            <br>
-              {% for field in csv_fields %}
-              <div class="form-check form-check-inline">
-                <label class="form-check-label">
-                    {% if field == 'username' or field == 'questions' %}
-                    <input class="form-check-input" name="csv_fields" type="checkbox" value="{{ field }}" checked onclick="return false"> {{ field }}
-                    {% else %}
-                    <input class="form-check-input" name="csv_fields" type="checkbox" value="{{ field }}" checked> {{ field }}
-                    {% endif %}
-                </label>
-              </div>
-              <br>
-              {% endfor %}
-              <b>Select Attempt Number: Default latest attempt</b>
-              <select class="form-control" name = "attempt_number">
-                  {%for attempt_number in attempt_numbers %}
-                  {% if forloop.last %}
-                  <option value="{{ attempt_number }}" selected>{{ attempt_number }} (Latest)</option>
-                  {% else %}
-                  <option value = "{{ attempt_number }}"> {{ attempt_number }}</option>
-                  {% endif %}
-                  {% endfor %}
-              </select>
+          <div class="col-md-6">
+          <form id="upload_users" action="{% url 'yaksh:upload_marks' course.id papers.0.question_paper.id %}" method="POST" enctype="multipart/form-data">
+              {% csrf_token %}
+              <input type="file" class="custom-file-input" name="csv_file" id="upload"/>
+              <button class="btn btn-outline-primary" type="submit">
+                  <i class="fa fa-upload"></i>
+                  Upload
+              </button>
+          </form>
           </div>
-          <div class="modal-footer">
-            <button type="submit" class="btn btn-success">
-              <span class="fa fa-save"></span>&nbsp;Download
-            </button>
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">
-              Close
-            </button>
+        </div>
+        <hr>
+        <div class="row">
+          <div class="col-md-3">
+            <b>Select Attempt number:</b>
           </div>
-          </form>
+          <div class="col-md-2">
+            <select id="attempt" onchange="window.location.href=this.value" class="custom-select">
+              <option selected="">Select</option>
+              {% for attempt in attempt_numbers %}
+                <option value="{% url 'yaksh:monitor' quiz.id course.id attempt %}">
+              {{attempt}}
+              </option>
+              {% endfor %}
+            </select>
           </div>
+        </div>
+        <br>
+        <div class="card">
+          {% if total_papers > 10 %}
+          <div class="table-responsive" style="height: 800px">
+          {% else %}
+          <div class="table-responsive">
+          {% endif %}
+          <table id="result-table" class="table table-dark table-responsive-sm">
+            <thead class="thead-dark">
+            <tr>
+              <th> Sr No. </th>
+              <th> Name&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Roll No&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Questions Attempted&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Time Left&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Status&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Time Extension&nbsp;<i class="fa fa-sort"></i> </th>
+              <th> Special Attempt&nbsp;<i class="fa fa-sort"></i> </th>
+            </tr>
+            </thead>
+            <tbody class="list">
+            {% for paper in papers %}
+            <tr>
+                <td>{{forloop.counter}}</td>
+                {% with paper.user as student %}
+                <td>
+                  <i class="fa fa-edit"></i>
+                  <a href="{% url 'yaksh:user_data' paper.user_id paper.question_paper_id course.id %}" class="text-white">
+                    {{ student.get_full_name.title }}
+                  </a>
+                </td>
+                <td> {{ student.profile.roll_number }} </td>
+                {% endwith %}
+                <td> {{ paper.marks_obtained }} </td>
+                <td>
+                  {% get_dict_value questions_attempted paper.id as que_attempt %}
+                  {{que_attempt}} out of {{questions_count}}
+                </td>
+                <td id="time_left{{forloop.counter0}}"> {{ paper.time_left }} </td>
+                <td> {% if paper.is_attempt_inprogress %}
+                          <span class="badge badge-warning"> Inprogress </span>
+                      {% else %}
+                          <span class="badge badge-success"> Completed </span>
+                     {% endif %}
+                </td>
+                <td>
+                  <form method="post" action="{% url 'yaksh:extend_time' paper.id %}">
+                    {% csrf_token %}
+                      <div class="input-group">
+                      <input type="number" step="any" class="form-control form-control-sm" id="extra_time" name="extra_time" required>
+                      <div class="input-group-append">
+                        <button class="btn btn-outline-success btn-sm" type="submit">
+                          <i class="fa fa-plus"></i>
+                        </button>
+                      </div>
+                      </div>
+                  </form>
+                </td>
+                <td>{% specail_attempt_monitor paper.user.id course.id quiz.id %}</td>
+            </tr>
+            {% endfor %}
+            </tbody>
+          </table>
           </div>
-      </div>
-    {% else %}
-      <div class="col-md-12">
-        <div class="alert alert-warning">
-          <center>
-            <h4>No Users Found for {{ quiz.description }}</h4>
-          </center>
         </div>
-      </div>
-    {% endif %} {# if papers #}
-  {% else %}
-    <h4>No Quiz Found</h4>
-  {% endif %}
+        <!-- CSV Modal -->
+        <div class="modal fade" id="csvModal" role="dialog">
+            <div class="modal-dialog">
+            <!-- Modal content-->
+            <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">Download CSV for {{quiz.description}} </h3>
+              <button type="button" class="close" data-dismiss="modal">
+                <i class="fa fa-close"></i>
+              </button>
+            </div>
+            <form action="{% url 'yaksh:download_quiz_csv' course.id quiz.id %}" method="post">
+            {% csrf_token %}
+            <div class="modal-body">
+                <b>Select Attempt Number: Default latest attempt</b>
+                <select class="form-control" name = "attempt_number">
+                    {% for attempt_number in attempt_numbers %}
+                    {% if forloop.last %}
+                    <option value="{{ attempt_number }}" selected>{{ attempt_number }} (Latest)</option>
+                    {% else %}
+                    <option value = "{{ attempt_number }}"> {{ attempt_number }}</option>
+                    {% endif %}
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="modal-footer">
+              <button type="submit" class="btn btn-success">
+                <span class="fa fa-save"></span>&nbsp;Download
+              </button>
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                Close
+              </button>
+            </div>
+            </form>
+            </div>
+            </div>
+        </div>
+      {% else %}
+        <div class="col-md-12">
+          <div class="alert alert-warning">
+            <center>
+              <p>No Users Found for {{ quiz.description }}</p>
+            </center>
+          </div>
+        </div>
+      {% endif %} {# if papers #}
+    {% else %}
+      <h4>No Quiz Found</h4>
+    {% endif %}
+  </div>
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/post_comments.html b/yaksh/templates/yaksh/post_comments.html
index 70aac47..17576b8 100644
--- a/yaksh/templates/yaksh/post_comments.html
+++ b/yaksh/templates/yaksh/post_comments.html
@@ -25,8 +25,8 @@
               </center>
            </div>
        {% endif %}
-        <div class="card mb-2 border-dark">
-            <div class="card-header text-white bg-dark py-2 px-3">
+        <div class="card mb-2">
+            <div class="card-header py-2 px-3">
                 {{post.title}}
                 <br>
                 <small>
@@ -77,7 +77,7 @@
                                 </strong>
                             </div>
                             <div class="col-6 text-right">
-                                <small class="text-muted">{{comment.created_at}} {% if user == course.creator or user in course.get_teachers %} <a href="{% url 'yaksh:hide_comment' post.target.id comment.uid %}" class="fa fa-trash"></a>{% endif %}</small>
+                                <small class="text-muted">{{comment.created_at}} {% if user == course.creator or user in course.get_teachers %} <a href="{% url 'yaksh:hide_comment' course.id comment.uid %}" class="fa fa-trash"></a>{% endif %}</small>
                             </div>
                         </div>
                         <p class="card-text description">{{comment.description|safe}}</p>
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index 9189324..61b2b3b 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -152,34 +152,24 @@ question_type = "{{ question.type }}";
           <div>
             <h2>{{ question.summary }}</h2>
           </div>
-          <div>
+          <div style="font-size: 20px">
             {% if question.language == "other" %}
               <small class="text text-muted"><strong>Topic:</strong> <span class="badge badge-primary">{{question.topic}}</small></span>
             {% else %}
               <small class="textx text-muted"><strong>Language:</strong> <span class="badge badge-primary">{{question.language}}</span></small>
             {% endif %}
-            {% if question.type == "mcq" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">SINGLE CORRECT CHOICE</span></small>
-            {% elif question.type == "mcc" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">MULTIPLE CORRECT CHOICES</span></small>
-            {% elif question.type == "code" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">PROGRAMMING</span></small>
-            {% elif question.type == "upload" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ASSIGNMENT UPLOAD</span></small>
-            {% elif question.type == "integer" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH INTEGER ANSWER</span></small>
-            {% elif question.type == "string" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH STRING ANSWER</span></small>
-              {% if testcase.string_check == "lower" %}
-                  <br>(CASE INSENSITIVE)
-              {% else %}
-                  <br>(CASE SENSITIVE)
+            <small class="text text-muted"><strong>Type:</strong>
+              <span class="badge badge-primary">
+              {{question.get_type_display}}
+              {% if question.type == "string" %}
+                {% if testcase.string_check == "lower" %}
+                    (CASE INSENSITIVE)
+                {% else %}
+                    (CASE SENSITIVE)
+                {% endif %}
               {% endif %}
-            {% elif question.type == "float" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH FLOAT ANSWER</span></small>
-            {% elif question.type == "arrange" %}
-              <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ARRANGE THE OPTIONS IN CORRECT ORDER</span></small>
-            {% endif %}
+              </span>
+            </small>
             <span class="badge badge-info pull-right">
               <small><strong>Marks: {{ question.points }}</strong></small>
             </span>
diff --git a/yaksh/templates/yaksh/quit.html b/yaksh/templates/yaksh/quit.html
index a801ea8..828ad60 100644
--- a/yaksh/templates/yaksh/quit.html
+++ b/yaksh/templates/yaksh/quit.html
@@ -4,43 +4,37 @@
 {% block title %} Quit Quiz {% endblock %}
 
 {% block nav %} 
-<div class="container-fluid yakshnav">
-  <nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-    <div class="container">
-        <a class="navbar-brand" href="{% url 'yaksh:index' %}">
-            <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
-        </a>
-    </div><!-- /.container -->
-  </nav><!-- /.navbar -->
-</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+    <a class="navbar-brand" href="{% url 'yaksh:index' %}">
+        <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
+    </a>
+</nav>
 {% endblock %}
 
 {% block content %}
 <center>
 <div class="col-md-8">
     <h3>Submission Status</h3>
-    <table class="table table-bordered table-responsive-sm" >
-        <thead>
-            <tr class="text-center">
+    <table class="table table-dark table-responsive-sm" >
+        <thead class="thead-dark">
+            <tr>
                 <th> Question</th>
                 <th> Status </th>
             </tr>
         </thead>
-
+        <tbody class="list">
         {% for question in paper.questions.all %}
-            <tbody>
-                {% if question in paper.questions_answered.all %}
-                    <tr class="table-success">
-                    <td> {{ question.summary }} </td>
-                    <td> Attempted </td>
-                {% else %}
-                    <tr class="table-warning">
-                    <td> {{ question }} </td>
-                    <td> Not completed </td>
-                {% endif %}
-                </tr>
-            </tbody>
+            <tr>
+            {% if question in paper.questions_answered.all %}
+                <td> {{ question.summary }} </td>
+                <td> <span class="badge badge-success">Attempted</span> </td>
+            {% else %}
+                <td> {{ question }} </td>
+                <td> <span class="badge badge-warning">Not Attempted</span> </td>
+            {% endif %}
+            </tr>
         {% endfor %}
+        </tbody>
     </table>
 </div>
 </center>
diff --git a/yaksh/templates/yaksh/quizzes_user.html b/yaksh/templates/yaksh/quizzes_user.html
index e28cb69..3dfcbac 100644
--- a/yaksh/templates/yaksh/quizzes_user.html
+++ b/yaksh/templates/yaksh/quizzes_user.html
@@ -28,7 +28,7 @@
         </div>
         {% if "Search" in title %}
         <div class="col-md-4">
-            <a href="{% url 'yaksh:quizlist_user' %}" class="btn btn-primary">
+            <a href="{% url 'yaksh:quizlist_user' %}" class="btn btn-outline-danger">
                 <i class="fa fa-times"></i>&nbsp;Clear search
             </a>
         </div>
@@ -61,13 +61,13 @@
                         <div class="row">
                             <div class="col-md-7">{{course.data.name}}</div>
                             <div class="col-md-2">
-                                <a class="card-link btn btn-info" data-toggle="collapse" href="#collapse{{course.data.id}}">
+                                <a class="card-link btn btn-outline-info" data-toggle="collapse" href="#collapse{{course.data.id}}">
                                     Details&nbsp;<i class="fa fa-toggle-down" id="toggle_course_{{course.id}}"></i>
                                 </a>
                             </div>
                             <div class="col-md-2">
                                 {% if user in course.data.requests.all %}
-                                    <span class="badge badge-warning badge-pill">
+                                    <span class="badge badge-primary badge-pill">
                                         Request Pending
                                     </span>
                                 {% elif user in course.data.rejected.all %}
@@ -94,7 +94,7 @@
                                             {% endif %}
                                         {% else %}
                                             <span class="badge badge-danger badge-pill">
-                                                Enrollment Closed
+                                                No Enrollments allowed
                                             </span>
                                         {% endif %}
                                     {% else %}
@@ -135,24 +135,34 @@
                                     <p><b>Starts On:</b> {{course.data.start_enroll_time}}</p>
                                     <p><b>Ends On:</b> {{course.data.end_enroll_time}}</p>
                                     {% with course.completion_percentage as percent %}
-                                    <p><b>Course Progress:</b></p>
-                                    <div class="progress">
-                                        {% if percent %}
-                                            {% if percent <= 50 %}
-                                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{percent}}"
-                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                            {% elif percent <= 75 %}
-                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{percent}}"
-                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                            {% else %}
-                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
-                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                            {% endif %}
-                                            <b style="color: white;">{{percent}}% completed</b>
+                                    <div class="progress-wrapper">
+                                        <div class="progress-info">
+                                            <div class="progress-label">
+                                              <span>Course completed</span>
                                             </div>
-                                        {% else %}
-                                            <b style="color: black;">0% completed</b>
-                                        {% endif %}
+                                            <div class="progress-percentage">
+                                              <span>
+                                                {% if percent %} {{percent}} {% else %} 0 {% endif %}%
+                                              </span>
+                                            </div>
+                                        </div>
+                                        <div class="progress">
+                                            {% if percent %}
+                                                {% if percent <= 50 %}
+                                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{percent}}"
+                                                    aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                                    </div>
+                                                {% elif percent <= 75 %}
+                                                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{percent}}"
+                                                    aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                                    </div>
+                                                {% else %}
+                                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                                    aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                                    </div>
+                                                {% endif %}
+                                            {% endif %}
+                                        </div>
                                     </div>
                                     {% endwith %}
                                 </div>
diff --git a/yaksh/templates/yaksh/show_lesson_quiz.html b/yaksh/templates/yaksh/show_lesson_quiz.html
index 82e01bc..48765bd 100644
--- a/yaksh/templates/yaksh/show_lesson_quiz.html
+++ b/yaksh/templates/yaksh/show_lesson_quiz.html
@@ -5,8 +5,8 @@
         document.body,
         {
           delimiters: [
-            {left: "$$", right: "$$", display: false},
-            {left: "$", right: "$", display: true},
+            {left: "$$", right: "$$", display: true},
+            {left: "$", right: "$", display: false},
           ]
         }
       );
@@ -35,24 +35,18 @@
                 {% else %}
                   <small class="textx text-muted"><strong>Language:</strong> <span class="badge badge-primary">{{question.language}}</span></small>
                 {% endif %}
-                {% if question.type == "mcq" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">SINGLE CORRECT CHOICE</span></small>
-                {% elif question.type == "mcc" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">MULTIPLE CORRECT CHOICES</span></small>
-                {% elif question.type == "integer" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH INTEGER ANSWER</span></small>
-                {% elif question.type == "string" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH STRING ANSWER</span></small>
-                  {% if testcase.string_check == "lower" %}
-                      <br>(CASE INSENSITIVE)
-                  {% else %}
-                      <br>(CASE SENSITIVE)
+                <small class="text text-muted"><strong>Type:</strong>
+                <span class="badge badge-primary">
+                  {{question.get_type_display}}
+                  {% if question.type == "string" %}
+                    {% if testcase.string_check == "lower" %}
+                        (CASE INSENSITIVE)
+                    {% else %}
+                        (CASE SENSITIVE)
+                    {% endif %}
                   {% endif %}
-                {% elif question.type == "float" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH FLOAT ANSWER</span></small>
-                {% elif question.type == "arrange" %}
-                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ARRANGE THE OPTIONS IN CORRECT ORDER</span></small>
-                {% endif %}
+                </span>
+              </small>
                 <span class="badge badge-info pull-right">
                   <small><strong>Points: {{ question.points }}</strong></small>
                 </span>
@@ -71,7 +65,7 @@
                   <input name="answer" type="radio" value="{{ test_case.id }}" checked />
                     {{ test_case.options|safe }} <br/>
                   {% else %}
-                  <input name="answer" type="radio" value="{{ test_case.id }}" />
+                  <input name="answer" type="radio" value="{{ test_case.id }}" required="" />
                     {{ test_case.options|safe }} <br/>
                   {% endif %}
                 {% endfor %}
@@ -80,21 +74,21 @@
             {% if question.type == "integer" %}
             <!-- Integer type Question -->
                 Enter Integer:<br/>
-                <input autofocus class="form-control" name="answer" type="number" id="integer" value="{{ last_attempt|to_integer }}" />
+                <input autofocus class="form-control" name="answer" type="number" id="integer" value="{{ last_attempt|to_integer }}" required=""/>
                 <br><br>
             {% endif %}
 
             {% if question.type == "string" %}
             <!-- String type question -->
                 Enter Text:<br/>
-                <textarea autofocus name="answer" id="string" class="form-control" style="width: 100%">{{ last_attempt|to_str }}</textarea>
+                <textarea autofocus name="answer" id="string" class="form-control" style="width: 100%" required="">{{ last_attempt|to_str }}</textarea>
                 <br/><br/>
             {% endif %}
 
             {% if question.type == "float" %}
             <!-- Float type question -->
                 Enter Decimal Value :<br/>
-                <input autofocus class="form-control" name="answer" type="number" step="any" id="float" value="{{ last_attempt|to_float }}" />
+                <input autofocus class="form-control" name="answer" type="number" step="any" id="float" value="{{ last_attempt|to_float }}" required=""/>
                 <br/><br/>
             {% endif %}
 
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
index 31261f3..0da20ee 100644
--- a/yaksh/templates/yaksh/show_lesson_statistics.html
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -1,14 +1,42 @@
 {% extends "manage.html" %}
+{% load static %}
 {% load custom_filters %}
-{% block title %} Lesson Statistics {% endblock %}
+{% block title %} Lesson Quiz Stats {% endblock %}
 {% block pagetitle %} Statistics for {{lesson}} {% endblock %}
+{% block script %}
+<script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}">
+</script>
+<script type="text/javascript">
+    $(document).ready(function() {
+        $.tablesorter.addWidget({
+            id: "numbering",
+            format: function(table) {
+                var c = table.config;
+                $("tr:visible", table.tBodies[0]).each(function(i) {
+                    $(this).find('td').eq(0).text(i + 1);
+                });
+            }
+        });
+        $("#stats-table").tablesorter({
+            headers: {
+                0: { sorter: false }
+            },
+            widgets: ['numbering']
+        });
+    });
+</script>
+{% endblock %}
 {% block content %}
 <div class="container-fluid">
     <br>
-    <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
-        <i class="fa fa-arrow-left"></i>&nbsp;Back
-    </a>
-    <br><br>
+    <div class="row">
+        <div class="col-md-2">
+            <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
+                <i class="fa fa-arrow-left"></i>&nbsp;Back
+            </a>
+        </div>
+    </div>
+    <br>
     {% if data %}
     <div class="row">
         <div class="col-md-4">
@@ -53,8 +81,8 @@
             {% else %}
                 <div class="card">
                     <div class="card-header">
-                        {{question.summary}}
-                        <div>
+                        <b>{{question.summary}}</b>
+                        <div style="font-size: 20px">
                         {% if question.language == "other" %}
                           <small class="text text-muted"><strong>Topic:</strong> <span class="badge badge-primary">{{question.topic}}</small></span>
                         {% else %}
@@ -104,15 +132,21 @@
                             {{tc.options}}
                             {% if per_tc_ans %}
                                 {% get_tc_percent tc.id per_tc_ans as percent %}
-                                <div class="progress" style="width: 30%">
-                                {% if percent %}
-                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
-                                      aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                                        <b style="color: white;">{{percent}}%</b>
+                                <div class="progress-wrapper col-md-4">
+                                    <div class="progress-info">
+                                        <div class="progress-percentage">
+                                          <span>
+                                            {% if percent %} {{percent|floatformat}} {% else %} 0 {% endif %}%
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress">
+                                        {% if percent %}
+                                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                              aria-valuemin="0" aria-valuemax="100" style="width:{{percent|floatformat}}%">
+                                            </div>
+                                        {% endif %}
                                     </div>
-                                {% else %}
-                                    <b style="color: black;">0%</b>
-                                {% endif %}
                                 </div>
                             {% endif %}
                             {% elif question.type == "integer" %}
@@ -152,23 +186,36 @@
                     <br><br>
                 {% endif %}
                 {% include "yaksh/paginator.html" %}
-                <table class="table table-responsive">
-                    <tr>
-                        <th>Sr No.</th>
-                        <th>Student Name</th>
-                        <th>Email</th>
-                        <th>Latest Submission</th>
-                    </tr>
-                    {% for data in objects.object_list %}
+                {% if objects.object_list|length > 10 %}
+                <div class="table-responsive" style="height: 700px">
+                {% else %}
+                <div class="table-responsive">
+                {% endif %}
+                    <table class="table table-dark table-responsive" id="stats-table">
+                        <thead class="thead-dark">
                         <tr>
-                            <td>{{ forloop.counter0|add:objects.start_index }}</td>
-                            <td>{{data.student__first_name}} {{data.student__last_name}}</td>
-                            <td>{{data.student__email}}</td>
-                            {% get_answers data.toc_id data.student_id as user_answer %}
-                            <td>{{ user_answer.0 }}</td>
+                            <th>Sr No.</th>
+                            <th>Student Name&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Roll No&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Email&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Latest Submission&nbsp;<i class="fa fa-sort"></i></th>
                         </tr>
-                    {% endfor %}
-                </table>
+                        </thead>
+                        <tbody class="list">
+                        {% for data in objects.object_list %}
+                            <tr>
+                                <td>{{ forloop.counter }}</td>
+                                <td>{{data.student__first_name}} {{data.student__last_name}}</td>
+                                <td>{{data.student__profile__roll_number}}</td>
+                                <td>{{data.student__email}}</td>
+                                {% get_answers data.toc_id data.student_id as user_answer %}
+                                <td>{{ user_answer.0 }}</td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <br>
                 {% include "yaksh/paginator.html" %}
             {% endif %}
         </div>
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index d27293e..faa7735 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -9,24 +9,20 @@
     var contents_by_time = JSON.parse('{{ contents_by_time|safe }}');
     var loc = 0;
     var video_time = [];
+    var markers = [];
+    var track_count = 0;
 </script>
-<script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}"></script>
 <script type="text/javascript" src="{% static 'yaksh/js/show_toc.js' %}">
 </script>
 <script src="{% static 'yaksh/js/jquery-sortable.js' %}"></script>
-<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
-</script>
 <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 {% endblock %}
-{% block css %}
-<link rel="stylesheet" href="{% static 'yaksh/css/jquery-ui/jquery-ui.css' %}">
-{% endblock %}
 {% block main %}
 <div class="wrapper">
     <!-- Sidebar  -->
     <nav id="sidebar">
-        <div class="sidebar-header">
-            <a class="text-light" href="{% url 'yaksh:course_modules' course.id %}">
+        <div class="sidebar-header bg-info">
+            <a class="text-white" href="{% url 'yaksh:course_modules' course.id %}">
                 {{course.name}}
             </a>
         </div>
@@ -59,14 +55,16 @@
                             {% for unit in module.get_learning_units %}
                                 {% get_unit_status course module unit user as status %}
                                 {% if unit.type == "quiz" %}
-                                    <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="list-group-item">
-                                        {% if status == "completed" %}
-                                          <i class="fa fa-check-square"></i>
-                                        {% else %}
-                                          <i class="fa fa-square-o"></i>
-                                        {% endif %}
-                                        {{ unit.quiz.description }}
-                                    </a>
+                                    {% if unit.quiz.questionpaper_set.get.id %}
+                                        <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="list-group-item">
+                                            {% if status == "completed" %}
+                                              <i class="fa fa-check-square"></i>
+                                            {% else %}
+                                              <i class="fa fa-square-o"></i>
+                                            {% endif %}
+                                            {{ unit.quiz.description }}
+                                        </a>
+                                    {% endif %}
                                 {% else %}
                                     <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="list-group-item">
                                         {% if status == "completed" %}
@@ -196,6 +194,11 @@
                     {% endif %}
                 {% endif %}
                 <div class="col-md-8">
+                    <form action="{% url 'stats:add_tracker' track_id %}" method="POST" id="track-form">
+                        {% csrf_token %}
+                        <input type="hidden" name="video_duration" id="video_duration">
+                        <input type="hidden" name="current_video_time" id="current_video_time">
+                    </form>
                     <div class="card">
                         <div class="card-header"><h3><strong>Lesson Description</strong></h3></div>
                         <div class="card-body">
@@ -226,7 +229,7 @@
                 </div>
             </div>
             <br>
-            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" id="next_unit">
                     Next&nbsp;<i class="fa fa-step-forward"></i>
             </a>
         {% endif %}
@@ -276,6 +279,12 @@
         {% endif %}
     </div>
 </div>
-<div id="dialog"></div>
+<div class="modal" tabindex="-1" role="dialog" id="myModal">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-body" id="lesson_quiz_question"></div>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
diff --git a/yaksh/templates/yaksh/showquestions.html b/yaksh/templates/yaksh/showquestions.html
index daeaea7..aefb3a6 100644
--- a/yaksh/templates/yaksh/showquestions.html
+++ b/yaksh/templates/yaksh/showquestions.html
@@ -51,26 +51,17 @@
                   <br><br>
                   <h4> Or </h4>
                   <br>
-                  <div class="input-group mb-3">
                       <div class="custom-file">
-                          {{ upload_form }}
+                          {{ upload_form.file }}
                           <label class="custom-file-label" for="id_file">
                               Choose file
                           </label>
                       </div>
+                      <br><br>
                       <div class="input-group-append">
                         <button class="btn btn-outline-primary" type="submit" name="upload" value="upload"><i class="fa fa-upload"></i>&nbsp;Upload File</button>
                       </div>
-                  </div>
               </div>
-              <script>
-                  $('#id_file').on('change',function(){
-                      //get the file name
-                      var fileName = $(this).val();
-                      //replace the "Choose a file" label
-                      $(this).next('.custom-file-label').html(fileName);
-                  })
-              </script>
           </form>
         </div>
       </div>
@@ -87,119 +78,128 @@
           </div>
           {% endfor %}
         {% endif %}
-        <div class="card">
-          <div class="card-body">
-            <!-- Filter Questions -->
-            <h4>Filters Questions: </h4>
-            <form method="GET" action="{% url 'yaksh:questions_filter' %}">
-
-              <div class="row">
-                  <div class="col-md-4">{{ form.question_type }}</div>
-                  <div class="col-md-4">{{ form.language }}</div>
-                  <div class="col-md-4">{{ form.marks }}</div>
-                  <br><br>
-                  <div class="col">
-                    <button class="btn btn-outline-success">
-                      <i class="fa fa-filter"></i>&nbsp;Filter
+        <div class="row">
+          <div class="col">
+          <div class="card">
+            <div class="card-body">
+              <!-- Filter Questions -->
+              <h4>Filters Questions: </h4>
+              <form method="GET" action="{% url 'yaksh:questions_filter' %}">
+                {{form.as_table}}
+                <br><br>
+                <button class="btn btn-outline-success">
+                  <i class="fa fa-filter"></i>&nbsp;Filter
+                </button>
+              </form>
+              <!-- End Filter Questions -->
+              <hr>
+              <h4>OR</h4>
+              <!-- Search by Tags -->
+              <h4>Search using Tags: </h4>
+              <select class="form-control" id="sel1" onchange="append_tag(this);">
+                {% if all_tags %}
+                 <option value="" disabled selected>Available Tags</option>
+                {% for tag in all_tags %}
+                <option>
+                    {{tag}}
+                </option>
+                {% endfor %}
+                {% else %}
+                 <option value="" disabled selected>No Available Tags</option>
+                {% endif %}
+              </select>
+              <br>
+              <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
+                <div class="input-group">
+                  <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
+                  <span class="input-group-append">
+                    <button class="btn btn-outline-success" type="submit">
+                      <i class="fa fa-search"></i>
                     </button>
-                  </div>
-              </div>
-            </form>
-            <!-- End Filter Questions -->
-            <hr>
-            <!-- Search by Tags -->
-            <h4 >Search using Tags: </h4>
-            <div class="row">
-              <div class="col">
-                <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
-                  <div class="input-group">
-                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
-                    <span class="input-group-append">
-                      <button class="btn btn-outline-success" type="submit">
-                        <i class="fa fa-search"></i>&nbsp;Search
-                      </button>
-                    </span>
-                  </div>
-                </form>
-              </div>
-              <div class="col">
-                <select class="form-control" id="sel1" onchange="append_tag(this);">
-                  {% if all_tags %}
-                   <option value="" disabled selected>Available Tags</option>
-                  {% for tag in all_tags %}
-                  <option>
-                      {{tag}}
-                  </option>
-                  {% endfor %}
-                  {% else %}
-                   <option value="" disabled selected>No Available Tags</option>
-                  {% endif %}
-                </select>
-              </div>
+                  </span>
+                </div>
+              </form>
+              <br>
+              <!-- End Search by Tags -->
+              <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
+                <i class="fa fa-times"></i>&nbsp;Clear
+              </a>
             </div>
-            <br>
-            <!-- End Search by Tags -->
-            <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
-              <i class="fa fa-times"></i>&nbsp;Clear
-            </a>
+            <!-- End Card body -->
           </div>
-          <!-- End Card body -->
         </div>
+        <div id="question-list">
         <!-- End card filters and search -->
         <form name=frm action="{% url 'yaksh:show_questions' %}" method="post">
           {% csrf_token %}
           <div id="filtered-questions">
             <br>
-            <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
-              <i class="fa fa-plus-circle"></i>&nbsp;Add Question</a>
             {% if objects %}
-              <div>
-                <br>
+              <div class="row">
+                <div class="col">
                 {% include "yaksh/paginator.html" %}
-                <br>
-                <h5><input id="checkall" type="checkbox"> Select All </h5>
-                 <div class="table-wrapper-2">
-                    <table id="questions-table" class="tablesorter table  table-striped table-responsive-sm">
-                      <thead>
-                        <tr>
-                          <th> Select </th>
-                          <th> Sr No. </th>
-                          <th> Summary&nbsp;<i class="fa fa-sort"></i> </th>
-                          <th> Language&nbsp;<i class="fa fa-sort"></i> </th>
-                          <th> Type&nbsp;<i class="fa fa-sort"></i> </th>
-                          <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
-                          <th>Test</th>
-                          <th>Download</th>
-                          <th>Delete</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {% for question in objects %}
-                        <tr>
-                          <td>
-                           <input type="checkbox" name="question" value="{{ question.id }}">
-                          </td>
-                          <td>{{forloop.counter}}</td>
-                          <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
-                          <td>{{question.language|capfirst}}</td>
-                          <td>{{question.type|capfirst}}</td>
-                          <td>{{question.points}}</td>
-                          <td>
-                            <a href="{% url 'yaksh:test_question' question.id %}" class="btn btn-info">
-                              Test
-                            </a>
-                          </td>
-                          <td><a href="{% url 'yaksh:download_question' question.id %}" class="btn btn-primary">
-                            <i class="fa fa-download"></i>&nbsp;Download</a></td>
-                          <td><a href="{% url 'yaksh:delete_question' question.id %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{question.summary|capfirst}}?')">
-                          <i class="fa fa-trash"></i>&nbsp;Delete</a></td>
-                        </tr>
-                        {% endfor %}
-                      </tbody>
-                    </table>
-                  </div>
+                </div>
+                <div class="col">
+                  <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
+                    <i class="fa fa-plus-circle"></i>&nbsp;Add Question
+                  </a>
+                </div>
               </div>
-            {% include "yaksh/paginator.html" %}
+              <br>
+              <h5><input id="checkall" type="checkbox"> Select All </h5>
+                <div class="card">
+                  {% if requested_users|length > 10 %}
+                  <div class="table-responsive" style="height: 700px">
+                  {% else %}
+                  <div class="table-responsive">
+                  {% endif %}
+                  <table id="questions-table" class="table table-dark table-responsive-sm">
+                    <thead class="thead-dark">
+                      <tr>
+                        <th> Select </th>
+                        <th> Sr No.</th>
+                        <th> Summary&nbsp;<i class="fa fa-sort"></i> </th>
+                        <th> Language&nbsp;<i class="fa fa-sort"></i> </th>
+                        <th> Type&nbsp;<i class="fa fa-sort"></i> </th>
+                        <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
+                        <th>Test</th>
+                        <th>Download</th>
+                        <th>Delete</th>
+                      </tr>
+                    </thead>
+                    <tbody class="list">
+                      {% for question in objects %}
+                      <tr>
+                        <td>
+                         <input type="checkbox" name="question" value="{{ question.id }}">
+                        </td>
+                        <td>
+                          {{forloop.counter}}
+                        </td>
+                        <td>
+                          <a href="{% url 'yaksh:add_question' question.id %}" class="text-white">
+                            {{question.summary|capfirst}}
+                          </a>
+                        </td>
+                        <td>{{question.language|capfirst}}</td>
+                        <td>{{question.type|capfirst}}</td>
+                        <td>{{question.points}}</td>
+                        <td>
+                          <a href="{% url 'yaksh:test_question' question.id %}" class="btn btn-info">
+                            Test
+                          </a>
+                        </td>
+                        <td><a href="{% url 'yaksh:download_question' question.id %}" class="btn btn-primary">
+                          <i class="fa fa-download"></i></a></td>
+                        <td><a href="{% url 'yaksh:delete_question' question.id %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{question.summary|capfirst}}?')">
+                        <i class="fa fa-trash"></i></a></td>
+                      </tr>
+                      {% endfor %}
+                    </tbody>
+                  </table>
+                  </div>
+                </div>
+              {% include "yaksh/paginator.html" %}
             {% else %}
               <br><br>
               <div class="alert alert-info">
@@ -217,6 +217,8 @@
             {% endif %}
           </center>
         </form>
+        </div>
+      </div>
       </div>
     </div>
   </div>
diff --git a/yaksh/templates/yaksh/sidebar.html b/yaksh/templates/yaksh/sidebar.html
index 7d0ac74..f6edc7f 100644
--- a/yaksh/templates/yaksh/sidebar.html
+++ b/yaksh/templates/yaksh/sidebar.html
@@ -1,8 +1,16 @@
 <!-- Sidebar -->
-<div class="bg-light border-right" id="sidebar-wrapper">
-  <div class="list-group list-group-flush">
-    <a href="{% url 'yaksh:course_forum' course.id %}" class="list-group-item list-group-item-action {% if '/course_forum/' in request.path %}active{% endif %}">Course Forum</a>
-    <a href="{% url 'yaksh:lessons_forum' course.id %}" class="list-group-item list-group-item-action {% if '/lessons_forum/' in request.path %}active{% endif %}">Lessons Forum</a>
-  </div>
+<div>
+  <ul class="nav nav-pills">
+    <li class="nav-item">
+        <a href="{% url 'yaksh:course_forum' course.id %}" class="nav-link {% if '/course_forum/' in request.path %}active{% endif %}">
+            Course Forum
+        </a>
+    </li>
+    <li class="nav-item">
+        <a href="{% url 'yaksh:lessons_forum' course.id %}" class="nav-link {% if '/lessons_forum/' in request.path %}active{% endif %}">
+            Lessons Forum
+        </a>
+    </li>
+  </ul>
 </div>
 <!-- /#sidebar-wrapper -->
diff --git a/yaksh/templates/yaksh/statistics_question.html b/yaksh/templates/yaksh/statistics_question.html
index 52c29d3..588e131 100644
--- a/yaksh/templates/yaksh/statistics_question.html
+++ b/yaksh/templates/yaksh/statistics_question.html
@@ -1,4 +1,5 @@
 {% extends "manage.html" %}
+{% load custom_filters %}
 
 {% block title %} Question Statistics {% endblock %}
 {% block pagetitle %} Statistics for {{ quiz.description }}{% endblock pagetitle %}
@@ -17,16 +18,34 @@
             </ul>
         </div>
         <div class="col-md-9">
+            {% if messages %}
+                {% for message in messages %}
+                <div class="alert alert-dismissible alert-{{ message.tags }}">
+                    <button type="button" class="close" data-dismiss="alert">
+                        <i class="fa fa-close"></i>
+                    </button>
+                    <strong>{{ message }}</strong>
+                </div>
+                {% endfor %}
+            {% endif %}
             {% if question_stats %}
                 <p><b>Total number of participants: {{ total }}</b></p>
                 <table class="table table-responsive-sm">
-                    <tr class="bg-light yakshred"><th>Question</th><th></th><th>Type</th><th>Total</th><th>Answered Correctly</th></tr>
-                    {% for question, value in question_stats.items  %}
+                    <tr class="bg-light">
+                        <th>Question</th>
+                        <th>Type</th>
+                        <th>Total attempts</th>
+                        <th>Answered Correctly</th>
+                    </tr>
+                    {% for question, data in question_stats.items  %}
                     <tr>
-                        <td width="45%">{{ question.summary }}
+                        <td style="width: 45%">
+                            <a href="#collapse_question_{{question.id}}" data-toggle="collapse">
+                            <i class="fa fa-plus"></i>&nbsp;{{ question.summary }}</a>
                             <div class="collapse" id="collapse_question_{{question.id}}">
                                 <br>
-                                <div class="card card-body">
+                                <div class="card">
+                                    <div class="card-body">
                                     <strong>
                                         Summary:
                                     </strong>
@@ -36,7 +55,7 @@
                                     <strong>
                                         Description:
                                     </strong>
-                                    <p>
+                                    <p width="100%">
                                         {{ question.description|safe }}
                                     </p>
                                     <strong>
@@ -51,89 +70,49 @@
                                     <p>
                                         {{ question.get_type_display }}
                                     </p>
-                                    {% if question.type in 'mcq mcc' %}
-                                    <strong>
-                                        Test Cases:
-                                    </strong>
-                                    <p>
-                                        <ol>
-                                        {% for tc in question.testcase_set.all %}
-                                                <li>              
-                                                    {{ tc.mcqtestcase.options }}
-                                                    {% if tc.mcqtestcase.correct %}
-                                                        <span class="badge badge-primary">Correct</span>
-                                                    {% endif %}
-                                                </li>
+                                    {% if question.type in "mcq mcc" %}
+                                        {% for tc in question.get_test_cases %}
+                                            {% if tc.correct %}
+                                            <span class="badge badge-pill badge-success">
+                                                {{forloop.counter}}.
+                                            </span>
+                                            {% else %}
+                                            <span class="badge badge-pill badge-dark">
+                                                {{ forloop.counter }}.
+                                            </span>
+                                            {% endif %}
+                                            {{tc.options}}
+                                                {% get_percent_value data.3 tc.id total as percent %}
+                                                <div class="progress-wrapper col-md-4">
+                                                    <div class="progress-info">
+                                                        <div class="progress-percentage">
+                                                          <span>
+                                                            {% if percent %} {{percent|floatformat}} {% else %} 0 {% endif %}%
+                                                          </span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="progress">
+                                                        {% if percent %}
+                                                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                                              aria-valuemin="0" aria-valuemax="100" style="width:{{percent|floatformat}}%">
+                                                            </div>
+                                                        {% endif %}
+                                                    </div>
+                                                </div>
+                                            <br>
                                         {% endfor %}
-                                        </ol>
-                                    </p>
                                     {% endif %}
+                                    </div>
                                 </div>
                             </div>
                         </td>
-                        <td>
-                            <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#collapse_question_{{question.id}}" aria-expanded="false" aria-controls="collapseExample">
-                            <i class="fa fa-angle-down"></i>&nbsp;More
-                            </button>
-                        </td>
-                        <td>{{ question.type }}</td>
-                        <td>{{value.1}}</td><td>{{ value.0 }} ({% widthratio value.0 value.1 100 %}%)</td>
-
-
+                        <td>{{ question.get_type_display }}</td>
+                        <td>{{data.0}} out of {{total}}</td>
+                        <td>{{ data.1 }} out of {{data.0}} ({{data.2}}%)</td>
                     </tr>
                     {% endfor %}
                 </table>
             {% endif %}
-
-            <!-- The Modal -->
-            <div class="modal" id="question_detail_modal">
-            <div class="modal-dialog">
-              <div class="modal-content">
-              
-                <!-- Modal Header -->
-                <div class="modal-header">
-                  <h4 class="modal-title">Question Details</h4>
-                  <button type="button" class="close" data-dismiss="modal">&times;</button>
-                </div>
-                
-                <!-- Modal body -->
-                <div class="modal-body">
-                    <table>
-                        <tr>
-                            <td>Summary</td>
-                            <td>{{ question.summary }}</td>
-                        </tr>
-                        <tr>
-                            <td>Description</td>
-                            <td>{{ question.description }}</td>
-                        </tr>                        <tr>
-                            <td>Type</td>
-                            <td>{{ question.type }}</td>
-                        </tr>                        <tr>
-                            <td>Points</td>
-                            <td>{{ question.points }}</td>
-                        </tr>
-                        <tr>
-                            {% for tc in question.testcase_set.all %}
-                                tc
-                            {% endfor %}
-                            <br><br>
-                        </tr>
-                    </table>
-                </div>
-                
-                <!-- Modal footer -->
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
-                </div>
-                
-              </div>
-            </div>
-            </div>
-
-              </div>
-            </div>
-            <!-- end Modal outer -->
         </div>
     </div>
 </div>
diff --git a/yaksh/templates/yaksh/upload_download_course_md.html b/yaksh/templates/yaksh/upload_download_course_md.html
new file mode 100644
index 0000000..072ae4c
--- /dev/null
+++ b/yaksh/templates/yaksh/upload_download_course_md.html
@@ -0,0 +1,13 @@
+<div>
+    <a href="{% url 'upload:download_course_md' course.id %}">
+        <i class="fa fa-download"></i>&nbsp;Download
+    </a>
+    <br><br>
+    <form action="" method="POST" enctype="multipart/form-data">
+        {% csrf_token %}
+        <input type="file" name="course_upload_md" required="">
+        <button class="btn btn-outline-success" id="course_upload_md_btn" name="course_upload_md_btn">
+            <i class="fa fa-upload"></i>&nbsp;Upload
+        </button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/user_data.html b/yaksh/templates/yaksh/user_data.html
index a79071d..8d4a727 100644
--- a/yaksh/templates/yaksh/user_data.html
+++ b/yaksh/templates/yaksh/user_data.html
@@ -65,28 +65,25 @@
             Submission Details
           </div>
           <div class="card-body">
-            <table class="tablesorter table table-striped table-bordered table-responsive-sm" id='marks_table'>
-              <thead>
+            <table class="table table-dark table-responsive-sm" id='marks_table'>
+              <thead class="thead-dark">
                 <tr>
                 <th>Questions</th>
                 <th>Type</th>
                 <th>Marks Obtained</th>
                 </tr>
                 </thead>
-                <tbody>
+                <tbody class="list">
                   {% for question, answers in paper.get_question_answers.items %}
                     <tr>
                       <td>{{question.summary}}</td>
                       <td>{{question.type}}</td>
-                      <td>
-                        {% for answer in answers %}
-                          {{answer.marks}}
-                        {% endfor %}
-                      </td>
+                      <td>{{ answers|last }}</td>
                     </tr>
                   {% endfor %}
                 </tbody>
             </table>
+            <br>
             {% for question, answers in paper.get_question_answers.items %}
               <div class="card" id="question_{{question.id}}">
                 <div class="card-header text-white bg-info">
@@ -181,30 +178,34 @@
                       </center>
                     {% endif %} <!-- End has_user_assignments -->
                   {% else %}
-                  {% for ans in answers %}
+
+                  {% if answers|first is None %}
+                    <p> Did not attempt </p>
+                  {% else %}
+                  {% for ans in answers|slice:":-1" %}
                     <strong>
                       Attempt Number: {{forloop.counter}}
                     </strong>
                     <div id="accordian">
                       <div class="card">
                         {% if ans.answer.correct %}
-                          <div class="card-header">
+                          <div class="card-header bg-success">
                             <span class="badge badge-success">
                               Correct answer:
                             </span>
                             <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                              <span class="pull-right">
+                              <span class="pull-right text-white">
                                 Details&nbsp;<i class="fa fa-toggle-down"></i>
                               </span>
                             </a>
                           </div>
                         {% else %}
-                          <div class="card-header">
+                          <div class="card-header bg-danger">
                             <span class="badge badge-danger">
                               Error:
                             </span>
                             <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                              <span class="pull-right">
+                              <span class="pull-right text-white">
                                 Details&nbsp;<i class="fa fa-toggle-down"></i>
                               </span>
                             </a>
@@ -303,6 +304,7 @@
                     </div>
                     <br>
                   {% endfor %} <!-- End for ans in answers -->
+                  {% endif %}<!-- check if attempted -->
                 </div>
               </div>
               {% endif %}
@@ -310,9 +312,7 @@
               <div class="form-group">
                 <div class="col-md-2">
                   <label class="col-form-label" for="q{{ question.id }}">Marks:</label>
-                  {% with answers|last as answer %}
-                    <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answer.marks }}" readonly=""><br><br>
-                  {% endwith %}
+                    <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answers|last }}" readonly=""><br><br>
                 </div>
               </div>
               <hr/>
diff --git a/yaksh/templates/yaksh/user_status.html b/yaksh/templates/yaksh/user_status.html
index 5f006c9..b5fe74e 100644
--- a/yaksh/templates/yaksh/user_status.html
+++ b/yaksh/templates/yaksh/user_status.html
@@ -1,19 +1,26 @@
 {% if status %}
     <strong>Student Name: {{student.get_full_name|title}}</strong>
     <br>
-    <strong>Overall Course Progress:</strong>
-    <div class="progress">
-        {% if course_percentage <= 50 %}
-            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% elif course_percentage <= 75 %}
-            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% else %}
-            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% endif %}
-        <b style="color: black;">{{course_percentage}}% Completed</b>
+    <div class="progress-wrapper">
+        <div class="progress-info">
+            <div class="progress-label">
+              <span>Course completed</span>
+            </div>
+            <div class="progress-percentage">
+              <span>
+                {% if course_percentage %} {{course_percentage}} {% else %} 0 {% endif %}%
+              </span>
+            </div>
+        </div>
+        <div class="progress">
+            <div
+                class="progress-bar progress-bar-primary"
+                role="progressbar"
+                aria-valuenow="{{course_percentage}}"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style="width:{{course_percentage}}%">
+            </div>
         </div>
     </div>
     <br>
@@ -22,17 +29,25 @@
     <table class="table">
         {% for module, percent in modules %}
             <tr>
-                <td width="30%">{{ module.name }}</td>
+                <td>{{ module.name }}</td>
                 <td>
-                    <div class="progress">
-                        {% if percent <= 50 %}
-                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                        {% elif percent <= 75 %}
-                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                        {% else %}
-                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
-                        {% endif %}
-                        <b style="color: black;">{{percent}}% Completed</b>
+                    <div class="progress-wrapper">
+                        <div class="progress-info">
+                            <div class="progress-percentage">
+                              <span>
+                                {% if percent %} {{percent}} {% else %} 0 {% endif %}%
+                              </span>
+                            </div>
+                        </div>
+                        <div class="progress">
+                            <div
+                                class="progress-bar progress-bar-primary"
+                                role="progressbar"
+                                aria-valuenow="{{percent}}"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                                style="width:{{percent}}%">
+                            </div>
                         </div>
                     </div>
                 </td>
diff --git a/yaksh/templates/yaksh/view_answerpaper.html b/yaksh/templates/yaksh/view_answerpaper.html
index 905a111..43fb97a 100644
--- a/yaksh/templates/yaksh/view_answerpaper.html
+++ b/yaksh/templates/yaksh/view_answerpaper.html
@@ -70,17 +70,16 @@
             Submission Details
           </div>
           <div class="card-body">
-            <table class="tablesorter table table-striped table-bordered table-responsive-sm" id='marks_table'>
-              <thead>
+            <table class="table table-dark table-responsive-sm" id='marks_table'>
+              <thead class="thead-dark">
                 <tr>
                 <th>Questions</th>
                 <th>Type</th>
                 <th>Marks Obtained</th>
                 </tr>
                 </thead>
-                <tbody>
+                <tbody class="list">
                 {% for question, answers in paper.get_question_answers.items %}
-                  {% with answers|last as answer %}
                       <tr>
                       <td>
                         <a href="#question_{{question.id}}">
@@ -88,12 +87,12 @@
                         </a>
                       </td>
                       <td>{{ question.type }}</td>
-                      <td>{{ answer.answer.marks }}</td>
+                      <td>{{ answers|last  }}{{ answer.answer.marks }}</td>
                       </tr>
-                  {% endwith %}
                 {% endfor %}
                 </tbody>
             </table>
+            <br>
             {% for question, answers in paper.get_question_answers.items %}
               <div class="card" id="question_{{question.id}}">
                 <div class="card-header text-white bg-info">
@@ -200,30 +199,33 @@
                       </center>
                     {% endif %} <!-- End has_user_assignments -->
                   {% else %}
-                  {% for ans in answers %}
+                  {% if answers|first is None %}
+                    <p> Did not attempt </p>
+                  {% else %}
+                  {% for ans in answers|slice:":-1" %}
                     <strong>
                       Attempt Number: {{forloop.counter}}
                     </strong>
                     <div id="accordian">
                       <div class="card">
                         {% if ans.answer.correct %}
-                          <div class="card-header">
+                          <div class="card-header bg-success">
                             <span class="badge badge-success">
                               Correct answer:
                             </span>
                             <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                              <span class="pull-right">
+                              <span class="pull-right text-white">
                                 Details&nbsp;<i class="fa fa-toggle-down"></i>
                               </span>
                             </a>
                           </div>
                         {% else %}
-                          <div class="card-header">
+                          <div class="card-header bg-danger">
                             <span class="badge badge-danger">
                               Error:
                             </span>
                             <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
-                              <span class="pull-right">
+                              <span class="pull-right text-white">
                                 Details&nbsp;<i class="fa fa-toggle-down"></i>
                               </span>
                             </a>
@@ -324,6 +326,7 @@
                     </div>
                     <br>
                   {% endfor %} <!-- End for ans in answers -->
+                  {% endif %}<!-- check if attempted -->
                 </div>
               </div>
               {% endif %}
@@ -331,9 +334,7 @@
               <div class="form-group">
                 <div class="col-md-2">
                   <label class="col-form-label" for="q{{ question.id }}">Marks:</label>
-                  {% with answers|last as answer %}
-                  <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answer.answer.marks }}" readonly=""><br><br>
-                  {% endwith %}
+                  <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answers|last }}" readonly=""><br><br>
                 </div>
               </div>
               <hr/>
diff --git a/yaksh/templates/yaksh/view_notifications.html b/yaksh/templates/yaksh/view_notifications.html
index 48193ed..72a8fd2 100644
--- a/yaksh/templates/yaksh/view_notifications.html
+++ b/yaksh/templates/yaksh/view_notifications.html
@@ -38,7 +38,7 @@
                               <span class="fa fa-check" aria-hidden="true" title="Mark as read"></span>
                             </a>
                         </div>
-                        <div class="toast-body">
+                        <div class="toast-body bg-white">
                             {% if user.id != message.creator.id %}
                                 <p><b>From: </b>{{message.creator.get_full_name}}</p>
                             {% endif %}