diff --git a/capstone project/certificates.css b/capstone project/certificates.css
new file mode 100644
index 0000000..2c0c6c8
--- /dev/null
+++ b/capstone project/certificates.css	
@@ -0,0 +1,519 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: #057df2;
+    border-radius: 3px;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 160px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+/* ── STAT CARDS ── */
+.first-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 70px;
+    padding: 24px 24px;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+}
+
+.card {
+    background: rgba(245, 245, 245, 0.20);
+    border-radius: 12px;
+    padding: 20px;
+    width: 200px;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+}
+
+.card-image {
+    border-radius: 10px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e8f4ff;
+}
+
+.card-image img {
+    width: 25px;
+    height: 25px;
+}
+
+.card-text {
+    display: flex;
+    flex-direction: column;
+    font-size: 11px;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+
+.card-text > p {
+    font-size: 24px;
+    font-weight: bold;
+    color: #1f3a5f;
+    margin: 4px 0;
+}
+
+.first  { background-color: rgba(255, 179, 71, 0.29); }
+.second { background-color: rgba(46, 139, 87, 0.51); }
+.third  { background-color: rgba(255, 0, 4, 0.19); }
+
+/*  TABLE  */
+.second-section {
+    background: rgba(228, 228, 228, 0.47);
+    border: 1px solid rgba(107, 124, 147, 0.5);
+    border-radius: 10px;
+    margin: 0 20px 40px;
+    overflow-x: auto; /* horizontal scroll on small screens */
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 480px; /* prevents table crushing */
+    margin-top: 0px;
+    text-align: left;
+}
+
+th, td {
+    padding: 16px 12px;
+    text-align: center;
+    vertical-align: middle;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+tbody tr {
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+thead tr {
+    color: #1f3a5f;
+    background: rgba(217, 217, 217, 0.65);
+    border-bottom: 2px solid rgba(107, 124, 147, 1);
+}
+
+tbody tr:last-child {
+    border-bottom: none;
+}
+
+.table-image {
+    height: 38px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 50%;
+    vertical-align: middle;
+    min-width: 40px;
+}
+
+thead th:first-child,
+tbody td:first-child {
+    text-align: center;
+    padding-left: 20px;
+}
+
+thead th:last-child,
+tbody td:last-child {
+    text-align: center;
+}
+
+.name-cell {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+}
+
+.status {
+    padding: 6px 14px;
+    border-radius: 5px;
+    color: #f7f8f9;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    width: 100px;
+    max-width: 140px;
+}
+
+.Pending             { background: #ffb347; }
+.Issued, .Confirmed  { background: #2e8b57; }
+.completed           { background: #057df2; }
+
+/* ── PAGINATION ── */
+.next-prev {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 20px;
+    font-size: 14px;
+    color: #2a2a2a;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.page-btn {
+    padding: 3px 8px;
+    border: 1px solid #d0d7e2;
+    border-radius: 4px;
+    background: #fff;
+    color: #2a2a2a;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.page-btn:hover:not(:disabled):not(.active) {
+    background: #f0f4f8;
+    border-color: #a0aec0;
+}
+
+.page-btn.active {
+    background: #057df2;
+    color: #fff;
+    border-color: #1f3a5f;
+    font-weight: 600;
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+
+/* 
+   TABLET — max-width: 1024px
+*/
+@media (max-width: 1024px) {
+    .card {
+        width: 180px;
+    }
+
+    .first-section {
+        gap: 24px;
+    }
+}
+
+
+/* 
+   MOBILE — max-width: 768px
+ */
+@media (max-width: 768px) {
+
+    /* Sidebar slides off-screen */
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    .create-btn {
+        width: 140px;
+        font-size: 12px;
+    }
+
+    /* Cards wrap to 2 per row */
+    .first-section {
+        gap: 16px;
+        padding: 16px;
+        margin-bottom: 24px;
+    }
+
+    .card {
+        width: calc(50% - 8px);
+        min-width: 140px;
+        height: auto;
+        padding: 16px;
+    }
+
+    .second-section {
+        margin: 0 12px 30px;
+    }
+
+    th, td {
+        padding: 12px 8px;
+        font-size: 12px;
+    }
+
+    .status {
+        font-size: 11px;
+        min-width: 70px;
+        padding: 5px 10px;
+        margin-top: 8px;
+    }
+
+    .next-prev {
+        padding: 12px 16px;
+        font-size: 13px;
+    }
+}
+
+
+/* 
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+*/
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    .create-btn {
+        width: 120px;
+        font-size: 11px;
+    }
+
+    /* All 3 cards in a single row, smaller */
+    .first-section {
+        gap: 8px;
+        padding: 12px;
+    }
+
+    .card {
+        width: calc(33% - 6px);
+        min-width: 0;
+        padding: 12px 8px;
+        gap: 8px;
+        flex-direction: column;
+        height: auto;
+    }
+
+    .card-text {
+        font-size: 9px;
+    }
+
+    .card-text > p {
+        font-size: 18px;
+    }
+
+    .card-image img {
+        width: 20px;
+        height: 20px;
+    }
+
+    th, td {
+        padding: 10px 6px;
+        font-size: 11px;
+    }
+
+    .table-image {
+        width: 30px;
+        height: 30px;
+        min-width: 30px;
+    }
+
+    .status {
+        font-size: 10px;
+        min-width: 60px;
+        padding: 4px 6px;
+        margin-left: 0;
+    }
+
+    .next-prev {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/certificates.html b/capstone project/certificates.html
new file mode 100644
index 0000000..c53971a
--- /dev/null
+++ b/capstone project/certificates.html	
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="certificates.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a class="active" href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Certificates</h1>
+                    <h6>Manage Volunteers Certificates</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">Generate Certificate</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <!-- Stat cards -->
+            <section class="first-section">
+                <div class="card">
+                    <div class="card-image first">
+                        <img src="images/noto_trophy.png" alt="">
+                    </div>
+                    <div class="card-text">
+                        TOTAL <br> CERTIFICATES
+                        <p>6</p>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-image second">
+                        <img src="images/fluent-color_checkmark-circle-32 (1).png" alt="">
+                    </div>
+                    <div class="card-text">
+                        ISSUED
+                        <p>4</p>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-image third">
+                        <img src="images/ph_anchor-simple-fill.png" alt="">
+                    </div>
+                    <div class="card-text">
+                        PENDING
+                        <p>4</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Table -->
+            <section class="second-section">
+                <table>
+                    <thead class="table-head">
+                        <tr>
+                            <th>Name</th>
+                            <th>Event</th>
+                            <th>Date</th>
+                            <th>Status</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 35.png" alt="">
+                                    <span>John Doe</span>
+                                </div>
+                            </td>
+                            <td>Coastal Clean-up</td>
+                            <td>June 12, 2025</td>
+                            <td><span class="status Issued">Issued</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 36.png" alt="">
+                                    <span>Mary Musa</span>
+                                </div>
+                            </td>
+                            <td>Tree Planting Drive</td>
+                            <td>June 15, 2025</td>
+                            <td><span class="status Issued">Issued</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 37.png" alt="">
+                                    <span>David James</span>
+                                </div>
+                            </td>
+                            <td>Beach Cleanup</td>
+                            <td>June 18, 2025</td>
+                            <td><span class="status Pending">Pending</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 38.png" alt="">
+                                    <span>Emeka Obi</span>
+                                </div>
+                            </td>
+                            <td>Coastal Cleanup</td>
+                            <td>June 19, 2025</td>
+                            <td><span class="status Confirmed">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 39.png" alt="">
+                                    <span>Aisha Bello</span>
+                                </div>
+                            </td>
+                            <td>Food Distribution Drive</td>
+                            <td>June 20, 2025</td>
+                            <td><span class="status Pending">Pending</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 34.png" alt="">
+                                    <span>Fatima Ahmed</span>
+                                </div>
+                            </td>
+                            <td>Community Health Outreach</td>
+                            <td>June 22, 2025</td>
+                            <td><span class="status Confirmed">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+            <!-- Pagination -->
+            <div class="next-prev">
+                <span class="info">Showing 6 of 6 certificates</span>
+                <div class="controls">
+                    <button class="page-btn nav-btn">
+                        <span>&#171;</span> Prev
+                    </button>
+                    <button class="page-btn active">1</button>
+                    <button class="page-btn">2</button>
+                    <button class="page-btn nav-btn">
+                        Next <span>&#187;</span>
+                    </button>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/dashboard3.css b/capstone project/dashboard3.css
new file mode 100644
index 0000000..060858a
--- /dev/null
+++ b/capstone project/dashboard3.css	
@@ -0,0 +1,377 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 8px;
+    border-left: 3px solid #ffffff;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+/* ── FILTER / SEARCH ROW ── */
+.first-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 16px 50px 16px;
+    margin-bottom: 50px;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.3);
+}
+
+.first-part {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.tab {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(107, 124, 147, 1);
+    cursor: pointer;
+    padding-bottom: 4px;
+    border-bottom: 2px solid transparent;
+    margin: 0;
+}
+
+.tab.active-tab {
+    color: #057df2;
+    border-bottom: 2px solid #057df2;
+}
+
+.first-part .tab:hover {
+    color: #057df2;
+    border-bottom: 2px solid #057df2;
+}
+
+.second-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+    border: 1px solid rgba(107, 124, 147, 0.4);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 12px 18px;
+    font-size: 13px;
+    width: 220px;
+    color: #1e2d4a;
+}
+
+input::placeholder {
+    color: rgba(107, 124, 147, 0.7);
+    font-size: 12px;
+}
+
+.search-btn {
+    background: #f7f8f9;
+    border: none;
+    padding: 12px 20px;
+    cursor: pointer;
+    color: #057df2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-btn:hover {
+    background: #0369d1;
+    color: #ffffff;
+}
+
+/* ── EMPTY STATE ── */
+.second-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 40px 16px;
+}
+
+.calendar-image img {
+    width: 400px;
+    height: 300px;
+    max-width: 100%; /* prevents overflow on small screens */
+    object-fit: contain;
+}
+
+.text-under-image {
+    margin-top: 30px;
+    margin-bottom: 40px;
+    text-align: center;
+    color: #1f3a5f;
+    padding: 0 16px;
+}
+
+
+/* ════════════════════════════════════════
+   TABLET — max-width: 1024px
+════════════════════════════════════════ */
+@media (max-width: 1024px) {
+    input {
+        width: 160px;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   MOBILE — max-width: 768px
+════════════════════════════════════════ */
+@media (max-width: 768px) {
+
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    .create-btn {
+        width: 100px;
+        font-size: 12px;
+    }
+
+    /* Stack tabs + search vertically */
+    .first-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 5px 12px 30px 12px;
+        margin-bottom: 24px;
+    }
+
+    .second-part {
+        width: 100%;
+    }
+
+    input {
+        width: 100%;
+        flex: 1;
+    }
+
+    .calendar-image img {
+        width: 280px;
+        height: auto;
+    }
+
+    .text-under-image h3 {
+        font-size: 15px;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+════════════════════════════════════════ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    .create-btn {
+        display: none;
+    }
+
+    .tab {
+        font-size: 12px;
+    }
+
+    .first-part {
+        gap: 16px;
+    }
+
+    .calendar-image img {
+        width: 220px;
+        height: auto;
+    }
+
+    .text-under-image h3 {
+        font-size: 13px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/dashboard3.html b/capstone project/dashboard3.html
new file mode 100644
index 0000000..26dceb7
--- /dev/null
+++ b/capstone project/dashboard3.html	
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dashboard3.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Events</h1>
+                    <h6>Browse and manage all your events</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">create event</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <section class="first-section">
+                <div class="first-part">
+                    <h2 class="tab active-tab">All</h2>
+                    <h2 class="tab">Upcoming</h2>
+                    <h2 class="tab">Completed</h2>
+                </div>
+                <div class="second-part">
+                    <input type="text" placeholder="Search events by name, location..." />
+                    <button class="search-btn">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </div>
+            </section>
+
+            <section class="second-section">
+                <div class="calendar-image">
+                    <img src="images/calendar.png" alt="image">
+                </div>
+                <div class="text-under-image">
+                    <h3>No Events created yet. <br>
+                        Create your first volunteer event to start recruiting.</h3>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/dashboard4.css b/capstone project/dashboard4.css
new file mode 100644
index 0000000..5acd266
--- /dev/null
+++ b/capstone project/dashboard4.css	
@@ -0,0 +1,551 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 8px;
+    border-left: 3px solid #ffffff;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+.cancel-btn {
+    background-color: red;
+}
+
+/* ── FIRST SECTION: image + text card ── */
+.first-section {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 12px 16px;
+    margin-bottom: 50px;
+}
+
+.first-section img {
+    height: 430px;
+    width: 700px;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.first-section .text-beside-image {
+    display: flex;
+    justify-content: flex-start;
+    background-color: #f7f8f9;
+    color: #2a2a2a;
+    flex-direction: column;
+    gap: 25px;
+    text-align: left;
+    padding: 30px 35px;
+    height: 430px;
+    width: 400px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 10px;
+}
+
+.text-beside-image h2 {
+    color: #000000;
+}
+
+.upcoming {
+    margin-bottom: 20px;
+    padding: 10px 50px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 8px;
+    width: fit-content;
+    color: #ffffff;
+    background-color: #ffb347;
+}
+
+.list-under-upcoming {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+}
+
+.list-under-upcoming p {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+}
+
+.list-under-upcoming i {
+    color: #057df2;
+    background-color: #ffffff;
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-shrink: 0;
+    font-size: 14px;
+}
+
+/* ── EVENT DESCRIPTION ── */
+.event-description {
+    padding-left: 16px;
+    margin-bottom: 20px;
+    color: #1f3a5f;
+}
+
+/* ── SECOND SECTION ── */
+.second-section div {
+    padding: 20px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 10px;
+    margin: 0 13px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: #f7f8f9;
+    color: #2a2a2a;
+    line-height: 1.7;
+}
+
+/* ── THIRD SECTION: stat cards ── */
+.third-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin: 30px 13px 25px;
+}
+
+.card {
+    background-color: #f7f8f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #6b7c93;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.card h3 {
+    width: 100%;
+    border-bottom: 1px solid #6b7c93;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.under-card {
+    color: #2a2a2a;
+    text-align: center;
+    font-size: 13px;
+}
+
+#fontawesome {
+    color: #057df2;
+}
+
+/* ── FOURTH SECTION: volunteer search ── */
+.fourth-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 16px 50px;
+    margin: 0 13px;
+    margin-bottom: 20px;
+}
+
+.first-part {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.second-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(107, 124, 147, 0.4);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 12px 18px;
+    font-size: 13px;
+    width: 220px;
+    color: #1e2d4a;
+}
+
+input::placeholder {
+    color: rgba(107, 124, 147, 0.7);
+    font-size: 12px;
+}
+
+.search-btn {
+    background: #f7f8f9;
+    border: none;
+    padding: 12px 20px;
+    cursor: pointer;
+    color: #057df2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-btn:hover {
+    background: #0369d1;
+    color: #ffffff;
+}
+
+/* ── FIFTH SECTION: empty state ── */
+.fifth-section img {
+    height: 320px;
+    width: 500px;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 30px;
+}
+
+.final-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fifth-section h3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 60px;
+    padding: 0 16px;
+    color: #1f3a5f;
+}
+
+
+/* ════════════════════════════════════════
+   TABLET — max-width: 1024px
+════════════════════════════════════════ */
+@media (max-width: 1024px) {
+
+    .first-section img {
+        width: 90%;
+        height: 450px;
+    }
+
+    .first-section .text-beside-image {
+        width: 50%;
+        height: auto;
+        min-height: 350px;
+        padding: 24px 20px;
+    }
+
+    input {
+        width: 160px;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   MOBILE — max-width: 768px
+════════════════════════════════════════ */
+@media (max-width: 768px) {
+
+    /* Sidebar slides off-screen */
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    .create-btn {
+        width: 100px;
+        font-size: 12px;
+    }
+
+    /* Stack image + text card vertically */
+    .first-section {
+        flex-direction: column;
+        padding: 12px;
+        margin-bottom: 30px;
+        gap: 16px;
+    }
+
+    .first-section img {
+        width: 100%;
+        height: 260px;
+    }
+
+    .first-section .text-beside-image {
+        width: 100%;
+        height: auto;
+        padding: 20px;
+    }
+
+    /* Stat cards: 3 → 1 row on mobile */
+    .third-section {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        margin: 20px 12px;
+    }
+
+    /* Stack fourth section */
+    .fourth-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 5px 12px 30px;
+        margin: 0 0 20px;
+    }
+
+    .second-part {
+        width: 100%;
+    }
+
+    input {
+        width: 100%;
+        flex: 1;
+    }
+
+    .second-section div {
+        margin: 0 12px;
+    }
+
+    .fifth-section img {
+        width: 80%;
+        height: auto;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+════════════════════════════════════════ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    .create-btn {
+        width: 90px;
+        font-size: 11px;
+    }
+
+    .first-section img {
+        height: 200px;
+    }
+
+    /* Stat cards: 1 column on SE */
+    .third-section {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+
+    .card {
+        padding: 14px 10px;
+    }
+
+    .under-card {
+        font-size: 11px;
+    }
+
+    .upcoming {
+        padding: 8px 24px;
+    }
+
+    .fifth-section img {
+        width: 90%;
+        height: auto;
+    }
+
+    .fifth-section h3 {
+        font-size: 13px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/dashboard4.html b/capstone project/dashboard4.html
new file mode 100644
index 0000000..89d1281
--- /dev/null
+++ b/capstone project/dashboard4.html	
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dashboard4.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Events details</h1>
+                    <h6>View and manage all your events</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">Edit event</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <!-- Image + event info card -->
+            <section class="first-section">
+                <div class="first-image">
+                    <img src="images/volunteers bending down.png" alt="">
+                </div>
+
+                <div class="text-beside-image">
+                    <h2>Coastal clean-up Exercise</h2>
+
+                    <div class="upcoming">
+                        <h3>Upcoming</h3>
+                    </div>
+
+                    <div class="list-under-upcoming">
+                        <p><i class="fa-solid fa-location-dot fa-lg"></i> Lekki waterfront, Lagos</p>
+                        <p><i class="fa-regular fa-calendar fa-lg"></i> June 12, 2026</p>
+                        <p><i class="fa-regular fa-clock"></i> 8:00am - 12:00pm</p>
+                        <p><i class="fa-solid fa-user-group fa-lg"></i> 18/40 volunteers</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Description heading -->
+            <div class="event-description">
+                <h3>Events Description</h3>
+            </div>
+
+            <!-- Description body -->
+            <section class="second-section">
+                <div>
+                    <p>
+                        Join us for a community coastal clean-up exercise aimed at reducing plastic waste and protecting
+                        marine life along the Lekki Waterfront. This initiative brings together passionate volunteers
+                        who are committed to keeping our beaches and waterways clean.
+                    </p>
+                    <p>
+                        During this event, volunteers will work in small groups to collect plastic waste, sort
+                        recyclable materials, and safely dispose of debris found along the shoreline. All necessary
+                        clean-up materials such as gloves, waste bags, and safety gear will be provided by the
+                        organizers.
+                    </p>
+                    <p>
+                        Beyond the clean-up activity, the event will also include a short environmental awareness
+                        session where participants will learn about the impact of plastic pollution on marine ecosystems
+                        and how small everyday actions can contribute to a healthier environment.
+                    </p>
+                    <p>
+                        Whether you are passionate about environmental sustainability, looking to give back to the
+                        community, or simply want to spend a meaningful morning outdoors, this event is a great
+                        opportunity to make a positive impact while connecting with like-minded individuals.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Stat cards -->
+            <section class="third-section">
+                <div class="card">
+                    <h3>40</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-calendar fa-lg"></i> total events</p>
+                </div>
+                <div class="card">
+                    <h3>59</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-clock fa-lg"></i> upcoming events</p>
+                </div>
+                <div class="card">
+                    <h3>324</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-circle-check fa-lg"></i> total volunteers</p>
+                </div>
+            </section>
+
+            <!-- Volunteer search -->
+            <section class="fourth-section">
+                <div class="first-part">
+                    <h4>Volunteer Registered</h4>
+                </div>
+                <div class="second-part">
+                    <input type="text" placeholder="Search events by name, location..." />
+                    <button class="search-btn">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </div>
+            </section>
+
+            <!-- Empty state -->
+            <section class="fifth-section">
+                <div class="final-image">
+                    <img src="images/We Are Women - Together (1) 1.png" alt="">
+                </div>
+                <h3>No Volunteers registered yet. <br> Volunteers will appear once they join</h3>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/dashboard5.css b/capstone project/dashboard5.css
new file mode 100644
index 0000000..6ccd268
--- /dev/null
+++ b/capstone project/dashboard5.css	
@@ -0,0 +1,530 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 8px;
+    border-left: 3px solid #ffffff;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+.cancel-btn {
+    background-color: red;
+}
+
+/* ── FIRST SECTION ── */
+.first-section {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 12px 16px;
+    margin-bottom: 50px;
+}
+
+.first-section img {
+    height: 430px;
+    width: 700px;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.first-section .text-beside-image {
+    display: flex;
+    justify-content: flex-start;
+    background-color: #f7f8f9;
+    color: #2a2a2a;
+    flex-direction: column;
+    gap: 25px;
+    text-align: left;
+    padding: 30px 35px;
+    height: 430px;
+    width: 400px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 10px;
+}
+
+.text-beside-image h2 {
+    color: #000000;
+}
+
+.upcoming {
+    margin-bottom: 20px;
+    padding: 10px 50px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 8px;
+    width: fit-content;
+    color: #ffffff;
+    background-color: #ffb347;
+}
+
+.list-under-upcoming {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+}
+
+.list-under-upcoming p {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+}
+
+.list-under-upcoming i {
+    color: #057df2;
+    background-color: #ffffff;
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-shrink: 0;
+    font-size: 14px;
+}
+
+/* ── EVENT DESCRIPTION ── */
+.event-description {
+    padding-left: 16px;
+    margin-bottom: 40px;
+    color: #1f3a5f;
+}
+
+/* ── SECOND SECTION ── */
+.second-section div {
+    padding: 20px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 10px;
+    margin: 0 13px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: #f7f8f9;
+    color: #2a2a2a;
+    line-height: 1.7;
+}
+
+/* ── THIRD SECTION ── */
+.third-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin: 30px 13px 25px;
+}
+
+.card {
+    background-color: #f7f8f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #6b7c93;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.card h3 {
+    width: 100%;
+    border-bottom: 1px solid #6b7c93;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.under-card {
+    color: #2a2a2a;
+    text-align: center;
+    font-size: 13px;
+}
+
+#fontawesome {
+    color: #057df2;
+}
+
+/* ── FOURTH SECTION ── */
+.fourth-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 16px 50px;
+    margin: 0 13px 20px;
+}
+
+.first-part {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.second-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(107, 124, 147, 0.4);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 12px 18px;
+    font-size: 13px;
+    width: 220px;
+    color: #1e2d4a;
+}
+
+input::placeholder {
+    color: rgba(107, 124, 147, 0.7);
+    font-size: 12px;
+}
+
+.search-btn {
+    background: #f7f8f9;
+    border: none;
+    padding: 12px 20px;
+    cursor: pointer;
+    color: #057df2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-btn:hover {
+    background: #0369d1;
+    color: #ffffff;
+}
+
+/* ── FIFTH SECTION ── */
+.fifth-section img {
+    height: 300px;
+    width: 450px;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 40px;
+}
+
+.final-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fifth-section h3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 60px;
+    padding: 0 16px;
+    color: #1f3a5f;
+}
+
+
+/* ════════════════════════════════════════
+   TABLET — max-width: 1024px
+════════════════════════════════════════ */
+@media (max-width: 1024px) {
+
+    .first-section img {
+        width: 90%;
+        height: 450px;
+    }
+
+    .first-section .text-beside-image {
+        width: 50%;
+        height: auto;
+        min-height: 350px;
+        padding: 24px 20px;
+    }
+
+    input {
+        width: 160px;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   MOBILE — max-width: 768px
+════════════════════════════════════════ */
+@media (max-width: 768px) {
+
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    /* Stack image + card vertically */
+    .first-section {
+        flex-direction: column;
+        padding: 12px;
+        margin-bottom: 30px;
+        gap: 16px;
+    }
+
+    .first-section img {
+        width: 100%;
+        height: 260px;
+    }
+
+    .first-section .text-beside-image {
+        width: 100%;
+        height: auto;
+        padding: 20px;
+    }
+
+    .third-section {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        margin: 20px 12px;
+    }
+
+    .fourth-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 5px 12px 30px;
+        margin: 0 0 20px;
+    }
+
+    .second-part {
+        width: 100%;
+    }
+
+    input {
+        width: 100%;
+        flex: 1;
+    }
+
+    .second-section div {
+        margin: 0 12px;
+    }
+
+    .fifth-section img {
+        width: 80%;
+        height: auto;
+    }
+}
+
+
+/* ════════════════════════════════════════
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+════════════════════════════════════════ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    .first-section img {
+        height: 200px;
+    }
+
+    .third-section {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+
+    .card {
+        padding: 14px 10px;
+    }
+
+    .under-card {
+        font-size: 11px;
+    }
+
+    .upcoming {
+        padding: 8px 24px;
+    }
+
+    .fifth-section img {
+        width: 90%;
+        height: auto;
+    }
+
+    .fifth-section h3 {
+        font-size: 13px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/dashboard5.html b/capstone project/dashboard5.html
new file mode 100644
index 0000000..27ab055
--- /dev/null
+++ b/capstone project/dashboard5.html	
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dashboard5.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Certificates</h1>
+                    <h6>Manage all Volunteers Activities</h6>
+                </div>
+
+                <div class="header-btn">
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <!-- Image + event info card -->
+            <section class="first-section">
+                <div class="first-image">
+                    <img src="images/volunteers bending down.png" alt="">
+                </div>
+
+                <div class="text-beside-image">
+                    <h2>Coastal clean-up Exercise</h2>
+
+                    <div class="upcoming">
+                        <h3>Upcoming</h3>
+                    </div>
+
+                    <div class="list-under-upcoming">
+                        <p><i class="fa-solid fa-location-dot fa-lg"></i> Lekki waterfront, Lagos</p>
+                        <p><i class="fa-regular fa-calendar fa-lg"></i> June 12, 2026</p>
+                        <p><i class="fa-regular fa-clock"></i> 8:00am - 12:00pm</p>
+                        <p><i class="fa-solid fa-user-group fa-lg"></i> 18/40 volunteers</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Description heading -->
+            <div class="event-description">
+                <h3>Events Description</h3>
+            </div>
+
+            <!-- Description body -->
+            <section class="second-section">
+                <div>
+                    <p>
+                        Join us for a community coastal clean-up exercise aimed at reducing plastic waste and protecting
+                        marine life along the Lekki Waterfront. This initiative brings together passionate volunteers
+                        who are committed to keeping our beaches and waterways clean.
+                    </p>
+                    <p>
+                        During this event, volunteers will work in small groups to collect plastic waste, sort
+                        recyclable materials, and safely dispose of debris found along the shoreline. All necessary
+                        clean-up materials such as gloves, waste bags, and safety gear will be provided by the
+                        organizers.
+                    </p>
+                    <p>
+                        Beyond the clean-up activity, the event will also include a short environmental awareness
+                        session where participants will learn about the impact of plastic pollution on marine ecosystems
+                        and how small everyday actions can contribute to a healthier environment.
+                    </p>
+                    <p>
+                        Whether you are passionate about environmental sustainability, looking to give back to the
+                        community, or simply want to spend a meaningful morning outdoors, this event is a great
+                        opportunity to make a positive impact while connecting with like-minded individuals.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Stat cards -->
+            <section class="third-section">
+                <div class="card">
+                    <h3>40</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-calendar fa-lg"></i> total events</p>
+                </div>
+                <div class="card">
+                    <h3>59</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-clock fa-lg"></i> upcoming events</p>
+                </div>
+                <div class="card">
+                    <h3>324</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-circle-check fa-lg"></i> total volunteers</p>
+                </div>
+            </section>
+
+            <!-- Volunteer search -->
+            <section class="fourth-section">
+                <div class="first-part">
+                    <h4>Volunteer Registered</h4>
+                </div>
+                <div class="second-part">
+                    <input type="text" placeholder="Search events by name, location..." />
+                    <button class="search-btn">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </div>
+            </section>
+
+            <!-- Empty state -->
+            <section class="fifth-section">
+                <div class="final-image">
+                    <img src="images/Allura - Trophy 1.png" alt="">
+                </div>
+                <h3>No Volunteers registered yet. <br> Volunteers will appear once they join</h3>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/email-verification.css b/capstone project/email-verification.css
new file mode 100644
index 0000000..df74266
--- /dev/null
+++ b/capstone project/email-verification.css	
@@ -0,0 +1,73 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+body {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: "Poppins", sans-serif;
+    font-weight: 300px;
+    font-size: 14px;
+}
+
+
+main {
+    width: 100%;
+    max-width: 800px; 
+    padding: 40px 24px;
+    text-align: center;
+}
+
+
+.image img {
+    width: 180px;
+    height: 180px;
+    border-radius: 18px;
+   
+}
+
+h1 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1f3a5f;
+    margin-bottom: 70px;
+}
+
+/* Full-width grey divider line */
+.divider {
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    margin-bottom: 24px;
+    width: 100%;
+}
+
+.main-text {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.80);
+    line-height: 1.7;
+    margin-bottom: 80px;
+}
+
+
+button {
+    width: 80%;
+    padding: 16px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+button:hover {
+    background-color: #2a4f82;
+}
\ No newline at end of file
diff --git a/capstone project/email-verification.html b/capstone project/email-verification.html
new file mode 100644
index 0000000..5248a78
--- /dev/null
+++ b/capstone project/email-verification.html	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="email-verification.css">
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <main>
+        <div class="image">
+            <img src="images/ic_baseline-mail.png" alt="mail icon">
+        </div>
+
+        <h1>Verify Your Email</h1>
+
+        <hr class="divider">
+
+        <p class="main-text">
+            We've sent a verification link to your email address.<br>
+            Please check your inbox and click the link to continue.
+        </p>
+
+        <button>Resend Email</button>
+    </main>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/email-verification2.css b/capstone project/email-verification2.css
new file mode 100644
index 0000000..e891d1b
--- /dev/null
+++ b/capstone project/email-verification2.css	
@@ -0,0 +1,144 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+body {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: "Poppins", sans-serif;
+    font-weight: 300px;
+    font-size: 14px;
+}
+
+
+main {
+    width: 100%;
+    max-width: 800px; /* controls how wide the content stretches */
+    padding: 40px 24px;
+    text-align: center;
+}
+
+
+.image img {
+    width: 180px;
+    height: 180px;
+    border-radius: 18px;
+    margin-bottom: 50px;
+}
+
+h1 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1f3a5f;
+    margin-bottom: 15px;
+}
+.first-p{
+    margin-bottom: 50px;
+}
+
+/* Full-width grey divider line */
+.divider {
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    margin-bottom: 24px;
+    width: 100%;
+}
+
+.main-text {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.80);
+    line-height: 1.7;
+    margin-bottom: 20px;
+}
+.hour-glass-section{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    margin-bottom: 20px;
+}
+.hour-glass{
+    height:24px ;
+    width:24px ;
+}
+span{
+    color:#057df2;
+    font-size: 11px;
+    margin-left: 5px;
+
+}
+.question {
+    margin-bottom: 20px;
+    color: #1f3a5f;
+}
+.points{
+    margin-bottom: 60px;
+}
+
+.points p {
+    display: flex;
+    
+    align-items: center;   /* vertically centers the icon with the text */
+    gap: 10px; 
+    margin-left: 210px;            /* space between icon and text */
+    margin-bottom: 15px;   /* space between each line */
+}
+@media(max-width:600px)
+
+{
+    .points p{
+        margin-left: 100px;
+        font-size: 12px;
+        gap: 5px;
+        text-align: center;
+    }
+}
+
+.points img {
+    width: 10px;          
+    height: 10px;
+    flex-shrink: 0;        /* prevents the icon from shrinking */
+}
+.final-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+}
+@media (max-width:780px) {
+    .final-div{
+        flex-direction: column;
+        gap: 5px;
+    }
+    
+}
+
+
+button {
+    width: 30%;
+    padding: 16px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+@media(max-width:800px) {
+    button{
+        width: 70%;
+    }
+    
+}
+
+button:hover {
+    background-color: #2a4f82;
+}
\ No newline at end of file
diff --git a/capstone project/email-verification2.html b/capstone project/email-verification2.html
new file mode 100644
index 0000000..5ffdf51
--- /dev/null
+++ b/capstone project/email-verification2.html	
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="email-verification2.css">
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <main>
+        <div class="image">
+            <img src="images/Vector.png" alt="mail icon">
+        </div>
+
+        <h1> Your Account is Under Review</h1>
+        <p class="first-p"> Thank you for signing up as an Event Organizer.</p>
+
+        <hr class="divider">
+
+        <p class="main-text">
+            Our team is currently reviewing your details.
+            <br>This usually takes 24 – 48 hours.
+        </p>
+        <div class="hour-glass-section">
+            <img class="hour-glass" src="images/eos-icons_hourglass.png" alt="">
+            <h4> Approval Status: <span>pending review</span></h4>
+        </div>
+        <p><h2 class="question">What happens next?</h2></p>
+
+        <div class="points">
+            <p><img src="images/teenyicons_tick-circle-outline.png" alt="">Our admin team reviews your information</p>
+            <p><img src="images/teenyicons_tick-circle-outline.png" alt="">You will receive an email once approved</p>
+            </p>
+            <p><img src="images/teenyicons_tick-circle-outline.png" alt="">Then you can start creating events</p>
+
+        </div>
+
+        <div class="final-div">
+
+            <button>
+                <h3>[ Limited Access ]</h3>
+            </button>
+            <button>
+                <h3>[ Go to Dashboard ]</h3>
+            </button>
+
+        </div>
+
+    </main>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/event-details.css b/capstone project/event-details.css
new file mode 100644
index 0000000..e4e07e4
--- /dev/null
+++ b/capstone project/event-details.css	
@@ -0,0 +1,581 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: #057df2;
+    border-radius: 3px;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.cancel-btn {
+    background-color: red;
+    width: 130px;
+}
+
+/* ── PAGE BODY ── */
+.page-body {
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* ── EVENT TITLE ROW ── */
+.event-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.event-title-row h1 {
+    font-size: 28px;
+    font-weight: 600;
+    color: #2a2a2a;
+}
+
+.status-badge {
+    padding: 10px 30px;
+    border-radius: 3px;
+    font-size: 13px;
+    font-weight: 600;
+    background-color: #edf0ee;
+    color: #2a2a2a;
+    white-space: nowrap;
+}
+
+/* ── EVENT IMAGE ── */
+.event-image-wrapper {
+    position: relative;
+}
+
+.event-image-wrapper img {
+    width: 100%;
+    
+    min-height: 800px;
+    object-fit: contain;
+    display: block;
+    border-radius: 8px;
+}
+
+.image-status-badge {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background-color: #2e8b57;
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 7px 22px;
+    border-radius: 3px;
+}
+
+/* ── EVENT DESCRIPTION ── */
+.event-description {
+    margin: 0 25px 20px;
+    color: #000000;
+    font-weight: 400;
+}
+
+/* ── SECOND SECTION ── */
+.second-section div {
+    padding: 30px 20px;
+    border: 1px solid rgba(107, 124, 147, 0.3);
+    border-radius: 10px;
+    margin: 0 25px 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: #f7f8f9;
+    color: #2a2a2a;
+    line-height: 1.7;
+}
+
+/*  (time, date, location) ── */
+.list-under-upcoming {
+    display: flex;
+    gap: 40px;
+    margin: 0 27px 50px;
+    font-size: 16px;
+    flex-wrap: wrap;
+}
+
+.list-under-upcoming p {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+}
+
+.list-under-upcoming i {
+    color: #057df2;
+    background-color: #ffffff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-shrink: 0;
+    font-size: 18px;
+}
+
+
+.Requirements-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 20px;
+    margin: 0 27px 30px;
+}
+
+.Requirements-list ul {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    margin-left: 20px;
+}
+
+/*  THIRD SECTION: stat cards  */
+.third-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    margin: 0 27px 30px;
+}
+
+.card {
+    background-color: #f7f8f9;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #6b7c93;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 120px;
+}
+
+.card h3 {
+    width: 100%;
+    border-bottom: 1px solid #6b7c93;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 28px;
+    font-weight: 500;
+}
+
+.under-card {
+    color: #2a2a2a;
+    text-align: center;
+    font-size: 13px;
+}
+
+#fontawesome {
+    color: #057df2;
+}
+
+/*  TABLE SECTION  */
+.final-section {
+    background: rgba(228, 228, 228, 0.47);
+    border: 1px solid rgba(107, 124, 147, 0.5);
+    border-radius: 10px;
+    margin: 0 16px 40px;
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 500px;
+}
+
+th, td {
+    padding: 16px 12px;
+    text-align: center;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+tbody tr {
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+thead tr {
+    background: rgba(217, 217, 217, 0.65);
+    border-bottom: 2px solid rgba(107, 124, 147, 1);
+}
+
+tbody tr:last-child {
+    border-bottom: none;
+}
+
+.status {
+    padding: 6px 14px;
+    border-radius: 5px;
+    color: #f7f8f9;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    width: 100px;
+    max-width: 140px;
+}
+
+.upcoming, .completed, .published, .draft { background: #2e8b57; }
+
+
+/* 
+   TABLET — max-width: 1024px
+ */
+@media (max-width: 1024px) {
+
+    .event-title-row {
+        margin-right: 0;
+    }
+
+    .event-title-row h1 {
+        font-size: 22px;
+    }
+
+    .third-section {
+        gap: 16px;
+    }
+
+    .list-under-upcoming {
+        gap: 24px;
+        font-size: 15px;
+    }
+}
+
+
+/* 
+   MOBILE — max-width: 768px
+ */
+@media (max-width: 768px) {
+
+    /* Sidebar slides off-screen */
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    /* Stack Edit + Cancel buttons */
+    .header-btn {
+        gap: 8px;
+    }
+
+    .create-btn {
+        width: 90px;
+        font-size: 12px;
+        padding: 8px;
+    }
+
+    .cancel-btn {
+        width: 110px;
+    }
+
+    .page-body {
+        padding: 16px;
+        gap: 16px;
+    }
+
+    .event-title-row h1 {
+        font-size: 18px;
+    }
+
+    .status-badge {
+        padding: 8px 18px;
+        font-size: 12px;
+    }
+
+    .event-image-wrapper img {
+        max-height: 400px;
+        margin-bottom: -100px;
+        margin-top: -100px;
+    }
+
+    .event-description {
+        margin: 0 16px 16px;
+    }
+
+    .second-section div {
+        margin: 0 16px 20px;
+        padding: 20px 16px;
+    }
+
+    /* Stack time/date/location vertically */
+    .list-under-upcoming {
+        flex-direction: column;
+        gap: 16px;
+        margin: 0 16px 30px;
+        font-size: 14px;
+    }
+
+    .Requirements-container {
+        margin: 0 16px 24px;
+    }
+
+    .third-section {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        margin: 0 16px 24px;
+    }
+
+    .final-section {
+        margin: 0 12px 30px;
+    }
+
+    th, td {
+        padding: 12px 8px;
+        font-size: 12px;
+    }
+}
+
+
+/* 
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+*/
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    /* Hide cancel button on SE to save header space */
+    .cancel-btn {
+        display: none;
+    }
+
+    .create-btn {
+        width: 80px;
+        font-size: 11px;
+    }
+
+    .event-title-row h1 {
+        font-size: 16px;
+    }
+
+    .event-image-wrapper img {
+        max-height: 200px;
+    }
+
+    .image-status-badge {
+        top: 10px;
+        right: 10px;
+        font-size: 11px;
+        padding: 5px 12px;
+    }
+
+    
+    .third-section {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+
+    .card h3 {
+        font-size: 22px;
+    }
+
+    th, td {
+        padding: 10px 6px;
+        font-size: 11px;
+    }
+
+    .status {
+        font-size: 10px;
+        width: 80px;
+        padding: 4px 8px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/event-details.html b/capstone project/event-details.html
new file mode 100644
index 0000000..31e7c65
--- /dev/null
+++ b/capstone project/event-details.html	
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="event-details.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Events</h1>
+                    <h6>Browse and manage all your events</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">Edit event</button>
+                    <button class="create-btn cancel-btn">Cancel Events</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <!-- Page body -->
+            <div class="page-body">
+
+                <!-- Event name + status badge -->
+                <div class="event-title-row">
+                    <h1>Coastal Clean-Up Exercise</h1>
+                    <span class="status-badge">Published</span>
+                </div>
+
+                <!-- Event photo with overlay badge -->
+                <div class="event-image-wrapper">
+                    <img src="images/volunteers bending down.png" alt="">
+                    <span class="image-status-badge">Published</span>
+                </div>
+
+            </div>
+
+            <!-- Description heading -->
+            <div class="event-description">
+                <h2>Events Description</h2>
+            </div>
+
+            <!-- Description body -->
+            <section class="second-section">
+                <div>
+                    <p>
+                        Join us for a community coastal clean-up exercise aimed at reducing plastic waste and protecting
+                        marine life along the Lekki Waterfront. This initiative brings together passionate volunteers
+                        who are committed to keeping our beaches and waterways clean.
+                    </p>
+                    <p>
+                        During this event, volunteers will work in small groups to collect plastic waste, sort
+                        recyclable materials, and safely dispose of debris found along the shoreline. All necessary
+                        clean-up materials such as gloves, waste bags, and safety gear will be provided by the
+                        organizers.
+                    </p>
+                    <p>
+                        Beyond the clean-up activity, the event will also include a short environmental awareness
+                        session where participants will learn about the impact of plastic pollution on marine ecosystems
+                        and how small everyday actions can contribute to a healthier environment.
+                    </p>
+                    <p>
+                        Whether you are passionate about environmental sustainability, looking to give back to the
+                        community, or simply want to spend a meaningful morning outdoors, this event is a great
+                        opportunity to make a positive impact while connecting with like-minded individuals.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Event meta info -->
+            <div class="list-under-upcoming">
+                <p><i class="fa-regular fa-clock"></i> 8:00am - 12:00Noon</p>
+                <p><i class="fa-regular fa-calendar fa-lg"></i> June 12, 2026</p>
+                <p><i class="fa-solid fa-location-dot fa-lg"></i> Lekki waterfront, Lagos</p>
+            </div>
+
+            <!-- Requirements -->
+            <div class="Requirements-container">
+                <div class="Requirements-header">
+                    <h2>Volunteers Requirements</h2>
+                </div>
+                <div class="Requirements-list">
+                    <ul>
+                        <li>Must be 16+</li>
+                        <li>Wear comfortable clothes</li>
+                        <li>Bring water bottle</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Stat cards -->
+            <section class="third-section">
+                <div class="card">
+                    <h3>40</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-calendar fa-lg"></i> total events</p>
+                </div>
+                <div class="card">
+                    <h3>59</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-clock fa-lg"></i> upcoming events</p>
+                </div>
+                <div class="card">
+                    <h3>324</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-circle-check fa-lg"></i> total
+                        volunteers</p>
+                </div>
+            </section>
+
+            <!-- Volunteers table -->
+            <section class="final-section">
+                <table>
+                    <thead class="table-head">
+                        <tr>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th>Date</th>
+                            <th>Registration</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>John Doe</td>
+                            <td>johndoe@email.com</td>
+                            <td>March 10, 2026</td>
+                            <td><span class="status upcoming">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>John Smith</td>
+                            <td>johnsmith@email.com</td>
+                            <td>June 23, 2026</td>
+                            <td><span class="status published">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Mary Johnson</td>
+                            <td>maryjohnson@email.com</td>
+                            <td>June 23, 2026</td>
+                            <td><span class="status draft">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Chinyere Okafor</td>
+                            <td>ahmedbello@email.com</td>
+                            <td>June 23, 2026</td>
+                            <td><span class="status completed">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Emeka Nwosu</td>
+                            <td>emekanwosu@email.com</td>
+                            <td>June 23, 2026</td>
+                            <td><span class="status completed">Confirmed</span></td>
+                            <td>
+                                <h2>...</h2>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+
+
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/events-listing.css b/capstone project/events-listing.css
new file mode 100644
index 0000000..900a3bb
--- /dev/null
+++ b/capstone project/events-listing.css	
@@ -0,0 +1,410 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    
+background: #057df2;
+    border-radius: 3px;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+/* ── FILTER / SEARCH ROW ── */
+.first-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 16px 50px 16px;
+    margin-bottom: 50px;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.3);
+}
+
+.first-part {
+    display: flex;
+    align-items: center;
+    gap: 50px;
+}
+
+.tab {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(107, 124, 147, 1);
+    cursor: pointer;
+    padding-bottom: 4px;
+    border-bottom: 2px solid transparent;
+    margin: 0;
+}
+
+.tab.active-tab {
+    color: #057df2;
+    border-bottom: 2px solid #057df2;
+}
+
+.first-part .tab:hover {
+    color: #057df2;
+    border-bottom: 2px solid #057df2;
+}
+
+.second-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+    border: 1px solid rgba(107, 124, 147, 0.4);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 12px 18px;
+    font-size: 13px;
+    width: 220px;
+    color: #1e2d4a;
+}
+
+input::placeholder {
+    color: rgba(107, 124, 147, 0.7);
+    font-size: 12px;
+}
+
+.search-btn {
+    background: #f7f8f9;
+    border: none;
+    padding: 12px 20px;
+    cursor: pointer;
+    color: #057df2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-btn:hover {
+    background: #0369d1;
+    color: #ffffff;
+}
+
+/* ── TABLE ── */
+.second-section {
+      background: rgba(228, 228, 228, 0.47);
+    border: 1px solid rgba(107, 124, 147, 0.5);
+    border-radius: 10px;
+    margin: 0 16px 40px;
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 500px;
+}
+
+th, td {
+    padding: 16px 12px;
+    text-align: center;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+tbody tr {
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+thead tr {
+    background: #d9d9d9;
+    color: #1f3a5f;
+    border-bottom: 2px solid rgba(107, 124, 147, 1);
+}
+
+tbody tr:last-child {
+    border-bottom: none;
+}
+
+.status {
+    padding: 6px 14px;
+    border-radius: 5px;
+    color: #f7f8f9;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    width: 100px;
+    max-width: 140px;
+}
+
+.upcoming  { background: #ffb347; }
+.completed { background: #057df2; }
+.published { background: #2e8b57; }
+.draft     { background: #6b7c93; }
+
+
+/* 
+   TABLET — max-width: 1024px
+ */
+@media (max-width: 1024px) {
+    input {
+        width: 160px;
+    }
+}
+
+
+/* 
+   MOBILE — max-width: 768px
+ */
+@media (max-width: 768px) {
+
+    /* Sidebar slides off-screen */
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    .create-btn {
+        width: 100px;
+        font-size: 12px;
+    }
+
+    /* Stack tabs + search vertically */
+    .first-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 5px 12px 30px 12px;
+        margin-bottom: 24px;
+    }
+
+    .second-part {
+        width: 100%;
+    }
+
+    input {
+        width: 100%;
+        flex: 1;
+    }
+
+    .second-section {
+        margin: 0 12px 30px;
+    }
+
+    th, td {
+        padding: 12px 8px;
+        font-size: 12px;
+    }
+}
+
+
+/* 
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none; /* too cramped on SE */
+    }
+
+    .create-btn {
+        display: none;
+    }
+
+    .tab {
+        font-size: 12px;
+    }
+
+    .first-part {
+        gap: 16px;
+    }
+
+    th, td {
+        padding: 10px 6px;
+        font-size: 11px;
+    }
+
+    .status {
+        font-size: 10px;
+        padding: 4px 2px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/events-listing.html b/capstone project/events-listing.html
new file mode 100644
index 0000000..2ec0ad5
--- /dev/null
+++ b/capstone project/events-listing.html	
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="events-listing.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Events</h1>
+                    <h6>Browse and manage all your events</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">create event</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <section class="first-section">
+                <div class="first-part">
+                    <h2 class="tab active-tab">All</h2>
+                    <h2 class="tab">Draft</h2>
+                    <h2 class="tab">Published</h2>
+                    <h2 class="tab">Cancelled</h2>
+
+
+                </div>
+                <div class="second-part">
+                    <input type="text" placeholder="Search events by name, location..." />
+                    <button class="search-btn">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </div>
+            </section>
+
+            <section class="second-section">
+                <table>
+                    <thead class="table-head">
+                        <tr>
+                            <th>Event Name</th>
+                            <th>Location</th>
+                            <th>Date</th>
+                            <th>Volunteers</th>
+                            <th>Status</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Beach Cleanup</td>
+                            <td>Lekki waterfront</td>
+                            <td>June 15, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status upcoming">upcoming</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status published">published</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status draft">Draft</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">Completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Beach Cleanup</td>
+                            <td>Lekki waterfront</td>
+                            <td>June 15, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status upcoming">upcoming</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status draft">Draft</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status draft">Draft</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Beach Cleanup</td>
+                            <td>Lekki waterfront</td>
+                            <td>June 15, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status upcoming">upcoming</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/images/Allura - Trophy 1.png b/capstone project/images/Allura - Trophy 1.png
new file mode 100644
index 0000000..2464b1d
Binary files /dev/null and b/capstone project/images/Allura - Trophy 1.png differ
diff --git a/capstone project/images/Ellipse 34.png b/capstone project/images/Ellipse 34.png
new file mode 100644
index 0000000..c25b057
Binary files /dev/null and b/capstone project/images/Ellipse 34.png differ
diff --git a/capstone project/images/Ellipse 35.png b/capstone project/images/Ellipse 35.png
new file mode 100644
index 0000000..d2d8761
Binary files /dev/null and b/capstone project/images/Ellipse 35.png differ
diff --git a/capstone project/images/Ellipse 36.png b/capstone project/images/Ellipse 36.png
new file mode 100644
index 0000000..5431c02
Binary files /dev/null and b/capstone project/images/Ellipse 36.png differ
diff --git a/capstone project/images/Ellipse 37.png b/capstone project/images/Ellipse 37.png
new file mode 100644
index 0000000..eb8a35e
Binary files /dev/null and b/capstone project/images/Ellipse 37.png differ
diff --git a/capstone project/images/Ellipse 38.png b/capstone project/images/Ellipse 38.png
new file mode 100644
index 0000000..26cc626
Binary files /dev/null and b/capstone project/images/Ellipse 38.png differ
diff --git a/capstone project/images/Ellipse 39.png b/capstone project/images/Ellipse 39.png
new file mode 100644
index 0000000..d69b4cd
Binary files /dev/null and b/capstone project/images/Ellipse 39.png differ
diff --git a/capstone project/images/Vector.png b/capstone project/images/Vector.png
new file mode 100644
index 0000000..fde68c5
Binary files /dev/null and b/capstone project/images/Vector.png differ
diff --git a/capstone project/images/We Are Women - Together (1) 1.png b/capstone project/images/We Are Women - Together (1) 1.png
new file mode 100644
index 0000000..6e4a552
Binary files /dev/null and b/capstone project/images/We Are Women - Together (1) 1.png differ
diff --git a/capstone project/images/aidloop logo with dark background.png b/capstone project/images/aidloop logo with dark background.png
new file mode 100644
index 0000000..105435f
Binary files /dev/null and b/capstone project/images/aidloop logo with dark background.png differ
diff --git a/capstone project/images/ant-design_team-outlined.png b/capstone project/images/ant-design_team-outlined.png
new file mode 100644
index 0000000..2e40718
Binary files /dev/null and b/capstone project/images/ant-design_team-outlined.png differ
diff --git a/capstone project/images/calendar.png b/capstone project/images/calendar.png
new file mode 100644
index 0000000..a02b78b
Binary files /dev/null and b/capstone project/images/calendar.png differ
diff --git a/capstone project/images/eos-icons_hourglass.png b/capstone project/images/eos-icons_hourglass.png
new file mode 100644
index 0000000..36f0183
Binary files /dev/null and b/capstone project/images/eos-icons_hourglass.png differ
diff --git a/capstone project/images/fluent-color_checkmark-circle-32 (1).png b/capstone project/images/fluent-color_checkmark-circle-32 (1).png
new file mode 100644
index 0000000..c2bb253
Binary files /dev/null and b/capstone project/images/fluent-color_checkmark-circle-32 (1).png differ
diff --git a/capstone project/images/fluent-color_checkmark-circle-32.png b/capstone project/images/fluent-color_checkmark-circle-32.png
new file mode 100644
index 0000000..c2bb253
Binary files /dev/null and b/capstone project/images/fluent-color_checkmark-circle-32.png differ
diff --git a/capstone project/images/hero image aidloop.jpg b/capstone project/images/hero image aidloop.jpg
new file mode 100644
index 0000000..7fbe358
Binary files /dev/null and b/capstone project/images/hero image aidloop.jpg differ
diff --git a/capstone project/images/ic_baseline-mail.png b/capstone project/images/ic_baseline-mail.png
new file mode 100644
index 0000000..62a69b7
Binary files /dev/null and b/capstone project/images/ic_baseline-mail.png differ
diff --git a/capstone project/images/icon-park-solid_success.png b/capstone project/images/icon-park-solid_success.png
new file mode 100644
index 0000000..0d445f0
Binary files /dev/null and b/capstone project/images/icon-park-solid_success.png differ
diff --git a/capstone project/images/logo aidloop.jpg b/capstone project/images/logo aidloop.jpg
new file mode 100644
index 0000000..f251515
Binary files /dev/null and b/capstone project/images/logo aidloop.jpg differ
diff --git a/capstone project/images/mdi_arrow-up.png b/capstone project/images/mdi_arrow-up.png
new file mode 100644
index 0000000..6b48ad1
Binary files /dev/null and b/capstone project/images/mdi_arrow-up.png differ
diff --git a/capstone project/images/noto_calendar.png b/capstone project/images/noto_calendar.png
new file mode 100644
index 0000000..512f7f4
Binary files /dev/null and b/capstone project/images/noto_calendar.png differ
diff --git a/capstone project/images/noto_trophy.png b/capstone project/images/noto_trophy.png
new file mode 100644
index 0000000..c163725
Binary files /dev/null and b/capstone project/images/noto_trophy.png differ
diff --git a/capstone project/images/ph_anchor-simple-fill.png b/capstone project/images/ph_anchor-simple-fill.png
new file mode 100644
index 0000000..476dfba
Binary files /dev/null and b/capstone project/images/ph_anchor-simple-fill.png differ
diff --git a/capstone project/images/teenyicons_tick-circle-outline.png b/capstone project/images/teenyicons_tick-circle-outline.png
new file mode 100644
index 0000000..b46760f
Binary files /dev/null and b/capstone project/images/teenyicons_tick-circle-outline.png differ
diff --git a/capstone project/images/volunteers bending down.png b/capstone project/images/volunteers bending down.png
new file mode 100644
index 0000000..34b6050
Binary files /dev/null and b/capstone project/images/volunteers bending down.png differ
diff --git a/capstone project/organization-profile.css b/capstone project/organization-profile.css
new file mode 100644
index 0000000..6fde04a
--- /dev/null
+++ b/capstone project/organization-profile.css	
@@ -0,0 +1,581 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 8px;
+    border-left: 3px solid #ffffff;
+    padding-left: 13px;
+}
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    margin-bottom: 40px;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header h6 {
+    font-weight: 400;
+    color: #6b7c93;
+    margin-top: 2px;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fontawesome {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    cursor: pointer;
+    border: none;
+}
+
+/* ── FIRST SECTION ── */
+.first-section {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 15px;
+    background-color: #f7f8f9;
+    padding: 50px;
+    border-radius: 20px;
+    width: 65%;
+    margin: 0 auto 40px;
+}
+
+.first-section-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+}
+
+.first-part {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 12px;
+}
+
+.AL {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.AL h1 {
+    color: #ffffff;
+    background-color: #1f3a5f;
+    display: flex;
+    justify-content: center;
+    padding: 25px 18px;
+    border-radius: 10px;
+}
+
+.AL p {
+    background-color: #e6f9f0;
+    color: #1f3a5f;
+    padding: 7px 16px;
+    border-radius: 15px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.AL p::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background-color: #28a745;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.Aidloop-foundation {
+    color: #1f3a5f;
+}
+
+/* ── CONTACT GRID ── */
+.second-part {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.second-part1,
+.second-part2 {
+    display: flex;
+    gap: 16px;
+    margin-left: 100px;
+}
+
+.contact-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.box {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    width: 200px;
+    height: 70px;
+    background: #e3e3e3;
+    color: #2a2a2a;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}
+
+/* ── SECOND SECTION ── */
+.second-section {
+    background-color: #f7f8f9;
+    padding: 40px 50px;
+    border-radius: 20px;
+    width: 70%;
+    margin: 0 auto 40px;
+}
+
+.second-section-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+    align-items: center;
+}
+
+.second-section-header {
+    color: #1f3a5f;
+}
+
+.second-section-text {
+    background-color: rgba(5, 125, 242, 0.19);
+    color: #2a2a2a;
+    text-align: center;
+    padding: 50px;
+    border-radius: 10px;
+    display: flex;
+    gap: 5px;
+    line-height: 1.7;
+}
+
+/* ── THIRD SECTION: stat cards ── */
+.third-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 60px;
+    padding: 40px 24px;
+    flex-wrap: wrap; /* allows cards to wrap on smaller screens */
+}
+
+.card {
+    background: #f5f5f5;
+    border-radius: 12px;
+    padding: 20px;
+    width: 180px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 10px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+}
+
+.card-image {
+    border-radius: 10px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e8f4ff;
+}
+
+.card-image img {
+    width: 25px;
+    height: 25px;
+}
+
+.card-text {
+    display: flex;
+    flex-direction: column;
+    font-size: 11px;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+
+.card-text > p {
+    font-size: 24px;
+    font-weight: bold;
+    color: #1f3a5f;
+    margin: 4px 0;
+}
+
+.arrow-up {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 4px;
+    background-color: #e8f5ee;
+    border-radius: 6px;
+    padding: 2px 6px;
+}
+
+.arrow-up img {
+    width: 12px;
+    height: 12px;
+}
+
+.arrow-up p {
+    font-size: 11px ;
+    font-weight: normal;
+    color: #1f3a5f ;
+    margin: 0 ;
+}
+.first{
+    background-color:rgba(5, 125, 242, 0.26)
+    
+    
+}
+.second{
+    background-color: rgba(46, 139, 87 , 0.51);
+}
+.third{
+    background-color: rgba(255, 179, 71, 0.29);
+    
+}
+
+
+
+/* 
+   TABLET — max-width: 1024px
+ */
+@media (max-width: 1024px) {
+
+    .first-section {
+        padding: 30px 24px;
+        width: calc(100% - 48px);
+    }
+
+    .second-part1,
+    .second-part2 {
+        margin-left: 0;
+        gap: 12px;
+    }
+
+    .box {
+        width: 160px;
+        height: 60px;
+        font-size: 12px;
+    }
+
+    .second-section {
+        width: calc(100% - 48px);
+        padding: 30px 24px;
+    }
+
+    .second-section-text {
+        padding: 30px;
+    }
+
+    .third-section {
+        gap: 24px;
+    }
+}
+
+
+/* 
+   MOBILE — max-width: 768px
+ */
+@media (max-width: 768px) {
+
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 24px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .header h6 {
+        font-size: 11px;
+    }
+
+    .create-btn {
+        width: 100px;
+        font-size: 12px;
+    }
+
+    /* Profile card stretches full width */
+    .first-section {
+        width: calc(100% - 32px);
+        padding: 24px 16px;
+        margin: 0 16px 30px;
+        border-radius: 12px;
+    }
+
+    /* Stack org name + contact vertically */
+    .first-section-container {
+        gap: 24px;
+    }
+
+    /* Contact grid: stack the two rows */
+    .second-part {
+        justify-content: flex-start;
+    }
+
+    .contact-grid {
+        width: 100%;
+    }
+
+    .second-part1,
+    .second-part2 {
+        margin-left: 0;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .box {
+        width: calc(50% - 5px);
+        height: 56px;
+        font-size: 12px;
+    }
+
+    /* About section */
+    .second-section {
+        width: calc(100% - 32px);
+        margin: 0 16px 30px;
+        padding: 24px 16px;
+        border-radius: 12px;
+    }
+
+    .second-section-text {
+        padding: 20px;
+        font-size: 13px;
+        text-align: left;
+    }
+
+    /* Cards wrap into 2 per row */
+    .third-section {
+        gap: 16px;
+        padding: 24px 16px;
+        justify-content: center;
+    }
+
+    .card {
+        width: calc(50% - 8px);
+        min-width: 140px;
+    }
+}
+
+
+/* 
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .header h6 {
+        display: none;
+    }
+
+    .create-btn {
+        width: 90px;
+        font-size: 11px;
+    }
+
+    .AL h1 {
+        padding: 18px 14px;
+        font-size: 20px;
+    }
+
+    .Aidloop-foundation h1 {
+        font-size: 16px;
+    }
+
+    /* Boxes go full width on SE */
+    .box {
+        width: 100%;
+        height: 50px;
+    }
+
+    .second-part1,
+    .second-part2 {
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .second-section-text {
+        padding: 16px;
+        font-size: 12px;
+    }
+
+    /* Cards go 1 per row on SE */
+    .third-section {
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        padding: 16px;
+    }
+
+    .card {
+        width: 100%;
+        max-width: 300px;
+    }
+}
diff --git a/capstone project/organization-profile.html b/capstone project/organization-profile.html
new file mode 100644
index 0000000..a507d3e
--- /dev/null
+++ b/capstone project/organization-profile.html	
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="organization-profile.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a class="active" href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <div>
+                    <h1>Organization Profile</h1>
+                    <h6>Manage your organization information.</h6>
+                </div>
+
+                <div class="header-btn">
+                    <button class="create-btn">Edit Profile</button>
+                    <a class="fontawesome" href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a class="fontawesome" href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <!-- Profile card -->
+            <section class="first-section">
+                <div class="first-section-container">
+
+                    <div class="first-part">
+                        <div class="AL">
+                            <h1>AL</h1>
+                            <p>Verified Org</p>
+                        </div>
+                        <div class="Aidloop-foundation">
+                            <h1>Aidloop Foundation</h1>
+                            <p>Non-Profit Volunteer Organization</p>
+                        </div>
+                    </div>
+
+                    <div class="second-part">
+                        <div class="contact-grid">
+                            <div class="second-part1">
+                                <div class="box">
+                                    <i class="fa-regular fa-envelope"></i>
+                                    <span>contact@gmail.com</span>
+                                </div>
+                                <div class="box">
+                                    <i class="fa-solid fa-phone"></i>
+                                    <span>+234 8165434534</span>
+                                </div>
+                            </div>
+                            <div class="second-part2">
+                                <div class="box">
+                                    <span>www.aidloop.org</span>
+                                </div>
+                                <div class="box">
+                                    <i class="fa-solid fa-location-dot"></i>
+                                    <span>Victoria Island, Lagos</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </section>
+
+            <!-- About section -->
+            <section class="second-section">
+                <div class="second-section-container">
+                    <div class="second-section-header">
+                        <h2 class="about-organization">About Organization</h2>
+                    </div>
+                    <div class="second-section-text">
+                        <p>AidLoop connects volunteers with meaningful community events such as
+                            environmental clean-ups, charity drives, and social impact activities. Our mission
+                            is to make volunteering accessible, rewarding, and impactful for every participant.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Stat cards -->
+            <section class="third-section">
+                <div class="card">
+                    <div class="card-image first">
+                        <img src="images/noto_calendar.png" alt="">
+                    </div>
+                    <div class="card-text">
+                        TOTAL EVENTS CREATED
+                        <p>24</p>
+                        <div class="arrow-up first">
+                            <img src="images/mdi_arrow-up.png" alt="">
+                            <p>+5</p>
+                            <p>this month</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-image second ">
+                        <img src="images/ant-design_team-outlined.png" alt="">
+                    </div>
+                    <div class="card-text">
+                        TOTAL VOLUNTEERS
+                        <p>318</p>
+                        <div class="arrow-up second">
+                            <img src="images/mdi_arrow-up.png" alt="">
+                            <p>+318</p>
+                            <p>this month</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-image third">
+                        <img src="images/noto_trophy.png" alt="">
+                    </div>
+                    <div class="card-text">
+                        CERTIFICATES ISSUED
+                        <p>157</p>
+                        <div class="arrow-up third">
+                            <div>
+                                <img src="images/mdi_arrow-up.png" alt="">
+                                <p>+18</p>
+                            </div>
+                            <div class="arrow-up-text">
+                                <p>this month</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/organizers-dashboard.css b/capstone project/organizers-dashboard.css
new file mode 100644
index 0000000..b944854
--- /dev/null
+++ b/capstone project/organizers-dashboard.css	
@@ -0,0 +1,390 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.main-container {
+    display: flex;
+}
+
+/* ── SIDEBAR ── */
+.sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: #1f3a5f;
+    color: #ffffff;
+    padding: 0 20px 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+    
+background: #057df2;
+    border-radius: 3px;
+    padding-left: 13px;
+}
+
+
+.logo {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+
+.sidebar a {
+    list-style: none;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.sidebar li {
+    padding: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+/* ── HAMBURGER BUTTON (hidden on desktop) ── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px;
+}
+
+.hamburger span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background-color: #1f3a5f;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+/* Overlay behind sidebar on mobile */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ── MAIN CONTENT ── */
+.main-content {
+    flex: 1;
+    background: #ffffff;
+    margin-left: 200px;
+}
+
+/* ── HEADER ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.header h1 {
+    font-weight: 600;
+    margin: 0;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+header button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header a {
+    color: #1f3a5f;
+}
+
+.create-btn {
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+/* ── DASHBOARD LABEL ── */
+.Dashboard {
+    color: #1f3a5f;
+    margin-left: 5px;
+    margin-bottom: 40px;
+    padding: 0 16px;
+}
+
+/* ── STAT CARDS ── */
+.first-section {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    margin-bottom: 25px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-bottom: 1px solid #6b7c93;
+    padding: 0 16px 50px;
+}
+
+.card {
+    background-color: #f7f8f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #6b7c93;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.card h3 {
+    width: 100%;
+    border-bottom: 1px solid #6b7c93;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.under-card {
+    color: #2a2a2a;
+    text-align: center;
+    font-size: 13px;
+}
+
+#fontawesome {
+    color: #057df2;
+}
+
+/* ── RECENT EVENTS ── */
+.recent-event {
+    color: #1f3a5f;
+    margin-left: 5px;
+    margin-bottom: 30px;
+    padding: 0 16px;
+}
+
+/* ── TABLE SECTION ── */
+.second-section {
+     background: rgba(228, 228, 228, 0.47);
+    border: 1px solid rgba(107, 124, 147, 0.5);
+    border-radius: 10px;
+    margin: 0 16px 40px;
+    overflow-x: auto; /* horizontal scroll if table overflows */
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 500px; /* prevents table from getting too squished */
+}
+
+th,
+td {
+    padding: 16px 12px;
+    text-align: center;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+tbody tr {
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+}
+
+thead tr {
+    background: rgba(217, 217, 217, 0.65);
+    border-bottom: 2px solid rgba(107, 124, 147, 1);
+}
+
+tbody tr:last-child {
+    border-bottom: none;
+}
+
+.status {
+    padding: 6px 14px;
+    border-radius: 5px;
+    color: #f7f8f9;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    width: 100px;
+    max-width: 140px;
+}
+
+.upcoming  { background: #ffb347; }
+.completed { background: #057df2; }
+.published { background: #2e8b57; }
+.draft     { background: #6b7c93; }
+
+
+/* 
+   TABLET  —  max-width: 1024px
+ */
+@media (max-width: 1024px) {
+    .first-section {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+
+/* 
+   MOBILE  —  max-width: 768px
+   Covers iPhone XR (414px), SE (375px),
+   and everything in between
+ */
+@media (max-width: 768px) {
+
+    /* Sidebar slides off-screen by default */
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+
+    /* JS adds .open to show it */
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    /* Main content takes full width */
+    .main-content {
+        margin-left: 0;
+    }
+
+    /* Show hamburger button */
+    .hamburger {
+        display: flex;
+    }
+
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+
+    .header h1 {
+        font-size: 16px;
+    }
+
+    .create-btn {
+        width: 100px;
+        font-size: 12px;
+    }
+
+    /* 2-column cards on tablet/large mobile */
+    .first-section {
+        grid-template-columns: repeat(2, 1fr);
+        padding: 0 12px 30px;
+        gap: 12px;
+    }
+
+    .Dashboard,
+    .recent-event {
+        padding: 0 12px;
+    }
+
+    .second-section {
+        margin: 0 12px 30px;
+    }
+
+    th, td {
+        padding: 12px 8px;
+        font-size: 12px;
+    }
+}
+
+
+/* 
+   SMALL MOBILE  —  max-width: 480px
+   iPhone SE (375px) and smaller
+ */
+@media (max-width: 480px) {
+
+    .header h1 {
+        font-size: 14px;
+    }
+
+    .create-btn {
+        display: none; /* hide on very small screens to save space */
+    }
+
+    /* 1-column cards on small phones */
+    .first-section {
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        padding: 0 10px 24px;
+    }
+
+    .card {
+        padding: 14px 10px;
+    }
+
+    .card h3 {
+        font-size: 20px;
+    }
+
+    .under-card {
+        font-size: 11px;
+    }
+
+    th, td {
+        padding: 10px 6px;
+        font-size: 11px;
+    }
+
+    .status {
+        font-size: 10px;
+        padding: 4px 2px;
+    }
+}
\ No newline at end of file
diff --git a/capstone project/organizers-dashboard.html b/capstone project/organizers-dashboard.html
new file mode 100644
index 0000000..16eafcf
--- /dev/null
+++ b/capstone project/organizers-dashboard.html	
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="organizers-dashboard.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Dark overlay behind sidebar on mobile -->
+    <div class="sidebar-overlay" id="overlay"></div>
+
+    <div class="main-container">
+        <aside class="sidebar" id="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a class="active" href="">
+                        <li><i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> Logout</li>
+                    </a>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main-content">
+
+            <header class="header">
+                <!-- Hamburger: only visible on mobile -->
+                <button class="hamburger" id="hamburger" aria-label="Open menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <h1>Welcome Back</h1>
+
+                <div class="header-btn">
+                    <button class="create-btn">create event</button>
+                    <a href=""><i class="fa-regular fa-bell fa-2xl"></i></a>
+                    <a href=""><i class="fa-regular fa-circle-user fa-2xl"></i></a>
+                </div>
+            </header>
+
+            <div class="Dashboard">
+                <h2>Dashboard</h2>
+            </div>
+
+            <section class="first-section">
+                <div class="card">
+                    <h3>80</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-calendar fa-lg"></i> total events</p>
+                </div>
+                <div class="card">
+                    <h3>42</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-clock fa-lg"></i> upcoming events</p>
+                </div>
+                <div class="card">
+                    <h3>17</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-circle-check fa-lg"></i> completed
+                        events</p>
+                </div>
+                <div class="card">
+                    <h3>324</h3>
+                    <p class="under-card"><i id="fontawesome" class="fa-regular fa-circle-check fa-lg"></i> total
+                        volunteers</p>
+                </div>
+            </section>
+
+            <div class="recent-event">
+                <h2>Recent Events</h2>
+            </div>
+
+            <section class="second-section">
+                <table>
+                    <thead class="table-head">
+                        <tr>
+                            <th>Event Name</th>
+                            <th>Location</th>
+                            <th>Date</th>
+                            <th>Volunteers</th>
+                            <th>Status</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Beach Cleanup</td>
+                            <td>Lekki waterfront</td>
+                            <td>June 15, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status upcoming">upcoming</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status published">published</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status draft">Draft</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">Completed</span></td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>Food distribution</td>
+                            <td>Coastal Road EYC.</td>
+                            <td>June 23, 2026</td>
+                            <td>19/35</td>
+                            <td><span class="status completed">completed</span></td>
+                            <td>...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+        </main>
+    </div>
+
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/capstone project/successful-verification.css b/capstone project/successful-verification.css
new file mode 100644
index 0000000..0130f20
--- /dev/null
+++ b/capstone project/successful-verification.css	
@@ -0,0 +1,88 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+body {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: "Poppins", sans-serif;
+    font-weight: 300px;
+    font-size: 14px;
+}
+
+
+main {
+    width: 100%;
+    max-width: 800px; /* controls how wide the content stretches */
+    padding: 40px 24px;
+    text-align: center;
+}
+
+
+.image img {
+    width: 160px;
+    height: 160px;
+    border-radius: 18px;
+}
+
+h1 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1f3a5f;
+    margin-bottom: 70px;
+}
+
+/* Full-width grey divider line */
+.divider {
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    margin-bottom: 24px;
+    width: 100%;
+}
+
+.main-text {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.80);
+    line-height: 1.7;
+    margin-bottom: 80px;
+}
+.other-text {
+    font-size: 14px;
+    color: red;
+    line-height: 1.7;
+    margin-bottom: 20px;
+}
+.other-text a{
+    text-decoration: none;
+    color: #057DF2;
+}
+.final-text {
+    font-size: 14px;
+    color: rgba(76, 76, 76, 0.60);
+    line-height: 1.7;
+    margin-bottom: 50px;
+}
+
+
+button {
+    width: 80%;
+    padding: 16px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-bottom: 30px;
+}
+
+button:hover {
+    background-color: #2a4f82;
+}
\ No newline at end of file
diff --git a/capstone project/successful-verification.html b/capstone project/successful-verification.html
new file mode 100644
index 0000000..61db071
--- /dev/null
+++ b/capstone project/successful-verification.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+      <link rel="stylesheet" href="successful-verification.css">
+     <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+<body>
+     <main>
+        <div class="image">
+            <img src="images/icon-park-solid_success.png" alt="mail icon">
+        </div>
+
+        <h1> Email Verified Successfully</h1>
+
+        <hr class="divider">
+
+        <p class="main-text">
+           Your email has been verified. You can now access <br>
+            your dashboard.
+        </p>
+
+         <p class="other-text">
+           <a href="#"> Change Email Address</a>
+        </p>
+         <hr class="divider">
+         <p class="final-text">Back to Login</p>
+
+        <button>Continue to Dashboard</button>
+    </main>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/capstone project/volunteer-management.css b/capstone project/volunteer-management.css
new file mode 100644
index 0000000..b5cee3e
--- /dev/null
+++ b/capstone project/volunteer-management.css	
@@ -0,0 +1,427 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    font-family: "Poppins", sans-serif;
+    font-weight: 400px;
+    font-size: 14px;
+}
+.main-container{
+    display: flex;
+}
+.sidebar{
+    width:200px;
+   min-height:100vh; /* full screen height */
+    background:#1f3a5f;
+    color:#ffffff;
+    padding:0 20px 20px 20px;
+   position: fixed;
+    top: 0;
+    left: 0;
+     overflow-y: auto; /* in case content is taller than screen */
+    z-index: 100;
+
+    
+
+}
+.sidebar a:hover li {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding-left: 16px;
+    transition: all 0.2s ease;
+}
+
+.sidebar a.active li {
+background: #057df2;
+    border-radius: 3px;
+    padding-left: 13px;
+}
+
+.logo{
+    margin-top: 0;
+    margin-bottom:30px;
+    padding: 0 0px 24px;
+    height: 130px;
+    width: 150px;
+    object-fit: cover;
+}
+ .sidebar a {
+      list-style: none;
+      text-decoration: none;
+      color: #ffffff;
+      
+    }
+    .sidebar li{
+    padding:12px;
+    margin-bottom:5px;
+    cursor:pointer;
+}
+.main-content{
+    flex:1; /* take remaining width */
+    
+    background:#ffffff;
+    margin-left: 200px;
+}
+.header {
+    display:flex;
+    justify-content:space-between; /* pushes items apart */
+    align-items:center;
+    margin-bottom:30px;
+    background-color: #f7f8f9;
+    color: #1f3a5f;
+    width: 100%;
+    padding: 16px 24px;
+    position: sticky;          /* ← stays at top when scrolling */
+    top: 0;
+    z-index: 99;   
+}
+.header h1 {
+    
+    font-weight: 600;
+    margin: 0; /* ← remove default h1 margin that can push things off */
+}
+
+
+.header-btn{
+    display: flex;
+    align-items: center;
+    gap: 16px;
+      
+}
+header button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+header a{
+    color: #1f3a5f;
+}
+.create-btn{
+    width: 120px;
+    height: 35px;
+    border-radius: 10px;
+    background-color: #1f3a5f;
+    color: #ffffff;
+    padding: 10px;
+}
+.Dashboard{
+    color: #1f3a5f;
+    margin-left: 5px;
+    margin-bottom: 40px;
+}
+.first-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* ← tabs on left, search on right */
+    padding: 12px 16px;
+    margin-bottom: 50px;
+    padding: 5px 3px 50px 5px;
+    border-bottom: 1px solid rgba(107, 124, 147, 0.3);
+   
+}
+
+/* --- TABS --- */
+.first-part {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.tab {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(107, 124, 147, 1);
+    cursor: pointer;
+    padding-bottom: 4px;
+    border-bottom: 2px solid transparent;
+    margin: 0;
+}
+
+.tab.active-tab {
+    color: #057df2;                  /* ← blue like in the image */
+    border-bottom: 2px solid #057df2; /* ← blue underline on active */
+}
+.first-part .tab:hover{
+     color: #057df2;                  /* ← blue like in the image */
+    border-bottom: 2px solid #057df2;
+    
+}
+
+/* --- SEARCH BOX --- */
+.second-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    border: 1px solid rgba(107, 124, 147, 0.4);
+    border-radius: 6px;
+    overflow: hidden;        /* ← keeps button inside the border */
+    background: white;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 12px 18px;
+    font-size: 13px;
+    width: 220px;
+    color: #1e2d4a;
+}
+
+input::placeholder {
+    color: rgba(107, 124, 147, 0.7);
+    font-size: 12px;
+}
+
+.search-btn {
+    background:  #f7f8f9;     /* ← blue button like in the image */
+    border: none;
+    padding: 12px 20px;
+    cursor: pointer;
+    color:  #057df2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-btn:hover {
+    background: #0369d1;
+}
+
+
+
+.second-section{
+    background: rgba(228, 228, 228, 0.47);
+    border: 1px solid rgba(107, 124, 147, 0.5);
+    border-radius:10px;
+    margin-left: 5px;
+    margin-right: 5px;
+    overflow: hidden;
+}
+table{
+    width:100%;
+    border-collapse:collapse;
+    table-layout: fixed;
+    margin-top:0px;
+         
+        
+}
+th, td{
+    padding:16px 12px;
+    text-align:center;
+    vertical-align: middle;
+    border-bottom:1px solid rgba(107, 124, 147, 0.5);
+    width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+    white-space: nowrap;
+    
+}
+tbody tr{
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5); 
+}
+thead tr {
+    border-bottom: 1px solid rgba(107, 124, 147, 0.5);
+    
+    background: #d9d9d9;
+    border-bottom: 2px solid rgba(107, 124, 147, 1);
+
+
+}
+tbody tr:last-child {
+    border-bottom: none;
+}
+.table-image{
+     height: 38px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 50%; /* ← makes it circular */
+    vertical-align: middle;   
+    min-width: 40px;
+}
+tbody td:first-child {
+    text-align: left;
+    vertical-align: middle; /* ← keeps everything centered vertically */
+}
+thead th:first-child,
+tbody td:first-child {
+    text-align: center;        /* ← gives enough room for image + name */
+    padding-left: 20px;  /* ← same padding on both so they line up */
+}
+thead th:last-child,
+tbody td:last-child {
+    text-align: center;
+    width: 50%;
+}
+thead th:nth-child(4),
+tbody td:nth-child(4) {
+    width: 100%;  /* Status */
+}
+tbody td:first-child {
+    text-align: center;
+    padding-left: px;
+    vertical-align: middle;
+}
+
+
+
+.status {
+    padding: 6px 14px;
+    border-radius: 5px;
+    color: #f7f8f9;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    margin-left: 60px;
+    width: 100px;
+    max-width: 140px;
+}
+.name-cell{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+.upcoming{
+    background:#ffb347;
+}
+
+.completed{
+    background:#057df2;
+}
+
+.published{
+    background:#2e8b57;
+}
+.draft{
+    background:#6b7c93;
+}
+/* responsiveness */
+/* 
+   TABLET — max-width: 1024px
+ */
+@media (max-width: 1024px) {
+    input {
+        width: 160px;
+    }
+}
+ 
+ 
+/* 
+   MOBILE — max-width: 768px
+ */
+@media (max-width: 768px) {
+ 
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        z-index: 200;
+    }
+ 
+    .sidebar.open {
+        transform: translateX(0);
+    }
+ 
+    .main-content {
+        margin-left: 0;
+    }
+ 
+    .hamburger {
+        display: flex;
+    }
+ 
+    .header {
+        padding: 12px 16px;
+        margin-bottom: 20px;
+    }
+ 
+    .header h1 {
+        font-size: 16px;
+    }
+ 
+    .header h6 {
+        font-size: 11px;
+    }
+ 
+    /* Stack tabs + search vertically */
+    .first-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 5px 12px 30px;
+        margin-bottom: 24px;
+    }
+ 
+    .second-part {
+        width: 100%;
+    }
+ 
+    input {
+        width: 100%;
+        flex: 1;
+    }
+ 
+    .second-section {
+        margin: 0 12px 30px;
+    }
+ 
+    th, td {
+        padding: 12px 8px;
+        font-size: 12px;
+    }
+ 
+    .status {
+        font-size: 11px;
+        width: 80px;
+        margin-top: 8px;
+        margin-left: 0;
+    }
+}
+ 
+ 
+/* 
+   SMALL MOBILE — max-width: 480px
+   iPhone SE (375px)
+ */
+@media (max-width: 480px) {
+ 
+    .header h1 {
+        font-size: 14px;
+    }
+ 
+    .header h6 {
+        display: none;
+    }
+ 
+    .tab {
+        font-size: 12px;
+    }
+ 
+    .first-part {
+        gap: 12px;
+    }
+ 
+    th, td {
+        padding: 10px 6px;
+        font-size: 11px;
+    }
+ 
+    .table-image {
+        width: 28px;
+        height: 28px;
+        min-width: 28px;
+    }
+ 
+    .status {
+        font-size: 10px;
+        width: 70px;
+        padding: 4px 6px;
+    }
+}
diff --git a/capstone project/volunteer-management.html b/capstone project/volunteer-management.html
new file mode 100644
index 0000000..e2879de
--- /dev/null
+++ b/capstone project/volunteer-management.html	
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="volunteer-management.css">
+    <script src="https://kit.fontawesome.com/241f3a0b37.js" crossorigin="anonymous"></script>
+    <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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div class="main-container">
+        <aside class="sidebar">
+            <img class="logo" src="images/aidloop logo with dark background.png" alt="logo">
+            <nav class="sidebar-nav">
+                <ul>
+                    <a href="">
+                        <li> <i class="fa-regular fa-house fa-lg"></i> Dashboard</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-circle-plus fa-lg"></i> Create Events</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-regular fa-calendar fa-lg"></i> Events</li>
+                    </a>
+                    <a class="active" href="">
+                        <li><i class="fa-solid fa-user-group fa-lg"></i> Volunteers</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-user-graduate fa-lg"></i> Certificates</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-building-user fa-lg"></i> Profile</li>
+                    </a>
+                    <a href="">
+                        <li><i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i> logout</li>
+                    </a>
+                </ul>
+
+            </nav>
+
+        </aside>
+        <main class="main-content">
+
+            <header class="header">
+                <div>
+                    <h1>Volunteers</h1>
+                    <h6>Manage Volunteers across all events </h6>
+                </div>
+                <div class="header-btn">
+
+                    <a href=""> <i class="fa-regular fa-bell fa-2xl"></i> </a>
+                    <a href=""> <i class="fa-regular fa-circle-user fa-2xl"></i> </a>
+
+                </div>
+
+            </header>
+
+
+            <section class="first-section">
+                <div class="first-part">
+                    <h2 class="tab active-tab">All</h2>
+                    <h2 class="tab">confirmed</h2>
+                    <h2 class="tab">Pending</h2>
+                    <h2 class="tab">Cancelled</h2>
+
+                </div>
+                <div class="second-part">
+                    <input type="text" placeholder="Search events by name, location..." />
+                    <button class="search-btn">
+                        <i class="fa-solid fa-magnifying-glass "></i>
+                    </button>
+                </div>
+            </section>
+
+
+
+            <section class="second-section">
+
+                <table>
+                    <thead class="table-head">
+                        <tr>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th> Phone</th>
+                            <th> Status</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 35.png" alt="">
+                                    <span>John Doe</span>
+                                </div>
+                            </td>
+                            <td>johndoe@gmail.com</td>
+                            <td>08098782343</td>
+                            <td class="status upcoming"> upcoming</td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 36.png" alt="">
+                                    <span>Mary Musa</span>
+                                </div>
+                            </td>
+                            <td>marymusa@gmail.com</td>
+                            <td>080987111543</td>
+                            <td class="status published"> published</td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 37.png" alt="">
+                                    <span>David James</span>
+                                </div>
+                            </td>
+                            <td>davidjames@gmail.com</td>
+                            <td>08098006543</td>
+                            <td class="status draft"> Draft</td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 38.png" alt="">
+                                    <span>Emeka Obi</span>
+                                </div>
+                            </td>
+                            <td>emekaobi@gmail.com</td>
+                            <td> 08098786543</td>
+                            <td class="status completed"> Completed</td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 39.png" alt="">
+                                    <span>Aisha Bello</span>
+                                </div>
+                            </td>
+                            <td>Aishabello@gmail.com</td>
+                            <td> 09123456789</td>
+                            <td class="status completed"> completed</td>
+                            <td>...</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="name-cell">
+                                    <img class="table-image" src="images/Ellipse 34.png" alt="">
+                                    <span>fatima Ahmed</span>
+                                </div>
+                            </td>
+                            <td>fatimaahmed@gmail.com</td>
+                            <td> 08094336543</td>
+                            <td class="status upcoming"> upcoming</td>
+                            <td>...</td>
+                        </tr>
+
+
+                    </tbody>
+                </table>
+            </section>
+
+        </main>
+
+    </div>
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        hamburger.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+            overlay.classList.toggle('active');
+        });
+
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            overlay.classList.remove('active');
+        });
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file