diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..e121d94
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,150 @@
+/*
+Custom Styles for FRA-INSIGHT
+Theme: "Predictive Power Grid"
+*/
+
+:root {
+    --primary: #0047AB; /* Electric Blue */
+    --secondary: #00B386; /* Eco Green */
+    --accent: #FFD700; /* Energy Yellow */
+    --bg-light: #F7FAFC; /* Soft Gray White */
+    --text-primary: #1A1A1A;
+    --text-secondary: #4A5568;
+    --card-bg: #FFFFFF;
+    --border-radius: 0.5rem;
+    --shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
+    --shadow-md: 0 8px 20px rgba(0,0,0,0.1);
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    background-color: var(--bg-light);
+    color: var(--text-primary);
+}
+
+.navbar-custom {
+    background-color: var(--card-bg);
+    box-shadow: var(--shadow-sm);
+    padding: 1rem 0;
+}
+
+.navbar-custom .navbar-brand {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-size: 1.75rem;
+    color: var(--primary);
+}
+
+.navbar-custom .navbar-brand i {
+    margin-right: 0.5rem;
+}
+
+.navbar-custom .nav-link {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin: 0 0.5rem;
+    border-radius: 0.25rem;
+    transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+.navbar-custom .nav-link:hover, 
+.navbar-custom .nav-link.active {
+    color: var(--primary);
+    background-color: rgba(0, 71, 171, 0.05);
+}
+
+.body-content {
+    padding: 2rem 0;
+}
+
+.page-title {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-size: 2.5rem;
+    color: var(--text-primary);
+    margin-bottom: 2rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+.card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-md);
+}
+
+.card-title {
+    color: var(--primary);
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+    font-weight: 500;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: #003a8c;
+    border-color: #003a8c;
+}
+
+.btn-secondary {
+    background-color: var(--secondary);
+    border-color: var(--secondary);
+    font-weight: 500;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.btn-secondary:hover {
+    background-color: #009a72;
+    border-color: #009a72;
+}
+
+.kpi-card {
+    text-align: center;
+    padding: 2rem;
+}
+
+.kpi-number {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.kpi-label {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+}
+
+.footer {
+    background-color: var(--card-bg);
+    padding: 2rem 0;
+    margin-top: 4rem;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
+}
+
+/* Plotly chart container */
+.chart-container {
+    min-height: 450px;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..7a8f348
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,2 @@
+// Custom JS for FRA-INSIGHT
+// Future interactivity will go here.
diff --git a/federated.php b/federated.php
new file mode 100644
index 0000000..0795b25
--- /dev/null
+++ b/federated.php
@@ -0,0 +1,175 @@
+<?php
+$page_title = "Federated Learning";
+include 'includes/header.php';
+?>
+<style>
+.federated-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.fl-node {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px;
+    font-size: 0.9rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.fl-node.central {
+    width: 160px;
+    height: 160px;
+    background-color: var(--primary);
+    color: white;
+    z-index: 10;
+    font-size: 1.1rem;
+}
+.fl-node.local {
+    background-color: var(--card-bg);
+    color: var(--text-primary);
+}
+.fl-line {
+    position: absolute;
+    background-color: #ccc;
+    z-index: 1;
+    transform-origin: 0 0;
+    transition: background-color 0.5s ease;
+}
+.fl-line.animated {
+    background-color: var(--accent);
+}
+</style>
+
+<div class="container mt-5">
+    <h1 class="page-title">Federated Learning Simulation</h1>
+    <p class="lead mb-5">Visualizing how distributed learning improves the national model without sharing sensitive data.</p>
+
+    <div class="row g-4">
+        <div class="col-lg-8">
+            <div class="card h-100">
+                <div class="card-body">
+                    <div id="federated-visualization" class="federated-container"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card h-100">
+                <div class="card-header">
+                    <h5 class="mb-0">Simulation Log</h5>
+                </div>
+                <div id="log-container" class="card-body" style="max-height: 350px; overflow-y: auto; font-family: 'Roboto Mono', monospace; font-size: 0.85rem;">
+                    <p class="text-muted">Click the button to start the simulation...</p>
+                </div>
+                <div class="card-footer text-center">
+                    <button id="trigger-round" class="btn btn-primary">Trigger New Aggregation Round</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const container = document.getElementById('federated-visualization');
+    const logContainer = document.getElementById('log-container');
+    const triggerButton = document.getElementById('trigger-round');
+    let round = 0;
+
+    const nodes = [
+        { id: 'central', name: 'National Model', isCentral: true },
+        { id: 'node1', name: 'Mumbai Substation', angle: 0 },
+        { id: 'node2', name: 'Delhi Substation', angle: 72 },
+        { id: 'node3', name: 'Chennai Substation', angle: 144 },
+        { id: 'node4', name: 'Kolkata Substation', angle: 216 },
+        { id: 'node5', name: 'Bangalore Substation', angle: 288 },
+    ];
+
+    const radius = 150;
+    const containerWidth = container.offsetWidth;
+    const containerHeight = container.offsetHeight;
+    const centerX = containerWidth / 2;
+    const centerY = containerHeight / 2;
+
+    // Create nodes and lines
+    nodes.forEach(node => {
+        const nodeEl = document.createElement('div');
+        nodeEl.id = node.id;
+        nodeEl.className = `fl-node ${node.isCentral ? 'central' : 'local'}`;
+        nodeEl.innerHTML = `<strong>${node.name}</strong>`;
+        if (node.isCentral) {
+            nodeEl.style.left = `${centerX - 80}px`;
+            nodeEl.style.top = `${centerY - 80}px`;
+        } else {
+            const x = centerX + radius * Math.cos(node.angle * Math.PI / 180) - 60;
+            const y = centerY + radius * Math.sin(node.angle * Math.PI / 180) - 60;
+            nodeEl.style.left = `${x}px`;
+            nodeEl.style.top = `${y}px`;
+
+            // Draw line from local to central
+            const line = document.createElement('div');
+            line.id = `line-${node.id}`;
+            line.className = 'fl-line';
+            const angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
+            const length = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+            line.style.width = `${length}px`;
+            line.style.height = '2px';
+            line.style.left = `${centerX}px`;
+            line.style.top = `${centerY}px`;
+            line.style.transform = `rotate(${angle}deg)`;
+            container.appendChild(line);
+        }
+        container.appendChild(nodeEl);
+    });
+
+    function log(message, type = 'info') {
+        const colors = { info: 'text-secondary', success: 'text-success', emphasis: 'text-primary' };
+        logContainer.innerHTML += `<p class="mb-1 ${colors[type]}">[${new Date().toLocaleTimeString()}] ${message}</p>`;
+        logContainer.scrollTop = logContainer.scrollHeight;
+    }
+
+    triggerButton.addEventListener('click', function() {
+        if (round === 0) {
+            logContainer.innerHTML = '';
+        }
+        round++;
+        log(`Starting Aggregation Round ${round}...`, 'emphasis');
+        this.disabled = true;
+
+        let delay = 500;
+        nodes.filter(n => !n.isCentral).forEach(node => {
+            setTimeout(() => {
+                log(`Node ${node.name} sending model updates...`);
+                document.getElementById(`line-${node.id}`).classList.add('animated');
+            }, delay);
+            delay += 300;
+        });
+
+        setTimeout(() => {
+            log('All updates received. Aggregating national model...');
+            const centralNode = document.getElementById('central');
+            centralNode.style.transform = 'scale(1.1)';
+        }, delay + 500);
+
+        setTimeout(() => {
+            log(`Round ${round} complete. National model updated.`, 'success');
+            document.getElementById('central').style.transform = 'scale(1)';
+            nodes.filter(n => !n.isCentral).forEach(node => {
+                 document.getElementById(`line-${node.id}`).classList.remove('animated');
+            });
+            this.disabled = false;
+        }, delay + 1500);
+    });
+});
+</script>
+
+<?php include 'includes/footer.php'; ?>
\ No newline at end of file
diff --git a/green.php b/green.php
new file mode 100644
index 0000000..5c772a6
--- /dev/null
+++ b/green.php
@@ -0,0 +1,112 @@
+<?php
+$page_title = "Green Impact";
+include 'includes/header.php';
+?>
+
+<div class="container mt-5">
+    <h1 class="page-title">Green Impact</h1>
+    <p class="lead mb-5">Tracking our contribution to a more sustainable and environmentally friendly power grid.</p>
+
+    <!-- Green KPIs -->
+    <div class="row g-4 mb-5">
+        <div class="col-md-4">
+            <div class="card kpi-card bg-success text-white">
+                <div class="card-body">
+                    <div class="kpi-number">2.7 tons</div>
+                    <div class="kpi-label">CO₂ Emissions Saved</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card kpi-card bg-info text-white">
+                <div class="card-body">
+                    <div class="kpi-number">3,000 L</div>
+                    <div class="kpi-label">Transformer Oil Preserved</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card kpi-card bg-warning text-dark">
+                <div class="card-body">
+                    <div class="kpi-number">45 MWh</div>
+                    <div class="kpi-label">Energy Loss Prevented</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts and Commitment -->
+    <div class="row g-4">
+        <div class="col-lg-8">
+            <div class="card h-100">
+                <div class="card-header">
+                    <h5 class="mb-0">Sustainability Trends (Last 12 Months)</h5>
+                </div>
+                <div class="card-body">
+                    <div id="sustainability-chart" class="chart-container"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card h-100">
+                <div class="card-body d-flex flex-column">
+                    <h5 class="card-title">Our Commitment to a Greener Grid</h5>
+                    <p class="text-secondary flex-grow-1">By proactively identifying and addressing transformer faults, FRA-INSIGHT not only enhances grid reliability but also plays a crucial role in environmental conservation. Preventing catastrophic failures avoids oil spills and reduces the carbon footprint associated with manufacturing and transporting replacement units. Our goal is a grid that is not just smart, but also sustainable.</p>
+                    <button class="btn btn-secondary w-100"><i class="bi bi-file-earmark-zip"></i> Download Sustainability Report</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Mock data for 12 months
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const co2Saved = Array.from({length: 12}, (_, i) => (i + 1) * 0.2 + Math.random() * 0.1);
+    const oilPreserved = Array.from({length: 12}, (_, i) => (i + 1) * 250 + Math.random() * 100);
+
+    // Create Trend Chart
+    const co2Trace = {
+        x: months,
+        y: co2Saved,
+        name: 'CO₂ Saved (tons)',
+        type: 'scatter',
+        mode: 'lines+markers',
+        line: { color: 'var(--secondary)' }
+    };
+
+    const oilTrace = {
+        x: months,
+        y: oilPreserved,
+        name: 'Oil Preserved (L)',
+        type: 'scatter',
+        mode: 'lines+markers',
+        yaxis: 'y2',
+        line: { color: 'var(--primary)' }
+    };
+
+    const layout = {
+        title: 'Monthly Environmental Savings',
+        xaxis: { title: 'Month' },
+        yaxis: { 
+            title: 'CO₂ Saved (tons)',
+            titlefont: { color: 'var(--secondary)' },
+            tickfont: { color: 'var(--secondary)' }
+        },
+        yaxis2: {
+            title: 'Oil Preserved (L)',
+            titlefont: { color: 'var(--primary)' },
+            tickfont: { color: 'var(--primary)' },
+            overlaying: 'y',
+            side: 'right'
+        },
+        legend: { x: 0, y: 1.2, orientation: 'h' },
+        margin: { t: 60, l: 60, r: 60, b: 60 }
+    };
+
+    Plotly.newPlot('sustainability-chart', [co2Trace, oilTrace], layout, {responsive: true});
+});
+</script>
+
+<?php include 'includes/footer.php'; ?>
\ No newline at end of file
diff --git a/includes/footer.php b/includes/footer.php
new file mode 100644
index 0000000..e0aaea7
--- /dev/null
+++ b/includes/footer.php
@@ -0,0 +1,13 @@
+</main>
+
+<footer class="bg-dark text-white text-center p-4 mt-5">
+    <div class="container">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> FRA-INSIGHT. All Rights Reserved.</p>
+        <p>Developed by Flatlogic | SIH 2025</p>
+    </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/includes/header.php b/includes/header.php
new file mode 100644
index 0000000..5f93e42
--- /dev/null
+++ b/includes/header.php
@@ -0,0 +1,75 @@
+<?php
+$current_page = basename($_SERVER['PHP_SELF']);
+$page_title = isset($page_title) ? $page_title : "FRA-INSIGHT";
+
+$nav_items = [
+    'index.php' => 'Home Dashboard',
+    'upload.php' => 'Upload & Analyze',
+    'resilience.php' => 'Resilience Index',
+    'policy.php' => 'Policy View',
+    'federated.php' => 'Federated Learning',
+    'green.php' => 'Green Impact'
+];
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title><?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT</title>
+    <meta name="description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
+    <meta name="keywords" content="FRA-INSIGHT, transformer health, power grid, AI diagnostics, predictive maintenance">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT">
+    <meta property="og:description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:title" content="<?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT">
+    <meta property="twitter:description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
+    <meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <!-- Stylesheets -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    
+    <!-- Fonts -->
+    <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=Poppins:wght@500;600;700&family=Inter:wght@400;500&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
+    <!-- JS Libraries -->
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
+
+</head>
+<body>
+
+<nav class="navbar navbar-expand-lg navbar-custom">
+  <div class="container">
+    <a class="navbar-brand" href="index.php">
+        <i class="bi bi-lightning-charge-fill"></i>
+        FRA-INSIGHT
+    </a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-auto">
+        <?php foreach ($nav_items as $file => $name): ?>
+        <li class="nav-item">
+          <a class="nav-link <?php echo ($current_page == $file) ? 'active' : ''; ?>" href="<?php echo $file; ?>"><?php echo $name; ?></a>
+        </li>
+        <?php endforeach; ?>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<main>
\ No newline at end of file
diff --git a/index.php b/index.php
index 7205f3d..710372a 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,112 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+$page_title = "Home Dashboard";
+include 'includes/header.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'] ?? '';
-$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>
-</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>
+<div class="container mt-5">
+    <div class="text-center mb-5">
+        <h1 style="font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 3rem; color: var(--primary);">FRA-INSIGHT</h1>
+        <p class="lead" style="font-family: 'Inter', sans-serif; color: var(--text-secondary); font-size: 1.25rem;">AI-based Explainable Diagnostics for India’s Power Infrastructure</p>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+
+    <!-- National Stats -->
+    <div class="row g-4 mb-5">
+        <div class="col-md-3">
+            <div class="card kpi-card">
+                <div class="card-body">
+                    <div class="kpi-number">800,000</div>
+                    <div class="kpi-label">Total Transformers</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card kpi-card">
+                <div class="card-body">
+                    <div class="kpi-number text-danger">127</div>
+                    <div class="kpi-label">Risk Zones</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card kpi-card">
+                <div class="card-body">
+                    <div class="kpi-number" style="color: var(--secondary);">2.7 tons</div>
+                    <div class="kpi-label">CO₂ Saved</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card kpi-card">
+                <div class="card-body">
+                    <div class="kpi-number" style="color: var(--accent);">3,000 L</div>
+                    <div class="kpi-label">Oil Preserved</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Map Section -->
+    <div class="card">
+        <div class="card-header">
+            <h5 class="card-title mb-0">National Transformer Health Map</h5>
+        </div>
+        <div class="card-body">
+            <div id="map-container" class="chart-container"></div>
+        </div>
+    </div>
+    
+    <div class="text-center mt-4">
+         <a href="upload.php" class="btn btn-primary btn-lg">Analyze FRA Data <i class="bi bi-arrow-right"></i></a>
+    </div>
+
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Generate random data points for the map
+    const numPoints = 150;
+    const latitudes = Array.from({length: numPoints}, () => 8 + Math.random() * 28); // India lat range
+    const longitudes = Array.from({length: numPoints}, () => 68 + Math.random() * 30); // India lon range
+    const healthStatus = Array.from({length: numPoints}, () => Math.random()); // 0 -> good, 1 -> bad
+
+    const colors = healthStatus.map(h => {
+        if (h > 0.8) return 'red';
+        if (h > 0.5) return 'yellow';
+        return 'green';
+    });
+
+    const sizes = healthStatus.map(h => {
+        if (h > 0.8) return 15;
+        if (h > 0.5) return 10;
+        return 5;
+    });
+
+    const mapData = [{
+        type: 'scattermapbox',
+        lat: latitudes,
+        lon: longitudes,
+        mode: 'markers',
+        marker: {
+            size: sizes,
+            color: colors,
+            opacity: 0.7
+        },
+        text: healthStatus.map(h => `Health Score: ${(100 * (1-h)).toFixed(0)}%`),
+        hoverinfo: 'text'
+    }];
+
+    const layout = {
+        mapbox: {
+            style: 'open-street-map',
+            center: { lat: 20.5937, lon: 78.9629 },
+            zoom: 3.8
+        },
+        margin: { r: 0, t: 0, b: 0, l: 0 },
+        showlegend: false
+    };
+
+    Plotly.newPlot('map-container', mapData, layout, {responsive: true});
+});
+</script>
+
+<?php include 'includes/footer.php'; ?>
diff --git a/policy.php b/policy.php
new file mode 100644
index 0000000..fbc732e
--- /dev/null
+++ b/policy.php
@@ -0,0 +1,141 @@
+<?php
+$page_title = "Policy View";
+include 'includes/header.php';
+?>
+
+<div class="container mt-5">
+    <h1 class="page-title">Policy View</h1>
+    <p class="lead mb-5">Aggregated national data for strategic planning and policy making.</p>
+
+    <!-- Main Content Row -->
+    <div class="row g-4">
+        <!-- Left Column: Heatmap -->
+        <div class="col-lg-8">
+            <div class="card h-100">
+                <div class="card-header">
+                    <h5 class="mb-0">National Resilience Heatmap</h5>
+                </div>
+                <div class="card-body">
+                    <div id="india-heatmap" class="chart-container"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Column: Policy Section & Charts -->
+        <div class="col-lg-4">
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h5 class="card-title">Policy Impact</h5>
+                    <p class="text-secondary">From Diagnosis to National Planning.</p>
+                    <p>The aggregated data provides insights for resource allocation, pre-emptive maintenance scheduling, and long-term grid fortification strategies. By identifying high-risk zones, policy makers can direct investments to areas with the most critical need.</p>
+                    <button class="btn btn-primary w-100"><i class="bi bi-download"></i> Download National Resilience Report</button>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body">
+                    <div id="high-risk-chart" class="chart-container" style="min-height: 280px;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- District-level chart -->
+    <div class="row mt-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <div id="district-health-chart" class="chart-container"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', async function() {
+    // URL for India GeoJSON data
+    const geoJsonUrl = 'https://cdn.jsdelivr.net/gh/udit-001/india-maps-data/geojson/india.geojson';
+
+    try {
+        // Fetch GeoJSON
+        const response = await fetch(geoJsonUrl);
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+        const indiaGeoJSON = await response.json();
+
+        // Mock data for states
+        const stateNames = indiaGeoJSON.features.map(feature => feature.properties.ST_NM);
+        const healthData = stateNames.map(name => ({
+            state: name,
+            health: Math.floor(Math.random() * 50) + 50 // Health score 50-100
+        }));
+
+        // 1. Create Choropleth Heatmap
+        const mapData = [{
+            type: 'choroplethmapbox',
+            geojson: indiaGeoJSON,
+            locations: healthData.map(d => d.state),
+            z: healthData.map(d => d.health),
+            featureidkey: 'properties.ST_NM',
+            colorscale: 'Viridis',
+            reversescale: true,
+            marker: { opacity: 0.7 },
+            colorbar: { title: 'Health Score' }
+        }];
+
+        const mapLayout = {
+            mapbox: {
+                style: 'carto-positron',
+                center: { lat: 20.5937, lon: 78.9629 },
+                zoom: 3.5
+            },
+            margin: { r: 0, t: 0, b: 0, l: 0 }
+        };
+
+        Plotly.newPlot('india-heatmap', mapData, mapLayout, {responsive: true});
+
+    } catch (error) {
+        console.error("Failed to load GeoJSON data:", error);
+        document.getElementById('india-heatmap').innerHTML = '<div class="alert alert-danger">Failed to load map data. Please check the console for details.</div>';
+    }
+
+    // 2. High-Risk Transformers Chart
+    const riskData = {
+        zones: ['North', 'South', 'East', 'West', 'Central'],
+        count: [25, 18, 32, 41, 11]
+    };
+    const highRiskChart = [{
+        x: riskData.zones,
+        y: riskData.count,
+        type: 'bar',
+        marker: { color: 'var(--primary)' }
+    }];
+    const highRiskLayout = {
+        title: 'High-Risk Transformers by Zone',
+        xaxis: { title: 'Zone' },
+        yaxis: { title: 'Number of Units' },
+        margin: { t: 40, l: 50, r: 20, b: 40 }
+    };
+    Plotly.newPlot('high-risk-chart', highRiskChart, {responsive: true});
+
+    // 3. Average Health by District Chart
+    const districtData = {
+        districts: ['Mumbai', 'Pune', 'Nagpur', 'Thane', 'Nashik', 'Aurangabad', 'Solapur', 'Amravati'],
+        health: [85, 78, 92, 81, 76, 88, 72, 90]
+    };
+    const districtHealthChart = [{
+        x: districtData.districts,
+        y: districtData.health,
+        type: 'line',
+        marker: { color: 'var(--secondary)' }
+    }];
+    const districtHealthLayout = {
+        title: 'Average Health by District (Sample)',
+        xaxis: { title: 'District' },
+        yaxis: { title: 'Average Health Score' },
+        margin: { t: 40, l: 50, r: 20, b: 40 }
+    };
+    Plotly.newPlot('district-health-chart', districtHealthChart, {responsive: true});
+});
+</script>
+
+<?php include 'includes/footer.php'; ?>
\ No newline at end of file
diff --git a/privacy.php b/privacy.php
new file mode 100644
index 0000000..66ebf03
--- /dev/null
+++ b/privacy.php
@@ -0,0 +1,23 @@
+<?php require_once 'includes/header.php'; ?>
+
+<div class="container py-5">
+    <h1>Privacy Policy</h1>
+    <p class="lead">Your privacy is important to us. This privacy statement explains the personal data FRA-INSIGHT processes, how FRA-INSIGHT processes it, and for what purposes.</p>
+    
+    <h2>1. Data We Collect</h2>
+    <p>This is a placeholder privacy policy. The application currently does not collect any personal data from public users.</p>
+
+    <h2>2. How We Use Data</h2>
+    <p>Placeholder text. When features are added that collect data (like a contact form or user accounts), this section will be updated to describe how that data is used.</p>
+
+    <h2>3. Cookies</h2>
+    <p>Placeholder text. We may use cookies to enhance your experience. Our use of cookies will be detailed here.</p>
+
+    <h2>4. Your Rights</h2>
+    <p>Placeholder text. Information about user rights regarding their data will be listed here.</p>
+
+    <h2>5. Contact Us</h2>
+    <p>If you have any questions about this Privacy Policy, please contact us (contact information to be provided).</p>
+</div>
+
+<?php require_once 'includes/footer.php'; ?>
diff --git a/resilience.php b/resilience.php
new file mode 100644
index 0000000..8383512
--- /dev/null
+++ b/resilience.php
@@ -0,0 +1,140 @@
+<?php
+$page_title = "Resilience Index";
+include 'includes/header.php';
+?>
+
+<div class="container mt-5">
+    <h1 class="page-title">Resilience Index</h1>
+    <p class="lead mb-5">An overview of transformer fleet health and digital twin visualization.</p>
+
+    <div class="row">
+        <!-- Left Column: Table and Actions -->
+        <div class="col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">
+                    <h5 class="mb-0">Transformer Health Scores</h5>
+                </div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Transformer ID</th>
+                                    <th>Location</th>
+                                    <th>Resilience Index</th>
+                                    <th>Status</th>
+                                </tr>
+                            </thead>
+                            <tbody id="health-table-body"></tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="card-footer text-center">
+                    <button class="btn btn-primary"><i class="bi bi-file-earmark-pdf"></i> Generate Maintenance Report</button>
+                    <a href="green.php" class="btn btn-secondary"><i class="bi bi-tree"></i> View Sustainability Impact</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Column: Charts -->
+        <div class="col-lg-6">
+            <!-- Bar Chart -->
+            <div class="card mb-4">
+                <div class="card-body">
+                    <div id="resilience-bar-chart" class="chart-container"></div>
+                </div>
+            </div>
+            <!-- 3D Scatter Plot -->
+            <div class="card">
+                 <div class="card-header">
+                    <h5 class="mb-0">3D Digital Twin</h5>
+                </div>
+                <div class="card-body">
+                    <div id="digital-twin-chart" class="chart-container"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Mock Data
+    const locations = ['Mumbai', 'Delhi', 'Bangalore', 'Chennai', 'Kolkata', 'Hyderabad', 'Pune', 'Ahmedabad'];
+    const transformers = Array.from({length: 8}, (_, i) => {
+        const health = Math.floor(Math.random() * 60) + 40; // Score between 40 and 100
+        let status, color;
+        if (health < 60) {
+            status = 'Critical';
+            color = 'red';
+        } else if (health < 85) {
+            status = 'Warning';
+            color = 'yellow';
+        } else {
+            status = 'Healthy';
+            color = 'green';
+        }
+        return {
+            id: `TRF-${1001 + i}`,
+            location: locations[i],
+            health: health,
+            status: status,
+            color: color,
+            x: Math.random() * 100,
+            y: Math.random() * 100,
+            z: Math.random() * 100
+        };
+    });
+
+    // 1. Populate Table
+    const tableBody = document.getElementById('health-table-body');
+    transformers.forEach(t => {
+        const row = `<tr>
+            <td>${t.id}</td>
+            <td>${t.location}</td>
+            <td><strong>${t.health}</strong></td>
+            <td><span class="badge bg-${t.status === 'Healthy' ? 'success' : (t.status === 'Warning' ? 'warning' : 'danger')} text-dark">${t.status}</span></td>
+        </tr>`;
+        tableBody.innerHTML += row;
+    });
+
+    // 2. Create Bar Chart
+    const barChartData = [{
+        x: transformers.map(t => t.id),
+        y: transformers.map(t => t.health),
+        type: 'bar',
+        marker: {
+            color: transformers.map(t => t.color)
+        }
+    }];
+    const barLayout = {
+        title: 'Resilience Index by Transformer',
+        xaxis: { title: 'Transformer ID' },
+        yaxis: { title: 'Health Score (0-100)' },
+        margin: { t: 40, l: 60, r: 20, b: 60 }
+    };
+    Plotly.newPlot('resilience-bar-chart', barChartData, barLayout, {responsive: true});
+
+    // 3. Create 3D Digital Twin
+    const scatter3dData = [{
+        x: transformers.map(t => t.x),
+        y: transformers.map(t => t.y),
+        z: transformers.map(t => t.z),
+        mode: 'markers',
+        type: 'scatter3d',
+        marker: {
+            color: transformers.map(t => t.color),
+            size: 8
+        },
+        text: transformers.map(t => `${t.id}<br>Health: ${t.health}`),
+        hoverinfo: 'text'
+    }];
+    const scatterLayout = {
+        title: 'Fault Zone Visualization',
+        margin: { l: 0, r: 0, b: 0, t: 40 }
+    };
+    Plotly.newPlot('digital-twin-chart', scatter3dData, scatterLayout, {responsive: true});
+});
+</script>
+
+<?php include 'includes/footer.php'; ?>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..a25aaeb
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+<url>
+  <loc>/</loc>
+  <lastmod>2025-10-15T00:00:00+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>/privacy.php</loc>
+  <lastmod>2025-10-15T00:00:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+
+</urlset>
diff --git a/upload.php b/upload.php
new file mode 100644
index 0000000..8430d72
--- /dev/null
+++ b/upload.php
@@ -0,0 +1,185 @@
+<?php
+$page_title = "Upload & Analyze FRA";
+include 'includes/header.php';
+?>
+
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-lg-5">
+            <h1 class="page-title">Upload & Analyze</h1>
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Upload FRA Data File</h5>
+                    <form id="upload-form">
+                        <div class="mb-3">
+                            <label for="fra-file" class="form-label">Accepts .csv, .xls, .txt files. </label>
+                            <input class="form-control" type="file" id="fra-file" accept=".csv,.xls,.txt">
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100">Analyze Now</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-7">
+            <h1 class="page-title">Analysis Results</h1>
+            <div id="results-container" class="d-none">
+                <!-- Diagnostic Summary -->
+                <div class="card mb-4">
+                    <div class="card-header"><h5 class="mb-0">Diagnostic Summary</h5></div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <strong>Fault Type:</strong>
+                                <p id="fault-type" class="fs-5"></p>
+                            </div>
+                            <div class="col-md-6">
+                                <strong>Confidence Score:</strong>
+                                <p id="confidence-score" class="fs-5"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- FRA Curve -->
+                <div class="card mb-4">
+                     <div class="card-header"><h5 class="mb-0">FRA Curve Visualization</h5></div>
+                    <div class="card-body">
+                        <div id="fra-chart" class="chart-container"></div>
+                    </div>
+                </div>
+
+                <!-- XDI & Aadhaar -->
+                <div class="row">
+                    <div class="col-md-7">
+                        <div class="card">
+                            <div class="card-header"><h5 class="mb-0">Explainable Diagnostic Intelligence (XDI)</h5></div>
+                            <div class="card-body">
+                                <p id="xdi-summary"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-5">
+                        <div class="card text-center">
+                            <div class="card-header"><h5 class="mb-0">Transformer Aadhaar ID</h5></div>
+                            <div class="card-body">
+                                <canvas id="qr-code"></canvas>
+                                <p id="aadhaar-id" class="mt-2 mb-0" style="font-family: 'Roboto Mono', monospace;"></p>
+                                <span class="badge bg-success"><i class="bi bi-patch-check-fill"></i> Blockchain Verified</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Progress Bar -->
+            <div id="progress-container" class="d-none">
+                <div class="d-flex align-items-center">
+                    <strong>Analyzing...</strong>
+                    <div class="progress w-100 ms-3" style="height: 20px;">
+                        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;"></div>
+                    </div>
+                </div>
+            </div>
+             <!-- Initial State Message -->
+            <div id="initial-message" class="text-center p-5">
+                <i class="bi bi-clipboard-data" style="font-size: 4rem; color: #ccc;"></i>
+                <p class="mt-3 text-muted">Your analysis results will appear here.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.getElementById('upload-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const fileInput = document.getElementById('fra-file');
+    if (fileInput.files.length === 0) {
+        alert('Please select a file to upload.');
+        return;
+    }
+
+    // Hide initial message and results, show progress bar
+    document.getElementById('initial-message').classList.add('d-none');
+    document.getElementById('results-container').classList.add('d-none');
+    document.getElementById('progress-container').classList.remove('d-none');
+
+    // Simulate analysis progress
+    let progress = 0;
+    const progressBar = document.getElementById('progress-bar');
+    const interval = setInterval(() => {
+        progress += 5;
+        progressBar.style.width = progress + '%';
+        if (progress >= 100) {
+            clearInterval(interval);
+            // Show results after progress completes
+            displayResults();
+        }
+    }, 150);
+});
+
+function displayResults() {
+    // Hide progress, show results
+    document.getElementById('progress-container').classList.add('d-none');
+    document.getElementById('results-container').classList.remove('d-none');
+
+    // 1. Generate random diagnostic data
+    const faultTypes = ['Core Deformation', 'Winding Shift', 'Insulation Degradation', 'Bushing Fault'];
+    const randomFault = faultTypes[Math.floor(Math.random() * faultTypes.length)];
+    const randomConfidence = (Math.random() * (98 - 75) + 75).toFixed(2);
+    const xdiMessages = {
+        'Core Deformation': 'Analysis indicates a high-frequency resonance shift, consistent with physical core deformation. Recommend immediate physical inspection.',
+        'Winding Shift': 'A significant impedance mismatch was detected in the mid-frequency range, pointing to a probable axial or radial winding shift.',
+        'Insulation Degradation': 'Low-frequency response shows increased capacitance, suggesting moisture ingress or paper insulation breakdown.',
+        'Bushing Fault': 'Resonance peaks in the very high-frequency spectrum are anomalous, indicating a likely partial discharge or fault in the bushing.'
+    };
+
+    document.getElementById('fault-type').textContent = randomFault;
+    document.getElementById('confidence-score').textContent = randomConfidence + '%';
+    document.getElementById('xdi-summary').textContent = xdiMessages[randomFault];
+
+    // 2. Generate FRA Curve
+    const freq = Array.from({length: 200}, (_, i) => 1000 + i * 10000);
+    const magnitude = freq.map(f => -20 * Math.log10(f/1e6) + (Math.random() - 0.5) * 5);
+    const anomalyStart = Math.floor(Math.random() * 100) + 50; // Anomaly between index 50 and 150
+    for(let i = anomalyStart; i < anomalyStart + 20; i++) {
+        magnitude[i] *= 1.2;
+    }
+
+    const fraTrace = {
+        x: freq,
+        y: magnitude,
+        mode: 'lines',
+        name: 'FRA Signature'
+    };
+    const layout = {
+        title: 'Frequency Response Analysis (FRA) Curve',
+        xaxis: { title: 'Frequency (Hz)', type: 'log' },
+        yaxis: { title: 'Magnitude (dB)' },
+        shapes: [{
+            type: 'rect',
+            xref: 'x',
+            yref: 'paper',
+            x0: freq[anomalyStart],
+            y0: 0,
+            x1: freq[anomalyStart + 20],
+            y1: 1,
+            fillcolor: 'rgba(255, 215, 0, 0.4)', // Accent color
+            line: { width: 0 }
+        }],
+        margin: { t: 40, l: 60, r: 20, b: 60 }
+    };
+    Plotly.newPlot('fra-chart', [fraTrace], layout, {responsive: true});
+
+    // 3. Generate Aadhaar ID and QR Code
+    const aadhaarId = 'FRA-AD-' + Math.random().toString(36).substr(2, 9).toUpperCase();
+    document.getElementById('aadhaar-id').textContent = aadhaarId;
+
+    new QRious({
+        element: document.getElementById('qr-code'),
+        value: aadhaarId,
+        size: 120
+    });
+}
+</script>
+
+<?php include 'includes/footer.php'; ?>
\ No newline at end of file