diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index 5f2b52a4f0..42494e37ab 100644
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -424,6 +424,47 @@ footer {
   border-radius: 2px;
   .card-body{
     padding: 1.88rem 1.81rem;
+    .tools{
+      width: 160px;
+      height: 160px;
+      display: block;
+      float: left;
+      text-align: center;
+      cursor: pointer;
+      position: relative;
+      background-color: transparent;
+      .big_icon{
+        position: absolute;
+        width: 84px;
+        height: 84px;
+        top: 40%;
+        margin-top: -50px;
+        left: 44%;
+        margin-left: -32px;
+        text-align: center;
+        border: 1px solid rgba(0, 0, 0, 0.125) ;
+        border-radius: 50%;
+        background-color: #def5ff;
+        img{
+          transition: transform .2s ease-in;
+          &:hover{
+            transform: scale(1.15);
+          }
+        }
+        a{
+          display: block;
+          padding-top: 10px;
+          overflow: hidden;
+        }
+      }
+      .content{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 999;
+      }
+    }
     @include landscape($breakpoint-sm) {
       padding: 0;
     }
@@ -632,19 +673,18 @@ footer {
   .card-title a {
     display: block;
     position: relative;
-    background: transparent;
+    background: $breadcrumb-color;
     color: $menu-background;
     font-size: 16px;
     font-weight: normal;
     margin-bottom: 15px;
     padding: 10px 20px;
-    border-bottom: 1px solid $menu-background;
-    border-radius: 0 15px 0 15px;
+    border: none;
+    border-radius: 50px;
     transition: all 0.10s linear 0s;
     cursor: pointer;
     &.collapsed {
       color: #808080;
-      border-bottom: 1px solid #d3d3d3;
       margin: 0;
     }
     i {
@@ -700,47 +740,6 @@ footer {
   .card-body {
     border-top: 0 none;
     color: #808080;
-    .tools{
-      width: 160px;
-      height: 160px;
-      display: block;
-      float: left;
-      text-align: center;
-      cursor: pointer;
-      position: relative;
-      background-color: transparent;
-      .big_icon{
-        position: absolute;
-        width: 84px;
-        height: 84px;
-        top: 40%;
-        margin-top: -50px;
-        left: 44%;
-        margin-left: -32px;
-        text-align: center;
-        border: 1px solid rgba(0, 0, 0, 0.125) ;
-        border-radius: 50%;
-        background-color: #def5ff;
-        img{
-          transition: transform .2s ease-in;
-          &:hover{
-            transform: scale(1.15);
-          }
-        }
-        a{
-          display: block;
-          padding-top: 10px;
-          overflow: hidden;
-        }
-      }
-      .content{
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: 999;
-      }
-    }
   }
 }
 
diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss
index 738809c03b..860dc8c963 100644
--- a/assets/css/scss/_variables.scss
+++ b/assets/css/scss/_variables.scss
@@ -45,7 +45,7 @@ $default-link         : rgb(0, 153, 255);
 // ---------------------------------------------------------
 // linear-gradient(120deg, #00a5e4, #4a71d0);
 
-$page-background      : #ffffff;
+$page-background      : #f2f8f9;
 $menu-background      : #4a71d0;
 $menu-secondary       : #ff3c7e;
 $sidebar-link         : #54667A;
diff --git a/main/template/default/auth/introduction_section.html.twig b/main/template/default/auth/introduction_section.html.twig
index 8ac84b392a..1ab8417513 100644
--- a/main/template/default/auth/introduction_section.html.twig
+++ b/main/template/default/auth/introduction_section.html.twig
@@ -1,6 +1,6 @@
 {% autoescape false %}
     <div class="card">
-        <div class="card-body p-3">
+        <div class="card-body">
             <section id="section-intro">
                 <div id="{{ intro.name }}" class="section-intro-content">
                     {% if intro.text !='' %}
diff --git a/main/template/default/course_home/activity.html.twig b/main/template/default/course_home/activity.html.twig
index 92fdeb1f17..49e2024a0b 100644
--- a/main/template/default/course_home/activity.html.twig
+++ b/main/template/default/course_home/activity.html.twig
@@ -1,56 +1,58 @@
-{% if app.user.status != 5 %} <!-- main/template/default/course_home/activity.html.twig -->
-<div class="accordion accordion-b4" id="course-tools">
-    {% for block in blocks %}
-       <div class="card">
-        <div class="card-header" id="heading-{{ block.class }}">
-            {% if block.title %}
-            <h5 class="card-title">
-                <a class="{{ ( block.title == 'Authoring') ? ' ' : 'collapse' }}" role="button" data-toggle="collapse" data-target="#collapse-{{ block.class }}" aria-expanded="{{ ( block.title == 'Authoring') ? 'true' : 'false' }}" aria-controls="collapse-{{ block.class }}">
-                    {{ block.title }}
-                </a>
-            </h5>
-            {% endif %}
-        </div>
-
-        <div id="collapse-{{ block.class }}" class="collapse {{ ( block.title == 'Authoring') ? 'show' : '' }}" aria-labelledby="heading-{{ block.class }}" data-parent="#course-tools">
-            <div class="card-body">
-                <div class="row">
+<div class="card">
+    <div class="card-body">
+        {% if app.user.status != 5 %} <!-- main/template/default/course_home/activity.html.twig -->
+            <div class="accordion accordion-b4" id="course-tools">
+                {% for block in blocks %}
+                   <div class="card">
+                    <div class="card-header" id="heading-{{ block.class }}">
+                        {% if block.title %}
+                        <h5 class="card-title">
+                            <a class="{{ ( block.title == 'Authoring') ? ' ' : 'collapse' }}" role="button" data-toggle="collapse" data-target="#collapse-{{ block.class }}" aria-expanded="{{ ( block.title == 'Authoring') ? 'true' : 'false' }}" aria-controls="collapse-{{ block.class }}">
+                                {{ block.title }}
+                            </a>
+                        </h5>
+                        {% endif %}
+                    </div>
 
-                {% if 'homepage_view'|api_get_setting == 'activity' %}
-                    {% for item in block.content %}
-                        <div class="col-md-4 course-tool">
-                            {{ item.extra|raw }}
-                            {{ item.visibility|raw }}
-                            {{ item.icon|raw }}
-                            {{ item.link|raw }}
-                        </div>
-                    {% endfor %}
-                {% endif %}
+                    <div id="collapse-{{ block.class }}" class="collapse {{ ( block.title == 'Authoring') ? 'show' : '' }}" aria-labelledby="heading-{{ block.class }}" data-parent="#course-tools">
+                        <div class="card-body">
+                            <div class="row">
 
-                {% if 'homepage_view'|api_get_setting == 'activity_big' %}
-                    {% for item in block.content %}
-                        <div class="col-6 col-md-2 ">
-                            <div class="tools mt-3 mb-3 p-2">
-                                <div class="big_icon">
-                                    {{ item.tool.image|raw }}
-                                </div>
-                                <div class="content pt-2 pb-2">
-                                    {{ item.extra|raw }}
-                                    {{ item.link|raw }}
-                                    <div class="view">
+                            {% if 'homepage_view'|api_get_setting == 'activity' %}
+                                {% for item in block.content %}
+                                    <div class="col-md-4 course-tool">
+                                        {{ item.extra|raw }}
                                         {{ item.visibility|raw }}
+                                        {{ item.icon|raw }}
+                                        {{ item.link|raw }}
                                     </div>
-                                </div>
+                                {% endfor %}
+                            {% endif %}
+
+                            {% if 'homepage_view'|api_get_setting == 'activity_big' %}
+                                {% for item in block.content %}
+                                    <div class="col-6 col-md-2 ">
+                                        <div class="tools mt-3 mb-3 p-2">
+                                            <div class="big_icon">
+                                                {{ item.tool.image|raw }}
+                                            </div>
+                                            <div class="content pt-2 pb-2">
+                                                {{ item.extra|raw }}
+                                                {{ item.link|raw }}
+                                                <div class="view">
+                                                    {{ item.visibility|raw }}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                            {% endif %}
                             </div>
                         </div>
-                    {% endfor %}
-                {% endif %}
+                    </div>
                 </div>
+                {% endfor %}
             </div>
-        </div>
-    </div>
-    {% endfor %}
-</div>
 {% else %}
     <div class="row">
     {% for block in blocks %}
@@ -74,4 +76,6 @@
         {% endif %}
     {% endfor %}
     </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/main/template/default/course_info/index.html.twig b/main/template/default/course_info/index.html.twig
index e314f5e946..9a21b86087 100644
--- a/main/template/default/course_info/index.html.twig
+++ b/main/template/default/course_info/index.html.twig
@@ -1,12 +1,9 @@
 {% autoescape false %}
-    <div class="row">
-        <div class="col-md-8">
+    <div class="card">
+        <div class="card-body">
             <div class="accordion-b4" id="accordionSettings">
                 {{ course_settings }}
             </div>
         </div>
-        <div class="col-md-4">
-
-        </div>
     </div>
 {% endautoescape %}
\ No newline at end of file