diff --git a/network-poc/frontend/public/avatars/README.md b/network-poc/frontend/public/avatars/README.md
new file mode 100644
index 0000000..b5f7c11
--- /dev/null
+++ b/network-poc/frontend/public/avatars/README.md
@@ -0,0 +1,34 @@
+# Kipinä Agentic Playground - Animaatioiden käyttöönotto
+
+Koska Kipinä-verkon agenttien avatarit tällä erää ovat staattisia PNG-kuvatiedostoja, käyttöliittymä hyödyntää CSS-pohjaista pomppimisilmiötä (sekä pulppuavaa 💬 puhekuplaa) "puhumisen" merkkinä. Olemme kuitenkin koodanneet taustalle piilotetun tuen aivioiduille videoloopeille myöhempää käyttöä varten!
+
+Näin saat UI:n tukemaan oikeasti animoituja kasvoja/videoita.
+
+## 1. Luo Animoidut GIF-tiedostot
+Valitse mikä tahansa ulkoinen AI-työkalu (kuten HeyGen, Pika v1.0, tai Midjourney+Runway yhdistelmä) ja muunna avatar-kuvat (esim. `kettu_notext.png`) 3-5 sekunnin kestäviksi GIF-loopeiksi. Hahmon leuka tulisi pyöriä tai naama vääntyillä puhuessaan.
+
+## 2. Nimeä Tiedostot Oikein ja Lisää Ne Kansioon
+Siirrä uudet GIF-animaatiot samaan kansioon alkuperäisten kuvien kanssa. Muuta niiden nimi siten, että se päättyy tunnisteeseen `_puhuva.gif`.
+
+Esimerkkejä:
+- Koodari `kipina_notext.png` → `kipina_notext_puhuva.gif`
+- Manageri `karhunpentu.png` → `karhunpentu_puhuva.gif`
+- Asiakas `kettu_notext.png` → `kettu_notext_puhuva.gif`
+
+## 3. Aktivoi Koodi
+Käännä Kipinä Playground -ohjaimen JavaScript-koodista piilotettu ominaisuus päälle.
+
+Etsi tiedostosta `../index.html` (noin riviltä 1084, `updatePromptEditor`-funktiosta):
+```javascript
+// Piilotettu ominaisuus: Puhuvien videoiden / gif-animaatioiden kytkentä
+window.USE_ANIMATED_GIFS = false;
+```
+Muuta tuo `false` arvoon `true`:
+```javascript
+window.USE_ANIMATED_GIFS = true;
+```
+
+**Mitä logiikka tekee?**
+Aina kun valitset agentin kaaviosta, koodi korvaa aktiivisen kuvakkeen lopussa olevan `.png` -päätteen sanalla `_puhuva.gif` – lennosta! Jos poistut agentin valinnasta tai valitset jonkun toisen, koodi vaihtaa kuvan välittömästi takaisin staattiseen `.png`-versioon ja sulkee ilmentymän suun.
+
+Näin saat kaikkien asiantuntijoiden face-track looppeja hallittua yhdellä kädenkäänteellä.
diff --git a/network-poc/frontend/public/avatars/aikuinen_susi.png b/network-poc/frontend/public/avatars/aikuinen_susi.png
new file mode 100644
index 0000000..15f0b8c
Binary files /dev/null and b/network-poc/frontend/public/avatars/aikuinen_susi.png differ
diff --git a/network-poc/frontend/public/avatars/bear.png b/network-poc/frontend/public/avatars/bear.png
new file mode 100644
index 0000000..4ad534b
Binary files /dev/null and b/network-poc/frontend/public/avatars/bear.png differ
diff --git a/network-poc/frontend/public/avatars/beaver.png b/network-poc/frontend/public/avatars/beaver.png
new file mode 100644
index 0000000..a849229
Binary files /dev/null and b/network-poc/frontend/public/avatars/beaver.png differ
diff --git a/network-poc/frontend/public/avatars/chameleon.png b/network-poc/frontend/public/avatars/chameleon.png
new file mode 100644
index 0000000..2269580
Binary files /dev/null and b/network-poc/frontend/public/avatars/chameleon.png differ
diff --git a/network-poc/frontend/public/avatars/elephant.png b/network-poc/frontend/public/avatars/elephant.png
new file mode 100644
index 0000000..adb465b
Binary files /dev/null and b/network-poc/frontend/public/avatars/elephant.png differ
diff --git a/network-poc/frontend/public/avatars/gecko.png b/network-poc/frontend/public/avatars/gecko.png
new file mode 100644
index 0000000..68d450a
Binary files /dev/null and b/network-poc/frontend/public/avatars/gecko.png differ
diff --git a/network-poc/frontend/public/avatars/gecko_notext.png b/network-poc/frontend/public/avatars/gecko_notext.png
new file mode 100644
index 0000000..8968876
Binary files /dev/null and b/network-poc/frontend/public/avatars/gecko_notext.png differ
diff --git a/network-poc/frontend/public/avatars/karhunpentu.png b/network-poc/frontend/public/avatars/karhunpentu.png
new file mode 100644
index 0000000..17a2044
Binary files /dev/null and b/network-poc/frontend/public/avatars/karhunpentu.png differ
diff --git a/network-poc/frontend/public/avatars/kettu_notext.png b/network-poc/frontend/public/avatars/kettu_notext.png
new file mode 100644
index 0000000..81e2c18
Binary files /dev/null and b/network-poc/frontend/public/avatars/kettu_notext.png differ
diff --git a/network-poc/frontend/public/avatars/kipina_notext.png b/network-poc/frontend/public/avatars/kipina_notext.png
new file mode 100644
index 0000000..63077ca
Binary files /dev/null and b/network-poc/frontend/public/avatars/kipina_notext.png differ
diff --git a/network-poc/frontend/public/avatars/laiskiainen.png b/network-poc/frontend/public/avatars/laiskiainen.png
new file mode 100644
index 0000000..d1dbf2c
Binary files /dev/null and b/network-poc/frontend/public/avatars/laiskiainen.png differ
diff --git a/network-poc/frontend/public/avatars/laiskiainen_notext.png b/network-poc/frontend/public/avatars/laiskiainen_notext.png
new file mode 100644
index 0000000..df61301
Binary files /dev/null and b/network-poc/frontend/public/avatars/laiskiainen_notext.png differ
diff --git a/network-poc/frontend/public/avatars/lion.png b/network-poc/frontend/public/avatars/lion.png
new file mode 100644
index 0000000..54eb922
Binary files /dev/null and b/network-poc/frontend/public/avatars/lion.png differ
diff --git a/network-poc/frontend/public/avatars/mantis.png b/network-poc/frontend/public/avatars/mantis.png
new file mode 100644
index 0000000..211b6ab
Binary files /dev/null and b/network-poc/frontend/public/avatars/mantis.png differ
diff --git a/network-poc/frontend/public/avatars/old/forge_hero.png b/network-poc/frontend/public/avatars/old/forge_hero.png
new file mode 100644
index 0000000..0a6e222
Binary files /dev/null and b/network-poc/frontend/public/avatars/old/forge_hero.png differ
diff --git a/network-poc/frontend/public/avatars/old/gecko_hero.png b/network-poc/frontend/public/avatars/old/gecko_hero.png
new file mode 100644
index 0000000..8968876
Binary files /dev/null and b/network-poc/frontend/public/avatars/old/gecko_hero.png differ
diff --git a/network-poc/frontend/public/avatars/old/kipina.png b/network-poc/frontend/public/avatars/old/kipina.png
new file mode 100644
index 0000000..8a56588
Binary files /dev/null and b/network-poc/frontend/public/avatars/old/kipina.png differ
diff --git a/network-poc/frontend/public/avatars/old/serpent_hero.png b/network-poc/frontend/public/avatars/old/serpent_hero.png
new file mode 100644
index 0000000..a6831d1
Binary files /dev/null and b/network-poc/frontend/public/avatars/old/serpent_hero.png differ
diff --git a/network-poc/frontend/public/avatars/owl.png b/network-poc/frontend/public/avatars/owl.png
new file mode 100644
index 0000000..b905748
Binary files /dev/null and b/network-poc/frontend/public/avatars/owl.png differ
diff --git a/network-poc/frontend/public/avatars/penguin.png b/network-poc/frontend/public/avatars/penguin.png
new file mode 100644
index 0000000..5acb625
Binary files /dev/null and b/network-poc/frontend/public/avatars/penguin.png differ
diff --git a/network-poc/frontend/public/avatars/pesukarhu.png b/network-poc/frontend/public/avatars/pesukarhu.png
new file mode 100644
index 0000000..99d406e
Binary files /dev/null and b/network-poc/frontend/public/avatars/pesukarhu.png differ
diff --git a/network-poc/frontend/public/avatars/pesukarhu_notext.png b/network-poc/frontend/public/avatars/pesukarhu_notext.png
new file mode 100644
index 0000000..faaa36b
Binary files /dev/null and b/network-poc/frontend/public/avatars/pesukarhu_notext.png differ
diff --git a/network-poc/frontend/public/avatars/serpent.png b/network-poc/frontend/public/avatars/serpent.png
new file mode 100644
index 0000000..df8b001
Binary files /dev/null and b/network-poc/frontend/public/avatars/serpent.png differ
diff --git a/network-poc/frontend/public/avatars/spider.png b/network-poc/frontend/public/avatars/spider.png
new file mode 100644
index 0000000..c94368a
Binary files /dev/null and b/network-poc/frontend/public/avatars/spider.png differ
diff --git a/network-poc/frontend/public/avatars/susi_notext.png b/network-poc/frontend/public/avatars/susi_notext.png
new file mode 100644
index 0000000..ca18894
Binary files /dev/null and b/network-poc/frontend/public/avatars/susi_notext.png differ
diff --git a/network-poc/frontend/public/avatars/tortoise.png b/network-poc/frontend/public/avatars/tortoise.png
new file mode 100644
index 0000000..2095e15
Binary files /dev/null and b/network-poc/frontend/public/avatars/tortoise.png differ
diff --git a/network-poc/frontend/public/avatars/walrus.png b/network-poc/frontend/public/avatars/walrus.png
new file mode 100644
index 0000000..59db12d
Binary files /dev/null and b/network-poc/frontend/public/avatars/walrus.png differ
diff --git a/network-poc/frontend/src/components/AgentBar.astro b/network-poc/frontend/src/components/AgentBar.astro
new file mode 100644
index 0000000..c6172da
--- /dev/null
+++ b/network-poc/frontend/src/components/AgentBar.astro
@@ -0,0 +1,23 @@
+<!-- Agenttigalleria: roolit + avatarit -->
+<div id="agent-bar" style="display:flex;gap:8px;padding:10px 0;overflow-x:auto;align-items:flex-end">
+    <div class="agent-avatar" data-agent="manager" onclick="selectAgent('manager')" title="Manageri — suunnittelee ja pilkkoo tehtävät">
+        <img src="/avatars/owl.png" alt="Manageri" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Manageri</span>
+    </div>
+    <div class="agent-avatar" data-agent="coder" onclick="selectAgent('coder')" title="Koodari — kirjoittaa koodin">
+        <img src="/avatars/chameleon.png" alt="Koodari" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Koodari</span>
+    </div>
+    <div class="agent-avatar" data-agent="tester" onclick="selectAgent('tester')" title="Testaaja — arvioi ja etsii bugeja">
+        <img src="/avatars/mantis.png" alt="Testaaja" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Testaaja</span>
+    </div>
+    <div class="agent-avatar" data-agent="qa" onclick="selectAgent('qa')" title="QA — laadunvarmistus ja testit">
+        <img src="/avatars/tortoise.png" alt="QA" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">QA</span>
+    </div>
+    <div class="agent-avatar" data-agent="data" onclick="selectAgent('data')" title="Data — tietokanta-asiantuntija">
+        <img src="/avatars/elephant.png" alt="Data" style="width:48px;height:48px;border-radius:50%;border:2px solid transparent">
+        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Data</span>
+    </div>
+</div>
diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 7ed84f1..8ff9bfe 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -4,6 +4,7 @@ import StatusBar from "../components/StatusBar.astro";
 import Terminal from "../components/Terminal.astro";
 import Editor from "../components/Editor.astro";
 import Guide from "../components/Guide.astro";
+import AgentBar from "../components/AgentBar.astro";
 ---
 <!DOCTYPE html>
 <html lang="fi">
@@ -33,6 +34,7 @@ import Guide from "../components/Guide.astro";
 
         <!-- Agents-paneeli -->
         <div id="panel-agents" class="panel active">
+            <AgentBar />
             <StatusBar />
             <Terminal />
         </div>
@@ -66,6 +68,12 @@ import Guide from "../components/Guide.astro";
     const initHash = window.location.hash.replace('#','');
     if (['editor','guide'].includes(initHash)) switchTab(initHash);
 
+    // === Agent selection ===
+    window.selectAgent = function(agent) {
+        document.querySelectorAll('.agent-avatar').forEach(el => el.classList.remove('active'));
+        document.querySelector(`.agent-avatar[data-agent="${agent}"]`)?.classList.add('active');
+    };
+
     // === WebSocket ===
     const wsUrl = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
     const uiSocket = new WebSocket(wsUrl);
diff --git a/network-poc/frontend/src/styles/global.css b/network-poc/frontend/src/styles/global.css
index da8b0b1..9b85510 100644
--- a/network-poc/frontend/src/styles/global.css
+++ b/network-poc/frontend/src/styles/global.css
@@ -123,6 +123,20 @@ body {
 }
 .code-block .hljs { background: transparent; padding: 0; }
 
+/* Agent avatars */
+.agent-avatar {
+    cursor: pointer; text-align: center; transition: transform 0.15s;
+    opacity: 0.6;
+}
+.agent-avatar:hover { transform: scale(1.1); opacity: 0.9; }
+.agent-avatar.active {
+    opacity: 1;
+}
+.agent-avatar.active img {
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 8px rgba(88,166,255,0.3);
+}
+
 /* Animations */
 @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
 @keyframes spin { to { transform: rotate(360deg) } }