diff --git a/src/components/PageLayout/vertical-with-site.vue b/src/components/PageLayout/vertical-with-site.vue
index 80bb79c..edb40f8 100644
--- a/src/components/PageLayout/vertical-with-site.vue
+++ b/src/components/PageLayout/vertical-with-site.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 // vertical layout, and with site switch function
-import { watch, computed } from "vue";
+import { watch, computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import { loadModuleRoutes } from "@/router/utils";
 import { useAccountStore } from "@/store/modules/account";
 import { useLang } from "@/hooks/useLang";
 import { useNostr } from "@/hooks/useNostr";
 import KeplrWallet from "./keplr-wallet.vue";
+import { useIotDevices } from "@/hooks/useIotDevices";
 
 const props = defineProps<{
   menus?: RouteChildrenConfigsTable[];
@@ -16,6 +17,8 @@ const props = defineProps<{
 const { t } = useLang();
 const { nostrStore, relay } = useNostr();
 const route = useRoute();
+const { data, loading, getIotDevices } = useIotDevices();
+getIotDevices();
 
 const children = computed(() => {
   if (props.menus) {
@@ -42,12 +45,28 @@ watch(
 );
 
 const accountStore = useAccountStore();
+
+const currentDevice = ref(route.params.name);
 </script>
 <template>
   <div class="container mx-auto py-10">
     <div class="flex">
       <div>
         <select
+          v-if="from === 'iot'"
+          class="select select-primary w-52 ml-2"
+          v-model="currentDevice"
+        >
+          <option disabled>Pick a device</option>
+          <option v-if="loading" :value="currentDevice">
+            {{ currentDevice }}
+          </option>
+          <option v-else v-for="r in data.devices" :value="r.name">
+            {{ r.name }}
+          </option>
+        </select>
+        <select
+          v-else
           class="select select-primary w-52 ml-2"
           v-model="nostrStore.url"
         >
diff --git a/src/hooks/useIotDevices.ts b/src/hooks/useIotDevices.ts
new file mode 100644
index 0000000..72f8698
--- /dev/null
+++ b/src/hooks/useIotDevices.ts
@@ -0,0 +1,33 @@
+import { reactive, ref } from "vue";
+import { loadData } from "@/utils/shared";
+
+export function useIotDevices() {
+  const data = reactive({
+    devices: [],
+    page: 1,
+    limit_num: 30
+  });
+  const loading = ref(false);
+
+  const getIotDevices = async () => {
+    data.devices = [];
+
+    loading.value = true;
+    loadData(
+      data.devices,
+      "iot.device.list",
+      {
+        page: data.page,
+        limit_num: data.limit_num
+      },
+      loading
+    );
+    data.page++;
+  };
+
+  return {
+    data,
+    loading,
+    getIotDevices
+  };
+}
diff --git a/src/views/iot.bak/device/index.vue b/src/views/iot.bak/device/index.vue
deleted file mode 100644
index f996429..0000000
--- a/src/views/iot.bak/device/index.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
-import { loadData, transMapToArr } from "@/utils/shared";
-import MessageVerified from "@/components/MessageVerified.vue";
-import eventBus from "@/utils/event-bus";
-
-import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-type Row = {
-  name: string;
-  health: object;
-  res: object;
-  path: string;
-  loading: boolean;
-};
-
-const data = reactive({
-  devices: [],
-  disabled: true,
-  page: 1,
-  limit_num: 30
-});
-const loading = ref(false);
-
-const loadDevices = async () => {
-  data.devices = [];
-
-  loading.value = true;
-  loadData(
-    data.devices,
-    "iot.device.list",
-    {
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
-
-onMounted(async () => {
-  loadDevices();
-});
-
-const loadMore = async () => {
-  loadDevices();
-};
-
-// 监听到事件刷新页面
-eventBus.on("refreshDevices", _status => {
-  loadDevices();
-});
-onBeforeUnmount(() => {
-  eventBus.off("refreshDevices");
-});
-
-const onSub = (row: Row) => {
-  const loading = ref();
-  row.loading = true;
-  row.res = {};
-  loadData(
-    row.res,
-    "iot.device.sub",
-    {
-      name: row.name,
-      path: row.path
-    },
-    loading,
-    () => {
-      row.loading = false;
-    }
-  );
-};
-</script>
-<template>
-  <h2>{{ t("nav." + $route.meta.title.toLowerCase()) }}</h2>
-  <label for="device-modal" class="btn btn-primary mt-5">
-    <IconifyIconOnline
-      class="mr-2"
-      icon="mingcute:plugin-fill"
-      width="20px"
-      height="20px"
-    />{{ t("iot.new device") }}
-  </label>
-  <div class="grid grid-cols-3 gap-4 mt-5">
-    <div
-      v-for="(d, k) in data.devices"
-      class="card shadow-md row-span-1 border"
-    >
-      <MessageVerified
-        :event="d.event"
-        class="absolute right-[-10px] top-[-10px]"
-      />
-      <div class="card-body">
-        <h2 class="card-title text-primary">
-          <IconifyIconOnline
-            icon="mingcute:device-line"
-            width="30px"
-            height="30px"
-          />
-          {{ d.name }}
-        </h2>
-        <p class="text-sm font-semibold mt-5">Health</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.health)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-        <div class="collapse bg-base-200 rounded-md">
-          <input type="checkbox" class="peer" />
-          <div
-            class="collapse-title bg-slate-200 peer-checked:bg-slate-600 peer-checked:text-white flex items-center"
-          >
-            Sub Message
-          </div>
-          <div class="collapse-content">
-            <div class="mt-5 flex items-center justify-between">
-              <input
-                type="text"
-                class="input input-primary"
-                v-model="data.devices[k].path"
-                placeholder="Path, eg: read_value"
-              />
-              <button class="btn btn-primary ml-1" @click="onSub(d)">
-                <span class="loading loading-spinner" v-if="d?.loading" />
-                Send
-              </button>
-            </div>
-            <div
-              v-if="d.res"
-              class="rounded-md mt-2 p-2 bg-slate-800 text-green-400 font-mono"
-            >
-              {{ d.res?.data }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card shadow-md row-span-1 border" v-if="0">
-      <div class="card-body">
-        <progress v-if="loading" class="progress row-span-1" />
-
-        <button class="btn w-full mt-10" :disabled="loading" @click="loadMore">
-          <IconifyIconOnline
-            class="mr-2"
-            icon="material-symbols:add-circle"
-            width="30px"
-            height="30px"
-          />{{ t("common.loadmore") }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/views/iot.bak/index.vue b/src/views/iot.bak/index.vue
deleted file mode 100644
index 6e6451e..0000000
--- a/src/views/iot.bak/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup lang="ts">
-import VerticalLayout from "@/components/PageLayout/vertical-with-site.vue";
-</script>
-<template>
-  <VerticalLayout />
-</template>
diff --git a/src/views/iot.bak/mqtt/configmap-page.vue b/src/views/iot.bak/mqtt/configmap-page.vue
deleted file mode 100644
index 5ee8ed6..0000000
--- a/src/views/iot.bak/mqtt/configmap-page.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { loadData, transMapToArr } from "@/utils/shared";
-import MessageVerified from "@/components/MessageVerified.vue";
-
-import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-const data = reactive({
-  configmaps: [],
-  disabled: true,
-  page: 1,
-  limit_num: 30
-});
-const loading = ref(false);
-
-const loadService = async () => {
-  loading.value = true;
-  loadData(
-    data.configmaps,
-    "iot.mqtt.configmap",
-    {
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
-
-onMounted(async () => {
-  loadService();
-});
-
-const loadMore = async () => {
-  loadService();
-};
-</script>
-<template>
-  <div class="grid grid-cols-3 gap-4 mt-5">
-    <div v-for="d in data.configmaps" class="card shadow-md row-span-1 border">
-      <MessageVerified
-        :event="d.event"
-        class="absolute right-[-10px] top-[-10px]"
-      />
-      <div class="card-body">
-        <h2 class="card-title text-primary">
-          <IconifyIconOnline
-            icon="ic:outline-autorenew"
-            width="30px"
-            height="30px"
-          />
-          {{ d.metadata.name }}
-        </h2>
-        <div class="tooltip text-left tooltip-left" data-tip="Namespace">
-          <div class="badge badge-primary badge-outline break-all">
-            {{ d.metadata.namespace }}
-          </div>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">Annotations</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.metadata?.annotations)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">{{ t("container.labels") }}</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.metadata?.labels)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="card shadow-md row-span-1 border">
-      <div class="card-body">
-        <progress v-if="loading" class="progress row-span-1" />
-
-        <button class="btn w-full mt-10" :disabled="loading" @click="loadMore">
-          <IconifyIconOnline
-            class="mr-2"
-            icon="material-symbols:add-circle"
-            width="30px"
-            height="30px"
-          />{{ t("common.loadmore") }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/views/iot.bak/mqtt/deployment-page.vue b/src/views/iot.bak/mqtt/deployment-page.vue
deleted file mode 100644
index d3554eb..0000000
--- a/src/views/iot.bak/mqtt/deployment-page.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { loadData, transMapToArr } from "@/utils/shared";
-import MessageVerified from "@/components/MessageVerified.vue";
-
-import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-const data = reactive({
-  deployments: [],
-  disabled: true,
-  page: 1,
-  limit_num: 30
-});
-const loading = ref(false);
-
-const loadService = async () => {
-  loading.value = true;
-  loadData(
-    data.deployments,
-    "iot.mqtt.deployment",
-    {
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
-
-onMounted(async () => {
-  loadService();
-});
-
-const getStatusPercent = d => {
-  const ready = d.status?.readyReplicas || 0;
-  const total = d.status?.replicas;
-  let percent = Math.floor(ready / total) * 100;
-
-  if (percent === 0) percent = 10;
-  if (percent === 100) percent = 99;
-
-  return percent;
-};
-
-const loadMore = async () => {
-  loadService();
-};
-</script>
-<template>
-  <div class="grid grid-cols-3 gap-4 mt-5">
-    <div v-for="d in data.deployments" class="card shadow-md row-span-1 border">
-      <MessageVerified
-        :event="d.event"
-        class="absolute right-[-10px] top-[-10px]"
-      />
-      <div class="card-body">
-        <h2 class="card-title text-primary">
-          <IconifyIconOnline
-            icon="ic:outline-autorenew"
-            width="30px"
-            height="30px"
-          />
-          {{ d.metadata.name }}
-        </h2>
-        <div class="tooltip text-left tooltip-left" data-tip="Namespace">
-          <div class="badge badge-primary badge-outline break-all">
-            {{ d.metadata.namespace }}
-          </div>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">{{ t("container.labels") }}</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.metadata?.labels)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">{{ t("common.status") }}</p>
-        <div>
-          <div
-            class="radial-progress"
-            :class="getStatusPercent(d) < 90 ? 'text-warning' : 'text-success'"
-            :style="{ '--value': getStatusPercent(d) }"
-          >
-            {{ d.status?.readyReplicas || 0 }} / {{ d.status.replicas }}
-          </div>
-          <p class="mt-2 text-slate-500 text-xs">
-            {{ t("container.ready") }}/{{ t("container.total") }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="card shadow-md row-span-1 border">
-      <div class="card-body">
-        <progress v-if="loading" class="progress row-span-1" />
-
-        <button class="btn w-full mt-10" :disabled="loading" @click="loadMore">
-          <IconifyIconOnline
-            class="mr-2"
-            icon="material-symbols:add-circle"
-            width="30px"
-            height="30px"
-          />{{ t("common.loadmore") }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/views/iot.bak/mqtt/edgeservice-page.vue b/src/views/iot.bak/mqtt/edgeservice-page.vue
deleted file mode 100644
index 7987a9d..0000000
--- a/src/views/iot.bak/mqtt/edgeservice-page.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { loadData, transMapToArr } from "@/utils/shared";
-import MessageVerified from "@/components/MessageVerified.vue";
-
-import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-const data = reactive({
-  configmaps: [],
-  disabled: true,
-  page: 1,
-  limit_num: 30
-});
-const loading = ref(false);
-
-const loadService = async () => {
-  loading.value = true;
-  loadData(
-    data.configmaps,
-    "iot.mqtt.edge",
-    {
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
-
-onMounted(async () => {
-  loadService();
-});
-
-const loadMore = async () => {
-  loadService();
-};
-</script>
-<template>
-  <div class="grid grid-cols-3 gap-4 mt-5">
-    <div v-for="d in data.configmaps" class="card shadow-md row-span-1 border">
-      <MessageVerified
-        :event="d.event"
-        class="absolute right-[-10px] top-[-10px]"
-      />
-      <div class="card-body">
-        <h2 class="card-title text-primary">
-          <IconifyIconOnline
-            icon="ic:outline-autorenew"
-            width="30px"
-            height="30px"
-          />
-          {{ d.metadata.name }}
-        </h2>
-        <div class="tooltip text-left tooltip-left" data-tip="Namespace">
-          <div class="badge badge-primary badge-outline break-all">
-            {{ d.metadata.namespace }}
-          </div>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">Spec</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.spec)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-
-        <p class="text-sm font-semibold mt-5">{{ t("container.labels") }}</p>
-        <div class="max-h-[100px] overflow-y-auto">
-          <p
-            v-for="label in transMapToArr(d?.metadata?.labels)"
-            class="mb-2 leading-3 break-all text-xs"
-          >
-            {{ label.k }} : {{ label.v }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="card shadow-md row-span-1 border">
-      <div class="card-body">
-        <progress v-if="loading" class="progress row-span-1" />
-
-        <button class="btn w-full mt-10" :disabled="loading" @click="loadMore">
-          <IconifyIconOnline
-            class="mr-2"
-            icon="material-symbols:add-circle"
-            width="30px"
-            height="30px"
-          />{{ t("common.loadmore") }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/views/iot.bak/mqtt/index.vue b/src/views/iot.bak/mqtt/index.vue
deleted file mode 100644
index 3d66d71..0000000
--- a/src/views/iot.bak/mqtt/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { useRoute, RouterLink } from "vue-router";
-import ConfigmapPage from "./configmap-page.vue";
-import DeploymentPage from "./deployment-page.vue";
-import ServicePage from "./service-page.vue";
-import EdgeServicePage from "./edgeservice-page.vue";
-import { useLang } from "@/hooks/useLang";
-
-const { t } = useLang();
-const route = useRoute();
-
-const tabsMap = {
-  service: ServicePage,
-  deployment: DeploymentPage,
-  configmap: ConfigmapPage,
-  edgeservice: EdgeServicePage
-};
-
-const activeTab = computed(() => {
-  return (route.query.tab as string) || "service";
-});
-
-const tabePageComponent = computed(() => {
-  return tabsMap[activeTab.value] || ServicePage;
-});
-
-const getTabText = tab => {
-  const map = {
-    service: "Service",
-    deployment: "Deployment",
-    configmap: "Configmap",
-    edgeservice: "Edge Service"
-  };
-
-  return map[tab];
-};
-</script>
-
-<template>
-  <h2>{{ t("nav." + $route.meta.title.toLowerCase()) }}</h2>
-  <div class="tabs tabs-boxed mt-5">
-    <RouterLink
-      class="tab"
-      :class="{ 'tab-active': activeTab === i }"
-      :key="k"
-      v-for="(i, k) in Object.keys(tabsMap)"
-      :to="{ name: 'iot.mqtt', query: { tab: i } }"
-      >{{ getTabText(i) }}</RouterLink
-    >
-  </div>
-
-  <component :is="tabePageComponent" class="mt-5" />
-</template>
-
-<style scoped></style>
diff --git a/src/views/iot.bak/mqtt/service-page.vue b/src/views/iot.bak/mqtt/service-page.vue
deleted file mode 100644
index 2046240..0000000
--- a/src/views/iot.bak/mqtt/service-page.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-import { showEventModal } from "@/utils/shared";
-import { loadData } from "@/utils/shared";
-import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-const data = reactive({
-  services: [],
-  disabled: true,
-  page: 1,
-  limit_num: 3,
-  form: {
-    name: "" // 服务名称
-  }
-});
-const loading = ref(false);
-
-const loadMore = async () => {
-  loadService();
-};
-
-const onSearch = () => {
-  data.services.length = 0;
-  data.page = 1;
-  loadService();
-};
-
-const loadService = async () => {
-  loading.value = true;
-  loadData(
-    data.services,
-    "iot.mqtt.service",
-    {
-      service_name: data.form.name,
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
-
-onMounted(async () => {
-  loadService();
-});
-</script>
-<template>
-  <div>
-    <div class="form-control w-1/3 mt-5">
-      <div class="input-group w-full">
-        <input
-          type="text"
-          v-model="data.form.name"
-          :placeholder="t('mesh.searchName') + '...'"
-          class="input input-bordered w-full"
-        />
-        <button class="btn btn-square" @click="onSearch">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div class="grid grid-flow-row grid-cols-3 gap-4 mt-5">
-      <div class="card col-span-1 shadow border" v-for="s in data.services">
-        <div class="card-body">
-          <h2 class="card-title">
-            {{ s.metadata.name }}
-            <label
-              class="btn btn-success w-40 text-white rounded-full"
-              for="event-modal"
-              @click="showEventModal(s.event)"
-            >
-              <IconifyIconOnline
-                class="mr-2"
-                icon="wpf:security-checked"
-                width="25px"
-                height="25px"
-              />
-              {{ t("common.verified") }}
-            </label>
-          </h2>
-          <p class="text-sm text-slate-400">
-            NAMESPACE: {{ s.metadata.namespace }}
-          </p>
-        </div>
-      </div>
-
-      <div class="card shadow-md row-span-1 border">
-        <div class="card-body">
-          <progress v-if="loading" class="progress row-span-1" />
-
-          <button
-            class="btn w-full mt-10"
-            :disabled="loading"
-            @click="loadMore"
-          >
-            <IconifyIconOnline
-              class="mr-2"
-              icon="material-symbols:add-circle"
-              width="30px"
-              height="30px"
-            />{{ t("common.loadmore") }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 1a82268..a1c64f4 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -1,81 +1,28 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
-import { loadData, transMapToArr } from "@/utils/shared";
+import { onMounted, onBeforeUnmount } from "vue";
+import { transMapToArr } from "@/utils/shared";
 import MessageVerified from "@/components/MessageVerified.vue";
 import eventBus from "@/utils/event-bus";
-
+import { useIotDevices } from "@/hooks/useIotDevices";
 import { useLang } from "@/hooks/useLang";
-const { t } = useLang();
-
-type Row = {
-  name: string;
-  health: object;
-  res: object;
-  path: string;
-  loading: boolean;
-};
-
-const data = reactive({
-  devices: [],
-  disabled: true,
-  page: 1,
-  limit_num: 30
-});
-const loading = ref(false);
 
-const loadDevices = async () => {
-  data.devices = [];
-
-  loading.value = true;
-  loadData(
-    data.devices,
-    "iot.device.list",
-    {
-      page: data.page,
-      limit_num: data.limit_num
-    },
-    loading
-  );
-  data.page++;
-};
+const { t } = useLang();
+const { data, loading, getIotDevices } = useIotDevices();
 
 onMounted(async () => {
-  loadDevices();
+  getIotDevices();
 });
-
-const loadMore = async () => {
-  loadDevices();
-};
-
 // 监听到事件刷新页面
 eventBus.on("refreshDevices", _status => {
-  loadDevices();
+  getIotDevices();
 });
 onBeforeUnmount(() => {
   eventBus.off("refreshDevices");
 });
-
-const onSub = (row: Row) => {
-  const loading = ref();
-  row.loading = true;
-  row.res = {};
-  loadData(
-    row.res,
-    "iot.device.sub",
-    {
-      name: row.name,
-      path: row.path
-    },
-    loading,
-    () => {
-      row.loading = false;
-    }
-  );
-};
 </script>
 <template>
   <h2>{{ t("nav." + $route.meta.title.toLowerCase()) }}</h2>
-  <label for="device-modal" class="btn btn-primary mt-5">
+  <label for="device-modal" class="btn btn-primary mt-5" :class="{ loading }">
     <IconifyIconOnline
       class="mr-2"
       icon="mingcute:plugin-fill"
@@ -85,7 +32,7 @@ const onSub = (row: Row) => {
   </label>
   <div class="grid grid-cols-2 gap-4 mt-5">
     <div
-      v-for="(d, k) in data.devices"
+      v-for="d in data.devices"
       class="card shadow-md row-span-1 border hover:shadow-2xl"
     >
       <MessageVerified
@@ -113,48 +60,6 @@ const onSub = (row: Row) => {
             {{ label.k }} : {{ label.v }}
           </p>
         </div>
-        <div class="collapse bg-base-200 rounded-md">
-          <input type="checkbox" class="peer" />
-          <div
-            class="collapse-title bg-slate-200 peer-checked:bg-slate-600 peer-checked:text-white flex items-center"
-          >
-            Sub Message
-          </div>
-          <div class="collapse-content">
-            <div class="mt-5 flex items-center justify-between">
-              <input
-                type="text"
-                class="input input-primary"
-                v-model="data.devices[k].path"
-                placeholder="Path, eg: read_value"
-              />
-              <button class="btn btn-primary ml-1" @click="onSub(d)">
-                <span class="loading loading-spinner" v-if="d?.loading" />
-                Send
-              </button>
-            </div>
-            <div
-              v-if="d.res"
-              class="rounded-md mt-2 p-2 bg-slate-800 text-green-400 font-mono"
-            >
-              {{ d.res?.data }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card shadow-md row-span-1 border" v-if="0">
-      <div class="card-body">
-        <progress v-if="loading" class="progress row-span-1" />
-
-        <button class="btn w-full mt-10" :disabled="loading" @click="loadMore">
-          <IconifyIconOnline
-            class="mr-2"
-            icon="material-symbols:add-circle"
-            width="30px"
-            height="30px"
-          />{{ t("common.loadmore") }}
-        </button>
       </div>
     </div>
   </div>