diff --git a/fe/src/views/Setup/Setup.css b/fe/src/views/Setup/Setup.css
index 8bfb06c..65acab9 100644
--- a/fe/src/views/Setup/Setup.css
+++ b/fe/src/views/Setup/Setup.css
@@ -1444,11 +1444,16 @@
   }
 
   #main.setup-page.database-page .mysql-fields {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.42fr);
     column-gap: 28px;
     row-gap: 8px;
     padding: 18px 22px 8px;
   }
 
+  #main.setup-page.database-page .database-password-field {
+    grid-column: 2 / 4;
+  }
+
   #main.setup-page.database-page .database-hint {
     margin-bottom: 16px;
     line-height: 1.65;
@@ -1465,3 +1470,9 @@
     line-height: 1.6;
   }
 }
+
+@media (max-width: 760px) {
+  .database-page .database-password-field {
+    grid-column: auto;
+  }
+}
diff --git a/fe/src/views/Setup/Setup.vue b/fe/src/views/Setup/Setup.vue
index fcb1585..88ee4c1 100644
--- a/fe/src/views/Setup/Setup.vue
+++ b/fe/src/views/Setup/Setup.vue
@@ -52,26 +52,37 @@
             </div>
 
 
-            <el-form-item :label="lang.db_user">
+            <el-form-item class="database-user-field" :label="lang.db_user">
               <el-input v-model="dbSettings.user" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="dbSettings.type === 'mysql' ? lang.db_user_ph : lang.pg_user_ph"
                         autocomplete="username"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_host">
+            <el-form-item class="database-host-field" :label="lang.db_host">
               <el-input v-model="dbSettings.host" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="lang.db_host_ph"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_name">
+            <el-form-item class="database-port-field" :label="lang.db_port">
+              <el-input v-model="dbSettings.port" @input="clearDatabaseError"
+                        :disabled="databaseLoading"
+                        type="number"
+                        min="1"
+                        max="65535"
+                        step="1"
+                        inputmode="numeric"
+                        :placeholder="lang.db_port_ph"></el-input>
+            </el-form-item>
+
+            <el-form-item class="database-name-field" :label="lang.db_name">
               <el-input v-model="dbSettings.name" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="lang.db_name_ph"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_password">
+            <el-form-item class="database-password-field" :label="lang.db_password">
               <el-input v-model="dbSettings.password" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         type="password"