diff --git a/lms/lms/widgets/NoPreviewModal.html b/lms/lms/widgets/NoPreviewModal.html
index 4dc95b1b..0f2144ad 100644
--- a/lms/lms/widgets/NoPreviewModal.html
+++ b/lms/lms/widgets/NoPreviewModal.html
@@ -1,32 +1,42 @@
-<div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-aria-hidden="true">
+<div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+
             <div class="modal-header">
-                <div class="font-weight-bold">{{ _("Not available for preview") }}</div>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-                </button>
+                <div class="modal-title">{{ _("Not Available for Preview") }}</div>
             </div>
+
             <div class="modal-body">
                 {% if is_user_interested %}
-                    <div class=""> {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} </div>
+                    <div class="">
+                        {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
+                    </div>
                 {% else %}
-                    <div class=""> {{ _("This lesson is not available for preview. Please join the course to access it.") }} </div>
+                    <div class="">
+                        {{ _("This lesson is not available for preview. Please join the course to access it.") }}
+                    </div>
                 {% endif %}
             </div>
+
             {% if not is_user_interested %}
             <div class="modal-footer">
+
+                <button class="btn btn-secondary btn-sm pull-right mr-2" data-dismiss="modal" aria-label="Close">
+                    {{ _("Discard") }}
+                </button>
+
                 {% if course.upcoming %}
-                <div class="button is-primary notify-me" data-course="{{course.name | urlencode}}">
+                <button class="btn btn-primary btn-sm notify-me pull-right" data-course="{{course.name | urlencode}}">
                     {{ _("Notify me when available") }}
-                </div>
+                </button>
                 {% else %}
-                <div class="button is-primary join-batch" data-course="{{ course.name | urlencode}}">
-                {{ _("Start Learning") }}</div>
+                <button class="btn btn-primary btn-sm join-batch pull-right" data-course="{{ course.name | urlencode}}">
+                    {{ _("Start Learning") }}
+                </button>
                 {% endif %}
             </div>
             {% endif %}
+
         </div>
     </div>
 </div>
diff --git a/lms/lms/widgets/Reviews.html b/lms/lms/widgets/Reviews.html
index 89425839..524cc52a 100644
--- a/lms/lms/widgets/Reviews.html
+++ b/lms/lms/widgets/Reviews.html
@@ -120,10 +120,7 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="font-weight-bold">{{ _("Write a review") }}</div>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <div class="modal-title">{{ _("Write a Review") }}</div>
             </div>
 
 
@@ -154,8 +151,7 @@
                         <div class="control-input-wrapper">
                             <div class="control-input">
                                 <textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field"
-                                data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
-                                spellcheck="false"></textarea>
+                                data-fieldtype="Text" data-fieldname="feedback_comments" spellcheck="false"></textarea>
                             </div>
                         </div>
                     </div>
@@ -165,9 +161,13 @@
 
 
             <div class="modal-footer">
-                <div class="button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">
+                <button class="btn btn-secondary btn-sm mr-2" data-dismiss="modal" aria-label="Close">
+                    {{ _("Discard") }}
+                </button>
+
+                <button class="btn btn-primary btn-sm" data-course="{{ course.name | urlencode}}" id="submit-review">
                     {{ _("Submit") }}
-                </div>
+                </button>
             </div>
         </div>
     </div>
diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index b7100774..6a6846a5 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -238,10 +238,6 @@ input[type=checkbox] {
   color: var(--gray-700);
 }
 
-.submit-review {
-  width: 100px;
-}
-
 .custom-checkbox>label>input {
   visibility: hidden;
 }
@@ -1744,3 +1740,37 @@ li {
     border-radius: 0;
     margin-right: 0;
 }
+
+.modal-header {
+    padding: 1.5rem 1.5rem 0 !important;
+}
+
+.modal-body {
+    padding: 0 1.5rem !important;
+}
+
+.modal-footer {
+    padding: 0.75rem 1.5rem !important;
+}
+
+.modal-content {
+    font-size: var(--text-base) !important;
+}
+
+.modal-header, .modal-body {
+    margin-bottom: 1rem !important;
+}
+
+.modal-header {
+    border-bottom: none !important;
+}
+
+.modal-footer {
+    border-top: none !important;
+    background-color: var(--gray-200) !important;
+    justify-content: flex-end !important;
+}
+
+.modal-header .modal-title {
+    color: var(--gray-900);
+}
diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html
index ecb215ff..2ac40742 100644
--- a/lms/www/courses/course.html
+++ b/lms/www/courses/course.html
@@ -381,10 +381,7 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
         <div class="modal-header">
-            <div class="font-weight-bold">{{ _("Pick a Slot") }}</div>
-            <button type="button" class="close close-slot-modal" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-            </button>
+            <div class="modal-title">{{ _("Pick a Slot") }}</div>
         </div>
         <div class="modal-body">
             <form id="slot-form">
@@ -414,8 +411,13 @@
             </form>
         </div>
         <div class="modal-footer">
-            <div class="button is-primary" data-course="{{ course.name | urlencode}}" id="submit-slot">
-            {{ _("Submit") }}</div>
+            <button class="btn btn-secondary btn-sm pull-right mr-2 close-slot-modal" data-dismiss="modal" aria-label="Close">
+                {{ _("Discard") }}
+            </button>
+
+            <button class="btn btn-primary btn-sm pull-right" data-course="{{ course.name | urlencode}}" id="submit-slot">
+                {{ _("Submit") }}
+            </button>
         </div>
         </div>
     </div>
diff --git a/lms/www/jobs/job.html b/lms/www/jobs/job.html
index 8669c9ef..b64a0962 100644
--- a/lms/www/jobs/job.html
+++ b/lms/www/jobs/job.html
@@ -52,39 +52,45 @@
     </div>
 </div>
 
-<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-  aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <div class="font-weight-bold">{{ _("Report this Post") }}</div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form class="review-form" id="review-form">
-          <div class="form-group">
-            <div class="clearfix">
-              <label class="control-label reqd" style="padding-right: 0px;">{{ _("Reason for reporting") }}</label>
+<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <div class="modal-title">{{ _("Report this Post") }}</div>
             </div>
-            <div class="control-input-wrapper">
-              <div class="control-input">
-                <textarea type="text" autocomplete="off" class="input-with-feedback form-control report-field"
-                  data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 200px;"
-                  spellcheck="false"></textarea>
-              </div>
+
+            <div class="modal-body">
+                <form class="review-form" id="review-form">
+                <div class="form-group">
+                    <div class="clearfix">
+                        <label class="control-label reqd" style="padding-right: 0px;">
+                            {{ _("Reason for Reporting") }}
+                        </label>
+                    </div>
+                    <div class="control-input-wrapper">
+                        <div class="control-input">
+                            <textarea type="text" autocomplete="off" class="input-with-feedback form-control report-field"
+                                data-fieldtype="Text" data-fieldname="feedback_comments" spellcheck="false"></textarea>
+                            </textarea>
+                        </div>
+                    </div>
+                </div>
+                <p class="error-field muted-text"></p>
+                </form>
             </div>
-          </div>
-          <p class="error-field muted-text"></p>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <div class="button submit-review is-primary" data-job="{{ job.name }}" id="submit-report">
-          Report</div>
-      </div>
+
+            <div class="modal-footer">
+                <button class="btn btn-secondary btn-sm mr-2 pull-right" data-dismiss="modal" aria-label="Close">
+                    {{ _("Discard") }}
+                </button>
+
+                <div class="btn btn-primary btn-sm pull-right" data-job="{{ job.name }}" id="submit-report">
+                    {{ _("Report") }}
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 {% endblock %}