diff --git a/public/magic_bg/bg.jpg b/public/magic_bg/bg.jpg
new file mode 100644
index 0000000..8fe2316
Binary files /dev/null and b/public/magic_bg/bg.jpg differ
diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue
index ccc8a51..7a4c3a0 100644
--- a/src/components/ControlPanelDialog.vue
+++ b/src/components/ControlPanelDialog.vue
@@ -90,6 +90,7 @@
                 icon="close"
                 color="red"
                 v-close-popup
+                @click="close_magic_switch()"
               >
                 <q-tooltip>
                   {{ $t("close") }}
@@ -276,7 +277,7 @@
                   "
                   :class="$store.state.power_state ? 'wall' : ''"
                 >
-                  <div
+                  <!-- <div
                     class="row"
                     v-for="i in 64 / 8"
                     :key="i"
@@ -286,7 +287,7 @@
                     <div class="col" v-for="j in 8" :key="j">
                       {{ i * j }}
                     </div>
-                  </div>
+                  </div> -->
                 </div>
                 <div
                   ref="wall"
@@ -476,6 +477,11 @@
                     ></div>
                     <div
                       v-else
+                      :class="
+                        test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
+                          ? 'list_select'
+                          : ''
+                      "
                       style="
                         background-color: grey;
                         border: 1px solid black;
@@ -519,6 +525,7 @@
                     <div
                       v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
                     ></div>
+                    <!-- :class="monitor_list_current_index==(item - 1) * 4 + (j - 1)?'list_select':''" -->
                     <div
                       v-else
                       style="background-color: grey; border: 1px solid black"
@@ -526,6 +533,11 @@
                         width: box_width(item, j),
                         height: box_height(item, j),
                       }"
+                      :class="
+                        test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
+                          ? 'list_select'
+                          : ''
+                      "
                       @click="activeMonitorList((item - 1) * 4 + (j - 1))"
                       :draggable="$store.state.power_state"
                       @dragstart="
@@ -581,6 +593,7 @@
             no-caps
             color="primary"
             v-close-popup
+            @click="close_magic_switch()"
           />
           <q-btn
             :loading="loading"
@@ -614,6 +627,8 @@
 
 .wall {
   border: 1px solid black;
+  background: no-repeat url("../../public/magic_bg/bg.jpg");
+  background-size: 36.8vw 20.7vw;
 }
 
 .wall_row {
@@ -623,6 +638,9 @@
 .drag-enter {
   outline-style: dashed;
 }
+.list_select {
+  border: 2px dashed black !important;
+}
 </style>
 
 <script lang="ts">
@@ -682,6 +700,7 @@ export class test_monitor {
   resizeh = 0.0;
   isHide = false;
   isShow = false;
+  isactive = false;
   reset() {
     this.uuid = "";
     this.active = false;
@@ -706,6 +725,7 @@ export class test_monitor {
     this.InitialW = 0;
     this.startw = 0.0;
     this.starth = 0.0;
+    this.isactive = false;
   }
   constructor(id: number, uuid: string, w: number, h: number, resize: number) {
     this.reset();
@@ -720,6 +740,26 @@ export class test_monitor {
     this.cmh = 0.0;
   }
 }
+class test_monitor2 {
+  w = 0.0;
+  h = 0.0;
+  currentx = 0.0;
+  currenty = 0.0;
+  centerx = 0.0;
+  centery = 0.0;
+  angle = 0;
+  id = 0;
+  constructor(id: number, w: number, h: number) {
+    this.currentx = 0.0;
+    this.currenty = 0.0;
+    this.angle = 0;
+    this.centerx = 0;
+    this.centery = 0;
+    this.id = id;
+    this.w = w;
+    this.h = h;
+  }
+}
 class exporttxt {
   id = 0;
   point_left_top = {};
@@ -937,6 +977,18 @@ export default defineComponent({
         });
       }
     };
+    const upload_magic_switch = async () => {
+      let client = GlobalData.getInstance().getCurrentClient();
+      if (client) {
+        const SetMagicWallGridState = await client.setMagicWallGridState(
+          magic_switch.value
+        );
+      }
+    };
+    const close_magic_switch = () => {
+      magic_switch.value = false;
+      upload_magic_switch();
+    };
     const radians = (item: test_monitor) => {
       return /*a*/ (item.angle * Math.PI) / 180;
     };
@@ -1238,12 +1290,11 @@ export default defineComponent({
     };
     const activeMonitorList = (index: number) => {
       monitor_list_current_index.value = index;
-      test_monitor_list.value[index].active = true;
-
+      test_monitor_list.value[index].isactive = true;
       test_monitor_list.value.forEach((element) => {
-        element.active = false;
+        element.isactive = false;
       });
-      test_monitor_list.value[index].active = true;
+      test_monitor_list.value[index].isactive = true;
     };
     let test_delete_flag = false;
     const refresh_all = () => {
@@ -1288,12 +1339,54 @@ export default defineComponent({
         try {
           switch (notify.packet.command) {
             case Protocol.Commands.kRpcSetMagicWallGridState:
-              let temp = JSON.parse(
-                notify.data
-              ) as Protocol.MagicWallGridStateNotifyEntity;
-              if (temp) {
-                magic_switch.value = temp.grid_showing;
+              {
+                let temp = JSON.parse(
+                  notify.data
+                ) as Protocol.MagicWallGridStateNotifyEntity;
+                if (temp) {
+                  magic_switch.value = temp.grid_showing;
+                }
               }
+              break;
+            case Protocol.Commands.kRpcSetMagicWallConfig:
+              {
+                let temp = JSON.parse(
+                  notify.data
+                ) as Protocol.MagicWallNotifyEntity;
+                // if (temp) {
+                //   //更新魔墙
+                //   const a = temp?.config.windows;
+                //   let monitorList: any = [];
+
+                //   if (a) {
+                //     a.forEach((element) => {
+                //       let item: test_monitor2 = new test_monitor2(0, 0, 0);
+                //       item.h = element.h;
+                //       item.w = element.w;
+                //       item.currentx = element.lt.x;
+                //       item.currenty = element.lt.y;
+                //       item.angle = element.angle;
+                //       item.id = element.index;
+                //       if ($store.state.show_monitor_list.length == 0) {
+                //         monitorList.push(item);
+                //         $store.commit("setShowMonitorList", monitorList);
+                //       } else {
+                //         let flag = false;
+                //         $store.state.show_monitor_list.forEach((ele: any) => {
+                //           if (element.index == ele.id) {
+                //             flag = true;
+                //           }
+                //         });
+                //         if (!flag) {
+                //           monitorList.push(item);
+                //           $store.commit("setShowMonitorList", monitorList);
+                //         }
+                //       }
+                //     });
+                //   }
+                // }
+              }
+              break;
           }
         } catch (e) {
           console.error(e);
@@ -1301,6 +1394,8 @@ export default defineComponent({
       }
     );
     return {
+      close_magic_switch,
+      upload_magic_switch,
       magic_switch,
       magic_isbutton,
       refresh_all,
@@ -1502,6 +1597,7 @@ export default defineComponent({
             timeout: 2500,
           });
           show_dialog.value = false;
+          close_magic_switch();
         }
         loading.value = false;
       },
@@ -1949,14 +2045,6 @@ export default defineComponent({
           });
         }
       },
-      async upload_magic_switch() {
-        let client = GlobalData.getInstance().getCurrentClient();
-        if (client) {
-          const SetMagicWallGridState = await client.setMagicWallGridState(
-            magic_switch.value
-          );
-        }
-      },
     };
   },
 });
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 01a116f..610c260 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -3206,6 +3206,15 @@ export namespace Protocol {
     constructor() {
       super();
       this.command = Commands.kRpcSetMagicWallGridState;
+      super.flag = PacketEntity.FLAG_NOTIFY;
+    }
+  }
+  export class MagicWallNotifyEntity extends PacketEntity {
+    config: MagicWallConfig = new MagicWallConfig();
+    constructor() {
+      super();
+      this.command = Commands.kRpcSetMagicWallConfig;
+      super.flag = PacketEntity.FLAG_NOTIFY;
     }
   }
 
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index 86c9b0a..701ac58 100644
--- a/src/pages/WallPage.vue
+++ b/src/pages/WallPage.vue
@@ -715,20 +715,19 @@ export default defineComponent({
       }
     };
 
-   
     const show_magic_wall = async () => {
       // $store.state.windows_sort.findIndex((element) => element == item.uuid)
       let client = GlobalData.getInstance().getCurrentClient();
       if (client) {
         const response = await client.getMagicWallConfig();
         const settings = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.getOutputBoardSetting();
-        if (response&&settings) {
+          .getCurrentClient()
+          ?.getOutputBoardSetting();
+        if (response && settings) {
           const a = response?.config.windows;
           const wall_dom = wall.value;
           let monitorList: any = [];
-          
+
           if (a && wall_dom) {
             offsetHeight = wall_dom.clientHeight;
             offsetWidth = wall_dom.clientHeight;
@@ -985,6 +984,45 @@ export default defineComponent({
                 }
               }
               break;
+            case Protocol.Commands.kRpcSetMagicWallConfig:
+              {
+                let temp = JSON.parse(
+                  notify.data
+                ) as Protocol.MagicWallNotifyEntity;
+                if (temp) {
+                  //更新魔墙
+                  const a = temp?.config.windows;
+                  let monitorList: any = [];
+
+                  if (a) {
+                    a.forEach((element) => {
+                      let item: test_monitor = new test_monitor(0, 0, 0);
+                      item.h = element.h;
+                      item.w = element.w;
+                      item.currentx = element.lt.x;
+                      item.currenty = element.lt.y;
+                      item.angle = element.angle;
+                      item.id = element.index;
+                      if ($store.state.show_monitor_list.length == 0) {
+                        monitorList.push(item);
+                        $store.commit("setShowMonitorList", monitorList);
+                      } else {
+                        let flag = false;
+                        $store.state.show_monitor_list.forEach((ele: any) => {
+                          if (element.index == ele.id) {
+                            flag = true;
+                          }
+                        });
+                        if (!flag) {
+                          monitorList.push(item);
+                          $store.commit("setShowMonitorList", monitorList);
+                        }
+                      }
+                    });
+                  }
+                }
+              }
+              break;
           }
         } catch {}
       }