diff --git a/bpd-student-ambassador-program/templates/_base.html b/bpd-student-ambassador-program/templates/_base.html
index f30a6fe..5dbda5f 100644
--- a/bpd-student-ambassador-program/templates/_base.html
+++ b/bpd-student-ambassador-program/templates/_base.html
@@ -1,19 +1,792 @@
-{% extends "base_templates/_base.html" %}
-{% block head %}
-{{super()}}
-<link rel="stylesheet" href="/static/style.css">
-{% endblock %}
-{% block header %}
-<nav class="container">
-    {% for link in NAVIGATION %}
-    <span><a href="{{link.url}}">{{link.name}}</a></span>
-    {% endfor %}
-</nav>
-{% endblock %}
-{% block footer %}
-<footer class="container">
-    <hr />
-    <p><a href="{{SITE_URL}}">{{SITE_URL}}</a></p>
-    <p>Built with <a href="https://github.com/render-engine/render-engine/">Render Engine</a></p>
-</footer>
-{% endblock %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Black Python Devs Student Ambassadorial Program</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #1e2b3c;
+            background: #f8faff;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+
+        .btn-primary {
+            display: inline-block;
+            background: #1a3a5c;
+            color: #ffffff;
+            padding: 14px 36px;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 1rem;
+            letter-spacing: 0.5px;
+            transition: background 0.3s, transform 0.2s;
+            border: none;
+            cursor: pointer;
+        }
+
+        .btn-primary:hover {
+            background: #0f2a44;
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            display: inline-block;
+            background: transparent;
+            color: #1a3a5c;
+            padding: 12px 32px;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 1rem;
+            border: 2px solid #1a3a5c;
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .btn-secondary:hover {
+            background: #1a3a5c;
+            color: #fff;
+        }
+
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+            background: rgba(255, 255, 255, 0.92);
+            backdrop-filter: blur(8px);
+            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
+            transition: box-shadow 0.3s;
+        }
+
+        header.scrolled {
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
+        }
+
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 0;
+        }
+
+        .logo {
+            font-size: 1.6rem;
+            font-weight: 700;
+            color: #1a3a5c;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .logo i {
+            color: #e8a838;
+            font-size: 1.8rem;
+        }
+
+        .nav-links {
+            list-style: none;
+            display: flex;
+            align-items: center;
+            gap: 32px;
+        }
+
+        .nav-links a {
+            font-weight: 500;
+            color: #2c3e50;
+            transition: color 0.3s;
+            font-size: 1rem;
+            position: relative;
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -4px;
+            width: 0;
+            height: 2px;
+            background: #e8a838;
+            transition: width 0.3s;
+        }
+
+        .nav-links a:hover {
+            color: #1a3a5c;
+        }
+
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+
+        .nav-links .btn-primary {
+            padding: 10px 28px;
+            font-size: 0.9rem;
+        }
+
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            gap: 5px;
+            cursor: pointer;
+            padding: 4px;
+        }
+
+        .hamburger span {
+            width: 28px;
+            height: 3px;
+            background: #1a3a5c;
+            border-radius: 4px;
+            transition: 0.3s;
+        }
+
+    
+        .hero {
+            padding: 160px 0 100px;
+            background: linear-gradient(135deg, #f0f6ff 0%, #e6edf9 100%);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: -40%;
+            right: -10%;
+            width: 600px;
+            height: 600px;
+            border-radius: 50%;
+            background: rgba(26, 58, 92, 0.04);
+            pointer-events: none;
+        }
+
+        .hero::after {
+            content: '';
+            position: absolute;
+            bottom: -30%;
+            left: -5%;
+            width: 500px;
+            height: 500px;
+            border-radius: 50%;
+            background: rgba(232, 168, 56, 0.06);
+            pointer-events: none;
+        }
+
+        .hero .container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+            align-items: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero-content h1 {
+            font-size: 3.2rem;
+            font-weight: 800;
+            line-height: 1.2;
+            color: #0f2a44;
+            margin-bottom: 20px;
+        }
+
+        .hero-content h1 span {
+            color: #e8a838;
+        }
+
+        .hero-content p {
+            font-size: 1.2rem;
+            color: #3d5670;
+            margin-bottom: 32px;
+            max-width: 500px;
+        }
+
+        .hero-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+
+        .hero-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .hero-image .illustration {
+            width: 100%;
+            max-width: 480px;
+            aspect-ratio: 1 / 1;
+            background: linear-gradient(145deg, #1a3a5c, #264d73);
+            border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 6rem;
+            box-shadow: 0 30px 60px rgba(26, 58, 92, 0.25);
+            position: relative;
+        }
+
+        .hero-image .illustration i {
+            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
+        }
+
+        .hero-image .illustration .badge {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: #e8a838;
+            color: #1a3a5c;
+            font-size: 0.9rem;
+            font-weight: 700;
+            padding: 8px 20px;
+            border-radius: 50px;
+            box-shadow: 0 8px 20px rgba(232, 168, 56, 0.35);
+        }
+
+    
+        .section-title {
+            text-align: center;
+            margin-bottom: 56px;
+        }
+
+        .section-title h2 {
+            font-size: 2.4rem;
+            font-weight: 700;
+            color: #0f2a44;
+            margin-bottom: 12px;
+        }
+
+        .section-title p {
+            font-size: 1.1rem;
+            color: #5a6f86;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .section-title .title-line {
+            width: 60px;
+            height: 4px;
+            background: #e8a838;
+            border-radius: 4px;
+            margin: 16px auto 0;
+        }
+
+      
+        .about {
+            padding: 80px 0;
+            background: #fff;
+        }
+
+        .about-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 50px;
+            align-items: center;
+        }
+
+        .about-text h3 {
+            font-size: 1.8rem;
+            color: #0f2a44;
+            margin-bottom: 16px;
+        }
+
+        .about-text p {
+            color: #3d5670;
+            margin-bottom: 20px;
+        }
+
+        .about-text ul {
+            list-style: none;
+            margin-top: 16px;
+        }
+
+        .about-text ul li {
+            padding: 8px 0;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: #1e2b3c;
+        }
+
+        .about-text ul li i {
+            color:#0a1a2b;
+            font-size: 1.2rem;
+            width: 24px;
+        }
+
+        .about-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+        }
+
+        .stat-card {
+            background: #f8faff;
+            border-radius: 16px;
+            padding: 28px 20px;
+            text-align: center;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+            transition: transform 0.3s;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-6px);
+        }
+
+        .stat-card .number {
+            font-size: 2.6rem;
+            font-weight: 800;
+            color: #1a3a5c;
+        }
+
+        .stat-card .label {
+            font-size: 0.95rem;
+            color: #5a6f86;
+            margin-top: 4px;
+        }
+
+   
+
+
+    
+
+        .apply {
+            padding: 80px 0;
+            background: linear-gradient(135deg, #0f2a44, #1a3a5c);
+            color: #fff;
+            text-align: center;
+        }
+
+        .apply h2 {
+            font-size: 2.4rem;
+            font-weight: 700;
+            margin-bottom: 16px;
+        }
+
+        .apply p {
+            font-size: 1.15rem;
+            max-width: 600px;
+            margin: 0 auto 32px;
+            opacity: 0.85;
+        }
+
+        .apply .btn-primary {
+            background: #e8a838;
+            color: #0f2a44;
+            font-size: 1.1rem;
+            padding: 16px 48px;
+        }
+
+        .apply .btn-primary:hover {
+            background: #d49a2e;
+            transform: translateY(-2px);
+        }
+
+     
+        footer {
+            background: #0a1a2b;
+            color: #b0c4db;
+            padding: 48px 0 24px;
+        }
+
+        .footer-grid {
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr 1fr;
+            gap: 40px;
+            margin-bottom: 40px;
+        }
+
+        .footer-brand .logo {
+            color: #fff;
+            margin-bottom: 12px;
+        }
+
+        .footer-brand .logo i {
+            color: #e8a838;
+        }
+
+        .footer-brand p {
+            font-size: 0.95rem;
+            max-width: 300px;
+            opacity: 0.8;
+        }
+
+        .footer-col h5 {
+            color: #fff;
+            font-size: 1rem;
+            margin-bottom: 16px;
+        }
+
+        .footer-col ul {
+            list-style: none;
+        }
+
+        .footer-col ul li {
+            margin-bottom: 10px;
+        }
+
+        .footer-col ul li a {
+            opacity: 0.8;
+            transition: opacity 0.3s, color 0.3s;
+        }
+
+        .footer-col ul li a:hover {
+            opacity: 1;
+            color: #e8a838;
+        }
+
+        .footer-social {
+            display: flex;
+            gap: 16px;
+            margin-top: 16px;
+        }
+
+        .footer-social a {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.06);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.3s, color 0.3s;
+            color: #b0c4db;
+        }
+
+        .footer-social a:hover {
+            background: #e8a838;
+            color: #0a1a2b;
+        }
+
+        .footer-bottom {
+            border-top: 1px solid rgba(255, 255, 255, 0.06);
+            padding-top: 20px;
+            text-align: center;
+            font-size: 0.9rem;
+            opacity: 0.6;
+        }
+
+       
+        @media (max-width: 992px) {
+            .hero .container {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .hero-content p {
+                margin: 0 auto 32px;
+            }
+
+            .hero-buttons {
+                justify-content: center;
+            }
+
+            .hero-image .illustration {
+                max-width: 320px;
+            }
+
+            .about-grid {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .about-text ul li {
+                justify-content: center;
+            }
+
+            .footer-grid {
+                grid-template-columns: 1fr 1fr;
+                gap: 30px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .nav-links {
+                position: fixed;
+                top: 72px;
+                left: 0;
+                right: 0;
+                background: rgba(255, 255, 255, 0.98);
+                backdrop-filter: blur(8px);
+                flex-direction: column;
+                padding: 32px 24px;
+                gap: 20px;
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                transform: translateY(-120%);
+                transition: transform 0.4s ease;
+                border-radius: 0 0 20px 20px;
+            }
+
+            .nav-links.open {
+                transform: translateY(0);
+            }
+
+            .hamburger {
+                display: flex;
+            }
+
+            .hero {
+                padding: 140px 0 70px;
+            }
+
+            .hero-content h1 {
+                font-size: 2.2rem;
+            }
+
+            .section-title h2 {
+                font-size: 1.8rem;
+            }
+
+            .about-stats {
+                grid-template-columns: 1fr 1fr;
+            }
+
+            .footer-grid {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .footer-brand p {
+                margin: 0 auto;
+            }
+
+            .footer-social {
+                justify-content: center;
+            }
+
+            .hero-image .illustration {
+                max-width: 240px;
+                font-size: 4rem;
+            }
+
+            .hero-image .illustration .badge {
+                font-size: 0.7rem;
+                padding: 4px 14px;
+                bottom: 10px;
+                right: 10px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .hero-content h1 {
+                font-size: 1.8rem;
+            }
+
+            .hero-buttons .btn-primary,
+            .hero-buttons .btn-secondary {
+                width: 100%;
+                text-align: center;
+            }
+
+            .about-stats {
+                grid-template-columns: 1fr;
+            }
+
+            .stat-card .number {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    
+    <header id="header">
+        <div class="container">
+            <nav>
+                <a href="#" class="logo">
+                     Black Python Dev
+                </a>
+                <ul class="nav-links" id="navLinks">
+                    <li><a href="#">Join</a></li>
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Cohort</a></li>
+                    <li><a href="https://blackpythondevs.com/">What is BPD ?</a></li>
+                    <li><a href="#" class="btn-primary" style="color: #ffffff;">Apply Now</a></li>
+                </ul>
+                <div class="hamburger" id="hamburger" aria-label="Toggle navigation">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <section class="hero" id="home">
+        <div class="container">
+            <div class="hero-content">
+                <h1>Become a <span>Student Ambassador</span></h1>
+                <p>
+                    The Student Ambassadorship Program is a leadership initiative that empowers students to represent Black Python Devs within their universities and local communities.
+                </p>
+                <div class="hero-buttons">
+                    <a href="#" class="btn-primary">Join the Program</a>
+                    <a href="#" class="btn-secondary">Learn More</a>
+                </div>
+            </div>
+            <div class="hero-image">
+                <div class="illustration">
+                    <i class="fas fa-user-graduate"></i>
+                    <span class="badge">✦ 2026 Cohort</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ─── ABOUT ─── -->
+    <section class="about" id="about">
+        <div class="container">
+            <div class="about-grid">
+                <div class="about-text">
+                    <h3>What is the Ambassadorial Program?</h3>
+                    <p>
+                        The Student Ambassadorship Program is a leadership initiative that empowers students to represent Black Python Devs within their universities and local communities.
+                    </p>
+                    <p>
+                        Student Ambassadors serve as connectors between BPD and students, helping to create opportunities for learning, collaboration, and innovation.
+
+                    </p>
+                    <p>
+                        The program develops ambassadors into confident leaders capable of organizing events, mentoring peers, promoting Python education, and building sustainable campus communities.
+
+                    </p>
+                    <p>
+                        Our ambassadors become catalysts for change by encouraging participation in technology, fostering inclusive learning environments, and inspiring others to explore software development and open source.
+
+                    </p>
+                    <ul>
+                        <li><i class="fas fa-check-circle"></i> Represent your university at events</li>
+                        <li><i class="fas fa-check-circle"></i> Lead campus initiatives</li>
+                        <li><i class="fas fa-check-circle"></i> Build a global network</li>
+                        <li><i class="fas fa-check-circle"></i> Receive professional mentorship</li>
+                    </ul>
+                </div>
+                <div class="about-stats">
+                    <div class="stat-card">
+                        <div class="number">150+</div>
+                        <div class="label">Active Ambassadors</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="number">5</div>
+                        <div class="label">Partner Institutions</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="number">12</div>
+                        <div class="label">Countries Represented</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+
+
+    <section class="apply">
+        <div class="container">
+            <h2>Ready to Lead?</h2>
+            <p>
+                Applications for the 2026 cohort are now open. Join a community of
+                changemakers and start your journey today.
+            </p>
+            <a href="#" class="btn-primary">Apply Now <i class="fas fa-arrow-right" style="margin-left:10px;"></i></a>
+        </div>
+    </section>
+
+
+    <footer>
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <div class="logo">
+                        Black Python Devs Ambassadors
+                    </div>
+                    <p>
+                        To cultivate a thriving network of student leaders who strengthen Python communities, promote open-source collaboration, and expand access to technology education across Africa and beyond.
+
+                    </p>
+                    <div class="footer-social">
+                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    </div>
+                </div>
+            
+                <div class="footer-col">
+                    <h5>Quick Links</h5>
+                    <ul>
+                        <li><a href="#">Join</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Cohort</a></li>
+                        <li><a href="#">About BPD</a></li>
+                    </ul>
+                </div>
+                <div class="footer-col">
+                    <h5>Contact</h5>
+                    <ul>
+                        <li><a href="mailto:bpdstudentambassador@blackpythondevs.com "><i class="fa fa-envelope"></i> bpdstudentambassador@blackpythondevs.com </a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                &copy; 2026 Student Ambassadorial Program.
+            </div>
+        </div>
+    </footer>
+
+    <!-- ─── JAVASCRIPT ─── -->
+    <script>
+        // ── Hamburger toggle ──
+        const hamburger = document.getElementById('hamburger');
+        const navLinks = document.getElementById('navLinks');
+
+        hamburger.addEventListener('click', () => {
+            navLinks.classList.toggle('open');
+        });
+
+        // Close nav on link click (mobile)
+        document.querySelectorAll('.nav-links a').forEach(link => {
+            link.addEventListener('click', () => {
+                navLinks.classList.remove('open');
+            });
+        });
+
+        // ── Header shadow on scroll ──
+        const header = document.getElementById('header');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 30) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+
+
+    </script>
+</body>
+</html>
