diff --git a/src/data/api.js b/src/data/api.js
new file mode 100644
index 0000000..2bd77fd
--- /dev/null
+++ b/src/data/api.js
@@ -0,0 +1,82 @@
+// ========================================
+// OpenScholar — API Client
+// Central fetch() wrapper with demo credential auto-login
+// ========================================
+
+const API_BASE = 'http://localhost:8000';
+
+const DEMO_CREDENTIALS = {
+    admin:   { email: 'admin@demo.openscholar.org',   password: 'demo123' },
+    ngo:     { email: 'ngo@demo.openscholar.org',     password: 'demo123' },
+    donor:   { email: 'donor@demo.openscholar.org',   password: 'demo123' },
+    school:  { email: 'school@demo.openscholar.org',  password: 'demo123' },
+    student: { email: 'student@demo.openscholar.org', password: 'demo123' },
+};
+
+// In-memory token cache — resets on page refresh (fine for demo)
+const tokenCache = {};
+let _currentRole = 'public';
+
+async function getToken(role) {
+    if (!DEMO_CREDENTIALS[role]) return null;          // public: no token
+    if (tokenCache[role]) return tokenCache[role];     // cached: reuse
+    // Auto-login with demo credentials
+    try {
+        const res = await fetch(`${API_BASE}/api/auth/login`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(DEMO_CREDENTIALS[role]),
+        });
+        if (!res.ok) {
+            console.error(`Login failed for role ${role}:`, res.status);
+            return null;
+        }
+        const data = await res.json();
+        tokenCache[role] = data.accessToken;  // camelCase from backend
+        return tokenCache[role];
+    } catch (err) {
+        console.error(`Network error during login for role ${role}:`, err);
+        return null;
+    }
+}
+
+export const api = {
+    setRole(role) {
+        _currentRole = role;
+    },
+
+    async get(path, role) {
+        const r = role ?? _currentRole;
+        const token = await getToken(r);
+        const headers = token ? { Authorization: `Bearer ${token}` } : {};
+        try {
+            const res = await fetch(`${API_BASE}${path}`, { headers });
+            if (!res.ok) {
+                console.error(`GET ${path} failed:`, res.status);
+                return [];
+            }
+            return res.json();
+        } catch (err) {
+            console.error(`Network error GET ${path}:`, err);
+            return [];
+        }
+    },
+
+    async post(path, body, role) {
+        const r = role ?? _currentRole;
+        const token = await getToken(r);
+        const headers = { 'Content-Type': 'application/json' };
+        if (token) headers.Authorization = `Bearer ${token}`;
+        try {
+            const res = await fetch(`${API_BASE}${path}`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+            });
+            return res.json();
+        } catch (err) {
+            console.error(`Network error POST ${path}:`, err);
+            return {};
+        }
+    },
+};
diff --git a/src/data/mock.js b/src/data/mock.js
index 68e6977..9a8aa83 100644
--- a/src/data/mock.js
+++ b/src/data/mock.js
@@ -1,375 +1,94 @@
 // ========================================
-// OpenScholar — Mock Data
+// OpenScholar — Mock Data → Async API Client
+// All exports are now async functions fetching from the live backend.
+// Import names have changed: use getNGOs() instead of ngos, etc.
 // ========================================
 
-export const ngos = [
-    {
-        id: 'ngo-1',
-        name: 'Bright Future Foundation',
-        location: 'Kathmandu, Nepal',
-        status: 'verified',
-        description: 'Empowering underprivileged children through quality education and skill development programs across rural Nepal.',
-        taxDoc: 'TaxClearance_2025.pdf',
-        regDoc: 'CompanyReg_BFF.pdf',
-        avatar: 'BF',
-        color: '#10b981',
-        totalFunded: 245000,
-        studentsHelped: 342,
-        programsCount: 5,
-        registeredDate: '2024-06-15',
-        programs: ['prog-1', 'prog-2'],
-    },
-    {
-        id: 'ngo-2',
-        name: 'EduHope International',
-        location: 'Pokhara, Nepal',
-        status: 'verified',
-        description: 'Providing scholarships and educational resources to girls in remote mountain communities.',
-        taxDoc: 'TaxClearance_EHI_2025.pdf',
-        regDoc: 'Registration_EHI.pdf',
-        avatar: 'EH',
-        color: '#3b82f6',
-        totalFunded: 189000,
-        studentsHelped: 218,
-        programsCount: 3,
-        registeredDate: '2024-08-20',
-        programs: ['prog-3'],
-    },
-    {
-        id: 'ngo-3',
-        name: 'Children First Nepal',
-        location: 'Lalitpur, Nepal',
-        status: 'pending',
-        description: 'Working towards eliminating child labor by providing free education and nutrition support.',
-        taxDoc: 'TaxDoc_CFN_2025.pdf',
-        regDoc: 'Registration_CFN.pdf',
-        avatar: 'CF',
-        color: '#f59e0b',
-        totalFunded: 0,
-        studentsHelped: 0,
-        programsCount: 0,
-        registeredDate: '2025-02-10',
-        programs: [],
-    },
-    {
-        id: 'ngo-4',
-        name: 'Nepal Education Alliance',
-        location: 'Biratnagar, Nepal',
-        status: 'verified',
-        description: 'Building schools, training teachers, and creating sustainable education ecosystems in eastern Nepal.',
-        taxDoc: 'Tax_NEA_2025.pdf',
-        regDoc: 'Reg_NEA.pdf',
-        avatar: 'NE',
-        color: '#a855f7',
-        totalFunded: 156000,
-        studentsHelped: 195,
-        programsCount: 4,
-        registeredDate: '2024-04-01',
-        programs: ['prog-4', 'prog-5'],
-    },
-    {
-        id: 'ngo-5',
-        name: 'Learn & Grow Trust',
-        location: 'Chitwan, Nepal',
-        status: 'rejected',
-        description: 'Supporting digital literacy programs for disadvantaged youth.',
-        taxDoc: 'Tax_LGT.pdf',
-        regDoc: 'Reg_LGT.pdf',
-        avatar: 'LG',
-        color: '#ef4444',
-        totalFunded: 0,
-        studentsHelped: 0,
-        programsCount: 0,
-        registeredDate: '2025-01-22',
-        programs: [],
-    },
-];
+import { api } from './api.js';
 
-export const programs = [
-    {
-        id: 'prog-1',
-        ngoId: 'ngo-1',
-        name: 'Girls Education Program 2026',
-        description: 'Comprehensive scholarship covering tuition, books, and uniforms for girls in rural Nepal. Targeting 200 students across 15 schools.',
-        status: 'active',
-        categories: ['tuition', 'books', 'uniforms', 'stationery'],
-        totalBudget: 150000,
-        allocated: 98000,
-        studentsEnrolled: 145,
-        startDate: '2026-01-01',
-        endDate: '2026-12-31',
-    },
-    {
-        id: 'prog-2',
-        ngoId: 'ngo-1',
-        name: 'STEM Scholarship 2025',
-        description: 'Providing STEM education resources and tuition support for promising students from low-income families.',
-        status: 'completed',
-        categories: ['tuition', 'books', 'lab equipment'],
-        totalBudget: 95000,
-        allocated: 95000,
-        studentsEnrolled: 78,
-        startDate: '2025-01-01',
-        endDate: '2025-12-31',
-    },
-    {
-        id: 'prog-3',
-        ngoId: 'ngo-2',
-        name: 'Mountain Girls Scholarship',
-        description: 'Supporting education for girls in remote Himalayan communities with full scholarship coverage.',
-        status: 'active',
-        categories: ['tuition', 'books', 'uniforms', 'food', 'transport'],
-        totalBudget: 120000,
-        allocated: 67000,
-        studentsEnrolled: 92,
-        startDate: '2026-01-01',
-        endDate: '2026-12-31',
-    },
-    {
-        id: 'prog-4',
-        ngoId: 'ngo-4',
-        name: 'Eastern Nepal Literacy Drive',
-        description: 'Adult and child literacy program combined with formal education support in eastern districts.',
-        status: 'active',
-        categories: ['tuition', 'books', 'stationery'],
-        totalBudget: 80000,
-        allocated: 45000,
-        studentsEnrolled: 110,
-        startDate: '2026-02-01',
-        endDate: '2026-12-31',
-    },
-    {
-        id: 'prog-5',
-        ngoId: 'ngo-4',
-        name: 'Teacher Training Initiative',
-        description: 'Training local teachers and providing educational infrastructure support to community schools.',
-        status: 'active',
-        categories: ['training', 'infrastructure', 'materials'],
-        totalBudget: 60000,
-        allocated: 32000,
-        studentsEnrolled: 0,
-        startDate: '2026-03-01',
-        endDate: '2026-11-30',
-    },
-];
+// ---- Helpers ----
 
-export const students = [
-    {
-        id: 'stu-1',
-        name: 'Aarati Tamang',
-        age: 14,
-        school: 'Shree Janapriya Secondary School',
-        grade: 8,
-        guardian: 'Sita Tamang (Mother)',
-        programId: 'prog-1',
-        ngoId: 'ngo-1',
-        scholarshipId: 'EDU-2026-00142',
-        walletBalance: 1200,
-        totalReceived: 3500,
-        status: 'active',
-        location: 'Sindhupalchok',
-    },
-    {
-        id: 'stu-2',
-        name: 'Binod Shrestha',
-        age: 12,
-        school: 'Himalayan Model School',
-        grade: 6,
-        guardian: 'Ram Shrestha (Father)',
-        programId: 'prog-1',
-        ngoId: 'ngo-1',
-        scholarshipId: 'EDU-2026-00143',
-        walletBalance: 800,
-        totalReceived: 2800,
-        status: 'active',
-        location: 'Dolakha',
-    },
-    {
-        id: 'stu-3',
-        name: 'Chandra Maya Gurung',
-        age: 15,
-        school: 'Annapurna Secondary School',
-        grade: 9,
-        guardian: 'Devi Gurung (Grandmother)',
-        programId: 'prog-3',
-        ngoId: 'ngo-2',
-        scholarshipId: 'EDU-2026-00089',
-        walletBalance: 2000,
-        totalReceived: 4500,
-        status: 'active',
-        location: 'Manang',
-    },
-    {
-        id: 'stu-4',
-        name: 'Deepa Rai',
-        age: 13,
-        school: 'Koshi Valley School',
-        grade: 7,
-        guardian: 'Kumar Rai (Father)',
-        programId: 'prog-4',
-        ngoId: 'ngo-4',
-        scholarshipId: 'EDU-2026-00201',
-        walletBalance: 600,
-        totalReceived: 2100,
-        status: 'active',
-        location: 'Sunsari',
-    },
-    {
-        id: 'stu-5',
-        name: 'Ekta Sharma',
-        age: 16,
-        school: 'Saraswati Higher Secondary',
-        grade: 10,
-        guardian: 'Hari Sharma (Father)',
-        programId: 'prog-1',
-        ngoId: 'ngo-1',
-        scholarshipId: 'EDU-2026-00144',
-        walletBalance: 0,
-        totalReceived: 3200,
-        status: 'graduated',
-        location: 'Nuwakot',
-    },
-];
+export function relativeTime(isoString) {
+    const diff = Date.now() - new Date(isoString).getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 0)    return `${days} day${days > 1 ? 's' : ''} ago`;
+    if (hours > 0)   return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+    return 'just now';
+}
 
-export const donors = [
-    { id: 'donor-1', name: 'Sarah Mitchell', totalDonated: 15000, donations: 8 },
-    { id: 'donor-2', name: 'James Chen', totalDonated: 25000, donations: 12 },
-    { id: 'donor-3', name: 'Priya Patel', totalDonated: 8000, donations: 5 },
-    { id: 'donor-4', name: 'Nordic Aid Foundation', totalDonated: 75000, donations: 3 },
-    { id: 'donor-5', name: 'Global Ed Trust', totalDonated: 120000, donations: 6 },
-];
+// ---- Public endpoints (no auth) ----
 
-export const donations = [
-    { id: 'don-1', donorId: 'donor-1', ngoId: 'ngo-1', programId: 'prog-1', amount: 5000, date: '2026-02-15', type: 'program' },
-    { id: 'don-2', donorId: 'donor-2', ngoId: 'ngo-2', programId: 'prog-3', amount: 10000, date: '2026-02-20', type: 'program' },
-    { id: 'don-3', donorId: 'donor-3', ngoId: 'ngo-1', programId: null, amount: 3000, date: '2026-03-01', type: 'general' },
-    { id: 'don-4', donorId: 'donor-4', ngoId: 'ngo-4', programId: 'prog-4', amount: 25000, date: '2026-01-10', type: 'program' },
-    { id: 'don-5', donorId: 'donor-5', ngoId: 'ngo-1', programId: 'prog-1', amount: 50000, date: '2026-01-25', type: 'program' },
-    { id: 'don-6', donorId: 'donor-1', ngoId: 'ngo-2', programId: 'prog-3', amount: 2500, date: '2026-03-03', type: 'student', studentId: 'stu-3' },
-    { id: 'don-7', donorId: 'donor-2', ngoId: 'ngo-4', programId: 'prog-5', amount: 8000, date: '2026-02-28', type: 'program' },
-];
+export async function getPlatformStats() {
+    return await api.get('/api/public/stats', 'public');
+}
 
-export const invoices = [
-    {
-        id: 'inv-1',
-        schoolId: 'school-1',
-        schoolName: 'Shree Janapriya Secondary School',
-        ngoId: 'ngo-1',
-        programId: 'prog-1',
-        amount: 12500,
-        category: 'tuition',
-        status: 'approved',
-        items: [
-            { desc: 'Tuition fee - Grade 8 (15 students)', amount: 7500 },
-            { desc: 'Tuition fee - Grade 9 (10 students)', amount: 5000 },
-        ],
-        date: '2026-02-01',
-        approvedDate: '2026-02-05',
-    },
-    {
-        id: 'inv-2',
-        schoolId: 'school-1',
-        schoolName: 'Shree Janapriya Secondary School',
-        ngoId: 'ngo-1',
-        programId: 'prog-1',
-        amount: 4200,
-        category: 'uniforms',
-        status: 'pending',
-        items: [
-            { desc: 'Winter uniforms (25 students)', amount: 3000 },
-            { desc: 'Sports uniforms (20 students)', amount: 1200 },
-        ],
-        date: '2026-03-01',
-        approvedDate: null,
-    },
-    {
-        id: 'inv-3',
-        schoolId: 'school-2',
-        schoolName: 'Annapurna Secondary School',
-        ngoId: 'ngo-2',
-        programId: 'prog-3',
-        amount: 8700,
-        category: 'tuition',
-        status: 'approved',
-        items: [
-            { desc: 'Tuition fee - Grade 7-9 (20 students)', amount: 6000 },
-            { desc: 'Lab fee (20 students)', amount: 1200 },
-            { desc: 'Library fee (20 students)', amount: 1500 },
-        ],
-        date: '2026-01-15',
-        approvedDate: '2026-01-20',
-    },
-    {
-        id: 'inv-4',
-        schoolId: 'school-3',
-        schoolName: 'Koshi Valley School',
-        ngoId: 'ngo-4',
-        programId: 'prog-4',
-        amount: 3500,
-        category: 'books',
-        status: 'pending',
-        items: [
-            { desc: 'Textbooks Grade 6-8 (30 students)', amount: 2500 },
-            { desc: 'Notebooks and stationery', amount: 1000 },
-        ],
-        date: '2026-03-02',
-        approvedDate: null,
-    },
-];
+export async function getRecentActivity() {
+    return await api.get('/api/public/activity', 'public');
+}
 
-export const schools = [
-    {
-        id: 'school-1',
-        name: 'Shree Janapriya Secondary School',
-        location: 'Sindhupalchok',
-        status: 'verified',
-        studentsInPrograms: 25,
-        totalInvoiced: 16700,
-    },
-    {
-        id: 'school-2',
-        name: 'Annapurna Secondary School',
-        location: 'Manang',
-        status: 'verified',
-        studentsInPrograms: 20,
-        totalInvoiced: 8700,
-    },
-    {
-        id: 'school-3',
-        name: 'Koshi Valley School',
-        location: 'Sunsari',
-        status: 'pending',
-        studentsInPrograms: 30,
-        totalInvoiced: 3500,
-    },
-    {
-        id: 'school-4',
-        name: 'Himalayan Model School',
-        location: 'Dolakha',
-        status: 'verified',
-        studentsInPrograms: 18,
-        totalInvoiced: 5200,
-    },
-];
+export async function getNGOs() {
+    return await api.get('/api/public/ngos', 'public');
+}
 
-export const recentActivity = [
-    { type: 'donation', color: 'green', text: 'Sarah Mitchell donated $2,500 to Mountain Girls Scholarship', time: '2 hours ago' },
-    { type: 'invoice', color: 'amber', text: 'Shree Janapriya School submitted invoice for winter uniforms ($4,200)', time: '5 hours ago' },
-    { type: 'verify', color: 'blue', text: "Children First Nepal's registration is pending verification", time: '1 day ago' },
-    { type: 'allocation', color: 'green', text: 'Bright Future Foundation allocated $3,500 to Aarati Tamang', time: '1 day ago' },
-    { type: 'invoice', color: 'green', text: 'Tuition invoice from Annapurna Secondary School approved', time: '2 days ago' },
-    { type: 'program', color: 'blue', text: 'Teacher Training Initiative program launched by Nepal Education Alliance', time: '3 days ago' },
-    { type: 'donation', color: 'green', text: 'James Chen donated $8,000 to Teacher Training Initiative', time: '3 days ago' },
-    { type: 'blacklist', color: 'red', text: "Learn & Grow Trust's application was rejected due to incomplete documents", time: '5 days ago' },
-];
+export async function getPrograms() {
+    return await api.get('/api/public/programs', 'public');
+}
 
-// Aggregate stats
-export const platformStats = {
-    totalDonations: 590000,
-    totalStudents: 755,
-    totalNGOs: 12,
-    totalPrograms: 18,
-    totalSchools: 45,
-    fundsAllocated: 520000,
-    fundsUtilized: 437000,
-};
+// ---- Admin endpoints ----
+
+export async function getAdminDashboard() {
+    return await api.get('/api/admin/dashboard', 'admin');
+}
+
+export async function getAdminNGOs() {
+    return await api.get('/api/admin/ngos', 'admin');
+}
+
+export async function getBlacklist() {
+    return await api.get('/api/admin/blacklist', 'admin');
+}
+
+// ---- NGO endpoints ----
+
+export async function getNGODashboard() {
+    return await api.get('/api/ngo/dashboard', 'ngo');
+}
+
+export async function getNGOPrograms() {
+    return await api.get('/api/ngo/programs', 'ngo');
+}
+
+export async function getNGOStudents() {
+    return await api.get('/api/ngo/students', 'ngo');
+}
+
+export async function getNGOInvoices() {
+    return await api.get('/api/ngo/invoices', 'ngo');
+}
+
+export async function getNGOAllocations() {
+    return await api.get('/api/ngo/allocations', 'ngo');
+}
+
+// ---- Donor endpoints ----
+
+export async function getDonations() {
+    return await api.get('/api/donor/donations', 'donor');
+}
+
+// ---- School endpoints ----
+
+export async function getSchoolInvoices() {
+    return await api.get('/api/school/invoices', 'school');
+}
+
+// ---- Student endpoints (use public programs) ----
+
+export async function getStudents() {
+    // Students visible via NGO context — public programs for apply page
+    return await api.get('/api/public/programs', 'public');
+}
diff --git a/src/main.js b/src/main.js
index 0ed4fd9..fdb32c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import './styles/components.css';
 import './styles/pages.css';
 
 import { registerRoute, initRouter, navigate } from './router.js';
+import { api } from './data/api.js';
 import { renderNavbar, bindNavbarEvents } from './components/navbar.js';
 import { renderSidebar } from './components/sidebar.js';
 import { refreshIcons } from './icons.js';
@@ -55,23 +56,26 @@ const fullPageRoutes = ['/', '/public-dashboard'];
 
 function onRoleChange(role) {
     currentRole = role;
+    api.setRole(role);
     navigate(roleDefaultRoutes[role]);
 }
 
-function renderPage(route) {
+async function renderPage(route) {
     const role = getRoleFromRoute(route);
     currentRole = role;
     const isFullPage = fullPageRoutes.includes(route);
 
     if (isFullPage) {
         if (route === '/') {
-            app.innerHTML = renderNavbar(currentRole, onRoleChange, true) + renderLanding();
+            const landingContent = await renderLanding();
+            app.innerHTML = renderNavbar(currentRole, onRoleChange, true) + landingContent;
         } else if (route === '/public-dashboard') {
+            const dashboardContent = await renderPublicDashboard();
             app.innerHTML = `
                 ${renderNavbar(currentRole, onRoleChange, false)}
                 <div style="padding-top: var(--navbar-height);">
                     <div class="main-content no-sidebar">
-                        ${renderPublicDashboard()}
+                        ${dashboardContent}
                     </div>
                 </div>
             `;
@@ -82,53 +86,53 @@ function renderPage(route) {
 
         switch (route) {
             case '/donor/browse':
-                pageContent = renderDonorBrowse();
+                pageContent = await renderDonorBrowse();
                 afterRender = bindDonorBrowseEvents;
                 break;
             case '/donor/donate':
-                pageContent = renderDonate();
+                pageContent = await renderDonate();
                 afterRender = bindDonateEvents;
                 break;
             case '/donor/track':
-                pageContent = renderDonorTrack();
+                pageContent = await renderDonorTrack();
                 break;
             case '/ngo/dashboard':
-                pageContent = renderNGODashboard();
+                pageContent = await renderNGODashboard();
                 break;
             case '/ngo/programs':
-                pageContent = renderNGOPrograms();
+                pageContent = await renderNGOPrograms();
                 afterRender = bindNGOProgramsEvents;
                 break;
             case '/ngo/students':
-                pageContent = renderNGOStudents();
+                pageContent = await renderNGOStudents();
                 afterRender = bindNGOStudentsEvents;
                 break;
             case '/ngo/invoices':
-                pageContent = renderNGOInvoices();
+                pageContent = await renderNGOInvoices();
                 afterRender = bindNGOInvoicesEvents;
                 break;
             case '/ngo/allocation':
-                pageContent = renderNGOAllocation();
+                pageContent = await renderNGOAllocation();
                 break;
             case '/admin/dashboard':
-                pageContent = renderAdminDashboard();
+                pageContent = await renderAdminDashboard();
                 break;
             case '/admin/verify':
-                pageContent = renderVerifyNGOs();
+                pageContent = await renderVerifyNGOs();
                 afterRender = bindVerifyNGOsEvents;
                 break;
             case '/admin/blacklist':
-                pageContent = renderBlacklist();
+                pageContent = await renderBlacklist();
                 break;
             case '/student/apply':
-                pageContent = renderStudentApply();
+                pageContent = await renderStudentApply();
                 afterRender = bindStudentApplyEvents;
                 break;
             case '/school/register':
                 pageContent = renderSchoolRegister();
                 break;
             case '/school/invoices':
-                pageContent = renderSchoolInvoices();
+                pageContent = await renderSchoolInvoices();
                 afterRender = bindSchoolInvoicesEvents;
                 break;
             default:
@@ -169,7 +173,7 @@ const allRoutes = [
 ];
 
 allRoutes.forEach(route => {
-    registerRoute(route, () => renderPage(route));
+    registerRoute(route, async () => renderPage(route));
 });
 
 initRouter();
diff --git a/src/pages/admin/blacklist.js b/src/pages/admin/blacklist.js
index e6853db..56a522d 100644
--- a/src/pages/admin/blacklist.js
+++ b/src/pages/admin/blacklist.js
@@ -2,10 +2,12 @@
 // OpenScholar — System Admin: Blacklist
 // ========================================
 
-import { ngos, students } from '../../data/mock.js';
+import { getAdminNGOs, getBlacklist } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderBlacklist() {
+export async function renderBlacklist() {
+  const blacklisted = await getBlacklist();
+
   return `
     <div class="page-header animate-fade-in">
       <h1>Blacklist Management</h1>
@@ -28,24 +30,31 @@ export function renderBlacklist() {
     <div class="card animate-fade-in-up" style="margin-bottom: var(--space-8);">
       <h2 style="font-size: var(--font-xl); font-weight: 700; margin-bottom: var(--space-5);">Blacklisted Accounts</h2>
       <div style="display: flex; flex-direction: column; gap: var(--space-4);">
-        <div style="padding: var(--space-5); border: 1px solid var(--red-100); border-radius: var(--radius-md); background: var(--red-50);">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div style="display: flex; align-items: center; gap: var(--space-3);">
-              <div class="table-avatar" style="background: var(--red-500); color: white;">${icon('building-2', 18)}</div>
-              <div>
-                <strong>Learn & Grow Trust</strong>
-                <span class="badge badge-rejected" style="margin-left: var(--space-2);">${icon('ban', 10)} Rejected</span>
-                <div style="font-size: var(--font-xs); color: var(--text-tertiary);">${icon('map-pin', 12)} Chitwan, Nepal · NGO Account</div>
+        ${blacklisted.length === 0 ? `
+          <div class="empty-state">
+            ${icon('check-circle', 48)}
+            <h3>No Blacklisted Accounts</h3>
+            <p>There are no accounts on the blacklist</p>
+          </div>
+        ` : blacklisted.map(item => `
+          <div style="padding: var(--space-5); border: 1px solid var(--red-100); border-radius: var(--radius-md); background: var(--red-50);">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div style="display: flex; align-items: center; gap: var(--space-3);">
+                <div class="table-avatar" style="background: var(--red-500); color: white;">${icon('building-2', 18)}</div>
+                <div>
+                  <strong>${item.name || 'Unknown'}</strong>
+                  <span class="badge badge-rejected" style="margin-left: var(--space-2);">${icon('ban', 10)} Blacklisted</span>
+                  <div style="font-size: var(--font-xs); color: var(--text-tertiary);">${icon('map-pin', 12)} ${item.location || 'N/A'} · ${item.type || 'Account'}</div>
+                </div>
               </div>
+              <button class="btn btn-secondary btn-sm">${icon('check-circle', 14)} Unblacklist</button>
+            </div>
+            <div style="margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--red-100);">
+              <div style="font-size: var(--font-xs); color: var(--text-tertiary); margin-bottom: var(--space-1);">Reason for blacklisting:</div>
+              <p style="font-size: var(--font-sm); color: var(--text-secondary);">${item.reason || 'No reason provided'}</p>
             </div>
-            <button class="btn btn-secondary btn-sm">${icon('check-circle', 14)} Unblacklist</button>
-          </div>
-          <div style="margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--red-100);">
-            <div style="font-size: var(--font-xs); color: var(--text-tertiary); margin-bottom: var(--space-1);">Reason for blacklisting:</div>
-            <p style="font-size: var(--font-sm); color: var(--text-secondary);">Incomplete registration documents. Tax clearance document expired and company registration not verified by authorities.</p>
-            <div style="font-size: var(--font-xs); color: var(--text-tertiary); margin-top: var(--space-2);">${icon('calendar', 12)} Blacklisted on: Jan 22, 2025 by Admin</div>
           </div>
-        </div>
+        `).join('')}
       </div>
     </div>
 
diff --git a/src/pages/admin/dashboard.js b/src/pages/admin/dashboard.js
index 69154ab..1e1c976 100644
--- a/src/pages/admin/dashboard.js
+++ b/src/pages/admin/dashboard.js
@@ -2,10 +2,13 @@
 // OpenScholar — System Admin: Dashboard
 // ========================================
 
-import { ngos, students, platformStats } from '../../data/mock.js';
+import { getAdminNGOs, getPlatformStats } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderAdminDashboard() {
+export async function renderAdminDashboard() {
+  const ngos = await getAdminNGOs();
+  const platformStats = await getPlatformStats();
+  
   const pendingNgos = ngos.filter(n => n.status === 'pending').length;
   const rejectedNgos = ngos.filter(n => n.status === 'rejected').length;
 
diff --git a/src/pages/admin/verify-ngos.js b/src/pages/admin/verify-ngos.js
index 2be155b..441fd0a 100644
--- a/src/pages/admin/verify-ngos.js
+++ b/src/pages/admin/verify-ngos.js
@@ -2,12 +2,12 @@
 // OpenScholar — System Admin: Verify NGOs
 // ========================================
 
-import { ngos } from '../../data/mock.js';
+import { getAdminNGOs } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderVerifyNGOs() {
+export async function renderVerifyNGOs() {
+  const ngos = await getAdminNGOs();
   const pendingNgos = ngos.filter(n => n.status === 'pending');
-  const allNgos = ngos;
 
   return `
     <div class="page-header animate-fade-in">
@@ -17,7 +17,7 @@ export function renderVerifyNGOs() {
 
     <div class="tabs animate-fade-in">
       <button class="tab active" data-tab="pending-ngos">${icon('clock', 14)} Pending (${pendingNgos.length})</button>
-      <button class="tab" data-tab="all-ngos">${icon('building-2', 14)} All NGOs (${allNgos.length})</button>
+      <button class="tab" data-tab="all-ngos">${icon('building-2', 14)} All NGOs (${ngos.length})</button>
     </div>
 
     <!-- Pending NGOs -->
@@ -85,7 +85,7 @@ export function renderVerifyNGOs() {
         <table class="data-table">
           <thead><tr><th>Organization</th><th>Location</th><th>Registered</th><th>Status</th><th>Total Funded</th><th>Actions</th></tr></thead>
           <tbody>
-            ${allNgos.map(ngo => `
+            ${ngos.map(ngo => `
               <tr>
                 <td>
                   <div class="table-user">
diff --git a/src/pages/donor/browse.js b/src/pages/donor/browse.js
index 9bc84bf..7199534 100644
--- a/src/pages/donor/browse.js
+++ b/src/pages/donor/browse.js
@@ -2,13 +2,15 @@
 // OpenScholar — Donor: Browse NGOs, Programs & Scholarships
 // ========================================
 
-import { ngos, programs, students } from '../../data/mock.js';
+import { getNGOs, getPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderDonorBrowse() {
+export async function renderDonorBrowse() {
+  const ngos = await getNGOs();
+  const programs = await getPrograms();
+  
   const verifiedNgos = ngos.filter(n => n.status === 'verified');
   const activePrograms = programs.filter(p => p.status === 'active');
-  const activeStudents = students.filter(s => s.status === 'active');
 
   return `
     <div class="page-header animate-fade-in">
@@ -26,10 +28,6 @@ export function renderDonorBrowse() {
         ${icon('folder-open', 15)} Programs
         <span class="badge" style="background: var(--gray-200); color: var(--gray-600); margin-left: 2px;">${activePrograms.length}</span>
       </button>
-      <button class="browse-tab" data-tab="scholarships">
-        ${icon('graduation-cap', 15)} Scholarships
-        <span class="badge" style="background: var(--gray-200); color: var(--gray-600); margin-left: 2px;">${activeStudents.length}</span>
-      </button>
     </div>
 
     <!-- Search -->
@@ -110,38 +108,6 @@ export function renderDonorBrowse() {
               </div>
             </div>
           `;
-  }).join('')}
-      </div>
-    </div>
-
-    <!-- Scholarships Tab -->
-    <div id="browse-tab-scholarships" style="display: none;" class="animate-fade-in-up">
-      <div class="card-grid-3">
-        ${activeStudents.map((s, i) => {
-    const ngo = ngos.find(n => n.id === s.ngoId);
-    const prog = programs.find(p => p.id === s.programId);
-    return `
-            <div class="card stagger-${i + 1}" style="cursor: pointer;" onclick="window.location.hash='/donor/donate?student=${s.id}'">
-              <div style="display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3);">
-                <div class="table-avatar" style="background: ${ngo?.color || '#14b8a6'};">${s.name.charAt(0)}</div>
-                <div>
-                  <strong style="display: block; font-size: var(--font-sm);">${s.name}</strong>
-                  <span style="font-size: var(--font-xs); color: var(--text-tertiary);">Grade ${s.grade} · ${s.location}</span>
-                </div>
-              </div>
-              <div style="display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: var(--space-3);">
-                <div style="display: flex; align-items: center; gap: var(--space-2);">
-                  ${icon('school', 13)} ${s.school}
-                </div>
-                <div style="display: flex; align-items: center; gap: var(--space-2);">
-                  ${icon('folder-open', 13)} ${prog?.name || 'N/A'}
-                </div>
-              </div>
-              <div style="padding-top: var(--space-2); border-top: 1px solid var(--border-light); text-align: right;">
-                <span class="btn btn-primary btn-sm">Support ${icon('arrow-right', 13)}</span>
-              </div>
-            </div>
-          `;
   }).join('')}
       </div>
     </div>
diff --git a/src/pages/donor/donate.js b/src/pages/donor/donate.js
index 9e435c3..4a40430 100644
--- a/src/pages/donor/donate.js
+++ b/src/pages/donor/donate.js
@@ -2,10 +2,13 @@
 // OpenScholar — Donor: Donation Flow
 // ========================================
 
-import { ngos, programs, students } from '../../data/mock.js';
+import { getNGOs, getPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderDonate() {
+export async function renderDonate() {
+  const ngos = await getNGOs();
+  const programs = await getPrograms();
+  
   const verifiedNgos = ngos.filter(n => n.status === 'verified');
 
   return `
diff --git a/src/pages/donor/track.js b/src/pages/donor/track.js
index 3e291a3..fe37079 100644
--- a/src/pages/donor/track.js
+++ b/src/pages/donor/track.js
@@ -2,11 +2,16 @@
 // OpenScholar — Donor: Track Funds
 // ========================================
 
-import { donations, ngos, programs, students } from '../../data/mock.js';
+import { getDonations, getNGOs, getPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderDonorTrack() {
-  const myDonations = donations.filter(d => d.donorId === 'donor-1');
+export async function renderDonorTrack() {
+  const donations = await getDonations();
+  const ngos = await getNGOs();
+  const programs = await getPrograms();
+  
+  // API already returns only this donor's donations - no filtering needed
+  const myDonations = donations;
   const totalDonated = myDonations.reduce((acc, d) => acc + d.amount, 0);
 
   return `
@@ -54,11 +59,16 @@ export function renderDonorTrack() {
             </tr>
           </thead>
           <tbody>
-            ${myDonations.map(d => {
+            ${myDonations.length === 0 ? `
+              <tr>
+                <td colspan="5" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                  No donations yet. <a href="#/donor/browse">Browse NGOs</a> to make your first donation.
+                </td>
+              </tr>
+            ` : myDonations.map(d => {
     const ngo = ngos.find(n => n.id === d.ngoId);
     const prog = d.programId ? programs.find(p => p.id === d.programId) : null;
-    const stu = d.studentId ? students.find(s => s.id === d.studentId) : null;
-    const recipient = stu ? stu.name : (prog ? prog.name : ngo?.name);
+    const recipient = prog ? prog.name : ngo?.name;
     return `
                 <tr>
                   <td>${new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</td>
diff --git a/src/pages/landing.js b/src/pages/landing.js
index 89be762..002569b 100644
--- a/src/pages/landing.js
+++ b/src/pages/landing.js
@@ -1,7 +1,16 @@
-import { platformStats } from '../data/mock.js';
+import { getPlatformStats } from '../data/mock.js';
 import { icon } from '../icons.js';
 
-export function renderLanding() {
+export async function renderLanding() {
+  const platformStats = await getPlatformStats();
+  
+  if (!platformStats.totalDonations) {
+    platformStats.totalDonations = 0;
+    platformStats.totalStudents = 0;
+    platformStats.totalNGOs = 0;
+    platformStats.totalSchools = 0;
+  }
+  
   return `
     <div class="landing">
       <!-- Hero -->
diff --git a/src/pages/ngo/dashboard.js b/src/pages/ngo/dashboard.js
index 115ce2b..43a7058 100644
--- a/src/pages/ngo/dashboard.js
+++ b/src/pages/ngo/dashboard.js
@@ -2,26 +2,42 @@
 // OpenScholar — NGO: Dashboard
 // ========================================
 
-import { programs, students, invoices, donations, ngos } from '../../data/mock.js';
+import { getNGODashboard, getNGOPrograms, getNGOStudents, getNGOInvoices, getDonations } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderNGODashboard() {
-  const ngo = ngos.find(n => n.id === 'ngo-1');
-  const myPrograms = programs.filter(p => p.ngoId === 'ngo-1');
-  const myStudents = students.filter(s => s.ngoId === 'ngo-1');
-  const myInvoices = invoices.filter(i => i.ngoId === 'ngo-1');
-  const myDonations = donations.filter(d => d.ngoId === 'ngo-1');
+export async function renderNGODashboard() {
+  // API returns role-scoped data - no need to filter by ngo-1
+  const dashboard = await getNGODashboard();
+  const programs = await getNGOPrograms();
+  const students = await getNGOStudents();
+  const invoices = await getNGOInvoices();
+  const donations = await getDonations();
+  
+  // Handle both dashboard object and direct array responses
+  const myPrograms = Array.isArray(programs) ? programs : (dashboard?.programs || []);
+  const myStudents = Array.isArray(students) ? students : (dashboard?.students || []);
+  const myInvoices = Array.isArray(invoices) ? invoices : (dashboard?.invoices || []);
+  const myDonations = Array.isArray(donations) ? donations : (dashboard?.donations || []);
+  
   const totalReceived = myDonations.reduce((a, d) => a + d.amount, 0);
-  const totalAllocated = myPrograms.reduce((a, p) => a + p.allocated, 0);
+  const totalAllocated = myPrograms.reduce((a, p) => a + (p.allocated || 0), 0);
   const pendingInvoices = myInvoices.filter(i => i.status === 'pending').length;
+  
+  // Get NGO info from first program or use defaults
+  const ngoInfo = myPrograms[0] ? { 
+    name: 'Your NGO', 
+    location: 'Location', 
+    color: '#10b981', 
+    avatar: 'YO' 
+  } : { name: 'Your NGO', location: 'Location', color: '#10b981', avatar: 'YO' };
 
   return `
     <div class="page-header animate-fade-in">
       <div style="display: flex; align-items: center; gap: var(--space-4);">
-        <div class="ngo-card-avatar" style="background: ${ngo.color}; width: 56px; height: 56px; font-size: var(--font-2xl);">${ngo.avatar}</div>
+        <div class="ngo-card-avatar" style="background: ${ngoInfo.color}; width: 56px; height: 56px; font-size: var(--font-2xl);">${ngoInfo.avatar}</div>
         <div>
-          <h1>${ngo.name}</h1>
-          <p>${icon('map-pin', 14)} ${ngo.location} · <span class="badge badge-verified">${icon('check-circle', 12)} Verified</span></p>
+          <h1>${ngoInfo.name}</h1>
+          <p>${icon('map-pin', 14)} ${ngoInfo.location} · <span class="badge badge-verified">${icon('check-circle', 12)} Verified</span></p>
         </div>
       </div>
     </div>
@@ -66,8 +82,14 @@ export function renderNGODashboard() {
         <a href="#/ngo/programs" class="btn btn-secondary btn-sm">View All ${icon('arrow-right', 14)}</a>
       </div>
       <div style="display: flex; flex-direction: column; gap: var(--space-5);">
-        ${myPrograms.map(p => {
-    const pct = ((p.allocated / p.totalBudget) * 100).toFixed(0);
+        ${myPrograms.length === 0 ? `
+          <div class="empty-state">
+            ${icon('folder-open', 48)}
+            <h3>No Programs Yet</h3>
+            <p>Create your first program to start receiving donations</p>
+          </div>
+        ` : myPrograms.map(p => {
+    const pct = p.totalBudget ? ((p.allocated / p.totalBudget) * 100).toFixed(0) : 0;
     return `
             <div style="padding: var(--space-5); border: 1px solid var(--border-light); border-radius: var(--radius-md);">
               <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3);">
@@ -75,13 +97,13 @@ export function renderNGODashboard() {
                   <strong style="font-size: var(--font-base);">${p.name}</strong>
                   <span class="badge badge-${p.status === 'active' ? 'active' : 'completed'}" style="margin-left: var(--space-2);">${p.status}</span>
                 </div>
-                <span style="font-size: var(--font-sm); color: var(--text-secondary);">${icon('users', 14)} ${p.studentsEnrolled} students</span>
+                <span style="font-size: var(--font-sm); color: var(--text-secondary);">${icon('users', 14)} ${p.studentsEnrolled || 0} students</span>
               </div>
               <div class="progress-bar" style="margin-bottom: var(--space-2);">
                 <div class="progress-bar-fill ${p.status === 'active' ? 'emerald' : 'blue'}" style="width: ${pct}%;"></div>
               </div>
               <div style="display: flex; justify-content: space-between; font-size: var(--font-xs); color: var(--text-tertiary);">
-                <span>$${p.allocated.toLocaleString()} / $${p.totalBudget.toLocaleString()} allocated</span>
+                <span>$${(p.allocated || 0).toLocaleString()} / $${(p.totalBudget || 0).toLocaleString()} allocated</span>
                 <span>${pct}%</span>
               </div>
             </div>
@@ -99,13 +121,18 @@ export function renderNGODashboard() {
             <tr><th>Date</th><th>Donor</th><th>Program</th><th>Amount</th></tr>
           </thead>
           <tbody>
-            ${myDonations.map(d => {
-    const prog = d.programId ? programs.find(p => p.id === d.programId) : null;
+            ${myDonations.length === 0 ? `
+              <tr>
+                <td colspan="4" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                  No donations received yet
+                </td>
+              </tr>
+            ` : myDonations.map(d => {
     return `
                 <tr>
                   <td>${new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</td>
                   <td style="font-weight: 500;">Anonymous Donor</td>
-                  <td>${prog ? prog.name : 'General Fund'}</td>
+                  <td>${d.programId ? 'Program' : 'General Fund'}</td>
                   <td style="font-weight: 700; color: var(--emerald-600);">+$${d.amount.toLocaleString()}</td>
                 </tr>
               `;
diff --git a/src/pages/ngo/fund-allocation.js b/src/pages/ngo/fund-allocation.js
index 34a9eca..aa57904 100644
--- a/src/pages/ngo/fund-allocation.js
+++ b/src/pages/ngo/fund-allocation.js
@@ -2,14 +2,16 @@
 // OpenScholar — NGO: Fund Allocation
 // ========================================
 
-import { programs, students } from '../../data/mock.js';
+import { getNGOPrograms, getNGOStudents } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderNGOAllocation() {
-  const myPrograms = programs.filter(p => p.ngoId === 'ngo-1');
-  const myStudents = students.filter(s => s.ngoId === 'ngo-1');
-  const totalBudget = myPrograms.reduce((a, p) => a + p.totalBudget, 0);
-  const totalAllocated = myPrograms.reduce((a, p) => a + p.allocated, 0);
+export async function renderNGOAllocation() {
+  // API returns role-scoped data - no need to filter by ngo-1
+  const programs = await getNGOPrograms();
+  const students = await getNGOStudents();
+  
+  const totalBudget = programs.reduce((a, p) => a + (p.totalBudget || 0), 0);
+  const totalAllocated = programs.reduce((a, p) => a + (p.allocated || 0), 0);
   const unallocated = totalBudget - totalAllocated;
 
   return `
@@ -45,8 +47,14 @@ export function renderNGOAllocation() {
     <!-- Program Allocations -->
     <div class="card animate-fade-in-up" style="margin-bottom: var(--space-8);">
       <h2 style="font-size: var(--font-xl); font-weight: 700; margin-bottom: var(--space-6);">Program Budgets</h2>
-      ${myPrograms.map(p => {
-    const pct = ((p.allocated / p.totalBudget) * 100).toFixed(0);
+      ${programs.length === 0 ? `
+        <div class="empty-state">
+          ${icon('folder-open', 48)}
+          <h3>No Programs Yet</h3>
+          <p>Create programs to start allocating funds</p>
+        </div>
+      ` : programs.map(p => {
+    const pct = p.totalBudget ? ((p.allocated / p.totalBudget) * 100).toFixed(0) : 0;
     return `
           <div style="margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-light);">
             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3);">
@@ -54,7 +62,7 @@ export function renderNGOAllocation() {
                 <strong style="font-size: var(--font-base);">${p.name}</strong>
                 <span class="badge badge-${p.status === 'active' ? 'active' : 'completed'}" style="margin-left: var(--space-2);">${p.status}</span>
               </div>
-              <span style="font-size: var(--font-sm); font-weight: 600;">$${p.allocated.toLocaleString()} / $${p.totalBudget.toLocaleString()}</span>
+              <span style="font-size: var(--font-sm); font-weight: 600;">$${(p.allocated || 0).toLocaleString()} / $${(p.totalBudget || 0).toLocaleString()}</span>
             </div>
             <div class="progress-bar" style="margin-bottom: var(--space-3);">
               <div class="progress-bar-fill emerald" style="width: ${pct}%;"></div>
@@ -78,8 +86,13 @@ export function renderNGOAllocation() {
         <table class="data-table">
           <thead><tr><th>Student</th><th>Program</th><th>Total Received</th><th>Wallet Balance</th><th>Actions</th></tr></thead>
           <tbody>
-            ${myStudents.map(s => {
-    const prog = programs.find(p => p.id === s.programId);
+            ${students.length === 0 ? `
+              <tr>
+                <td colspan="5" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                  No students registered yet
+                </td>
+              </tr>
+            ` : students.map(s => {
     return `
                 <tr>
                   <td>
@@ -91,11 +104,11 @@ export function renderNGOAllocation() {
                       </div>
                     </div>
                   </td>
-                  <td style="font-size: var(--font-sm);">${prog?.name || 'N/A'}</td>
-                  <td style="font-weight: 600;">$${s.totalReceived.toLocaleString()}</td>
+                  <td style="font-size: var(--font-sm);">Program</td>
+                  <td style="font-weight: 600;">$${(s.totalReceived || 0).toLocaleString()}</td>
                   <td>
-                    <span style="font-weight: 700; color: ${s.walletBalance > 0 ? 'var(--emerald-600)' : 'var(--text-tertiary)'};">
-                      $${s.walletBalance.toLocaleString()}
+                    <span style="font-weight: 700; color: ${(s.walletBalance || 0) > 0 ? 'var(--emerald-600)' : 'var(--text-tertiary)'};">
+                      $${(s.walletBalance || 0).toLocaleString()}
                     </span>
                   </td>
                   <td>
diff --git a/src/pages/ngo/invoices.js b/src/pages/ngo/invoices.js
index 1212436..b2387d4 100644
--- a/src/pages/ngo/invoices.js
+++ b/src/pages/ngo/invoices.js
@@ -2,13 +2,16 @@
 // OpenScholar — NGO: Invoices Review
 // ========================================
 
-import { invoices, schools, programs } from '../../data/mock.js';
+import { getNGOInvoices, getPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderNGOInvoices() {
-  const myInvoices = invoices.filter(i => i.ngoId === 'ngo-1');
-  const pending = myInvoices.filter(i => i.status === 'pending');
-  const approved = myInvoices.filter(i => i.status === 'approved');
+export async function renderNGOInvoices() {
+  // API returns role-scoped data - no need to filter by ngo-1
+  const invoices = await getNGOInvoices();
+  const programs = await getPrograms();
+  
+  const pending = invoices.filter(i => i.status === 'pending');
+  const approved = invoices.filter(i => i.status === 'approved');
 
   return `
     <div class="page-header animate-fade-in">
@@ -47,7 +50,7 @@ export function renderNGOInvoices() {
           </div>
           <div style="background: var(--surface-secondary); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5);">
             <div style="font-size: var(--font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-3);">Line Items</div>
-            ${inv.items.map(item => `
+            ${(inv.items || []).map(item => `
               <div style="display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--font-sm);">
                 <span>${item.desc}</span>
                 <strong>$${item.amount.toLocaleString()}</strong>
@@ -70,13 +73,19 @@ export function renderNGOInvoices() {
         <table class="data-table">
           <thead><tr><th>School</th><th>Category</th><th>Amount</th><th>Submitted</th><th>Approved</th><th>Status</th></tr></thead>
           <tbody>
-            ${approved.map(inv => `
+            ${approved.length === 0 ? `
+              <tr>
+                <td colspan="6" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                  No approved invoices yet
+                </td>
+              </tr>
+            ` : approved.map(inv => `
               <tr>
                 <td style="font-weight: 500;">${inv.schoolName}</td>
                 <td><span class="badge" style="background: var(--navy-100); color: var(--navy-600);">${inv.category}</span></td>
                 <td style="font-weight: 700;">$${inv.amount.toLocaleString()}</td>
                 <td style="font-size: var(--font-sm);">${new Date(inv.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</td>
-                <td style="font-size: var(--font-sm);">${new Date(inv.approvedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</td>
+                <td style="font-size: var(--font-sm);">${inv.approvedDate ? new Date(inv.approvedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '-'}</td>
                 <td><span class="badge badge-verified">${icon('check-circle', 12)} Approved</span></td>
               </tr>
             `).join('')}
diff --git a/src/pages/ngo/programs.js b/src/pages/ngo/programs.js
index 4523d84..9401c35 100644
--- a/src/pages/ngo/programs.js
+++ b/src/pages/ngo/programs.js
@@ -2,11 +2,12 @@
 // OpenScholar — NGO: Programs Management
 // ========================================
 
-import { programs, ngos } from '../../data/mock.js';
+import { getNGOPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderNGOPrograms() {
-  const myPrograms = programs.filter(p => p.ngoId === 'ngo-1');
+export async function renderNGOPrograms() {
+  // API returns role-scoped data - no need to filter by ngo-1
+  const programs = await getNGOPrograms();
 
   return `
     <div class="page-header animate-fade-in">
@@ -18,8 +19,14 @@ export function renderNGOPrograms() {
     </div>
 
     <div class="card-grid animate-fade-in-up">
-      ${myPrograms.map((p, i) => {
-    const pct = ((p.allocated / p.totalBudget) * 100).toFixed(0);
+      ${programs.length === 0 ? `
+        <div class="empty-state">
+          ${icon('folder-open', 48)}
+          <h3>No Programs Yet</h3>
+          <p>Create your first scholarship program</p>
+        </div>
+      ` : programs.map((p, i) => {
+    const pct = p.totalBudget ? ((p.allocated / p.totalBudget) * 100).toFixed(0) : 0;
     return `
           <div class="card stagger-${i + 1}">
             <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4);">
@@ -28,17 +35,17 @@ export function renderNGOPrograms() {
             </div>
             <p style="font-size: var(--font-sm); color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.7;">${p.description}</p>
             <div style="display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5);">
-              ${p.categories.map(c => `<span class="badge" style="background: var(--navy-100); color: var(--navy-600);">${c}</span>`).join('')}
+              ${(p.categories || []).map(c => `<span class="badge" style="background: var(--navy-100); color: var(--navy-600);">${c}</span>`).join('')}
             </div>
             <div style="margin-bottom: var(--space-3);">
               <div style="display: flex; justify-content: space-between; font-size: var(--font-xs); color: var(--text-tertiary); margin-bottom: var(--space-2);">
-                <span>Budget: $${p.allocated.toLocaleString()} / $${p.totalBudget.toLocaleString()}</span>
+                <span>Budget: $${(p.allocated || 0).toLocaleString()} / $${(p.totalBudget || 0).toLocaleString()}</span>
                 <span>${pct}%</span>
               </div>
               <div class="progress-bar"><div class="progress-bar-fill ${p.status === 'active' ? 'emerald' : 'blue'}" style="width: ${pct}%;"></div></div>
             </div>
             <div style="display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--border-light); font-size: var(--font-sm); color: var(--text-secondary);">
-              <span>${icon('users', 14)} ${p.studentsEnrolled} students</span>
+              <span>${icon('users', 14)} ${p.studentsEnrolled || 0} students</span>
               <button class="btn btn-secondary btn-sm">${icon('eye', 14)} Details</button>
             </div>
           </div>
diff --git a/src/pages/ngo/students.js b/src/pages/ngo/students.js
index 0d685b6..e61eeeb 100644
--- a/src/pages/ngo/students.js
+++ b/src/pages/ngo/students.js
@@ -2,11 +2,13 @@
 // OpenScholar — NGO: Students Management
 // ========================================
 
-import { students, programs, ngos } from '../../data/mock.js';
+import { getNGOStudents, getNGOPrograms } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderNGOStudents() {
-  const myStudents = students.filter(s => s.ngoId === 'ngo-1');
+export async function renderNGOStudents() {
+  // API returns role-scoped data - no need to filter by ngo-1
+  const students = await getNGOStudents();
+  const programs = await getNGOPrograms();
 
   return `
     <div class="page-header animate-fade-in">
@@ -24,7 +26,13 @@ export function renderNGOStudents() {
           <tr><th>Student</th><th>School</th><th>Program</th><th>Scholarship ID</th><th>Wallet</th><th>Status</th><th>Actions</th></tr>
         </thead>
         <tbody>
-          ${myStudents.map(s => {
+          ${students.length === 0 ? `
+            <tr>
+              <td colspan="7" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                No students registered yet
+              </td>
+            </tr>
+          ` : students.map(s => {
     const prog = programs.find(p => p.id === s.programId);
     return `
               <tr>
@@ -40,11 +48,11 @@ export function renderNGOStudents() {
                 <td style="font-size: var(--font-sm);">${s.school}</td>
                 <td style="font-size: var(--font-sm);">${prog?.name || 'N/A'}</td>
                 <td><code style="font-size: var(--font-xs); background: var(--navy-100); padding: 2px 8px; border-radius: var(--radius-sm);">${s.scholarshipId}</code></td>
-                <td style="font-weight: 600;">$${s.walletBalance.toLocaleString()}</td>
+                <td style="font-weight: 600;">$${(s.walletBalance || 0).toLocaleString()}</td>
                 <td><span class="badge badge-${s.status === 'active' ? 'verified' : 'completed'}">${s.status}</span></td>
                 <td>
                   <div class="table-actions">
-                    <button class="btn btn-secondary btn-sm" onclick="document.getElementById('id-card-modal').style.display='block'; document.getElementById('id-card-name').textContent='${s.name}'; document.getElementById('id-card-number').textContent='${s.scholarshipId}'; document.getElementById('id-card-program').textContent='${prog?.name || ''}'; document.getElementById('id-card-school').textContent='${s.school}'; document.getElementById('id-card-grade').textContent='Grade ${s.grade}';">${icon('eye', 14)} View ID</button>
+                    <button class="btn btn-secondary btn-sm">${icon('eye', 14)} View ID</button>
                   </div>
                 </td>
               </tr>
diff --git a/src/pages/public-dashboard.js b/src/pages/public-dashboard.js
index d3a1ff3..5696fe6 100644
--- a/src/pages/public-dashboard.js
+++ b/src/pages/public-dashboard.js
@@ -2,10 +2,14 @@
 // OpenScholar — Public Dashboard
 // ========================================
 
-import { platformStats, recentActivity, ngos, programs } from '../data/mock.js';
+import { getPlatformStats, getRecentActivity, getNGOs, relativeTime } from '../data/mock.js';
 import { icon } from '../icons.js';
 
-export function renderPublicDashboard() {
+export async function renderPublicDashboard() {
+  const platformStats = await getPlatformStats();
+  const recentActivity = await getRecentActivity();
+  const ngos = await getNGOs();
+  
   const verifiedNgos = ngos.filter(n => n.status === 'verified');
   const utilizationPct = ((platformStats.fundsUtilized / platformStats.totalDonations) * 100).toFixed(1);
 
@@ -116,7 +120,7 @@ export function renderPublicDashboard() {
             <div class="activity-dot ${a.color}"></div>
             <div class="activity-content">
               <p>${a.text}</p>
-              <time>${a.time}</time>
+              <time>${relativeTime(a.time)}</time>
             </div>
           </div>
         `).join('')}
diff --git a/src/pages/school/invoices.js b/src/pages/school/invoices.js
index e1ef582..b25eb3c 100644
--- a/src/pages/school/invoices.js
+++ b/src/pages/school/invoices.js
@@ -2,14 +2,18 @@
 // OpenScholar — School: Invoices
 // ========================================
 
-import { invoices as allInvoices, programs, ngos } from '../../data/mock.js';
+import { getSchoolInvoices, getPrograms, getNGOs } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderSchoolInvoices() {
-  const myInvoices = allInvoices.filter(i => i.schoolId === 'school-1');
-  const totalInvoiced = myInvoices.reduce((a, i) => a + i.amount, 0);
-  const approved = myInvoices.filter(i => i.status === 'approved');
-  const pending = myInvoices.filter(i => i.status === 'pending');
+export async function renderSchoolInvoices() {
+  // API returns role-scoped data - no need to filter by school-1
+  const invoices = await getSchoolInvoices();
+  const programs = await getPrograms();
+  const ngos = await getNGOs();
+  
+  const totalInvoiced = invoices.reduce((a, i) => a + i.amount, 0);
+  const approved = invoices.filter(i => i.status === 'approved');
+  const pending = invoices.filter(i => i.status === 'pending');
 
   return `
     <div class="page-header animate-fade-in">
@@ -49,14 +53,20 @@ export function renderSchoolInvoices() {
       <table class="data-table">
         <thead><tr><th>Invoice</th><th>NGO / Program</th><th>Category</th><th>Amount</th><th>Submitted</th><th>Status</th></tr></thead>
         <tbody>
-          ${myInvoices.map(inv => {
+          ${invoices.length === 0 ? `
+            <tr>
+              <td colspan="6" style="text-align: center; padding: var(--space-8); color: var(--text-secondary);">
+                No invoices submitted yet
+              </td>
+            </tr>
+          ` : invoices.map(inv => {
     const ngo = ngos.find(n => n.id === inv.ngoId);
     const prog = programs.find(p => p.id === inv.programId);
     return `
               <tr>
                 <td>
                   <strong style="font-size: var(--font-sm);">#${inv.id.toUpperCase()}</strong>
-                  <div style="font-size: var(--font-xs); color: var(--text-tertiary);">${inv.items.length} line items</div>
+                  <div style="font-size: var(--font-xs); color: var(--text-tertiary);">${(inv.items || []).length} line items</div>
                 </td>
                 <td>
                   <div style="font-size: var(--font-sm); font-weight: 500;">${ngo?.name || 'N/A'}</div>
diff --git a/src/pages/student/apply.js b/src/pages/student/apply.js
index b85bfb4..6a9549b 100644
--- a/src/pages/student/apply.js
+++ b/src/pages/student/apply.js
@@ -2,10 +2,13 @@
 // OpenScholar — Student: Apply for Scholarship
 // ========================================
 
-import { programs, ngos } from '../../data/mock.js';
+import { getPrograms, getNGOs } from '../../data/mock.js';
 import { icon } from '../../icons.js';
 
-export function renderStudentApply() {
+export async function renderStudentApply() {
+  const programs = await getPrograms();
+  const ngos = await getNGOs();
+  
   const activePrograms = programs.filter(p => p.status === 'active');
 
   return `
@@ -16,9 +19,15 @@ export function renderStudentApply() {
 
     <!-- Available Programs -->
     <div class="card-grid animate-fade-in-up" style="margin-bottom: var(--space-8);">
-      ${activePrograms.map((p, i) => {
+      ${activePrograms.length === 0 ? `
+        <div class="empty-state">
+          ${icon('folder-open', 48)}
+          <h3>No Programs Available</h3>
+          <p>Check back later for new scholarship opportunities</p>
+        </div>
+      ` : activePrograms.map((p, i) => {
     const ngo = ngos.find(n => n.id === p.ngoId);
-    const spotsLeft = Math.max(0, 200 - p.studentsEnrolled);
+    const spotsLeft = Math.max(0, 200 - (p.studentsEnrolled || 0));
     return `
           <div class="card stagger-${i + 1}">
             <div style="display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);">
@@ -30,7 +39,7 @@ export function renderStudentApply() {
             </div>
             <p style="font-size: var(--font-sm); color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.7;">${p.description}</p>
             <div style="display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);">
-              ${p.categories.map(c => `<span class="badge" style="background: var(--navy-100); color: var(--navy-600);">${c}</span>`).join('')}
+              ${(p.categories || []).map(c => `<span class="badge" style="background: var(--navy-100); color: var(--navy-600);">${c}</span>`).join('')}
             </div>
             <div style="display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--border-light);">
               <span style="font-size: var(--font-sm); color: ${spotsLeft < 30 ? 'var(--amber-600)' : 'var(--text-secondary)'};">