diff --git a/app/frontend/templates/panel/parts/big_bucket_wiz.html b/app/frontend/templates/panel/parts/big_bucket_wiz.html
new file mode 100644
index 00000000..d62ce5fe
--- /dev/null
+++ b/app/frontend/templates/panel/parts/big_bucket_wiz.html
@@ -0,0 +1,154 @@
+<div class="col-sm-12">
+    <div class="form-group">
+        <label for="server_jar">{{ translate('serverWizard', 'serverType', data['lang']) }}</label>
+        <div class="input-group">
+            <select required class="form-control form-control-lg select-css" id="server_jar" name="type"
+                onchange="serverJarChange(this)">
+                <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
+                {% for s in data['server_types'] %}
+                {% if data['server_types'][s].get("enabled", False) %}
+                <option value="{{ s }}">{{ data["server_types"][s].get("friendly_name", s).capitalize() }}
+                    {% end %}
+                </option>
+                {% end %}
+            </select>
+            {% if data['super_user'] %}
+            <div class="input-group-append">
+                <button class="btn custom-picker" type="button" onclick="refreshCache()"><i id="refresh-cache"
+                        class="refresh-class fas fa-sync"></i></button>
+            </div>
+            {% end %}
+        </div>
+    </div>
+</div>
+
+<div class="col-sm-12">
+    <div class="form-group">
+        <label for="server_type">{{ translate('serverWizard', 'serverSelect', data['lang']) }}</label>
+        <select required class="form-control form-control-lg select-css" id="server_type" name="type"
+            onchange="serverTypeChange(this)">
+            <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
+        </select>
+    </div>
+</div>
+
+<div class="col-sm-12">
+    <div class="form-group">
+        <label for="server_version">{{ translate('serverWizard', 'serverVersion', data['lang']) }}</label>
+        <select required class="form-control form-control-lg select-css" id="server" name="version">
+            <option value="">{{ translate('serverWizard', 'selectVersion', data['lang']) }}</option>
+        </select>
+    </div>
+</div>
+<span data-html="true" class="version-hint text-center"
+    data-content="⚠️ {{ translate('serverWizard', 'unsupported', data['lang']) }} ⚠️" , data-placement="right"></span>
+
+<script type="text/javascript">
+    const text = '{% raw data["js_server_types"] %}';
+    const serverTypesLists = JSON.parse(text);
+    /* CountryChange() is called from the onchange event of a select element.
+    * param selectObj - the select object which fired the on change event.
+    */
+    function serverTypeChange(selectObj) {
+        // get the index of the selected option
+        let idx = document.getElementById('server_type').value;
+        let idx_list = idx.split("|");
+        // get the value of the selected option
+        let cSelect = document.getElementById("server");
+        let which = {};
+        try {
+            versions = Object.keys(serverTypesLists[idx_list[0]]["types"][idx_list[1]]["versions"]);
+        } catch {
+            while (cSelect.options.length > 0) {
+                cSelect.remove(0);
+            }
+            return;
+        }
+
+        $("#server option").each(function () {
+            $(this).remove()
+        })
+
+        // create new options ordered by ascending
+        versions.forEach(type => {
+            newOption = document.createElement("option");
+            newOption.value = idx + "|" + type;  // assumes option string and value are the same
+            newOption.text = type;
+            // add the new option
+            try {
+                cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
+            }
+            catch (e) {
+                cSelect.appendChild(newOption);
+            }
+        })
+    }
+
+    $("#server").change(function () {
+        let selected_version = $("#server :selected").text().split(".");
+        if (parseInt(selected_version[0]) === 1 && parseInt(selected_version[1]) < 8) {
+            $('[data-toggle="popover"]').popover();
+            if ($(window).width() < 1000) {
+                $('.version-hint').attr("data-placement", "top")
+            } else {
+                $('.version-hint').attr("data-placement", "right")
+            }
+            $('.version-hint').popover("show");
+        } else {
+            $('.version-hint').popover("hide");
+        }
+    });
+
+    function serverJarChange(selectObj) {
+        const type_select = document.getElementById('server_jar')
+        const tidx = type_select.selectedIndex;
+        const val = type_select.options[tidx].value;
+        if (!val) {
+            $("#server_type option").each(function () {
+                $(this).remove()
+            })
+            $("#server option").each(function () {
+                $(this).remove()
+            })
+            return;
+        }
+        let jcSelect = {};
+        if (val == 'None') {
+            jcSelect = document.getElementById("server_type");
+            while (jcSelect.options.length > 0) {
+                jcSelect.remove(0);
+            }
+            serverTypeChange(selectObj);
+            return;
+        }
+        // get the index of the selected option
+        let jidx = selectObj.selectedIndex;
+        // get the value of the selected option
+        let jwhich = selectObj.options[jidx].value;
+        // use the selected option value to retrieve the list of items from the serverTypesLists array
+        let jcList = Object.keys(serverTypesLists[jwhich]["types"]);
+        // get the country select element via its known id
+        jcSelect = document.getElementById("server_type");
+        // remove the current options from the country select
+        while (jcSelect.options.length > 0) {
+            jcSelect.remove(0);
+        }
+        let jnewOption;
+        // create new options ordered by ascending
+        jcList.forEach(type => {
+            jnewOption = document.createElement("option");
+            jnewOption.value = jwhich + "|" + type;  // assumes option string and value are the same
+            jnewOption.text = type;
+            // add the new option
+            try {
+                jcSelect.add(jnewOption);  // this will fail in DOM browsers but is needed for IE
+            }
+            catch (e) {
+                jcSelect.appendChild(jnewOption);
+            }
+        })
+        serverTypeChange(selectObj);
+    }
+</script>
+
+<script src="../../static/assets/js/shared/bootstrap-select-1.13.18.js"></script>
\ No newline at end of file
diff --git a/app/frontend/templates/panel/update_center.html b/app/frontend/templates/panel/update_center.html
new file mode 100644
index 00000000..e69de29b
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index ff9ab978..782136f6 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -63,52 +63,7 @@
                 {% end %}
                 {% raw xsrf_form_html() %}
                 <div class="row">
-
-                  <div class="col-sm-12">
-                    <div class="form-group">
-                      <label for="server_jar">{{ translate('serverWizard', 'serverType', data['lang']) }}</label>
-                      <div class="input-group">
-                        <select required class="form-control form-control-lg select-css" id="server_jar" name="type"
-                          onchange="serverJarChange(this)">
-                          <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
-                          {% for s in data['server_types'] %}
-                          {% if data['server_types'][s].get("enabled", False) %}
-                          <option value="{{ s }}">{{ data["server_types"][s].get("friendly_name", s).capitalize() }}
-                            {% end %}
-                          </option>
-                          {% end %}
-                        </select>
-                        {% if data['super_user'] %}
-                        <div class="input-group-append">
-                          <button class="btn custom-picker" type="button" onclick="refreshCache()"><i id="refresh-cache"
-                              class="refresh-class fas fa-sync"></i></button>
-                        </div>
-                        {% end %}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="col-sm-12">
-                    <div class="form-group">
-                      <label for="server_type">{{ translate('serverWizard', 'serverSelect', data['lang']) }}</label>
-                      <select required class="form-control form-control-lg select-css" id="server_type" name="type"
-                        onchange="serverTypeChange(this)">
-                        <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
-                      </select>
-                    </div>
-                  </div>
-
-                  <div class="col-sm-12">
-                    <div class="form-group">
-                      <label for="server_version">{{ translate('serverWizard', 'serverVersion', data['lang']) }}</label>
-                      <select required class="form-control form-control-lg select-css" id="server" name="version">
-                        <option value="">{{ translate('serverWizard', 'selectVersion', data['lang']) }}</option>
-                      </select>
-                    </div>
-                  </div>
-                  <span data-html="true" class="version-hint text-center"
-                    data-content="⚠️ {{ translate('serverWizard', 'unsupported', data['lang']) }} ⚠️" ,
-                    data-placement="right"></span>
+                  {% include "../panel/parts/big_bucket_wiz.html" %}
                   <div class="col-sm-12">
                     <div class="form-group">
                       <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
@@ -1114,113 +1069,4 @@
   });
 
 </script>
-<script type="text/javascript">
-  const text = '{% raw data["js_server_types"] %}';
-  const serverTypesLists = JSON.parse(text);
-  /* CountryChange() is called from the onchange event of a select element.
-  * param selectObj - the select object which fired the on change event.
-  */
-  function serverTypeChange(selectObj) {
-    // get the index of the selected option
-    let idx = document.getElementById('server_type').value;
-    let idx_list = idx.split("|");
-    // get the value of the selected option
-    let cSelect = document.getElementById("server");
-    let which = {};
-    try {
-      versions = Object.keys(serverTypesLists[idx_list[0]]["types"][idx_list[1]]["versions"]);
-    } catch {
-      while (cSelect.options.length > 0) {
-        cSelect.remove(0);
-      }
-      return;
-    }
-
-    $("#server option").each(function () {
-      $(this).remove()
-    })
-
-    // create new options ordered by ascending
-    versions.forEach(type => {
-      newOption = document.createElement("option");
-      newOption.value = idx + "|" + type;  // assumes option string and value are the same
-      newOption.text = type;
-      // add the new option
-      try {
-        cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
-      }
-      catch (e) {
-        cSelect.appendChild(newOption);
-      }
-    })
-  }
-
-  $("#server").change(function () {
-    let selected_version = $("#server :selected").text().split(".");
-    if (parseInt(selected_version[0]) === 1 && parseInt(selected_version[1]) < 8) {
-      $('[data-toggle="popover"]').popover();
-      if ($(window).width() < 1000) {
-        $('.version-hint').attr("data-placement", "top")
-      } else {
-        $('.version-hint').attr("data-placement", "right")
-      }
-      $('.version-hint').popover("show");
-    } else {
-      $('.version-hint').popover("hide");
-    }
-  });
-
-  function serverJarChange(selectObj) {
-    const type_select = document.getElementById('server_jar')
-    const tidx = type_select.selectedIndex;
-    const val = type_select.options[tidx].value;
-    if (!val) {
-      $("#server_type option").each(function () {
-        $(this).remove()
-      })
-      $("#server option").each(function () {
-        $(this).remove()
-      })
-      return;
-    }
-    let jcSelect = {};
-    if (val == 'None') {
-      jcSelect = document.getElementById("server_type");
-      while (jcSelect.options.length > 0) {
-        jcSelect.remove(0);
-      }
-      serverTypeChange(selectObj);
-      return;
-    }
-    // get the index of the selected option
-    let jidx = selectObj.selectedIndex;
-    // get the value of the selected option
-    let jwhich = selectObj.options[jidx].value;
-    // use the selected option value to retrieve the list of items from the serverTypesLists array
-    let jcList = Object.keys(serverTypesLists[jwhich]["types"]);
-    // get the country select element via its known id
-    jcSelect = document.getElementById("server_type");
-    // remove the current options from the country select
-    while (jcSelect.options.length > 0) {
-      jcSelect.remove(0);
-    }
-    let jnewOption;
-    // create new options ordered by ascending
-    jcList.forEach(type => {
-      jnewOption = document.createElement("option");
-      jnewOption.value = jwhich + "|" + type;  // assumes option string and value are the same
-      jnewOption.text = type;
-      // add the new option
-      try {
-        jcSelect.add(jnewOption);  // this will fail in DOM browsers but is needed for IE
-      }
-      catch (e) {
-        jcSelect.appendChild(jnewOption);
-      }
-    })
-    serverTypeChange(selectObj);
-  }
-</script>
-
-<script src="../../static/assets/js/shared/bootstrap-select-1.13.18.js"></script>
 {% end %}
\ No newline at end of file