diff --git a/network-poc/frontend/public/gecko_hero.webp b/network-poc/frontend/public/gecko_hero.webp
new file mode 100644
index 0000000..ca96012
Binary files /dev/null and b/network-poc/frontend/public/gecko_hero.webp differ
diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 241b621..ab54cf4 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -12,7 +12,11 @@ import Settings from "../components/Settings.astro";
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kipinä Agentic Playground</title>
+    <title>Kipinä Agentic Studio — Näe miten AI-agentit rakentavat projektin</title>
+    <meta name="description" content="Seuraa reaaliajassa miten AI-agenttitiimi suunnittelee, koodaa ja testaa ohjelmistoprojektin. Ilmainen oppimistyökalu.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
     <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">
@@ -23,17 +27,88 @@ import Settings from "../components/Settings.astro";
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
 </head>
 <body>
-    <div class="container">
+    <!-- ===== LANDING ===== -->
+    <div id="landing">
+        <div class="bg-mesh"></div>
+        <header class="landing-nav">
+            <a href="/" class="landing-logo"><span class="logo-accent">KIPINÄ</span> <span class="logo-sub">/ agentic studio</span></a>
+        </header>
+
+        <section class="hero">
+            <div class="hero-container">
+                <div class="hero-content">
+                    <h1 class="hero-title">Näe miten AI-agenttitiimi rakentaa projektin.</h1>
+                    <div class="hero-divider"></div>
+                    <p class="hero-desc">
+                        Seuraa reaaliajassa miten kuusi erikoistunutta AI-agenttia suunnittelee, koodaa, testaa ja katselmoi ohjelmistoprojektin — askel askeleelta.
+                    </p>
+                    <p class="hero-notice">
+                        Jokaisen agentin prompti, syöte ja tulos tallennetaan. Lopuksi saat toistettavan CrewAI-projektin.
+                    </p>
+
+                    <div class="hero-input-group">
+                        <input type="text" id="landing-input" class="hero-input" placeholder="Kuvaile projektisi, esim. &quot;REST API käyttäjähallinnalle&quot;" autocomplete="off">
+                        <button id="landing-start" class="hero-btn">Käynnistä</button>
+                    </div>
+
+                    <div class="hero-examples">
+                        <span class="hero-examples-label">Tai kokeile valmista:</span>
+                        <button class="example-btn" data-prompt="REST API käyttäjähallinnalle SQLite-tietokannalla">Käyttäjähallinta-API</button>
+                        <button class="example-btn" data-prompt="UWB-paikannusdatan ETL-pipeline CSV:stä MariaDB:hen ja visualisointi">UWB-data-analyysi</button>
+                        <button class="example-btn" data-prompt="Todo-sovellus FastAPI + SQLite, CRUD-endpointit ja testit">Todo-sovellus</button>
+                    </div>
+                </div>
+                <div class="hero-orb-wrapper">
+                    <div class="hero-orb">
+                        <img src="/gecko_hero.webp" alt="Kipinä" class="hero-orb-img">
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Miten se toimii -->
+        <section class="how-section">
+            <div class="how-container">
+                <h2 class="how-title">Miten se toimii?</h2>
+                <div class="how-steps">
+                    <div class="how-step">
+                        <div class="how-step-num">1</div>
+                        <h3>Kuvaile projekti</h3>
+                        <p>Kirjoita lyhyt kuvaus. Asiakas-agentti jalostaa sen vaatimuksiksi.</p>
+                    </div>
+                    <div class="how-step">
+                        <div class="how-step-num">2</div>
+                        <h3>Agentit työskentelevät</h3>
+                        <p>Manageri suunnittelee, koodari kirjoittaa, testaaja katselmoi ja korjaa.</p>
+                    </div>
+                    <div class="how-step">
+                        <div class="how-step-num">3</div>
+                        <h3>Tutki tulokset</h3>
+                        <p>Näe valmis koodi, jokaisen agentin promptit ja CrewAI-projektirakenne.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <footer class="landing-footer">
+            <p>&copy; 2026 Kipinä Technologies — <a href="https://kipina.tech">kipina.tech</a></p>
+        </footer>
+    </div>
+
+    <!-- ===== APP (piilotettu kunnes pipeline käynnistyy) ===== -->
+    <div id="app" class="container" style="display:none">
         <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px">
             <div>
-                <h1 style="margin-bottom:0"><span style="color:#ff6b00">Kipinä</span> Agentic Playground</h1>
+                <h1 style="margin-bottom:0"><span style="color:#ff6b00">Kipinä</span> Agentic Studio</h1>
                 <p style="color:#8b949e;margin:0">AI-ohjelmistokehitystiimi · <span id="hub-version">-</span></p>
             </div>
+            <button class="btn btn-muted" onclick="showLanding()" style="font-size:14px">← Takaisin</button>
         </div>
 
         <!-- Välilehdet -->
         <div class="tabs">
             <div class="tab active" onclick="switchTab('agents')">Agentit</div>
+            <div class="tab" onclick="switchTab('learn')">Oppimispolku</div>
             <div class="tab" onclick="switchTab('editor')">Editor</div>
             <div class="tab" onclick="switchTab('guide')">Opas</div>
             <div class="tab" onclick="switchTab('settings')">Asetukset</div>
@@ -46,6 +121,15 @@ import Settings from "../components/Settings.astro";
             <Terminal />
         </div>
 
+        <!-- Oppimispolku-paneeli -->
+        <div id="panel-learn" class="panel">
+            <div id="learn-empty" style="padding:40px;text-align:center;color:#8b949e">
+                <p style="font-size:18px;margin-bottom:8px">Oppimispolku</p>
+                <p>Käynnistä projekti nähdäksesi agenttien promptit ja tulokset askel askeleelta.</p>
+            </div>
+            <div id="learn-steps"></div>
+        </div>
+
         <Editor />
         <Guide />
         <Settings />
@@ -69,6 +153,63 @@ import Settings from "../components/Settings.astro";
         return esc(code);
     }
 
+    // === Landing → App siirtymä ===
+    function startProject(task) {
+        if (!task || !task.trim()) return;
+        document.getElementById('landing').style.display = 'none';
+        document.getElementById('app').style.display = 'block';
+        // Käynnistä pipeline suoraan termExec:n kautta
+        setTimeout(() => {
+            if (typeof termExec === 'function') termExec(`kpn project "${task.trim()}"`);
+        }, 200);
+    }
+
+    window.showLanding = function() {
+        document.getElementById('app').style.display = 'none';
+        document.getElementById('landing').style.display = '';
+    };
+
+    // Landing-napit
+    document.getElementById('landing-start')?.addEventListener('click', () => {
+        startProject(document.getElementById('landing-input')?.value);
+    });
+    document.getElementById('landing-input')?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') startProject(e.target.value);
+    });
+    document.querySelectorAll('.example-btn').forEach(btn => {
+        btn.addEventListener('click', () => startProject(btn.dataset.prompt));
+    });
+
+    // === Oppimispolku — renderöinti ===
+    window._lastPromptLog = null;
+
+    function renderLearnView(promptLog) {
+        window._lastPromptLog = promptLog;
+        const container = document.getElementById('learn-steps');
+        const empty = document.getElementById('learn-empty');
+        if (!container) return;
+        if (!promptLog || !promptLog.length) { container.innerHTML = ''; if (empty) empty.style.display = ''; return; }
+        if (empty) empty.style.display = 'none';
+
+        container.innerHTML = promptLog.map((e, i) => `
+            <div class="learn-step">
+                <div class="learn-step-header" onclick="this.nextElementSibling.classList.toggle('open')">
+                    <div class="learn-step-num">${i}</div>
+                    <span class="learn-step-agent">${esc(e.agentName)}</span>
+                    <span class="learn-step-label">${esc(e.label)} · ${esc(e.model)}</span>
+                </div>
+                <div class="learn-step-body">
+                    <div class="learn-section-title">System Prompt</div>
+                    <pre class="learn-code">${esc(e.systemPrompt || '(ei system promptia)')}</pre>
+                    <div class="learn-section-title">Syöte</div>
+                    <pre class="learn-code">${esc(e.userPrompt)}</pre>
+                    <div class="learn-section-title">Tulos</div>
+                    <pre class="learn-code">${esc(e.response || '(ei tulosta)')}</pre>
+                </div>
+            </div>
+        `).join('');
+    }
+
     // === Globaalit tilat ===
     const defaultAgents = {
         client: { name: 'Asiakas', avatar: '/avatars/kettu_notext.webp', model: 'qwen-coder', order: 0,
@@ -237,8 +378,10 @@ OUTPUT FORMAT:
         window.location.hash = tab;
         if (tab === 'editor') initMonaco();
     };
-    const initHash = window.location.hash.replace('#','');
-    if (['editor','guide'].includes(initHash)) switchTab(initHash);
+    setTimeout(() => {
+        const initHash = window.location.hash.replace('#','');
+        if (['editor','guide','learn'].includes(initHash)) switchTab(initHash);
+    }, 0);
 
     // === Agent selection & config ===
     let selectedAgent = null;
@@ -1140,6 +1283,9 @@ OUTPUT FORMAT:
         const crewFiles = generateCrewAIFiles(promptLog, task);
         Object.assign(files, crewFiles);
 
+        // Oppimispolku
+        renderLearnView(promptLog);
+
         renderProjectCard(files, task);
     }
 
diff --git a/network-poc/frontend/src/styles/global.css b/network-poc/frontend/src/styles/global.css
index e517d6e..83d1b7c 100644
--- a/network-poc/frontend/src/styles/global.css
+++ b/network-poc/frontend/src/styles/global.css
@@ -81,6 +81,12 @@ body {
 }
 .dd-item:hover, .dd-item.active { background: var(--border); color: var(--accent); }
 
+#editor-file-list .dd-item {
+    white-space: pre-wrap;
+    word-break: break-all;
+    line-height: 1.4;
+}
+
 /* Pipeline progress */
 .pipeline-bar {
     display: none; padding: 8px 14px; background: var(--bg);
@@ -196,6 +202,197 @@ body {
     display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
 }
 
+/* ===== LANDING PAGE ===== */
+
+#landing {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    min-height: 100vh;
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-mesh {
+    position: fixed; inset: 0; z-index: -1;
+    background:
+        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,107,0,0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(88,166,255,0.06) 0%, transparent 70%),
+        var(--bg);
+}
+
+.landing-nav {
+    padding: 20px 40px;
+}
+.landing-logo { text-decoration: none; font-size: 18px; font-weight: 700; }
+.logo-accent { color: #ff6b00; }
+.logo-sub { color: #8b949e; font-weight: 400; }
+
+/* Hero */
+.hero {
+    padding: 60px 40px 40px;
+}
+.hero-container {
+    max-width: 1200px; margin: 0 auto;
+    display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center;
+}
+.hero-title {
+    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
+    line-height: 1.15; color: #e6edf3; margin-bottom: 16px;
+}
+.hero-divider {
+    width: 60px; height: 3px; background: #ff6b00;
+    border-radius: 2px; margin-bottom: 20px;
+}
+.hero-desc {
+    font-size: 1.05rem; color: #8b949e; line-height: 1.7; margin-bottom: 12px;
+}
+.hero-notice {
+    font-size: 0.9rem; color: #6e7681; line-height: 1.6;
+    border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 28px;
+}
+
+/* Hero input */
+.hero-input-group {
+    display: flex; gap: 8px; margin-bottom: 20px;
+}
+.hero-input {
+    flex: 1; padding: 14px 18px; font-size: 16px;
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+    background: var(--panel); color: var(--text);
+    border: 1px solid var(--border); border-radius: 8px;
+    outline: none; transition: border-color 0.2s;
+}
+.hero-input:focus {
+    border-color: #ff6b00; box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
+}
+.hero-input::placeholder { color: #484f58; }
+.hero-btn {
+    padding: 14px 28px; font-size: 16px; font-weight: 600;
+    font-family: 'Inter', sans-serif;
+    background: #ff6b00; color: #fff; border: none; border-radius: 8px;
+    cursor: pointer; transition: background 0.2s, transform 0.1s;
+    white-space: nowrap;
+}
+.hero-btn:hover { background: #e05e00; transform: translateY(-1px); }
+.hero-btn:active { transform: translateY(0); }
+
+/* Example buttons */
+.hero-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.hero-examples-label { color: #6e7681; font-size: 14px; margin-right: 4px; }
+.example-btn {
+    padding: 8px 16px; font-size: 13px; font-family: 'Inter', sans-serif;
+    background: transparent; color: var(--accent);
+    border: 1px solid var(--border); border-radius: 6px;
+    cursor: pointer; transition: all 0.2s;
+}
+.example-btn:hover {
+    border-color: var(--accent); background: rgba(88,166,255,0.08);
+}
+
+/* Hero orb */
+.hero-orb-wrapper {
+    display: flex; justify-content: center; align-items: center;
+}
+.hero-orb {
+    width: 340px; height: 340px; border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(255,107,0,0.15) 0%, transparent 70%);
+    display: flex; align-items: center; justify-content: center;
+    animation: orb-float 6s ease-in-out infinite;
+}
+.hero-orb-img {
+    width: 100%; height: 100%; object-fit: contain;
+    filter: drop-shadow(0 0 40px rgba(255,107,0,0.25));
+}
+@keyframes orb-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+}
+
+/* How section */
+.how-section {
+    padding: 60px 40px;
+    background: rgba(22,27,34,0.6);
+    border-top: 1px solid var(--border);
+}
+.how-container { max-width: 900px; margin: 0 auto; }
+.how-title {
+    text-align: center; font-size: 1.5rem; font-weight: 700;
+    color: #e6edf3; margin-bottom: 40px;
+}
+.how-steps {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
+}
+.how-step {
+    text-align: center; padding: 24px;
+    background: var(--panel); border: 1px solid var(--border);
+    border-radius: 12px; transition: border-color 0.3s;
+}
+.how-step:hover { border-color: rgba(255,107,0,0.4); }
+.how-step-num {
+    width: 40px; height: 40px; line-height: 40px;
+    border-radius: 50%; background: rgba(255,107,0,0.12);
+    color: #ff6b00; font-weight: 700; font-size: 18px;
+    margin: 0 auto 14px;
+}
+.how-step h3 { color: #e6edf3; font-size: 1rem; margin-bottom: 8px; }
+.how-step p { color: #8b949e; font-size: 0.9rem; line-height: 1.5; }
+
+/* Landing footer */
+.landing-footer {
+    text-align: center; padding: 32px 40px;
+    color: #484f58; font-size: 13px;
+    border-top: 1px solid var(--border);
+}
+.landing-footer a { color: #8b949e; }
+
+/* Responsive */
+@media (max-width: 860px) {
+    .hero-container { grid-template-columns: 1fr; gap: 32px; }
+    .hero-orb-wrapper { order: -1; }
+    .hero-orb { width: 220px; height: 220px; }
+    .how-steps { grid-template-columns: 1fr; }
+    .hero-input-group { flex-direction: column; }
+}
+
+/* ===== OPPIMISPOLKU ===== */
+.learn-step {
+    margin: 12px 0; border: 1px solid var(--border);
+    border-radius: 8px; background: var(--panel); overflow: hidden;
+}
+.learn-step-header {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 16px; cursor: pointer;
+    transition: background 0.15s;
+}
+.learn-step-header:hover { background: rgba(88,166,255,0.04); }
+.learn-step-num {
+    width: 28px; height: 28px; line-height: 28px; text-align: center;
+    border-radius: 50%; background: rgba(255,107,0,0.12);
+    color: #ff6b00; font-weight: 700; font-size: 13px; flex-shrink: 0;
+}
+.learn-step-agent {
+    font-weight: 600; color: #e6edf3; font-size: 14px;
+}
+.learn-step-label {
+    color: #8b949e; font-size: 13px; margin-left: auto;
+}
+.learn-step-body {
+    display: none; padding: 0 16px 16px;
+    border-top: 1px solid var(--border);
+}
+.learn-step-body.open { display: block; }
+.learn-section-title {
+    color: var(--accent); font-size: 12px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.5px;
+    margin: 14px 0 6px;
+}
+.learn-code {
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+    font-size: 12px; line-height: 1.6;
+    background: #010409; border: 1px solid var(--border);
+    border-radius: 6px; padding: 12px; overflow-x: auto;
+    max-height: 300px; overflow-y: auto; white-space: pre-wrap;
+}
+
 /* Animations */
 @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
 @keyframes spin { to { transform: rotate(360deg) } }
