diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 598803f..0374058 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -189,6 +189,8 @@ export default class ClientConnection {
       if (packet) {
         if (packet.has_exception) {
           console.error(ev.data);
+          this.rpc_map.get(packet.rpc_id)?.reject();
+          this.rpc_map.delete(packet.rpc_id);
         }
         if (Protocol.Commands.AllCommands.has(packet.command)) {
           if (
diff --git a/src/common/Initializer.ts b/src/common/Initializer.ts
index 2812887..5567bbd 100644
--- a/src/common/Initializer.ts
+++ b/src/common/Initializer.ts
@@ -85,7 +85,6 @@ export default class Initializer {
     global_data.applicationConfig = (
       await global_data.getCurrentClient()?.getApplicationSettins()
     )?.config;
-    console.log(global_data.applicationConfig);
 
     const options = this.options;
     let $store = options.$store;
diff --git a/src/components/SystemSettingDialog.vue b/src/components/SystemSettingDialog.vue
index 4fc5fdc..8196f20 100644
--- a/src/components/SystemSettingDialog.vue
+++ b/src/components/SystemSettingDialog.vue
@@ -66,7 +66,7 @@
           <q-tab-panel name="network" class="_panel">
             <q-card class="fit">
               <q-card-section>
-                <q-form ref="network_form">
+                <q-form ref="network_form" @submit="applyNetwork">
                   <q-list>
                     <q-item>
                       <q-item-section avatar class="width_5_1">{{
@@ -179,7 +179,7 @@
           <q-tab-panel name="graphics" class="_panel">
             <q-card class="fit">
               <q-card-section>
-                <q-form ref="graphics_form">
+                <q-form ref="graphics_form" @submit="applyGraphics">
                   <q-list>
                     <q-item>
                       <q-item-section avatar class="width_5_2">{{
@@ -191,6 +191,14 @@
                           :loading="loading"
                           :disable="loading"
                           type="number"
+                          :rules="[
+                            (val) =>
+                              (val != null &&
+                                val != undefined &&
+                                val.toString().length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -204,6 +212,14 @@
                           :loading="loading"
                           :disable="loading"
                           type="number"
+                          :rules="[
+                            (val) =>
+                              (val != null &&
+                                val != undefined &&
+                                val.toString().length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -217,6 +233,14 @@
                           :loading="loading"
                           :disable="loading"
                           type="number"
+                          :rules="[
+                            (val) =>
+                              (val != null &&
+                                val != undefined &&
+                                val.toString().length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -233,6 +257,21 @@
                         />
                       </q-item-section>
                     </q-item>
+                    <q-item>
+                      <q-item-section avatar class="width_5_2_2">{{
+                        $t("device rotate") + ":"
+                      }}</q-item-section>
+                      <q-item-section>
+                        <q-select
+                          v-model="device_rotate"
+                          :loading="loading"
+                          :disable="loading"
+                          :options="device_rotate_options"
+                          emit-value
+                          map-options
+                        />
+                      </q-item-section>
+                    </q-item>
                     <q-item>
                       <q-item-section avatar class="width_5_2_2">{{
                         $t("output board resolution") + ":"
@@ -255,7 +294,7 @@
           <q-tab-panel name="other" class="_panel">
             <q-card class="fit">
               <q-card-section>
-                <q-form ref="other_form">
+                <q-form ref="other_form" @submit="applyOther">
                   <q-list>
                     <q-item>
                       <q-item-section avatar class="width_5_3">{{
@@ -279,6 +318,12 @@
                           v-model="ntp_server"
                           :loading="loading"
                           :disable="loading"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -292,6 +337,14 @@
                           :loading="loading"
                           :disable="loading"
                           type="number"
+                          :rules="[
+                            (val) =>
+                              (val != null &&
+                                val != undefined &&
+                                val.toString().length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -305,6 +358,12 @@
                           :loading="loading"
                           :disable="loading"
                           type="date"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                       <q-item-section>
@@ -313,6 +372,12 @@
                           :loading="loading"
                           :disable="loading"
                           type="time"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) ||
+                              $t('Please type something'),
+                          ]"
+                          lazy-rules
                         />
                       </q-item-section>
                     </q-item>
@@ -339,7 +404,7 @@
             <q-card class="fit">
               <q-card-section>
                 <q-scroll-area style="height: 55vh">
-                  <q-form ref="output_board_form">
+                  <q-form ref="output_board_form" @submit="applyOutputBoard">
                     <q-list>
                       <q-item>
                         <q-item-section avatar class="width_5_4">{{
@@ -351,6 +416,14 @@
                             :loading="loading"
                             :disable="loading"
                             type="number"
+                            :rules="[
+                              (val) =>
+                                (val != null &&
+                                  val != undefined &&
+                                  val.toString().length > 0) ||
+                                $t('Please type something'),
+                            ]"
+                            lazy-rules
                           />
                         </q-item-section>
                       </q-item>
@@ -364,6 +437,14 @@
                             :loading="loading"
                             :disable="loading"
                             type="number"
+                            :rules="[
+                              (val) =>
+                                (val != null &&
+                                  val != undefined &&
+                                  val.toString().length > 0) ||
+                                $t('Please type something'),
+                            ]"
+                            lazy-rules
                           />
                         </q-item-section>
                       </q-item>
@@ -390,6 +471,14 @@
                             :loading="loading"
                             :disable="loading"
                             type="number"
+                            :rules="[
+                              (val) =>
+                                (val != null &&
+                                  val != undefined &&
+                                  val.toString().length > 0) ||
+                                $t('Please type something'),
+                            ]"
+                            lazy-rules
                           />
                         </q-item-section>
                       </q-item>
@@ -403,6 +492,14 @@
                             :loading="loading"
                             :disable="loading"
                             type="number"
+                            :rules="[
+                              (val) =>
+                                (val != null &&
+                                  val != undefined &&
+                                  val.toString().length > 0) ||
+                                $t('Please type something'),
+                            ]"
+                            lazy-rules
                           />
                         </q-item-section>
                       </q-item>
@@ -431,6 +528,14 @@
                             :loading="loading"
                             :disable="loading"
                             type="number"
+                            :rules="[
+                              (val) =>
+                                (val != null &&
+                                  val != undefined &&
+                                  val.toString().length > 0) ||
+                                $t('Please type something'),
+                            ]"
+                            lazy-rules
                           />
                         </q-item-section>
                       </q-item>
@@ -587,8 +692,45 @@ export default defineComponent({
     let contrast = ref(0);
     let hue = ref(0);
 
+    let old_resolution: string = "";
+    let old_rotate: number = 0;
     let device_resolution = ref("");
     let device_resolution_options = ref(["11", "22", "33"]);
+    let device_rotate = ref(0);
+    let device_rotate_options = ref([
+      {
+        label: "0°",
+        value: 0,
+      },
+      {
+        label: "90°",
+        value: 1,
+      },
+      {
+        label: "180°",
+        value: 2,
+      },
+      {
+        label: "270°",
+        value: 3,
+      },
+      {
+        label: $t.t("horizontal flipped"),
+        value: 4,
+      },
+      {
+        label: $t.t("horizontal flipped") + "90°",
+        value: 5,
+      },
+      {
+        label: $t.t("horizontal flipped") + "180°",
+        value: 6,
+      },
+      {
+        label: $t.t("horizontal flipped") + "270°",
+        value: 7,
+      },
+    ]);
     let output_board_resolution = ref("");
     let output_board_resolution_options = ref(["1", "2", "3"]);
 
@@ -680,9 +822,14 @@ export default defineComponent({
           }
         }, 1);
 
-        brightness.value = config.graphics_brightness;
-        contrast.value = config.graphics_contrast;
-        hue.value = config.graphics_hue;
+        brightness.value = parseInt(config.graphics_brightness.toString());
+        contrast.value = parseInt(config.graphics_contrast.toString());
+        hue.value = parseInt(config.graphics_hue.toString());
+
+        device_rotate.value = parseInt(config.device_rotate.toString());
+
+        old_resolution = device_resolution.value;
+        old_rotate = device_rotate.value;
       }
     };
 
@@ -734,113 +881,123 @@ export default defineComponent({
     };
 
     const applyNetwork = async () => {
-      const ret = await network_form.value.validate();
-      if (ret) {
-        let request = new Protocol.SetSystemNetworkRequestEntity();
-        request.auto_ip = auto_ip.value == $t.t("enable");
-        request.ip_address = ip_address.value;
-        request.gtateway = gateway.value;
-        request.net_mask = netmask.value;
-        request.mac_address = mac_address.value;
+      const request = new Protocol.SetSystemNetworkRequestEntity();
+      request.auto_ip = auto_ip.value == $t.t("enable");
+      request.ip_address = ip_address.value;
+      request.gtateway = gateway.value;
+      request.net_mask = netmask.value;
+      request.mac_address = mac_address.value;
 
-        let success = false;
-        try {
-          setTimeout(() => {
-            if (request.ip_address != $store.state.device_ip_address) {
-              setTimeout(() => {
-                SessionStorage.clear();
-                if (
-                  window.location.hostname.toLowerCase() == "192.168.1.1" ||
-                  window.location.hostname.toLowerCase() == "localhost"
-                ) {
-                  window.location.reload();
-                } else {
-                  window.location.hostname = request.ip_address;
-                }
-              }, 1500);
-            }
-          }, 1000 * 10);
-          /*await*/ GlobalData.getInstance()
-            .getCurrentClient()
-            ?.setSystemNetwork(request);
-          success = true;
-        } catch {}
-        $q.notify({
-          color: success ? "positive" : "negative",
-          icon: success ? "done" : "warning",
-          message:
-            $t.t("set system network") +
-            (success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1000,
-        });
-      }
+      let success = false;
+      try {
+        await GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setSystemNetwork(request);
+        setTimeout(() => {
+          if (request.ip_address != $store.state.device_ip_address) {
+            setTimeout(() => {
+              SessionStorage.clear();
+              if (
+                window.location.hostname.toLowerCase() == "192.168.1.1" ||
+                window.location.hostname.toLowerCase() == "localhost"
+              ) {
+                window.location.reload();
+              } else {
+                window.location.hostname = request.ip_address;
+              }
+            }, 2500);
+          }
+        }, 1000 * 10);
+        success = true;
+      } catch {}
+      $q.notify({
+        color: success ? "positive" : "negative",
+        icon: success ? "done" : "warning",
+        message:
+          $t.t("set system network") +
+          (success ? $t.t("success") : $t.t("fail")) +
+          "!",
+        position: "top",
+        timeout: 1000,
+      });
     };
     const applyGraphics = async () => {
-      const ret = await graphics_form.value.validate();
-      if (ret) {
-        let request = new Protocol.SetSystemGraphicsRequestEntity();
-        request.brightness = brightness.value;
-        request.contrast = contrast.value;
-        request.hue = hue.value;
-        request.output_board_resolution = output_board_resolution.value;
-        request.device_resolution = device_resolution.value;
+      const request = new Protocol.SetSystemGraphicsRequestEntity();
+      request.brightness = brightness.value;
+      request.contrast = contrast.value;
+      request.hue = hue.value;
+      request.output_board_resolution = output_board_resolution.value;
+      request.device_resolution = device_resolution.value;
+      request.rotate = device_rotate.value;
 
-        let success = false;
+      let success = false;
+      try {
+        await GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setSystemGraphics(request);
+        success = true;
+      } catch {}
+      $q.notify({
+        color: success ? "positive" : "negative",
+        icon: success ? "done" : "warning",
+        message:
+          $t.t("set system graphics") +
+          (success ? $t.t("success") : $t.t("fail")) +
+          "!",
+        position: "top",
+        timeout: 1000,
+      });
+      if (
+        old_resolution != device_resolution.value ||
+        old_rotate != device_rotate.value
+      ) {
         try {
-          await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.setSystemGraphics(request);
-          success = true;
+          $q.dialog({
+            title: "Confirm",
+            message:
+              $t.t(
+                "major graphics parameters have been changed and need to be restarted to take effect. Restart the system"
+              ) + "?",
+            cancel: true,
+            persistent: true,
+          }).onOk(() => {
+            GlobalData.getInstance().getCurrentClient()?.restartDevice();
+          });
         } catch {}
-        $q.notify({
-          color: success ? "positive" : "negative",
-          icon: success ? "done" : "warning",
-          message:
-            $t.t("set system graphics") +
-            (success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1000,
-        });
       }
     };
 
     const applyOther = async () => {
-      const ret = await other_form.value.validate();
-      if (ret) {
-        let request = new Protocol.SetSystemOtherRequestEntity();
-        request.use_ntp = use_ntp.value == $t.t("enable");
-        request.ntp_sync_delay = ntp_sync_delay.value;
-        request.ntp_server = ntp_server.value;
-        request.time_zone = time_zone_options.value.findIndex(
-          (element) => element && element == time_zone.value
-        );
-        if (request.time_zone < 0) {
-          request.time_zone =
-            GlobalData.getInstance().applicationConfig?.time_zone ?? 21;
-        }
-        request.datetime = current_date.value + " " + current_time.value;
-
-        let success = false;
-        try {
-          await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.setSystemOther(request);
-          success = true;
-        } catch {}
-        $q.notify({
-          color: success ? "positive" : "negative",
-          icon: success ? "done" : "warning",
-          message:
-            $t.t("set system other") +
-            (success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1000,
-        });
+      const request = new Protocol.SetSystemOtherRequestEntity();
+      request.use_ntp = use_ntp.value == $t.t("enable");
+      request.ntp_sync_delay = ntp_sync_delay.value;
+      request.ntp_server = ntp_server.value;
+      request.time_zone = time_zone_options.value.findIndex(
+        (element) => element && element == time_zone.value
+      );
+      if (request.time_zone < 0) {
+        request.time_zone =
+          GlobalData.getInstance().applicationConfig?.time_zone ?? 21;
       }
+      request.datetime = current_date.value + " " + current_time.value;
+
+      let success = false;
+      try {
+        await GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setSystemOther(request);
+        success = true;
+      } catch {}
+      $q.notify({
+        color: success ? "positive" : "negative",
+        icon: success ? "done" : "warning",
+        message:
+          $t.t("set system other") +
+          (success ? $t.t("success") : $t.t("fail")) +
+          "!",
+        position: "top",
+        timeout: 1000,
+      });
     };
 
     const applyOutputBoard = async () => {
@@ -860,21 +1017,38 @@ export default defineComponent({
           .getCurrentClient()
           ?.setOutputBoardSetting(request);
         success = true;
-      } catch {
-        $q.notify({
-          color: success ? "positive" : "negative",
-          icon: success ? "done" : "warning",
-          message:
-            $t.t("set output board") +
-            (success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1000,
-        });
+      } catch {}
+      $q.notify({
+        color: success ? "positive" : "negative",
+        icon: success ? "done" : "warning",
+        message:
+          $t.t("set output board") +
+          (success ? $t.t("success") : $t.t("fail")) +
+          "!",
+        position: "top",
+        timeout: 1000,
+      });
+    };
+
+    const apply = () => {
+      switch (tab.value) {
+        case "network":
+          network_form.value.submit();
+          break;
+        case "graphics":
+          graphics_form.value.submit();
+          break;
+        case "other":
+          other_form.value.submit();
+
+          break;
+        case "output_board":
+          output_board_form.value.submit();
+          break;
       }
     };
 
-    const apply = async () => {
+    const apply1 = async () => {
       loading.value = true;
       try {
         switch (tab.value) {
@@ -913,6 +1087,8 @@ export default defineComponent({
       brightness,
       contrast,
       hue,
+      device_rotate,
+      device_rotate_options,
       device_resolution,
       device_resolution_options,
       output_board_resolution,
@@ -940,6 +1116,10 @@ export default defineComponent({
       refresh_all,
       apply,
       restoreOutputBoard,
+      applyNetwork,
+      applyGraphics,
+      applyOther,
+      applyOutputBoard,
       loga(a: any) {
         console.log(a);
       },
diff --git a/src/entities/ApplicationConfigEntity.ts b/src/entities/ApplicationConfigEntity.ts
index a2d3f07..de8c99f 100644
--- a/src/entities/ApplicationConfigEntity.ts
+++ b/src/entities/ApplicationConfigEntity.ts
@@ -21,4 +21,5 @@ export default class ApplicationConfigEntity {
   graphics_brightness: number = 100;
   graphics_contrast: number = 100;
   graphics_hue: number = 100;
+  device_rotate: number = 0;
 }
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 77788fa..df75541 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -1176,6 +1176,7 @@ export namespace Protocol {
     brightness: number = 100;
     contrast: number = 100;
     hue: number = 100;
+    rotate: number = 0;
     device_resolution: string = "3840x2160@60";
     output_board_resolution: string = "1920x1080";
 
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 5ef7005..45aa520 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -258,4 +258,9 @@ export default {
   "update file upload": "升级文件上传",
   "the system automatically restarts after the upgrade is complete":
     "系统将在升级完成后自动重启",
+  "device rotate": "旋转",
+  "horizontal flipped": "水平翻转",
+  "set output board": "设置输出板",
+  "major graphics parameters have been changed and need to be restarted to take effect. Restart the system":
+    "重要图形参数已更改，需要重启后生效，是否重启",
 };