diff --git a/documentation/src/pages/install/index.tsx b/documentation/src/pages/install/index.tsx
index 4a4de733..fc11309c 100644
--- a/documentation/src/pages/install/index.tsx
+++ b/documentation/src/pages/install/index.tsx
@@ -1,73 +1,79 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, ChangeEvent } from "react";
 import Head from "@docusaurus/Head";
 import { BlogFooter } from "@site/src/refine-theme/blog-footer";
 import { CommonHeader } from "@site/src/refine-theme/common-header";
 import { CommonLayout } from "@site/src/refine-theme/common-layout";
 import clsx from "clsx";
 
+interface InstallOption {
+    value: string | boolean;
+    description: string;
+    options?: string[];
+}
+
+type InstallOptions = Record<string, InstallOption>;
+
+const defaultOptions: InstallOptions = {
+    hostname: { value: "", description: "Set the hostname." },
+    version: { value: "", description: "Set a custom OpenPanel version to be installed." },
+    "skip-requirements": { value: false, description: "Skip the requirements check." },
+    "skip-panel-check": { value: false, description: "Skip checking if existing panels are installed." },
+    "skip-apt-update": { value: false, description: "Skip the APT update." },
+    overlay2: { value: false, description: "Enable overlay2 storage driver instead of device-mapper." },
+    "skip-firewall": { value: false, description: "Skip UFW setup UFW - Only do this if you will set another Firewall manually!" },
+    "skip-images": { value: false, description: "Skip installing openpanel/nginx and openpanel/apache docker images." },
+    "skip-blacklists": { value: false, description: "Do not set up IP sets and blacklists." },
+    "skip-ssl": { value: false, description: "Skip SSL setup." },
+    "with-modsec": { value: false, description: "Enable ModSecurity for Nginx." },
+    ips: { value: "", description: "Whitelist IP addresses of OpenPanel Support Team." },
+    "no-ssh": { value: false, description: "Disable port 22 and whitelist the IP address of user installing the panel." },
+    "enable-ftp": { value: false, description: "Install FTP (experimental)." },
+    "enable-mail": { value: false, description: "Install Mail (experimental)." },
+    "post-install": { value: "", description: "Specify the post install script path." },
+    screenshots: { value: "remote", description: "Set the screenshots API URL.", options: ["local", "remote"] },
+    debug: { value: false, description: "Display debug information during installation." },
+    repair: { value: false, description: "Retry and overwrite everything." },
+};
+
 const Install: React.FC = () => {
-    const [installOptions, setInstallOptions] = useState({
-        "hostname": { value: "", description: "Set the hostname." },
-        "version": { value: "", description: "Set a custom OpenPanel version to be installed." },
-        "skip-requirements": { value: false, description: "Skip the requirements check." },
-        "skip-panel-check": { value: false, description: "Skip checking if existing panels are installed." },
-        "skip-apt-update": { value: false, description: "Skip the APT update." },
-        "overlay2": { value: false, description: "Enable overlay2 storage driver instead of device-mapper." },
-        "skip-firewall": { value: false, description: "Skip UFW setup UFW - Only do this if you will set another Firewall manually!" },
-        "skip-images": { value: false, description: "Skip installing openpanel/nginx and openpanel/apache docker images." },
-        "skip-blacklists": { value: false, description: "Do not set up IP sets and blacklists." },
-        "skip-ssl": { value: false, description: "Skip SSL setup." },
-        "with-modsec": { value: false, description: "Enable ModSecurity for Nginx." },
-        "ips": { value: "", description: "Whitelist IP addresses of OpenPanel Support Team." },
-        "no-ssh": { value: false, description: "Disable port 22 and whitelist the IP address of user installing the panel." },
-        "enable-ftp": { value: false, description: "Install FTP (experimental)." },
-        "enable-mail": { value: false, description: "Install Mail (experimental)." },
-        "post-install": { value: "", description: "Specify the post install script path." },
-        "screenshots": { value: "remote", description: "Set the screenshots API URL.", options: ["local", "remote"] }, // select
-        "debug": { value: false, description: "Display debug information during installation." },
-        "repair": { value: false, description: "Retry and overwrite everything." },
-    });
-
-    
-
+    const [installOptions, setInstallOptions] = useState<InstallOptions>(defaultOptions);
     const [latestVersion, setLatestVersion] = useState<string>("");
 
     useEffect(() => {
         fetch("https://update.openpanel.co/")
             .then(response => response.text())
             .then(data => {
-                // Extract the latest version from the plain text
-                setLatestVersion(data.trim());
-                // Set default version to the latest version
+                const version = data.trim();
+                setLatestVersion(version);
                 setInstallOptions(prevState => ({
                     ...prevState,
-                    version: { ...prevState.version, value: data.trim() },
+                    version: { ...prevState.version, value: version },
                 }));
             })
             .catch(error => console.error("Error fetching latest version:", error));
     }, []);
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
         const { name, value, type, checked } = e.target;
         setInstallOptions(prevState => ({
             ...prevState,
             [name]: { ...prevState[name], value: type === "checkbox" ? checked : value },
         }));
     };
-    
+
     const generateInstallCommand = () => {
         let command = "bash <(curl -sSL https://get.openpanel.co/)";
-        for (const option in installOptions) {
-            if (option !== "version" || (option === "version" && installOptions[option].value !== latestVersion)) {
-                if (installOptions[option].value || ["version", "hostname", "screenshots", "post-install"].includes(option)) {
-                    if (option === "screenshots" && installOptions[option].value === "local") {
+        for (const [option, config] of Object.entries(installOptions)) {
+            if (option !== "version" || (option === "version" && config.value !== latestVersion)) {
+                if (config.value || ["version", "hostname", "screenshots", "post-install"].includes(option)) {
+                    if (option === "screenshots" && config.value === "local") {
                         command += ` --screenshots=local`;
-                    } else if (option === "screenshots" && installOptions[option].value === "remote") {
+                    } else if (option === "screenshots" && config.value === "remote") {
                         command += ``;
-                    } else if (installOptions[option].value !== "" && installOptions[option].value !== false) {
+                    } else if (config.value !== "" && config.value !== false) {
                         command += ` --${option}`;
-                        if (installOptions[option].value !== true) {
-                            command += `=${installOptions[option].value}`;
+                        if (config.value !== true) {
+                            command += `=${config.value}`;
                         }
                     }
                 }
@@ -76,11 +82,6 @@ const Install: React.FC = () => {
         return command;
     };
 
-    
-        
-
-    
-
     return (
         <CommonLayout>
             <Head title="Install | OpenPanel">
@@ -102,49 +103,31 @@ const Install: React.FC = () => {
                         <h2>Advanced Install Settings:</h2>
                         <p className="mt-0">Here you can set what shall be installed and configured when installing OpenPanel:</p>
                         <ul>
-                            {/* Input fields for advanced install settings */}
-                            {Object.entries(installOptions).map(([key, value]) => (
+                            {Object.entries(installOptions).map(([key, config]) => (
                                 <li key={key}>
-                                    <label htmlFor={key}>{key.replace(/-/g, ' ').toUpperCase()}:</label>
-                                    <span>{value.description}</span>
-                                    {key === "version" ? (
-                                        <input
-                                            type="text"
+                                    {key === "screenshots" ? (
+                                        <select
                                             id={key}
                                             name={key}
-                                            value={value.value}
+                                            value={config.value as string}
+                                            onChange={handleInputChange}
+                                        >
+                                            {config.options?.map(option => (
+                                                <option key={option} value={option}>{option}</option>
+                                            ))}
+                                        </select>
+                                    ) : (
+                                        <input
+                                            type={typeof config.value === "boolean" ? "checkbox" : "text"}
+                                            id={key}
+                                            name={key}
+                                            checked={typeof config.value === "boolean" ? config.value : undefined}
+                                            value={typeof config.value === "string" ? config.value : undefined}
                                             onChange={handleInputChange}
                                         />
-                                    ) : key === "screenshots" ? ( 
-                                        <select 
-                                            id={key} 
-                                            name={key} 
-                                            value={value.value} 
-                                            onChange={handleInputChange} 
-                                        > 
-                                            {value.options.map(option => ( 
-                                                <option key={option} value={option}>{option}</option> 
-                                            ))} 
-                                        </select> 
-                                    ) : (
-                                        typeof value.value === "boolean" ? (
-                                            <input
-                                                type="checkbox"
-                                                id={key}
-                                                name={key}
-                                                checked={value.value}
-                                                onChange={handleInputChange}
-                                            />
-                                        ) : (
-                                            <input
-                                                type="text"
-                                                id={key}
-                                                name={key}
-                                                value={value.value}
-                                                onChange={handleInputChange}
-                                            />
-                                        )
                                     )}
+                                    <label htmlFor={key}>{key.replace(/-/g, ' ').toUpperCase()} :</label>
+                                    <span>{config.description}</span>
                                 </li>
                             ))}
                         </ul>