diff --git a/web/src/views/MachineList.vue b/web/src/views/MachineList.vue
index 9a85326..a84ae73 100644
--- a/web/src/views/MachineList.vue
+++ b/web/src/views/MachineList.vue
@@ -20,7 +20,7 @@
 
     <!-- Cards -->
     <div class="cards-grid">
-      <div v-for="m in machines" :key="m.id" class="server-card" :class="{ 'guest-card': !isAdmin }" @click="isAdmin && goDetail(m.id)">
+      <div v-for="m in machines" :key="m.id" class="server-card" :class="[osClass(m.os_type), { 'guest-card': !isAdmin, 'offline-card': !m.is_online }]" @click="isAdmin && goDetail(m.id)">
         <div class="card-header">
           <div class="title-row">
             <span class="status-dot" :class="m.is_online ? 'online' : 'offline'"></span>
@@ -281,6 +281,11 @@ function getMainDisk(str) {
   return root || null
 }
 
+function osClass(os) {
+  const map = { Linux: 'os-linux', Windows: 'os-windows', macOS: 'os-macos' }
+  return map[os] || 'os-other'
+}
+
 function formatTime(t) {
   if (!t) return '-'
   const d = new Date(t)
@@ -338,8 +343,21 @@ function formatTime(t) {
   padding: 18px;
   box-shadow: var(--shadow);
   border: 1px solid var(--border);
+  border-left-width: 4px;
   cursor: pointer;
-  transition: transform .12s ease, box-shadow .2s ease;
+  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
+}
+.server-card.os-linux { border-left-color: #3b82f6; background: linear-gradient(90deg, rgba(59,130,246,0.04) 0%, var(--surface) 20px); }
+.server-card.os-windows { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34,197,94,0.04) 0%, var(--surface) 20px); }
+.server-card.os-macos { border-left-color: #a855f7; background: linear-gradient(90deg, rgba(168,85,247,0.04) 0%, var(--surface) 20px); }
+.server-card.os-other { border-left-color: #6b7280; background: linear-gradient(90deg, rgba(107,114,128,0.04) 0%, var(--surface) 20px); }
+
+.server-card.offline-card {
+  opacity: 0.72;
+  filter: grayscale(0.45);
+}
+.server-card.offline-card .hostname {
+  color: var(--text-secondary);
 }
 .server-card:hover {
   transform: translateY(-2px);