diff --git a/finbot/apps/finbot/templates/about.html b/finbot/apps/finbot/templates/about.html
index 899da7f..a7fca96 100644
--- a/finbot/apps/finbot/templates/about.html
+++ b/finbot/apps/finbot/templates/about.html
@@ -1,12 +1,11 @@
-<!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% extends "base.html" %}
+
+{% block title %}About FinBot - OWASP GenAI Security Project{% endblock %}
+
+{% block meta %}
     <meta name="description" content="FinBot is an Agentic Security CTF platform by OWASP GenAI Security Project, designed to help builders and defenders understand and mitigate agentic AI risks.">
     <meta name="keywords" content="finbot, owasp, genai, agentic security, ctf, ai security, llm security, prompt injection">
 
-    <!-- Open Graph -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://owasp-finbot-ctf.org/about">
     <meta property="og:title" content="About FinBot - OWASP GenAI Security Project">
@@ -14,59 +13,12 @@
     <meta property="og:image" content="{{ url_for('static', path='images/common/finbot.png') }}">
     <meta property="og:site_name" content="FinBot CTF">
 
-    <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="About FinBot - OWASP GenAI Security Project">
     <meta name="twitter:description" content="FinBot is an Agentic Security CTF platform - the Juice Shop for Agentic AI.">
+{% endblock %}
 
-    <title>About FinBot - OWASP GenAI Security Project</title>
-
-    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='images/common/favicon.ico') }}">
-
-    <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@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'bg-primary': '#07070d',
-                        'bg-secondary': '#0e0e1a',
-                        'bg-card': '#121220',
-                        'cyan': '#00d4ff',
-                        'purple': '#7c3aed',
-                        'green': '#06ffa5',
-                        'amber': '#ffb800',
-                        'danger': '#ff3366',
-                        'text-1': '#f1f5f9',
-                        'text-2': '#94a3b8',
-                        'text-3': '#64748b',
-                        'border-dim': 'rgba(255,255,255,0.06)',
-                        'border-glow': 'rgba(0,212,255,0.25)',
-                    },
-                    fontFamily: {
-                        'sans': ['Inter', 'system-ui', 'sans-serif'],
-                        'mono': ['JetBrains Mono', 'monospace'],
-                    },
-                }
-            }
-        }
-    </script>
-
-    <style>
-        body { background: #07070d; }
-
-        .grid-bg {
-            position: fixed; inset: 0; z-index: 0; pointer-events: none;
-            background-image:
-                linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
-            background-size: 60px 60px;
-        }
-
+{% block extra_css %}
         .hero-glow {
             position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
             width: 800px; height: 600px;
@@ -74,24 +26,6 @@
             pointer-events: none;
         }
 
-        .glass {
-            background: linear-gradient(135deg, rgba(18,18,32,0.85), rgba(14,14,26,0.95));
-            border: 1px solid rgba(255,255,255,0.06);
-            backdrop-filter: blur(12px);
-        }
-
-        .gradient-text {
-            background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #06ffa5 100%);
-            -webkit-background-clip: text; background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        .gradient-text-alt {
-            background: linear-gradient(90deg, #00d4ff, #06ffa5);
-            -webkit-background-clip: text; background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
         @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
         @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 40px rgba(0,212,255,0.2); } 50% { box-shadow: 0 0 60px rgba(0,212,255,0.35); } }
 
@@ -122,44 +56,15 @@
             border-radius: 50%;
             display: inline-block;
         }
-    </style>
-</head>
-
-<body class="text-text-2 font-sans antialiased overflow-x-hidden">
-    <div class="grid-bg"></div>
-
-    <!-- Header -->
-    <header class="fixed top-0 w-full z-50 bg-bg-primary/80 backdrop-blur-xl border-b border-border-dim">
-        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between h-16">
-            <a href="/" class="flex items-center space-x-3 group">
-                <div class="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
-                    <img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
-                </div>
-                <div>
-                    <span class="text-text-1 font-bold text-lg tracking-tight">OWASP FINBOT</span>
-                    <span class="text-cyan text-[10px] font-mono tracking-widest ml-1.5 hidden sm:inline">CTF</span>
-                </div>
-            </a>
-            <nav class="flex items-center space-x-1 sm:space-x-2">
-                <a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
-                <a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Portals</a>
-                <a href="/about" class="text-cyan text-sm px-3 py-2 rounded-lg bg-white/[0.03]">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
-                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                    <span class="hidden sm:inline">GitHub</span>
-                </a>
-            </nav>
-        </div>
-    </header>
+{% endblock %}
 
-    <!-- Main Content -->
-    <main class="relative z-10">
+{% block content %}
         <!-- Hero Section -->
         <section class="relative pt-32 pb-20 px-6">
             <div class="hero-glow"></div>
             <div class="max-w-5xl mx-auto text-center relative">
                 <!-- OWASP Badge -->
-                <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="owasp-badge inline-flex items-center space-x-3 px-5 py-2.5 rounded-full glass border border-border-dim mb-10">
+                <a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="owasp-badge inline-flex items-center space-x-3 px-5 py-2.5 rounded-full glass border border-border-dim mb-10">
                     <img src="{{ url_for('static', path='images/common/GenAI_OWASP_Logo.png') }}" alt="OWASP GenAI Security Project" class="h-7">
                     <span class="text-text-2 text-sm font-medium">OWASP GenAI Security Project</span>
                     <svg class="w-3.5 h-3.5 text-text-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
@@ -702,31 +607,4 @@ <h2 class="text-3xl sm:text-4xl font-bold text-text-1 mb-4">Ready to Test Your S
                 </div>
             </div>
         </section>
-    </main>
-
-    <!-- Footer -->
-    <footer class="border-t border-border-dim py-10 px-6 relative z-10">
-        <div class="max-w-6xl mx-auto">
-            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
-                <div class="flex items-center space-x-3">
-                    <div class="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
-                        <img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
-                    </div>
-                    <div>
-                        <span class="text-text-1 font-bold">OWASP FINBOT</span>
-                        <span class="text-cyan text-xs font-mono ml-1">CTF</span>
-                    </div>
-                </div>
-                <div class="flex items-center space-x-6 text-sm">
-                    <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
-                    <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">GitHub</a>
-                    <a href="/portals" class="text-text-3 hover:text-cyan transition">Portals</a>
-                </div>
-            </div>
-            <div class="mt-8 pt-6 border-t border-border-dim text-center">
-                <p class="text-text-3 text-sm">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
-            </div>
-        </div>
-    </footer>
-</body>
-</html>
+{% endblock %}
diff --git a/finbot/apps/finbot/templates/base.html b/finbot/apps/finbot/templates/base.html
index 69dfe82..c78b044 100644
--- a/finbot/apps/finbot/templates/base.html
+++ b/finbot/apps/finbot/templates/base.html
@@ -89,12 +89,13 @@
                 </div>
             </a>
             <nav class="flex items-center space-x-1 sm:space-x-2">
+                {% set current_path = request.url.path %}
                 {% block nav %}
-                <a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
-                <a href="/how-it-works" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">How It Works</a>
-                <a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
-                <a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
+                <a href="/" class="{% if current_path == '/' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg">Home</a>
+                <a href="/how-it-works" class="{% if current_path == '/how-it-works' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden sm:inline-flex">How It Works</a>
+                <a href="/portals" class="{% if current_path == '/portals' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden sm:inline-flex">Portals</a>
+                <a href="/about" class="{% if current_path == '/about' %}text-cyan bg-white/[0.03]{% else %}text-text-3 hover:text-cyan hover:bg-white/[0.03]{% endif %} transition text-sm px-3 py-2 rounded-lg hidden md:inline-flex">About</a>
+                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener noreferrer" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                     <span class="hidden sm:inline">GitHub</span>
                 </a>
@@ -107,15 +108,27 @@
         {% block content %}{% endblock %}
     </main>
 
-    <footer class="border-t border-border-dim py-8 px-6 relative z-10">
+    <footer class="border-t border-border-dim py-10 px-6 relative z-10">
         <div class="max-w-6xl mx-auto">
             {% block footer %}
-            <div class="flex flex-col items-center gap-3">
-                <div class="flex items-center gap-5 text-sm">
-                    <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
-                    <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="text-text-3 hover:text-cyan transition">GitHub</a>
+            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
+                <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-r from-cyan to-purple p-0.5">
+                        <img src="{{ url_for('static', path='images/common/finbot.png') }}" alt="OWASP FinBot" class="w-full h-full object-contain rounded-full bg-bg-primary">
+                    </div>
+                    <div>
+                        <span class="text-text-1 font-bold">OWASP FINBOT</span>
+                        <span class="text-cyan text-xs font-mono ml-1">CTF</span>
+                    </div>
                 </div>
-                <p class="text-text-3 text-xs">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
+                <div class="flex items-center space-x-6 text-sm">
+                    <a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="text-text-3 hover:text-cyan transition">OWASP GenAI</a>
+                    <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener noreferrer" class="text-text-3 hover:text-cyan transition">GitHub</a>
+                    <a href="/portals" class="text-text-3 hover:text-cyan transition">Portals</a>
+                </div>
+            </div>
+            <div class="mt-8 pt-6 border-t border-border-dim text-center">
+                <p class="text-text-3 text-sm">Part of the <a href="https://genai.owasp.org/" target="_blank" rel="noopener noreferrer" class="text-cyan hover:text-green transition">OWASP GenAI Security Project</a></p>
             </div>
             {% endblock %}
         </div>
diff --git a/finbot/apps/finbot/templates/how-it-works.html b/finbot/apps/finbot/templates/how-it-works.html
index b76fcda..c1e0f35 100644
--- a/finbot/apps/finbot/templates/how-it-works.html
+++ b/finbot/apps/finbot/templates/how-it-works.html
@@ -58,16 +58,6 @@
         }
 {% endblock %}
 
-{% block nav %}
-                <a href="/" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Home</a>
-                <a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
-                <a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
-                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                    <span class="hidden sm:inline">GitHub</span>
-                </a>
-{% endblock %}
-
 {% block content %}
         <!-- Hero -->
         <section class="relative pt-32 pb-16 px-6">
