diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index e5ade9b..4288d2d 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -656,6 +656,30 @@ export default class ClientConnection {
     );
   }
 
+  public setWebsocketPort(port: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "websocket_port",
+          port.toString()
+        )
+      )
+    );
+  }
+
+  public setHttpPort(port: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "httpserver_port",
+          port.toString()
+        )
+      )
+    );
+  }
+
   public setPowerOnPlan(uuid: string) {
     this.ws?.send(
       JSON.stringify(
diff --git a/src/components/SystenSettingAdvancedNetworkDialog.vue b/src/components/SystenSettingAdvancedNetworkDialog.vue
index d18add6..52788d8 100644
--- a/src/components/SystenSettingAdvancedNetworkDialog.vue
+++ b/src/components/SystenSettingAdvancedNetworkDialog.vue
@@ -31,7 +31,7 @@
 
         <q-card-section
           class="scroll q-pa-xs q-ma-none"
-          style="width: 60vw; height: 65vh"
+          style="width: 60vw; max-height: 75vh"
         >
           <q-card-section class="fit" v-if="false">
             <q-card>
@@ -130,6 +130,54 @@
               </template>
             </q-table>
           </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-card>
+          </q-card-section>
         </q-card-section>
 
         <q-separator />
@@ -162,7 +210,7 @@
 
 <style scoped>
 .header_label {
-  width: 15%;
+  width: 20%;
 }
 .header_label_2 {
   width: 20%;
@@ -173,7 +221,8 @@
 <style lang="sass">
 .advance-ip-table
   /* height or max-height is important */
-  max-height: 60vh
+  max-height: 52vh
+  min-height: 30vh
 
   .q-table__top,
   .q-table__bottom,
@@ -215,6 +264,11 @@ export default defineComponent({
     const advance_ip_table_selected: Ref<AdvancedIpAddressEntity[]> = ref([]);
     const host_name = ref("player");
 
+    const old_http_port = ref(80);
+    const http_port = ref(80);
+    const old_websocket_port = ref(GlobalData.kDefaultWebsocektPort);
+    const websocket_port = ref(GlobalData.kDefaultWebsocektPort);
+
     const advance_ip_columns = [
       {
         name: "ip_address",
@@ -269,6 +323,10 @@ export default defineComponent({
       advance_ip_rows,
       advance_ip_table_selected,
       host_name,
+      http_port,
+      old_http_port,
+      websocket_port,
+      old_websocket_port,
       loga(a: any) {
         console.log(a);
       },
@@ -298,6 +356,33 @@ export default defineComponent({
             }
           }
 
+          {
+            const port = parseInt(
+              GlobalData.getInstance().applicationConfig?.httpserver_port ??
+                "80"
+            );
+            if (!isNaN(port) && port != Infinity) {
+              http_port.value = port;
+              old_http_port.value = port;
+            } else {
+              http_port.value = 80;
+              old_http_port.value = 80;
+            }
+          }
+
+          {
+            const port = parseInt(
+              GlobalData.getInstance().applicationConfig?.websocket_port ??
+                GlobalData.kDefaultWebsocektPort.toString()
+            );
+            if (!isNaN(port) && port != Infinity) {
+              websocket_port.value = port;
+              old_websocket_port.value = port;
+            } else {
+              websocket_port.value = GlobalData.kDefaultWebsocektPort;
+              old_websocket_port.value = GlobalData.kDefaultWebsocektPort;
+            }
+          }
           show_dialog.value = true;
         });
       },
@@ -376,6 +461,94 @@ export default defineComponent({
           }
         }
       },
+      commitHttpPort() {
+        $q.dialog({
+          title: $t.t("Confirm"),
+          message: $t.t("are you sure to change the http port") + "?",
+          ok: {
+            label: $t.t("ok"),
+            noCaps: true,
+            flat: true,
+          },
+          cancel: {
+            label: $t.t("cancel"),
+            noCaps: true,
+            flat: true,
+          },
+          persistent: true,
+        }).onOk(() => {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setHttpPort(http_port.value);
+          $q.dialog({
+            title: $t.t("Confirm"),
+            message:
+              $t.t(
+                "the new http port takes effect after the software is restarted"
+              ) +
+              "," +
+              $t.t("restart now") +
+              "?",
+            ok: {
+              label: $t.t("ok"),
+              noCaps: true,
+              flat: true,
+            },
+            cancel: {
+              label: $t.t("cancel"),
+              noCaps: true,
+              flat: true,
+            },
+            persistent: true,
+          }).onOk(() => {
+            GlobalData.getInstance().getCurrentClient()?.restartDevice();
+          });
+        });
+      },
+      commitWebsocketPort() {
+        $q.dialog({
+          title: $t.t("Confirm"),
+          message: $t.t("are you sure to change the control port") + "?",
+          ok: {
+            label: $t.t("ok"),
+            noCaps: true,
+            flat: true,
+          },
+          cancel: {
+            label: $t.t("cancel"),
+            noCaps: true,
+            flat: true,
+          },
+          persistent: true,
+        }).onOk(() => {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setWebsocketPort(websocket_port.value);
+          $q.dialog({
+            title: $t.t("Confirm"),
+            message:
+              $t.t(
+                "the new control port takes effect after the software is restarted"
+              ) +
+              "," +
+              $t.t("restart now") +
+              "?",
+            ok: {
+              label: $t.t("ok"),
+              noCaps: true,
+              flat: true,
+            },
+            cancel: {
+              label: $t.t("cancel"),
+              noCaps: true,
+              flat: true,
+            },
+            persistent: true,
+          }).onOk(() => {
+            GlobalData.getInstance().getCurrentClient()?.restartDevice();
+          });
+        });
+      },
       isEnglishOrNum(str: string) {
         return /^[0-9a-zA-Z_\-]+$/.test(str);
       },
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 73eba2e..2aa66fb 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -306,4 +306,16 @@ export default {
   "input folder name": "Input Folder Name",
   example: "Example",
   "example:": "Example:",
+  "are you sure to change the http port":
+    "Are You Sure To Change The Http Port",
+  "the new http port takes effect after the software is restarted":
+    "The New Http Port Takes Effect After The Software Is Restarted",
+  "are you sure to change the control port":
+    "Are You Sure To Change The Control Port",
+  "the new control port takes effect after the software is restarted":
+    "The New Control Port Takes Effect After The Software Is Restarted",
+  port: "Port",
+  http: "Http",
+  control: "Control",
+  "restart now": "Restart Now",
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 7b1f357..3afd0b4 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -597,4 +597,13 @@ export default {
     "主机名只能由数字、字母和_-组成",
   "Custom ISV": "优霸定制",
   "are you sure power off device": "确定关机吗",
+  "are you sure to change the http port": "确定重启吗",
+  "the new http port takes effect after the software is restarted":
+    "新的Http端口将在重启软件后生效",
+  "are you sure to change the control port": "确定要修改控制端口吗",
+  "the new control port takes effect after the software is restarted":
+    "新的控制端口将在软件重启后生效",
+  port: "端口",
+  http: "Http",
+  "restart now": "现在重启",
 };