diff --git a/webclient-vue/src/components/device/DeviceTable.vue b/webclient-vue/src/components/device/DeviceTable.vue
index df0b0c7..0231afe 100644
--- a/webclient-vue/src/components/device/DeviceTable.vue
+++ b/webclient-vue/src/components/device/DeviceTable.vue
@@ -24,7 +24,13 @@
     </template>
 
     <template #cell-state="{ row }">
-      <DeviceStateCell :state="stateFor(row)" />
+      <DeviceChannelsState
+        :device-type="row.device_type"
+        :response="stateFor(row).response"
+        :loading="stateFor(row).status === 'loading'"
+        :error="stateFor(row).status === 'error' ? stateFor(row).message : null"
+        :connection-status="row.connection_status || 'unknown'"
+      />
     </template>
 
     <template v-if="showActions" #cell-actions="{ row }">
@@ -46,7 +52,7 @@
 import { useDevicesStore } from "../../stores/devices";
 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";
+import DeviceChannelsState from "../../features/devices/components/DeviceChannelsState.vue";
 
 const props = defineProps({
   devices: { type: Array, required: true },
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index ea131bf..9ef13fc 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -144,6 +144,7 @@
 import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAreasStore } from "../../../stores/areas";
+import { useDevicesStore } from "../../../stores/devices";
 import { useFavoritesStore } from "../../../stores/favorites";
 import { useAreaAssign } from "../../../composables/useAreaAssign";
 import {
@@ -168,6 +169,7 @@
 const route = useRoute();
 const router = useRouter();
 const areasStore = useAreasStore();
+const devicesStore = useDevicesStore();
 const favoritesStore = useFavoritesStore();
 const toast = useToast();
 
@@ -315,6 +317,9 @@
 
   if (areasStore.areasById[String(id)]) {
     await areasStore.loadAreaDetail(id);
+    if (areasStore.currentAreaDevices.length > 0) {
+      await devicesStore.loadStatesFor(areasStore.currentAreaDevices);
+    }
   }
 }