From 3e217025d6130fbbed8fe239b045519a3a7d0f4b Mon Sep 17 00:00:00 2001
From: adityacp
Date: Tue, 15 Dec 2020 20:18:31 +0530
Subject: Add new UI over bootstrap

---
 yaksh/templates/base.html                        |  12 +-
 yaksh/templates/manage.html                      |   8 -
 yaksh/templates/user.html                        |  18 +-
 yaksh/templates/yaksh/add_course.html            |   2 +-
 yaksh/templates/yaksh/add_lesson.html            |   2 +-
 yaksh/templates/yaksh/add_question.html          |  18 +-
 yaksh/templates/yaksh/add_quiz.html              |   2 -
 yaksh/templates/yaksh/addteacher.html            |  47 ++--
 yaksh/templates/yaksh/complete.html              |  31 ++-
 yaksh/templates/yaksh/course_added_modules.html  |   6 +
 yaksh/templates/yaksh/course_detail.html         | 123 +++++-----
 yaksh/templates/yaksh/course_detail_options.html |  29 ++-
 yaksh/templates/yaksh/course_forum.html          |  16 +-
 yaksh/templates/yaksh/course_modules.html        | 278 ++++++++++++-----------
 yaksh/templates/yaksh/course_progress.html       |  14 +-
 yaksh/templates/yaksh/course_send_mail.html      |  24 +-
 yaksh/templates/yaksh/course_students.html       |  84 ++++---
 yaksh/templates/yaksh/course_teachers.html       |  16 +-
 yaksh/templates/yaksh/design_course_session.html |   4 +-
 yaksh/templates/yaksh/grade_user.html            |  19 +-
 yaksh/templates/yaksh/lessons_forum.html         |  70 +++---
 yaksh/templates/yaksh/login.html                 | 137 ++++++-----
 yaksh/templates/yaksh/moderator_dashboard.html   |   4 +-
 yaksh/templates/yaksh/monitor.html               | 140 ++++++------
 yaksh/templates/yaksh/quit.html                  |  44 ++--
 yaksh/templates/yaksh/quizzes_user.html          |  48 ++--
 yaksh/templates/yaksh/show_video.html            |   4 +-
 yaksh/templates/yaksh/showquestions.html         | 109 +++++----
 yaksh/templates/yaksh/sidebar.html               |   2 +-
 yaksh/templates/yaksh/user_data.html             |  15 +-
 yaksh/templates/yaksh/user_status.html           |  80 ++-----
 yaksh/templates/yaksh/view_answerpaper.html      |  15 +-
 yaksh/templates/yaksh/view_notifications.html    |   2 +-
 33 files changed, 756 insertions(+), 667 deletions(-)

(limited to 'yaksh/templates')

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index a946c12..fd9cde3 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,6 +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>
 
@@ -110,7 +118,7 @@
      </div>
      
 
-  {% block footer %}
+<!--   {% block footer %}
     <footer class="footer">
           <div class="container">
               <div class="row">
@@ -123,7 +131,7 @@
               </div>
            </div>
     </footer>
-  {% endblock %}
+  {% endblock %} -->
 
 </body>
 </html>
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 07ac81b..b264c5e 100644
--- a/yaksh/templates/yaksh/add_course.html
+++ b/yaksh/templates/yaksh/add_course.html
@@ -40,7 +40,7 @@
     <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/>
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 385ebe0..dc6b501 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -75,7 +75,7 @@
                                 <h3>Description Preview</h3>
                             </center>
                         </div>
-                        <div class="card-body" id="description_body" style="max-height: 400px; overflow-y: auto;">
+                        <div id="description_body" style="max-height: 400px; overflow-y: auto;">
                         </div>
                     </div>
                     <br>
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 7918858..1609639 100644
--- a/yaksh/templates/yaksh/add_quiz.html
+++ b/yaksh/templates/yaksh/add_quiz.html
@@ -88,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>
@@ -96,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 b0662dd..9119180 100644
--- a/yaksh/templates/yaksh/course_added_modules.html
+++ b/yaksh/templates/yaksh/course_added_modules.html
@@ -46,6 +46,11 @@
                     <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 %}
@@ -136,6 +141,7 @@
                                     </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..9f75a68 100644
--- a/yaksh/templates/yaksh/course_detail.html
+++ b/yaksh/templates/yaksh/course_detail.html
@@ -24,69 +24,68 @@
     <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" %}
+        {% 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..84f78ce 100644
--- a/yaksh/templates/yaksh/course_detail_options.html
+++ b/yaksh/templates/yaksh/course_detail_options.html
@@ -1,46 +1,45 @@
-<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>
diff --git a/yaksh/templates/yaksh/course_forum.html b/yaksh/templates/yaksh/course_forum.html
index b352654..86195dd 100644
--- a/yaksh/templates/yaksh/course_forum.html
+++ b/yaksh/templates/yaksh/course_forum.html
@@ -94,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>
@@ -104,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>
@@ -138,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 2ac1962..75b6046 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -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 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>
 {% 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/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 64b9cb5..86b7c47 100644
--- a/yaksh/templates/yaksh/grade_user.html
+++ b/yaksh/templates/yaksh/grade_user.html
@@ -308,16 +308,17 @@ 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 %}
                           <tr>
                           <td>
@@ -336,6 +337,8 @@ function searchNames() {
                     {% 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">
@@ -445,23 +448,23 @@ function searchNames() {
                           <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>
diff --git a/yaksh/templates/yaksh/lessons_forum.html b/yaksh/templates/yaksh/lessons_forum.html
index 26825b9..070738f 100644
--- a/yaksh/templates/yaksh/lessons_forum.html
+++ b/yaksh/templates/yaksh/lessons_forum.html
@@ -41,8 +41,14 @@
             {% include "yaksh/sidebar.html" %}
             <br>
             {% if posts %}
-                <table class="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 class="table table-responsive-sm">
+                    <thead class="thread-inverse thead-light">
                         <tr>
                             <th width="700">Posts</th>
                             <th>Created by</th>
@@ -51,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}}
+                                            None
                                         {% 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>
-                                        {% 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..6c4062a 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-light"><small>Forgot password?</small></a>
+        </div>
+        <div class="col-6 text-right">
+          <a href="{% url 'yaksh:register' %}" class="text-light"><small>Create new account</small>
+          </a>
         </div>
+      </div>
     </div>
-</div>     
+   </div>
+</div>
 {% endblock content %}
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..fccf201 100644
--- a/yaksh/templates/yaksh/monitor.html
+++ b/yaksh/templates/yaksh/monitor.html
@@ -38,40 +38,40 @@ $(document).ready(function()
 {% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
   {% if quiz %}
     {% if papers %}
       <div class="card">
-          <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>
-          </div>
+        <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>
+        </div>
       </div>
       <br>
           <br>
@@ -105,7 +105,7 @@ $(document).ready(function()
       </div>
       <hr>
       <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-4">
         <p>
         <b>
         - Download the CSV file from the button above<br />
@@ -116,38 +116,34 @@ $(document).ready(function()
         <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 class="input-group">
+            <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>
+      <div class="card">
+        {% if latest_attempts|length > 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> 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>
@@ -156,39 +152,42 @@ $(document).ready(function()
             <th> Special Attempt&nbsp;<i class="fa fa-sort"></i> </th>
           </tr>
           </thead>
-          <tbody>
+          <tbody class="list">
           {% 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>
+                        <span class="badge badge-warning"> Inprogress </span>
                     {% else %}
-                        <span class="badge badge-secondary"> Completed </span>
+                        <span class="badge badge-success"> 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 width="15%">
+                <form method="post" action="{% url 'yaksh:extend_time' paper.id %}">
+                  {% csrf_token %}
+                    <div class="input-group mb-3">
+                    <input type="number" step="any" class="form-control" id="extra_time" name="extra_time" required>
+                    <div class="input-group-append">
+                      <button class="btn btn-outline-secondary" type="submit" width="10">
+                        <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>
+        </table>
+        </div>
+      </div>
       <!-- CSV Modal -->
       <div class="modal fade" id="csvModal" role="dialog">
           <div class="modal-dialog">
@@ -252,5 +251,4 @@ $(document).ready(function()
   {% else %}
     <h4>No Quiz Found</h4>
   {% endif %}
-</div>
 {% endblock %}
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..b1c5e3c 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,7 +61,7 @@
                         <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>
@@ -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_video.html b/yaksh/templates/yaksh/show_video.html
index b4f5628..dde178b 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -21,8 +21,8 @@
 <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>
diff --git a/yaksh/templates/yaksh/showquestions.html b/yaksh/templates/yaksh/showquestions.html
index daeaea7..81bf01a 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>
@@ -153,53 +144,57 @@
             <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>
-                {% 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>
+              <br><br>
+              {% 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 %}">{{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>
-            {% include "yaksh/paginator.html" %}
+                </div>
+              {% include "yaksh/paginator.html" %}
             {% else %}
               <br><br>
               <div class="alert alert-info">
diff --git a/yaksh/templates/yaksh/sidebar.html b/yaksh/templates/yaksh/sidebar.html
index 5808608..f6edc7f 100644
--- a/yaksh/templates/yaksh/sidebar.html
+++ b/yaksh/templates/yaksh/sidebar.html
@@ -1,5 +1,5 @@
 <!-- Sidebar -->
-<div class="bg-light">
+<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 %}">
diff --git a/yaksh/templates/yaksh/user_data.html b/yaksh/templates/yaksh/user_data.html
index 0506df0..8d4a727 100644
--- a/yaksh/templates/yaksh/user_data.html
+++ b/yaksh/templates/yaksh/user_data.html
@@ -65,15 +65,15 @@
             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>
@@ -83,6 +83,7 @@
                   {% 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">
@@ -188,23 +189,23 @@
                     <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>
diff --git a/yaksh/templates/yaksh/user_status.html b/yaksh/templates/yaksh/user_status.html
index 5a7cb3d..b5fe74e 100644
--- a/yaksh/templates/yaksh/user_status.html
+++ b/yaksh/templates/yaksh/user_status.html
@@ -1,41 +1,27 @@
 {% if status %}
     <strong>Student Name: {{student.get_full_name|title}}</strong>
     <br>
-    <strong>Overall Course Progress:</strong>
-    <div class="progress">
-        {% if course_percentage == 0  %}
-            <b style="color: black;">{{course_percentage}}% Completed</b>
-        {% elif 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}}%">
-                    <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>
-        {% 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}}%">
-                    <b style="color: black;">{{course_percentage}}% Completed</b>
+            <div class="progress-percentage">
+              <span>
+                {% if course_percentage %} {{course_percentage}} {% else %} 0 {% endif %}%
+              </span>
             </div>
-        {% else %}
+        </div>
+        <div class="progress">
             <div
-                class="progress-bar progress-bar-success"
+                class="progress-bar progress-bar-primary"
                 role="progressbar"
-                aria-valuenow="40"
+                aria-valuenow="{{course_percentage}}"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 style="width:{{course_percentage}}%">
-                    <b style="color: black;">{{course_percentage}}% Completed</b>
             </div>
-        {% endif %}
+        </div>
     </div>
     <br>
     <strong>Per Module Progress:</strong>
@@ -43,42 +29,26 @@
     <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 == 0  %}
-                            <b style="color: black;">{{percent}}% Completed</b>
-                        {% elif percent <= 50 %}
-                            <div
-                                class="progress-bar progress-bar-danger"
-                                role="progressbar"
-                                aria-valuenow="40"
-                                aria-valuemin="0"
-                                aria-valuemax="100"
-                                style="width:{{percent}}%">
-                                    <b style="color: black;">{{percent}}% Completed</b>
-                            </div>
-                        {% elif percent <= 75 %}
-                            <div
-                                class="progress-bar progress-bar-warning"
-                                role="progressbar"
-                                aria-valuenow="40"
-                                aria-valuemin="0"
-                                aria-valuemax="100"
-                                style="width:{{percent}}%">
-                                    <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>
-                        {% else %}
+                        </div>
+                        <div class="progress">
                             <div
-                                class="progress-bar progress-bar-success"
+                                class="progress-bar progress-bar-primary"
                                 role="progressbar"
-                                aria-valuenow="40"
+                                aria-valuenow="{{percent}}"
                                 aria-valuemin="0"
                                 aria-valuemax="100"
                                 style="width:{{percent}}%">
-                                    <b style="color: black;">{{percent}}% Completed</b>
                             </div>
-                        {% endif %}
+                        </div>
                     </div>
                 </td>
             </tr>
diff --git a/yaksh/templates/yaksh/view_answerpaper.html b/yaksh/templates/yaksh/view_answerpaper.html
index 775525e..43fb97a 100644
--- a/yaksh/templates/yaksh/view_answerpaper.html
+++ b/yaksh/templates/yaksh/view_answerpaper.html
@@ -70,15 +70,15 @@
             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>
@@ -92,6 +92,7 @@
                 {% 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">
@@ -208,23 +209,23 @@
                     <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>
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 %}
-- 
cgit