diff --git a/webclient-vue/src/components/device/DeviceTable.vue b/webclient-vue/src/components/device/DeviceTable.vue
index 8c06df5..0dd1746 100644
--- a/webclient-vue/src/components/device/DeviceTable.vue
+++ b/webclient-vue/src/components/device/DeviceTable.vue
@@ -24,7 +24,7 @@
                   'text-danger': row.connection_status !== 'active',
                 }"
                 aria-hidden="true"
-                :title="`Connection: ${row.connection_status || 'unknown'}`"
+                :title="row.connection_status === 'active' ? 'Online' : 'Offline'"
               />
             </div>
             <small class="text-muted">{{ row.alias }} — {{ row.device_ip || '—' }}</small>
diff --git a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
index 6dda2dc..b6f5e16 100644
--- a/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
+++ b/webclient-vue/src/features/devices/pages/DeviceDetailPage.vue
@@ -18,7 +18,7 @@
 
       <div class="device-meta">
         <GnBadge :variant="device.connection_status === 'active' ? 'success' : 'danger'"
-        >{{ device.connection_status }}</GnBadge>
+        >{{ device.connection_status === 'active' ? 'Online' : 'Offline' }}</GnBadge>
         <code>{{ device.alias }}</code>
         <AreaBadgeLink :area="area" :areaId="device.area_id" />
       </div>