diff --git a/assets/src/css/style.css b/assets/src/css/style.css
index 4a212d266..772b14fac 100755
--- a/assets/src/css/style.css
+++ b/assets/src/css/style.css
@@ -195,6 +195,10 @@ a:focus {
     margin: 7% auto
 }
 
+.card-center-medium {
+    margin: 7% auto
+}
+
 .box-center .box-body,
 .box-center-large .box-body {
     padding: 20px;
@@ -1068,6 +1072,7 @@ kbd{
 .login-page{
     background: #ccc;
     background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 34%, rgba(204,204,204,1) 100%);
+    display: block;
 }
 
 .icon{
diff --git a/include/init/init.php b/include/init/init.php
index e09699b83..cb7ff736f 100755
--- a/include/init/init.php
+++ b/include/init/init.php
@@ -148,10 +148,7 @@ if (!$has_user) {
                 <div class="card-body">
                     <div class="row">
                         <div class="col-md-4">
-                            <div class="form-group">
-                                <label for="admin_username">'.tr('Username').'</label>
-                                <input type="text" class="form-control" id="admin_username" name="admin_username" placeholder="'.tr("Imposta l'username dell'amministratore").'" required>
-                            </div>
+                            {[ "type": "text", "label": "'.tr('Username').'", "id": "admin_username", "name": "admin_username", "value": "", "placeholder": "'.tr("Imposta lo username dell'amministratore").'", "required": 1]}
                         </div>
 
                         <div class="col-md-4">
@@ -159,10 +156,7 @@ if (!$has_user) {
                         </div>
 
                         <div class="col-md-4">
-                            <div class="form-group">
-                                <label for="admin_email">'.tr('Email').'</label>
-                                <input type="email" class="form-control" id="admin_email" name="admin_email" placeholder="'.tr("Imposta l'indirizzo email dell'amministratore").'" required>
-                            </div>
+                            {[ "type": "text", "label": "'.tr('Email').'", "id": "admin_email", "name": "admin_email", "value": "", "placeholder": "'.tr("Imposta l'indirizzo email dell'amministratore").'", "required": 1]}
                         </div>
                     </div>
                 </div>
diff --git a/index.php b/index.php
index 006b5f3d8..6a74ff465 100755
--- a/index.php
+++ b/index.php
@@ -157,7 +157,7 @@ if (!empty(flash()->getMessage('error'))) {
 
 echo '
 			<form action="?op=login" method="post" autocomplete="off">
-				<div class="login-box">
+				<div class="login-box card-center-medium">
                     <div class="card card-outline card-orange">
                         <div class="card-header text-center">
                             <img src="'.App::getPaths()['img'].'/logo_completo.png" alt="'.tr('OpenSTAManager, il software gestionale open source per assistenza tecnica e fatturazione elettronica').'" class="img-fluid">
diff --git a/package.json b/package.json
index 3f242855e..7f448a9bd 100755
--- a/package.json
+++ b/package.json
@@ -88,5 +88,6 @@
         "windows-fix": "yarn global add windows-build-tools",
         "php-cs-fix": "vendor/bin/php-cs-fixer fix",
         "rector": "vendor/bin/rector process"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/HTMLBuilder/Handler/DefaultHandler.php b/src/HTMLBuilder/Handler/DefaultHandler.php
index 3fbfe8212..73944f730 100755
--- a/src/HTMLBuilder/Handler/DefaultHandler.php
+++ b/src/HTMLBuilder/Handler/DefaultHandler.php
@@ -102,13 +102,11 @@ class DefaultHandler implements HandlerInterface
     protected function password(&$values, &$extras)
     {
         $values['icon-after'] = ' <i onclick="togglePassword_'.$values['id'].'()" class="clickable fa" id="'.$values['id'].'_toggle"></i> ';
-
+    
         $result = '
     <script>
-
-       
         const characters ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!$£%-()*[]";
-
+    
         function generateString(length) {
             let result = "";
             const charactersLength = characters.length;
@@ -117,47 +115,46 @@ class DefaultHandler implements HandlerInterface
             }
             return result;
         }
-
+    
         function generatePassword_'.$values['id'].'() {
             var button = $("#'.$values['id'].'_generate");
             button.attr("title", "'.tr('Genera password').'");
-
+    
             $("#'.$values['id'].'").val(generateString(10));
             $("'.$values['strength'].'").attr("disabled", false).removeClass("disabled");
         }
-
+    
         function togglePassword_'.$values['id'].'() {
             var button = $("#'.$values['id'].'_toggle");
-
+    
             if (button.hasClass("fa-eye")) {
                 $("#'.$values['id'].'").attr("type", "text");
                 button.removeClass("fa-eye").addClass("fa-eye-slash");
                 button.attr("title", "'.tr('Nascondi password').'");
-            }
-            else {
+            } else {
                 $("#'.$values['id'].'").attr("type", "password");
                 button.removeClass("fa-eye-slash").addClass("fa-eye");
                 button.attr("title", "'.tr('Visualizza password').'");
             }
         }
-
+    
         $(document).ready(function(){
             togglePassword_'.$values['id'].'();
         });
     </script>';
-
+    
         if (!empty($values['strength'])) {
             $values['icon-after'] .= '&nbsp;&nbsp;|&nbsp;&nbsp;<i onclick="generatePassword_'.$values['id'].'()" class="clickable fa fa-cog"  id="'.$values['id'].'_generate"></i>';
-
+    
             $result .= '
     <div id="'.$values['id'].'_viewport_progress"></div>
-
+    
     <script src="'.base_path().'/assets/dist/password-strength/password.min.js"></script>
-       <script>
+    <script>
         $(document).ready(function(){
             $("#'.$values['id'].'").pwstrength({
                 ui: {
-                    bootstrap3: true,
+                    bootstrap4: true,
                     showVerdictsInsideProgressBar: true,
                     viewports: {
                         progress: "#'.$values['id'].'_viewport_progress",
@@ -177,7 +174,7 @@ class DefaultHandler implements HandlerInterface
                 i18n: {
                     t: function (key) {
                         var result = globals.translations.password[key];
-
+    
                         return result === key ? \'\' : result;
                     }
                 },
@@ -185,7 +182,7 @@ class DefaultHandler implements HandlerInterface
                     minChar: 8,
                     onKeyUp: function(event, data) {
                         var len = $("#'.$values['id'].'").val().length;
-
+    
                         if(len < 8) {
                             $("'.$values['strength'].'").attr("disabled", true).addClass("disabled");
                         } else {
@@ -194,15 +191,15 @@ class DefaultHandler implements HandlerInterface
                     }
                 },
             });
-
+    
             $("#'.$values['id'].'_viewport_progress").insertAfter($("#'.$values['id'].'").closest(".form-group").find("div[id$=-errors]")).css("margin-top", "5px");
         });
     </script>';
         }
-
+    
         // Delega al metodo "text", per la generazione del codice HTML
         $result .= $this->text($values, $extras);
-
+    
         return $result;
     }