diff --git a/css/styles.css b/css/styles.css
index a9a459e..7c86c8b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -73,7 +73,9 @@ a:hover { text-decoration: underline; }
 .user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
 .users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
 .user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
-.user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
+.user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; overflow: hidden; }
+.user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.user-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
 .user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
 .user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
 .user-actions { display: flex; gap: 12px; align-items: center; }
diff --git a/js/main.js b/js/main.js
index 1720066..b8a29fa 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
   checkSession();
+  if (getCookie('sessionid')) {
+    loadUsers();
+  }
 });
 
 function getCookie(name) {
@@ -229,8 +232,11 @@ async function loadUsers() {
       data.data.forEach(user => {
         const card = document.createElement('div');
         card.className = 'user-card';
+        const avatarContent = user.image 
+          ? `<img src="${user.image}" alt="${user.username || 'user'}" class="user-avatar-img" />`
+          : `<span class="user-avatar-text">${(user.username || '').charAt(0).toUpperCase()}</span>`;
         card.innerHTML = `
-          <div class="user-avatar">${(user.username || '').charAt(0).toUpperCase()}</div>
+          <div class="user-avatar">${avatarContent}</div>
           <div class="user-info">
             <h4>${user.username || 'N/A'}</h4>
             <p class="user-company">${user.company || ''}</p>