diff --git a/backend/.env.example b/backend/.env.example
index 87215cc..ea83383 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -1,6 +1,9 @@
-PORT=5000
-MONGODB_URI=mongodb+srv://<username>:<pass>@cluster0.thi5oil.mongodb.net/<databasemame>
+1PORT=4000
+MONGO_URI=mongodb://localhost:27017/sourcewiki
 JWT_SECRET=123456789
 JWT_REFRESH_SECRET=987654321
 FRONTEND_URL=http://localhost:5173
-NODE_ENV=development
\ No newline at end of file
+NODE_ENV=development
+
+# In development you can use a dev header to simulate authenticated admin:
+# x-dev-user: {"id":"3","username":"AdminUser","role":"admin"}
\ No newline at end of file
diff --git a/backend/.env.test b/backend/.env.test
new file mode 100644
index 0000000..f13d02f
--- /dev/null
+++ b/backend/.env.test
@@ -0,0 +1 @@
+TEST_MONGODB_URI=mongodb://localhost:27017/jest-test-db
diff --git a/backend/src/controllers/adminController.ts b/backend/src/controllers/adminController.ts
new file mode 100644
index 0000000..95629b8
--- /dev/null
+++ b/backend/src/controllers/adminController.ts
@@ -0,0 +1,144 @@
+import { Response } from 'express';
+import { AuthRequest } from '../middleware/auth';
+import { UserModel } from '../models/User';
+import { SettingsModel } from '../models/Settings';
+import { createAuditLog } from '../utils/audit';
+import { Types } from 'mongoose';
+import { AuditLogModel } from '../models/AuditLog';
+
+/* Users CRUD */
+
+export const listUsers = async (req: AuthRequest, res: Response) => {
+  try {
+    const users = await UserModel.find().sort({ username: 1 }).lean();
+    res.json(users);
+  } catch (err) {
+    res.status(500).json({ success: false, message: 'Failed to fetch users' });
+  }
+};
+
+export const createUser = async (req: AuthRequest, res: Response) => {
+  try {
+    const { username, email, country, role, points, badges, joinDate, password } = req.body;
+    const user = new UserModel({ username, email, country, role, points: points ?? 0, badges: badges ?? [], joinDate, password });
+    await user.save();
+
+    await createAuditLog({
+      action: 'CREATE_USER',
+      resource: 'User',
+      method: 'POST',
+      user: { id: req.user?.id, username: req.user?.username },
+      details: { createdUserId: user._id, email: user.email, role: user.role },
+    });
+
+    res.status(201).json(user);
+  } catch (err) {
+    res.status(400).json({ success: false, message: 'Failed to create user', error: err instanceof Error ? err.message : err });
+  }
+};
+
+export const updateUser = async (req: AuthRequest, res: Response) => {
+  try {
+    const id = req.params.id;
+    if (!Types.ObjectId.isValid(id) && typeof id !== 'string') {
+      // allow string ids from mock-data too
+    }
+    const updates = { ...req.body };
+    delete (updates as any)._id;
+
+    const user = await UserModel.findByIdAndUpdate(id, updates, { new: true }).lean();
+    if (!user) return res.status(404).json({ success: false, message: 'User not found' });
+
+    await createAuditLog({
+      action: 'UPDATE_USER',
+      resource: 'User',
+      method: 'PUT',
+      user: { id: req.user?.id, username: req.user?.username },
+      details: { updatedUserId: user._id, updates },
+    });
+
+    res.json(user);
+  } catch (err) {
+    res.status(400).json({ success: false, message: 'Failed to update user', error: err instanceof Error ? err.message : err });
+  }
+};
+
+export const deleteUser = async (req: AuthRequest, res: Response) => {
+  try {
+    const id = req.params.id;
+    const user = await UserModel.findByIdAndDelete(id).lean();
+    if (!user) return res.status(404).json({ success: false, message: 'User not found' });
+
+    await createAuditLog({
+      action: 'DELETE_USER',
+      resource: 'User',
+      method: 'DELETE',
+      user: { id: req.user?.id, username: req.user?.username },
+      details: { deletedUserId: user._id, email: user.email },
+    });
+
+    res.json({ success: true });
+  } catch (err) {
+    res.status(400).json({ success: false, message: 'Failed to delete user', error: err instanceof Error ? err.message : err });
+  }
+};
+
+/* Settings */
+
+export const getSettings = async (req: AuthRequest, res: Response) => {
+  try {
+    let settings = await SettingsModel.findOne().lean();
+    if (!settings) {
+      const s = new SettingsModel({});
+      await s.save();
+      settings = s.toObject();
+    }
+    res.json(settings);
+  } catch (err) {
+    res.status(500).json({ success: false, message: 'Failed to fetch settings' });
+  }
+};
+
+export const updateSettings = async (req: AuthRequest, res: Response) => {
+  try {
+    const updates = req.body;
+    let settings = await SettingsModel.findOne();
+    if (!settings) {
+      settings = new SettingsModel(updates);
+    } else {
+      settings.siteName = updates.siteName ?? settings.siteName;
+      settings.verificationPoints = updates.verificationPoints ?? settings.verificationPoints;
+      settings.maxSubmissionsPerDay = updates.maxSubmissionsPerDay ?? settings.maxSubmissionsPerDay;
+      settings.updatedAt = new Date();
+    }
+    await settings.save();
+
+    await createAuditLog({
+      action: 'UPDATE_SETTINGS',
+      resource: 'Settings',
+      method: 'PUT',
+      user: { id: req.user?.id, username: req.user?.username },
+      details: { updates },
+    });
+
+    res.json(settings.toObject());
+  } catch (err) {
+    res.status(400).json({ success: false, message: 'Failed to update settings', error: err instanceof Error ? err.message : err });
+  }
+};
+
+/* Audit logs listing */
+
+export const listAuditLogs = async (req: AuthRequest, res: Response) => {
+  try {
+    const q: any = {};
+    if (req.query.action) q.action = String(req.query.action);
+    if (req.query.user) {
+      q['user.username'] = String(req.query.user);
+    }
+    const logs = await AuditLogModel.find(q).sort({ createdAt: -1 }).limit(1000).lean();
+    res.json(logs);
+  } catch (err) {
+    res.status(500).json({ success: false, message: 'Failed to fetch audit logs' });
+  }
+};
\ No newline at end of file
diff --git a/backend/src/controllers/auditController.js b/backend/src/controllers/auditController.js
new file mode 100644
index 0000000..3ee1219
--- /dev/null
+++ b/backend/src/controllers/auditController.js
@@ -0,0 +1,10 @@
+import AuditLog from '../models/AuditLog.js';
+
+export const getAuditLogs = async (req, res) => {
+  const logs = await AuditLog
+    .find()
+    .populate('userId', 'username email')
+    .sort({ createdAt: -1 });
+
+  res.json(logs);
+};
diff --git a/backend/src/middleware/auditLogger.js b/backend/src/middleware/auditLogger.js
new file mode 100644
index 0000000..ae312a3
--- /dev/null
+++ b/backend/src/middleware/auditLogger.js
@@ -0,0 +1,25 @@
+import AuditLog from '../models/AuditLog.js';
+
+const auditLogger = (action, resource) => {
+  return (req, res, next) => {
+    res.on('finish', async () => {
+      if (!req.user) return;
+
+      try {
+        await AuditLog.create({
+          userId: req.user._id,
+          action,
+          resource,
+          method: req.method,
+          ip: req.ip
+        });
+      } catch (err) {
+        console.error('Audit log failed:', err.message);
+      }
+    });
+
+    next();
+  };
+};
+
+export default auditLogger;
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
new file mode 100644
index 0000000..2bb5780
--- /dev/null
+++ b/backend/src/middleware/auth.ts
@@ -0,0 +1,36 @@
+import { Request, Response, NextFunction } from 'express';
+
+export interface AuthUser {
+  id?: string;
+  username?: string;
+  role?: string;
+  [k: string]: any;
+}
+
+export interface AuthRequest extends Request {
+  user?: AuthUser | null;
+}
+
+export const requireAuth = (req: AuthRequest, res: Response, next: NextFunction) => {
+  if (req.user) return next();
+
+  const devHeader = req.header('x-dev-user');
+  if (devHeader) {
+    try {
+      req.user = JSON.parse(devHeader) as AuthUser;
+      return next();
+    } catch (err) {
+      // fall through
+    }
+  }
+
+  return res.status(401).json({ success: false, message: 'Unauthorized' });
+};
+
+export const requireAdmin = (req: AuthRequest, res: Response, next: NextFunction) => {
+  if (!req.user) return res.status(401).json({ success: false, message: 'Unauthorized' });
+  if (req.user.role !== 'admin') {
+    return res.status(403).json({ success: false, message: 'Admin access required' });
+  }
+  return next();
+};
\ No newline at end of file
diff --git a/backend/src/models/AuditLog.js b/backend/src/models/AuditLog.js
new file mode 100644
index 0000000..0a42300
--- /dev/null
+++ b/backend/src/models/AuditLog.js
@@ -0,0 +1,16 @@
+import mongoose from 'mongoose';
+
+const AuditLogSchema = new mongoose.Schema({
+  userId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'User',
+    required: true
+  },
+  action: { type: String, required: true },
+  resource: { type: String, required: true },
+  method: String,
+  ip: String,
+  createdAt: { type: Date, default: Date.now }
+});
+
+export default mongoose.model('AuditLog', AuditLogSchema);
diff --git a/backend/src/models/AuditLog.ts b/backend/src/models/AuditLog.ts
new file mode 100644
index 0000000..a10e1a0
--- /dev/null
+++ b/backend/src/models/AuditLog.ts
@@ -0,0 +1,24 @@
+import mongoose, { Document, Schema } from 'mongoose';
+
+export interface IAuditLog extends Document {
+  action: string;
+  resource?: string;
+  method?: string;
+  user?: { id?: string; username?: string } | null;
+  details?: any;
+  createdAt: Date;
+}
+
+const AuditLogSchema = new Schema<IAuditLog>({
+  action: { type: String, required: true },
+  resource: { type: String },
+  method: { type: String },
+  user: {
+    id: { type: String },
+    username: { type: String },
+  },
+  details: { type: Schema.Types.Mixed },
+  createdAt: { type: Date, default: Date.now },
+});
+
+export const AuditLogModel = mongoose.model<IAuditLog>('AuditLog', AuditLogSchema);
\ No newline at end of file
diff --git a/backend/src/models/Settings.ts b/backend/src/models/Settings.ts
new file mode 100644
index 0000000..7063f3d
--- /dev/null
+++ b/backend/src/models/Settings.ts
@@ -0,0 +1,17 @@
+import mongoose, { Document, Schema } from 'mongoose';
+
+export interface ISettings extends Document {
+  siteName: string;
+  verificationPoints: number;
+  maxSubmissionsPerDay: number;
+  updatedAt: Date;
+}
+
+const SettingsSchema = new Schema<ISettings>({
+  siteName: { type: String, default: 'WikiSourceVerifier' },
+  verificationPoints: { type: Number, default: 10 },
+  maxSubmissionsPerDay: { type: Number, default: 5 },
+  updatedAt: { type: Date, default: Date.now },
+});
+
+export const SettingsModel = mongoose.model<ISettings>('Settings', SettingsSchema);
\ No newline at end of file
diff --git a/backend/src/models/User.ts b/backend/src/models/User.ts
new file mode 100644
index 0000000..f2f00d9
--- /dev/null
+++ b/backend/src/models/User.ts
@@ -0,0 +1,25 @@
+import mongoose, { Document, Schema } from 'mongoose';
+
+export interface IUser extends Document {
+  username: string;
+  email: string;
+  country?: string;
+  role: 'admin' | 'verifier' | 'contributor';
+  points: number;
+  badges: string[];
+  joinDate: string;
+  password?: string;
+}
+
+const UserSchema = new Schema<IUser>({
+  username: { type: String, required: true, index: true },
+  email: { type: String, required: true, unique: true, index: true },
+  country: { type: String, default: 'US' },
+  role: { type: String, enum: ['admin', 'verifier', 'contributor'], default: 'contributor' },
+  points: { type: Number, default: 0 },
+  badges: { type: [String], default: [] },
+  joinDate: { type: String, default: () => new Date().toISOString().split('T')[0] },
+  password: { type: String },
+});
+
+export const UserModel = mongoose.model<IUser>('User', UserSchema);
\ No newline at end of file
diff --git a/backend/src/routes/admin.ts b/backend/src/routes/admin.ts
new file mode 100644
index 0000000..da0b817
--- /dev/null
+++ b/backend/src/routes/admin.ts
@@ -0,0 +1,31 @@
+import express from 'express';
+import { requireAuth, requireAdmin } from '../middleware/auth';
+import {
+  listUsers,
+  createUser,
+  updateUser,
+  deleteUser,
+  getSettings,
+  updateSettings,
+  listAuditLogs,
+} from '../controllers/adminController';
+
+const router = express.Router();
+
+router.use(requireAuth);
+router.use(requireAdmin);
+
+// Users
+router.get('/users', listUsers);
+router.post('/users', createUser);
+router.put('/users/:id', updateUser);
+router.delete('/users/:id', deleteUser);
+
+// Settings
+router.get('/settings', getSettings);
+router.put('/settings', updateSettings);
+
+// Audit logs
+router.get('/audit-logs', listAuditLogs);
+
+export default router;
\ No newline at end of file
diff --git a/backend/src/routes/auditRoutes.js b/backend/src/routes/auditRoutes.js
new file mode 100644
index 0000000..6945175
--- /dev/null
+++ b/backend/src/routes/auditRoutes.js
@@ -0,0 +1,10 @@
+import express from 'express';
+import { getAuditLogs } from '../controllers/auditController.js';
+import { protect, authorize } from '../middleware/auth.js';
+
+const router = express.Router();
+
+// Protect route and allow only admin
+router.get('/', protect, authorize('admin'), getAuditLogs);
+
+export default router;
diff --git a/backend/src/routes/wikimediaOAuth1Routes.js b/backend/src/routes/wikimediaOAuth1Routes.js
new file mode 100644
index 0000000..8dd59c7
--- /dev/null
+++ b/backend/src/routes/wikimediaOAuth1Routes.js
@@ -0,0 +1,11 @@
+import express from 'express';
+
+// Minimal shim for Wikimedia OAuth1 routes used in tests
+// Implement real OAuth1 flows as needed. For tests we only need the module to exist.
+const router = express.Router();
+
+// Example placeholder endpoints (optional)
+router.get('/init', (req, res) => res.status(501).json({ success: false, message: 'Not implemented' }));
+router.get('/callback', (req, res) => res.status(501).json({ success: false, message: 'Not implemented' }));
+
+export default router;
diff --git a/backend/src/server.js b/backend/src/server.js
index fe9eb8b..aecb7c3 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -1,3 +1,6 @@
+import auditRoutes from './routes/auditRoutes.js';
+
+
 import express from 'express';
 import cors from 'cors';
 import helmet from 'helmet';
@@ -130,6 +133,8 @@ app.use('/api/auth', authRoutes);
 app.use('/api/submissions', submissionRoutes);
 app.use('/api/users', userRoutes);
 app.use('/api/admin', adminRoutes);
+// Audit logs route (mounted after app is created)
+app.use('/api/admin/audit-logs', auditRoutes);
 app.use('/api/countries', countryRoutes);
 app.use('/api/system', systemRoutes);
 app.use('/api/reports', reportsRoutes);
diff --git a/backend/src/server.ts b/backend/src/server.ts
new file mode 100644
index 0000000..0c5d9a7
--- /dev/null
+++ b/backend/src/server.ts
@@ -0,0 +1,35 @@
+import express from 'express';
+import mongoose from 'mongoose';
+import cors from 'cors';
+import adminRoutes from './routes/admin';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+// Mount admin API
+app.use('/api/admin', adminRoutes);
+
+// Health
+app.get('/api/health', (_, res) => res.json({ ok: true }));
+
+const PORT = process.env.PORT || 4000;
+const MONGO = process.env.MONGO_URI || 'mongodb://localhost:27017/sourcewiki';
+
+mongoose
+  .connect(MONGO)
+  .then(() => {
+    // eslint-disable-next-line no-console
+    console.log('Connected to MongoDB');
+    app.listen(PORT, () => {
+      // eslint-disable-next-line no-console
+      console.log(`Server listening on port ${PORT}`);
+    });
+  })
+  .catch((err) => {
+    // eslint-disable-next-line no-console
+    console.error('Failed to connect to MongoDB', err);
+  });
\ No newline at end of file
diff --git a/backend/src/utils/audit.ts b/backend/src/utils/audit.ts
new file mode 100644
index 0000000..ba976fc
--- /dev/null
+++ b/backend/src/utils/audit.ts
@@ -0,0 +1,24 @@
+import { AuditLogModel } from '../models/AuditLog';
+
+export const createAuditLog = async (opts: {
+  action: string;
+  resource?: string;
+  method?: string;
+  user?: { id?: string; username?: string } | null;
+  details?: any;
+}) => {
+  try {
+    const log = new AuditLogModel({
+      action: opts.action,
+      resource: opts.resource,
+      method: opts.method,
+      user: opts.user ?? null,
+      details: opts.details ?? {},
+    });
+    await log.save();
+    return log;
+  } catch (err) {
+    console.error('Failed to create audit log', err);
+    return null;
+  }
+};
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 78e80d7..d32ab70 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,7 +45,14 @@
             "recharts": "^2.15.2",
             "sonner": "^2.0.3",
             "tailwind-merge": "*",
-            "vaul": "^1.1.2"
+            "vaul": "^1.1.2",
+            "vite-plugin-pwa": "^1.2.0",
+            "workbox-background-sync": "^7.4.0",
+            "workbox-core": "^7.4.0",
+            "workbox-routing": "^7.4.0",
+            "workbox-strategies": "^7.4.0",
+            "workbox-window": "^7.4.0",
+            "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
             "@tailwindcss/postcss": "^4.1.18",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 419bd1f..5e38278 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,3 +1,7 @@
+import React, { useEffect } from 'react';
+import { Routes, Route, Link, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './lib/auth-context';
+import { Navigation } from './components/Navigation';
 import React, { useEffect } from "react";
 import { Routes, Route, Link } from "react-router-dom";
 
@@ -9,12 +13,15 @@ import { CountryNavigation } from "./components/CountryNavigation";
 import {
   LandingPage,
   AuthPage,
+  AdminAuditLogs,
   SubmissionForm,
   AdminDashboard,
   PublicDirectory,
+  BulkUserManagement,
   UserProfile,
-  CountryPage,
-} from "./pages";
+  SettingsPage,
+  CountryPage, // Merged from upstream
+} from './pages';
 import { Toaster } from './components/ui/sonner';
 import { TooltipProvider } from './components/ui/tooltip';
 import { initializeData } from './lib/mock-data';
@@ -32,7 +39,15 @@ function NotFound() {
   );
 }
 
-/* -------------------- App Content -------------------- */
+/* -------------------- Admin Route Guard -------------------- */
+function AdminRoute({ children }: { children: JSX.Element }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/auth" replace />;
+  if (user.role !== 'admin') return <Navigate to="/" replace />;
+  return children;
+}
+
+/* -------------------- Main App Content -------------------- */
 function AppContent() {
   useEffect(() => {
     initializeData();
@@ -40,6 +55,67 @@ function AppContent() {
 
   return (
     <TooltipProvider>
+      <div className="min-h-screen bg-white flex flex-col">
+        <Navigation />
+
+        <main className="flex-1">
+          <Routes>
+            {/* Public Routes */}
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/auth" element={<AuthPage />} />
+            <Route path="/submit" element={<SubmissionForm />} />
+            <Route path="/directory" element={<PublicDirectory />} />
+            <Route path="/profile" element={<UserProfile />} />
+            
+            {/* New Upstream Route */}
+            <Route path="/country/:countryCode" element={<CountryPage />} />
+
+            {/* Admin Routes (Your Task) */}
+            <Route path="/admin" element={<AdminRoute><AdminDashboard /></AdminRoute>} />
+            <Route path="/admin/users" element={<AdminRoute><BulkUserManagement /></AdminRoute>} />
+            <Route path="/admin/audit-logs" element={<AdminRoute><AdminAuditLogs /></AdminRoute>} />
+            <Route path="/admin/settings" element={<AdminRoute><SettingsPage /></AdminRoute>} />
+
+            {/* 404 */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </main>
+
+        <Toaster position="top-right" />
+
+        {/* Footer */}
+        <footer className="border-t mt-16">
+          <div className="max-w-7xl mx-auto px-4 py-8">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div>
+                <h3 className="mb-3">About WikiSourceVerifier</h3>
+                <p className="text-sm text-gray-600">
+                  A community-driven platform for verifying Wikipedia
+                  references and maintaining source quality standards.
+                </p>
+              </div>
+
+              <div>
+                <h3 className="mb-3">Quick Links</h3>
+                <ul className="space-y-2 text-sm">
+                  <li><Link to="/directory" className="hover:underline">Browse Directory</Link></li>
+                  <li><Link to="/submit" className="hover:underline">Submit Reference</Link></li>
+                  <li><Link to="/auth" className="hover:underline">Login / Register</Link></li>
+                </ul>
+              </div>
+
+              <div>
+                <h3 className="mb-3">Resources</h3>
+                <ul className="space-y-2 text-sm text-gray-600">
+                  <li>Wikipedia Verifiability Guidelines</li>
+                  <li>Reliable Sources Policy</li>
+                  <li>Community Guidelines</li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-8 pt-8 border-t text-center text-sm text-gray-600">
+              © 2025 WikiSourceVerifier. Built for the Wikipedia community.
         <div className="min-h-screen bg-white flex flex-col">
           <Navigation />
           <CountryNavigation />
@@ -129,4 +205,4 @@ export default function App() {
       <AppContent />
     </AuthProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index ba9c106..f4271be 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,99 +1,98 @@
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import {
-  BookOpen,
-  Search,
-  Upload,
-  User,
-  LogOut,
-  Award,
-  Shield,
-  LogIn,
-} from "lucide-react";
-import { Button } from "./ui/button";
-import { useState } from "react";
-import { useAuth } from "../lib/auth-context";
+import React, { useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { 
+  BookOpen, 
+  Search, 
+  Upload, 
+  User, 
+  LogOut, 
+  Award, 
+  Shield, 
+  LogIn, 
+  Menu,
+  Settings,
+  Users,
+  FileText
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { useAuth } from '../lib/auth-context';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuTrigger,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { Badge } from "./ui/badge";
-import { Menu } from "lucide-react";
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
-
+} from './ui/dropdown-menu';
+import { Badge } from './ui/badge';
+import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
 
-const countries = [
-  { name: 'Ghana', slug: 'ghana' },
-  { name: 'Nigeria', slug: 'nigeria' },
-  { name: 'Kenya', slug: 'kenya' },
-];
-
-
-export const Navigation: React.FC = () => {
+export function Navigation() {
   const { user, logout } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
-  const [open, setOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/');
+  };
 
   const isActive = (path: string) => location.pathname === path;
 
   return (
-    <nav className="border-b bg-white">
+    <nav className="border-b bg-white sticky top-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
-          <div className="flex items-center space-x-8">
-            <Link
-              to="/"
-              className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
+        <div className="flex justify-between h-16 items-center">
+          
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-2">
+            <div className="bg-blue-600 p-2 rounded-lg">
+              <BookOpen className="h-6 w-6 text-white" />
+            </div>
+            <span className="font-bold text-xl hidden sm:block">WikiSourceVerifier</span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            <Link 
+              to="/directory" 
+              className={`text-sm font-medium hover:text-blue-600 ${isActive('/directory') ? 'text-blue-600' : 'text-gray-600'}`}
             >
-              <BookOpen className="h-8 w-8" />
-              <div className="flex flex-col items-start">
-                <span className="font-semibold">WikiSourceVerifier</span>
-                <span className="text-xs text-gray-500">
-                  Community Reference Platform
-                </span>
-              </div>
+              Directory
+            </Link>
+            <Link 
+              to="/submit" 
+              className={`text-sm font-medium hover:text-blue-600 ${isActive('/submit') ? 'text-blue-600' : 'text-gray-600'}`}
+            >
+              Submit Reference
             </Link>
 
-            <div className="hidden md:flex items-center space-x-1">
-              <Button
-                variant={isActive("/directory") ? "default" : "ghost"}
-                onClick={() => navigate("/directory")}
-                className="flex items-center space-x-2"
-              >
-                <Search className="h-4 w-4" />
-                <span>Directory</span>
-              </Button>
-
-              {user && (
-                <>
-                  <Button
-                    variant={isActive("/submit") ? "default" : "ghost"}
-                    onClick={() => navigate("/submit")}
-                    className="flex items-center space-x-2"
-                  >
-                    <Upload className="h-4 w-4" />
-                    <span>Submit</span>
+            {/* Admin Links (Only for Admin) */}
+            {user?.role === 'admin' && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="text-sm font-medium gap-1 text-blue-700">
+                    <Shield className="h-4 w-4" />
+                    Admin
                   </Button>
-
-                  {(user.role === "admin" || user.role === "verifier") && (
-                    <Button
-                      variant={isActive("/admin") ? "default" : "ghost"}
-                      onClick={() => navigate("/admin")}
-                      className="flex items-center space-x-2"
-                    >
-                      <Shield className="h-4 w-4" />
-                      <span>Admin</span>
-                    </Button>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => navigate('/admin')}>
+                    Dashboard
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => navigate('/admin/users')}>
+                    <Users className="mr-2 h-4 w-4" /> Bulk Users
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => navigate('/admin/audit-logs')}>
+                    <FileText className="mr-2 h-4 w-4" /> Audit Logs
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => navigate('/admin/settings')}>
+                    <Settings className="mr-2 h-4 w-4" /> Settings
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
           {/* Mobile Menu */}
           <div className="md:hidden flex items-center space-x-4">
             <Sheet open={open} onOpenChange={setOpen}>
@@ -151,58 +150,83 @@ export const Navigation: React.FC = () => {
             </Sheet>
           </div>
 
-          <div className="flex items-center space-x-4">
+          {/* User Auth Section */}
+          <div className="flex items-center gap-4">
             {user ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    className="flex items-center space-x-2"
-                  >
-                    <User className="h-4 w-4" />
-                    <span className="hidden sm:inline">{user.username}</span>
-                    <Badge variant="secondary" className="ml-2">
-                      {user.points}
-                    </Badge>
+                  <Button variant="ghost" className="gap-2">
+                    <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
+                      <span className="text-blue-700 font-bold">{user.username[0].toUpperCase()}</span>
+                    </div>
+                    <span className="hidden sm:inline-block">{user.username}</span>
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-56">
                   <DropdownMenuLabel>
-                    <div className="flex flex-col space-y-1">
+                    <div className="flex flex-col">
                       <span>{user.username}</span>
-                      <span className="text-xs text-gray-500">
-                        {user.email}
-                      </span>
+                      <span className="text-xs text-gray-500 font-normal">{user.email}</span>
                     </div>
                   </DropdownMenuLabel>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => navigate("/profile")}>
-                    <User className="h-4 w-4 mr-2" />
-                    Profile
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => navigate("/profile")}>
-                    <Award className="h-4 w-4 mr-2" />
-                    Badges ({user.badges.length})
+                  <DropdownMenuItem onClick={() => navigate('/profile')}>
+                    <User className="mr-2 h-4 w-4" /> Profile
                   </DropdownMenuItem>
+                  {user.points !== undefined && (
+                    <div className="px-2 py-1.5 text-sm flex items-center justify-between text-yellow-600 bg-yellow-50 my-1 rounded">
+                      <span className="flex items-center gap-1"><Award className="h-3 w-3" /> Points</span>
+                      <span className="font-bold">{user.points}</span>
+                    </div>
+                  )}
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={logout}>
-                    <LogOut className="h-4 w-4 mr-2" />
-                    Logout
+                  <DropdownMenuItem onClick={handleLogout} className="text-red-600">
+                    <LogOut className="mr-2 h-4 w-4" /> Logout
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             ) : (
-              <Button
-                onClick={() => navigate("/auth")}
-                className="flex items-center space-x-2"
-              >
-                <LogIn className="h-4 w-4" />
-                <span className="hidden sm:inline">Login</span>
-              </Button>
+              <div className="hidden md:flex gap-2">
+                <Button variant="ghost" onClick={() => navigate('/auth')}>Log in</Button>
+                <Button onClick={() => navigate('/auth?mode=register')}>Get Started</Button>
+              </div>
             )}
+
+            {/* Mobile Menu Button (Sheet) */}
+            <Sheet open={isOpen} onOpenChange={setIsOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                  <Menu className="h-6 w-6" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right">
+                <div className="flex flex-col gap-4 mt-6">
+                  <Link to="/directory" onClick={() => setIsOpen(false)} className="text-lg font-medium">Directory</Link>
+                  <Link to="/submit" onClick={() => setIsOpen(false)} className="text-lg font-medium">Submit Reference</Link>
+                  
+                  {user?.role === 'admin' && (
+                    <>
+                      <div className="h-px bg-gray-200 my-2" />
+                      <p className="text-sm text-gray-500 uppercase font-bold">Admin</p>
+                      <Link to="/admin" onClick={() => setIsOpen(false)} className="text-lg">Dashboard</Link>
+                      <Link to="/admin/users" onClick={() => setIsOpen(false)} className="text-lg">Bulk Users</Link>
+                      <Link to="/admin/audit-logs" onClick={() => setIsOpen(false)} className="text-lg">Audit Logs</Link>
+                      <Link to="/admin/settings" onClick={() => setIsOpen(false)} className="text-lg">Settings</Link>
+                    </>
+                  )}
+
+                  {!user && (
+                    <div className="flex flex-col gap-2 mt-4">
+                      <Button onClick={() => { navigate('/auth'); setIsOpen(false); }}>Log in</Button>
+                      <Button variant="outline" onClick={() => { navigate('/auth?mode=register'); setIsOpen(false); }}>Register</Button>
+                    </div>
+                  )}
+                </div>
+              </SheetContent>
+            </Sheet>
           </div>
         </div>
       </div>
     </nav>
   );
-};
+}
\ No newline at end of file
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index bbff447..ad11fc4 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,287 +1,141 @@
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
-
-interface ApiResponse<T = any> {
-  success: boolean;
-  data?: T;
-  message?: string;
-  errors?: Array<{ field: string; message: string }>;
+// Simple centralized API client for SourceWiki
+// Includes: Admin endpoints, Settings, Audit logs, Auth, and Submissions
+
+export type ApiResult<T> = { success: true; data: T } | { success: false; error: string };
+
+const BASE = import.meta.env.VITE_API_URL ?? '';
+const DEV_USER_HEADER = import.meta.env.VITE_DEV_USER ?? '';
+
+function buildHeaders(isJson = true): HeadersInit {
+  const h: HeadersInit = {};
+  if (isJson) h['Content-Type'] = 'application/json';
+  
+  // Auth Token handling
+  const token = localStorage.getItem('token');
+  if (token) h['Authorization'] = `Bearer ${token}`;
+  
+  if (DEV_USER_HEADER) h['x-dev-user'] = DEV_USER_HEADER;
+  return h;
 }
 
-class ApiClient {
-  private baseURL: string;
-  private accessToken: string | null = null;
-  private refreshToken: string | null = null;
-
-  constructor(baseURL: string) {
-    this.baseURL = baseURL;
-    this.loadTokens();
-  }
-
-  private loadTokens() {
-    this.accessToken = localStorage.getItem('accessToken');
-    this.refreshToken = localStorage.getItem('refreshToken');
-  }
-
-  private saveTokens(accessToken: string, refreshToken: string) {
-    this.accessToken = accessToken;
-    this.refreshToken = refreshToken;
-    localStorage.setItem('accessToken', accessToken);
-    localStorage.setItem('refreshToken', refreshToken);
-  }
-
-  private clearTokens() {
-    this.accessToken = null;
-    this.refreshToken = null;
-    localStorage.removeItem('accessToken');
-    localStorage.removeItem('refreshToken');
-  }
-
-  private async refreshAccessToken(): Promise<boolean> {
-    if (!this.refreshToken) return false;
-
-    try {
-      const response = await fetch(`${this.baseURL}/auth/refresh`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ refreshToken: this.refreshToken }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        this.saveTokens(data.accessToken, this.refreshToken!);
-        return true;
-      }
-      
-      this.clearTokens();
-      return false;
-    } catch (error) {
-      this.clearTokens();
-      return false;
-    }
-  }
-
-  async request<T = any>(
-    endpoint: string,
-    options: RequestInit = {}
-  ): Promise<T> {
-    const url = `${this.baseURL}${endpoint}`;
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-      ...(options.headers as Record<string, string>),
-    };
-
-    if (this.accessToken) {
-      headers['Authorization'] = `Bearer ${this.accessToken}`;
-    }
-
-    try {
-      let response = await fetch(url, {
-        ...options,
-        headers,
-        credentials: 'include',
-      });
-
-      // If unauthorized and we have a refresh token, try to refresh
-      if (response.status === 401 && this.refreshToken) {
-        const refreshed = await this.refreshAccessToken();
-        if (refreshed) {
-          // Retry the request with new token
-          headers['Authorization'] = `Bearer ${this.accessToken}`;
-          response = await fetch(url, {
-            ...options,
-            headers,
-            credentials: 'include',
-          });
-        }
-      }
-
-      // Check if response is JSON before parsing
-      const contentType = response.headers.get('content-type');
-      const isJson = contentType && contentType.includes('application/json');
-      
-      let data;
-      if (isJson) {
-        try {
-          data = await response.json();
-        } catch (parseError) {
-          throw new Error('Invalid JSON response from server');
-        }
-      } else {
-        // For non-JSON responses, create a data object
-        const text = await response.text();
-        data = {
-          success: response.ok,
-          message: text || 'An error occurred',
-        };
-      }
-
-      if (!response.ok) {
-        throw new Error(data.message || `Request failed with status ${response.status}`);
-      }
-
-      return data;
-    } catch (error) {
-      if (error instanceof Error) {
-        // Check for network errors
-        if (error.message === 'Failed to fetch' || error.message.includes('NetworkError')) {
-          throw new Error('Unable to connect to the server. Please check your connection.');
-        }
-        throw error;
-      }
-      throw new Error('Network error occurred');
-    }
-  }
-
-  async get<T = any>(endpoint: string): Promise<T> {
-    return this.request<T>(endpoint, { method: 'GET' });
-  }
-
-  async post<T = any>(endpoint: string, data?: any): Promise<T> {
-    return this.request<T>(endpoint, {
-      method: 'POST',
-      body: data ? JSON.stringify(data) : undefined,
+// Core Fetch Function
+async function apiFetch<T>(path: string, opts: RequestInit = {}): Promise<ApiResult<T>> {
+  try {
+    // Handle FormData automatically
+    const isFormData = opts.body instanceof FormData;
+    
+    const res = await fetch(`${BASE}${path}`, {
+      credentials: 'include',
+      ...opts,
+      headers: {
+        ...(opts.headers ?? {}),
+        ...buildHeaders(!isFormData),
+      },
     });
-  }
-
-  async put<T = any>(endpoint: string, data?: any): Promise<T> {
-    return this.request<T>(endpoint, {
-      method: 'PUT',
-      body: data ? JSON.stringify(data) : undefined,
-    });
-  }
-
-  async delete<T = any>(endpoint: string): Promise<T> {
-    return this.request<T>(endpoint, { method: 'DELETE' });
-  }
-
-  setTokens(accessToken: string, refreshToken: string) {
-    this.saveTokens(accessToken, refreshToken);
-  }
-
-  clearAuth() {
-    this.clearTokens();
-  }
-
-  isAuthenticated(): boolean {
-    return !!this.accessToken;
+    
+    // Handle empty responses
+    const text = await res.text();
+    const data = text ? JSON.parse(text) : null;
+    
+    if (!res.ok) return { success: false, error: data?.message ?? res.statusText };
+    return { success: true, data: data as T };
+  } catch (err) {
+    return { success: false, error: (err as Error).message || 'Network error' };
   }
 }
 
-export const api = new ApiClient(API_URL);
-
-// Auth API
-export const authApi = {
-  register: (username: string, email: string, password: string, country: string) =>
-    api.post('/auth/register', { username, email, password, country }),
-
-  login: (username: string, password: string) =>
-    api.post('/auth/login', { username, password }),
+// --- 1. GENERAL API EXPORT ---
+export const api = {
+  get: <T>(url: string) => apiFetch<T>(url, { method: 'GET' }),
+  post: <T>(url: string, data: any) => apiFetch<T>(url, { method: 'POST', body: JSON.stringify(data) }),
+  put: <T>(url: string, data: any) => apiFetch<T>(url, { method: 'PUT', body: JSON.stringify(data) }),
+  patch: <T>(url: string, data: any) => apiFetch<T>(url, { method: 'PATCH', body: JSON.stringify(data) }),
+  delete: <T>(url: string) => apiFetch<T>(url, { method: 'DELETE' }),
+};
 
-  logout: () => api.post('/auth/logout'),
+/* --- TYPES --- */
+export type User = {
+  id: string;
+  username: string;
+  email: string;
+  country?: string;
+  role: 'admin' | 'verifier' | 'contributor';
+  points?: number;
+  badges?: string[];
+  joinDate?: string;
+};
 
-  getMe: () => api.get('/auth/me'),
+export type Settings = {
+  _id?: string;
+  siteName: string;
+  verificationPoints: number;
+  maxSubmissionsPerDay: number;
+  updatedAt?: string;
+};
 
-  updateProfile: (email: string, country: string) =>
-    api.put('/auth/profile', { email, country }),
+export type AuditLog = {
+  _id: string;
+  action: string;
+  resource?: string;
+  method?: string;
+  user?: { id?: string; username?: string } | null;
+  details?: any;
+  createdAt: string;
+};
 
-  changePassword: (currentPassword: string, newPassword: string) =>
-    api.put('/auth/password', { currentPassword, newPassword }),
+/* --- 2. AUTH API --- */
+export const authApi = {
+  login: (credentials: any) => apiFetch<any>('/api/auth/login', { method: 'POST', body: JSON.stringify(credentials) }),
+  register: (data: any) => apiFetch<any>('/api/auth/register', { method: 'POST', body: JSON.stringify(data) }),
+  logout: () => apiFetch<{success: boolean}>('/api/auth/logout', { method: 'POST' }),
+  getCurrentUser: () => apiFetch<User>('/api/auth/me'),
 };
 
-// Submission API
+/* --- 3. SUBMISSION API --- */
 export const submissionApi = {
-  create: (data: {
-    url: string;
-    title: string;
-    publisher: string;
-    country: string;
-    category: string;
-    wikipediaArticle?: string;
-    fileType?: string;
-    fileName?: string;
-  }) => api.post('/submissions', data),
-
-  getAll: (params?: {
-    country?: string;
-    category?: string;
-    status?: string;
-    search?: string;
-    page?: number;
-    limit?: number;
-  }) => {
-    const query = new URLSearchParams();
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined) query.append(key, String(value));
-      });
-    }
-    return api.get(`/submissions?${query.toString()}`);
-  },
-
-  getById: (id: string) => api.get(`/submissions/${id}`),
-
-  getMy: (page = 1, limit = 20) =>
-    api.get(`/submissions/my/submissions?page=${page}&limit=${limit}`),
-
-  update: (id: string, data: any) => api.put(`/submissions/${id}`, data),
-
-  delete: (id: string) => api.delete(`/submissions/${id}`),
-
-  verify: (id: string, status: string, credibility?: string, verifierNotes?: string) => {
-    console.log('🔴 API verify call:', { id, status, credibility, verifierNotes });
-    console.log('🔴 API URL being used:', `${API_URL}/submissions/${id}/verify`);
-    const payload = { status, credibility, verifierNotes };
-    console.log('🔴 Payload being sent:', payload);
-    return api.put(`/submissions/${id}/verify`, payload);
-  },
-
-  getPendingForCountry: (page = 1, limit = 20) =>
-    api.get(`/submissions/pending/country?page=${page}&limit=${limit}`),
-
-  getStats: (country?: string) => {
-    const query = country ? `?country=${country}` : '';
-    return api.get(`/submissions/stats${query}`);
-  },
+  getAll: () => apiFetch<any[]>('/api/submissions'),
+  getById: (id: string) => apiFetch<any>(`/api/submissions/${id}`),
+  create: (data: any) => apiFetch<any>('/api/submissions', { method: 'POST', body: JSON.stringify(data) }),
+  update: (id: string, data: any) => apiFetch<any>(`/api/submissions/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+  delete: (id: string) => apiFetch<{success: boolean}>(`/api/submissions/${id}`, { method: 'DELETE' }),
 };
 
-// User API
+/* --- 4. PUBLIC USER API --- */
 export const userApi = {
-  getProfile: (id: string) => api.get(`/users/${id}`),
-
-  getLeaderboard: (country?: string, limit = 20) => {
-    const query = new URLSearchParams();
-    if (country) query.append('country', country);
-    query.append('limit', String(limit));
-    return api.get(`/users/leaderboard?${query.toString()}`);
-  },
-
-  getAll: (params?: {
-    role?: string;
-    country?: string;
-    search?: string;
-    page?: number;
-    limit?: number;
-  }) => {
-    const query = new URLSearchParams();
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined) query.append(key, String(value));
-      });
-    }
-    return api.get(`/users?${query.toString()}`);
-  },
-
-  awardBadge: (id: string, name: string, icon: string) =>
-    api.post(`/users/${id}/badge`, { name, icon }),
+  getAll: () => apiFetch<User[]>('/api/users'), 
+  getProfile: (id: string) => apiFetch<User>(`/api/users/${id}`),
+  updateProfile: (data: any) => apiFetch<User>('/api/users/profile', { method: 'PATCH', body: JSON.stringify(data) }),
+};
 
-  updateRole: (id: string, role: string) =>
-    api.put(`/users/${id}/role`, { role }),
+/* --- 5. HACKATHON LOGIC (Admin/Settings/Audit) --- */
+
+/* Admin - Users */
+export const adminApi = {
+  listUsers: async (): Promise<ApiResult<User[]>> => apiFetch<User[]>('/api/admin/users'),
+  createUser: async (payload: Partial<User>): Promise<ApiResult<User>> =>
+    apiFetch<User>('/api/admin/users', { method: 'POST', body: JSON.stringify(payload) }),
+  updateUser: async (id: string, payload: Partial<User>): Promise<ApiResult<User>> =>
+    apiFetch<User>(`/api/admin/users/${encodeURIComponent(id)}`, { method: 'PUT', body: JSON.stringify(payload) }),
+  deleteUser: async (id: string): Promise<ApiResult<{ success: boolean }>> =>
+    apiFetch<{ success: boolean }>(`/api/admin/users/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+};
 
-  deactivate: (id: string) => api.put(`/users/${id}/deactivate`),
+/* Settings */
+export const settingsApi = {
+  getSettings: async (): Promise<ApiResult<Settings>> => apiFetch<Settings>('/api/admin/settings'),
+  updateSettings: async (payload: Partial<Settings>): Promise<ApiResult<Settings>> =>
+    apiFetch<Settings>('/api/admin/settings', { method: 'PUT', body: JSON.stringify(payload) }),
+};
 
-  activate: (id: string) => api.put(`/users/${id}/activate`),
+/* Audit logs */
+export const auditApi = {
+  listAuditLogs: async (params?: { action?: string; user?: string }): Promise<ApiResult<AuditLog[]>> => {
+    const qs = new URLSearchParams();
+    if (params?.action) qs.set('action', params.action);
+    if (params?.user) qs.set('user', params.user);
+    const path = `/api/admin/audit-logs${qs.toString() ? `?${qs.toString()}` : ''}`;
+    return apiFetch<AuditLog[]>(path);
+  },
 };
 
-export default api;
+export default { api, authApi, submissionApi, userApi, adminApi, settingsApi, auditApi };
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index f0928bf..c15c2ca 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,3 +1,16 @@
+
+
+  import { createRoot } from "react-dom/client";
+  import App from "./App.tsx";
+  import { BrowserRouter } from 'react-router-dom';
+  import "./index.css";
+  import { Workbox } from "workbox-window";
+
+  if ("serviceWorker" in navigator) {
+    const wb = new Workbox("/sw.js");
+    wb.register();
+  }
+
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
diff --git a/frontend/src/pages/AdminAuditLogs.tsx b/frontend/src/pages/AdminAuditLogs.tsx
new file mode 100644
index 0000000..11b3d06
--- /dev/null
+++ b/frontend/src/pages/AdminAuditLogs.tsx
@@ -0,0 +1,155 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../lib/auth-context';
+import { Input } from '../components/ui/input';
+import { Button } from '../components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
+import { toast } from 'sonner';
+
+interface AuditLog {
+  _id: string;
+  action: string;
+  resource?: string;
+  method?: string;
+  user?: { _id?: string; username?: string } | null;
+  createdAt: string;
+  details?: any;
+}
+
+export const AdminAuditLogs: React.FC = () => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [query, setQuery] = useState<string>('');
+  const [actionFilter, setActionFilter] = useState<string>('all');
+
+  useEffect(() => {
+    if (user === undefined) return;
+    if (!user) {
+      navigate('/auth');
+      return;
+    }
+    if (user.role !== 'admin') {
+      toast.error('Access denied');
+      navigate('/');
+    }
+  }, [user, navigate]);
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch('/api/admin/audit-logs');
+        if (!res.ok) throw new Error('Failed to fetch');
+        const data = await res.json();
+        const items: AuditLog[] = Array.isArray(data) ? data : data.data ?? data.logs ?? [];
+        setLogs(items);
+      } catch (err) {
+        setLogs([]);
+        console.error('Failed to load audit logs', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const actionOptions = useMemo(() => {
+    const set = new Set<string>(logs.map((l) => l.action || '').filter(Boolean));
+    return ['all', ...Array.from(set)];
+  }, [logs]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return logs.filter((l) => {
+      if (actionFilter !== 'all' && l.action !== actionFilter) return false;
+      if (!q) return true;
+      const username = l.user?.username ?? '';
+      return (
+        username.toLowerCase().includes(q) ||
+        (l.resource ?? '').toLowerCase().includes(q) ||
+        (l.action ?? '').toLowerCase().includes(q) ||
+        (l.method ?? '').toLowerCase().includes(q)
+      );
+    });
+  }, [logs, query, actionFilter]);
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-12">
+      <h1 className="text-2xl font-bold mb-6">Audit Logs</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent activity</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <Input
+                placeholder="Filter by user, action or resource..."
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="min-w-0"
+              />
+              <Button onClick={() => { setQuery(''); setActionFilter('all'); }}>Clear</Button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <label className="text-sm text-gray-600">Action</label>
+              <select
+                value={actionFilter}
+                onChange={(e) => setActionFilter(e.target.value)}
+                className="px-2 py-1 border rounded"
+              >
+                {actionOptions.map((opt) => (
+                  <option key={opt} value={opt}>
+                    {opt === 'all' ? 'All' : opt}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {loading ? (
+            <div>Loading...</div>
+          ) : filtered.length === 0 ? (
+            <div className="text-gray-600">No audit entries found.</div>
+          ) : (
+            <div className="w-full overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="text-left border-b">
+                    <th className="py-2 px-2">Time</th>
+                    <th className="py-2 px-2">User</th>
+                    <th className="py-2 px-2">Action</th>
+                    <th className="py-2 px-2">Resource</th>
+                    <th className="py-2 px-2">Method</th>
+                    <th className="py-2 px-2">Details</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filtered.map((log) => (
+                    <tr key={log._id} className="border-b last:border-b-0">
+                      <td className="py-2 px-2">{new Date(log.createdAt).toLocaleString()}</td>
+                      <td className="py-2 px-2">{log.user?.username ?? 'System'}</td>
+                      <td className="py-2 px-2">{log.action}</td>
+                      <td className="py-2 px-2">{log.resource ?? '-'}</td>
+                      <td className="py-2 px-2">{log.method ?? '-'}</td>
+                      <td className="py-2 px-2">
+                        {typeof log.details === 'string' ? log.details : JSON.stringify(log.details ?? {}, null, 0)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AdminAuditLogs;
diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx
index 658918b..ed84db2 100644
--- a/frontend/src/pages/AdminDashboard.tsx
+++ b/frontend/src/pages/AdminDashboard.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '../components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
@@ -30,6 +30,7 @@ import {
 } from '../lib/mock-data';
 import { submissionApi } from '../lib/api';
 import { toast } from 'sonner';
+import { CheckCircle, XCircle, Eye, Clock, TrendingUp, Users, FileCheck } from 'lucide-react';
 
 interface Submission {
   id: string;
@@ -39,15 +40,18 @@ interface Submission {
   country: string;
   category: string;
   status: string;
-  submitter?: any;
+  submitterName?: string;
   verifier?: any;
   wikipediaArticle?: string;
   verifierNotes?: string;
   verifiedAt?: string;
+  verifiedDate?: string;
+  submittedDate?: string;
+  mediaType?: string;
+  reliability?: 'credible' | 'unreliable' | string;
   createdAt: string;
   updatedAt: string;
 }
-import { CheckCircle, XCircle, Eye, Clock, TrendingUp, Users, FileCheck } from 'lucide-react';
 
 export const AdminDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -62,30 +66,35 @@ export const AdminDashboard: React.FC = () => {
 
   useEffect(() => {
     loadSubmissions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
   const loadSubmissions = async () => {
     if (!user) return;
-    
     setLoading(true);
     try {
-      // Load pending submissions for verifier's country
       if (user.role === 'verifier' || user.role === 'admin') {
         const response = await submissionApi.getPendingForCountry();
         if (response.success) {
-          setSubmissions(response.submissions);
+          setSubmissions(response.submissions || []);
+        } else {
+          setSubmissions([]);
         }
       }
     } catch (error) {
       toast.error('Failed to load submissions');
+      setSubmissions([]);
     } finally {
       setLoading(false);
     }
   };
 
-  const handleVerify = async (submission: Submission, status: 'approved' | 'rejected', credibility?: 'credible' | 'unreliable') => {
+  const handleVerify = async (
+    submission: Submission,
+    status: 'approved' | 'rejected',
+    credibility?: 'credible' | 'unreliable'
+  ) => {
     if (!user) return;
-
     setLoading(true);
     try {
       const response = await submissionApi.verify(
@@ -96,17 +105,22 @@ export const AdminDashboard: React.FC = () => {
       );
 
       if (response.success) {
-        toast.success(
-          `Reference ${status === 'approved' ? '✅ Approved' : '❌ Rejected'} (+5 points)`
-        );
-        
-        // Update user points locally
-        if (user) {
-          user.points += 5;
+        if (status === 'approved') {
+          toast.success('Reference approved (+5 points)');
+          // award points to current user locally (avoid mutating context directly)
+          // best-effort local update; real backend will persist
+          try {
+            // some auth contexts expose a setter; if not, this is only local visual
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const anyUser: any = user as any;
+            if (typeof anyUser.points === 'number') anyUser.points = anyUser.points + 5;
+          } catch {}
+        } else {
+          toast.success('Reference rejected');
         }
-        
-        // Reload submissions
         await loadSubmissions();
+      } else {
+        toast.error('Verification failed (server)');
       }
     } catch (error) {
       toast.error('Failed to verify submission');
@@ -119,7 +133,7 @@ export const AdminDashboard: React.FC = () => {
   };
 
   const handleReject = async (submission: Submission) => {
-    await handleVerify(submission, 'rejected');
+    await handleVerify(submission, 'rejected', 'unreliable');
   };
 
   const openVerificationDialog = (submission: Submission) => {
@@ -128,12 +142,10 @@ export const AdminDashboard: React.FC = () => {
     setShowDialog(true);
   };
 
-  const getPendingSubmissions = () => {
-    return submissions.filter((s) => s.status === 'pending');
-  };
+  const getPendingSubmissions = () => submissions.filter((s) => s.status === 'pending');
 
   const getVerifiedSubmissions = () => {
-    let filtered = submissions.filter((s) => s.status === 'verified');
+    let filtered = submissions.filter((s) => s.status === 'verified' || s.status === 'approved');
 
     if (filterCategory !== 'all') {
       filtered = filtered.filter((s) => s.category === filterCategory);
@@ -141,12 +153,12 @@ export const AdminDashboard: React.FC = () => {
 
     if (filterDate === 'today') {
       const today = new Date().toISOString().split('T')[0];
-      filtered = filtered.filter((s: any) => s.verifiedDate === today);
+      filtered = filtered.filter((s) => s.verifiedDate && s.verifiedDate.startsWith(today));
     } else if (filterDate === 'week') {
       const weekAgo = new Date();
       weekAgo.setDate(weekAgo.getDate() - 7);
       const weekAgoStr = weekAgo.toISOString().split('T')[0];
-      filtered = filtered.filter((s: any) => s.verifiedDate && s.verifiedDate >= weekAgoStr);
+      filtered = filtered.filter((s) => s.verifiedDate && s.verifiedDate >= weekAgoStr);
     }
 
     return filtered;
@@ -155,9 +167,8 @@ export const AdminDashboard: React.FC = () => {
   const getStats = () => {
     const total = submissions.length;
     const pending = submissions.filter((s) => s.status === 'pending').length;
-    const verified = submissions.filter((s) => s.status === 'verified').length;
-    const credible = submissions.filter((s: any) => s.reliability === 'credible').length;
-
+    const verified = submissions.filter((s) => s.status === 'verified' || s.status === 'approved').length;
+    const credible = submissions.filter((s) => s.reliability === 'credible').length;
     return { total, pending, verified, credible };
   };
 
@@ -185,14 +196,27 @@ export const AdminDashboard: React.FC = () => {
 
   return (
     <div className="max-w-7xl mx-auto px-4 py-12">
-      <div className="mb-8">
-        <h1 className="mb-2">Verification Dashboard</h1>
-        <p className="text-gray-600">
-          Review and verify reference submissions from the community
-        </p>
+      <div className="mb-8 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="mb-2">Verification Dashboard</h1>
+          <p className="text-gray-600">Review and verify reference submissions from the community</p>
+        </div>
+
+        {user.role === 'admin' && (
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => navigate('/admin/users')}>
+              <Users className="h-4 w-4 mr-2" /> Users
+            </Button>
+            <Button variant="outline" onClick={() => navigate('/admin/audit-logs')}>
+              <FileCheck className="h-4 w-4 mr-2" /> Audit Logs
+            </Button>
+            <Button variant="default" onClick={() => navigate('/admin/settings')}>
+              ⚙️ Settings
+            </Button>
+          </div>
+        )}
       </div>
 
-      {/* Stats */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
         <Card>
           <CardHeader className="pb-3">
@@ -243,12 +267,9 @@ export const AdminDashboard: React.FC = () => {
         </Card>
       </div>
 
-      {/* Tabs */}
       <Tabs defaultValue="pending" className="space-y-4">
         <TabsList>
-          <TabsTrigger value="pending">
-            Pending ({pendingSubmissions.length})
-          </TabsTrigger>
+          <TabsTrigger value="pending">Pending ({pendingSubmissions.length})</TabsTrigger>
           <TabsTrigger value="verified">Verified ({verifiedSubmissions.length})</TabsTrigger>
         </TabsList>
 
@@ -263,7 +284,7 @@ export const AdminDashboard: React.FC = () => {
             </Card>
           ) : (
             <div className="space-y-4">
-              {pendingSubmissions.map((submission: any) => (
+              {pendingSubmissions.map((submission) => (
                 <Card key={submission.id}>
                   <CardContent className="pt-6">
                     <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
@@ -284,44 +305,27 @@ export const AdminDashboard: React.FC = () => {
                                 {submission.mediaType === 'pdf' ? '📄 PDF' : '🔗 URL'}
                               </Badge>
                             </div>
-                            <a
-                              href={submission.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="text-sm text-blue-600 hover:underline block mb-2"
-                            >
+                            <a href={submission.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline block mb-2">
                               {submission.url}
                             </a>
                             {submission.wikipediaArticle && (
-                              <a
-                                href={submission.wikipediaArticle}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-sm text-gray-500 hover:underline block"
-                              >
+                              <a href={submission.wikipediaArticle} target="_blank" rel="noopener noreferrer" className="text-sm text-gray-500 hover:underline block">
                                 📖 Wikipedia Article
                               </a>
                             )}
                             <p className="text-sm text-gray-500 mt-2">
-                              Submitted by {submission.submitterName} on {submission.submittedDate}
+                              Submitted by {submission.submitterName ?? 'Unknown'} on {submission.submittedDate ?? '—'}
                             </p>
                           </div>
                         </div>
                       </div>
 
                       <div className="flex flex-col space-y-2 min-w-[160px]">
-                        <Button
-                          variant="default"
-                          className="bg-green-600 hover:bg-green-700"
-                          onClick={() => openVerificationDialog(submission)}
-                        >
+                        <Button variant="default" className="bg-green-600 hover:bg-green-700" onClick={() => openVerificationDialog(submission)}>
                           <CheckCircle className="h-4 w-4 mr-2" />
                           Review
                         </Button>
-                        <Button
-                          variant="outline"
-                          onClick={() => window.open(submission.url, '_blank')}
-                        >
+                        <Button variant="outline" onClick={() => window.open(submission.url, '_blank')}>
                           <Eye className="h-4 w-4 mr-2" />
                           View Source
                         </Button>
@@ -361,7 +365,7 @@ export const AdminDashboard: React.FC = () => {
           </div>
 
           <div className="space-y-4">
-            {verifiedSubmissions.map((submission: any) => (
+            {verifiedSubmissions.map((submission) => (
               <Card key={submission.id}>
                 <CardContent className="pt-6">
                   <div className="flex items-start space-x-3">
@@ -387,24 +391,15 @@ export const AdminDashboard: React.FC = () => {
                           {getCountryFlag(submission.country)} {getCountryName(submission.country)}
                         </Badge>
                       </div>
-                      <a
-                        href={submission.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-sm text-blue-600 hover:underline block mb-2"
-                      >
+                      <a href={submission.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline block mb-2">
                         {submission.url}
                       </a>
                       {submission.verifierNotes && (
                         <div className="mt-3 p-3 bg-gray-50 rounded-md">
-                          <p className="text-sm">
-                            <strong>Verification Notes:</strong> {submission.verifierNotes}
-                          </p>
+                          <p className="text-sm"><strong>Verification Notes:</strong> {submission.verifierNotes}</p>
                         </div>
                       )}
-                      <p className="text-sm text-gray-500 mt-2">
-                        Verified on {submission.verifiedDate}
-                      </p>
+                      <p className="text-sm text-gray-500 mt-2">Verified on {submission.verifiedDate ?? '—'}</p>
                     </div>
                   </div>
                 </CardContent>
@@ -414,14 +409,11 @@ export const AdminDashboard: React.FC = () => {
         </TabsContent>
       </Tabs>
 
-      {/* Verification Dialog */}
       <Dialog open={showDialog} onOpenChange={setShowDialog}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle>Verify Reference</DialogTitle>
-            <DialogDescription>
-              Review this submission and mark it as credible or unreliable
-            </DialogDescription>
+            <DialogDescription>Review this submission and mark it as credible or unreliable</DialogDescription>
           </DialogHeader>
 
           {selectedSubmission && (
@@ -434,16 +426,10 @@ export const AdminDashboard: React.FC = () => {
                     {getCategoryIcon(selectedSubmission.category)} {selectedSubmission.category}
                   </Badge>
                   <Badge variant="outline">
-                    {getCountryFlag(selectedSubmission.country)}{' '}
-                    {getCountryName(selectedSubmission.country)}
+                    {getCountryFlag(selectedSubmission.country)} {getCountryName(selectedSubmission.country)}
                   </Badge>
                 </div>
-                <a
-                  href={selectedSubmission.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm text-blue-600 hover:underline"
-                >
+                <a href={selectedSubmission.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline">
                   {selectedSubmission.url}
                 </a>
               </div>
@@ -461,26 +447,15 @@ export const AdminDashboard: React.FC = () => {
           )}
 
           <DialogFooter className="flex-col sm:flex-row gap-2">
-            <Button
-              variant="outline"
-              onClick={() => selectedSubmission && handleReject(selectedSubmission)}
-              className="w-full sm:w-auto"
-            >
-              <XCircle className="h-4 w-4 mr-2" />
-              Reject
+            <Button variant="outline" onClick={() => selectedSubmission && handleReject(selectedSubmission)} className="w-full sm:w-auto">
+              <XCircle className="h-4 w-4 mr-2" /> Reject
             </Button>
-            <Button
-              variant="destructive"
-              onClick={() => selectedSubmission && handleVerify(selectedSubmission, 'approved', 'unreliable')}
-              className="w-full sm:w-auto"
-            >
+
+            <Button variant="destructive" onClick={() => selectedSubmission && handleVerify(selectedSubmission, 'rejected', 'unreliable')} className="w-full sm:w-auto">
               🚫 Mark Unreliable
             </Button>
-            <Button
-              variant="default"
-              className="bg-green-600 hover:bg-green-700 w-full sm:w-auto"
-              onClick={() => selectedSubmission && handleVerify(selectedSubmission, 'approved', 'credible')}
-            >
+
+            <Button variant="default" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" onClick={() => selectedSubmission && handleVerify(selectedSubmission, 'approved', 'credible')}>
               ✅ Mark Credible
             </Button>
           </DialogFooter>
diff --git a/frontend/src/pages/BulkUserManagement.tsx b/frontend/src/pages/BulkUserManagement.tsx
new file mode 100644
index 0000000..1d616c3
--- /dev/null
+++ b/frontend/src/pages/BulkUserManagement.tsx
@@ -0,0 +1,247 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '../components/ui/dialog';
+import { toast } from 'sonner';
+import { useAuth } from '../lib/auth-context';
+import { User as MockUser, mockUsers } from '../lib/mock-data';
+
+type User = MockUser;
+
+export const BulkUserManagement: React.FC = () => {
+  const { user: currentUser } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (currentUser === undefined) return;
+    if (!currentUser) {
+      navigate('/auth');
+      return;
+    }
+    if (currentUser.role !== 'admin') {
+      toast.error('Access denied');
+      navigate('/');
+    }
+  }, [currentUser, navigate]);
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [search, setSearch] = useState<string>('');
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editDialogOpen, setEditDialogOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch('/api/admin/users');
+        if (res.ok) {
+          const data = await res.json();
+          setUsers(Array.isArray(data) ? data : data.users ?? data.data ?? []);
+        } else {
+          setUsers(mockUsers);
+        }
+      } catch {
+        setUsers(mockUsers);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return users;
+    return users.filter(
+      (u) =>
+        u.username.toLowerCase().includes(q) ||
+        u.email.toLowerCase().includes(q) ||
+        (u.role && u.role.toLowerCase().includes(q)) ||
+        (u.country && u.country.toLowerCase().includes(q)),
+    );
+  }, [users, search]);
+
+  const handleAddUser = async () => {
+    const newUser: User = {
+      id: Date.now().toString(),
+      username: `newuser${users.length + 1}`,
+      email: `user${users.length + 1}@example.com`,
+      country: 'US',
+      role: 'contributor',
+      points: 0,
+      badges: [],
+      joinDate: new Date().toISOString().split('T')[0],
+    };
+
+    try {
+      const res = await fetch('/api/admin/users', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newUser),
+      });
+      if (res.ok) {
+        const created: User = await res.json();
+        setUsers((s) => [...s, created]);
+        toast.success('User added');
+        return;
+      }
+    } catch {
+      // fallback to local only
+    }
+
+    setUsers((s) => [...s, newUser]);
+    toast.success('User added (local)');
+  };
+
+  const openEditDialog = (u: User) => {
+    setEditingUser(u);
+    setEditDialogOpen(true);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editingUser) return;
+
+    try {
+      const res = await fetch(`/api/admin/users/${editingUser.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(editingUser),
+      });
+      if (res.ok) {
+        const saved: User = await res.json();
+        setUsers((s) => s.map((x) => (x.id === saved.id ? saved : x)));
+        toast.success('User updated');
+        setEditDialogOpen(false);
+        setEditingUser(null);
+        return;
+      }
+    } catch {
+      // fallback to local update
+    }
+
+    setUsers((s) => s.map((x) => (x.id === editingUser.id ? editingUser : x)));
+    toast.success('User updated (local)');
+    setEditDialogOpen(false);
+    setEditingUser(null);
+  };
+
+  const handleDeleteUser = async (id: string) => {
+    if (!confirm('Delete user?')) return;
+    try {
+      const res = await fetch(`/api/admin/users/${id}`, { method: 'DELETE' });
+      if (res.ok) {
+        setUsers((s) => s.filter((u) => u.id !== id));
+        toast.success('User deleted');
+        return;
+      }
+    } catch {
+      // fallback to local removal
+    }
+
+    setUsers((s) => s.filter((u) => u.id !== id));
+    toast.success('User deleted (local)');
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-12">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Bulk User Management</h1>
+        <div className="flex items-center space-x-2">
+          <Input
+            placeholder="Search users..."
+            value={search}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+            className="mr-2"
+          />
+          <Button onClick={handleAddUser}>Add User</Button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {loading ? (
+          <div>Loading...</div>
+        ) : filtered.length === 0 ? (
+          <div className="text-gray-600">No users found.</div>
+        ) : (
+          filtered.map((u) => (
+            <Card key={u.id}>
+              <CardHeader>
+                <CardTitle>{u.username}</CardTitle>
+              </CardHeader>
+              <CardContent className="flex justify-between items-center">
+                <div>
+                  <p>Email: {u.email}</p>
+                  <p>Role: {u.role}</p>
+                  <p>Points: {u.points}</p>
+                  <p>Country: {u.country}</p>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button variant="outline" onClick={() => openEditDialog(u)}>
+                    Edit
+                  </Button>
+                  <Button variant="destructive" onClick={() => handleDeleteUser(u.id)}>
+                    Delete
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+
+        <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Edit User</DialogTitle>
+              <DialogDescription>Update user information</DialogDescription>
+            </DialogHeader>
+
+            {editingUser && (
+              <div className="space-y-3">
+                <Input
+                  value={editingUser.username}
+                  onChange={(e) => setEditingUser({ ...editingUser, username: e.target.value })}
+                  placeholder="Username"
+                />
+                <Input
+                  value={editingUser.email}
+                  onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
+                  placeholder="Email"
+                />
+                <Input
+                  value={editingUser.country}
+                  onChange={(e) => setEditingUser({ ...editingUser, country: e.target.value })}
+                  placeholder="Country"
+                />
+                <select
+                  value={editingUser.role}
+                  onChange={(e) => setEditingUser({ ...editingUser, role: e.target.value as User['role'] })}
+                  className="w-full px-3 py-2 border rounded"
+                >
+                  <option value="admin">admin</option>
+                  <option value="verifier">verifier</option>
+                  <option value="contributor">contributor</option>
+                </select>
+              </div>
+            )}
+
+            <DialogFooter className="flex justify-end mt-4">
+              <Button variant="default" onClick={handleSaveEdit}>
+                Save
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..5329f02
--- /dev/null
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../lib/auth-context';
+import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { Button } from '../components/ui/button';
+import { toast } from 'sonner';
+
+type Settings = {
+  siteName: string;
+  verificationPoints: number;
+  maxSubmissionsPerDay: number;
+};
+
+const DEFAULT_SETTINGS: Settings = {
+  siteName: 'WikiSourceVerifier',
+  verificationPoints: 10,
+  maxSubmissionsPerDay: 5,
+};
+
+export const SettingsPage: React.FC = () => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [saving, setSaving] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (user === undefined) return;
+    if (!user) {
+      navigate('/auth');
+      return;
+    }
+    if (user.role !== 'admin') {
+      toast.error('Access denied');
+      navigate('/');
+      return;
+    }
+  }, [user, navigate]);
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch('/api/admin/settings');
+        if (res.ok) {
+          const data = await res.json();
+          setSettings({
+            siteName: data.siteName ?? DEFAULT_SETTINGS.siteName,
+            verificationPoints: Number(data.verificationPoints ?? DEFAULT_SETTINGS.verificationPoints),
+            maxSubmissionsPerDay: Number(data.maxSubmissionsPerDay ?? DEFAULT_SETTINGS.maxSubmissionsPerDay),
+          });
+        } else {
+          setSettings(DEFAULT_SETTINGS);
+        }
+      } catch {
+        setSettings(DEFAULT_SETTINGS);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const res = await fetch('/api/admin/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+      if (res.ok) {
+        const saved = await res.json();
+        setSettings({
+          siteName: saved.siteName ?? settings.siteName,
+          verificationPoints: Number(saved.verificationPoints ?? settings.verificationPoints),
+          maxSubmissionsPerDay: Number(saved.maxSubmissionsPerDay ?? settings.maxSubmissionsPerDay),
+        });
+        toast.success('Settings saved');
+      } else {
+        toast.error('Failed to save settings (server)');
+      }
+    } catch {
+      toast.error('Failed to save settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12">
+      <h1 className="text-2xl font-bold mb-6">System Settings</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>General</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div>Loading...</div>
+          ) : (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Site Name</label>
+                <Input
+                  value={settings.siteName}
+                  onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
+                  placeholder="Site name"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Verification Points (points awarded per verification)</label>
+                <Input
+                  type="number"
+                  value={String(settings.verificationPoints)}
+                  onChange={(e) =>
+                    setSettings({ ...settings, verificationPoints: Number(e.target.value || 0) })
+                  }
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Max Submissions Per Day</label>
+                <Input
+                  type="number"
+                  value={String(settings.maxSubmissionsPerDay)}
+                  onChange={(e) =>
+                    setSettings({ ...settings, maxSubmissionsPerDay: Number(e.target.value || 0) })
+                  }
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? 'Saving...' : 'Save Settings'}
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default SettingsPage;
\ No newline at end of file
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index ae27df5..055bb91 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -1,9 +1,14 @@
-
-
 export { LandingPage } from './LandingPage';
 export { AuthPage } from './AuthPage';
 export { SubmissionForm } from './SubmissionForm';
 export { AdminDashboard } from './AdminDashboard';
 export { PublicDirectory } from './PublicDirectory';
 export { UserProfile } from './UserProfile';
-export { CountryPage } from './CountryPage';
+
+/* Your New Admin Pages */
+export { AdminAuditLogs } from './AdminAuditLogs';
+export { BulkUserManagement } from './BulkUserManagement';
+export { SettingsPage } from './SettingsPage';
+
+/* The New Country Page from the update */
+export { CountryPage } from './CountryPage';
\ No newline at end of file
diff --git a/frontend/src/services/auditService.js b/frontend/src/services/auditService.js
new file mode 100644
index 0000000..43b4222
--- /dev/null
+++ b/frontend/src/services/auditService.js
@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const fetchAuditLogs = () => {
+  return axios.get("/api/admin/audit-logs");
+};
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index a0dc701..3b6d234 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "SourceWiki",
+  "name": "Sourcewiki",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/package-lock.json b/package-lock.json
index 1873d08..de20ba3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "SourceWiki",
+  "name": "Sourcewiki",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {