diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aafa844..bea6aff3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## --- [4.0.5] - 2022/06/22
+### New features
+None
+### Bug fixes
+- Fix cannot delete backup on page 2 ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/382))
+### Tweaks
+- Rework server list on status page display for use on small screens ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/383))
+<br><br>
+
 ## --- [4.0.4-hotfix2] - 2022/06/21
 ### Bug fixes
 - Fix Traceback on schedule config page ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/381))
diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 5b1d74f6..00aee7e1 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -60,12 +60,12 @@
                 </div>
                 <div class="wrapper my-auto ml-auto ml-lg-4">
                   <p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true"
-                    title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
+                     title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
                     {{ translate('dashboard', 'cpuUsage', data['lang']) }}: <span id="cpu_usage">{{
                       data.get('hosts_data').get('cpu_usage') }}</span>
                   </p>
                   <p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top"
-                    title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
+                     title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
                     {{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{
                       data.get('hosts_data').get('mem_percent') }}%</span>
                   </p>
@@ -116,8 +116,8 @@
           {% if len(data['servers']) > 0 %}
           {% if data['user_data']['hints'] %}
           <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" ,
-            data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
-            data-placement="top"></span>
+                data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
+                data-placement="top"></span>
           {% end %}
           {% end %}
           <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{
@@ -156,7 +156,7 @@
                     <i class="fas fa-server"></i>
                     {% if server['alert'] %}
                     <a style="color: red !important;" draggable="false"
-                      href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                       href="/panel/server_detail?id={{server['server_data']['server_id']}}">
                       {{ server['server_data']['server_name'] }}&nbsp; <i class="fas fa-exclamation-triangle"></i>
                     </a>
                     {% else %}
@@ -170,17 +170,17 @@
                     {% if server['user_command_permission'] %}
                     {% if server['stats']['running'] %}
                     <a data-id="{{server['server_data']['server_id']}}" class="stop_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'stop' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'stop' , data['lang']) }}">
                       <i class="fas fa-stop"></i>
                     </a> &nbsp;
 
                     <a data-id="{{server['server_data']['server_id']}}" class="restart_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'restart' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'restart' , data['lang']) }}">
                       <i class="fas fa-sync"></i>
                     </a> &nbsp;
 
                     <a data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'kill' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
 
@@ -199,15 +199,15 @@
                       data['lang']) }}</a>
                     {% else %}
                     <a data-id="{{server['server_data']['server_id']}}" class="play_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'start' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'start' , data['lang']) }}">
                       <i class="fas fa-play"></i>
                     </a> &nbsp;
                     <a data-id="{{server['server_data']['server_id']}}" class="clone_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'clone' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'clone' , data['lang']) }}">
                       <i class="fas fa-clone"></i>
                     </a> &nbsp;
                     <a data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'kill' , data['lang']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
                     {% end %}
@@ -216,7 +216,7 @@
 
                   <td draggable="false" id="server_cpu_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                      title="{{server['stats']['cpu']}}">
+                         title="{{server['stats']['cpu']}}">
                       <div class="progress-bar
                       {% if server['stats']['cpu'] <= 33 %}
                       bg-success
@@ -226,14 +226,14 @@
                       bg-danger
                       {% end %}
                       " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
-                        aria-valuemin="0" aria-valuemax="100"></div>
+                           aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['cpu']}}%
                   </td>
 
                   <td draggable="false" id="server_mem_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                      title="{{server['stats']['mem']}}">
+                         title="{{server['stats']['mem']}}">
                       <div class="progress-bar
                       {% if server['stats']['mem_percent'] <= 33 %}
                       bg-success
@@ -243,7 +243,7 @@
                       bg-danger
                       {% end %}
                       " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
-                        aria-valuemin="0" aria-valuemax="100"></div>
+                           aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['mem_percent']}}% -
 
@@ -263,7 +263,7 @@
 
                     {% if server['stats']['desc'] != 'False' %}
                     <div id="desc_id"
-                      style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">{{
+                         style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">{{
                       server['stats']['desc'] }}</div> <br />
                     {% end %}
 
@@ -287,7 +287,7 @@
                     {% end %}
                   </td>
                   <span class="server-player-totals" id="server_players_{{server['server_data']['server_id']}}"
-                    data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}"></span>
+                        data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}"></span>
                 </tr>
                 {% end %}
               </tbody>
@@ -295,7 +295,7 @@
           </div>
           {% end %}
           {% if len(data['servers']) > 0 %}
-          <!-- Try with Accordion -->
+          <!-- View for Small screen -->
           <div class="d-sm-none d-block">
             <div class="accordion" id="accordionServers">
               {% for server in data['servers'] %}
@@ -306,27 +306,27 @@
                       <div class="col-10 col-lg-3 mx-0 px-0">
                         {% if server['alert'] %}
                         <a style="color: red !important" class="btn btn-link d-flex justify-content-start" type="button"
-                          href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                           href="/panel/server_detail?id={{server['server_data']['server_id']}}">
                           <i class="fas fa-server"></i> {{ server['server_data']['server_name'] }}&nbsp; <i
-                            class="fas fa-exclamation-triangle"></i>
+                             class="fas fa-exclamation-triangle"></i>
                         </a>
                         {% else %}
                         <a class="btn btn-link d-flex justify-content-start" type="button"
-                          href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                           href="/panel/server_detail?id={{server['server_data']['server_id']}}">
                           <i class="fas fa-server"></i> {{ server['server_data']['server_name'] }}
                         </a>
                         {% end %}
                       </div>
                       <div class="col-2 col-lg-3 mx-0 px-0">
                         <a class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse"
-                          data-target="#collapse-{{server['server_data']['server_id']}}" aria-expanded="false"
-                          aria-controls="collapse-{{server['server_data']['server_id']}}">
+                           data-target="#collapse-{{server['server_data']['server_id']}}" aria-expanded="false"
+                           aria-controls="collapse-{{server['server_data']['server_id']}}">
                           <i class="fas fa-chart-bar"></i>
                         </a>
                       </div>
                       <div class="col-4 col-lg-3 mx-0 px-0">
                         <a id="m_server_running_status_{{server['server_data']['server_id']}}"
-                          class="btn btn-link d-flex justify-content-start" type="button">
+                           class="btn btn-link d-flex justify-content-start" type="button">
                           {% if server['stats']['running'] %}
                           <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
                             data['lang']) }}</span>
@@ -348,22 +348,22 @@
                           <div class="row">
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn btn-link stop_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'stop' , data['lang']) }}">
+                                 class="btn btn-link stop_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'stop' , data['lang']) }}">
                                 <i class="fas fa-stop"></i>
                               </a>
                             </div>
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn btn-link restart_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'restart' , data['lang']) }}">
+                                 class="btn btn-link restart_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'restart' , data['lang']) }}">
                                 <i class="fas fa-sync"></i>
                               </a>
                             </div>
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn btn-link kill_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'kill' , data['lang']) }}">
+                                 class="btn btn-link kill_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                                 <i class="fas fa-skull"></i>
                               </a>
                             </div>
@@ -390,7 +390,7 @@
                           <div class="row">
                             <div class="col-12 px-0">
                               <a data-id="{{server['server_data']['server_id']}}" class="btn btn-link"><i
-                                  class="fa fa-spinner fa-spin"></i>
+                                   class="fa fa-spinner fa-spin"></i>
                                 {{ translate('serverTerm', 'downloading', data['lang']) }}</a>
                             </div>
                           </div>
@@ -398,22 +398,22 @@
                           <div class="row">
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn play_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'start' , data['lang']) }}">
+                                 class="btn play_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'start' , data['lang']) }}">
                                 <i class="fas fa-play"></i>
                               </a>
                             </div>
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn clone_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'clone' , data['lang']) }}">
+                                 class="btn clone_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'clone' , data['lang']) }}">
                                 <i class="fas fa-clone"></i>
                               </a>
                             </div>
                             <div class="col-4 px-0">
                               <a data-id="{{server['server_data']['server_id']}}"
-                                class="btn kill_button actions_serveritem" data-toggle="tooltip"
-                                title="{{ translate('dashboard', 'kill' , data['lang']) }}">
+                                 class="btn kill_button actions_serveritem" data-toggle="tooltip"
+                                 title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                                 <i class="fas fa-skull"></i></a>
                             </div>
                           </div>
@@ -426,14 +426,14 @@
                 </div>
 
                 <div id="collapse-{{server['server_data']['server_id']}}" class="collapse"
-                  aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
+                     aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
                   <div class="card-body">
                     <div class="row">
                       <div class="col-6">
                         <h6>{{ translate('dashboard', 'cpuUsage', data['lang']) }}</h6>
                         <div id="m_server_cpu_{{server['server_data']['server_id']}}">
                           <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                            title="{{server['stats']['cpu']}}">
+                               title="{{server['stats']['cpu']}}">
                             <div class="progress-bar
                     {% if server['stats']['cpu'] <= 33 %}
                     bg-success
@@ -443,7 +443,7 @@
                     bg-danger
                     {% end %}
                     " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0"
-                              aria-valuemax="100"></div>
+                                 aria-valuemax="100"></div>
                           </div>
                           {{server['stats']['cpu']}}%
                         </div>
@@ -452,7 +452,7 @@
                         <h6>{{ translate('dashboard', 'memUsage', data['lang']) }}</h6>
                         <div draggable="false" id="m_server_mem_{{server['server_data']['server_id']}}">
                           <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                            title="{{server['stats']['mem']}}">
+                               title="{{server['stats']['mem']}}">
                             <div class="progress-bar
                     {% if server['stats']['mem_percent'] <= 33 %}
                     bg-success
@@ -462,7 +462,7 @@
                     bg-danger
                     {% end %}
                     " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
-                              aria-valuemin="0" aria-valuemax="100"></div>
+                                 aria-valuemin="0" aria-valuemax="100"></div>
                           </div>
                           {{server['stats']['mem_percent']}}% -
 
@@ -492,7 +492,7 @@
 
                           {% if server['stats']['desc'] != 'False' %}
                           <div id="desc_id"
-                            style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
+                               style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
                             {{ server['stats']['desc'] }}</div> <br />
                           {% end %}
 
diff --git a/app/frontend/templates/panel/server_backup.html b/app/frontend/templates/panel/server_backup.html
index d71e0f68..d97c2d14 100644
--- a/app/frontend/templates/panel/server_backup.html
+++ b/app/frontend/templates/panel/server_backup.html
@@ -375,7 +375,7 @@
 
     $('#backup_table').DataTable({
       "order": [[1, "desc"]],
-      "paging": true,
+      "paging": false,
       "lengthChange": false,
       "searching": true,
       "ordering": true,
diff --git a/app/frontend/templates/public/status.html b/app/frontend/templates/public/status.html
index 2d445f66..0a444158 100644
--- a/app/frontend/templates/public/status.html
+++ b/app/frontend/templates/public/status.html
@@ -6,76 +6,153 @@
 {% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard', data['lang']) }}{% end %}
 
 {% block content %}
-<div class="content-wrapper col-md login-modal" style="background-color: #222437;">
-  <img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'>
-  <hr />
-  <div class="table-responsive">
-    <table class="table table-hover">
-      <thead>
-        <tr class="rounded">
-          <th>{{ translate('dashboard', 'server', data['lang']) }}</th>
-          <th>{{ translate('dashboard', 'players', data['lang']) }}</th>
-          <th>{{ translate('dashboard', 'motd', data['lang']) }}</th>
-          <th>{{ translate('dashboard', 'version', data['lang']) }}</th>
-          <th>{{ translate('dashboard', 'status', data['lang']) }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% if data['running'] != 0 %}
-        <span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4>
-        {% end %}
-        {% for server in data['servers'] %}
-        <tr>
-          <td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
-            <i class="fas fa-server"></i>
-            {{ server['server_data']['server_name'] }}
-          </td>
-          {% if server['stats']['int_ping_results'] != 'False' %}
-          <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
-            {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
-            data['lang']) }}<br />
-          </td>
-          <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
-            {% if server['stats']['desc'] != 'False' %}
-            <img src="/static/assets/images/pack.png" alt="icon" style="-webkit-filter:grayscale(100%); filter:grayscale(100%)"/>
-            <span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
-              server['stats']['desc'] }}</span> <br />
-            {% end %}
-          </td>
-          <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
-            {% if server['stats']['version'] != 'False' %}
-            {{ server['stats']['version'] }}
-            {% end %}
-          </td>
-          {% else %}
-          <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
-            <span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>
-          </td>
-          <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
-            <span class="text-warning">Crafty can't get infos from this Server </span>
-          </td>
-          <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
-            <span class="text-warning"><i class="fas fa-question"></i></i></span>
-          </td>
+<!-- View for Large screen -->
+<div class="row justify-content-center">
+  <div class="content-wrapper col-md login-modal d-none d-sm-block" style="background-color: #222437;">
+    <img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'>
+    <hr />
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr class="rounded">
+            <th>{{ translate('dashboard', 'server', data['lang']) }}</th>
+            <th>{{ translate('dashboard', 'players', data['lang']) }}</th>
+            <th>{{ translate('dashboard', 'motd', data['lang']) }}</th>
+            <th>{{ translate('dashboard', 'version', data['lang']) }}</th>
+            <th>{{ translate('dashboard', 'status', data['lang']) }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% if data['running'] != 0 %}
+          <span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4>
           {% end %}
-          <td id="server_online_status_{{ server['stats']['server_id']['server_id'] }}">
-            {% if server['stats']['running'] %}
-            <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])
-              }}</span>
+          {% for server in data['servers'] %}
+          <tr>
+            <td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
+              <i class="fas fa-server"></i>
+              {{ server['server_data']['server_name'] }}
+            </td>
+            {% if server['stats']['int_ping_results'] != 'False' %}
+            <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
+              {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
+              data['lang']) }}<br />
+            </td>
+            <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
+              {% if server['stats']['desc'] != 'False' %}
+              <img src="/static/assets/images/pack.png" alt="icon" style="-webkit-filter:grayscale(100%); filter:grayscale(100%)" />
+              <span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
+                server['stats']['desc'] }}</span> <br />
+              {% end %}
+            </td>
+            <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
+              {% if server['stats']['version'] != 'False' %}
+              {{ server['stats']['version'] }}
+              {% end %}
+            </td>
             {% else %}
-            <span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])
-              }}</span>
+            <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
+              <span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>
+            </td>
+            <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
+              <span class="text-warning">Crafty can't get infos from this Server </span>
+            </td>
+            <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
+              <span class="text-warning"><i class="fas fa-question"></i></i></span>
+            </td>
             {% end %}
-          </td>
-        </tr>
-        {% end %}
-
-      </tbody>
-    </table>
+            <td id="server_online_status_{{ server['stats']['server_id']['server_id'] }}">
+              {% if server['stats']['running'] %}
+              <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])
+                }}</span>
+              {% else %}
+              <span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])
+                }}</span>
+              {% end %}
+            </td>
+          </tr>
+          {% end %}
+        </tbody>
+      </table>
+    </div>
+    <hr />
   </div>
-  <hr />
 </div>
+<!-- View for Small screen -->
+<div class="row justify-content-center align-items-sm-center">
+  <div class="content-wrapper login-modal d-sm-none d-block">
+    <img src="/static/assets/images/logo_long.png" style='width: 100%;'>
+    <hr />
+    {% if data['running'] != 0 %}
+    <span id="m_sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4>
+    {% end %}
+    <div class="accordion" id="accordionServers">
+      {% for server in data['servers'] %}
+      <div class="card mb-0">
+        <div class="card-header" id="heading-{{server['server_data']['server_id']}}">
+          <h2 class="mb-0 container overflow-hidden">
+            <div class="row">
+              <div class="col-8 mx-0 px-0">
+                <a id="m_server_name_{{ server['stats']['server_id']['server_id'] }}" class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse"
+                   data-target="#collapse-{{server['server_data']['server_id']}}" aria-expanded="false"
+                   aria-controls="collapse-{{server['server_data']['server_id']}}">
+                  <i class="fas fa-server"></i>
+                  {{ server['server_data']['server_name'] }}
+                </a>
+              </div>
+              <div class="col-4 mx-0 px-0">
+                <a id="m_server_online_status_{{ server['stats']['server_id']['server_id'] }}" class="btn btn-link d-flex justify-content-center" type="button">
+                  {% if server['stats']['running'] %}
+                  <div id="m_server_players_{{ server['stats']['server_id']['server_id'] }}">
+                    <span class="text-success"><i class="fas fa-signal"></i> {{ server['stats']['online'] }} / {{ server['stats']['max'] }}</span>
+                  </div>
+                  {% else %}
+                  <span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang']) }}</span>
+                  {% end %}
+                </a>
+              </div>
+            </div>
+          </h2>
+        </div>
 
+        <div id="collapse-{{server['server_data']['server_id']}}" class="collapse"
+             aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
+          <div class="card-body">
+            {% if server['stats']['int_ping_results'] != 'False' %}
+            <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}" class="media">
+              {% if server['stats']['desc'] != 'False' %}
+              <img src="/static/assets/images/pack.png" class="w-25 mr-3" alt="icon" style="-webkit-filter:grayscale(100%); filter:grayscale(100%);" />
+              {% end %}
+              <div class="media-body">
+                {% if server['stats']['desc'] != 'False' %}
+                <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
+                  <span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
+                    server['stats']['desc'] }}</span> <br />
+                </div>
+                {% end %}
+              </div>
+            </div>
+            <br />
+            <div id="m_server_version_{{ server['stats']['server_id']['server_id'] }}">
+              {% if server['stats']['version'] != 'False' %}
+              {{ server['stats']['version'] }}
+              {% end %}
+            </div>
+            {% else %}
+            <div class="row">
+              <div class="col-12">
+                <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
+                  <span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from this Server </span>
+                </div>
+              </div>
+            </div>
+            {% end %}
+          </div>
+        </div>
+      </div>
+      {% end %}
+    </div>
+  </div>
+</div>
 {% end %}
 
 {% block js %}
@@ -90,17 +167,23 @@
   }
 
   function update_one_server_status(server) {
+    /* Normal Screen view */
     server_players = document.getElementById('server_players_' + server.id);
     server_motd = document.getElementById('server_motd_' + server.id);
     server_version = document.getElementById('server_version_' + server.id);
     server_online_status = document.getElementById('server_online_status_' + server.id);
+    /* Small Screen view */
+    m_server_players = document.getElementById('m_server_players_' + server.id);
+    m_server_motd = document.getElementById('m_server_motd_' + server.id);
+    m_server_version = document.getElementById('m_server_version_' + server.id);
+    m_server_online_status = document.getElementById('m_server_online_status_' + server.id);
 
     /* TODO Update each element */
     if (server.int_ping_results) {
-      document.getElementById('sync').innerHTML='';
+      document.getElementById('sync').innerHTML = '';
+      document.getElementById('m_sync').innerHTML = '';
       /* Update Players */
-      if (server.players)
-      {
+      if (server.players) {
         server_players.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
       }
 
@@ -109,36 +192,44 @@
       if (server.desc) {
         if (server.icon) {
           motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
+          m_motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
         }
         else {
           motd = `<img src="/static/assets/images/pack.png" alt="icon" /> `;
+          m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `;
         }
 
         motd = motd + `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`;
+        m_motd = m_motd + `<div class="media-body"><span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span></div>`;
         server_motd.innerHTML = motd;
+        m_server_motd.innerHTML = m_motd;
       }
 
       /* Version */
-      if (server.version)
-      {
-        server_version.innerHTML = server.version
+      if (server.version) {
+        server_version.innerHTML = server.version;
+        m_server_version.innerHTML = server.version;
       }
     }
     else {
       server_players.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>`;
       server_motd.innerHTML = `<span class="text-warning">Crafty can't get infos from this Server </span>`;
-      server_version.innerHTML = `<span class="text-warning"><i class="fas fa-question"></i></i></span>`
+      server_version.innerHTML = `<span class="text-warning"><i class="fas fa-question"></i></i></span>`;
+      m_server_motd.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from this Server </span>`;
     }
 
     /* Update Online Status */
     var online_status = "";
     if (server.running) {
       online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
+      m_online_status = `<span class="text-success"><i class="fas fa-signal"></i>` + server.online + ` / ` + server.max + `</span>`;
     }
     else {
       online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
+      m_online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
     }
     server_online_status.innerHTML = online_status;
+    m_server_online_status.innerHTML = m_online_status;
   }
 
   function update_servers_status(data) {
@@ -150,11 +241,10 @@
   $(document).ready(function () {
     console.log("ready!");
 
-    if (webSocket)
-    {
+    if (webSocket) {
       webSocket.on('update_server_status', update_servers_status);
     }
   }());
 </script>
 
-{% end %}
+{% end %}
\ No newline at end of file
diff --git a/app/frontend/templates/public_base.html b/app/frontend/templates/public_base.html
index 1254555d..5a6d9bdb 100644
--- a/app/frontend/templates/public_base.html
+++ b/app/frontend/templates/public_base.html
@@ -27,13 +27,11 @@
 <body class="dark-theme">
   <div class="container-scroller">
     <div class="container-fluid page-body-wrapper full-page-wrapper">
-      <div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one">
-        <div class="row w-100">
-          <div class="mx-auto">
-            <div class="auto-form-wrapper">
-              {% block content %}
-              {% end %}
-            </div>
+      <div class="content-wrapper d-flex align-items-sm-center auth auth-bg-1 theme-one">
+        <div class="mx-auto">
+          <div class="auto-form-wrapper">
+            {% block content %}
+            {% end %}
           </div>
         </div>
       </div>