diff --git a/02-use-cases/slide-deck-generator-memory-agent/.gitignore b/02-use-cases/slide-deck-generator-memory-agent/.gitignore
index cbd505718..b3ef6225b 100644
--- a/02-use-cases/slide-deck-generator-memory-agent/.gitignore
+++ b/02-use-cases/slide-deck-generator-memory-agent/.gitignore
@@ -39,6 +39,9 @@ output/*.pptx
 # Keep output directory structure but not generated files
 !output/.gitkeep
 
+# Keep web templates (*.html is ignored above but templates are source files)
+!web/templates/*.html
+
 # Environment variables
 .env
 .env.local
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/base.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/base.html
new file mode 100644
index 000000000..23ef3cd45
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/base.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Slide Deck Agent Demo{% endblock %}</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: Arial, sans-serif; background: #f5f7fa; color: #333; }
+        nav { background: #232f3e; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
+        nav a { color: #fff; text-decoration: none; font-size: 14px; }
+        nav a:hover { color: #ff9900; }
+        nav .brand { color: #ff9900; font-weight: bold; font-size: 16px; margin-right: auto; }
+        .container { max-width: 960px; margin: 32px auto; padding: 0 16px; }
+        .card { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
+        h1 { font-size: 24px; margin-bottom: 8px; }
+        h2 { font-size: 18px; margin-bottom: 12px; }
+        p { line-height: 1.6; color: #555; margin-bottom: 12px; }
+        .btn { display: inline-block; padding: 10px 20px; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; text-decoration: none; }
+        .btn-primary { background: #ff9900; color: #fff; }
+        .btn-primary:hover { background: #e68900; }
+        .btn-secondary { background: #232f3e; color: #fff; }
+        .btn-secondary:hover { background: #1a2530; }
+        textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical; }
+        .alert { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
+        .alert-success { background: #d4edda; color: #155724; }
+        .alert-error { background: #f8d7da; color: #721c24; }
+        #result { margin-top: 16px; white-space: pre-wrap; background: #f8f9fa; padding: 16px; border-radius: 4px; font-size: 13px; display: none; }
+        .loading { display: none; color: #666; font-style: italic; margin-top: 8px; }
+    </style>
+</head>
+<body>
+    <nav>
+        <span class="brand">🎯 Slide Deck Agent Demo</span>
+        <a href="/">Home</a>
+        <a href="/create-basic">Basic Agent</a>
+        <a href="/create-memory">Memory Agent</a>
+        <a href="/compare">Compare</a>
+    </nav>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endwith %}
+        {% block content %}{% endblock %}
+    </div>
+</body>
+</html>
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/compare.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/compare.html
new file mode 100644
index 000000000..022eb1686
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/compare.html
@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+{% block title %}Compare Agents{% endblock %}
+{% block content %}
+<div class="card">
+    <h1>⚖️ Compare Agents</h1>
+    <p>Run both agents with the same request to see how memory improves results over time.</p>
+    <textarea id="request" rows="4" placeholder="Describe the presentation you want to create..."></textarea>
+    <br><br>
+    <button class="btn btn-primary" onclick="compareAgents()">Compare Both Agents</button>
+    <div class="loading" id="loading">⏳ Running both agents...</div>
+</div>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:0;">
+    <div class="card" id="basic-card" style="display:none;">
+        <h2>🤖 Basic Agent</h2>
+        <div id="basic-result"></div>
+    </div>
+    <div class="card" id="memory-card" style="display:none;">
+        <h2>🧠 Memory Agent</h2>
+        <div id="memory-result"></div>
+    </div>
+</div>
+<script>
+async function compareAgents() {
+    const req = document.getElementById('request').value.trim();
+    if (!req) { alert('Please enter a presentation request.'); return; }
+    document.getElementById('loading').style.display = 'block';
+    document.getElementById('basic-card').style.display = 'none';
+    document.getElementById('memory-card').style.display = 'none';
+    const resp = await fetch('/compare-agents', {
+        method: 'POST', headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({request: req})
+    });
+    const data = await resp.json();
+    document.getElementById('loading').style.display = 'none';
+    if (data.error) { alert('❌ ' + data.error); return; }
+    document.getElementById('basic-card').style.display = 'block';
+    document.getElementById('memory-card').style.display = 'block';
+    document.getElementById('basic-result').textContent = data.basic_result.result;
+    document.getElementById('memory-result').textContent = data.memory_result.result;
+}
+</script>
+{% endblock %}
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_basic.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_basic.html
new file mode 100644
index 000000000..a9d10c9f7
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_basic.html
@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block title %}Basic Agent{% endblock %}
+{% block content %}
+<div class="card">
+    <h1>🤖 Basic Agent</h1>
+    <p>Creates presentations using default settings. No memory of past preferences.</p>
+    <textarea id="request" rows="4" placeholder="Describe the presentation you want to create..."></textarea>
+    <br><br>
+    <button class="btn btn-secondary" onclick="createPresentation()">Create Presentation</button>
+    <div class="loading" id="loading">⏳ Generating presentation...</div>
+    <div id="result"></div>
+</div>
+<script>
+async function createPresentation() {
+    const req = document.getElementById('request').value.trim();
+    if (!req) { alert('Please enter a presentation request.'); return; }
+    document.getElementById('loading').style.display = 'block';
+    document.getElementById('result').style.display = 'none';
+    const resp = await fetch('/create-basic', {
+        method: 'POST', headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({request: req})
+    });
+    const data = await resp.json();
+    document.getElementById('loading').style.display = 'none';
+    const result = document.getElementById('result');
+    result.style.display = 'block';
+    result.textContent = data.error ? '❌ ' + data.error : '✅ ' + data.result;
+}
+</script>
+{% endblock %}
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_memory.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_memory.html
new file mode 100644
index 000000000..0cdb68d8b
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/create_memory.html
@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% block title %}Memory Agent{% endblock %}
+{% block content %}
+<div class="card">
+    <h1>🧠 Memory Agent</h1>
+    <p>Learns your style preferences over time and creates personalized presentations.</p>
+    <textarea id="request" rows="4" placeholder="Describe the presentation you want to create..."></textarea>
+    <br><br>
+    <button class="btn btn-primary" onclick="createPresentation()">Create Presentation</button>
+    <button class="btn btn-secondary" onclick="getPreferences()" style="margin-left:8px;">View My Preferences</button>
+    <button class="btn btn-secondary" onclick="deleteMemory()" style="margin-left:8px;">Clear Memory</button>
+    <div class="loading" id="loading">⏳ Generating presentation...</div>
+    <div id="result"></div>
+</div>
+<script>
+async function createPresentation() {
+    const req = document.getElementById('request').value.trim();
+    if (!req) { alert('Please enter a presentation request.'); return; }
+    document.getElementById('loading').style.display = 'block';
+    document.getElementById('result').style.display = 'none';
+    const resp = await fetch('/create-memory', {
+        method: 'POST', headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({request: req})
+    });
+    const data = await resp.json();
+    document.getElementById('loading').style.display = 'none';
+    const result = document.getElementById('result');
+    result.style.display = 'block';
+    result.textContent = data.error ? '❌ ' + data.error : '✅ ' + data.result;
+}
+async function getPreferences() {
+    const resp = await fetch('/get-preferences');
+    const data = await resp.json();
+    const result = document.getElementById('result');
+    result.style.display = 'block';
+    result.textContent = data.error ? '❌ ' + data.error : JSON.stringify(data.preferences, null, 2);
+}
+async function deleteMemory() {
+    if (!confirm('Clear all memory preferences?')) return;
+    const resp = await fetch('/delete-memory', {method: 'POST', headers: {'Content-Type': 'application/json'}});
+    const data = await resp.json();
+    const result = document.getElementById('result');
+    result.style.display = 'block';
+    result.textContent = data.error ? '❌ ' + data.error : '✅ ' + data.message;
+}
+</script>
+{% endblock %}
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/error.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/error.html
new file mode 100644
index 000000000..533e6a7c7
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/error.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}Error {{ code }}{% endblock %}
+{% block content %}
+<div class="card" style="text-align:center;padding:48px;">
+    <h1>{{ code }}</h1>
+    <p>{{ error }}</p>
+    <br>
+    <a href="/" class="btn btn-primary">Go Home</a>
+</div>
+{% endblock %}
diff --git a/02-use-cases/slide-deck-generator-memory-agent/web/templates/index.html b/02-use-cases/slide-deck-generator-memory-agent/web/templates/index.html
new file mode 100644
index 000000000..279d403ad
--- /dev/null
+++ b/02-use-cases/slide-deck-generator-memory-agent/web/templates/index.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+{% block title %}Slide Deck Agent Demo{% endblock %}
+{% block content %}
+<div class="card">
+    <h1>🎯 Slide Deck Agent Demo</h1>
+    <p>Compare a basic agent with a memory-enabled agent that learns your presentation preferences over time.</p>
+</div>
+<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;">
+    <div class="card">
+        <h2>🤖 Basic Agent</h2>
+        <p>Creates presentations using default settings. No memory of past preferences.</p>
+        <a href="/create-basic" class="btn btn-secondary">Try Basic Agent</a>
+    </div>
+    <div class="card">
+        <h2>🧠 Memory Agent</h2>
+        <p>Learns your style preferences over time and creates personalized presentations.</p>
+        <a href="/create-memory" class="btn btn-primary">Try Memory Agent</a>
+    </div>
+    <div class="card">
+        <h2>⚖️ Compare</h2>
+        <p>Run both agents side-by-side with the same request to see the difference.</p>
+        <a href="/compare" class="btn btn-secondary">Compare Agents</a>
+    </div>
+</div>
+{% endblock %}
