diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 23024a3..134dcb7 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -58,11 +58,12 @@ import AgentBar from "../components/AgentBar.astro";
 
     // === Globaalit tilat ===
     const defaultAgents = {
-        manager: { name: 'Manageri', avatar: '/avatars/owl.png', model: 'qwen-coder', prompt: 'You are a project manager. Break tasks into files, prioritize, coordinate.', order: 0 },
-        coder:   { name: 'Koodari', avatar: '/avatars/chameleon.png', model: 'qwen-coder', prompt: 'You are an expert developer. Write clean, working code. Respond with code only.', order: 1 },
-        tester:  { name: 'Testaaja', avatar: '/avatars/mantis.png', model: 'qwen-coder', prompt: 'You are a code reviewer. Find bugs, suggest improvements. Be brief.', order: 2 },
-        qa:      { name: 'QA', avatar: '/avatars/tortoise.png', model: 'qwen-coder', prompt: 'You are a QA engineer. Write tests, verify edge cases.', order: 3 },
-        data:    { name: 'Data', avatar: '/avatars/elephant.png', model: 'qwen-coder', prompt: 'You are a database expert. Design schemas, optimize queries.', order: 4 },
+        manager: { name: 'Manageri', avatar: '/avatars/karhunpentu.png', model: 'qwen-coder', prompt: 'You are a project manager. Break tasks into files, prioritize, coordinate.', order: 0 },
+        coder:   { name: 'Koodari', avatar: '/avatars/kipina_notext.png', model: 'qwen-coder', prompt: 'You are an expert developer. Write clean, working code. Respond with code only.', order: 1 },
+        data:    { name: 'Data', avatar: '/avatars/pesukarhu_notext.png', model: 'qwen-coder', prompt: 'You are a database expert. Design schemas, optimize queries.', order: 2 },
+        qa:      { name: 'QA', avatar: '/avatars/susi_notext.png', model: 'qwen-coder', prompt: 'You are a QA engineer. Write tests, verify edge cases.', order: 3 },
+        tester:  { name: 'DevOps', avatar: '/avatars/laiskiainen_notext.png', model: 'qwen-coder', prompt: 'You are a code reviewer and DevOps engineer. Find bugs, review deployments.', order: 4 },
+        observer:{ name: 'Tarkkailija', avatar: '/avatars/aikuinen_susi.png', model: 'qwen-coder', prompt: 'You are an independent observer. Monitor the team, flag risks.', order: 5 },
     };
     let agents = JSON.parse(localStorage.getItem('kpn-agents') || 'null') || JSON.parse(JSON.stringify(defaultAgents));
     function saveAgents() { localStorage.setItem('kpn-agents', JSON.stringify(agents)); }
@@ -87,9 +88,9 @@ import AgentBar from "../components/AgentBar.astro";
         const bar = document.getElementById('agent-bar');
         const sorted = Object.entries(agents).sort((a,b) => (a[1].order||0) - (b[1].order||0));
         bar.innerHTML = sorted.map(([key, a]) =>
-            `<div class="agent-avatar${selectedAgent===key?' active':''}" data-agent="${key}" onclick="selectAgent('${key}')" draggable="true" ondragstart="dragAgent(event,'${key}')" ondragover="event.preventDefault()" ondrop="dropAgent(event,'${key}')" title="${esc(a.name)} — ${esc(a.prompt?.substring(0,60))}...">` +
-            `<img src="${a.avatar}" alt="${esc(a.name)}" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">` +
-            `<span style="font-size:10px;color:#8b949e;text-align:center;display:block">${esc(a.name)}</span></div>`
+            `<div class="agent-avatar${selectedAgent===key?' active':''}" data-agent="${key}" onclick="selectAgent('${key}')" draggable="true" ondragstart="dragAgent(event,'${key}')" ondragover="event.preventDefault()" ondrop="dropAgent(event,'${key}')" title="${esc(a.name)}">` +
+            `<img src="${a.avatar}" alt="${esc(a.name)}">` +
+            `<div class="avatar-name">${esc(a.name)}</div></div>`
         ).join('');
     }
     renderAgentBar();
diff --git a/network-poc/frontend/src/styles/global.css b/network-poc/frontend/src/styles/global.css
index 9b85510..2f67795 100644
--- a/network-poc/frontend/src/styles/global.css
+++ b/network-poc/frontend/src/styles/global.css
@@ -125,16 +125,44 @@ body {
 
 /* Agent avatars */
 .agent-avatar {
-    cursor: pointer; text-align: center; transition: transform 0.15s;
-    opacity: 0.6;
+    background: linear-gradient(145deg, rgba(33,38,45,0.4) 0%, rgba(13,17,23,0.8) 100%);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(240,246,252,0.1);
+    border-radius: 12px;
+    padding: 6px 6px 4px;
+    text-align: center;
+    width: 72px;
+    opacity: 0.8;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+.agent-avatar:hover {
+    opacity: 0.85;
+    transform: translateY(-2px) scale(1.02);
+    border-color: rgba(240,246,252,0.3);
+    box-shadow: 0 8px 14px rgba(0,0,0,0.4);
+}
+.agent-avatar img {
+    width: 50px; height: 50px; border-radius: 12px;
+    margin-bottom: 4px; border: 2px solid rgba(240,246,252,0.1);
+    transition: all 0.4s ease; object-fit: cover;
+}
+.agent-avatar .avatar-name {
+    font-size: 10px; color: #8b949e; white-space: nowrap;
+    overflow: hidden; text-overflow: ellipsis;
 }
-.agent-avatar:hover { transform: scale(1.1); opacity: 0.9; }
 .agent-avatar.active {
     opacity: 1;
+    transform: translateY(-8px) scale(1.05);
+    border-color: var(--accent);
+    background: linear-gradient(145deg, rgba(88,166,255,0.15) 0%, rgba(13,17,23,0.9) 100%);
+    box-shadow: 0 16px 24px rgba(0,0,0,0.5), 0 0 20px rgba(88,166,255,0.3);
+    z-index: 2;
 }
 .agent-avatar.active img {
-    border-color: var(--accent) !important;
-    box-shadow: 0 0 8px rgba(88,166,255,0.3);
+    border-color: var(--accent);
+    box-shadow: 0 0 25px rgba(88,166,255,0.8);
 }
 
 /* Animations */