diff --git a/app/Resources/public/css/themes/rainbow/default.css b/app/Resources/public/css/themes/rainbow/default.css
index d9e65f8248..4ecbcd5e43 100755
--- a/app/Resources/public/css/themes/rainbow/default.css
+++ b/app/Resources/public/css/themes/rainbow/default.css
@@ -555,9 +555,11 @@ footer #footer_right{
 .table.table-striped tr th{
     color: #162A83 !important;
     border-top: 1px solid #84bd00;
+    padding: 8px 0;
 }
 .table.table-striped tr td{
     border-top: 1px solid #84bd00;
+    padding: 8px 0;
 }
 .feedbaak-question{
     margin-top: 10px;
@@ -653,6 +655,57 @@ footer #footer_right{
 .table-ofaj tbody tr td{
     border-top: 1px solid #96bd0d;
 }
+.exercise_description{
+    padding: 0px 0px 10px 0px;
+    border-bottom: 1px solid #84bd00;
+    margin-bottom: 5px;
+}
+.alert.alert-info.hotspot{
+    font-size: 14px;
+    color: #162A83;
+    background-color: #FFF;
+    border-bottom: 1px solid #96bd0d;
+    border-top: 1px solid #96bd0d;
+    border-radius: 0;
+    font-weight: bold;
+}
+.hotspot-image{
+    margin: auto;
+    border: 2px solid #e3e3e3;
+    padding: 10px;
+}
+.sidebar-well .well{
+   border-radius: 0; 
+}
+.btn.btn-info{
+   background-color: #84bd00;
+   border-color: #84bd00;
+   border-radius: 0;
+   font-size: 12px;
+}
+.btn.btn-info:active:hover{
+   background-color: #772583;
+   border-color: #772583;
+   border-radius: 0;
+   font-size: 12px;
+}
+table.matching tr td span.label-danger{
+    background-color: #162a83;
+    color: #FFF !important;
+    border-radius: 0;
+    width: 100%;
+    display: inline-block;
+}
+table.matching tr td span.label-success{
+    background-color: #96BD0D;
+    color: #FFF !important;
+    border-radius: 0;
+    width: 100%;
+    display: inline-block;
+}
+.table-striped>tbody>tr:nth-of-type(odd){
+    background-color: #FFF;
+}
 /* Jquery UI */
 .ui-accordion .ui-accordion-icons{
   padding-left: 0.2em;
@@ -1222,6 +1275,23 @@ svg circle{
 .question_options input[type="text"]{
     padding: 5px;
 }
+.alert.alert-warning{
+   background-color: #FFF;
+   border-left: none;
+   border-right: none;
+   border-top: 1px solid #84bd00;
+   border-bottom: 1px solid #84bd00;
+   border-radius: 0;
+   color: #70A42D;
+   padding: 10px;
+}
+.table.table-striped tr td .alert.alert-warning{
+    border-top: none;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    padding-bottom: 20px;
+}
 /* Large desktop */
 @media (min-width: 1200px) {
 
diff --git a/main/exercise/MatchingDraggable.php b/main/exercise/MatchingDraggable.php
index 1870ecd00c..3f95729256 100644
--- a/main/exercise/MatchingDraggable.php
+++ b/main/exercise/MatchingDraggable.php
@@ -265,7 +265,7 @@ class MatchingDraggable extends Question
     public function return_header($exercise, $counter = null, $score = null)
     {
         $header = parent::return_header($exercise, $counter, $score);
-        $header .= '<table class="'.$this->question_table_class.'">
+        $header .= '<table class="matching '.$this->question_table_class.'">
                 <tr>
                     <th>' . get_lang('ElementList') . '</th>
                     <th>' . get_lang('YourChoice') . '</th>
diff --git a/main/inc/lib/exercise.lib.php b/main/inc/lib/exercise.lib.php
index a1b93d0707..088427a36a 100644
--- a/main/inc/lib/exercise.lib.php
+++ b/main/inc/lib/exercise.lib.php
@@ -1190,6 +1190,7 @@ HTML;
             $hotspotColor = 0;
             if ($answerType != HOT_SPOT_DELINEATION) {
                 $answerList = '
+                    <div class="sidebar-well">
                     <div class="well well-sm">
                         <h5 class="page-header">' . get_lang('HotspotZones').'</h5>
                         <ol>
@@ -1212,6 +1213,7 @@ HTML;
                 $answerList .= '
                         </ul>
                     </div>
+                    </div>
                 ';
 
                 if ($freeze) {
@@ -4108,7 +4110,7 @@ HOTSPOT;
         $ribbon .= '</div>';
 
         if (!empty($countPendingQuestions)) {
-            $ribbon .= '<br />';
+            //$ribbon .= '<br />';
             $ribbon .= Display::return_message(
                 sprintf(
                     get_lang('TempScoreXQuestionsNotCorrectedYet'),
@@ -4117,7 +4119,7 @@ HOTSPOT;
                 'warning'
             );
         }
-
+        
         return $ribbon;
     }
 
diff --git a/main/inc/lib/javascript/hotspot/js/hotspot.js b/main/inc/lib/javascript/hotspot/js/hotspot.js
index 6e74e63e55..ef872cbcc2 100755
--- a/main/inc/lib/javascript/hotspot/js/hotspot.js
+++ b/main/inc/lib/javascript/hotspot/js/hotspot.js
@@ -952,14 +952,14 @@ window.HotspotQuestion = (function () {
                     answersCollection = new AnswersCollection(),
                     hotspotsSVG = new UserHotspotsSVG(hotspotsCollection, answersCollection, this);
 
-                $(config.selector).css('width', this.width).append(hotspotsSVG.render().el);
+                $(config.selector).css('width', this.width + 20).append(hotspotsSVG.render().el);
 
                 $(config.selector).parent().prepend('\n\
-                    <div id="hotspot-messages-' + config.questionId + '" class="alert alert-info">\n\
-                        <h4>\n\
+                    <div id="hotspot-messages-' + config.questionId + '" class="alert alert-info hotspot">\n\
+                        <p>\n\
                             <span class="fa fa-info-circle" aria-hidden="true"></span>\n\
                             <span></span>\n\
-                        </h4>\n\
+                        </p>\n\
                     </div>\n\
                 ');