diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index d0e3b13..8ec93aa 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -1,3 +1,4 @@
+import { ModeEntity } from "src/entities/ModeEntity";
 import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import { Protocol } from "src/entities/WSProtocol";
@@ -251,6 +252,80 @@ export default class ClientConnection {
     }
   }
 
+  public async getModes() {
+    try {
+      return await this.doRpc<Protocol.GetModesResponseEntity>(
+        new Protocol.GetModesRequestEntity()
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async addModeGroup(group_uuid: string, name: string) {
+    try {
+      return await this.doRpc<Protocol.AddModeGroupResponseEntity>(
+        new Protocol.AddModeGroupRequestEntity(0, group_uuid, name)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async editModeGroup(uuid: string, name: string) {
+    try {
+      return await this.doRpc<Protocol.EditModeGroupResponseEntity>(
+        new Protocol.EditModeGroupRequestEntity(0, uuid, name)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async deleteModeGroup(uuid: string) {
+    try {
+      return await this.doRpc<Protocol.DeleteModeGroupResponseEntity>(
+        new Protocol.DeleteModeGroupRequestEntity(0, uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async addMode(group_uuid?: string, name?: string) {
+    try {
+      return await this.doRpc<Protocol.AddModeResponseEntity>(
+        new Protocol.AddModeRequestEntity(0, name, group_uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async editMode(uuid?: string, name?: string) {
+    try {
+      return await this.doRpc<Protocol.EditModeResponseEntity>(
+        new Protocol.EditModeRequestEntity(0, name, uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async deleteMode(uuid: string) {
+    try {
+      return await this.doRpc<Protocol.DeleteModeResponseEntity>(
+        new Protocol.DeleteModeRequestEntity(0, uuid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public callMode(uuid: string) {
+    this.ws?.send(JSON.stringify(new Protocol.CallModeRequestEntity(uuid)));
+  }
+
   public async getApplicationSettins() {
     try {
       return await this.doRpc<Protocol.GetApplicationConfigResponseEntity>(
@@ -308,8 +383,8 @@ export default class ClientConnection {
 
   public async addSignalSourceGroup(parent_uuid: string, name: string) {
     try {
-      return await this.doRpc<Protocol.AddSignalSourcesGroupResponseEntity>(
-        new Protocol.AddSignalSourcesGroupRequestEntity(0, parent_uuid, name)
+      return await this.doRpc<Protocol.AddSignalSourceGroupResponseEntity>(
+        new Protocol.AddSignalSourceGroupRequestEntity(0, parent_uuid, name)
       );
     } catch (e) {
       console.error(e);
@@ -318,8 +393,8 @@ export default class ClientConnection {
 
   public async editSignalSourceGroup(uuid: string, name: string) {
     try {
-      return await this.doRpc<Protocol.EditSignalSourcesGroupResponseEntity>(
-        new Protocol.EditSignalSourcesGroupRequestEntity(0, uuid, name)
+      return await this.doRpc<Protocol.EditSignalSourceGroupResponseEntity>(
+        new Protocol.EditSignalSourceGroupRequestEntity(0, uuid, name)
       );
     } catch (e) {
       console.error(e);
@@ -328,8 +403,8 @@ export default class ClientConnection {
 
   public async deleteSignalSourceGroup(uuid: string) {
     try {
-      return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
-        new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
+      return await this.doRpc<Protocol.DeleteSignalSourceGroupResponseEntity>(
+        new Protocol.DeleteSignalSourceGroupRequestEntity(0, uuid)
       );
     } catch (e) {
       console.error(e);
@@ -338,8 +413,8 @@ export default class ClientConnection {
 
   public async addSignalSource(item: SignalSourceEntity) {
     try {
-      return await this.doRpc<Protocol.AddSignalSourcesResponseEntity>(
-        new Protocol.AddSignalSourcesRequestEntity(0, item)
+      return await this.doRpc<Protocol.AddSignalSourceResponseEntity>(
+        new Protocol.AddSignalSourceRequestEntity(0, item)
       );
     } catch (e) {
       console.error(e);
@@ -348,8 +423,8 @@ export default class ClientConnection {
 
   public async editSignalSource(item: SignalSourceEntity) {
     try {
-      return await this.doRpc<Protocol.EditSignalSourcesResponseEntity>(
-        new Protocol.EditSignalSourcesRequestEntity(0, item)
+      return await this.doRpc<Protocol.EditSignalSourceResponseEntity>(
+        new Protocol.EditSignalSourceRequestEntity(0, item)
       );
     } catch (e) {
       console.error(e);
@@ -358,8 +433,8 @@ export default class ClientConnection {
 
   public async deleteSignalSource(uuid: string) {
     try {
-      return await this.doRpc<Protocol.DeleteSignalSourcesResponseEntity>(
-        new Protocol.DeleteSignalSourcesRequestEntity(0, uuid)
+      return await this.doRpc<Protocol.DeleteSignalSourceResponseEntity>(
+        new Protocol.DeleteSignalSourceRequestEntity(0, uuid)
       );
     } catch (e) {
       console.error(e);
diff --git a/src/common/GlobalData.ts b/src/common/GlobalData.ts
index 0d4661d..8186c5a 100644
--- a/src/common/GlobalData.ts
+++ b/src/common/GlobalData.ts
@@ -1,6 +1,7 @@
 import { SessionStorage } from "quasar";
 import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
 import { HttpProtocol } from "src/entities/HttpProtocol";
+import { ModeEntity } from "src/entities/ModeEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import ClientConnection from "./ClientConnection";
 import EventBus, { EventNamesDefine } from "./EventBus";
@@ -54,6 +55,16 @@ export default class GlobalData {
     this._signal_sources = sources;
   }
 
+  _modes: ModeEntity[] = [];
+
+  public get modes() {
+    return this._modes;
+  }
+
+  public set modes(modes: ModeEntity[]) {
+    this._modes = modes;
+  }
+
   constructor() {
     const url: string | null = SessionStorage.getItem("url");
     let name: string | null = SessionStorage.getItem("name");
diff --git a/src/components/FileManageDialog.vue b/src/components/FileManageDialog.vue
index e72a5a3..c0e09e0 100644
--- a/src/components/FileManageDialog.vue
+++ b/src/components/FileManageDialog.vue
@@ -595,7 +595,7 @@ export default defineComponent({
       resetData() {
         loading.value = false;
         files.value = [];
-        path.value = "";
+        path.value = default_path.value;
         status.value = "normal";
         upload_url.value = "";
         if (resolve) {
diff --git a/src/components/ModeDialog.vue b/src/components/ModeDialog.vue
new file mode 100644
index 0000000..89204c5
--- /dev/null
+++ b/src/components/ModeDialog.vue
@@ -0,0 +1,265 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{
+                type == 1
+                  ? $t("add mode")
+                  : type == 2
+                  ? $t("edit mode")
+                  : type == 3
+                  ? $t("delete mode")
+                  : "add"
+              }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-label>{{ $t("parent group") }}:</q-item-label>
+            </q-item>
+            <q-item class="q-pa-none q-ma-none">
+              <q-item-section style="padding-right: 10px">
+                <q-tree
+                  ref="tree"
+                  class="scroll"
+                  :class="loading ? 'disable_tree' : ''"
+                  v-model:selected="selected"
+                  :nodes="tree_nodes"
+                  default-expand-all
+                  node-key="uuid"
+                  labelKey="name"
+                  filter="group filter"
+                  :filter-method="treeNodesFilter"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      class="full-width"
+                      :class="
+                        prop.tree.selected == prop.key ? 'item-selected-bg' : ''
+                      "
+                    >
+                      <q-item-section avatar>
+                        <q-icon
+                          :name="'img:source_icon/group.png'"
+                          color="orange"
+                          size="28px"
+                          class="q-mr-sm"
+                        />
+                      </q-item-section>
+                      <q-item-section>
+                        <div class="text-weight-bold text-primary">
+                          {{ prop.node.name }}
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  autofocus
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="name"
+                  :label="$t('mode name')"
+                  :hint="$t('please input mode name')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                        $refs?.accept?.click();
+                      }
+                    }
+                  "
+                >
+                  <template v-if="name" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop="name = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+
+export default defineComponent({
+  name: "ComponentModeDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let type = ref(1);
+    let name = ref(null);
+    let uuid = ref("");
+    const selected: any = ref(null);
+    let loading = ref(false);
+
+    const tree_nodes = computed({
+      get: () => $store.state.mode_tree,
+      set: (val) => {},
+    });
+
+    watch(
+      () => selected.value,
+      (newValue, oldValue) => {
+        if (newValue == null) {
+          selected.value = "";
+        }
+      }
+    );
+
+    const requestAddMode = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.addMode(selected.value, name.value ?? "");
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("add mode") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    const requestEditMode = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.editMode(uuid.value, name.value ?? "");
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("edit mode") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    return {
+      show_dialog,
+      type,
+      name,
+      uuid,
+      selected,
+      loading,
+      tree_nodes,
+      showDialog(options: any) {
+        if (options) {
+          console.log(options);
+          type.value = options.type ?? 1;
+          if (type.value == 2) {
+            name.value = options.data?.name ?? null;
+            selected.value = options.data?.item_data?.group_uuid ?? null;
+            uuid.value = options.data?.item_data?.uuid ?? null;
+          } else {
+            selected.value = options.data?.uuid ?? null;
+            uuid.value = options.data?.uuid ?? null;
+          }
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        (selected.value = null), (name.value = null);
+        type.value = 1;
+      },
+      treeNodesFilter(node: any, filter: any) {
+        return node.is_group;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          await (type.value == 2 ? requestEditMode() : requestAddMode());
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/ModeGroupDialog.vue b/src/components/ModeGroupDialog.vue
new file mode 100644
index 0000000..3c5d728
--- /dev/null
+++ b/src/components/ModeGroupDialog.vue
@@ -0,0 +1,263 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{
+                type == 1
+                  ? $t("add group")
+                  : type == 2
+                  ? $t("edit group")
+                  : type == 3
+                  ? $t("delete group")
+                  : "add"
+              }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
+          <q-list>
+            <q-item v-if="type != 2">
+              <q-item-label>{{ $t("parent group") }}:</q-item-label>
+            </q-item>
+            <q-item v-if="type != 2" class="q-pa-none q-ma-none">
+              <q-item-section style="padding-right: 10px">
+                <q-tree
+                  ref="tree"
+                  class="scroll"
+                  :class="loading ? 'disable_tree' : ''"
+                  v-model:selected="selected"
+                  :nodes="tree_nodes"
+                  default-expand-all
+                  node-key="uuid"
+                  labelKey="name"
+                  filter="group filter"
+                  :filter-method="treeNodesFilter"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      class="full-width"
+                      :class="
+                        prop.tree.selected == prop.key ? 'item-selected-bg' : ''
+                      "
+                    >
+                      <q-item-section avatar>
+                        <q-icon
+                          :name="'img:source_icon/group.png'"
+                          color="orange"
+                          size="28px"
+                          class="q-mr-sm"
+                        />
+                      </q-item-section>
+                      <q-item-section>
+                        <div class="text-weight-bold text-primary">
+                          {{ prop.node.name }}
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  autofocus
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="name"
+                  :label="$t('group name')"
+                  :hint="$t('please input group name')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                        $refs?.accept?.click();
+                      }
+                    }
+                  "
+                >
+                  <template v-if="name" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop="name = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+
+export default defineComponent({
+  name: "ComponentModeGroupDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let type = ref(1);
+    let name = ref(null);
+    let uuid = ref("");
+    const selected: any = ref(null);
+    let loading = ref(false);
+
+    const tree_nodes = computed({
+      get: () => $store.state.mode_tree,
+      set: (val) => {},
+    });
+
+    watch(
+      () => selected.value,
+      (newValue, oldValue) => {
+        if (newValue == null) {
+          selected.value = "";
+        }
+      }
+    );
+
+    const requestAddModeGroup = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.addModeGroup(selected.value, name.value ?? "");
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("add group") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    const requestEditModeGroup = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.editModeGroup(uuid.value, name.value ?? "");
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("edit group") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1000,
+        });
+      }
+    };
+
+    return {
+      show_dialog,
+      type,
+      name,
+      uuid,
+      selected,
+      loading,
+      tree_nodes,
+      showDialog(options: any) {
+        if (options) {
+          type.value = options.type ?? 1;
+          if (type.value == 2) {
+            name.value = options.data?.name ?? null;
+          }
+          selected.value = options.data?.uuid ?? null;
+          uuid.value = options.data?.uuid ?? null;
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        (selected.value = null), (name.value = null);
+        type.value = 1;
+      },
+      treeNodesFilter(node: any, filter: any) {
+        return node.is_group;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          await (type.value == 2
+            ? requestEditModeGroup()
+            : requestAddModeGroup());
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/ModeTree.vue b/src/components/ModeTree.vue
new file mode 100644
index 0000000..935abbd
--- /dev/null
+++ b/src/components/ModeTree.vue
@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
+      <template v-slot:default-header="prop">
+        <q-item
+          class="full-width"
+          clickable
+          @dblclick="
+            (evt) => !prop.node.is_group && callMode(prop.node.item_data)
+          "
+        >
+          <q-item-section avatar>
+            <q-icon
+              :name="
+                prop.node.is_group
+                  ? 'img:source_icon/group.png'
+                  : 'img:source_icon/hdmi.png'
+              "
+              color="orange"
+              size="28px"
+              class="q-mr-sm"
+            />
+          </q-item-section>
+          <q-item-section>
+            <div class="text-weight-bold text-primary">
+              {{ prop.node.name }}
+            </div>
+          </q-item-section>
+          <q-popup-proxy context-menu>
+            <q-popup-proxy context-menu />
+            <q-list>
+              <q-item
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group && prop.node.item_data)
+                "
+                clickable
+                v-close-popup
+                v-ripple
+                @click="
+                  $refs.mode_dialog.showDialog({
+                    type: 1,
+                    data: { uuid: prop.node.uuid },
+                  })
+                "
+              >
+                <q-item-section avatar><q-icon name="add" /></q-item-section>
+                <q-item-section>{{ $t("add mode item") }}</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group && prop.node.item_data)
+                "
+                v-ripple
+                @click="
+                  () =>
+                    $refs.group_dialog.showDialog({
+                      type: 1,
+                      data: prop.node,
+                    })
+                "
+              >
+                <q-item-section avatar
+                  ><q-icon name="create_new_folder"
+                /></q-item-section>
+                <q-item-section>{{ $t("add group") }}</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-ripple
+                v-close-popup
+                v-if="prop.node.item_data"
+                @click="
+                  () =>
+                    (prop.node.is_group
+                      ? $refs.group_dialog
+                      : $refs.mode_dialog
+                    ).showDialog({
+                      type: 2,
+                      data: prop.node,
+                    })
+                "
+              >
+                <q-item-section avatar><q-icon name="edit" /></q-item-section>
+                <q-item-section>{{ $t("edit") }}</q-item-section>
+              </q-item>
+
+              <q-item
+                clickable
+                v-ripple
+                v-close-popup
+                v-if="prop.node.item_data"
+                @click="
+                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
+                "
+              >
+                <q-item-section avatar
+                  ><q-icon color="red" name="delete"
+                /></q-item-section>
+                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
+              </q-item>
+            </q-list>
+          </q-popup-proxy>
+        </q-item>
+      </template>
+    </q-tree>
+  </div>
+  <mode-group-dialog ref="group_dialog" />
+  <mode-dialog ref="mode_dialog" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
+import { useStore } from "src/store";
+import ModeGroupDialog from "src/components/ModeGroupDialog.vue";
+import ModeDialog from "src/components/ModeDialog.vue";
+import { Common } from "src/common/Common";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { Protocol } from "src/entities/WSProtocol";
+import { ModeEntity } from "src/entities/ModeEntity";
+
+export default defineComponent({
+  name: "PageModeTree",
+
+  components: { ModeGroupDialog, ModeDialog },
+
+  setup() {
+    const $store = useStore();
+    const $q = useQuasar();
+    const $t = useI18n();
+
+    const tree_nodes = computed({
+      get: () => $store.state.mode_tree,
+      set: (val) => {},
+    });
+
+    const tree: any | null = ref(null);
+
+    onMounted(async () => {
+      while (!tree.value.nodes.length) {
+        await Common.waitFor(100);
+      }
+      tree.value?.setExpanded("", true);
+    });
+
+    interface _ResponseMessage {
+      packet: Protocol.PacketEntity;
+      data: string;
+    }
+    EventBus.getInstance().on(
+      EventNamesDefine.NotifyMessage,
+      (response: _ResponseMessage) => {
+        if (response) {
+          switch (response.packet.command) {
+            case Protocol.Commands.kRpcAddMode:
+              {
+                const temp = JSON.parse(
+                  response.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(
+                  response.data
+                ) as Protocol.ModeDeleteNotifyEntity;
+                if (temp) {
+                  $store.commit("deleteModeTreeItem", {
+                    is_group: false,
+                    uuid: temp.uuid,
+                  });
+                }
+              }
+              break;
+            case Protocol.Commands.kRpcEditMode:
+              {
+                const temp = JSON.parse(
+                  response.data
+                ) as Protocol.ModeEditNotifyEntity;
+                if (temp) {
+                  $store.commit("setModeTreeItem", {
+                    is_group: false,
+                    item_data: temp.mode,
+                  });
+                }
+              }
+              break;
+            case Protocol.Commands.kRpcAddModeGroup:
+              {
+                const temp = JSON.parse(
+                  response.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(
+                  response.data
+                ) as Protocol.ModeGroupDeleteNotifyEntity;
+                if (temp) {
+                  $store.commit("deleteModeTreeItem", {
+                    is_group: true,
+                    uuid: temp.uuid,
+                  });
+                }
+              }
+              break;
+            case Protocol.Commands.kRpcEditModeGroup:
+              {
+                const temp = JSON.parse(
+                  response.data
+                ) as Protocol.ModeGroupEditNotifyEntity;
+                if (temp) {
+                  $store.commit("setModeTreeItem", {
+                    is_group: true,
+                    item_data: temp.mode_group,
+                  });
+                }
+              }
+              break;
+          }
+        }
+      }
+    );
+
+    return {
+      tree,
+      tree_nodes,
+      loga(a: any) {
+        console.log(a);
+      },
+      async deleteItem(
+        evt: PointerEvent | null,
+        is_group: boolean,
+        uuid: string
+      ) {
+        let success = false;
+        if (is_group) {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteModeGroup(uuid);
+          if (response) {
+            success = response.success;
+          }
+        } else {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteMode(uuid);
+          if (response) {
+            success = response.success;
+          }
+        }
+
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
+          position: "top",
+          timeout: 1000,
+        });
+      },
+      callMode(item: ModeEntity) {
+        GlobalData.getInstance().getCurrentClient()?.callMode(item.uuid);
+        $q.notify({
+          color: "positive",
+          icon: "done",
+          message: $t.t("call mode directives send") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1000,
+        });
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/GroupDialog.vue b/src/components/SignalSourceGroupDialog.vue
similarity index 96%
rename from src/components/GroupDialog.vue
rename to src/components/SignalSourceGroupDialog.vue
index 9212f15..e497613 100644
--- a/src/components/GroupDialog.vue
+++ b/src/components/SignalSourceGroupDialog.vue
@@ -155,7 +155,7 @@ import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 
 export default defineComponent({
-  name: "ComponentGroupDialog",
+  name: "ComponentSignalSourceGroupDialog",
 
   setup() {
     let $store = useStore();
diff --git a/src/components/SignalSourceTree.vue b/src/components/SignalSourceTree.vue
new file mode 100644
index 0000000..6652a41
--- /dev/null
+++ b/src/components/SignalSourceTree.vue
@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
+      <template v-slot:default-header="prop">
+        <q-item
+          class="full-width"
+          clickable
+          :draggable="!prop.node.is_group"
+          @dragstart="(evt) => onDragStart(evt, prop.node)"
+        >
+          <q-item-section avatar>
+            <q-icon
+              :name="
+                prop.node.is_group
+                  ? 'img:source_icon/group.png'
+                  : getItemIcon(prop.node.item_data?.window_type)
+              "
+              color="orange"
+              size="28px"
+              class="q-mr-sm"
+            />
+          </q-item-section>
+          <q-item-section>
+            <div class="text-weight-bold text-primary">
+              {{ prop.node.name }}
+            </div>
+          </q-item-section>
+          <q-popup-proxy context-menu>
+            <q-popup-proxy context-menu />
+            <q-list>
+              <q-item
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group &&
+                    prop.node.item_data &&
+                    !prop.node.item_data.system_default)
+                "
+                clickable
+                v-close-popup
+                v-ripple
+                @click="
+                  $refs.signal_source_dialog.showDialog({
+                    type: 1,
+                    parent_node: prop.node.uuid,
+                  })
+                "
+              >
+                <q-item-section avatar><q-icon name="add" /></q-item-section>
+                <q-item-section>{{
+                  $t("add signal source item")
+                }}</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                v-if="
+                  prop.node.name == $t('root') ||
+                  (prop.node.is_group &&
+                    prop.node.item_data &&
+                    !prop.node.item_data.system_default)
+                "
+                v-ripple
+                @click="
+                  () =>
+                    $refs.group_dialog.showDialog({
+                      type: 1,
+                      data: prop.node,
+                    })
+                "
+              >
+                <q-item-section avatar
+                  ><q-icon name="create_new_folder"
+                /></q-item-section>
+                <q-item-section>{{ $t("add group") }}</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-ripple
+                v-close-popup
+                v-if="
+                  prop.node.item_data && !prop.node.item_data.system_default
+                "
+                @click="
+                  () =>
+                    (prop.node.is_group
+                      ? $refs.group_dialog
+                      : $refs.signal_source_dialog
+                    ).showDialog({
+                      type: 2,
+                      data: prop.node,
+                    })
+                "
+              >
+                <q-item-section avatar><q-icon name="edit" /></q-item-section>
+                <q-item-section>{{ $t("edit") }}</q-item-section>
+              </q-item>
+
+              <q-item
+                clickable
+                v-ripple
+                v-close-popup
+                v-if="
+                  prop.node.item_data && !prop.node.item_data.system_default
+                "
+                @click="
+                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
+                "
+              >
+                <q-item-section avatar
+                  ><q-icon color="red" name="delete"
+                /></q-item-section>
+                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
+              </q-item>
+            </q-list>
+          </q-popup-proxy>
+        </q-item>
+      </template>
+    </q-tree>
+  </div>
+  <signal-source-group-dialog ref="group_dialog" />
+  <signal-source-dialog ref="signal_source_dialog" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
+import { useStore } from "src/store";
+import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
+import SignalSourceGroupDialog from "src/components/SignalSourceGroupDialog.vue";
+import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
+import { Common } from "src/common/Common";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { Protocol } from "src/entities/WSProtocol";
+
+export default defineComponent({
+  name: "PageSignalSourceTree",
+
+  components: { SignalSourceGroupDialog, SignalSourceDialog },
+
+  setup() {
+    const $store = useStore();
+    const $q = useQuasar();
+    const $t = useI18n();
+
+    const tree_nodes = computed({
+      get: () => $store.state.signal_source_tree,
+      set: (val) => $store.commit("setSignalSourceTree", val),
+    });
+
+    const tree: any | null = ref(null);
+
+    onMounted(async () => {
+      while (!tree.value.nodes.length) {
+        await Common.waitFor(100);
+      }
+      tree.value?.setExpanded("", true);
+    });
+
+    interface _ResponseMessage {
+      packet: Protocol.PacketEntity;
+      data: string;
+    }
+    EventBus.getInstance().on(
+      EventNamesDefine.NotifyMessage,
+      (response: _ResponseMessage) => {
+        if (response) {
+          switch (response.packet.command) {
+            case Protocol.Commands.kRpcAddSignalSource:
+              {
+                const temp = JSON.parse(
+                  response.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(
+                  response.data
+                ) as Protocol.SignalSourceDeleteNotifyEntity;
+                if (temp) {
+                  $store.commit("deleteSignalSourceTreeItem", {
+                    is_group: false,
+                    uuid: temp.uuid,
+                  });
+                }
+              }
+              break;
+            case Protocol.Commands.kRpcEditSignalSource:
+              {
+                const temp = JSON.parse(
+                  response.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(
+                  response.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(
+                  response.data
+                ) as Protocol.SignalSourceGroupDeleteNotifyEntity;
+                if (temp) {
+                  $store.commit("deleteSignalSourceTreeItem", {
+                    is_group: true,
+                    uuid: temp.uuid,
+                  });
+                }
+              }
+              break;
+            case Protocol.Commands.kRpcEditSignalSourceGroup:
+              {
+                const temp = JSON.parse(
+                  response.data
+                ) as Protocol.SignalSourceGroupEditNotifyEntity;
+                if (temp) {
+                  $store.commit("setSignalSourceTreeItem", {
+                    is_group: true,
+                    item_data: temp.signal_source_group,
+                  });
+                }
+              }
+              break;
+          }
+        }
+      }
+    );
+
+    return {
+      tree,
+      tree_nodes,
+      loga(a: any) {
+        console.log(a);
+      },
+      onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
+        e.dataTransfer?.setData("uuid", node.uuid);
+        e.dataTransfer?.setData("node_object", JSON.stringify(node));
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
+        }
+      },
+      getItemIcon(item_type: string) {
+        return Common.getSignalSourceIcon(item_type);
+      },
+      async deleteItem(
+        evt: PointerEvent | null,
+        is_group: boolean,
+        uuid: string
+      ) {
+        let success = false;
+        if (is_group) {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteSignalSourceGroup(uuid);
+          if (response) {
+            success = response.success;
+          }
+        } else {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteSignalSource(uuid);
+          if (response) {
+            success = response.success;
+          }
+        }
+
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
+          position: "top",
+          timeout: 1000,
+        });
+      },
+    };
+  },
+});
+</script>
diff --git a/src/entities/ModeEntity.ts b/src/entities/ModeEntity.ts
new file mode 100644
index 0000000..b5b49a8
--- /dev/null
+++ b/src/entities/ModeEntity.ts
@@ -0,0 +1,42 @@
+import BaseEntity from "./BaseEntity";
+
+export class ModeEntity extends BaseEntity {
+  group_uuid: string = "";
+  name: string = "";
+
+  public static copy(dest: ModeEntity, src?: ModeEntity) {
+    if (!src) {
+      src = new ModeEntity();
+    }
+
+    dest.uuid = src.uuid;
+    dest.base_note = src.base_note;
+    dest.name = src.name;
+    dest.group_uuid = src.group_uuid;
+  }
+}
+
+export class ModeTreeItemEntity {
+  uuid = "";
+  parent = "";
+  name = "";
+  is_group = false;
+  children: ModeTreeItemEntity[] = [];
+  item_data: ModeEntity | null = null;
+
+  constructor(
+    uuid?: string,
+    parent?: string,
+    name?: string,
+    is_group?: boolean,
+    item_data?: any,
+    children?: ModeTreeItemEntity[]
+  ) {
+    this.uuid = uuid ?? "";
+    this.parent = parent ?? "";
+    this.name = name ?? "";
+    this.is_group = is_group ?? false;
+    this.children = children ?? (Array.isArray(children) ? children : []);
+    this.item_data = item_data;
+  }
+}
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 00503c4..1f65712 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -1,6 +1,7 @@
 import { SignalSourceEntity } from "./SignalSourceEntity";
 import ApplicationConfigEntity from "./ApplicationConfigEntity";
 import { WindowOpenNotifyEntity } from "./MultimediaWindowEntity";
+import { ModeEntity } from "./ModeEntity";
 
 export namespace Protocol {
   export class Commands {
@@ -37,6 +38,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcGetSignalSources";
     }
 
+    public static get kRpcGetModes() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetModes";
+    }
+
     public static get kRpcGetApplicationConfig() {
       return Commands.PROTOCOL_PREFIX + "RpcGetApplicationConfig";
     }
@@ -89,6 +94,34 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcEditSignalSource";
     }
 
+    public static get kRpcAddModeGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcAddModeGroup";
+    }
+
+    public static get kRpcDeleteModeGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcDeleteModeGroup";
+    }
+
+    public static get kRpcEditModeGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcEditModeGroup";
+    }
+
+    public static get kRpcAddMode() {
+      return Commands.PROTOCOL_PREFIX + "RpcAddMode";
+    }
+
+    public static get kRpcDeleteMode() {
+      return Commands.PROTOCOL_PREFIX + "RpcDeleteMode";
+    }
+
+    public static get kCallMode() {
+      return Commands.PROTOCOL_PREFIX + "CallMode";
+    }
+
+    public static get kRpcEditMode() {
+      return Commands.PROTOCOL_PREFIX + "RpcEditMode";
+    }
+
     public static get kSetApplicationConfig() {
       return Commands.PROTOCOL_PREFIX + "SetApplicationConfig";
     }
@@ -107,6 +140,7 @@ export namespace Protocol {
       Commands.kLogout,
       Commands.kRpcGetWindows,
       Commands.kRpcGetSignalSources,
+      Commands.kRpcGetModes,
       Commands.kRpcGetApplicationConfig,
       Commands.kMoveWindow,
       Commands.kResizeWindow,
@@ -119,6 +153,12 @@ export namespace Protocol {
       Commands.kRpcAddSignalSource,
       Commands.kRpcDeleteSignalSource,
       Commands.kRpcEditSignalSource,
+      Commands.kRpcAddModeGroup,
+      Commands.kRpcDeleteModeGroup,
+      Commands.kRpcEditModeGroup,
+      Commands.kRpcAddMode,
+      Commands.kRpcDeleteMode,
+      Commands.kRpcEditMode,
       Commands.kSetApplicationConfig,
     ]);
 
@@ -190,6 +230,26 @@ export namespace Protocol {
     }
   }
 
+  export class GetModesRequestEntity extends PacketEntity {
+    timestamp = new Date().getMilliseconds();
+
+    constructor(rpcid?: number) {
+      super();
+      this.rpc_id = rpcid ?? 0;
+      this.command = Commands.kRpcGetModes;
+    }
+  }
+
+  export class GetModesResponseEntity extends PacketEntity {
+    modes: ModeEntity[] = [];
+    mode_groups: [] = [];
+
+    constructor() {
+      super();
+      this.command = Commands.kRpcGetModes;
+    }
+  }
+
   export class GetApplicationConfigRequestEntity extends PacketEntity {
     timestamp: number = new Date().getMilliseconds();
 
@@ -329,7 +389,7 @@ export namespace Protocol {
     }
   }
 
-  export class AddSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+  export class AddSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
     parent_uuid = "";
     name = "";
 
@@ -342,7 +402,7 @@ export namespace Protocol {
     }
   }
 
-  export class AddSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+  export class AddSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -351,7 +411,7 @@ export namespace Protocol {
     }
   }
 
-  export class EditSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+  export class EditSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
     uuid = "";
     name = "";
 
@@ -364,7 +424,7 @@ export namespace Protocol {
     }
   }
 
-  export class EditSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+  export class EditSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -373,7 +433,7 @@ export namespace Protocol {
     }
   }
 
-  export class DeleteSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+  export class DeleteSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
     uuid = "";
 
     constructor(rcp_id?: number, uuid?: string) {
@@ -384,7 +444,7 @@ export namespace Protocol {
     }
   }
 
-  export class DeleteSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+  export class DeleteSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -393,7 +453,7 @@ export namespace Protocol {
     }
   }
 
-  export class AddSignalSourcesRequestEntity extends Protocol.PacketEntity {
+  export class AddSignalSourceRequestEntity extends Protocol.PacketEntity {
     entity: SignalSourceEntity | null = null;
     constructor(rcp_id?: number, entity?: SignalSourceEntity) {
       super();
@@ -403,7 +463,7 @@ export namespace Protocol {
     }
   }
 
-  export class AddSignalSourcesResponseEntity extends Protocol.PacketEntity {
+  export class AddSignalSourceResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -412,7 +472,7 @@ export namespace Protocol {
     }
   }
 
-  export class EditSignalSourcesRequestEntity extends Protocol.PacketEntity {
+  export class EditSignalSourceRequestEntity extends Protocol.PacketEntity {
     entity: SignalSourceEntity | null = null;
     parent_uuid: string = "";
     constructor(
@@ -428,7 +488,7 @@ export namespace Protocol {
     }
   }
 
-  export class EditSignalSourcesResponseEntity extends Protocol.PacketEntity {
+  export class EditSignalSourceResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -437,7 +497,7 @@ export namespace Protocol {
     }
   }
 
-  export class DeleteSignalSourcesRequestEntity extends Protocol.PacketEntity {
+  export class DeleteSignalSourceRequestEntity extends Protocol.PacketEntity {
     uuid: string = "";
     constructor(rcp_id?: number, uuid?: string) {
       super();
@@ -447,7 +507,7 @@ export namespace Protocol {
     }
   }
 
-  export class DeleteSignalSourcesResponseEntity extends Protocol.PacketEntity {
+  export class DeleteSignalSourceResponseEntity extends Protocol.PacketEntity {
     success = false;
 
     constructor() {
@@ -455,7 +515,6 @@ export namespace Protocol {
       this.command = Protocol.Commands.kRpcDeleteSignalSource;
     }
   }
-
   export class SignalSourceGroupEntity extends Protocol.PacketEntity {
     parent_uuid: string = "";
     name: string = "";
@@ -488,6 +547,171 @@ export namespace Protocol {
       new SignalSourceGroupEntity();
   }
 
+  export class AddModeGroupRequestEntity extends Protocol.PacketEntity {
+    parent_uuid = "";
+    name = "";
+
+    constructor(rcp_id?: number, parent_uuid?: string, name?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcAddModeGroup;
+      this.parent_uuid = parent_uuid ?? "";
+      this.name = name ?? "";
+    }
+  }
+
+  export class AddModeGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcAddModeGroup;
+    }
+  }
+
+  export class EditModeGroupRequestEntity extends Protocol.PacketEntity {
+    uuid = "";
+    name = "";
+
+    constructor(rcp_id?: number, uuid?: string, name?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcEditModeGroup;
+      this.uuid = uuid ?? "";
+      this.name = name ?? "";
+    }
+  }
+
+  export class EditModeGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcEditModeGroup;
+    }
+  }
+
+  export class DeleteModeGroupRequestEntity extends Protocol.PacketEntity {
+    uuid = "";
+
+    constructor(rcp_id?: number, uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcDeleteModeGroup;
+      this.uuid = uuid ?? "";
+    }
+  }
+
+  export class DeleteModeGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcDeleteMode;
+    }
+  }
+
+  export class AddModeRequestEntity extends Protocol.PacketEntity {
+    name: string;
+    group_uuid: string;
+    constructor(rcp_id?: number, name?: string, group_uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcAddMode;
+      this.name = name ?? "";
+      this.group_uuid = group_uuid ?? "";
+    }
+  }
+
+  export class AddModeResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcAddMode;
+    }
+  }
+
+  export class EditModeRequestEntity extends Protocol.PacketEntity {
+    name: string;
+    uuid: string;
+    constructor(rcp_id?: number, name?: string, uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcEditMode;
+      this.name = name ?? "";
+      this.uuid = uuid ?? "";
+    }
+  }
+
+  export class EditModeResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcEditMode;
+    }
+  }
+
+  export class DeleteModeRequestEntity extends Protocol.PacketEntity {
+    uuid: string = "";
+    constructor(rcp_id?: number, uuid?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcDeleteMode;
+      this.uuid = uuid ?? "";
+    }
+  }
+
+  export class DeleteModeResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcDeleteMode;
+    }
+  }
+
+  export class CallModeRequestEntity extends Protocol.PacketEntity {
+    uuid: string;
+
+    constructor(uuid: string) {
+      super();
+      this.command = Protocol.Commands.kCallMode;
+      this.flag = Protocol.PacketEntity.FLAG_REQUEST;
+      this.uuid = uuid;
+    }
+  }
+
+  export class ModeGroupEntity extends Protocol.PacketEntity {
+    parent_uuid: string = "";
+    name: string = "";
+  }
+
+  export class ModeAddNotifyEntity extends Protocol.PacketEntity {
+    mode: ModeEntity = new ModeEntity();
+  }
+
+  export class ModeDeleteNotifyEntity extends Protocol.PacketEntity {
+    uuid: string = "";
+  }
+
+  export class ModeEditNotifyEntity extends Protocol.PacketEntity {
+    mode: ModeEntity = new ModeEntity();
+  }
+
+  export class ModeGroupAddNotifyEntity extends Protocol.PacketEntity {
+    mode_group: ModeGroupEntity = new ModeGroupEntity();
+  }
+
+  export class ModeGroupDeleteNotifyEntity extends Protocol.PacketEntity {
+    uuid: string = "";
+  }
+
+  export class ModeGroupEditNotifyEntity extends Protocol.PacketEntity {
+    mode_group: ModeGroupEntity = new ModeGroupEntity();
+  }
+
   export class SetApplicationConfigRequestEntity extends Protocol.PacketEntity {
     key: string = "";
     value: string = "";
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index c8e4258..09ed74e 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -117,4 +117,15 @@ export default {
   "dbclick select file": "双击选择文件",
   "local disk": "本地磁盘",
   usb: "U盘",
+  "Please input vaild ip address": "请输入合法的IP地址",
+  "server ip address": "服务器地址",
+  "please input server ip address": "请输入服务器地址",
+  mode: "模式",
+  plan: "预案",
+  "add mode item": "添加模式",
+  "all mode directives send": "模式调用发送",
+  "please input mode name": "请输入模式名称",
+  "add mode": "添加模式",
+  "mode name": "模式名称",
+  "edit mode": "修改模式",
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ae25db4..521bad4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -23,9 +23,13 @@
             <router-view />
           </div>
 
-          <!-- left -->
-          <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
-            <left-tool-bar />
+          <!-- right -->
+          <div
+            v-if="landspace"
+            class="col-auto overflow-auto"
+            style="border: 1px solid #bdbdbd"
+          >
+            <right-tool-bar />
           </div>
         </div>
       </q-page-container>
@@ -74,6 +78,7 @@
 import { defineComponent, reactive } from "vue";
 
 import LeftToolBar from "src/pages/LeftToolBar.vue";
+import RightToolBar from "src/pages/RightToolBar.vue";
 import TopToolBar from "src/pages/TopToolBar.vue";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
@@ -85,7 +90,7 @@ class _Data {
 export default defineComponent({
   name: "MainLayout",
 
-  components: { LeftToolBar, TopToolBar },
+  components: { LeftToolBar, RightToolBar, TopToolBar },
 
   setup() {
     const data = reactive(new _Data());
diff --git a/src/pages/LeftToolBar.vue b/src/pages/LeftToolBar.vue
index 328c962..7180827 100644
--- a/src/pages/LeftToolBar.vue
+++ b/src/pages/LeftToolBar.vue
@@ -1,308 +1,20 @@
 <template>
   <div>
-    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
-      <template v-slot:default-header="prop">
-        <q-item
-          class="full-width"
-          clickable
-          :draggable="!prop.node.is_group"
-          @dragstart="(evt) => onDragStart(evt, prop.node)"
-        >
-          <q-item-section avatar>
-            <q-icon
-              :name="
-                prop.node.is_group
-                  ? 'img:source_icon/group.png'
-                  : getItemIcon(prop.node.item_data?.window_type)
-              "
-              color="orange"
-              size="28px"
-              class="q-mr-sm"
-            />
-          </q-item-section>
-          <q-item-section>
-            <div class="text-weight-bold text-primary">
-              {{ prop.node.name }}
-            </div>
-          </q-item-section>
-          <q-popup-proxy context-menu>
-            <q-popup-proxy context-menu />
-            <q-list>
-              <q-item
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group &&
-                    prop.node.item_data &&
-                    !prop.node.item_data.system_default)
-                "
-                clickable
-                v-close-popup
-                v-ripple
-                @click="
-                  $refs.signal_source_dialog.showDialog({
-                    type: 1,
-                    parent_node: prop.node.uuid,
-                  })
-                "
-              >
-                <q-item-section avatar><q-icon name="add" /></q-item-section>
-                <q-item-section>{{
-                  $t("add signal source item")
-                }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-close-popup
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group &&
-                    prop.node.item_data &&
-                    !prop.node.item_data.system_default)
-                "
-                v-ripple
-                @click="
-                  () =>
-                    $refs.group_dialog.showDialog({
-                      type: 1,
-                      data: prop.node,
-                    })
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon name="create_new_folder"
-                /></q-item-section>
-                <q-item-section>{{ $t("add group") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="
-                  prop.node.item_data && !prop.node.item_data.system_default
-                "
-                @click="
-                  () =>
-                    (prop.node.is_group
-                      ? $refs.group_dialog
-                      : $refs.signal_source_dialog
-                    ).showDialog({
-                      type: 2,
-                      data: prop.node,
-                    })
-                "
-              >
-                <q-item-section avatar><q-icon name="edit" /></q-item-section>
-                <q-item-section>{{ $t("edit") }}</q-item-section>
-              </q-item>
-
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="
-                  prop.node.item_data && !prop.node.item_data.system_default
-                "
-                @click="
-                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon color="red" name="delete"
-                /></q-item-section>
-                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
-              </q-item>
-            </q-list>
-          </q-popup-proxy>
-        </q-item>
-      </template>
-    </q-tree>
+    <signal-source-tree />
   </div>
-  <group-dialog ref="group_dialog" />
-  <signal-source-dialog ref="signal_source_dialog" />
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
-import { useStore } from "src/store";
-import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
-import GroupDialog from "src/components/GroupDialog.vue";
-import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
-import { Common } from "src/common/Common";
-import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import EventBus, { EventNamesDefine } from "src/common/EventBus";
-import { Protocol } from "src/entities/WSProtocol";
+import { defineComponent } from "vue";
+import SignalSourceTree from "src/components/SignalSourceTree.vue";
 
 export default defineComponent({
   name: "PageLeftToolBar",
 
-  components: { GroupDialog, SignalSourceDialog },
+  components: { SignalSourceTree },
 
   setup() {
-    const $store = useStore();
-    const $q = useQuasar();
-    const $t = useI18n();
-
-    const tree_nodes = computed({
-      get: () => $store.state.signal_source_tree,
-      set: (val) => $store.commit("setSignalSourceTree", val),
-    });
-
-    const tree: any | null = ref(null);
-
-    onMounted(async () => {
-      while (!tree.value.nodes.length) {
-        await Common.waitFor(100);
-      }
-      tree.value?.setExpanded("", true);
-    });
-
-    interface _ResponseMessage {
-      packet: Protocol.PacketEntity;
-      data: string;
-    }
-    EventBus.getInstance().on(
-      EventNamesDefine.NotifyMessage,
-      (response: _ResponseMessage) => {
-        if (response) {
-          switch (response.packet.command) {
-            case Protocol.Commands.kRpcAddSignalSource:
-              {
-                const temp = JSON.parse(
-                  response.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(
-                  response.data
-                ) as Protocol.SignalSourceDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deleteSignalSourceTreeItem", {
-                    is_group: false,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditSignalSource:
-              {
-                const temp = JSON.parse(
-                  response.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(
-                  response.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(
-                  response.data
-                ) as Protocol.SignalSourceGroupDeleteNotifyEntity;
-                if (temp) {
-                  $store.commit("deleteSignalSourceTreeItem", {
-                    is_group: true,
-                    uuid: temp.uuid,
-                  });
-                }
-              }
-              break;
-            case Protocol.Commands.kRpcEditSignalSourceGroup:
-              {
-                const temp = JSON.parse(
-                  response.data
-                ) as Protocol.SignalSourceGroupEditNotifyEntity;
-                if (temp) {
-                  $store.commit("setSignalSourceTreeItem", {
-                    is_group: true,
-                    item_data: temp.signal_source_group,
-                  });
-                }
-              }
-              break;
-          }
-        }
-      }
-    );
-
-    return {
-      tree,
-      tree_nodes,
-      loga(a: any) {
-        console.log(a);
-      },
-      onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
-        e.dataTransfer?.setData("uuid", node.uuid);
-        e.dataTransfer?.setData("node_object", JSON.stringify(node));
-        if (e.dataTransfer) {
-          e.dataTransfer.dropEffect = "move";
-        }
-      },
-      getItemIcon(item_type: string) {
-        return Common.getSignalSourceIcon(item_type);
-      },
-      async deleteItem(
-        evt: PointerEvent | null,
-        is_group: boolean,
-        uuid: string
-      ) {
-        let success = false;
-        if (is_group) {
-          let response = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.deleteSignalSourceGroup(uuid);
-          if (response) {
-            success = response.success;
-          }
-        } else {
-          let response = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.deleteSignalSource(uuid);
-          if (response) {
-            success = response.success;
-          }
-        }
-
-        $q.notify({
-          color: success ? "positive" : "negative",
-          icon: success ? "done" : "warning",
-          message:
-            $t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
-          position: "top",
-          timeout: 1000,
-        });
-      },
-    };
+    return {};
   },
 });
 </script>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 91018db..5370fba 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -14,8 +14,44 @@
               @reset="onReset"
               class="q-gutter-md"
             >
+              <q-input
+                :loading="data.loading"
+                :disable="data.loading"
+                filled
+                v-model="data.ip_address"
+                :label="$t('server ip address')"
+                :hint="$t('please input server ip address')"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) || $t('Please type something'),
+                  (val) =>
+                    val == 'localhost' ||
+                    /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+                      val
+                    ) ||
+                    $t('Please input vaild ip address'),
+                ]"
+                @keydown="
+                  (evt) => {
+                    if (evt.keyCode == 13) {
+                      $refs?.password_input?.focus();
+                    }
+                  }
+                "
+              >
+                <template v-if="data.ip_address" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop="data.ip_address = null"
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+
               <q-input
                 autofocus
+                ref="user_name"
                 :loading="data.loading"
                 :disable="data.loading"
                 filled
@@ -112,7 +148,7 @@ class _Data {
   user_name: string | null = null;
   password: string | null = null;
   loading = false;
-  ip_address = "127.0.0.1";
+  ip_address = window.location.hostname;
   show_password = false;
 
   constructor() {
diff --git a/src/pages/RightToolBar.vue b/src/pages/RightToolBar.vue
new file mode 100644
index 0000000..dc21ccb
--- /dev/null
+++ b/src/pages/RightToolBar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <q-tabs
+      v-model="tab_value"
+      dense
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+    >
+      <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="mode">
+        <mode-tree />
+      </q-tab-panel>
+
+      <q-tab-panel name="plan">
+        <div class="text-h6">Alarms</div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import ModeTree from "src/components/ModeTree.vue";
+
+export default defineComponent({
+  name: "PageRightToolBar",
+
+  components: { ModeTree },
+
+  setup() {
+    let tab_value = ref("mode");
+    return { tab_value };
+  },
+});
+</script>
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index b55b548..6b65eeb 100644
--- a/src/pages/WallPage.vue
+++ b/src/pages/WallPage.vue
@@ -122,6 +122,13 @@ const _getSignalSources = async () => {
     ?.getSignalSources()) as Protocol.GetSignalSourcesResponse;
 };
 
+const _getModes = async () => {
+  const global_data = GlobalData.getInstance();
+  return (await global_data
+    .getCurrentClient()
+    ?.getModes()) as Protocol.GetModesResponseEntity;
+};
+
 const _initSignalSourceTree = async (options: _OptionsType) => {
   const $store = options?.$store;
   if ($store) {
@@ -137,6 +144,21 @@ const _initSignalSourceTree = async (options: _OptionsType) => {
   }
 };
 
+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 _getApplicationConfig = async (options: _OptionsType) => {
   const global_data = GlobalData.getInstance();
   global_data.applicationConfig = (
@@ -177,9 +199,9 @@ const _initialize = async (options: _OptionsType) => {
 
     await _getApplicationConfig(options);
 
-    await _initSignalSourceTree(options).then(() => {
-      _getWindows(options);
-    });
+    await _initSignalSourceTree(options);
+    await _initModeTree(options);
+    _getWindows(options);
   }
 };
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 23f75f5..2d70cbc 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,5 @@
 import { store } from "quasar/wrappers";
+import { ModeEntity, ModeTreeItemEntity } from "src/entities/ModeEntity";
 import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 import {
   SignalSourceEntity,
@@ -29,6 +30,7 @@ export interface StateInterface {
   // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
   initialized: boolean;
   signal_source_tree: SignalSourceTreeItemEntity[];
+  mode_tree: ModeTreeItemEntity[];
   wall_row: number;
   wall_col: number;
   device_screen_width: number;
@@ -77,6 +79,165 @@ class _TreeHelper {
       }
     }
   }
+
+  public static addTreeItem(
+    tree: any,
+    defaultItem: () => any,
+    createTreeItem: (
+      uuid: string,
+      parent: string,
+      name: string,
+      is_group: boolean
+    ) => any,
+    playload?: any
+  ) {
+    if (tree && playload) {
+      const parent = playload.parent ?? "";
+      const is_group = playload.is_group ?? false;
+      let item_data = playload.item_data ?? defaultItem();
+      let node = _TreeHelper.findNode(tree[0], "uuid", item_data.uuid);
+      if (node) {
+        return;
+      }
+
+      node = _TreeHelper.findNode(tree[0], "uuid", parent);
+      if (node) {
+        const node_item = createTreeItem(
+          item_data.uuid,
+          parent,
+          item_data.name,
+          is_group
+        );
+        node_item.item_data = item_data;
+        (<any[]>node.children).push(node_item);
+      }
+    }
+  }
+
+  public static setTreeItem(
+    tree: any,
+    defaultItem: () => any,
+    copy: (left: any, right: any) => void,
+    playload?: any
+  ) {
+    if (tree && playload) {
+      let item_data = playload.item_data ?? defaultItem();
+      let node = _TreeHelper.findNode(tree[0], "uuid", item_data.uuid);
+      if (node) {
+        copy(node.item_data, item_data);
+        node.name = item_data.name;
+      }
+    }
+  }
+
+  public static deleteTreeItem(tree: any, playload?: any) {
+    if (tree && playload && playload.uuid) {
+      let parent = _TreeHelper.findNodeParent(tree[0], "uuid", playload.uuid);
+      if (parent) {
+        let node_index = (<any[]>parent.children).findIndex(
+          (item) => item && item.uuid == playload.uuid
+        );
+        if (node_index != -1) {
+          (<any[]>parent.children).splice(node_index, 1);
+        }
+      }
+    }
+  }
+
+  public static findGroupsByParent(parent: string, array: any[]) {
+    return array.filter((item) => {
+      return item && item.parent_uuid == parent;
+    });
+  }
+
+  public static findItemsByParent(parent: string, array: any[]) {
+    return array.filter((item) => {
+      return item && item.group_uuid == parent;
+    });
+  }
+
+  public static buildGroup(
+    parent: any,
+    createTreeItem: (
+      uuid?: string,
+      parent?: string,
+      name?: string,
+      is_group?: boolean,
+      item_data?: any,
+      children?: any[]
+    ) => any,
+    group_array: any[],
+    item_array: any[]
+  ) {
+    if (parent) {
+      for (let item of _TreeHelper.findGroupsByParent(
+        parent.uuid,
+        group_array
+      )) {
+        const node_item = createTreeItem(
+          item.uuid,
+          parent.uuid,
+          item.name,
+          true
+        );
+        node_item.item_data = item;
+        parent.children.push(node_item);
+        _TreeHelper.buildGroup(
+          node_item,
+          createTreeItem,
+          group_array,
+          item_array
+        );
+      }
+
+      for (let item of _TreeHelper.findItemsByParent(parent.uuid, item_array)) {
+        const node_item = createTreeItem(
+          item.uuid,
+          parent.uuid,
+          item.name,
+          false,
+          item
+        );
+        parent.children.push(node_item);
+      }
+    }
+  }
+
+  public static buildTree(
+    tree: any,
+    group_name: string,
+    items_name: string,
+    createTreeItem: (
+      uuid?: string,
+      parent?: string,
+      name?: string,
+      is_group?: boolean,
+      item_data?: any,
+      children?: any[]
+    ) => any,
+    playload?: any
+  ) {
+    if (
+      tree &&
+      playload &&
+      playload.response &&
+      playload.options &&
+      playload.options.$t
+    ) {
+      const $t = playload.options.$t;
+      const groups = playload.response[group_name] ?? [];
+      const items = playload.response[items_name] ?? [];
+
+      const root = createTreeItem("", "", $t.t("root"), true);
+
+      tree.splice(0, tree.length);
+      tree.push(root);
+
+      _TreeHelper.buildGroup(root, createTreeItem, groups, items);
+    } else {
+      console.error(playload);
+    }
+  }
 }
 
 // provide typings for `useStore` helper
@@ -92,6 +253,7 @@ export default store(function (/* { ssrContext } */) {
       // state
       initialized: false,
       signal_source_tree: [],
+      mode_tree: [],
       wall_col: 1,
       wall_row: 1,
       device_screen_width: 1920,
@@ -189,6 +351,7 @@ export default store(function (/* { ssrContext } */) {
           state.device_screen_height = num;
         }
       },
+      // signal source
       setSignalSourceTree(
         state: StateInterface,
         playload?: SignalSourceTreeItemEntity[]
@@ -198,9 +361,6 @@ export default store(function (/* { ssrContext } */) {
         }
       },
       clearSignalSourceTree(state: StateInterface, playload?: any) {
-        // if (state.signal_source_tree) {
-        //   state.signal_source_tree.splice(0, state.signal_source_tree.length);
-        // }
         state.signal_source_tree = [];
       },
       pushSignalSourceTreeItem(
@@ -343,6 +503,70 @@ export default store(function (/* { ssrContext } */) {
           console.error(playload);
         }
       },
+      //mode tree
+      setModeTree(
+        state: StateInterface,
+        playload?: SignalSourceTreeItemEntity[]
+      ) {
+        if (playload) {
+          state.mode_tree = playload;
+        }
+      },
+      clearModeTree(state: StateInterface, playload?: any) {
+        state.mode_tree = [];
+      },
+      pushModeTreeItem(
+        state: StateInterface,
+        playload?: SignalSourceTreeItemEntity
+      ) {
+        if (playload) {
+          state.mode_tree.push(playload);
+        }
+      },
+      addModeTreeItem(state: StateInterface, playload?: any) {
+        _TreeHelper.addTreeItem(
+          state.mode_tree,
+          () => new ModeEntity(),
+          (uuid: string, parent: string, name: string, is_group: boolean) =>
+            new ModeTreeItemEntity(uuid, parent, name, is_group),
+          playload
+        );
+      },
+      setModeTreeItem(state: StateInterface, playload?: any) {
+        _TreeHelper.setTreeItem(
+          state.mode_tree,
+          () => new ModeEntity(),
+          (left: any, right: any) => ModeEntity.copy(left, right),
+          playload
+        );
+      },
+      deleteModeTreeItem(state: StateInterface, playload?: any) {
+        _TreeHelper.deleteTreeItem(state.mode_tree, playload);
+      },
+      buildModeTree(state: StateInterface, playload?: any) {
+        _TreeHelper.buildTree(
+          state.mode_tree,
+          "mode_groups",
+          "modes",
+          (
+            uuid?: string,
+            parent?: string,
+            name?: string,
+            is_group?: boolean,
+            item_data?: any,
+            children?: SignalSourceTreeItemEntity[]
+          ) =>
+            new ModeTreeItemEntity(
+              uuid,
+              parent,
+              name,
+              is_group,
+              item_data,
+              children
+            ),
+          playload
+        );
+      },
     },
 
     // enable strict mode (adds overhead!)