diff --git a/public/index.html b/public/index.html
index 31d3c98..59e3d94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -106,6 +106,25 @@
             padding: 1.5rem;
             transition: all 0.3s ease;
             cursor: pointer;
+            position: relative;
+        }
+        
+        .member-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        
+        .member-card:hover::before {
+            opacity: 1;
         }
         
         .member-card:hover {
@@ -146,7 +165,7 @@
         }
         
         .member-card.expanded .expand-icon {
-            transform: rotate(180deg);
+            transform: rotate(90deg);
         }
         
         .member-details {
@@ -482,6 +501,35 @@
                     
                     console.log(`Setting up card ${index} with IP: ${memberIp}`);
 
+                    // Make the entire card clickable
+                    card.addEventListener('click', async (e) => {
+                        // Don't trigger if clicking on the expand icon (to avoid double-triggering)
+                        if (e.target === expandIcon) {
+                            return;
+                        }
+                        
+                        console.log('Card clicked for IP:', memberIp);
+                        
+                        const isExpanding = !card.classList.contains('expanded');
+                        console.log('Is expanding:', isExpanding);
+                        
+                        if (isExpanding) {
+                            // Expanding - fetch detailed status
+                            console.log('Starting to expand...');
+                            await loadNodeDetails(card, memberIp);
+                            card.classList.add('expanded');
+                            expandIcon.classList.add('expanded');
+                            console.log('Card expanded successfully');
+                        } else {
+                            // Collapsing
+                            console.log('Collapsing...');
+                            card.classList.remove('expanded');
+                            expandIcon.classList.remove('expanded');
+                            console.log('Card collapsed successfully');
+                        }
+                    });
+                    
+                    // Keep the expand icon click handler for visual feedback
                     if (expandIcon) {
                         expandIcon.addEventListener('click', async (e) => {
                             e.stopPropagation();
@@ -506,10 +554,12 @@
                             }
                         });
                         
-                        console.log(`Event listener added for card ${index}`);
+                        console.log(`Event listener added for expand icon on card ${index}`);
                     } else {
                         console.error(`No expand icon found for card ${index}`);
                     }
+                    
+                    console.log(`Event listener added for card ${index}`);
                 });
             }, 100);
         }
@@ -518,6 +568,9 @@
         document.addEventListener('DOMContentLoaded', function() {
             refreshClusterMembers();
         });
+
+        // Auto-refresh every 30 seconds
+        setInterval(refreshClusterMembers, 30000);
     </script>
 </body>
 </html> 
\ No newline at end of file