diff --git a/src/components/TheSocketConnectionState.vue b/src/components/TheSocketConnectionState.vue
index 0606c8e..8f48023 100644
--- a/src/components/TheSocketConnectionState.vue
+++ b/src/components/TheSocketConnectionState.vue
@@ -6,9 +6,13 @@
 </script>
 
 <template>
-  <span class="text-slate-900 dark:text-slate-400 shadow-blue-500/50">
+  <span :class="{
+    'px-2 py-1 rounded-md inline-block w-48': true,
+    'text-slate-900 dark:text-slate-400': socketConnected,
+    'text-slate-50 bg-red-600': !socketConnected,
+  }">
     <span class="mr-1">Socket.IO:</span>
     <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
-    <span v-show="!socketConnected" class="font-semibold text-red-500">Disconnected</span>
+    <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
   </span>
 </template>
\ No newline at end of file