diff --git a/app/frontend/static/assets/css/crafty.css b/app/frontend/static/assets/css/crafty.css
index 7f2f973a..ad373446 100644
--- a/app/frontend/static/assets/css/crafty.css
+++ b/app/frontend/static/assets/css/crafty.css
@@ -11,6 +11,27 @@ body.sidebar-icon-only .navbar-toggler .mdi-chevron-double-left {
 
 /**************************************************************/
 
+/**************************************************************/
+/* CSS as bootstrap extensions */
+/**************************************************************/
+.overflow-x-auto {
+    overflow-x: auto;
+}
+
+.overflow-y-auto {
+    overflow-y: auto;
+}
+
+.overflow-scroll {
+    overflow: scroll;
+}
+
+.text-none {
+    text-transform: none;
+}
+
+/**************************************************************/
+
 /**************************************************************/
 /* CSS for MainMenu in partials/_sidebar.html */
 /**************************************************************/
@@ -226,6 +247,12 @@ body {
     color: var(--red) !important;
 }
 
+/* Useless ?
+.input_motd {
+    max-width: 10px;
+    max-height: 10px;
+}*/
+
 /**************************************************************/
 
 /**************************************************************/
diff --git a/app/frontend/static/assets/css/partial/crafty-wizard.css b/app/frontend/static/assets/css/partial/crafty-wizard.css
new file mode 100644
index 00000000..7cc69c1c
--- /dev/null
+++ b/app/frontend/static/assets/css/partial/crafty-wizard.css
@@ -0,0 +1,191 @@
+#creation_wizard {
+    -webkit-filter: grayscale(1);
+}
+
+.api-alert {
+    position: absolute;
+    top: -5px;
+    left: 0;
+    font-size: 50px !important;
+    color: #fff;
+    background: rgb(0, 170, 170);
+    opacity: .4;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+.api-alert p {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    font-size: 20px;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+button>i.refresh-class {
+    margin: 0px;
+}
+
+.refresh-class:hover {
+    cursor: grab;
+}
+
+.scroll {
+    max-height: 12em;
+    overflow-y: auto;
+}
+
+.menu-btn {
+    font-size: 0.9em;
+    padding: 2px 10px;
+}
+
+.menu {
+    padding-top: 10px;
+    z-index: 200;
+    margin-top: 4px;
+    position: absolute;
+    background-color: var(--card-banner-bg);
+}
+
+.menu-option {
+    padding: 6px 20px 6px;
+    color: white;
+}
+
+#overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+/* Remove default bullets */
+.tree-view,
+.tree-nested {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+}
+
+/* Style the items */
+.tree-item,
+.files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.tree-caret .fa-folder {
+    display: inline-block;
+}
+
+.tree-caret .fa-folder-open {
+    display: none;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.tree-caret-down .fa-folder {
+    display: none;
+}
+
+.tree-caret-down .fa-folder-open {
+    display: inline-block;
+}
+
+/* Hide the nested list */
+.tree-nested {
+    display: none;
+}
+
+#op_logo {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.scroll {
+    max-height: 12em;
+    overflow-y: auto;
+}
+
+.menu-btn {
+    font-size: 0.9em;
+    padding: 2px 10px;
+}
+
+.menu {
+    padding-top: 10px;
+    z-index: 200;
+    margin-top: 4px;
+    position: absolute;
+    background-color: #2a2c44;
+}
+
+.menu-option {
+    padding: 6px 20px 6px;
+    color: white;
+}
+
+#overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+/* Remove default bullets */
+.tree-view,
+.tree-nested {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+}
+
+/* Style the items */
+.tree-item,
+.files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.tree-caret .fa-folder {
+    display: inline-block;
+}
+
+.tree-caret .fa-folder-open {
+    display: none;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.tree-caret-down .fa-folder {
+    display: none;
+}
+
+.tree-caret-down .fa-folder-open {
+    display: inline-block;
+}
+
+/* Hide the nested list */
+.tree-nested {
+    display: none;
+}
+
+#op_logo {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
\ No newline at end of file
diff --git a/app/frontend/templates/panel/credits.html b/app/frontend/templates/panel/credits.html
index 9db28002..52c36029 100644
--- a/app/frontend/templates/panel/credits.html
+++ b/app/frontend/templates/panel/credits.html
@@ -36,7 +36,6 @@
 
             <div class="row">
               <div class="col-md-4" style="max-width: fit-content;">
-
                 <div class="user-avatar mb-auto">
                   {% if person['pic'] %}
                   <img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle">
diff --git a/app/frontend/templates/panel/custom_login.html b/app/frontend/templates/panel/custom_login.html
index 3f25f181..1784fe42 100644
--- a/app/frontend/templates/panel/custom_login.html
+++ b/app/frontend/templates/panel/custom_login.html
@@ -102,7 +102,7 @@
                               <input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity" onchange="previewOpacity()" min="0" max="100" value="{{ data['login_opacity'] }}">
                             </div>
                           </div>
-                          <div id="login_preview" style="position: relative;">
+                          <div id="login_preview" class="position-relative">
                             <img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}" class="img-fluid" alt="Responsive image">
                             <div id="login-form-preview">
                               <div id="login-form-background" class="auto-form-wrapper login-modal">
diff --git a/app/frontend/templates/panel/loading.html b/app/frontend/templates/panel/loading.html
index 68648353..bc8ceb04 100644
--- a/app/frontend/templates/panel/loading.html
+++ b/app/frontend/templates/panel/loading.html
@@ -7,9 +7,9 @@
 
 {% block content %}
 <div class="content-wrapper">
-    <div class="card-header justify-content-between align-items-center" style="border: none;">
+    <div class="card-header justify-content-between align-items-center border-0">
         <div id="image-div" class="w-100">
-            <img class="img-center" id="logo-animate" src="../static/assets/images/crafty-logo-square-1024.png" alt="Crafty Logo, Crafty is loading" width="20%" style="clear: both;">
+            <img class="img-center clearfix" id="logo-animate" src="../static/assets/images/crafty-logo-square-1024.png" alt="Crafty Logo, Crafty is loading" width="20%">
         </div>
         <br>
         </br>
diff --git a/app/frontend/templates/panel/parts/details_stats.html b/app/frontend/templates/panel/parts/details_stats.html
index 3e02d85d..dae99497 100644
--- a/app/frontend/templates/panel/parts/details_stats.html
+++ b/app/frontend/templates/panel/parts/details_stats.html
@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-body pt-3 pb-3">
         <div class="row">
-          <div class="col-sm-4 mr-2">
+          <div class="col-sm-4">
             {% if data['server_stats']['running'] %}
             <b>{{ translate('serverStats', 'serverStatus', data['lang']) }}:</b> <span id="status" class="text-success">{{ translate('serverStats', 'online', data['lang']) }}</span><br />
             <b>{{ translate('serverStats', 'serverStarted', data['lang']) }}:</b> <span id="started">{{ data['server_stats']['started'] }}</span><br />
@@ -21,7 +21,7 @@
             <b>{{ translate('serverStats', 'serverTimeZone', data['lang']) }}:</b> <span class="text-info">{{ data['serverTZ'] }}</span>
           </div>
 
-          <div class="col-sm-3 mr-2">
+          <div class="col-sm-3">
             <b>{{ translate('serverStats', 'cpuUsage', data['lang']) }}:</b> <span id="cpu">{{ data['server_stats']['cpu'] }}%</span> <br />
             <b>{{ translate('serverStats', 'memUsage', data['lang']) }}:</b> <span id="mem">{{ data['server_stats']['mem'] }}</span> <br />
             {% if data['server_stats']['int_ping_results'] %}
@@ -31,14 +31,14 @@
             {% end %}
           </div>
 
-          <div class="col-sm-3 mr-2">
+          <div class="col-sm-5">
             {% if data['server_stats']['version'] != 'False' %}
             <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ data['server_stats']['version'] }}</span><br />
-            <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" style="max-width: 10px; max-height: 10px" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span>
+            <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span>
             <br />
             {% else %}
             <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br />
-            <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span style="max-width: 10px; max-height: 10px" id="input_motd" class="input_motd">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br />
+            <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" class="input_motd">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br />
             {% end %}
             <b>Server Type: <span class="text-info">{{data['server_stats']['server_type']}}</span></b>
 
diff --git a/app/frontend/templates/public/status.html b/app/frontend/templates/public/status.html
index 8a26250a..c7e98e60 100644
--- a/app/frontend/templates/public/status.html
+++ b/app/frontend/templates/public/status.html
@@ -16,7 +16,11 @@
 </style>
 <div class="row justify-content-center">
   <div class="content-wrapper col-md login-modal d-none d-sm-block bg-dropdown">
-    <img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'>
+    <div class="row text-center">
+      <div class="col-12">
+        <img src="/static/assets/images/logo_long.png" class="w-25">
+      </div>
+    </div>
     <hr />
     <div class="table-responsive">
       <table class="table table-hover">
@@ -32,7 +36,7 @@
         <tbody>
           {% for server in data['servers'] %}
           {% if server['server_data']['show_status'] %}
-          <tr>
+          <tr class="h-">
             <td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
               <i class="fas fa-server"></i>
               {{ server['server_data']['server_name'] }}
@@ -85,13 +89,12 @@
         </tbody>
       </table>
     </div>
-    <hr />
   </div>
 </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 bg-dropdown">
-    <img src="/static/assets/images/logo_long.png" style='width: 100%;'>
+    <img src="/static/assets/images/logo_long.png" class="w-100">
     <hr />
     <div class="accordion" id="accordionServers">
       {% for server in data['servers'] %}
@@ -207,10 +210,10 @@
           m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `;
         }
 
-        desc_motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`;
-        m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span></div>`;
+        desc_motd = `<span id="input_motd_` + server.id + `" class="input_motd align-middle">` + server.desc + `</span> <br />`;
+        m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd align-middle">` + server.desc + `</span></div>`;
 
-        motd = `<div class="row"><div class="col-auto">` + img_motd + `</div><div class="col-auto">` + desc_motd + `</div></div>`;
+        motd = `<div class="row"><div class="col-auto">` + img_motd + `</div><div class="col-auto text-left align-items-center align-content-center">` + desc_motd + `</div></div>`;
         server_motd.innerHTML = motd;
         m_server_motd.innerHTML = m_motd;
       }
diff --git a/app/frontend/templates/public_base.html b/app/frontend/templates/public_base.html
index 9158f70e..38efe7e5 100644
--- a/app/frontend/templates/public_base.html
+++ b/app/frontend/templates/public_base.html
@@ -38,7 +38,7 @@
     <div class="container-fluid page-body-wrapper full-page-wrapper">
       <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 class="auto-form-wrapper h-100">{% block content %} {% end %}</div>
         </div>
       </div>
       <!-- content-wrapper ends -->
diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index 7c4789f7..b0997724 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -57,26 +57,17 @@
                 {% end %}
                 <div class="form-group">
                   <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_name" name="name"
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                  <input type="text" class="form-control" id="server_name" name="name" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                 </div>
 
                 <div class="form-group">
-                  <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
-                    }}
-                    <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                      data['lang']) }}</small>
+                  <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) }}
+                    <small class="text-none"> - {{ translate('serverWizard', 'autoCreate', data['lang']) }}</small>
                   </p>
-                  <select data-container="body"
-                    data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                    data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                    class="selectpicker form-control form-control-lg select-css roles_select"
-                    data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
-                    multiple>
+                  <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                     {% for r in data['roles'] %}
                     <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
-                      &nbsp; {{ r['role_name'].capitalize()
-                      }}
+                      &nbsp; {{ r['role_name'].capitalize() }}
                     </option>
                     {% end %}
                   </select>
@@ -89,17 +80,13 @@
               </fieldset>
               {% if not data["server_api"] and data["online"] %}
               <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
-                <p style="color: white !important;"><i class="fas fa-exclamation-triangle"
-                    style="color: red;"></i>&nbsp;{{ translate('error', 'bedrockError', data['lang']) }}<a
-                    style="color: red;" ; href="https://status.craftycontrol.com/status/craftycontrol" target="_blank"
-                    rel="noopener noreferrer">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
+                <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: red;"></i>&nbsp;{{ translate('error', 'bedrockError', data['lang']) }}<a style="color: red;" ; href="https://status.craftycontrol.com/status/craftycontrol" target="_blank" rel="noopener noreferrer">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
                   &nbsp;{{ translate('error', 'serverJars2', data['lang']) }}</p>
               </div>
               {% end %}
               {% if not data["online"] %}
               <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
-                <p style="color: white !important;"><i class="fas fa-exclamation-triangle"
-                    style="color: red;"></i>&nbsp;{{ translate('error', 'noInternet', data['lang']) }}</p>
+                <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: red;"></i>&nbsp;{{ translate('error', 'noInternet', data['lang']) }}</p>
               </div>
               {% end %}
         </div>
@@ -116,43 +103,34 @@
           <form method="post" id="import-jar" class="server-wizard">
             <div class="form-group">
               <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_name" name="name" value=""
-                placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
             </div>
             <div class="form-group">
               <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
                   translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-              <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server"
-                required>
+              <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" required>
             </div>
             <div class="form-group">
               <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                placeholder="bedrock_server" required>
+              <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
             </div>
             <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                 data['lang']) }}</small></h4>
             <hr>
             <div class="form-group">
               <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }}
                 <small></small></label>
-              <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1"
-                max="65535" required>
+              <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1" max="65535" required>
             </div>
 
             <div class="form-group">
               <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
                 }}
-                <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                   data['lang']) }}</small>
               </p>
-              <select data-container="body"
-                data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control"
-                data-style="form-control" data-live-search="true" name="server_roles" multiple>
+              <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                 {% for r in data['roles'] %}
                 <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                   &nbsp; {{ r['role_name'].capitalize()
@@ -180,15 +158,13 @@
 
             <div class="form-group">
               <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_name" name="name" value=""
-                placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
             </div>
 
             <div class="form-group">
               <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
                   translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
-              <input type="text" class="form-control" id="zip_server_path" name="server_path"
-                placeholder="/var/opt/server.zip" required>
+              <input type="text" class="form-control" id="zip_server_path" name="server_path" placeholder="/var/opt/server.zip" required>
             </div>
 
             <div class="form-group">
@@ -200,32 +176,25 @@
             </div>
             <div class="form-group">
               <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                placeholder="bedrock_server" required>
+              <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
             </div>
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang'])
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang'])
                 }}</small>
             </h4>
             <hr>
             <div class="form-group">
               <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }}
                 <small></small></label>
-              <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1"
-                max="65535" required>
+              <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1" max="65535" required>
             </div>
 
             <div class="form-group">
               <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
                 }}
-                <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                   data['lang']) }}</small>
               </p>
-              <select data-container="body"
-                data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control"
-                data-style="form-control" data-live-search="true" name="server_roles" multiple>
+              <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                 {% for r in data['roles'] %}
                 <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                   &nbsp; {{ r['role_name'].capitalize()
@@ -234,8 +203,7 @@
                 {% end %}
               </select>
             </div>
-            <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
-              aria-hidden="true">
+            <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
               <div class="modal-dialog" role="document">
                 <div class="modal-content">
                   <div class="modal-header">
@@ -246,8 +214,7 @@
                     </button>
                   </div>
                   <div class="modal-body">
-                    <div class="tree-ctx-item" id="main-tree-div" data-path=""
-                      style="overflow: scroll; max-height:75%;">
+                    <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div" data-path="">
                       <input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked>
                       <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                         <i class="far fa-folder"></i>
@@ -266,8 +233,7 @@
                 </div>
               </div>
             </div>
-            <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
-              class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+            <button id="zip_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
               }}</button>
             <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
               data['lang'])
@@ -288,8 +254,7 @@
 
             <div class="form-group">
               <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_name" name="name" value=""
-                placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
             </div>
 
             <div class="form-group">
@@ -301,8 +266,7 @@
                     'labelZipFile', data['lang']) }}</label>
                 </div>
                 <div class="input-group-append">
-                  <button type="button" class="btn btn-info upload-button" id="upload-button"
-                    onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
+                  <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
                     'uploadButton', data['lang']) }}</button>
                 </div>
               </div>
@@ -319,34 +283,26 @@
 
               <div class="form-group">
                 <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                  placeholder="paper.jar" required>
+                <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
               </div>
 
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                  style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
 
               <div class="form-group">
                 <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                     translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                <input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1"
-                  max="65535" required>
+                <input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1" max="65535" required>
               </div>
 
               <div class="form-group">
                 <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
                   }}
-                  <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                  <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                     data['lang']) }}</small>
                 </p>
-                <select data-container="body"
-                  data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                  data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                  class="selectpicker form-control form-control-lg select-css roles_select"
-                  data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
-                  multiple>
+                <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                   {% for r in data['roles'] %}
                   <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                     &nbsp; {{ r['role_name'].capitalize()
@@ -355,8 +311,7 @@
                   {% end %}
                 </select>
               </div>
-              <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
-                aria-hidden="true">
+              <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
@@ -367,10 +322,8 @@
                       </button>
                     </div>
                     <div class="modal-body">
-                      <div class="tree-ctx-item" id="main-tree-div-upload" data-path=""
-                        style="overflow: scroll; max-height:75%;">
-                        <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value=""
-                          checked>
+                      <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div-upload" data-path="">
+                        <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked>
                         <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                           <i class="far fa-folder"></i>
                           <i class="far fa-folder-open"></i>
@@ -388,8 +341,7 @@
                   </div>
                 </div>
               </div>
-              <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
-                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+              <button id="upload_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
                 }}</button>
               <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
                 data['lang'])
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index ac722739..f35d4da8 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -31,35 +31,6 @@
             <fieldset>
               {% else %}
               <fieldset disabled="disabled">
-                <style>
-                  #creation_wizard {
-                    -webkit-filter: grayscale(1);
-                  }
-
-                  .api-alert {
-                    position: absolute;
-                    top: -5px;
-                    left: 0;
-                    font-size: 50px !important;
-                    color: #fff;
-                    background: rgb(0, 170, 170);
-                    opacity: .4;
-                    width: 100%;
-                    height: 100%;
-                    z-index: 100;
-                  }
-
-                  .api-alert p {
-                    margin: 0;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    text-align: center;
-                    font-size: 20px;
-                    -ms-transform: translate(-50%, -50%);
-                    transform: translate(-50%, -50%);
-                  }
-                </style>
                 {% end %}
                 {% raw xsrf_form_html() %}
                 <div class="row">
@@ -113,7 +84,7 @@
 
                 </div>
                 <br />
-                <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small></h4>
+                <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small></h4>
                 <hr>
                 <div class="row">
 
@@ -144,14 +115,9 @@
                     <div class="form-group">
                       <label for="Role-1"> {{ translate('serverWizard', 'addRole', data['lang'])
                         }}
-                        <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                        <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                           data['lang']) }}</small></label>
-                      <select data-container="body"
-                              data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                              data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                              class="selectpicker form-control form-control-lg select-css roles_select"
-                              data-styleBase="form-control" data-style="form-control" data-live-search="true"
-                              name="server_roles" multiple>
+                      <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                         {% for r in data['roles'] %}
                         <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                           &nbsp; {{ r['role_name'].capitalize()
@@ -229,7 +195,7 @@
 
             </div>
             <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                 data['lang']) }}</small></h4>
             <hr>
             <div class="row">
@@ -261,14 +227,9 @@
                 <div class="form-group">
                   <label for="Role-2"> {{ translate('serverWizard', 'addRole', data['lang'])
                     }}
-                    <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                    <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                       data['lang']) }}</small></label>
-                  <select data-container="body"
-                          data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                          data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                          class="selectpicker form-control form-control-lg select-css roles_select"
-                          data-styleBase="form-control" data-style="form-control" data-live-search="true"
-                          name="server_roles" multiple>
+                  <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                     {% for r in data['roles'] %}
                     <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                       &nbsp; {{ r['role_name'].capitalize()
@@ -343,7 +304,7 @@
 
 
             <div class="col-sm-12">
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
               <div class="row">
@@ -375,14 +336,9 @@
                   <div class="form-group">
                     <label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang'])
                       }}
-                      <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                      <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                         data['lang']) }}</small></label>
-                    <select data-container="body"
-                            data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                            data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                            class="selectpicker form-control form-control-lg select-css roles_select"
-                            data-styleBase="form-control" data-style="form-control" data-live-search="true"
-                            name="server_roles" multiple>
+                    <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                       {% for r in data['roles'] %}
                       <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                         &nbsp; {{ r['role_name'].capitalize()
@@ -403,7 +359,7 @@
                         </button>
                       </div>
                       <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path="" style="overflow: scroll; max-height:75%;">
+                        <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div" data-path="">
                           <input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked>
                           <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                             <i class="far fa-folder"></i>
@@ -466,7 +422,7 @@
               </div>
             </div>
 
-            <div id="lower_half" style="visibility: hidden;" hidden>
+            <div id="lower_half" class="d-none" style="visibility: hidden;" hidden>
               <div class="form-group">
                 <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                     translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
@@ -480,7 +436,7 @@
                 <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
               </div>
 
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
 
@@ -505,14 +461,9 @@
               <div class="form-group">
                 <label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang'])
                   }}
-                  <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                  <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                     data['lang']) }}</small></label>
-                <select data-container="body"
-                        data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
-                        data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
-                        class="selectpicker form-control form-control-lg select-css roles_select"
-                        data-styleBase="form-control" data-style="form-control" data-live-search="true"
-                        name="server_roles" multiple>
+                <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
                   {% for r in data['roles'] %}
                   <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                     &nbsp; {{ r['role_name'].capitalize()
@@ -532,7 +483,7 @@
                       </button>
                     </div>
                     <div class="modal-body">
-                      <div class="tree-ctx-item" id="main-tree-div-upload" data-path="" style="overflow: scroll; max-height:75%;">
+                      <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div-upload" data-path="">
                         <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked>
                         <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                           <i class="far fa-folder"></i>
@@ -564,177 +515,7 @@
     </div>
   </div>
 </div>
-<style>
-  button>i.refresh-class {
-    margin: 0px;
-  }
-</style>
-
-<style>
-  .refresh-class:hover {
-    cursor: grab;
-  }
-
-  .scroll {
-    max-height: 12em;
-    overflow-y: auto;
-  }
-
-  .menu-btn {
-    font-size: 0.9em;
-    padding: 2px 10px;
-  }
-
-  .menu {
-    padding-top: 10px;
-    z-index: 200;
-    margin-top: 4px;
-    position: absolute;
-    background-color: var(--card-banner-bg);
-  }
-
-  .menu-option {
-    padding: 6px 20px 6px;
-    color: white;
-  }
-
-  #overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-</style>
-<style>
-  /* Remove default bullets */
-  .tree-view,
-  .tree-nested {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 10px;
-  }
-
-  /* Style the items */
-  .tree-item,
-  .files-tree-title {
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-  }
-
-  /* Create the caret/arrow with a unicode, and style it */
-  .tree-caret .fa-folder {
-    display: inline-block;
-  }
-
-  .tree-caret .fa-folder-open {
-    display: none;
-  }
-
-  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-  .tree-caret-down .fa-folder {
-    display: none;
-  }
-
-  .tree-caret-down .fa-folder-open {
-    display: inline-block;
-  }
-
-  /* Hide the nested list */
-  .tree-nested {
-    display: none;
-  }
-
-  #op_logo {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-</style>
-<style>
-  .scroll {
-    max - height: 12em;
-    overflow - y: auto;
-  }
-
-  .menu - btn {
-    font - size: 0.9em;
-    padding: 2px 10px;
-  }
-
-  .menu {
-    padding - top: 10px;
-    z - index: 200;
-    margin - top: 4px;
-    position: absolute;
-    background - color: #2a2c44;
-  }
-
-  .menu - option {
-    padding: 6px 20px 6px;
-    color: white;
-  }
-
-  #overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100 %;
-    height: 100 %;
-    z - index: 100;
-  }
-</style>
-<style>
-  /* Remove default bullets */
-  .tree-view,
-  .tree-nested {
-    list - style - type: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 10px;
-  }
-
-  /* Style the items */
-  .tree-item,
-  .files-tree-title {
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-  }
-
-  /* Create the caret/arrow with a unicode, and style it */
-  .tree-caret .fa-folder {
-    display: inline-block;
-  }
-
-  .tree-caret .fa-folder-open {
-    display: none;
-  }
-
-  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-  .tree-caret-down .fa-folder {
-    display: none;
-  }
-
-  .tree-caret-down .fa-folder-open {
-    display: inline-block;
-  }
-
-  /* Hide the nested list */
-  .tree-nested {
-    display: none;
-  }
-
-  #op_logo {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-</style>
-</style>
+<style rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css"></style>
 
 {% end %}