diff --git a/LichessWebView/templates/index.html b/LichessWebView/templates/index.html
index a5b8469..0999d32 100644
--- a/LichessWebView/templates/index.html
+++ b/LichessWebView/templates/index.html
@@ -238,6 +238,44 @@
             color: #6B5432 !important;
             text-decoration: underline !important;
         }
+
+        .user-link {
+            color: inherit;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        .user-link:hover {
+            color: #6B5432;
+            text-decoration: underline;
+        }
+
+        .user-item.active .user-link {
+            color: inherit;
+        }
+
+        .user-item.active .user-link:hover {
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        .username-link {
+            color: #8B6F47;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        .username-link:hover {
+            color: #6B5432;
+            text-decoration: underline;
+        }
+
+        .user-item.active .username-link {
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        .user-item.active .username-link:hover {
+            color: rgba(255, 255, 255, 0.95);
+        }
     </style>
 </head>
 <body>
@@ -381,17 +419,32 @@
                 return;
             }
 
-            usersList.innerHTML = filteredUsers.map(user => `
+            usersList.innerHTML = filteredUsers.map(user => {
+                const userName = escapeHtml(user.first_name);
+                const username = user.username && user.username !== '-' ? escapeHtml(user.username) : null;
+                const telegramLink = username ? `https://t.me/${username}` : `tg://user?id=${user.user_id}`;
+                
+                return `
                 <div class="user-item ${selectedUserId === user.user_id ? 'active' : ''}" onclick="selectUser(${user.user_id})">
-                    <div class="user-name">${escapeHtml(user.first_name)}</div>
-                    <div class="user-info">@${escapeHtml(user.username)} • ID: ${user.user_id}</div>
+                    <div class="user-name">
+                        <a href="${telegramLink}" target="_blank" class="user-link" onclick="event.stopPropagation();">
+                            ${userName}
+                        </a>
+                    </div>
+                    <div class="user-info">
+                        ${username ? 
+                            `<a href="${telegramLink}" target="_blank" class="username-link" onclick="event.stopPropagation();">@${username}</a>` : 
+                            `<span>ID: ${user.user_id}</span>`
+                        } • ID: ${user.user_id}
+                    </div>
                     <div class="user-info">Добавлен: ${formatDate(user.created_at)}</div>
                     <div class="user-stats">
-<span>📊 ${user.gamer_count} игроков</span>
+                        <span>📊 ${user.gamer_count} игроков</span>
                         <span>⏰ ${user.monitored_gamers} с уведомл.</span>
                     </div>
                 </div>
-            `).join('');
+            `;
+            }).join('');
         }
 
         // Выбор пользователя
@@ -404,8 +457,21 @@
             
             if (user) {
                 document.getElementById('selected-user-info').style.display = 'block';
-                document.getElementById('selected-user-name').textContent = user.first_name;
-                document.getElementById('selected-user-username').textContent = `@${user.username} • ID: ${user.user_id}`;
+                const username = user.username && user.username !== '-' ? user.username : null;
+                const telegramLink = username ? `https://t.me/${username}` : `tg://user?id=${user.user_id}`;
+                
+                // Create name with link
+                const nameElement = document.getElementById('selected-user-name');
+                nameElement.innerHTML = `<a href="${telegramLink}" target="_blank" class="user-link" style="color: #5C4033; text-decoration: none;">${escapeHtml(user.first_name)}</a>`;
+                
+                // Create username with link
+                const usernameElement = document.getElementById('selected-user-username');
+                if (username) {
+                    usernameElement.innerHTML = `<a href="${telegramLink}" target="_blank" class="username-link" style="color: #8B6F47; text-decoration: none;">@${escapeHtml(username)}</a> • ID: ${user.user_id}`;
+                } else {
+                    usernameElement.textContent = `ID: ${user.user_id}`;
+                }
+                
                 document.getElementById('selected-user-date').textContent = `Добавлен: ${formatDate(user.created_at)}`;
             }
 
