diff --git a/assets/css/custom.css b/assets/css/custom.css
index 65a1626..de8f511 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,346 +1,100 @@
 :root {
-    --color-bg: #ffffff;
-    --color-text: #1a1a1a;
-    --color-primary: #2563EB; /* Vibrant Blue */
-    --color-secondary: #000000;
-    --color-accent: #A3E635; /* Lime Green */
-    --color-surface: #f8f9fa;
-    --font-heading: 'Space Grotesk', sans-serif;
-    --font-body: 'Inter', sans-serif;
-    --border-width: 2px;
-    --shadow-hard: 5px 5px 0px #000;
-    --shadow-hover: 8px 8px 0px #000;
-    --radius-pill: 50rem;
-    --radius-card: 1rem;
+    --primary-color: #004D40;
+    --primary-light: #00695C;
+    --secondary-color: #FFC107;
+    --bg-color: #F8F9FA;
+    --surface-color: #FFFFFF;
+    --text-main: #212529;
+    --text-muted: #6C757D;
+    --border-color: #DEE2E6;
+    --border-radius: 4px;
 }
 
 body {
-    font-family: var(--font-body);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    overflow-x: hidden;
+    background-color: var(--bg-color);
+    color: var(--text-main);
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    line-height: 1.5;
 }
 
-h1, h2, h3, h4, h5, h6, .navbar-brand {
-    font-family: var(--font-heading);
-    letter-spacing: -0.03em;
-}
-
-/* Utilities */
-.text-primary { color: var(--color-primary) !important; }
-.bg-black { background-color: #000 !important; }
-.text-white { color: #fff !important; }
-.shadow-hard { box-shadow: var(--shadow-hard); }
-.border-2-black { border: var(--border-width) solid #000; }
-.py-section { padding-top: 5rem; padding-bottom: 5rem; }
-
-/* Navbar */
 .navbar {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    border-bottom: var(--border-width) solid transparent;
-    transition: all 0.3s;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    background-color: var(--primary-color) !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.navbar.scrolled {
-    border-bottom-color: #000;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-.brand-text {
-    font-size: 1.5rem;
-    font-weight: 800;
-}
-
-.nav-link {
-    font-weight: 500;
-    color: var(--color-text);
-    margin-left: 1rem;
-    position: relative;
-}
-
-.nav-link:hover, .nav-link.active {
-    color: var(--color-primary);
-}
-
-/* Buttons */
-.btn {
+.navbar-brand {
     font-weight: 700;
-    font-family: var(--font-heading);
-    padding: 0.8rem 2rem;
-    border-radius: var(--radius-pill);
-    border: var(--border-width) solid #000;
-    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
-    box-shadow: var(--shadow-hard);
+    letter-spacing: -0.5px;
 }
 
-.btn:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-}
-
-.btn:active {
-    transform: translate(2px, 2px);
-    box-shadow: 0 0 0 #000;
+.card {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    transition: transform 0.2s;
 }
 
 .btn-primary {
-    background-color: var(--color-primary);
-    border-color: #000;
-    color: #fff;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    border-radius: var(--border-radius);
+    font-weight: 600;
 }
 
 .btn-primary:hover {
-    background-color: #1d4ed8;
-    border-color: #000;
-    color: #fff;
+    background-color: var(--primary-light);
+    border-color: var(--primary-light);
 }
 
-.btn-outline-dark {
-    background-color: #fff;
-    color: #000;
-}
-
-.btn-cta {
-    background-color: var(--color-accent);
-    color: #000;
-}
-
-.btn-cta:hover {
-    background-color: #8cc629;
-    color: #000;
-}
-
-/* Hero Section */
-.hero-section {
-    min-height: 100vh;
-    padding-top: 80px;
-}
-
-.background-blob {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(80px);
-    opacity: 0.6;
-    z-index: 1;
-}
-
-.blob-1 {
-    top: -10%;
-    right: -10%;
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, var(--color-accent), transparent);
-}
-
-.blob-2 {
-    bottom: 10%;
-    left: -10%;
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, var(--color-primary), transparent);
-}
-
-.highlight-text {
-    background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%);
-    background-repeat: no-repeat;
-    background-size: 100% 40%;
-    background-position: 0 88%;
-    padding: 0 5px;
-}
-
-.dot { color: var(--color-primary); }
-
-.badge-pill {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border: 2px solid #000;
-    border-radius: 50px;
-    font-weight: 700;
-    background: #fff;
-    box-shadow: 4px 4px 0 #000;
-    font-family: var(--font-heading);
-    font-size: 0.9rem;
-}
-
-/* Marquee */
-.marquee-container {
+.table {
+    background-color: var(--surface-color);
+    border-radius: var(--border-radius);
     overflow: hidden;
-    white-space: nowrap;
-    border-top: 2px solid #000;
-    border-bottom: 2px solid #000;
 }
 
-.rotate-divider {
-    transform: rotate(-2deg) scale(1.05);
-    z-index: 10;
-    position: relative;
-    margin-top: -50px;
-    margin-bottom: 30px;
-}
-
-.marquee-content {
-    display: inline-block;
-    animation: marquee 20s linear infinite;
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: 1.5rem;
-    letter-spacing: 2px;
-}
-
-@keyframes marquee {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-50%); }
-}
-
-/* Portfolio Cards */
-.project-card {
-    border: 2px solid #000;
-    border-radius: var(--radius-card);
-    overflow: hidden;
-    background: #fff;
-    transition: transform 0.3s ease;
-    box-shadow: var(--shadow-hard);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.project-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 8px 8px 0 #000;
-}
-
-.card-img-holder {
-    height: 250px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: 2px solid #000;
-    position: relative;
-    font-size: 4rem;
-}
-
-.placeholder-art {
-    transition: transform 0.3s ease;
-}
-
-.project-card:hover .placeholder-art {
-    transform: scale(1.2) rotate(10deg);
-}
-
-.bg-soft-blue { background-color: #e0f2fe; }
-.bg-soft-green { background-color: #dcfce7; }
-.bg-soft-purple { background-color: #f3e8ff; }
-.bg-soft-yellow { background-color: #fef9c3; }
-
-.category-tag {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    background: #000;
-    color: #fff;
-    padding: 5px 12px;
-    border-radius: 20px;
+.table th {
+    background-color: #F1F3F5;
+    text-transform: uppercase;
     font-size: 0.75rem;
+    letter-spacing: 0.05em;
     font-weight: 700;
+    color: var(--text-muted);
+    border-bottom: 2px solid var(--border-color);
 }
 
-.card-body { padding: 1.5rem; }
+.attendance-toggle {
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition: all 0.2s;
+}
 
-.link-arrow {
-    text-decoration: none;
-    color: #000;
+.attendance-toggle.present {
+    background-color: #E8F5E9;
+    color: #2E7D32;
+    border: 1px solid #A5D6A7;
+}
+
+.attendance-toggle.absent {
+    background-color: #FFEBEE;
+    color: #C62828;
+    border: 1px solid #EF9A9A;
+}
+
+.stats-card {
+    border-left: 4px solid var(--primary-color);
+}
+
+.stats-card h3 {
+    font-size: 1.5rem;
     font-weight: 700;
-    display: inline-flex;
-    align-items: center;
-    margin-top: auto;
+    margin: 0;
 }
 
-.link-arrow i { transition: transform 0.2s; margin-left: 5px; }
-.link-arrow:hover i { transform: translateX(5px); }
-
-/* About */
-.about-image-stack {
-    position: relative;
-    height: 400px;
-    width: 100%;
-}
-
-.stack-card {
-    position: absolute;
-    width: 80%;
-    height: 100%;
-    border-radius: var(--radius-card);
-    border: 2px solid #000;
-    box-shadow: var(--shadow-hard);
-    left: 10%;
-    transform: rotate(-3deg);
-    background-size: cover;
-}
-
-/* Forms */
-.form-control {
-    border: 2px solid #000;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    font-weight: 500;
-    background: #f8f9fa;
-}
-
-.form-control:focus {
-    box-shadow: 4px 4px 0 var(--color-primary);
-    border-color: #000;
-    background: #fff;
-}
-
-/* Animations */
-.animate-up {
-    opacity: 0;
-    transform: translateY(30px);
-    animation: fadeUp 0.8s ease forwards;
-}
-
-.delay-100 { animation-delay: 0.1s; }
-.delay-200 { animation-delay: 0.2s; }
-
-@keyframes fadeUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Social */
-.social-links a {
-    transition: transform 0.2s;
-    display: inline-block;
-}
-.social-links a:hover {
-    transform: scale(1.2) rotate(10deg);
-    color: var(--color-accent) !important;
-}
-
-/* Responsive */
-@media (max-width: 991px) {
-    .rotate-divider {
-        transform: rotate(0);
-        margin-top: 0;
-        margin-bottom: 2rem;
-    }
-    
-    .hero-section {
-        padding-top: 120px;
-        text-align: center;
-        min-height: auto;
-        padding-bottom: 100px;
-    }
-    
-    .display-1 { font-size: 3.5rem; }
-    
-    .blob-1 { width: 300px; height: 300px; right: -20%; }
-    .blob-2 { width: 300px; height: 300px; left: -20%; }
-}
+.stats-card p {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index fdf2cfd..b1aae36 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,73 +1,27 @@
+// Service Worker Registration for Offline Capability
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js')
+            .then(reg => console.log('Service Worker registered', reg))
+            .catch(err => console.log('Service Worker registration failed', err));
+    });
+}
+
+// Interactivity for Attendance Toggles
 document.addEventListener('DOMContentLoaded', () => {
+    const tableRows = document.querySelectorAll('#learnersTable tbody tr');
     
-    // Smooth scrolling for navigation links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            if (targetId === '#') return;
-            
-            const targetElement = document.querySelector(targetId);
-            if (targetElement) {
-                // Close mobile menu if open
-                const navbarToggler = document.querySelector('.navbar-toggler');
-                const navbarCollapse = document.querySelector('.navbar-collapse');
-                if (navbarCollapse.classList.contains('show')) {
-                    navbarToggler.click();
-                }
-
-                // Scroll with offset
-                const offset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - offset;
-
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: "smooth"
-                });
-            }
+    tableRows.forEach(row => {
+        const presentBtn = row.querySelector('label[for^="pres_"]');
+        const absentBtn = row.querySelector('label[for^="abs_"]');
+        
+        // Add subtle feedback on change
+        const inputs = row.querySelectorAll('input[type="radio"]');
+        inputs.forEach(input => {
+            input.addEventListener('change', () => {
+                row.classList.add('table-primary');
+                setTimeout(() => row.classList.remove('table-primary'), 500);
+            });
         });
     });
-
-    // Navbar scroll effect
-    const navbar = document.querySelector('.navbar');
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.remove('bg-transparent');
-        } else {
-            navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.add('bg-transparent');
-        }
-    });
-
-    // Intersection Observer for fade-up animations
-    const observerOptions = {
-        threshold: 0.1,
-        rootMargin: "0px 0px -50px 0px"
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-up');
-                entry.target.style.opacity = "1";
-                observer.unobserve(entry.target); // Only animate once
-            }
-        });
-    }, observerOptions);
-
-    // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation)
-    // For now, let's just make sure the hero animations run. 
-    // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here.
-    // Given the request, the CSS animation I added runs on load for Hero. 
-    // Let's make the project cards animate in.
-    
-    const projectCards = document.querySelectorAll('.project-card');
-    projectCards.forEach((card, index) => {
-        card.style.opacity = "0";
-        card.style.animationDelay = `${index * 0.1}s`;
-        observer.observe(card);
-    });
-
-});
\ No newline at end of file
+});
diff --git a/index.php b/index.php
index 7205f3d..a55506e 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,217 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/db/config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+$db = db();
+$date = date('Y-m-d');
+$message = '';
+
+// Handle Attendance Submission
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['attendance'])) {
+    try {
+        $db->beginTransaction();
+        $stmt = $db->prepare("INSERT INTO attendance (learner_id, status, date) 
+                             VALUES (:learner_id, :status, :date) 
+                             ON DUPLICATE KEY UPDATE status = VALUES(status)");
+        
+        foreach ($_POST['attendance'] as $learner_id => $status) {
+            $stmt->execute([
+                'learner_id' => $learner_id,
+                'status' => $status,
+                'date' => $date
+            ]);
+        }
+        $db->commit();
+        $message = "Attendance saved successfully for $date.";
+    } catch (Exception $e) {
+        $db->rollBack();
+        $message = "Error: " . $e->getMessage();
+    }
+}
+
+// Fetch Learners and their current attendance for today
+$query = "SELECT l.*, a.status as today_status 
+          FROM learners l 
+          LEFT JOIN attendance a ON l.id = a.learner_id AND a.date = :date 
+          ORDER BY l.full_name ASC";
+$stmt = $db->prepare($query);
+$stmt->execute(['date' => $date]);
+$learners = $stmt->fetchAll();
+
+// Stats
+$total_learners = count($learners);
+$present_count = 0;
+foreach ($learners as $l) {
+    if ($l['today_status'] === 'present') $present_count++;
+}
+$presence_rate = $total_learners > 0 ? round(($present_count / $total_learners) * 100) : 0;
+
+// Project Info
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Education Ecosystem Platform for South African Schools';
 $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teacher Dashboard | Township Schools Platform</title>
+    <?php if ($projectDescription): ?>
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <?php endif; ?>
+    <?php if ($projectImageUrl): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <?php endif; ?>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+<nav class="navbar navbar-dark mb-4">
+    <div class="container">
+        <a class="navbar-brand" href="#">
+            <i class="bi bi-book-half me-2"></i>
+            Township Schools Platform
+        </a>
+        <div class="d-flex align-items-center">
+            <span class="text-white me-3 d-none d-md-inline">Role: <strong>Teacher</strong></span>
+            <div class="dropdown">
+                <button class="btn btn-outline-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                    Switch Role
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item active" href="#">Teacher</a></li>
+                    <li><a class="dropdown-item" href="#">Admin (Soon)</a></li>
+                    <li><a class="dropdown-item" href="#">Parent (Soon)</a></li>
+                </ul>
+            </div>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+</nav>
+
+<div class="container pb-5">
+    <div class="row mb-4">
+        <div class="col-12">
+            <h2 class="h4 mb-1">Teacher Dashboard</h2>
+            <p class="text-muted small">Daily attendance for <strong><?= date('l, d F Y') ?></strong></p>
+        </div>
+    </div>
+
+    <?php if ($message): ?>
+    <div class="alert alert-info alert-dismissible fade show" role="alert">
+        <?= htmlspecialchars($message) ?>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+    <?php endif; ?>
+
+    <!-- Stats Row -->
+    <div class="row g-3 mb-4">
+        <div class="col-md-4">
+            <div class="card p-3 stats-card">
+                <p>Total Learners</p>
+                <h3><?= $total_learners ?></h3>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card p-3 stats-card" style="border-left-color: #2E7D32;">
+                <p>Presence Rate</p>
+                <h3><?= $presence_rate ?>%</h3>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card p-3 stats-card" style="border-left-color: var(--secondary-color);">
+                <p>Pending Reports</p>
+                <h3>0</h3>
+            </div>
+        </div>
+    </div>
+
+    <!-- Attendance Table -->
+    <div class="card">
+        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
+            <h5 class="mb-0">Class Register</h5>
+            <div class="input-group input-group-sm w-auto">
+                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
+                <input type="text" id="learnerSearch" class="form-control border-start-0" placeholder="Search learner...">
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <form method="POST">
+                <div class="table-responsive">
+                    <table class="table table-hover mb-0" id="learnersTable">
+                        <thead>
+                            <tr>
+                                <th class="ps-4">Learner Name</th>
+                                <th>Grade</th>
+                                <th>Student ID</th>
+                                <th class="text-end pe-4">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($learners as $learner): ?>
+                            <tr>
+                                <td class="ps-4">
+                                    <strong><?= htmlspecialchars($learner['full_name']) ?></strong>
+                                </td>
+                                <td><?= htmlspecialchars($learner['grade']) ?></td>
+                                <td><span class="badge bg-light text-dark"><?= htmlspecialchars($learner['student_id']) ?></span></td>
+                                <td class="text-end pe-4">
+                                    <div class="btn-group btn-group-sm" role="group">
+                                        <input type="radio" class="btn-check" name="attendance[<?= $learner['id'] ?>]" 
+                                               id="pres_<?= $learner['id'] ?>" value="present" 
+                                               <?= $learner['today_status'] === 'present' ? 'checked' : '' ?> required>
+                                        <label class="btn btn-outline-success" for="pres_<?= $learner['id'] ?>">Present</label>
+
+                                        <input type="radio" class="btn-check" name="attendance[<?= $learner['id'] ?>]" 
+                                               id="abs_<?= $learner['id'] ?>" value="absent"
+                                               <?= $learner['today_status'] === 'absent' ? 'checked' : '' ?>>
+                                        <label class="btn btn-outline-danger" for="abs_<?= $learner['id'] ?>">Absent</label>
+                                    </div>
+                                </td>
+                            </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="p-3 text-end border-top">
+                    <button type="submit" class="btn btn-primary px-4">
+                        <i class="bi bi-cloud-upload me-2"></i> Save & Sync Register
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<footer class="bg-white border-top py-4 mt-5">
+    <div class="container text-center">
+        <p class="text-muted small mb-0">&copy; <?= date('Y') ?> Township Schools Platform. Optimized for low-bandwidth.</p>
+        <div class="mt-2">
+            <span class="badge rounded-pill bg-light text-dark border"><i class="bi bi-wifi-off me-1"></i> Offline Capable</span>
+            <span class="badge rounded-pill bg-light text-dark border ms-2"><i class="bi bi-shield-check me-1"></i> POPIA Compliant</span>
+        </div>
+    </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js?v=<?= time() ?>"></script>
+<script>
+    // Simple Search Filter
+    document.getElementById('learnerSearch').addEventListener('keyup', function() {
+        let filter = this.value.toUpperCase();
+        let rows = document.querySelector("#learnersTable tbody").rows;
+        for (let i = 0; i < rows.length; i++) {
+            let nameCol = rows[i].cells[0].textContent.toUpperCase();
+            let idCol = rows[i].cells[2].textContent.toUpperCase();
+            if (nameCol.indexOf(filter) > -1 || idCol.indexOf(filter) > -1) {
+                rows[i].style.display = "";
+            } else {
+                rows[i].style.display = "none";
+            }
+        }
+    });
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/sw.js b/sw.js
new file mode 100644
index 0000000..114e217
--- /dev/null
+++ b/sw.js
@@ -0,0 +1,25 @@
+const CACHE_NAME = 'township-schools-v1';
+const ASSETS_TO_CACHE = [
+    '/',
+    '/index.php',
+    '/assets/css/custom.css',
+    '/assets/js/main.js',
+    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
+    'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css'
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(ASSETS_TO_CACHE);
+        })
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});