diff --git a/webclient-vue/src/components/device/DeviceTable.vue b/webclient-vue/src/components/device/DeviceTable.vue
index 25e7034..df0b0c7 100644
--- a/webclient-vue/src/components/device/DeviceTable.vue
+++ b/webclient-vue/src/components/device/DeviceTable.vue
@@ -44,7 +44,7 @@
 <script setup>
 import { computed } from "vue";
 import { useDevicesStore } from "../../stores/devices";
-import { GnTable, GnButton } from "gnexus-ui-kit/vue";
+import { GnTable, GnButton, useToast } from "gnexus-ui-kit/vue";
 import DeviceConnectionBadge from "../../features/devices/components/DeviceConnectionBadge.vue";
 import DeviceStateCell from "../../features/devices/components/DeviceStateCell.vue";
 
@@ -55,6 +55,7 @@
 });
 
 const devicesStore = useDevicesStore();
+const toast = useToast();
 
 const TYPE_ICONS = {
   relay: '<i class="ph ph-toggle-left"></i>',
@@ -88,8 +89,14 @@
   );
 }
 
-function reboot(id) {
-  devicesStore.rebootDevice(id);
+async function reboot(id) {
+  const device = props.devices.find((d) => String(d.id) === String(id));
+  const result = await devicesStore.rebootDevice(id);
+  if (!result.ok) {
+    toast.error({ title: "Reboot failed", text: result.error?.message || "Failed to reboot device" });
+  } else {
+    toast.success({ title: "Rebooting", text: `Device ${device?.name || device?.alias || "#" + id} is rebooting` });
+  }
 }
 </script>
 
diff --git a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
index c400dd3..58eaf9e 100644
--- a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
+++ b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
@@ -29,6 +29,18 @@
           <span class="info-value">{{ device.device_type }}</span>
         </div>
         <div class="info-row">
+          <span class="info-label">State:</span>
+          <span class="info-value">
+            <DeviceChannelsState
+              :device-type="device.device_type"
+              :response="devicesStore.currentDeviceStatus?.raw"
+              :loading="isLoadingStatus"
+              :error="statusError?.message"
+              :connection-status="device.connection_status"
+            />
+          </span>
+        </div>
+        <div class="info-row">
           <span class="info-label">IP:</span>
           <span class="info-value">{{ device.device_ip }}</span>
         </div>
@@ -64,33 +76,6 @@
         <div class="block-title">Description</div>
         <p>{{ device.description }}</p>
       </div>
-
-      <div v-if="device.connection_status === 'active'" class="devices-panel">
-        <div class="block-title">Channel status</div>
-        <AppLoadingState v-if="isLoadingStatus" text="Loading channel status" />
-        <AppErrorState
-          v-else-if="statusError"
-          title="Status loading failed"
-          :message="statusError.message"
-          :retry="loadStatus"
-        />
-        <GnTable
-          v-else-if="channels.length > 0"
-          :columns="channelColumns"
-          :rows="channels"
-          caption="Channels"
-        >
-          <template #cell-state="{ row }">
-            <GnBadge :variant="row.state === 'on' || row.state === true ? 'success' : 'secondary'"
-            >{{ row.state }}</GnBadge>
-          </template>
-        </GnTable>
-        <AppEmptyState
-          v-else
-          title="No channels"
-          message="No channel data available."
-        />
-      </div>
     </div>
 
     <AppEmptyState
@@ -179,7 +164,6 @@
   GnModal,
   GnInput,
   GnAlert,
-  GnTable,
   GnSelect,
   useToast,
 } from "gnexus-ui-kit/vue";
@@ -189,6 +173,7 @@
 import AreaBadgeLink from "../../../components/area/AreaBadgeLink.vue";
 import AreaAssignSection from "../../../components/area/AreaAssignSection.vue";
 import PageActionsDropdown from "../../../components/layout/PageActionsDropdown.vue";
+import DeviceChannelsState from "../components/DeviceChannelsState.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -211,9 +196,9 @@
 const device = computed(() => devicesStore.currentDevice);
 const isLoading = computed(() => devicesStore.isLoadingDetail);
 const error = computed(() => devicesStore.errorDetail);
-const isLoadingStatus = computed(() => devicesStore.isLoadingStates);
-const statusError = computed(() => devicesStore.stateError);
-const channels = computed(() => devicesStore.currentDeviceStatus?.channels || []);
+
+const isLoadingStatus = ref(false);
+const statusError = ref(null);
 
 const area = computed(() => {
   const areaId = device.value?.area_id;
@@ -231,11 +216,6 @@
 const removeLoading = ref(false);
 const removeError = ref("");
 
-const channelColumns = [
-  { key: "channel", label: "Channel" },
-  { key: "state", label: "State" },
-  { key: "type", label: "Type" },
-];
 
 const deviceActions = computed(() => [
   { label: "Edit", icon: "ph-pencil", onSelect: openEdit },
@@ -334,7 +314,7 @@
   if (!result.ok) {
     toast.error({ title: "Reboot failed", text: result.error?.message || "Failed to reboot device" });
   } else {
-    toast.success({ title: "Rebooting", text: `Device ${device.value.name || device.value.alias} is rebooting` });
+    toast.success({ title: "Rebooting", text: `Device ${device.value.name || device.value.alias || "#" + device.value.id} is rebooting` });
   }
 }
 
@@ -342,7 +322,17 @@
   const id = deviceId.value;
   if (!id || !device.value) return;
   if (device.value.connection_status !== "active") return;
-  await devicesStore.loadDeviceStatus(id);
+
+  isLoadingStatus.value = true;
+  statusError.value = null;
+
+  const result = await devicesStore.loadDeviceStatus(id);
+
+  isLoadingStatus.value = false;
+
+  if (!result.ok) {
+    statusError.value = result.error;
+  }
 }
 
 async function init() {