diff --git a/app/frontend/static/assets/js/shared/root-dir.js b/app/frontend/static/assets/js/shared/root-dir.js
index 1f82c2f5..614d524a 100644
--- a/app/frontend/static/assets/js/shared/root-dir.js
+++ b/app/frontend/static/assets/js/shared/root-dir.js
@@ -87,8 +87,8 @@ function process_tree_response(response, unzip) {
                     <div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
                     <input type="radio" class="root-input" name="root_path" value="${dpath}">
                     <span id="${dpath}span" class="files-tree-title" data-path="${dpath}" data-name="${filename}" onclick="getDirView(event)">
-                      <i style="color: var(--info);" class="far fa-folder"></i>
-                      <i style="color: var(--info);" class="far fa-folder-open"></i>
+                      <i class="far fa-folder text-info"></i>
+                      <i class="far fa-folder-open text-info"></i>
                       ${filename}
                       </span>
                     </input></div><li>`
diff --git a/app/frontend/static/assets/js/shared/upload.js b/app/frontend/static/assets/js/shared/upload.js
index d926afa4..15d85182 100644
--- a/app/frontend/static/assets/js/shared/upload.js
+++ b/app/frontend/static/assets/js/shared/upload.js
@@ -137,7 +137,7 @@ async function uploadFile(type, file = null, path = null, file_num = 0, _onProgr
         // All promises resolved successfully
         $("#upload_input").html(`<div class="card-header header-sm d-flex justify-content-between align-items-center" style="width: 100%;"><input value="${file.name}" type="text" id="file-uploaded" disabled></input> 🔒</div>`);
         if (type === "import") {
-            document.getElementById("lower_half").style.visibility = "visible";
+            document.getElementById("lower_half").classList.remove("d-none");
             document.getElementById("lower_half").hidden = false;
         } else if (type === "background") {
             setTimeout(function () {
diff --git a/app/frontend/templates/panel/contribute.html b/app/frontend/templates/panel/contribute.html
index 1845d41d..3fd3f099 100644
--- a/app/frontend/templates/panel/contribute.html
+++ b/app/frontend/templates/panel/contribute.html
@@ -61,7 +61,7 @@
             </p>
             <br />
             <div class="text-center">
-              <iframe id='kofiframe' src='https://ko-fi.com/arcadiatech/?hidefeed=true&widget=true&embed=true&preview=true' class="w-100" style='border:none;width:100%;padding:4px;background:#1d1d2f;' height='650' title='arcadiatech'></iframe>
+              <iframe id='kofiframe' src='https://ko-fi.com/arcadiatech/?hidefeed=true&widget=true&embed=true&preview=true' class="w-100 border-0" style='border:none;width:100%;padding:4px;background:#1d1d2f;' height='650' title='arcadiatech'></iframe>
             </div>
           </div>
 
diff --git a/app/frontend/templates/panel/custom_login.html b/app/frontend/templates/panel/custom_login.html
index 1784fe42..cd105cd8 100644
--- a/app/frontend/templates/panel/custom_login.html
+++ b/app/frontend/templates/panel/custom_login.html
@@ -91,7 +91,7 @@
                           </div>
                           <div id="photo_loading" class="form-group" hidden>
                             <div class="progress">
-                              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div>
+                              <div class="progress-bar progress-bar-striped progress-bar-animated w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">&nbsp;<i class="fa-solid fa-spinner"></i></div>
                             </div>
                           </div>
                           <div class="form-group row">
diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index f6954b4c..6a8d98aa 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -815,7 +815,7 @@
         for (i = 0; i < hostStats.disk_usage.length; i++) {
           if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) {
             storage_html += `<div id="host_storage" class="col-xl-3 col-lg-3 col-md-4 col-12">
-                        <h4 class="mb-0 font-weight-semibold d-inline-block text-truncate storage-heading" id="title_host_storage" data-toggle="tooltip" data-placement="bottom" title="${hostStats.disk_usage[i].mount}" style="max-width: 100%;"><i class="fas fa-hdd"></i> ${hostStats.disk_usage[i].mount}</h4>
+                        <h4 class="mb-0 font-weight-semibold d-inline-block text-truncate storage-heading mw-100" id="title_host_storage" data-toggle="tooltip" data-placement="bottom" title="${hostStats.disk_usage[i].mount}"><i class="fas fa-hdd"></i> ${hostStats.disk_usage[i].mount}</h4>
                         <div class="progress d-inline-block disk-usage">
                           <div class="progress-bar`;
             if (hostStats.disk_usage[i].percent_used <= 58) {
diff --git a/app/frontend/templates/panel/server_backup.html b/app/frontend/templates/panel/server_backup.html
index 3af48d74..599f26d4 100644
--- a/app/frontend/templates/panel/server_backup.html
+++ b/app/frontend/templates/panel/server_backup.html
@@ -53,7 +53,7 @@
                 </div>
                 <div class="card-body">
                   {% if len(data['backups']) == 0 %}
-                  <div style="text-align: center; color: grey;">
+                  <div class="text-align-center text-secondary">
                     <h7>{{ translate('serverBackups', 'no-backup', data['lang']) }}.</h7>
                   </div>
                   {% end %}
diff --git a/app/frontend/templates/panel/server_config.html b/app/frontend/templates/panel/server_config.html
index 15bef6d0..a09f0035 100644
--- a/app/frontend/templates/panel/server_config.html
+++ b/app/frontend/templates/panel/server_config.html
@@ -56,7 +56,7 @@
                   <label for="server_path">{{ translate('serverConfig', 'serverPath', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPathDesc', data['lang']) }}</small>
                   </label>
                   <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                    <span style="color: var(--gray);   font-size: .9vw;">{{ data['server_stats']['server_id']['path'] }}</span>
+                    <span class="text-secondary" style="font-size: .9vw;">{{ data['server_stats']['server_id']['path'] }}</span>
                     🔒
                   </div>
 
@@ -100,7 +100,7 @@
                 {% else %}
                 <label for="execution_command">{{ translate('serverConfig', 'serverExecutionCommand', data['lang']) }}
                   <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                    <span style="color: var(--gray); font-size: .9vw;">{{ data['server_stats']['server_id']['execution_command'] }}</span> 🔒
+                    <span class="text-secondary" style="font-size: .9vw;">{{ data['server_stats']['server_id']['execution_command'] }}</span> 🔒
                   </div>
                   <br>
                   {% end %}
diff --git a/app/frontend/templates/panel/server_schedules.html b/app/frontend/templates/panel/server_schedules.html
index 3b3204e5..9d61ca74 100644
--- a/app/frontend/templates/panel/server_schedules.html
+++ b/app/frontend/templates/panel/server_schedules.html
@@ -41,7 +41,7 @@
           </span>
 
           <div class="row">
-            <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
+            <div class="col-md-12 col-sm-12 overflow-x-auto">
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
                   <h4 class="card-title"><i class="fas fa-calendar"></i> {{ translate('serverSchedules',
@@ -53,7 +53,7 @@
                 </div>
                 <div class="card-body">
                   {% if len(data['schedules']) == 0 %}
-                  <div style="text-align: center; color: grey;">
+                  <div class="text-align-center text-secondary">
                     <h7>{{ translate('serverSchedules', 'no-schedule', data['lang']) }} <strong>{{ translate('serverSchedules', 'newSchedule',data['lang']) }}</strong>.</h7>
                   </div>
                   {% end %}
@@ -92,7 +92,7 @@
                           <td id="{{schedule.action}}">
                             <p>{{schedule.action}}</p>
                           </td>
-                          <td id="{{schedule.command}}" style="overflow: scroll; max-width: 30px;">
+                          <td id="{{schedule.command}}" class="overflow-scroll" style="max-width: 30px;">
                             <p class="no-scroll">{{schedule.command}}</p>
                           </td>
                           <td id="{{schedule.interval}}">
@@ -142,8 +142,8 @@
                           <td id="{{schedule.action}}" class="action">
                             <p>{{schedule.action}}</p>
                           </td>
-                          <td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
-                            <p style="overflow: scroll;">{{schedule.command}}</p>
+                          <td id="{{schedule.command}}" class="action overflow-scroll" style="max-width: 30px;">
+                            <p class="overflow-scroll;">{{schedule.command}}</p>
                           </td>
                           <td id="{{schedule.enabled}}" class="enabled">
                             <button type="button" class="btn btn-sm btn-info btn-toggle schedule-custom-toggle" id="schedule{{schedule.id}}" name="schedule{{schedule.id}}" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
@@ -163,43 +163,42 @@
                                 </button>
                               </div>
                               <div class="modal-body">
-                                <ul style="list-style: none;">
-                                  <li id="{{schedule.schedule_id}}" class="id" style="border-top: .1em solid gray;">
+                                <ul class="list-group">
+                                  <li id="{{schedule.schedule_id}}" class="id list-group-item">
                                     <h4>{{ translate('serverSchedules', 'name', data['lang']) }}</h4>
-                                    <p>{{schedule.schedule_id}}</p>
+                                    <p class="mb-0">{{schedule.schedule_id}}</p>
                                   </li>
-                                  <li id="{{schedule.action}}" class="action" style="border-top: .1em solid gray;">
+                                  <li id="{{schedule.action}}" class="action list-group-item">
                                     <h4>{{ translate('serverSchedules', 'action', data['lang']) }}</h4>
-                                    <p>{{schedule.action}}</p>
+                                    <p class="mb-0">{{schedule.action}}</p>
                                   </li>
-                                  <li id="{{schedule.command}}" class="action" style="border-top: .1em solid gray;">
+                                  <li id="{{schedule.command}}" class="action list-group-item">
                                     <h4>{{ translate('serverSchedules', 'command', data['lang']) }}</h4>
-                                    <p>{{schedule.command}}</p>
+                                    <p class="mb-0">{{schedule.command}}</p>
                                   </li>
-                                  <li id="{{schedule.interval}}" class="action" style="border-top: .1em solid gray;">
+                                  <li id="{{schedule.interval}}" class="action list-group-item">
                                     {% if schedule.interval != '' %}
                                     <h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
-                                    <p>{{ translate('serverSchedules', 'every', data['lang']) }} {{schedule.interval}}
+                                    <p class="mb-0">{{ translate('serverSchedules', 'every', data['lang']) }} {{schedule.interval}}
                                       {{schedule.interval_type}}</p>
                                     {% elif schedule.interval_type == 'reaction' %}
                                     <h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
-                                    <p>{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child',
+                                    <p class="mb-0">{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child',
                                       data['lang']) }}: {{ schedule.parent }}</p>
                                     {% else %}
                                     <h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
-                                    <p>{{ translate('serverSchedules', 'cron', data['lang']) }}: {{schedule.cron_string}}
-                                    </p>
+                                    <p class="mb-0">{{ translate('serverSchedules', 'cron', data['lang']) }}: {{schedule.cron_string}}</p>
                                     {% end %}
                                   </li>
-                                  <li id="{{schedule.start_time}}" class="action" style="border-top: .1em solid gray;">
+                                  <li id="{{schedule.start_time}}" class="action list-group-item">
                                     <h4>{{ translate('serverSchedules', 'nextRun', data['lang']) }}</h4>
                                     {% if schedule.next_run %}
-                                    <p>{{schedule.next_run}}</p>
+                                    <p class="mb-0">{{schedule.next_run}}</p>
                                     {% else %}
-                                    <p>zzzzzzz</p>
+                                    <p class="mb-0">zzzzzzz</p>
                                     {% end %}
                                   </li>
-                                  <li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
+                                  <li id="{{schedule.enabled}}" class="action list-group-item">
                                     <h4>{{ translate('serverSchedules', 'enabled', data['lang']) }}</h4>
                                     <input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
                                   </li>
diff --git a/app/frontend/templates/panel/server_webhooks.html b/app/frontend/templates/panel/server_webhooks.html
index e382b753..a0cb49c9 100644
--- a/app/frontend/templates/panel/server_webhooks.html
+++ b/app/frontend/templates/panel/server_webhooks.html
@@ -41,7 +41,7 @@
           </span>
 
           <div class="row">
-            <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
+            <div class="col-md-12 col-sm-12 overflow-x-auto">
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
                   <h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('webhooks', 'webhooks', data['lang']) }} </h4>
@@ -82,7 +82,7 @@
                           <td id="{{webhook.webhook_type}}" class="type">
                             <p>{{webhook.webhook_type}}</p>
                           </td>
-                          <td id="{{webhook.trigger}}" class="trigger" style="overflow: scroll; max-width: 30px;">
+                          <td id="{{webhook.trigger}}" class="trigger overflow-scroll" style="max-width: 30px;">
                             <ul>
                               {% for trigger in webhook.trigger.split(",") %}
                               {% if trigger in data["triggers"] %}
diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index a7332ad3..2e6c851c 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -247,7 +247,7 @@
                 </div>
               </div>
             </div>
-            <div id="lower_half" style="visibility: hidden;">
+            <div id="lower_half" class="d-none" hidden>
               <div class="form-group">
                 <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                     translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index 44d9f82f..922868d3 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -421,7 +421,7 @@
               </div>
             </div>
 
-            <div id="lower_half" class="d-none" style="visibility: hidden;" hidden>
+            <div id="lower_half" class="d-none" hidden>
               <div class="form-group">
                 <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                     translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>