diff --git a/assets/css/app.css b/assets/css/app.css
index d9b9616c..fdbdd74e 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -81,8 +81,7 @@ body {
         top: 56px;
         right: 0;
         left: 0;
-        background-color: inherit;
-        /* z-index: 1000; */
+        z-index: 1000;
         width: inherit;
         overflow-x: hidden;
         overflow-y: auto;
@@ -93,11 +92,16 @@ body {
         padding: 7px 15px 50px;
         margin-top: -10px;
 
+        /* Fill window */
+        height: 100%;
+
         /** Hide scrollbar in Firefox and Edge **/
         -ms-overflow-style: none;
         overflow: -moz-scrollbars-none;
         /* Use standard version for hiding the scrollbar */
         scrollbar-width: none;
+
+        background-color: var(--light);
     }
 
     .sidebar-container {
@@ -105,6 +109,11 @@ body {
         padding-top: 5px;
         background-color: #F8F8F8;
     }
+
+    /* Hide devices menu */
+    #treeBox-devices {
+        display: none;
+    }
 }
 
 /* Hide scrollbar */
@@ -645,7 +654,8 @@ BS 4 overrides
     }
 }
 
-.form-group > label {
+.form-group > label,
+.form-group > .col-form-label {
     font-weight: bold;
 }
 
diff --git a/assets/js/app.js b/assets/js/app.js
index 9d23993e..1a64e6a1 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -103,7 +103,6 @@ window.ajaxUI = ajaxUI;
 require('../ts_src/event_listeners');
 
 
-
 //Register darkmode (we must do it here, TS does not support ES6 constructor...
 try {
     //The browser needs to support mix blend mode
diff --git a/package.json b/package.json
index d5b11bd3..71c62ede 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
         "clipboard": "^2.0.4",
         "copy-webpack-plugin": "^5.0.4",
         "corejs-typeahead": "^1.2.1",
-        "darkmode-js": "^1.5.3",
+        "darkmode-js": "1.5.3",
         "datatables.net-bs4": "^1.10.19",
         "datatables.net-buttons-bs4": "^1.5.4",
         "datatables.net-colreorder-bs4": "^1.5.1",
diff --git a/templates/Form/extendedBootstrap4_layout.html.twig b/templates/Form/extendedBootstrap4_layout.html.twig
index 06e3cdd5..08fda2a9 100644
--- a/templates/Form/extendedBootstrap4_layout.html.twig
+++ b/templates/Form/extendedBootstrap4_layout.html.twig
@@ -7,11 +7,11 @@
 
 
 {% block form_label_class -%}
-    col-3
+    col-sm-3
 {%- endblock form_label_class %}
 
 {% block form_group_class -%}
-    col-9
+    col-sm-9
 {%- endblock form_group_class %}
 
 {%- block choice_widget_options -%}
diff --git a/templates/Parts/edit/_orderdetails.html.twig b/templates/Parts/edit/_orderdetails.html.twig
index a6e85760..27bc3a45 100644
--- a/templates/Parts/edit/_orderdetails.html.twig
+++ b/templates/Parts/edit/_orderdetails.html.twig
@@ -1,6 +1,6 @@
 {% form_theme form with ['Parts/edit/edit_form_styles.html.twig', "bootstrap_4_layout.html.twig"] %}
 
-<table class="table table-striped table-sm" id="orderdetails_table" data-prototype="{% if form.orderdetails.vars.prototype is defined %}{{ form_widget(form.orderdetails.vars.prototype)|e('html_attr') }}{% endif %}">
+<table class="table table-striped table-sm table-responsive-md" id="orderdetails_table" data-prototype="{% if form.orderdetails.vars.prototype is defined %}{{ form_widget(form.orderdetails.vars.prototype)|e('html_attr') }}{% endif %}">
     <tbody>
     {% for detail in form.orderdetails %}
         {{ form_widget(detail, {'disable_delete' : not is_granted('orderdetails.delete', part)}) }}
diff --git a/templates/Parts/info/_attachments_info.html.twig b/templates/Parts/info/_attachments_info.html.twig
index 28e52ba9..9d9830e7 100644
--- a/templates/Parts/info/_attachments_info.html.twig
+++ b/templates/Parts/info/_attachments_info.html.twig
@@ -1,6 +1,6 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover">
+<table class="table table-striped table-hover table-responsive-sm">
     <thead>
     <tr>
         <th></th>
diff --git a/templates/Parts/info/_extended_infos.html.twig b/templates/Parts/info/_extended_infos.html.twig
index 74bfb88a..d84552c5 100644
--- a/templates/Parts/info/_extended_infos.html.twig
+++ b/templates/Parts/info/_extended_infos.html.twig
@@ -1,6 +1,6 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover table-sm w-100">
+<table class="table table-striped table-hover table-sm w-100 table-responsive-sm">
     <tbody>
     <tr> {# Creation date #}
         <td>{% trans %}createdAt{% endtrans %}</td>
diff --git a/templates/Parts/info/_main_infos.html.twig b/templates/Parts/info/_main_infos.html.twig
index f363c84c..51564746 100644
--- a/templates/Parts/info/_main_infos.html.twig
+++ b/templates/Parts/info/_main_infos.html.twig
@@ -1,10 +1,10 @@
 {% import "helper.twig" as helper %}
 
 <div class="row">
-    <div class="col-md-3 col-lg-4">
+    <div class="col-md-3 col-lg-4 col-3 mt-auto mb-auto">
         {% include "Parts/info/_picture.html.twig" %}
     </div>
-    <div class="col-md-9 col-lg-8">
+    <div class="col-md-9 col-lg-8 col-7">
         <h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
             {% if part.manufacturer %}
                 {% if part.manufacturer.id is not null %}
diff --git a/templates/Parts/info/_order_infos.html.twig b/templates/Parts/info/_order_infos.html.twig
index 4a018bea..2a26689c 100644
--- a/templates/Parts/info/_order_infos.html.twig
+++ b/templates/Parts/info/_order_infos.html.twig
@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-striped table-header table-hover">
+    <table class="table table-striped table-header table-hover table-responsive-sm">
         <thead>
         <tr>
             <th>{% trans %}part.supplier.name{% endtrans %}</th>
diff --git a/templates/Parts/info/_part_lots.html.twig b/templates/Parts/info/_part_lots.html.twig
index 50ad67cb..ad1e43e6 100644
--- a/templates/Parts/info/_part_lots.html.twig
+++ b/templates/Parts/info/_part_lots.html.twig
@@ -1,13 +1,12 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover">
+<table class="table table-striped table-hover table-responsive-sm">
     <thead>
     <tr>
         <th>{% trans %}part_lots.description{% endtrans %}</th>
         <th>{% trans %}part_lots.storage_location{% endtrans %}</th>
         <th>{% trans %}part_lots.amount{% endtrans %}</th>
         <th></th> {# Tags row #}
-        <th></th>
     </tr>
     </thead>
 
diff --git a/templates/Parts/info/show_part_info.html.twig b/templates/Parts/info/show_part_info.html.twig
index 4527db35..0a420a15 100644
--- a/templates/Parts/info/show_part_info.html.twig
+++ b/templates/Parts/info/show_part_info.html.twig
@@ -19,7 +19,7 @@
             {% include "Parts/info/_main_infos.html.twig" %}
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-3 offset-3 offset-md-0">
             {% include "Parts/info/_sidebar.html.twig" %}
         </div>
 
diff --git a/templates/Users/_2fa_settings.html.twig b/templates/Users/_2fa_settings.html.twig
index 56ac7255..0863904f 100644
--- a/templates/Users/_2fa_settings.html.twig
+++ b/templates/Users/_2fa_settings.html.twig
@@ -35,15 +35,15 @@
 
                 {{ form_start(google_form, { 'attr': google_form_attr}) }}
                 {% if not tfa_google.enabled %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
                     </div>
 
-                    <div class="offset-3 row">
-                        <div class="col-3">
+                    <div class="offset-sm-3 row">
+                        <div class="col-sm-3">
                             <canvas class="qrcode" data-content="{{ tfa_google.qrContent }}"></canvas>
                         </div>
-                        <div class="col-9 my-auto">
+                        <div class="col-sm-9 my-auto">
                             <ol class="">
                                 <li>{% trans %}tfa_google.step.download{% endtrans %}</li>
                                 <li>{% trans %}tfa_google.step.scan{% endtrans %}</li>
@@ -53,7 +53,7 @@
                         </div>
                     </div>
 
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#manualSetupCollapse" aria-expanded="false" aria-controls="manualSetupCollapse">
                             {% trans %}tfa_google.manual_setup{% endtrans %}
                         </button>
@@ -70,7 +70,7 @@
 
                     {{ form_row(google_form.google_confirmation) }}
                 {% else %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_google.enabled_message{% endtrans %}</h6>
                     </div>
                 {% endif %}
@@ -79,7 +79,7 @@
             </div>
             <div class="tab-pane fade" id="tfa-backup" role="tabpanel" aria-labelledby="backup-tab">
                 {% if user.backupCodes is empty %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
@@ -87,19 +87,19 @@
                     {% set backup_form_attr = { 'data-delete-form': true,
                         'data-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
                     {{ form_start(backup_form, { 'attr': backup_form_attr}) }}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
-                    <div class="offset-3 mt-2">
+                    <div class="offset-sm-3 mt-2">
                         <p class="mb-0"><b>{% trans %}tfa_backup.remaining_tokens{% endtrans %}:</b> {{ user.backupCodes | length }}</p>
                         <p><b>{% trans %}tfa_backup.generation_date{% endtrans %}:</b> {{ user.backupCodesGenerationDate | format_datetime }}</p>
                     </div>
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <a href="{{ url('show_backup_codes') }}" target="_blank" data-no-ajax class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
                     </div>
 
-                    <div class="offset-3 mt-2">
+                    <div class="offset-sm-3 mt-2">
                         {{ form_widget(backup_form.reset_codes) }}
                     </div>
                     {{ form_end(backup_form) }}
diff --git a/templates/Users/user_info.html.twig b/templates/Users/user_info.html.twig
index 8293bc18..42a2b663 100644
--- a/templates/Users/user_info.html.twig
+++ b/templates/Users/user_info.html.twig
@@ -8,8 +8,8 @@
 {% block card_content %}
     <div class="card-body row">
         <div class="col-md-2">
-            <div class="img-thumbnail">
-                <img class="img-fluid img-rounded" alt="User avatar" src="{{ avatar }}">
+            <div class="mx-auto">
+                <img class="img-fluid img-thumbnail img-rounded " alt="User avatar" src="{{ avatar }}">
             </div>
         </div>
         <div class="col-md-5">
diff --git a/templates/_sidebar.html.twig b/templates/_sidebar.html.twig
index 6a2ee22d..2ccabdc5 100644
--- a/templates/_sidebar.html.twig
+++ b/templates/_sidebar.html.twig
@@ -29,7 +29,7 @@
 
         <div id="tree-categories" data-tree-search="#tree-category-search"></div>
     </li>
-    <li id="treeBox-devices">
+    <li id="treeBox-devices" class="d-sm-none d-md-block">
         <div class="input-group input-group-sm mb-2 mt-2">
             <div class="input-group-prepend">
                 <button class="btn btn-light dropdown-toggle" type="button"
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index f51c3d61..c3974148 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -61,6 +61,6 @@
     </form>
 
     {% if allow_email_pw_reset %}
-        <a class="offset-2" href="{{ url('pw_reset_request') }}">{% trans %}pw_reset.password_forget{% endtrans %}</a>
+        <a class="offset-sm-2" href="{{ url('pw_reset_request') }}">{% trans %}pw_reset.password_forget{% endtrans %}</a>
     {% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6b09ca8a..419d53d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2207,10 +2207,10 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-darkmode-js@^1.5.3:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/darkmode-js/-/darkmode-js-1.5.4.tgz#c15d981b518d1a50f6ebecc362434d11e8fa38ce"
-  integrity sha512-Wr//3IDfHLnLIPsC6f9+26BG3dH7sqtJ/kIKaeR8yGCW6Nm7vTiEvUA3lm7eiUwqt+yXyPHrnfpanWo+rEtp7Q==
+darkmode-js@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/darkmode-js/-/darkmode-js-1.5.3.tgz#89a5b72681d58a9b11b079fdeba7abc7c7b75ee9"
+  integrity sha512-Az6X5E6RJ72TQls1v3wIWuknb6J7XjRReMMOpMM8SXXbeO4bxGKJeJDtf7GdcIgmiTQ/cPqqObpr7LRzsAJDow==
 
 datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
   version "1.10.20"