diff --git a/network-poc/frontend/src/components/AgentBar.astro b/network-poc/frontend/src/components/AgentBar.astro
index f6a1f3a..400429d 100644
--- a/network-poc/frontend/src/components/AgentBar.astro
+++ b/network-poc/frontend/src/components/AgentBar.astro
@@ -1,13 +1,16 @@
 <!-- Agenttigalleria + konfigurointipaneeli -->
-<div style="display:flex;gap:16px;padding:10px 0">
+<div style="display:flex;gap:16px;padding:10px 0;align-items:flex-start">
     <!-- Agenttilista (drag & drop) -->
     <div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
         <!-- Renderöidään JS:stä -->
     </div>
-    <!-- + Lisää agentti -->
-    <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
-        <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
-        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
+    <!-- + Lisää agentti + layout-toggle -->
+    <div style="display:flex;flex-direction:column;gap:4px;align-items:center">
+        <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
+            <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
+            <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
+        </div>
+        <button id="layout-toggle" onclick="toggleAgentLayout()" class="btn btn-muted" style="font-size:10px;padding:2px 6px" title="Vaihda vaaka/pysty">☰</button>
     </div>
 </div>
 
diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 4751da0..2f5dfe9 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -15,6 +15,11 @@ import Settings from "../components/Settings.astro";
     <title>Kipinä Agentic Playground</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+    <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({ startOnLoad: false, theme: 'dark' });
+        window.mermaid = mermaid;
+    </script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
 </head>
 <body>
@@ -211,6 +216,16 @@ OUTPUT FORMAT:
     // === Agent selection & config ===
     let selectedAgent = null;
 
+    // Layout: vaaka/pysty toggle
+    let agentLayout = localStorage.getItem('kpn-agent-layout') || 'row';
+    window.toggleAgentLayout = function() {
+        agentLayout = agentLayout === 'row' ? 'column' : 'row';
+        localStorage.setItem('kpn-agent-layout', agentLayout);
+        const bar = document.getElementById('agent-bar');
+        bar.style.flexDirection = agentLayout;
+        bar.style.alignItems = agentLayout === 'column' ? 'flex-start' : 'flex-end';
+    };
+
     function renderAgentBar() {
         const bar = document.getElementById('agent-bar');
         const sorted = Object.entries(agents).sort((a,b) => (a[1].order||0) - (b[1].order||0));
@@ -902,6 +917,15 @@ OUTPUT FORMAT:
             const r = await fetch('/GUIDE.md');
             if (r.ok) el.innerHTML = renderMd(await r.text());
             el.querySelectorAll('pre code').forEach(b => { if (typeof hljs !== 'undefined') hljs.highlightElement(b); });
+            // Mermaid-kaaviot
+            if (window.mermaid) {
+                el.querySelectorAll('.mermaid-block').forEach(async block => {
+                    try {
+                        const { svg } = await window.mermaid.render('r-' + block.id, block.textContent.trim());
+                        block.innerHTML = svg;
+                    } catch(e) { /* fallback: näytetään koodi */ }
+                });
+            }
         } catch(e) { el.textContent = 'Virhe: ' + e.message; }
     })();
 
@@ -932,10 +956,15 @@ OUTPUT FORMAT:
         }
 
         for (const line of lines) {
-            // Koodiblokit
+            // Koodiblokit + Mermaid
             if (line.startsWith('```')) {
                 if (inCode) {
-                    html += `<pre class="code-block"><code class="language-${lang}">${buf.replace(/</g,'&lt;')}</code></pre>`;
+                    if (lang === 'mermaid') {
+                        const mid = 'mmd-' + Math.random().toString(36).slice(2,8);
+                        html += `<div class="mermaid-block" id="${mid}" style="margin:16px 0;text-align:center">${buf.replace(/</g,'&lt;')}</div>`;
+                    } else {
+                        html += `<pre class="code-block"><code class="language-${lang}">${buf.replace(/</g,'&lt;')}</code></pre>`;
+                    }
                     inCode = false; buf = '';
                 } else {
                     flushTable();
