diff --git a/src/common/Initializer.ts b/src/common/Initializer.ts
new file mode 100644
index 0000000..d9983e4
--- /dev/null
+++ b/src/common/Initializer.ts
@@ -0,0 +1,147 @@
+import { Protocol } from "src/entities/WSProtocol";
+import GlobalData from "src/common/GlobalData";
+import { Common } from "./Common";
+import EventBus, { EventNamesDefine } from "./EventBus";
+import OptionsType from "./OptionsType";
+
+export default class Initializer {
+  private options: OptionsType;
+  constructor(options: OptionsType) {
+    this.options = options;
+  }
+
+  private async getSignalSources() {
+    const global_data = GlobalData.getInstance();
+    return (await global_data
+      .getCurrentClient()
+      ?.getSignalSources()) as Protocol.GetSignalSourcesResponse;
+  }
+
+  private async getModes() {
+    const global_data = GlobalData.getInstance();
+    return (await global_data
+      .getCurrentClient()
+      ?.getModes()) as Protocol.GetModesResponseEntity;
+  }
+
+  private async getPlans() {
+    const global_data = GlobalData.getInstance();
+    return (await global_data
+      .getCurrentClient()
+      ?.getPlans()) as Protocol.GetPlansResponseEntity;
+  }
+
+  private async initSignalSourceTree() {
+    const options = this.options;
+    const $store = options?.$store;
+    if ($store) {
+      try {
+        let response = await this.getSignalSources();
+        if (response) {
+          $store.commit("buildSignalSourceTree", { options, response });
+          GlobalData.getInstance().signal_source = response.signal_sources;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  private async initModeTree() {
+    const options = this.options;
+    const $store = options.$store;
+
+    if ($store) {
+      try {
+        let response = await this.getModes();
+        if (response) {
+          $store.commit("buildModeTree", { options, response });
+          GlobalData.getInstance().modes = response.modes;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  private async initPlanTree() {
+    const options = this.options;
+    const $store = options.$store;
+    if ($store) {
+      try {
+        let response = await this.getPlans();
+        if (response) {
+          $store.commit("buildPlanTree", { options, response });
+          GlobalData.getInstance().plans = response.plans;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  private async getApplicationConfig() {
+    const global_data = GlobalData.getInstance();
+    global_data.applicationConfig = (
+      await global_data.getCurrentClient()?.getApplicationSettins()
+    )?.config;
+
+    const options = this.options;
+    let $store = options.$store;
+    if (global_data.applicationConfig && $store) {
+      $store.commit("setWallCol", global_data.applicationConfig.wall_col);
+      $store.commit("setWallRow", global_data.applicationConfig.wall_row);
+      $store.commit(
+        "setDeviceScreenWidth",
+        global_data.applicationConfig.screen_width
+      );
+      $store.commit(
+        "setDeviceScreenHeight",
+        global_data.applicationConfig.screen_height
+      );
+    }
+  }
+
+  private async getWindows() {
+    const options = this.options;
+    const global_data = GlobalData.getInstance();
+    let windows = (await global_data.getCurrentClient()?.getWindows())?.windows;
+    let $store = options.$store;
+    if (windows && $store) {
+      $store.commit("setWindows", windows);
+    }
+  }
+
+  private async getCurrentRunningPlan() {
+    const plan_response = await GlobalData.getInstance()
+      .getCurrentClient()
+      ?.getCurrentRunningPlan();
+    if (plan_response && plan_response.running && plan_response.plan) {
+      const packet = new Protocol.PacketEntity();
+      packet.flag = Protocol.PacketEntity.FLAG_NOTIFY;
+      packet.command = Protocol.Commands.kCurrentRunningPlanStateChanged;
+      EventBus.getInstance().emit(EventNamesDefine.NotifyMessage, {
+        packet,
+        data: JSON.stringify(plan_response),
+      });
+    }
+  }
+
+  async initialize() {
+    const global_data = GlobalData.getInstance();
+    let client = global_data.getCurrentClient();
+    if (client) {
+      while (!client.is_login) {
+        await Common.waitFor(100);
+      }
+
+      await this.getApplicationConfig();
+
+      this.initSignalSourceTree();
+      this.initModeTree();
+      this.initPlanTree();
+      this.getCurrentRunningPlan();
+      this.getWindows();
+    }
+  }
+}
diff --git a/src/common/OptionsType.ts b/src/common/OptionsType.ts
new file mode 100644
index 0000000..e274f5a
--- /dev/null
+++ b/src/common/OptionsType.ts
@@ -0,0 +1,8 @@
+import { useStore } from "src/store";
+import { QVueGlobals } from "quasar";
+
+export default interface OptionsType {
+  $t: any;
+  $store: ReturnType<typeof useStore>;
+  $q: QVueGlobals;
+}
diff --git a/src/common/RemoteDataExangeProcesser.ts b/src/common/RemoteDataExangeProcesser.ts
new file mode 100644
index 0000000..4502121
--- /dev/null
+++ b/src/common/RemoteDataExangeProcesser.ts
@@ -0,0 +1,361 @@
+import { Protocol } from "src/entities/WSProtocol";
+import { NotifyMessage } from "./ClientConnection";
+import EventBus, { EventNamesDefine } from "./EventBus";
+import GlobalData from "./GlobalData";
+import OptionsType from "./OptionsType";
+
+export default class RemoteDataExangeProcesser {
+  private flag = false;
+  private options: OptionsType;
+
+  constructor(options: OptionsType) {
+    this.options = options;
+  }
+
+  enable() {
+    if (!this.flag) {
+      this.registeEvent();
+    }
+  }
+
+  private registeEvent() {
+    EventBus.getInstance().on(EventNamesDefine.NotifyMessage, (notify) =>
+      this.onNotifyMessage(notify)
+    );
+  }
+
+  private onNotifyMessage(notify: NotifyMessage) {
+    const $store = this.options.$store;
+    const $t = this.options.$t;
+    const $q = this.options.$q;
+
+    try {
+      switch (notify.packet.command) {
+        case Protocol.Commands.kSetApplicationConfig:
+          {
+            let temp = JSON.parse(
+              notify.data
+            ) as Protocol.ApplicationConfigChangeNotifyEntity;
+            if (temp) {
+              let global_data = GlobalData.getInstance();
+              if (global_data && global_data.applicationConfig) {
+                (<any>GlobalData.getInstance().applicationConfig)[temp.key] =
+                  temp.value;
+                $store.commit(
+                  "setWallCol",
+                  global_data.applicationConfig.wall_col
+                );
+                $store.commit(
+                  "setWallRow",
+                  global_data.applicationConfig.wall_row
+                );
+              }
+            }
+          }
+          break;
+        case Protocol.Commands.kCurrentRunningPlanStateChanged:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanRunningStateChangeNotifyEntity;
+            if (temp && temp.plan) {
+              $q.notify({
+                color: "positive",
+                icon: "done",
+                message:
+                  $t.t("plan") +
+                  " '" +
+                  temp.plan.name +
+                  "  '" +
+                  (temp.running ? $t.t("is running") : $t.t("is stopping")),
+                position: "top",
+                timeout: 2000,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcAddMode:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeAddNotifyEntity;
+            if (temp) {
+              GlobalData.getInstance().modes.push(temp.mode);
+              $store.commit("addModeTreeItem", {
+                parent: temp.mode.group_uuid,
+                is_group: false,
+                item_data: temp.mode,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeleteMode:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeDeleteNotifyEntity;
+            if (temp) {
+              let pos = GlobalData.getInstance().modes.findIndex(
+                (element) => element && element.uuid == temp.uuid
+              );
+              if (pos != -1) {
+                GlobalData.getInstance().modes.splice(pos, 1);
+              }
+              $store.commit("deleteModeTreeItem", {
+                is_group: false,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditMode:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeEditNotifyEntity;
+            if (temp) {
+              let pos = GlobalData.getInstance().modes.findIndex(
+                (element) => element && element.uuid == temp.mode.uuid
+              );
+              if (pos != -1) {
+                GlobalData.getInstance().modes[pos] = temp.mode;
+              }
+              $store.commit("setModeTreeItem", {
+                is_group: false,
+                item_data: temp.mode,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcAddModeGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeGroupAddNotifyEntity;
+            if (temp) {
+              $store.commit("addModeTreeItem", {
+                parent: temp.mode_group.parent_uuid,
+                is_group: true,
+                item_data: temp.mode_group,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeleteModeGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeGroupDeleteNotifyEntity;
+            if (temp) {
+              $store.commit("deleteModeTreeItem", {
+                is_group: true,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditModeGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.ModeGroupEditNotifyEntity;
+            if (temp) {
+              $store.commit("setModeTreeItem", {
+                is_group: true,
+                item_data: temp.mode_group,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcAddPlan:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanAddNotifyEntity;
+            if (temp) {
+              GlobalData.getInstance().plans.push(temp.plan);
+              $store.commit("addPlanTreeItem", {
+                parent: temp.plan.group_uuid,
+                is_group: false,
+                item_data: temp.plan,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeletePlan:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanDeleteNotifyEntity;
+            if (temp) {
+              let pos = GlobalData.getInstance().plans.findIndex(
+                (element) => element && element.uuid == temp.uuid
+              );
+              if (pos != -1) {
+                GlobalData.getInstance().plans.splice(pos, 1);
+              }
+              $store.commit("deletePlanTreeItem", {
+                is_group: false,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditPlan:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanEditNotifyEntity;
+            if (temp) {
+              let pos = GlobalData.getInstance().plans.findIndex(
+                (element) => element && element.uuid == temp.plan.uuid
+              );
+              if (pos != -1) {
+                GlobalData.getInstance().plans[pos] = temp.plan;
+              }
+              $store.commit("setPlanTreeItem", {
+                is_group: false,
+                item_data: temp.plan,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcAddPlanGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanGroupAddNotifyEntity;
+            if (temp) {
+              $store.commit("addPlanTreeItem", {
+                parent: temp.plan_group.parent_uuid,
+                is_group: true,
+                item_data: temp.plan_group,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeletePlanGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanGroupDeleteNotifyEntity;
+            if (temp) {
+              $store.commit("deletePlanTreeItem", {
+                is_group: true,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditPlanGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.PlanGroupEditNotifyEntity;
+            if (temp) {
+              $store.commit("setPlanTreeItem", {
+                is_group: true,
+                item_data: temp.plan_group,
+              });
+            }
+          }
+          break;
+
+        case Protocol.Commands.kRpcAddSignalSource:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceAddNotifyEntity;
+            if (temp) {
+              GlobalData.getInstance().signal_source.push(temp.signal_source);
+              $store.commit("addSignalSourceTreeItem", {
+                parent: temp.signal_source.group_uuid,
+                is_group: false,
+                item_data: temp.signal_source,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeleteSignalSource:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceDeleteNotifyEntity;
+            if (temp) {
+              $store.commit("deleteSignalSourceTreeItem", {
+                is_group: false,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditSignalSource:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceEditNotifyEntity;
+            if (temp) {
+              $store.commit("setSignalSourceTreeItem", {
+                is_group: false,
+                item_data: temp.signal_source,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcAddSignalSourceGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceGroupAddNotifyEntity;
+            if (temp) {
+              $store.commit("addSignalSourceTreeItem", {
+                parent: temp.signal_source_group.parent_uuid,
+                is_group: true,
+                item_data: temp.signal_source_group,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcDeleteSignalSourceGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceGroupDeleteNotifyEntity;
+            if (temp) {
+              $store.commit("deleteSignalSourceTreeItem", {
+                is_group: true,
+                uuid: temp.uuid,
+              });
+            }
+          }
+          break;
+        case Protocol.Commands.kRpcEditSignalSourceGroup:
+          {
+            const temp = JSON.parse(
+              notify.data
+            ) as Protocol.SignalSourceGroupEditNotifyEntity;
+            if (temp) {
+              $store.commit("setSignalSourceTreeItem", {
+                is_group: true,
+                item_data: temp.signal_source_group,
+              });
+            }
+          }
+          break;
+      }
+    } catch {}
+  }
+
+  private unRegisteEvents() {
+    EventBus.getInstance().off(
+      EventNamesDefine.NotifyMessage,
+      this.onNotifyMessage
+    );
+  }
+
+  disable() {
+    if (this.flag) {
+      this.unRegisteEvents();
+    }
+  }
+}
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index b421007..7c9f03e 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -153,4 +153,6 @@ export default {
   operator_call_mode: "模式调用",
   param_delay: "延时",
   "auto delete unknow mode success": "已经自动删除未知模式",
+  "signal source": "信号源",
+  "call mode directives send": "模式调用指令发送",
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 521bad4..98db9e0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -39,9 +39,9 @@
         elevated
         v-if="landspace"
         class="bg-white text-black"
-        style="height: 28px"
+        style="height: 25px"
       >
-        <div class="text-center">SX</div>
+        <div class="text-center fit">Copyright © 2020 - 2021 SX</div>
       </q-footer>
       <q-footer
         v-else
@@ -49,7 +49,7 @@
         class="bg-white text-black"
         style="height: 35vh"
       >
-        <left-tool-bar />
+        <footer-portrait class="fit" />
       </q-footer>
     </div>
     <div v-show="!$store.state.initialized">
@@ -75,26 +75,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from "vue";
+import { defineComponent, ref } from "vue";
 
 import LeftToolBar from "src/pages/LeftToolBar.vue";
 import RightToolBar from "src/pages/RightToolBar.vue";
 import TopToolBar from "src/pages/TopToolBar.vue";
+import FooterPortrait from "src/pages/FooterPortrait.vue";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
-class _Data {
-  show_left_drawer = true;
-  show_right_drawer = true;
-}
-
 export default defineComponent({
   name: "MainLayout",
 
-  components: { LeftToolBar, RightToolBar, TopToolBar },
+  components: { LeftToolBar, RightToolBar, TopToolBar, FooterPortrait },
 
   setup() {
-    const data = reactive(new _Data());
-
     const landspace = window.innerHeight < window.innerWidth;
 
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
@@ -104,7 +98,7 @@ export default defineComponent({
       }
     });
 
-    return { data, landspace };
+    return { landspace };
   },
 });
 </script>
diff --git a/src/pages/FooterPortrait.vue b/src/pages/FooterPortrait.vue
new file mode 100644
index 0000000..32edc0c
--- /dev/null
+++ b/src/pages/FooterPortrait.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="fit">
+    <q-tabs
+      v-model="tab_value"
+      dense
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+    >
+      <q-tab name="signal_source" :label="$t('signal source')" />
+      <q-tab name="mode" :label="$t('mode')" />
+      <q-tab name="plan" :label="$t('plan')" />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="tab_value" animated>
+      <q-tab-panel name="signal_source">
+        <signal-source-tree />
+      </q-tab-panel>
+      <q-tab-panel name="mode">
+        <mode-tree />
+      </q-tab-panel>
+      <q-tab-panel name="plan">
+        <plan-tree />
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+import SignalSourceTree from "src/components/SignalSourceTree.vue";
+import ModeTree from "src/components/ModeTree.vue";
+import PlanTree from "src/components/PlanTree.vue";
+
+export default defineComponent({
+  name: "PageFooterPortrait",
+
+  components: { SignalSourceTree, ModeTree, PlanTree },
+
+  setup() {
+    console.log("asda");
+    let tab_value = ref("signal_source");
+
+    return { tab_value };
+  },
+});
+</script>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 3670670..6f8f0dc 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -13,7 +13,9 @@ import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
 import { NotifyMessage } from "src/common/ClientConnection";
 import { Protocol } from "src/entities/WSProtocol";
+import Initializer from "src/common/Initializer";
 import GlobalData from "src/common/GlobalData";
+import RemoteDataExangeProcesser from "src/common/RemoteDataExangeProcesser";
 
 export default defineComponent({
   name: "PageIndex",
@@ -23,6 +25,19 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
+    const options = {
+      $t,
+      $store,
+      $q,
+    };
+
+    new Initializer(options).initialize().then(() => {
+      $store.commit("setInitialized");
+    });
+
+    const remote_data_exange_processer = new RemoteDataExangeProcesser(options);
+    remote_data_exange_processer.enable();
+
     EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
       $q.loading.show({
         message:
@@ -34,329 +49,6 @@ export default defineComponent({
       $q.loading.hide();
     });
 
-    EventBus.getInstance().on(
-      EventNamesDefine.NotifyMessage,
-      (notify: NotifyMessage) => {
-        try {
-          switch (notify.packet.command) {
-            case Protocol.Commands.kSetApplicationConfig:
-              {
-                let temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ApplicationConfigChangeNotifyEntity;
-                if (temp) {
-                  let global_data = GlobalData.getInstance();
-                  if (global_data && global_data.applicationConfig) {
-                    (<any>GlobalData.getInstance().applicationConfig)[
-                      temp.key
-                    ] = temp.value;
-                    $store.commit(
-                      "setWallCol",
-                      global_data.applicationConfig.wall_col
-                    );
-                    $store.commit(
-                      "setWallRow",
-                      global_data.applicationConfig.wall_row
-                    );
-                  }
-                }
-              }
-              break;
-            case Protocol.Commands.kCurrentRunningPlanStateChanged:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanRunningStateChangeNotifyEntity;
-                if (temp && temp.plan) {
-                  $q.notify({
-                    color: "positive",
-                    icon: "done",
-                    message:
-                      $t.t("plan") +
-                      " '" +
-                      temp.plan.name +
-                      "  '" +
-                      (temp.running ? $t.t("is running") : $t.t("is stopping")),
-                    position: "top",
-                    timeout: 2000,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcAddMode:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeAddNotifyEntity;
-                if (temp) {
-                  GlobalData.getInstance().modes.push(temp.mode);
-                  $store.commit("addModeTreeItem", {
-                    parent: temp.mode.group_uuid,
-                    is_group: false,
-                    item_data: temp.mode,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeleteMode:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeDeleteNotifyEntity;
-                if (temp) {
-                  let pos = GlobalData.getInstance().modes.findIndex(
-                    (element) => element && element.uuid == temp.uuid
-                  );
-                  if (pos != -1) {
-                    GlobalData.getInstance().modes.splice(pos, 1);
-                  }
-                  $store.commit("deleteModeTreeItem", {
-                    is_group: false,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditMode:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeEditNotifyEntity;
-                if (temp) {
-                  let pos = GlobalData.getInstance().modes.findIndex(
-                    (element) => element && element.uuid == temp.mode.uuid
-                  );
-                  if (pos != -1) {
-                    GlobalData.getInstance().modes[pos] = temp.mode;
-                  }
-                  $store.commit("setModeTreeItem", {
-                    is_group: false,
-                    item_data: temp.mode,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcAddModeGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeGroupAddNotifyEntity;
-                if (temp) {
-                  $store.commit("addModeTreeItem", {
-                    parent: temp.mode_group.parent_uuid,
-                    is_group: true,
-                    item_data: temp.mode_group,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeleteModeGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeGroupDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deleteModeTreeItem", {
-                    is_group: true,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditModeGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.ModeGroupEditNotifyEntity;
-                if (temp) {
-                  $store.commit("setModeTreeItem", {
-                    is_group: true,
-                    item_data: temp.mode_group,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcAddPlan:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanAddNotifyEntity;
-                if (temp) {
-                  GlobalData.getInstance().plans.push(temp.plan);
-                  $store.commit("addPlanTreeItem", {
-                    parent: temp.plan.group_uuid,
-                    is_group: false,
-                    item_data: temp.plan,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeletePlan:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanDeleteNotifyEntity;
-                if (temp) {
-                  let pos = GlobalData.getInstance().plans.findIndex(
-                    (element) => element && element.uuid == temp.uuid
-                  );
-                  if (pos != -1) {
-                    GlobalData.getInstance().plans.splice(pos, 1);
-                  }
-                  $store.commit("deletePlanTreeItem", {
-                    is_group: false,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditPlan:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanEditNotifyEntity;
-                if (temp) {
-                  let pos = GlobalData.getInstance().plans.findIndex(
-                    (element) => element && element.uuid == temp.plan.uuid
-                  );
-                  if (pos != -1) {
-                    GlobalData.getInstance().plans[pos] = temp.plan;
-                  }
-                  $store.commit("setPlanTreeItem", {
-                    is_group: false,
-                    item_data: temp.plan,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcAddPlanGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanGroupAddNotifyEntity;
-                if (temp) {
-                  $store.commit("addPlanTreeItem", {
-                    parent: temp.plan_group.parent_uuid,
-                    is_group: true,
-                    item_data: temp.plan_group,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeletePlanGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanGroupDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deletePlanTreeItem", {
-                    is_group: true,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditPlanGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.PlanGroupEditNotifyEntity;
-                if (temp) {
-                  $store.commit("setPlanTreeItem", {
-                    is_group: true,
-                    item_data: temp.plan_group,
-                  });
-                }
-              }
-              break;
-
-            case Protocol.Commands.kRpcAddSignalSource:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceAddNotifyEntity;
-                if (temp) {
-                  GlobalData.getInstance().signal_source.push(
-                    temp.signal_source
-                  );
-                  $store.commit("addSignalSourceTreeItem", {
-                    parent: temp.signal_source.group_uuid,
-                    is_group: false,
-                    item_data: temp.signal_source,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeleteSignalSource:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deleteSignalSourceTreeItem", {
-                    is_group: false,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditSignalSource:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceEditNotifyEntity;
-                if (temp) {
-                  $store.commit("setSignalSourceTreeItem", {
-                    is_group: false,
-                    item_data: temp.signal_source,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcAddSignalSourceGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceGroupAddNotifyEntity;
-                if (temp) {
-                  $store.commit("addSignalSourceTreeItem", {
-                    parent: temp.signal_source_group.parent_uuid,
-                    is_group: true,
-                    item_data: temp.signal_source_group,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcDeleteSignalSourceGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceGroupDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deleteSignalSourceTreeItem", {
-                    is_group: true,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditSignalSourceGroup:
-              {
-                const temp = JSON.parse(
-                  notify.data
-                ) as Protocol.SignalSourceGroupEditNotifyEntity;
-                if (temp) {
-                  $store.commit("setSignalSourceTreeItem", {
-                    is_group: true,
-                    item_data: temp.signal_source_group,
-                  });
-                }
-              }
-              break;
-          }
-        } catch {}
-      }
-    );
     return {};
   },
 });
diff --git a/src/pages/LeftToolBar.vue b/src/pages/LeftToolBar.vue
index 7180827..11e8f17 100644
--- a/src/pages/LeftToolBar.vue
+++ b/src/pages/LeftToolBar.vue
@@ -1,11 +1,29 @@
 <template>
   <div>
-    <signal-source-tree />
+    <q-tabs
+      v-model="tab_value"
+      dense
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+    >
+      <q-tab name="signal_source" :label="$t('signal source')" />
+      <q-tab name="" icon="" disable />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="tab_value" animated>
+      <q-tab-panel name="signal_source">
+        <signal-source-tree />
+      </q-tab-panel>
+    </q-tab-panels>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import SignalSourceTree from "src/components/SignalSourceTree.vue";
 
 export default defineComponent({
@@ -14,7 +32,9 @@ export default defineComponent({
   components: { SignalSourceTree },
 
   setup() {
-    return {};
+    const tab_value = ref("signal_source");
+
+    return { tab_value };
   },
 });
 </script>
diff --git a/src/pages/RightToolBar.vue b/src/pages/RightToolBar.vue
index 78ad5a4..e7e7dfe 100644
--- a/src/pages/RightToolBar.vue
+++ b/src/pages/RightToolBar.vue
@@ -37,7 +37,7 @@ export default defineComponent({
   components: { ModeTree, PlanTree },
 
   setup() {
-    let tab_value = ref("plan");
+    let tab_value = ref("mode");
     return { tab_value };
   },
 });
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 28ced32..e1a66f9 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -26,58 +26,62 @@
         </q-list>
       </q-btn-dropdown>
       <q-separator vertical inset />
-      <q-btn
-        stretch
-        flat
-        icon="description"
-        :label="$t('file manage')"
-        class="q-mr-sm"
-        @click="$refs.file_manage_dialog.showDialog()"
-      />
-      <q-btn
-        stretch
-        flat
-        icon="grid_on"
-        :label="$t('grid setting')"
-        class="q-mr-sm"
-        @click="$refs.grid_setting_dialog.showDialog()"
-      />
-      <q-btn
-        stretch
-        flat
-        icon="image"
-        :label="$t('background image')"
-        class="q-mr-sm"
-        @click="$refs.background_image_dialog.showDialog()"
-      />
-      <q-btn
-        stretch
-        flat
-        icon="backup"
-        :label="$t('data import')"
-        class="q-mr-sm"
-        @click="$refs.recovery_database_dialog.showDialog()"
-      />
-      <q-btn
-        stretch
-        flat
-        icon="restore"
-        :label="$t('data export')"
-        class="q-mr-sm"
-        @click="backupDB"
-      />
 
-      <q-btn
-        stretch
-        flat
-        icon="stop"
-        :label="$t('stop plan')"
-        class="q-mr-sm"
-        v-if="show_stop_plan"
-        @click="stopPlan"
-      />
+      <div class="col">
+        <q-btn
+          stretch
+          flat
+          icon="description"
+          :label="$t('file manage')"
+          class="q-mr-sm"
+          @click="$refs.file_manage_dialog.showDialog()"
+        />
+        <q-btn
+          stretch
+          flat
+          icon="grid_on"
+          :label="$t('grid setting')"
+          class="q-mr-sm"
+          @click="$refs.grid_setting_dialog.showDialog()"
+        />
+        <q-btn
+          stretch
+          flat
+          icon="image"
+          :label="$t('background image')"
+          class="q-mr-sm"
+          @click="$refs.background_image_dialog.showDialog()"
+        />
+        <q-btn
+          stretch
+          flat
+          icon="backup"
+          :label="$t('data import')"
+          class="q-mr-sm"
+          @click="$refs.recovery_database_dialog.showDialog()"
+        />
+        <q-btn
+          stretch
+          flat
+          icon="restore"
+          :label="$t('data export')"
+          class="q-mr-sm"
+          @click="backupDB"
+        />
+
+        <q-btn
+          stretch
+          flat
+          icon="stop"
+          :label="$t('stop plan')"
+          class="q-mr-sm"
+          v-if="show_stop_plan"
+          @click="stopPlan"
+        />
+      </div>
 
       <q-space />
+      <q-separator vertical inset />
       <q-btn-dropdown
         stretch
         flat
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index 03c1f53..e1fb0ed 100644
--- a/src/pages/WallPage.vue
+++ b/src/pages/WallPage.vue
@@ -86,17 +86,8 @@
 
 <script lang="ts">
 import GlobalData from "src/common/GlobalData";
-import {
-  defineComponent,
-  ref,
-  Ref,
-  computed,
-  watch,
-  onMounted,
-  getCurrentInstance,
-} from "vue";
+import { defineComponent, ref, Ref, computed, onMounted } from "vue";
 const elementResizeDetectorMaker = require("element-resize-detector");
-import { Common } from "src/common/Common";
 import { Protocol } from "src/entities/WSProtocol";
 import Window from "src/components/Window.vue";
 
@@ -111,140 +102,6 @@ import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateCha
 import { useQuasar } from "quasar";
 import { NotifyMessage } from "src/common/ClientConnection";
 
-interface _OptionsType {
-  $t: any;
-  $store: ReturnType<typeof useStore> | undefined | null;
-}
-
-const _getSignalSources = async () => {
-  const global_data = GlobalData.getInstance();
-  return (await global_data
-    .getCurrentClient()
-    ?.getSignalSources()) as Protocol.GetSignalSourcesResponse;
-};
-
-const _getModes = async () => {
-  const global_data = GlobalData.getInstance();
-  return (await global_data
-    .getCurrentClient()
-    ?.getModes()) as Protocol.GetModesResponseEntity;
-};
-
-const _getPlans = async () => {
-  const global_data = GlobalData.getInstance();
-  return (await global_data
-    .getCurrentClient()
-    ?.getPlans()) as Protocol.GetPlansResponseEntity;
-};
-
-const _initSignalSourceTree = async (options: _OptionsType) => {
-  const $store = options?.$store;
-  if ($store) {
-    try {
-      let response = await _getSignalSources();
-      if (response) {
-        $store.commit("buildSignalSourceTree", { options, response });
-        GlobalData.getInstance().signal_source = response.signal_sources;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-};
-
-const _initModeTree = async (options: _OptionsType) => {
-  const $store = options?.$store;
-  if ($store) {
-    try {
-      let response = await _getModes();
-      if (response) {
-        $store.commit("buildModeTree", { options, response });
-        GlobalData.getInstance().modes = response.modes;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-};
-
-const _initPlanTree = async (options: _OptionsType) => {
-  const $store = options?.$store;
-  if ($store) {
-    try {
-      let response = await _getPlans();
-      if (response) {
-        $store.commit("buildPlanTree", { options, response });
-        GlobalData.getInstance().plans = response.plans;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-};
-
-const _getApplicationConfig = async (options: _OptionsType) => {
-  const global_data = GlobalData.getInstance();
-  global_data.applicationConfig = (
-    await global_data.getCurrentClient()?.getApplicationSettins()
-  )?.config;
-
-  let $store = options.$store;
-  if (global_data.applicationConfig && $store) {
-    $store.commit("setWallCol", global_data.applicationConfig.wall_col);
-    $store.commit("setWallRow", global_data.applicationConfig.wall_row);
-    $store.commit(
-      "setDeviceScreenWidth",
-      global_data.applicationConfig.screen_width
-    );
-    $store.commit(
-      "setDeviceScreenHeight",
-      global_data.applicationConfig.screen_height
-    );
-  }
-};
-
-const _getWindows = async (options: _OptionsType) => {
-  const global_data = GlobalData.getInstance();
-  let windows = (await global_data.getCurrentClient()?.getWindows())?.windows;
-  let $store = options.$store;
-  if (windows && $store) {
-    $store.commit("setWindows", windows);
-  }
-};
-
-const _getCurrentRunningPlan = async (options: _OptionsType) => {
-  const plan_response = await GlobalData.getInstance()
-    .getCurrentClient()
-    ?.getCurrentRunningPlan();
-  if (plan_response && plan_response.running && plan_response.plan) {
-    const packet = new Protocol.PacketEntity();
-    packet.flag = Protocol.PacketEntity.FLAG_NOTIFY;
-    packet.command = Protocol.Commands.kCurrentRunningPlanStateChanged;
-    EventBus.getInstance().emit(EventNamesDefine.NotifyMessage, {
-      packet,
-      data: JSON.stringify(plan_response),
-    });
-  }
-};
-
-const _initialize = async (options: _OptionsType) => {
-  const global_data = GlobalData.getInstance();
-  let client = global_data.getCurrentClient();
-  if (client) {
-    while (!client.is_login) {
-      await Common.waitFor(100);
-    }
-
-    await _getApplicationConfig(options);
-
-    _initSignalSourceTree(options);
-    _initModeTree(options);
-    _initPlanTree(options);
-    _getCurrentRunningPlan(options);
-    _getWindows(options);
-  }
-};
-
 export default defineComponent({
   name: "PageWall",
 
@@ -404,13 +261,6 @@ export default defineComponent({
       }
     );
 
-    _initialize({
-      $t,
-      $store,
-    }).then(() => {
-      $store.commit("setInitialized");
-    });
-
     onMounted(() => {
       if (wall.value) {
         elementResizeDetectorMaker().listenTo(