diff --git a/server/php/display.php b/server/php/display.php
index 6645158..92ba676 100644
--- a/server/php/display.php
+++ b/server/php/display.php
@@ -35,14 +35,8 @@
         .user {
             font-weight: bold;
             margin-right: 10px;
+            /* Color set dynamically via inline style */
         }
-        /* Different colors for different users */
-        .user-0 { color: #4CAF50; }
-        .user-1 { color: #2196F3; }
-        .user-2 { color: #FF9800; }
-        .user-3 { color: #E91E63; }
-        .user-4 { color: #9C27B0; }
-        .user-5 { color: #00BCD4; }
         .text {
             color: white;
         }
@@ -83,9 +77,23 @@
 
         const container = document.getElementById('transcriptions');
         const statusEl = document.getElementById('status');
-        const userColors = new Map(); // Map user names to color indices
+        const userColors = new Map(); // Map user names to HSL colors
         let colorIndex = 0;
 
+        // Generate distinct color for each user using golden ratio
+        function getUserColor(userName) {
+            if (!userColors.has(userName)) {
+                // Use golden ratio for evenly distributed hues
+                const goldenRatio = 0.618033988749895;
+                const hue = (colorIndex * goldenRatio * 360) % 360;
+                // High saturation and medium lightness for vibrant, readable colors
+                const color = `hsl(${hue}, 85%, 65%)`;
+                userColors.set(userName, color);
+                colorIndex++;
+            }
+            return userColors.get(userName);
+        }
+
         // Connect to Server-Sent Events
         function connect() {
             const url = `server.php?action=stream&room=${encodeURIComponent(room)}&passphrase=${encodeURIComponent(passphrase)}`;
@@ -115,19 +123,15 @@
             const div = document.createElement('div');
             div.className = 'transcription';
 
-            // Assign color to user
-            if (!userColors.has(data.user_name)) {
-                userColors.set(data.user_name, colorIndex % 6);
-                colorIndex++;
-            }
-            const userColorClass = `user-${userColors.get(data.user_name)}`;
+            // Get user color (generates new color if first time)
+            const userColor = getUserColor(data.user_name);
 
             let html = '';
             if (showTimestamps && data.timestamp) {
                 html += `<span class="timestamp">[${data.timestamp}]</span>`;
             }
             if (data.user_name) {
-                html += `<span class="user ${userColorClass}">${data.user_name}:</span>`;
+                html += `<span class="user" style="color: ${userColor}">${data.user_name}:</span>`;
             }
             html += `<span class="text">${data.text}</span>`;