diff --git a/webclient-vue/src/components/device/DeviceTable.vue b/webclient-vue/src/components/device/DeviceTable.vue
new file mode 100644
index 0000000..25e7034
--- /dev/null
+++ b/webclient-vue/src/components/device/DeviceTable.vue
@@ -0,0 +1,127 @@
+<template>
+  <GnTable
+    :columns="columns"
+    :rows="devices"
+    :caption="caption"
+  >
+    <template #cell-device="{ row }">
+      <router-link
+        :to="{ name: 'device-detail', params: { id: String(row.id) } }"
+        class="device-link"
+      >
+        <div class="device-cell">
+          <div class="device-icon" v-html="typeIcon(row.device_type)" />
+          <div class="device-info">
+            <strong>{{ row.name || row.alias || `Device #${row.id}` }}</strong>
+            <small>{{ row.alias }} — {{ row.device_ip || '—' }}</small>
+          </div>
+        </div>
+      </router-link>
+    </template>
+
+    <template #cell-connect="{ row }">
+      <DeviceConnectionBadge :status="row.connection_status || 'unknown'" />
+    </template>
+
+    <template #cell-state="{ row }">
+      <DeviceStateCell :state="stateFor(row)" />
+    </template>
+
+    <template v-if="showActions" #cell-actions="{ row }">
+      <GnButton
+        variant="warning"
+        icon="ph-arrow-clockwise"
+        size="sm"
+        :loading="devicesStore.isRebooting(row.id)"
+        @click="reboot(row.id)"
+      >
+        Reboot
+      </GnButton>
+    </template>
+  </GnTable>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useDevicesStore } from "../../stores/devices";
+import { GnTable, GnButton } from "gnexus-ui-kit/vue";
+import DeviceConnectionBadge from "../../features/devices/components/DeviceConnectionBadge.vue";
+import DeviceStateCell from "../../features/devices/components/DeviceStateCell.vue";
+
+const props = defineProps({
+  devices: { type: Array, required: true },
+  showActions: { type: Boolean, default: true },
+  caption: { type: String, default: "Devices" },
+});
+
+const devicesStore = useDevicesStore();
+
+const TYPE_ICONS = {
+  relay: '<i class="ph ph-toggle-left"></i>',
+  button: '<i class="ph ph-hand-tap"></i>',
+  sensor: '<i class="ph ph-thermometer"></i>',
+};
+
+const columns = computed(() => {
+  const cols = [
+    { key: "device", label: "Device" },
+    { key: "connect", label: "Connect" },
+    { key: "state", label: "State" },
+  ];
+  if (props.showActions) {
+    cols.push({ key: "actions", label: "Actions" });
+  }
+  return cols;
+});
+
+function typeIcon(type) {
+  return TYPE_ICONS[type] || TYPE_ICONS.relay;
+}
+
+function stateFor(device) {
+  return (
+    devicesStore.stateByDeviceId[String(device.id)] || {
+      status: "idle",
+      message: "Not loaded",
+      connectionStatus: device.connection_status || "unknown",
+    }
+  );
+}
+
+function reboot(id) {
+  devicesStore.rebootDevice(id);
+}
+</script>
+
+<style scoped>
+.device-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.device-icon {
+  font-size: 20px;
+  color: var(--color-primary);
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.device-info small {
+  color: var(--color-muted);
+  font-size: 12px;
+}
+
+.device-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.device-link:hover strong {
+  color: var(--color-primary);
+}
+</style>
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index 23e4cca..2699b9d 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -68,11 +68,7 @@
           title="No devices"
           message="No devices assigned to this area."
         />
-        <GnTable v-else :rows="areasStore.currentAreaDevices" :columns="deviceColumns">
-          <template #cell-actions="{ row }">
-            <router-link :to="{ name: 'devices' }" class="area-link">View device</router-link>
-          </template>
-        </GnTable>
+        <DeviceTable v-else :devices="areasStore.currentAreaDevices" caption="Area devices" />
       </div>
 
       <div class="devices-panel">
@@ -171,6 +167,7 @@
 import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
 import AreaBadgeLink from "../../../components/area/AreaBadgeLink.vue";
 import AreaAssignSection from "../../../components/area/AreaAssignSection.vue";
+import DeviceTable from "../../../components/device/DeviceTable.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -226,12 +223,6 @@
 const showRemoveDialog = ref(false);
 const removeDialogMessage = ref("");
 
-const deviceColumns = [
-  { key: "alias", label: "Alias" },
-  { key: "name", label: "Name" },
-  { key: "device_type", label: "Type" },
-];
-
 const scriptColumns = [
   { key: "alias", label: "Alias" },
   { key: "name", label: "Name" },
diff --git a/webclient-vue/src/features/devices/pages/DevicesListPage.vue b/webclient-vue/src/features/devices/pages/DevicesListPage.vue
index 50df986..99576d4 100644
--- a/webclient-vue/src/features/devices/pages/DevicesListPage.vue
+++ b/webclient-vue/src/features/devices/pages/DevicesListPage.vue
@@ -41,46 +41,7 @@
         :message="devicesStore.stateError.message"
       />
 
-      <GnTable
-        :columns="tableColumns"
-        :rows="devicesStore.devices"
-        caption="Registered devices"
-      >
-        <template #cell-device="{ row }">
-          <router-link
-            :to="{ name: 'device-detail', params: { id: String(row.id) } }"
-            class="device-link"
-          >
-            <div class="device-cell">
-              <div class="device-icon" v-html="typeIcon(row.device_type)" />
-              <div class="device-info">
-                <strong>{{ row.name || row.alias || `Device #${row.id}` }}</strong>
-                <small>{{ row.alias }} — {{ row.device_ip || '—' }}</small>
-              </div>
-            </div>
-          </router-link>
-        </template>
-
-        <template #cell-connect="{ row }">
-          <DeviceConnectionBadge :status="row.connection_status || 'unknown'" />
-        </template>
-
-        <template #cell-state="{ row }">
-          <DeviceStateCell :state="stateFor(row)" />
-        </template>
-
-        <template #cell-actions="{ row }">
-          <GnButton
-            variant="warning"
-            icon="ph-arrow-clockwise"
-            size="sm"
-            :loading="devicesStore.isRebooting(row.id)"
-            @click="reboot(row.id)"
-          >
-            Reboot
-          </GnButton>
-        </template>
-      </GnTable>
+      <DeviceTable :devices="devicesStore.devices" caption="Registered devices" />
     </div>
   </section>
 </template>
@@ -88,50 +49,22 @@
 <script setup>
 import { onMounted, computed } from "vue";
 import { useDevicesStore } from "../../../stores/devices";
-import { GnPageHeader, GnButton, GnBadge, GnTable } from "gnexus-ui-kit/vue";
+import { GnPageHeader, GnButton, GnBadge } from "gnexus-ui-kit/vue";
 
 const STALE_THRESHOLD_MS = 5 * 60 * 1000;
 import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
 import AppErrorState from "../../../components/feedback/AppErrorState.vue";
 import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
-import DeviceConnectionBadge from "../components/DeviceConnectionBadge.vue";
-import DeviceStateCell from "../components/DeviceStateCell.vue";
+import DeviceTable from "../../../components/device/DeviceTable.vue";
 
 const devicesStore = useDevicesStore();
 
-const TYPE_ICONS = {
-  relay: '<i class="ph ph-toggle-left"></i>',
-  button: '<i class="ph ph-hand-tap"></i>',
-  sensor: '<i class="ph ph-thermometer"></i>',
-};
-
 const isStale = computed(() => {
   if (!devicesStore.lastLoadedAt) return false;
   const loaded = new Date(devicesStore.lastLoadedAt).getTime();
   return Date.now() - loaded > STALE_THRESHOLD_MS;
 });
 
-const tableColumns = [
-  { key: "device", label: "Device" },
-  { key: "connect", label: "Connect" },
-  { key: "state", label: "State" },
-  { key: "actions", label: "Actions" },
-];
-
-function typeIcon(type) {
-  return TYPE_ICONS[type] || TYPE_ICONS.relay;
-}
-
-function stateFor(device) {
-  return (
-    devicesStore.stateByDeviceId[String(device.id)] || {
-      status: "idle",
-      message: "Not loaded",
-      connectionStatus: device.connection_status || "unknown",
-    }
-  );
-}
-
 async function reload() {
   const result = await devicesStore.loadDevices();
 
@@ -140,10 +73,6 @@
   }
 }
 
-function reboot(id) {
-  devicesStore.rebootDevice(id);
-}
-
 onMounted(reload);
 </script>
 
@@ -155,34 +84,4 @@
   margin-bottom: 12px;
 }
 
-.device-cell {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.device-icon {
-  font-size: 20px;
-  color: var(--color-primary);
-}
-
-.device-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.device-info small {
-  color: var(--color-muted);
-  font-size: 12px;
-}
-
-.device-link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.device-link:hover strong {
-  color: var(--color-primary);
-}
 </style>