diff --git a/assets/css/base.css b/assets/css/base.css
index 3a49e57cd1..ad677d884f 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -716,12 +716,6 @@
     color: #666666;
 }
 
-.bootstrap-select.form-control {
-    margin-bottom: 0;
-    padding: 0;
-    border: 1px solid #ced4da;
-}
-
 /*****************************************************
  *              AGENDA                               *
  *****************************************************/
@@ -5378,98 +5372,6 @@ div#chat-remote-video video {
     padding-bottom: 50px;
 }
 
-/* INSTALL CHAMILO */
-#page-install {
-    margin-top: 40px;
-}
-
-#page-install .logo-install {
-    text-align: center;
-    margin-bottom: 10px;
-}
-
-#page-install .panel-default {
-    border-color: #DDD;
-}
-
-.installer .logo {
-    text-align: center;
-}
-
-#page-install .icon-install {
-    text-align: center;
-}
-
-.installer .title {
-    text-align: center;
-    color: #FFF;
-    font-weight: bold;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
-}
-
-.installer .text {
-    text-align: center;
-    font-size: 16px;
-    color: #FFF;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
-}
-
-.installer .download-info {
-    padding-top: 10px;
-    text-align: center;
-}
-
-.RequirementHeading h2 {
-    font-weight: bold;
-    font-size: 22px;
-    color: #2E75A3;
-    padding-bottom: 10px;
-    margin-bottom: 30px;
-}
-
-#page-install h2.page-header {
-    font-weight: bold;
-    font-size: 28px;
-}
-
-#page-install .checkbox {
-    margin-bottom: 10px;
-}
-
-#page-install pre {
-    margin-top: 5px !important;
-}
-
-#page-install .page-header {
-    margin: 20px 0 20px;
-}
-
-#page-install .content {
-    padding-left: 3%;
-    padding-right: 3%;
-}
-
-#page-install .install-steps-menu {
-    border: none;
-}
-
-#page-install .install-steps-menu ol li {
-    padding-bottom: 5px;
-    padding-top: 5px;
-}
-
-#page-install .normal-message {
-    padding: 20px;
-    margin: 20px 0;
-    border-radius: 3px;;
-    font-size: 12px;
-    color: #666666;
-}
-
-.install-steps-menu li.current-step {
-    font-weight: bold;
-}
-
 /**** SOCIAL MEDIA ****/
 .share-social-media {
     background-color: #FFF;
diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index f569adff33..5521840576 100644
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -81,7 +81,11 @@ a {
 hr {
   border-top: 1px solid $border-color;
 }
-
+.btn-select{
+  color: #4e718f;
+  background-color: white;
+  border-color: #88b6df;
+}
 .btn-create-one{
   border-color: #b8daff;
   background-color: #cce5ff;
@@ -97,6 +101,123 @@ hr {
   background-color: #ffffff;
   color: #374548 !important;
 }
+
+/** BTN BUTTONS COLORS **/
+.btn{
+  .btn-fw {
+    min-width: 120px;
+  }
+}
+.btn-primary {
+  color: #fff;
+  background-color: #308ee0;
+  border-color: #308ee0;
+  &:hover{
+    background-color: #1e7bcb;
+    border-color: #1d74c0;
+  }
+}
+.btn-secondary {
+  color: #212529;
+  background-color: #e5e5e5;
+  border-color: #e5e5e5;
+  &:hover{
+    background-color: #d2d2d2;
+    border-color: #cccccc;
+  }
+}
+.btn-success {
+  color: #fff;
+  background-color: #00ce68;
+  border-color: #00ce68;
+  &:hover{
+    background-color: #00a855;
+    border-color: #009b4e;
+  }
+}
+.btn-danger {
+  color: #fff;
+  background-color: #e65251;
+  border-color: #e65251;
+  &:hover{
+    background-color: #e13130;
+    border-color: #e02624;
+  }
+}
+.btn-warning {
+  color: #FFF;
+  background-color: #ffaf00;
+  border-color: #ffaf00;
+  &:hover{
+    background-color: #d99500;
+    border-color: #cc8c00;
+  }
+}
+.btn-info {
+  color: #fff;
+  background-color: #8862e0;
+  border-color: #8862e0;
+  &:hover{
+    background-color: #7042da;
+    border-color: #6837d8;
+  }
+}
+.btn-light {
+  color: #212529;
+  background-color: #f3f5f6;
+  border-color: #f3f5f6;
+  &:hover{
+    background-color: #dde3e6;
+    border-color: #d6dde0;
+  }
+}
+.btn-dark {
+  color: #fff;
+  background-color: #424964;
+  border-color: #424964;
+  &:hover{
+    background-color: #33384d;
+    border-color: #2e3345;
+  }
+}
+
+.btn-outline-primary {
+  color: #308ee0;
+  background-color: transparent;
+  background-image: none;
+  border-color: #308ee0;
+}
+.btn-outline-secondary {
+  color: rgba(0, 0, 0, 0.5);
+  background-color: transparent;
+  background-image: none;
+  border-color: #e5e5e5;
+}
+.btn-outline-success {
+  color: #00ce68;
+  background-color: transparent;
+  background-image: none;
+  border-color: #00ce68;
+}
+.btn-outline-danger {
+  color: #e65251;
+  background-color: transparent;
+  background-image: none;
+  border-color: #e65251;
+}
+.btn-outline-warning {
+  color: #ffaf00;
+  background-color: transparent;
+  background-image: none;
+  border-color: #ffaf00;
+}
+.btn-outline-info {
+  color: #8862e0;
+  background-color: transparent;
+  background-image: none;
+  border-color: #8862e0;
+}
+
 .footer p{
   margin: 0;
   padding: 0;
diff --git a/assets/css/scss/_install.scss b/assets/css/scss/_install.scss
index 620a0e31a8..4964c0fb1a 100644
--- a/assets/css/scss/_install.scss
+++ b/assets/css/scss/_install.scss
@@ -1,14 +1,55 @@
 .bg-install{
   background: #0068d8 !important;
+  @include portrait($breakpoint-sm, $breakpoint-md){
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
   .install-box{
     width: 100%;
-    max-width: 50%;
+    max-width: 65%;
     padding: 50px 40px;
     margin: auto;
     background-color: $default-white;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
+
+    .install-icon{
+      text-align: center;
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+
+    .install-title{
+      font-size: 20px;
+      font-weight: bold;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      color: #2E75A3;
+    }
+
+    .install-subtitle{
+      font-size: 18px;
+      font-weight: normal;
+    }
+
+    @include portrait($breakpoint-sm, $breakpoint-md){
+      max-width: 95%;
+      padding: 30px 20px;
+    }
+    @include landscape($breakpoint-sm) {
+      max-width: 95%;
+      padding: 30px 20px;
+    }
+    @include to($breakpoint-xs) {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    @include to($breakpoint-xs) {
+      max-width: 95%;
+      padding: 20px 10px;
+    }
+
     .install-footer{
       text-align: center;
       font-size: 12px;
@@ -47,4 +88,3 @@
     }
   }
 }
-
diff --git a/assets/css/scss/_media.scss b/assets/css/scss/_media.scss
index 2d77db32a9..1ae7b2cf39 100644
--- a/assets/css/scss/_media.scss
+++ b/assets/css/scss/_media.scss
@@ -25,3 +25,21 @@
     @content;
   }
 }
+
+@mixin large($breakpoint){
+  @media (min-width: $breakpoint){
+    @content
+  }
+}
+
+@mixin portrait($start, $end){
+  @media (min-width: $start) and (max-width: $end) {
+    @content
+  }
+}
+
+@mixin landscape($breakpoint){
+  @media (max-width: $breakpoint - 1px){
+    @content
+  }
+}
\ No newline at end of file
diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss
index 32aba9c1f8..8aaaa2cf0e 100644
--- a/assets/css/scss/_variables.scss
+++ b/assets/css/scss/_variables.scss
@@ -6,7 +6,7 @@ $breakpoint-xl : 1440px;
 $breakpoint-lg : 1200px;
 $breakpoint-md : 992px;
 $breakpoint-sm : 768px;
-$breakpoint-xs : 0;
+$breakpoint-xs : 480px;
 
 // ---------------------------------------------------------
 // GREYSCALE COLORS
diff --git a/main/inc/lib/pear/HTML/QuickForm/select.php b/main/inc/lib/pear/HTML/QuickForm/select.php
index 7a71eba651..291589073d 100755
--- a/main/inc/lib/pear/HTML/QuickForm/select.php
+++ b/main/inc/lib/pear/HTML/QuickForm/select.php
@@ -81,6 +81,7 @@ class HTML_QuickForm_select extends HTML_QuickForm_element
                 $attributes = []; // Initialize variable to avoid warning in PHP 7.1
             }
             $attributes['class'] = $oldClass . ' selectpicker show-tick form-control';
+            $attributes['data-style'] = 'btn-select';
             $attributes['data-live-search'] = 'true';
 
             if (isset($attributes['disable_js']) && $attributes['disable_js']) {
diff --git a/main/install/index.php b/main/install/index.php
index 07bc81b18c..f1eda948ae 100755
--- a/main/install/index.php
+++ b/main/install/index.php
@@ -894,13 +894,14 @@ $poweredBy = 'Powered by <a href="http://www.chamilo.org" target="_blank"> Chami
         }
     </script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
 <body class="bg-chamilo bg-install" dir="<?php echo api_get_text_direction(); ?>">
 <div class="install-box">
     <div class="row">
         <div class="col-md-4">
             <div class="logo-install">
-                <img src="header-logo.png" hspace="10" vspace="10" alt="Chamilo" />
+                <img src="header-logo.png" class="img-fluid" alt="Chamilo" />
             </div>
             <div class="install-steps">
                 <ol class="list-group">
diff --git a/main/install/install.lib.php b/main/install/install.lib.php
index 966e8313ad..03c5d0e69c 100755
--- a/main/install/install.lib.php
+++ b/main/install/install.lib.php
@@ -680,7 +680,7 @@ function display_language_selection_box(
 
     // Displaying the box.
     $html = '';
-    $html .= "\t\t<select class='selectpicker show-tick' name=\"$name\">\n";
+    $html .= "\t\t<select class='selectpicker show-tick form-control' data-style=\"btn-select\" name=\"$name\">\n";
     foreach ($language_list as $key => $value) {
         if ($key == $default_language) {
             $option_end = ' selected="selected">';
@@ -703,26 +703,27 @@ function display_language_selection_box(
 function display_language_selection()
 {
     ?>
-    <h2><?php get_lang('WelcomeToTheChamiloInstaller'); ?></h2>
-    <div class="RequirementHeading">
-        <h2><?php echo display_step_sequence(); ?>
+        <div class="install-icon">
+            <img width="150px;" src="chamilo-install.svg"/>
+        </div>
+        <h2 class="install-title">
+            <?php echo display_step_sequence(); ?>
             <?php echo get_lang('InstallationLanguage'); ?>
         </h2>
-        <p><?php echo get_lang('PleaseSelectInstallationProcessLanguage'); ?>:</p>
         <form id="lang_form" method="post" action="<?php echo api_get_self(); ?>">
-        <div class="btn-group">
-            <?php echo display_language_selection_box('language_list', api_get_interface_language()); ?>
+            <p><?php echo get_lang('PleaseSelectInstallationProcessLanguage'); ?>:</p>
+            <div class="form-group">
+                <?php echo display_language_selection_box('language_list', api_get_interface_language()); ?>
+            </div>
             <button type="submit" name="step1" class="btn btn-success" value="<?php echo get_lang('Next'); ?>">
                 <em class="fa fa-forward"> </em>
                 <?php echo get_lang('Next'); ?>
             </button>
-        </div>
-        <input type="hidden" name="is_executable" id="is_executable" value="-" />
+            <input type="hidden" name="is_executable" id="is_executable" value="-" />
         </form>
-    </div>
-    <div class="RequirementHeading">
-        <?php echo get_lang('YourLanguageNotThereContactUs'); ?>
-    </div>
+        <div class="RequirementHeading">
+            <?php echo get_lang('YourLanguageNotThereContactUs'); ?>
+        </div>
 <?php
 }
 
@@ -745,7 +746,7 @@ function display_requirements(
     $update_from_version_8 = []
 ) {
     global $_setting, $originalMemoryLimit;
-    echo '<div class="RequirementHeading"><h2>'.display_step_sequence().get_lang('Requirements')."</h2></div>";
+    echo '<h2 class="install-title">'.display_step_sequence().get_lang('Requirements')."</h2>";
     echo '<div class="RequirementText">';
     echo '<strong>'.get_lang('ReadThoroughly').'</strong><br />';
     echo get_lang('MoreDetails').' <a href="../../documentation/installation_guide.html" target="_blank">'.get_lang('ReadTheInstallationGuide').'</a>.<br />'."\n";
@@ -766,7 +767,7 @@ function display_requirements(
     }
 
     //  SERVER REQUIREMENTS
-    echo '<div class="RequirementHeading"><h4>'.get_lang('ServerRequirements').'</h4>';
+    echo '<h4 class="install-subtitle">'.get_lang('ServerRequirements').'</h4>';
     $timezone = checkPhpSettingExists('date.timezone');
     if (!$timezone) {
         echo "<div class='alert alert-warning'>
@@ -774,9 +775,9 @@ function display_requirements(
             get_lang('DateTimezoneSettingNotSet')."</div>";
     }
 
-    echo '<div class="RequirementText">'.get_lang('ServerRequirementsInfo').'</div>';
-    echo '<div class="RequirementContent">';
-    echo '<table class="table">
+    echo '<div class="install-requirement">'.get_lang('ServerRequirementsInfo').'</div>';
+    echo '<div class="table-responsive">';
+    echo '<table class="table table-bordered">
             <tr>
                 <td class="requirements-item">'.get_lang('PHPVersion').' >= '.REQUIRED_PHP_VERSION.'</td>
                 <td class="requirements-value">';
@@ -854,15 +855,15 @@ function display_requirements(
             </tr>
         </table>';
     echo '</div>';
-    echo '</div>';
+
 
     // RECOMMENDED SETTINGS
     // Note: these are the settings for Joomla, does this also apply for Chamilo?
     // Note: also add upload_max_filesize here so that large uploads are possible
-    echo '<div class="RequirementHeading"><h4>'.get_lang('RecommendedSettings').'</h4>';
-    echo '<div class="RequirementText">'.get_lang('RecommendedSettingsInfo').'</div>';
-    echo '<div class="RequirementContent">';
-    echo '<table class="table">
+    echo '<h4 class="install-subtitle">'.get_lang('RecommendedSettings').'</h4>';
+    echo '<div class="install-requirement">'.get_lang('RecommendedSettingsInfo').'</div>';
+    echo '<div class="table-responsive">';
+    echo '<table class="table table-bordered">
             <tr>
                 <th>'.get_lang('Setting').'</th>
                 <th>'.get_lang('Recommended').'</th>
@@ -910,13 +911,12 @@ function display_requirements(
                 <td class="requirements-value">'.compare_setting_values($originalMemoryLimit, REQUIRED_MIN_MEMORY_LIMIT).'</td>
             </tr>
           </table>';
-    echo '  </div>';
     echo '</div>';
 
     // DIRECTORY AND FILE PERMISSIONS
-    echo '<div class="RequirementHeading"><h4>'.get_lang('DirectoryAndFilePermissions').'</h4>';
-    echo '<div class="RequirementText">'.get_lang('DirectoryAndFilePermissionsInfo').'</div>';
-    echo '<div class="RequirementContent">';
+    echo '<h4 class="install-subtitle">'.get_lang('DirectoryAndFilePermissions').'</h4>';
+    echo '<div class="install-requirement">'.get_lang('DirectoryAndFilePermissionsInfo').'</div>';
+    echo '<div class="table-responsive">';
 
     $course_attempt_name = '__XxTestxX__';
     $course_dir = api_get_path(SYS_COURSE_PATH).$course_attempt_name;
@@ -989,7 +989,7 @@ function display_requirements(
         </tr>';
     }
 
-    echo '<table class="table">
+    echo '<table class="table table-bordered">
             '.$oldConf.'
             <tr>
                 <td class="requirements-item">'.api_get_path(SYS_APP_PATH).'</td>
@@ -1020,7 +1020,7 @@ function display_requirements(
                 <td class="requirements-value">'.$file_perm.' </td>
             </tr>
         </table>';
-    echo '  </div>';
+
     echo '</div>';
 
     if ($installType == 'update' && (empty($updatePath) || $badUpdatePath)) {