diff --git a/src/components/SystenSettingAdvancedNetworkDialog.vue b/src/components/SystenSettingAdvancedNetworkDialog.vue
index 52788d8..64adca5 100644
--- a/src/components/SystenSettingAdvancedNetworkDialog.vue
+++ b/src/components/SystenSettingAdvancedNetworkDialog.vue
@@ -132,50 +132,87 @@
           </q-card-section>
           <q-card-section class="q-py-none q-my-none">
             <q-card>
-              <q-list>
-                <q-item>
-                  <q-item-section avatar class="header_label">
-                    {{ $t("http") }}{{ $t(" ") }}{{ $t("port") }}:
-                  </q-item-section>
-                  <q-item-section>
-                    <q-input
-                      type="number"
-                      v-model="http_port"
-                      max="65535"
-                      min="1"
-                    />
-                  </q-item-section>
-                  <q-item-section avatar>
-                    <q-btn
-                      :disable="old_http_port == http_port"
-                      no-caps
-                      :label="$t('commit')"
-                      @click="commitHttpPort"
-                    />
-                  </q-item-section>
-                </q-item>
-                <q-item>
-                  <q-item-section avatar class="header_label">
-                    {{ $t("control") }}{{ $t(" ") }}{{ $t("port") }}:
-                  </q-item-section>
-                  <q-item-section>
-                    <q-input
-                      type="number"
-                      v-model="websocket_port"
-                      max="65535"
-                      min="1"
-                    />
-                  </q-item-section>
-                  <q-item-section avatar>
-                    <q-btn
-                      :disable="old_websocket_port == websocket_port"
-                      no-caps
-                      :label="$t('commit')"
-                      @click="commitWebsocketPort"
-                    />
-                  </q-item-section>
-                </q-item>
-              </q-list>
+              <q-form>
+                <q-list class="q-pb-md">
+                  <q-item>
+                    <q-item-section avatar class="header_label">
+                      {{ $t("http") }}{{ $t(" ") }}{{ $t("port") }}:
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        type="number"
+                        v-model="http_port"
+                        max="65535"
+                        maxlength="5"
+                        min="0"
+                        :rules="[
+                          (val) =>
+                            (val != null &&
+                              val != undefined &&
+                              val.toString().length > 0) ||
+                            $t('Please type something'),
+                          (val) =>
+                            (parseInt(val) >= 0 && parseInt(val) <= 65535) ||
+                            $t('the port number must be between 0 and 65535'),
+                        ]"
+                      />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>
+                        ({{ $t($t("current real")) }}{{ $t(" ") }}{{ $t("http")
+                        }}{{ $t(" ") }}{{ $t("port") }}: {{ real_http_port }})
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section avatar>
+                      <q-btn
+                        :disable="old_http_port == http_port"
+                        no-caps
+                        :label="$t('commit')"
+                        @click="commitHttpPort"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section avatar class="header_label">
+                      {{ $t("control") }}{{ $t(" ") }}{{ $t("port") }}:
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input
+                        maxlength="5"
+                        type="number"
+                        v-model="websocket_port"
+                        max="65535"
+                        min="0"
+                        :rules="[
+                          (val) =>
+                            (val != null &&
+                              val != undefined &&
+                              val.toString().length > 0) ||
+                            $t('Please type something'),
+                          (val) =>
+                            (parseInt(val) >= 0 && parseInt(val) <= 65535) ||
+                            $t('the port number must be between 0 and 65535'),
+                        ]"
+                      />
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>
+                        ({{ $t($t("current real")) }}{{ $t(" ")
+                        }}{{ $t("control") }}{{ $t(" ") }}{{ $t("port") }}:
+                        {{ real_websocket_port }})
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section avatar>
+                      <q-btn
+                        :disable="old_websocket_port == websocket_port"
+                        no-caps
+                        :label="$t('commit')"
+                        @click="commitWebsocketPort"
+                      />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-form>
             </q-card>
           </q-card-section>
         </q-card-section>
@@ -221,7 +258,7 @@
 <style lang="sass">
 .advance-ip-table
   /* height or max-height is important */
-  max-height: 52vh
+  max-height: 45vh
   min-height: 30vh
 
   .q-table__top,
@@ -248,6 +285,8 @@ import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import AdvancedIpAddressDialog from "src/components/AdvancedIpAddressDialog.vue";
 import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
+import { api } from "src/boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
 
 export default defineComponent({
   name: "ComponentSystenSettingAdvancedNetworkDialog",
@@ -266,8 +305,10 @@ export default defineComponent({
 
     const old_http_port = ref(80);
     const http_port = ref(80);
+    const real_http_port = ref(80);
     const old_websocket_port = ref(GlobalData.kDefaultWebsocektPort);
     const websocket_port = ref(GlobalData.kDefaultWebsocektPort);
+    const real_websocket_port = ref(80);
 
     const advance_ip_columns = [
       {
@@ -325,8 +366,10 @@ export default defineComponent({
       host_name,
       http_port,
       old_http_port,
+      real_http_port,
       websocket_port,
       old_websocket_port,
+      real_websocket_port,
       loga(a: any) {
         console.log(a);
       },
@@ -383,6 +426,35 @@ export default defineComponent({
               old_websocket_port.value = GlobalData.kDefaultWebsocektPort;
             }
           }
+
+          {
+            api
+              .get(HttpProtocol.RequestPathGetAllPort)
+              .then((response) => {
+                if (response && typeof response.data != "undefined") {
+                  if (typeof response.data.http == "number") {
+                    real_http_port.value = response.data.http;
+                  } else if (typeof response.data.http == "string") {
+                    const temp = parseInt(response.data.http);
+                    if (!isNaN(temp) && temp != Infinity) {
+                      real_http_port.value = temp;
+                    }
+                  }
+
+                  if (typeof response.data.websocket == "number") {
+                    real_websocket_port.value = response.data.websocket;
+                  } else if (typeof response.data.websocket == "string") {
+                    const temp = parseInt(response.data.websocket);
+                    if (!isNaN(temp) && temp != Infinity) {
+                      real_websocket_port.value = temp;
+                    }
+                  }
+                }
+              })
+              .catch((e) => {
+                console.log(e);
+              });
+          }
           show_dialog.value = true;
         });
       },
diff --git a/src/entities/HttpProtocol.ts b/src/entities/HttpProtocol.ts
index 74de360..f2476ab 100644
--- a/src/entities/HttpProtocol.ts
+++ b/src/entities/HttpProtocol.ts
@@ -6,6 +6,8 @@ export namespace HttpProtocol {
   export const RequestPathListFile = "/list_file";
   export const RequestPathCreateDirectory = "/create_directory";
   export const RequestPathCheckFileSupport = "/check_file_support";
+  export const RequestPathGetWebscoketPort = "/get_websocket_port";
+  export const RequestPathGetAllPort = "/get_all_port";
   export const RequestPathDeleteFile = "/delete_file";
   export const RequestPathRenameFile = "/rename_file";
   export const RequestCheckModeIndex = "/check_mode_index";
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index efd16a8..b88a711 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -320,4 +320,8 @@ export default {
   "restart now": "Restart Now",
   _SOFT_PAD_LOGIN_TITLE_: "LEDPLAYER",
   welcome: "Welcome",
+  real: "Real",
+  "current real": "Current Real",
+  "the port number must be between 0 and 65535":
+    "The Port Number Must Be Between 0 And 65535",
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 3afd0b4..e6d0a49 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -606,4 +606,7 @@ export default {
   port: "端口",
   http: "Http",
   "restart now": "现在重启",
+  real: "实际",
+  "current real": "当前实际",
+  "the port number must be between 0 and 65535": "端口号只能在0~65535之间",
 };
diff --git a/src/pad/Login.vue b/src/pad/Login.vue
index b5d21fe..58c58ca 100644
--- a/src/pad/Login.vue
+++ b/src/pad/Login.vue
@@ -257,6 +257,7 @@ import { useStore } from "src/store";
 import { Md5 } from "ts-md5/dist/md5";
 import Initializer from "src/common/Initializer";
 import { api } from "src/boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
 
 class _Data {
   user_name: string | null = null;
@@ -388,7 +389,7 @@ export default defineComponent({
           try {
             let global_data = GlobalData.getInstance();
             api
-              .get("/get_websocket_port")
+              .get(HttpProtocol.RequestPathGetWebscoketPort)
               .then((response) => {
                 let final_ws_port = GlobalData.kDefaultWebsocektPort;
                 if (response && typeof response.data != "undefined") {
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 59182fa..d08e1bf 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -204,6 +204,7 @@ import { useStore } from "src/store";
 import { Md5 } from "ts-md5/dist/md5";
 import Initializer from "src/common/Initializer";
 import { api } from "src/boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
 
 class _Data {
   user_name: string | null = null;
@@ -319,7 +320,7 @@ export default defineComponent({
           try {
             let global_data = GlobalData.getInstance();
             api
-              .get("/get_websocket_port")
+              .get(HttpProtocol.RequestPathGetWebscoketPort)
               .then((response) => {
                 let final_ws_port = GlobalData.kDefaultWebsocektPort;
                 if (response && typeof response.data != "undefined") {