diff --git a/package.json b/package.json
index ee1ef820..f942d1ea 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,8 @@
     "web-vitals": "^4.2.4",
     "workbox-webpack-plugin": "^7.0.0",
     "zod": "^3.25.75",
+    "i18next": "^24.0.0",
+    "react-i18next": "^15.0.0",
     "zustand": "^5.0.10"
   },
   "devDependencies": {
diff --git a/src/app/api/admin/feature-flags/[id]/route.ts b/src/app/api/admin/feature-flags/[id]/route.ts
new file mode 100644
index 00000000..a2a2fb95
--- /dev/null
+++ b/src/app/api/admin/feature-flags/[id]/route.ts
@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  flagStore,
+  createAuditEntry,
+} from '@/lib/feature-flags/store';
+import type { FeatureFlag, TargetingRule } from '@/lib/feature-flags/store';
+import { withRateLimit } from '@/lib/ratelimit';
+
+// ─── GET /api/admin/feature-flags/[id] ───────────────────────────────────────
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'API');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const { id } = await params;
+  const flag = flagStore.get(id);
+  if (!flag) return addHeaders(NextResponse.json({ message: 'Not found' }, { status: 404 }));
+
+  return addHeaders(NextResponse.json({ flag }));
+}
+
+// ─── PUT /api/admin/feature-flags/[id] ───────────────────────────────────────
+// Full or partial update. Also handles toggle via { enabled: boolean }.
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'AUTH');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const { id } = await params;
+  const existing = flagStore.get(id);
+  if (!existing) return addHeaders(NextResponse.json({ message: 'Not found' }, { status: 404 }));
+
+  const body = await req.json().catch(() => null);
+  if (!body) return addHeaders(NextResponse.json({ message: 'Invalid JSON' }, { status: 400 }));
+
+  const actor = req.headers.get('x-admin-user') ?? 'anonymous';
+
+  const updated: FeatureFlag = {
+    ...existing,
+    ...(typeof body.name === 'string' && body.name.trim() ? { name: body.name.trim() } : {}),
+    ...(typeof body.description === 'string' ? { description: body.description.trim() } : {}),
+    ...(typeof body.enabled === 'boolean' ? { enabled: body.enabled } : {}),
+    ...(['all', 'percentage', 'targeting'].includes(body.strategy) ? { strategy: body.strategy } : {}),
+    ...(typeof body.percentage === 'number' ? { percentage: Math.max(0, Math.min(100, body.percentage)) } : {}),
+    ...(Array.isArray(body.rules) ? { rules: body.rules as TargetingRule[] } : {}),
+    ...(Array.isArray(body.tags) ? { tags: body.tags.map(String) } : {}),
+    updatedAt: new Date().toISOString(),
+  };
+
+  flagStore.set(id, updated);
+
+  const action = typeof body.enabled === 'boolean' && body.enabled !== existing.enabled
+    ? 'toggled'
+    : 'updated';
+  createAuditEntry(action, actor, existing, updated);
+
+  return addHeaders(NextResponse.json({ flag: updated }));
+}
+
+// ─── DELETE /api/admin/feature-flags/[id] ────────────────────────────────────
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'AUTH');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const { id } = await params;
+  const existing = flagStore.get(id);
+  if (!existing) return addHeaders(NextResponse.json({ message: 'Not found' }, { status: 404 }));
+
+  const actor = req.headers.get('x-admin-user') ?? 'anonymous';
+  flagStore.delete(id);
+  createAuditEntry('deleted', actor, existing, null);
+
+  return addHeaders(NextResponse.json({ message: 'Deleted' }));
+}
diff --git a/src/app/api/admin/feature-flags/audit/route.ts b/src/app/api/admin/feature-flags/audit/route.ts
new file mode 100644
index 00000000..1614bdf6
--- /dev/null
+++ b/src/app/api/admin/feature-flags/audit/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auditLog } from '@/lib/feature-flags/store';
+import { withRateLimit } from '@/lib/ratelimit';
+
+/**
+ * GET /api/admin/feature-flags/audit?flagId=<id>&limit=50&offset=0
+ */
+export async function GET(req: NextRequest) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'API');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const { searchParams } = new URL(req.url);
+  const flagId  = searchParams.get('flagId');
+  const limit   = Math.min(200, Math.max(1, parseInt(searchParams.get('limit')  ?? '50', 10)));
+  const offset  = Math.max(0, parseInt(searchParams.get('offset') ?? '0', 10));
+
+  const filtered = flagId ? auditLog.filter((e) => e.flagId === flagId) : auditLog;
+  const page = filtered.slice(offset, offset + limit);
+
+  return addHeaders(NextResponse.json({ entries: page, total: filtered.length }));
+}
diff --git a/src/app/api/admin/feature-flags/evaluate/route.ts b/src/app/api/admin/feature-flags/evaluate/route.ts
new file mode 100644
index 00000000..830c789e
--- /dev/null
+++ b/src/app/api/admin/feature-flags/evaluate/route.ts
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { flagStore, evaluateFlag } from '@/lib/feature-flags/store';
+import { withRateLimit } from '@/lib/ratelimit';
+
+/**
+ * GET /api/admin/feature-flags/evaluate?id=<flagId>&userId=<uid>&plan=<plan>…
+ *
+ * All query params beyond `id` are passed as the evaluation context.
+ */
+export async function GET(req: NextRequest) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'API');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const { searchParams } = new URL(req.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return addHeaders(NextResponse.json({ message: 'id param required' }, { status: 400 }));
+  }
+
+  const flag = flagStore.get(id);
+  if (!flag) {
+    return addHeaders(NextResponse.json({ message: 'Not found' }, { status: 404 }));
+  }
+
+  // Build context from remaining search params
+  const context: Record<string, string> = {};
+  searchParams.forEach((value, key) => {
+    if (key !== 'id') context[key] = value;
+  });
+
+  const isEnabled = evaluateFlag(flag, context);
+  return addHeaders(NextResponse.json({ flag, isEnabled, context }));
+}
diff --git a/src/app/api/admin/feature-flags/route.ts b/src/app/api/admin/feature-flags/route.ts
new file mode 100644
index 00000000..f1ee6491
--- /dev/null
+++ b/src/app/api/admin/feature-flags/route.ts
@@ -0,0 +1,61 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  flagStore,
+  auditLog,
+  createAuditEntry,
+  generateId,
+  evaluateFlag,
+} from '@/lib/feature-flags/store';
+import type { FeatureFlag, TargetingRule } from '@/lib/feature-flags/store';
+import { withRateLimit } from '@/lib/ratelimit';
+
+// ─── GET /api/admin/feature-flags ─────────────────────────────────────────────
+// Returns the full flag list sorted by updatedAt desc.
+
+export async function GET(req: NextRequest) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'API');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const flags = Array.from(flagStore.values()).sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+  );
+
+  return addHeaders(NextResponse.json({ flags }));
+}
+
+// ─── POST /api/admin/feature-flags ───────────────────────────────────────────
+// Creates a new flag.
+
+export async function POST(req: NextRequest) {
+  const { addHeaders, rateLimitResponse } = withRateLimit(req, 'AUTH');
+  if (rateLimitResponse) return rateLimitResponse;
+
+  const body = await req.json().catch(() => null);
+  if (!body || typeof body.name !== 'string' || !body.name.trim()) {
+    return addHeaders(NextResponse.json({ message: 'name is required' }, { status: 400 }));
+  }
+
+  const actor = req.headers.get('x-admin-user') ?? 'anonymous';
+  const now = new Date().toISOString();
+
+  const flag: FeatureFlag = {
+    id: generateId('flag'),
+    name: body.name.trim(),
+    description: typeof body.description === 'string' ? body.description.trim() : '',
+    enabled: false,
+    strategy: ['all', 'percentage', 'targeting'].includes(body.strategy)
+      ? body.strategy
+      : 'all',
+    percentage: typeof body.percentage === 'number' ? Math.max(0, Math.min(100, body.percentage)) : 0,
+    rules: Array.isArray(body.rules) ? (body.rules as TargetingRule[]) : [],
+    tags: Array.isArray(body.tags) ? body.tags.map(String) : [],
+    createdAt: now,
+    updatedAt: now,
+    createdBy: actor,
+  };
+
+  flagStore.set(flag.id, flag);
+  createAuditEntry('created', actor, null, flag);
+
+  return addHeaders(NextResponse.json({ flag }, { status: 201 }));
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fbb3b17a..1b9a9701 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,10 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import Script from 'next/script';
 import './globals.css';
 import { RootProviders } from '@/providers/RootProviders';
+import { getHtmlDir } from '@/lib/i18n/config';
+
+// Languages supported at startup — extend as new locale files are added.
+const VALID_LOCALES = new Set(['en', 'es', 'ar', 'fr', 'de', 'he', 'ja', 'zh', 'pt', 'ru', 'it', 'ko']);
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -30,6 +34,12 @@ export default async function RootLayout({
   const themeCookie = cookieStore.get('theme');
   const defaultTheme = themeCookie ? themeCookie.value : 'system';
 
+  // Read persisted locale to server-render the correct lang/dir on <html> —
+  // avoids a hydration flash for RTL users.
+  const rawLocale = cookieStore.get('i18n:language')?.value ?? 'en';
+  const locale = VALID_LOCALES.has(rawLocale) ? rawLocale : 'en';
+  const dir = getHtmlDir(locale);
+
   const themeScript = `
     (function() {
       try {
@@ -49,14 +59,16 @@ export default async function RootLayout({
   `;
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} dir={dir} suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 transition-colors duration-200 dark:bg-gray-950 dark:text-gray-50`}
       >
-        <RootProviders defaultTheme={defaultTheme}>{children}</RootProviders>
+        <RootProviders defaultTheme={defaultTheme} defaultLocale={locale}>
+          {children}
+        </RootProviders>
 
         {/* Non-essential analytics — loaded after page is interactive */}
         {process.env.NEXT_PUBLIC_ANALYTICS_ID && (
diff --git a/src/app/pages/admin/feature-flags/page.tsx b/src/app/pages/admin/feature-flags/page.tsx
new file mode 100644
index 00000000..e0ffee82
--- /dev/null
+++ b/src/app/pages/admin/feature-flags/page.tsx
@@ -0,0 +1,743 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import {
+  Flag,
+  Plus,
+  Pencil,
+  Trash2,
+  ChevronDown,
+  ChevronRight,
+  ToggleLeft,
+  ToggleRight,
+  History,
+  X,
+  Save,
+  AlertTriangle,
+  Search,
+  Tag,
+  Percent,
+  Users,
+  Globe,
+  Check,
+} from 'lucide-react';
+import type { FeatureFlag, TargetingRule, RolloutStrategy, AuditEntry } from '@/lib/feature-flags';
+import { useAllFeatureFlags } from '@/hooks/useFeatureFlag';
+
+// ─── Small shared UI ──────────────────────────────────────────────────────────
+
+function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'green' | 'red' | 'yellow' | 'blue' }) {
+  const colors = {
+    default: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+    green:   'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+    red:     'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+    yellow:  'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+    blue:    'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  };
+  return (
+    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${colors[variant]}`}>
+      {children}
+    </span>
+  );
+}
+
+function StrategyIcon({ strategy }: { strategy: RolloutStrategy }) {
+  if (strategy === 'percentage') return <Percent className="w-3.5 h-3.5" />;
+  if (strategy === 'targeting')  return <Users   className="w-3.5 h-3.5" />;
+  return <Globe className="w-3.5 h-3.5" />;
+}
+
+function Toggle({ checked, onChange, disabled = false }: { checked: boolean; onChange: (v: boolean) => void; disabled?: boolean }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:opacity-40 ${
+        checked ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+      }`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition duration-200 ${
+          checked ? 'translate-x-5' : 'translate-x-0'
+        }`}
+      />
+    </button>
+  );
+}
+
+// ─── Flag form modal ──────────────────────────────────────────────────────────
+
+interface FlagFormProps {
+  initial: Partial<FeatureFlag> | null;
+  onSave: (data: Partial<FeatureFlag>) => Promise<void>;
+  onClose: () => void;
+}
+
+const EMPTY_RULE: TargetingRule = { attribute: '', operator: 'equals', value: '' };
+
+function FlagForm({ initial, onSave, onClose }: FlagFormProps) {
+  const [name, setName]               = useState(initial?.name ?? '');
+  const [description, setDescription] = useState(initial?.description ?? '');
+  const [strategy, setStrategy]       = useState<RolloutStrategy>(initial?.strategy ?? 'all');
+  const [percentage, setPercentage]   = useState(initial?.percentage ?? 0);
+  const [rules, setRules]             = useState<TargetingRule[]>(initial?.rules ?? []);
+  const [tagsInput, setTagsInput]     = useState((initial?.tags ?? []).join(', '));
+  const [saving, setSaving]           = useState(false);
+  const [error, setError]             = useState<string | null>(null);
+
+  const addRule = () => setRules((r) => [...r, { ...EMPTY_RULE }]);
+  const removeRule = (i: number) => setRules((r) => r.filter((_, idx) => idx !== i));
+  const updateRule = (i: number, patch: Partial<TargetingRule>) =>
+    setRules((r) => r.map((rule, idx) => (idx === i ? { ...rule, ...patch } : rule)));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) { setError('Name is required.'); return; }
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave({
+        name: name.trim(),
+        description: description.trim(),
+        strategy,
+        percentage: Number(percentage),
+        rules: strategy === 'targeting' ? rules.filter((r) => r.attribute && r.value) : [],
+        tags: tagsInput.split(',').map((t) => t.trim()).filter(Boolean),
+      });
+    } catch (err) {
+      setError(String(err));
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
+      <div
+        className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-6 border-b dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {initial?.id ? 'Edit Feature Flag' : 'New Feature Flag'}
+          </h2>
+          <button onClick={onClose} className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-5">
+          {error && (
+            <div className="flex items-center gap-2 text-sm text-red-700 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg p-3">
+              <AlertTriangle className="w-4 h-4 shrink-0" /> {error}
+            </div>
+          )}
+
+          {/* Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. New Dashboard"
+              className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+              placeholder="What does this flag control?"
+              className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+            />
+          </div>
+
+          {/* Tags */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Tags <span className="text-xs text-gray-400">(comma separated)</span>
+            </label>
+            <input
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="ui, beta, experiment"
+              className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          {/* Strategy */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Rollout Strategy</label>
+            <div className="grid grid-cols-3 gap-2">
+              {(['all', 'percentage', 'targeting'] as RolloutStrategy[]).map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  onClick={() => setStrategy(s)}
+                  className={`flex flex-col items-center gap-1 p-3 rounded-xl border text-sm font-medium transition-colors ${
+                    strategy === s
+                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                      : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300'
+                  }`}
+                >
+                  <StrategyIcon strategy={s} />
+                  <span className="capitalize">{s === 'all' ? 'Everyone' : s}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Percentage slider */}
+          {strategy === 'percentage' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Percentage rollout: <span className="font-bold text-blue-600">{percentage}%</span>
+              </label>
+              <input
+                type="range"
+                min={0}
+                max={100}
+                step={5}
+                value={percentage}
+                onChange={(e) => setPercentage(Number(e.target.value))}
+                className="w-full accent-blue-600"
+              />
+              <div className="flex justify-between text-xs text-gray-400 mt-1">
+                <span>0%</span><span>50%</span><span>100%</span>
+              </div>
+            </div>
+          )}
+
+          {/* Targeting rules */}
+          {strategy === 'targeting' && (
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Targeting Rules <span className="text-xs text-gray-400">(all must match)</span>
+                </label>
+                <button
+                  type="button"
+                  onClick={addRule}
+                  className="text-xs text-blue-600 hover:underline flex items-center gap-1"
+                >
+                  <Plus className="w-3 h-3" /> Add rule
+                </button>
+              </div>
+              {rules.length === 0 && (
+                <p className="text-xs text-gray-400 italic">No rules — flag will never match. Add at least one rule.</p>
+              )}
+              {rules.map((rule, i) => (
+                <div key={i} className="flex gap-2 items-center mb-2">
+                  <input
+                    value={rule.attribute}
+                    onChange={(e) => updateRule(i, { attribute: e.target.value })}
+                    placeholder="attribute"
+                    className="flex-1 px-2 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-xs text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  />
+                  <select
+                    value={rule.operator}
+                    onChange={(e) => updateRule(i, { operator: e.target.value as TargetingRule['operator'] })}
+                    className="px-2 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-xs text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  >
+                    <option value="equals">equals</option>
+                    <option value="contains">contains</option>
+                    <option value="startsWith">starts with</option>
+                    <option value="in">in (csv)</option>
+                  </select>
+                  <input
+                    value={rule.value}
+                    onChange={(e) => updateRule(i, { value: e.target.value })}
+                    placeholder="value"
+                    className="flex-1 px-2 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-xs text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  />
+                  <button type="button" onClick={() => removeRule(i)} className="p-1 text-gray-400 hover:text-red-500 transition-colors">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+            >
+              <Save className="w-4 h-4" />
+              {saving ? 'Saving…' : 'Save Flag'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ─── Audit log panel ──────────────────────────────────────────────────────────
+
+function AuditPanel({ flagId, onClose }: { flagId?: string; onClose: () => void }) {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [total, setTotal]     = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ limit: '50' });
+    if (flagId) params.set('flagId', flagId);
+    const res = await fetch(`/api/admin/feature-flags/audit?${params}`);
+    const data = await res.json() as { entries: AuditEntry[]; total: number };
+    setEntries(data.entries);
+    setTotal(data.total);
+    setLoading(false);
+  }, [flagId]);
+
+  useState(() => { void load(); });
+
+  const ACTION_COLORS: Record<AuditEntry['action'], string> = {
+    created: 'green',
+    updated: 'blue',
+    toggled: 'yellow',
+    deleted: 'red',
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
+      <div
+        className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-6 border-b dark:border-gray-700">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+              <History className="w-5 h-5 text-blue-500" />
+              Audit Log
+            </h2>
+            <p className="text-xs text-gray-400 mt-0.5">{total} total entries</p>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="overflow-y-auto flex-1 p-4 space-y-2">
+          {loading && (
+            <div className="text-center py-12 text-gray-400 text-sm">Loading…</div>
+          )}
+          {!loading && entries.length === 0 && (
+            <div className="text-center py-12 text-gray-400 text-sm">No audit entries yet.</div>
+          )}
+          {entries.map((entry) => (
+            <div key={entry.id} className="flex items-start gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800">
+              <Badge variant={ACTION_COLORS[entry.action] as 'green' | 'red' | 'yellow' | 'blue'}>
+                {entry.action}
+              </Badge>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{entry.flagName}</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  by <span className="font-medium">{entry.actor}</span>
+                </p>
+              </div>
+              <span className="text-xs text-gray-400 whitespace-nowrap">
+                {new Date(entry.timestamp).toLocaleString()}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Flag row ─────────────────────────────────────────────────────────────────
+
+function FlagRow({
+  flag,
+  onEdit,
+  onToggle,
+  onDelete,
+  onAudit,
+}: {
+  flag: FeatureFlag;
+  onEdit: () => void;
+  onToggle: () => void;
+  onDelete: () => void;
+  onAudit: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [toggling, setToggling] = useState(false);
+
+  const handleToggle = async () => {
+    setToggling(true);
+    await onToggle();
+    setToggling(false);
+  };
+
+  const strategyLabel: Record<RolloutStrategy, string> = {
+    all: 'Everyone',
+    percentage: `${flag.percentage}% of users`,
+    targeting: `${flag.rules.length} rule${flag.rules.length !== 1 ? 's' : ''}`,
+  };
+
+  return (
+    <div className={`rounded-xl border transition-colors ${
+      flag.enabled
+        ? 'border-green-200 dark:border-green-800 bg-green-50/30 dark:bg-green-900/10'
+        : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
+    }`}>
+      {/* Main row */}
+      <div className="flex items-center gap-4 p-4">
+        {/* Expand chevron */}
+        <button
+          onClick={() => setExpanded((e) => !e)}
+          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          aria-label={expanded ? 'Collapse' : 'Expand'}
+        >
+          {expanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+        </button>
+
+        {/* Toggle */}
+        <Toggle checked={flag.enabled} onChange={handleToggle} disabled={toggling} />
+
+        {/* Name + description */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-medium text-gray-900 dark:text-white text-sm">{flag.name}</span>
+            <Badge variant={flag.enabled ? 'green' : 'default'}>
+              {flag.enabled ? <Check className="w-3 h-3" /> : null}
+              {flag.enabled ? 'On' : 'Off'}
+            </Badge>
+            <Badge>
+              <StrategyIcon strategy={flag.strategy} />
+              {strategyLabel[flag.strategy]}
+            </Badge>
+            {flag.tags.map((tag) => (
+              <Badge key={tag} variant="blue"><Tag className="w-3 h-3" />{tag}</Badge>
+            ))}
+          </div>
+          {flag.description && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">{flag.description}</p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 shrink-0">
+          <button
+            onClick={onAudit}
+            title="View audit log"
+            className="p-2 text-gray-400 hover:text-blue-500 transition-colors rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20"
+          >
+            <History className="w-4 h-4" />
+          </button>
+          <button
+            onClick={onEdit}
+            title="Edit"
+            className="p-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <Pencil className="w-4 h-4" />
+          </button>
+          <button
+            onClick={onDelete}
+            title="Delete"
+            className="p-2 text-gray-400 hover:text-red-500 transition-colors rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Expanded details */}
+      {expanded && (
+        <div className="px-4 pb-4 border-t dark:border-gray-700 pt-4 space-y-3">
+          <div className="grid grid-cols-2 gap-4 text-xs text-gray-500 dark:text-gray-400">
+            <div><span className="font-medium">ID:</span> <code className="bg-gray-100 dark:bg-gray-700 px-1 rounded">{flag.id}</code></div>
+            <div><span className="font-medium">Created by:</span> {flag.createdBy}</div>
+            <div><span className="font-medium">Created:</span> {new Date(flag.createdAt).toLocaleString()}</div>
+            <div><span className="font-medium">Updated:</span> {new Date(flag.updatedAt).toLocaleString()}</div>
+          </div>
+
+          {flag.strategy === 'targeting' && flag.rules.length > 0 && (
+            <div>
+              <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Targeting Rules</p>
+              <div className="space-y-1">
+                {flag.rules.map((rule, i) => (
+                  <div key={i} className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 px-3 py-1.5 rounded-lg">
+                    <code className="text-blue-600 dark:text-blue-400">{rule.attribute}</code>
+                    <span className="text-gray-400">{rule.operator}</span>
+                    <code className="text-green-600 dark:text-green-400">{rule.value}</code>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+
+export default function FeatureFlagsPage() {
+  const { flags, isLoading, error, reload } = useAllFeatureFlags();
+
+  const [search, setSearch]           = useState('');
+  const [filterTag, setFilterTag]     = useState('');
+  const [filterEnabled, setFilterEnabled] = useState<'all' | 'on' | 'off'>('all');
+
+  const [editingFlag, setEditingFlag] = useState<Partial<FeatureFlag> | null | false>(false);
+  const [auditFlagId, setAuditFlagId] = useState<string | null>(null);
+  const [showAudit, setShowAudit]     = useState(false);
+
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // All unique tags for filter chips
+  const allTags = [...new Set(flags.flatMap((f) => f.tags))].sort();
+
+  const filtered = flags.filter((f) => {
+    if (search && !f.name.toLowerCase().includes(search.toLowerCase()) && !f.description.toLowerCase().includes(search.toLowerCase())) return false;
+    if (filterTag && !f.tags.includes(filterTag)) return false;
+    if (filterEnabled === 'on' && !f.enabled) return false;
+    if (filterEnabled === 'off' && f.enabled) return false;
+    return true;
+  });
+
+  const doToggle = async (flag: FeatureFlag) => {
+    setActionError(null);
+    const res = await fetch(`/api/admin/feature-flags/${flag.id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json', 'x-admin-user': 'admin' },
+      body: JSON.stringify({ enabled: !flag.enabled }),
+    });
+    if (!res.ok) { setActionError(`Toggle failed: HTTP ${res.status}`); return; }
+    await reload();
+  };
+
+  const doDelete = async (id: string) => {
+    setActionError(null);
+    const res = await fetch(`/api/admin/feature-flags/${id}`, {
+      method: 'DELETE',
+      headers: { 'x-admin-user': 'admin' },
+    });
+    if (!res.ok) { setActionError(`Delete failed: HTTP ${res.status}`); return; }
+    setDeleteConfirmId(null);
+    await reload();
+  };
+
+  const doSave = async (data: Partial<FeatureFlag>) => {
+    const isNew = !editingFlag || !('id' in editingFlag);
+    const url = isNew ? '/api/admin/feature-flags' : `/api/admin/feature-flags/${(editingFlag as FeatureFlag).id}`;
+    const method = isNew ? 'POST' : 'PUT';
+
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json', 'x-admin-user': 'admin' },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    setEditingFlag(false);
+    await reload();
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-900 border-b dark:border-gray-800 sticky top-0 z-30">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-2.5">
+            <Flag className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+            <h1 className="text-xl font-semibold text-gray-900 dark:text-white">Feature Flags</h1>
+            <Badge variant="blue">{flags.length}</Badge>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => { setShowAudit(true); setAuditFlagId(null); }}
+              className="flex items-center gap-2 px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >
+              <History className="w-4 h-4" />
+              <span className="hidden sm:inline">Audit Log</span>
+            </button>
+            <button
+              onClick={() => setEditingFlag({})}
+              className="flex items-center gap-2 px-3 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+              <span>New Flag</span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-8">
+        {/* Error banner */}
+        {(error || actionError) && (
+          <div className="mb-4 flex items-center gap-2 text-sm text-red-700 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-xl p-4">
+            <AlertTriangle className="w-4 h-4 shrink-0" />
+            {error ?? actionError}
+          </div>
+        )}
+
+        {/* Filters */}
+        <div className="mb-6 flex flex-wrap gap-3">
+          {/* Search */}
+          <div className="relative flex-1 min-w-56">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search flags…"
+              className="w-full pl-9 pr-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          {/* Enabled filter */}
+          <div className="flex rounded-xl border border-gray-300 dark:border-gray-600 overflow-hidden text-sm">
+            {(['all', 'on', 'off'] as const).map((v) => (
+              <button
+                key={v}
+                onClick={() => setFilterEnabled(v)}
+                className={`px-3 py-2 capitalize transition-colors ${
+                  filterEnabled === v
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+              >
+                {v === 'all' ? 'All' : v === 'on' ? '✓ On' : '✗ Off'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Tag chips */}
+        {allTags.length > 0 && (
+          <div className="mb-6 flex flex-wrap gap-2">
+            {allTags.map((tag) => (
+              <button
+                key={tag}
+                onClick={() => setFilterTag(filterTag === tag ? '' : tag)}
+                className={`flex items-center gap-1 text-xs px-3 py-1 rounded-full border transition-colors ${
+                  filterTag === tag
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                    : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 bg-white dark:bg-gray-800'
+                }`}
+              >
+                <Tag className="w-3 h-3" />
+                {tag}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Stats row */}
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          {[
+            { label: 'Total', value: flags.length, icon: <Flag className="w-4 h-4 text-gray-500" /> },
+            { label: 'Enabled', value: flags.filter((f) => f.enabled).length, icon: <ToggleRight className="w-4 h-4 text-green-500" /> },
+            { label: 'Disabled', value: flags.filter((f) => !f.enabled).length, icon: <ToggleLeft className="w-4 h-4 text-gray-400" /> },
+          ].map(({ label, value, icon }) => (
+            <div key={label} className="bg-white dark:bg-gray-800 rounded-xl border dark:border-gray-700 p-4 flex items-center gap-3">
+              {icon}
+              <div>
+                <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Flags list */}
+        {isLoading ? (
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-20 rounded-xl bg-gray-200 dark:bg-gray-700 animate-pulse" />
+            ))}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="text-center py-20">
+            <Flag className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {flags.length === 0 ? 'No flags yet. Create your first one.' : 'No flags match your filters.'}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filtered.map((flag) => (
+              <FlagRow
+                key={flag.id}
+                flag={flag}
+                onEdit={() => setEditingFlag(flag)}
+                onToggle={() => doToggle(flag)}
+                onDelete={() => setDeleteConfirmId(flag.id)}
+                onAudit={() => { setAuditFlagId(flag.id); setShowAudit(true); }}
+              />
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* Modals */}
+      {editingFlag !== false && (
+        <FlagForm
+          initial={editingFlag}
+          onSave={doSave}
+          onClose={() => setEditingFlag(false)}
+        />
+      )}
+
+      {showAudit && (
+        <AuditPanel
+          flagId={auditFlagId ?? undefined}
+          onClose={() => { setShowAudit(false); setAuditFlagId(null); }}
+        />
+      )}
+
+      {/* Delete confirmation */}
+      {deleteConfirmId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+          <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 max-w-sm w-full">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+                <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-900 dark:text-white">Delete flag?</h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">This action cannot be undone.</p>
+              </div>
+            </div>
+            <div className="flex gap-3 justify-end">
+              <button
+                onClick={() => setDeleteConfirmId(null)}
+                className="px-4 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => doDelete(deleteConfirmId)}
+                className="px-4 py-2 text-sm rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/BulkImporter.tsx b/src/components/BulkImporter.tsx
new file mode 100644
index 00000000..ff266e3e
--- /dev/null
+++ b/src/components/BulkImporter.tsx
@@ -0,0 +1,705 @@
+'use client';
+
+/**
+ * BulkImporter
+ *
+ * Full-featured CSV / Excel bulk-import UI.
+ *
+ * Stages:
+ *   1. File drop / select
+ *   2. Column-mapping (source header → target field)
+ *   3. Preview (first N rows, validity colour-coded)
+ *   4. Validation progress bar
+ *   5. Results summary + per-row error table
+ *   6. Rollback on failure
+ *
+ * Props:
+ *   - schema        ImportSchema<T>          field definitions & validators
+ *   - onImport      (records: T[]) => ...    called with valid rows after confirmation
+ *   - targetFields  Array<{field, label}>    friendly labels for the mapping step
+ *   - maxPreviewRows                         how many rows to show in the preview (default 10)
+ *   - className                              extra Tailwind classes for the outer wrapper
+ */
+
+import React, {
+  useCallback,
+  useId,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import { Upload, AlertCircle, CheckCircle2, XCircle, RefreshCw, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  parseCsv,
+  parseXlsxAsync,
+  runValidationPipeline,
+  createRollbackManager,
+} from '@/lib/import';
+import type {
+  RawRow,
+  ImportResult,
+  ImportRecord,
+  ColumnMapping,
+  ImportSchema,
+  RollbackManager,
+} from '@/lib/import';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface TargetFieldDef {
+  field: string;
+  label: string;
+}
+
+export interface BulkImporterProps<T> {
+  schema: ImportSchema<T>;
+  onImport: (records: T[], rollback: RollbackManager) => Promise<void> | void;
+  targetFields: TargetFieldDef[];
+  maxPreviewRows?: number;
+  className?: string;
+}
+
+type Stage = 'idle' | 'mapping' | 'preview' | 'validating' | 'results' | 'done';
+
+interface State {
+  stage: Stage;
+  fileName: string;
+  rawRows: RawRow[];
+  headers: string[];
+  mappings: ColumnMapping[];
+  progress: { processed: number; total: number };
+  result: ImportResult | null;
+  importedCount: number;
+  error: string | null;
+  rolledBack: boolean;
+  expandedRow: number | null;
+}
+
+type Action =
+  | { type: 'FILE_LOADED'; fileName: string; rawRows: RawRow[]; headers: string[] }
+  | { type: 'SET_MAPPING'; sourceHeader: string; targetField: string }
+  | { type: 'START_VALIDATION' }
+  | { type: 'PROGRESS'; processed: number; total: number }
+  | { type: 'VALIDATION_DONE'; result: ImportResult }
+  | { type: 'IMPORT_SUCCESS'; count: number }
+  | { type: 'ROLLBACK_DONE' }
+  | { type: 'RESET' }
+  | { type: 'SET_ERROR'; error: string }
+  | { type: 'TOGGLE_ROW'; rowIndex: number };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'FILE_LOADED':
+      return {
+        ...state,
+        stage: 'mapping',
+        fileName: action.fileName,
+        rawRows: action.rawRows,
+        headers: action.headers,
+        // Pre-fill exact matches
+        mappings: action.headers.map((h) => ({ sourceHeader: h, targetField: h })),
+        result: null,
+        error: null,
+        rolledBack: false,
+      };
+    case 'SET_MAPPING':
+      return {
+        ...state,
+        mappings: state.mappings.map((m) =>
+          m.sourceHeader === action.sourceHeader
+            ? { ...m, targetField: action.targetField }
+            : m,
+        ),
+      };
+    case 'START_VALIDATION':
+      return { ...state, stage: 'validating', progress: { processed: 0, total: state.rawRows.length } };
+    case 'PROGRESS':
+      return { ...state, progress: { processed: action.processed, total: action.total } };
+    case 'VALIDATION_DONE':
+      return { ...state, stage: 'results', result: action.result as ImportResult };
+    case 'IMPORT_SUCCESS':
+      return { ...state, stage: 'done', importedCount: action.count };
+    case 'ROLLBACK_DONE':
+      return { ...state, rolledBack: true };
+    case 'RESET':
+      return initialState;
+    case 'SET_ERROR':
+      return { ...state, error: action.error, stage: 'idle' };
+    case 'TOGGLE_ROW':
+      return {
+        ...state,
+        expandedRow: state.expandedRow === action.rowIndex ? null : action.rowIndex,
+      };
+    default:
+      return state;
+  }
+}
+
+const initialState: State = {
+  stage: 'idle',
+  fileName: '',
+  rawRows: [],
+  headers: [],
+  mappings: [],
+  progress: { processed: 0, total: 0 },
+  result: null,
+  importedCount: 0,
+  error: null,
+  rolledBack: false,
+  expandedRow: null,
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BulkImporter<T>({
+  schema,
+  onImport,
+  targetFields,
+  maxPreviewRows = 10,
+  className = '',
+}: BulkImporterProps<T>) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputId = useId();
+  const abortRef = useRef<AbortController | null>(null);
+  const rollbackRef = useRef<RollbackManager>(createRollbackManager());
+
+  // ── File ingestion ──────────────────────────────────────────────────────────
+
+  const processFile = useCallback(async (file: File) => {
+    const name = file.name.toLowerCase();
+    const isExcel = name.endsWith('.xlsx') || name.endsWith('.xls');
+    const isCsv = name.endsWith('.csv');
+
+    if (!isExcel && !isCsv) {
+      dispatch({ type: 'SET_ERROR', error: 'Unsupported file type. Please upload a CSV or XLSX file.' });
+      return;
+    }
+
+    try {
+      let rows: RawRow[] | null = null;
+
+      if (isCsv) {
+        const text = await file.text();
+        rows = parseCsv(text);
+      } else {
+        const buffer = await file.arrayBuffer();
+        rows = await parseXlsxAsync(buffer);
+      }
+
+      if (!rows || rows.length === 0) {
+        dispatch({ type: 'SET_ERROR', error: 'The file is empty or could not be parsed.' });
+        return;
+      }
+
+      const headers = Object.keys(rows[0]);
+      dispatch({ type: 'FILE_LOADED', fileName: file.name, rawRows: rows, headers });
+    } catch (e: unknown) {
+      dispatch({
+        type: 'SET_ERROR',
+        error: `Failed to read file: ${e instanceof Error ? e.message : String(e)}`,
+      });
+    }
+  }, []);
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) void processFile(file);
+    },
+    [processFile],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) void processFile(file);
+    },
+    [processFile],
+  );
+
+  // ── Validation ──────────────────────────────────────────────────────────────
+
+  const runValidation = useCallback(async () => {
+    // START_VALIDATION is already dispatched by the button click; do not repeat it.
+    abortRef.current = new AbortController();
+
+    const result = await runValidationPipeline<T>(
+      state.rawRows,
+      schema,
+      state.mappings,
+      (processed, total) => dispatch({ type: 'PROGRESS', processed, total }),
+      100,
+      abortRef.current.signal,
+    );
+
+    dispatch({ type: 'VALIDATION_DONE', result: result as ImportResult });
+  }, [state.rawRows, schema, state.mappings]);
+
+  // ── Import confirmed ────────────────────────────────────────────────────────
+
+  const handleConfirmImport = useCallback(async () => {
+    if (!state.result) return;
+    const validRecords = state.result.records
+      .filter((r) => r.valid)
+      .map((r) => r.data as T);
+
+    rollbackRef.current.clear();
+
+    try {
+      await onImport(validRecords, rollbackRef.current);
+      dispatch({ type: 'IMPORT_SUCCESS', count: validRecords.length });
+    } catch (e: unknown) {
+      const rbResult = await rollbackRef.current.rollback();
+      dispatch({ type: 'ROLLBACK_DONE' });
+      dispatch({
+        type: 'SET_ERROR',
+        error: `Import failed${rbResult.rolledBack > 0 ? ` — rolled back ${rbResult.rolledBack} record(s)` : ''}: ${e instanceof Error ? e.message : String(e)}`,
+      });
+    }
+  }, [state.result, onImport]);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current?.abort();
+    dispatch({ type: 'RESET' });
+  }, []);
+
+  // ── Helpers ─────────────────────────────────────────────────────────────────
+
+  const previewRows = state.rawRows.slice(0, maxPreviewRows);
+
+  const progressPct =
+    state.progress.total > 0
+      ? Math.round((state.progress.processed / state.progress.total) * 100)
+      : 0;
+
+  // ── Render ──────────────────────────────────────────────────────────────────
+
+  return (
+    <div className={`w-full space-y-6 ${className}`}>
+
+      {/* ── Error banner ── */}
+      {state.error && (
+        <div
+          role="alert"
+          className="flex items-start gap-3 rounded-lg border border-red-300 bg-red-50 p-4 text-red-800 dark:border-red-700 dark:bg-red-950 dark:text-red-200"
+        >
+          <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
+          <span className="text-sm">{state.error}</span>
+        </div>
+      )}
+
+      {/* ─────────────────────────────────────────────────────────────────────
+          STAGE: idle — file drop zone
+      ──────────────────────────────────────────────────────────────────────── */}
+      {state.stage === 'idle' && (
+        <label
+          htmlFor={fileInputId}
+          onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+          onDragLeave={() => setIsDragging(false)}
+          onDrop={handleDrop}
+          className={`flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-12 text-center transition-colors
+            ${isDragging
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
+              : 'border-gray-300 bg-gray-50 hover:border-blue-400 hover:bg-blue-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-blue-500'
+            }`}
+        >
+          <Upload
+            className={`mb-3 h-10 w-10 ${isDragging ? 'text-blue-500' : 'text-gray-400'}`}
+            aria-hidden="true"
+          />
+          <p className="text-base font-medium text-gray-700 dark:text-gray-200">
+            Drag &amp; drop or <span className="text-blue-600 dark:text-blue-400">browse</span>
+          </p>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Supports CSV and XLSX files
+          </p>
+          <input
+            id={fileInputId}
+            type="file"
+            accept=".csv,.xlsx,.xls"
+            className="sr-only"
+            onChange={handleFileChange}
+          />
+        </label>
+      )}
+
+      {/* ─────────────────────────────────────────────────────────────────────
+          STAGE: mapping
+      ──────────────────────────────────────────────────────────────────────── */}
+      {state.stage === 'mapping' && (
+        <section aria-label="Column mapping">
+          <Header title="Map columns" subtitle={`File: ${state.fileName} — ${state.rawRows.length} rows detected`} />
+
+          <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+            <table className="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-800">
+                <tr>
+                  <Th>Source column</Th>
+                  <Th>Maps to</Th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 bg-white dark:divide-gray-800 dark:bg-gray-900">
+                {state.headers.map((header) => {
+                  const mapping = state.mappings.find((m) => m.sourceHeader === header);
+                  return (
+                    <tr key={header}>
+                      <Td>
+                        <span className="font-mono text-gray-800 dark:text-gray-200">{header}</span>
+                      </Td>
+                      <Td>
+                        <select
+                          aria-label={`Map ${header} to target field`}
+                          value={mapping?.targetField ?? ''}
+                          onChange={(e) =>
+                            dispatch({
+                              type: 'SET_MAPPING',
+                              sourceHeader: header,
+                              targetField: e.target.value,
+                            })
+                          }
+                          className="w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                        >
+                          <option value="">— skip —</option>
+                          {targetFields.map((tf) => (
+                            <option key={tf.field} value={tf.field}>
+                              {tf.label}
+                            </option>
+                          ))}
+                        </select>
+                      </Td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Preview */}
+          <details className="mt-4">
+            <summary className="cursor-pointer text-sm font-medium text-blue-600 dark:text-blue-400">
+              Preview first {Math.min(maxPreviewRows, state.rawRows.length)} rows
+            </summary>
+            <PreviewTable headers={state.headers} rows={previewRows} className="mt-2" />
+          </details>
+
+          <ActionRow>
+            <CancelButton onClick={handleCancel} />
+            <PrimaryButton onClick={() => dispatch({ type: 'START_VALIDATION' }) /* immediately go to validating */ } disabled={false}>
+              Validate &amp; continue
+            </PrimaryButton>
+          </ActionRow>
+        </section>
+      )}
+
+      {/* ─────────────────────────────────────────────────────────────────────
+          STAGE: validating
+      ──────────────────────────────────────────────────────────────────────── */}
+      {state.stage === 'validating' && (
+        <section aria-label="Validation progress" aria-live="polite">
+          <Header title="Validating…" subtitle={`${state.progress.processed} / ${state.progress.total} rows processed`} />
+
+          <div className="mt-4 h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+            <div
+              className="h-full rounded-full bg-blue-500 transition-all duration-150"
+              style={{ width: `${progressPct}%` }}
+              role="progressbar"
+              aria-valuenow={progressPct}
+              aria-valuemin={0}
+              aria-valuemax={100}
+            />
+          </div>
+          <p className="mt-2 text-right text-sm text-gray-500 dark:text-gray-400">{progressPct}%</p>
+
+          {/* Kick off validation after this render */}
+          <RunOnce fn={runValidation} onError={(e) => dispatch({ type: 'SET_ERROR', error: e })} />
+
+          <ActionRow>
+            <CancelButton onClick={handleCancel} label="Abort" />
+          </ActionRow>
+        </section>
+      )}
+
+      {/* ─────────────────────────────────────────────────────────────────────
+          STAGE: results
+      ──────────────────────────────────────────────────────────────────────── */}
+      {state.stage === 'results' && state.result && (
+        <section aria-label="Validation results">
+          {/* Summary cards */}
+          <div className="grid grid-cols-3 gap-4">
+            <SummaryCard
+              label="Total rows"
+              value={state.result.total}
+              color="gray"
+            />
+            <SummaryCard
+              label="Valid"
+              value={state.result.succeeded}
+              color="green"
+              icon={<CheckCircle2 className="h-5 w-5" aria-hidden="true" />}
+            />
+            <SummaryCard
+              label="Failed"
+              value={state.result.failed}
+              color="red"
+              icon={<XCircle className="h-5 w-5" aria-hidden="true" />}
+            />
+          </div>
+
+          {/* Error table */}
+          {state.result.failed > 0 && (
+            <ErrorTable
+              records={state.result.records.filter((r) => !r.valid)}
+              expandedRow={state.expandedRow}
+              onToggleRow={(idx) => dispatch({ type: 'TOGGLE_ROW', rowIndex: idx })}
+            />
+          )}
+
+          {state.rolledBack && (
+            <div
+              role="status"
+              className="flex items-center gap-2 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-200"
+            >
+              <RefreshCw className="h-4 w-4 shrink-0" aria-hidden="true" />
+              Partial writes were rolled back successfully.
+            </div>
+          )}
+
+          <ActionRow>
+            <CancelButton onClick={handleCancel} label="Start over" />
+            {state.result.succeeded > 0 && (
+              <PrimaryButton onClick={() => void handleConfirmImport()} disabled={false}>
+                Import {state.result.succeeded} valid row{state.result.succeeded !== 1 ? 's' : ''}
+              </PrimaryButton>
+            )}
+          </ActionRow>
+        </section>
+      )}
+
+      {/* ─────────────────────────────────────────────────────────────────────
+          STAGE: done — import succeeded
+      ──────────────────────────────────────────────────────────────────────── */}
+      {state.stage === 'done' && (
+        <section
+          aria-label="Import complete"
+          className="flex flex-col items-center gap-4 rounded-xl border border-green-200 bg-green-50 p-10 text-center dark:border-green-800 dark:bg-green-950"
+        >
+          <CheckCircle2 className="h-12 w-12 text-green-500" aria-hidden="true" />
+          <div>
+            <p className="text-lg font-semibold text-green-800 dark:text-green-200">
+              Import successful
+            </p>
+            <p className="mt-1 text-sm text-green-700 dark:text-green-300">
+              {state.importedCount} record{state.importedCount !== 1 ? 's' : ''} imported successfully.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="mt-2 rounded-md border border-green-300 bg-white px-4 py-2 text-sm font-medium text-green-700 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500 dark:border-green-700 dark:bg-green-900 dark:text-green-200 dark:hover:bg-green-800"
+          >
+            Import another file
+          </button>
+        </section>
+      )}
+    </div>
+  );
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function Header({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div className="mb-4">
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-50">{title}</h2>
+      {subtitle && <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>}
+    </div>
+  );
+}
+
+function Th({ children }: { children: React.ReactNode }) {
+  return (
+    <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+      {children}
+    </th>
+  );
+}
+
+function Td({ children }: { children: React.ReactNode }) {
+  return <td className="px-4 py-2 text-gray-700 dark:text-gray-300">{children}</td>;
+}
+
+function ActionRow({ children }: { children: React.ReactNode }) {
+  return <div className="mt-6 flex items-center justify-end gap-3">{children}</div>;
+}
+
+function CancelButton({ onClick, label = 'Cancel' }: { onClick: () => void; label?: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:text-gray-400 dark:hover:text-gray-100"
+    >
+      {label}
+    </button>
+  );
+}
+
+function PrimaryButton({
+  onClick,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  disabled: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+    >
+      {children}
+    </button>
+  );
+}
+
+function PreviewTable({
+  headers,
+  rows,
+  className = '',
+}: {
+  headers: string[];
+  rows: RawRow[];
+  className?: string;
+}) {
+  return (
+    <div className={`overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 ${className}`}>
+      <table className="min-w-full divide-y divide-gray-200 text-xs dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800">
+          <tr>
+            {headers.map((h) => (
+              <th key={h} className="px-3 py-1.5 text-left font-semibold text-gray-500 dark:text-gray-400">
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 bg-white dark:divide-gray-800 dark:bg-gray-900">
+          {rows.map((row, i) => (
+            <tr key={i}>
+              {headers.map((h) => (
+                <td key={h} className="max-w-xs truncate px-3 py-1.5 text-gray-700 dark:text-gray-300">
+                  {row[h]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function SummaryCard({
+  label,
+  value,
+  color,
+  icon,
+}: {
+  label: string;
+  value: number;
+  color: 'gray' | 'green' | 'red';
+  icon?: React.ReactNode;
+}) {
+  const colorMap = {
+    gray: 'border-gray-200 bg-gray-50 text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100',
+    green: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
+    red: 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200',
+  };
+  return (
+    <div className={`flex items-center gap-3 rounded-lg border p-4 ${colorMap[color]}`}>
+      {icon}
+      <div>
+        <p className="text-2xl font-bold">{value}</p>
+        <p className="text-xs font-medium opacity-75">{label}</p>
+      </div>
+    </div>
+  );
+}
+
+function ErrorTable({
+  records,
+  expandedRow,
+  onToggleRow,
+}: {
+  records: ImportRecord[];
+  expandedRow: number | null;
+  onToggleRow: (rowIndex: number) => void;
+}) {
+  return (
+    <div className="mt-4 overflow-hidden rounded-lg border border-red-200 dark:border-red-800">
+      <div className="border-b border-red-200 bg-red-50 px-4 py-2 text-sm font-semibold text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+        Rows with errors ({records.length})
+      </div>
+      <ul className="max-h-72 divide-y divide-red-100 overflow-y-auto dark:divide-red-900" role="list">
+        {records.map((record) => {
+          const isExpanded = expandedRow === record.rowIndex;
+          const errorKeys = Object.keys(record.errors);
+          return (
+            <li key={record.rowIndex} className="bg-white dark:bg-gray-900">
+              <button
+                type="button"
+                onClick={() => onToggleRow(record.rowIndex)}
+                aria-expanded={isExpanded}
+                className="flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-red-50 focus:outline-none focus:ring-inset focus:ring-1 focus:ring-red-400 dark:hover:bg-red-950"
+              >
+                <span className="font-medium text-gray-800 dark:text-gray-100">
+                  Row {record.rowIndex}
+                  <span className="ml-2 text-xs font-normal text-red-600 dark:text-red-400">
+                    {errorKeys.length} error{errorKeys.length !== 1 ? 's' : ''}
+                  </span>
+                </span>
+                {isExpanded ? (
+                  <ChevronUp className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                )}
+              </button>
+              {isExpanded && (
+                <dl className="border-t border-red-100 bg-red-50 px-4 py-3 dark:border-red-900 dark:bg-red-950">
+                  {errorKeys.map((key) => (
+                    <div key={key} className="mb-1 flex gap-2 text-xs">
+                      <dt className="font-semibold text-red-700 dark:text-red-300">{key}:</dt>
+                      <dd className="text-red-600 dark:text-red-400">{record.errors[key]}</dd>
+                    </div>
+                  ))}
+                </dl>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Utility: run an async `fn` exactly once after the first render.
+ * Errors are forwarded to the `onError` callback rather than silently dropped.
+ */
+function RunOnce({ fn, onError }: { fn: () => Promise<void>; onError: (msg: string) => void }) {
+  const ran = useRef(false);
+  if (!ran.current) {
+    ran.current = true;
+    // Schedule asynchronously so the current state update completes first
+    Promise.resolve()
+      .then(fn)
+      .catch((e: unknown) => onError(e instanceof Error ? e.message : String(e)));
+  }
+  return null;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 4f8c8f86..920aa254 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,3 +11,5 @@ export * from './shared/EnvGuard';
 export * from './errors/ErrorBoundarySystem';
 export { QRCodeComponent } from './QRCode';
 export { ShareModal } from './ShareModal';
+export { BulkImporter } from './BulkImporter';
+export type { BulkImporterProps, TargetFieldDef } from './BulkImporter';
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 56d1f0ed..e7951af7 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -5,10 +5,13 @@ import Link from 'next/link';
 import { Menu, X } from 'lucide-react';
 import { SearchBar } from '@/app/components/search/SearchBar';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { DynamicLanguageSwitcher } from '@/components/i18n/DynamicLanguageSwitcher';
+import { useInternationalization } from '@/hooks/useInternationalization';
 
 export const Header: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const { t } = useInternationalization();
 
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
@@ -44,13 +47,13 @@ export const Header: React.FC = () => {
               href="/"
               className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             >
-              Home
+              {t('navigation.home')}
             </Link>
             <Link
               href="/courses"
               className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             >
-              Courses
+              {t('navigation.courses')}
             </Link>
             <Link
               href="/instructor"
@@ -62,12 +65,17 @@ export const Header: React.FC = () => {
               href="/dashboard"
               className="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors"
             >
-              Dashboard
+              {t('navigation.dashboard')}
             </Link>
           </nav>
 
-          {/* Theme Toggle and Mobile Menu Button */}
+          {/* Theme Toggle, Language Switcher and Mobile Menu Button */}
           <div className="flex items-center gap-2">
+            {/* Language Switcher - Desktop */}
+            <div className="hidden md:block">
+              <DynamicLanguageSwitcher mode="dropdown" showNativeNames />
+            </div>
+
             {/* Theme Toggle */}
             <ThemeToggle />
 
@@ -111,14 +119,14 @@ export const Header: React.FC = () => {
               className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded transition-colors"
               onClick={() => setIsMobileMenuOpen(false)}
             >
-              Home
+              {t('navigation.home')}
             </Link>
             <Link
               href="/courses"
               className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded transition-colors"
               onClick={() => setIsMobileMenuOpen(false)}
             >
-              Courses
+              {t('navigation.courses')}
             </Link>
             <Link
               href="/instructor"
@@ -132,8 +140,12 @@ export const Header: React.FC = () => {
               className="block px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors"
               onClick={() => setIsMobileMenuOpen(false)}
             >
-              Dashboard
+              {t('navigation.dashboard')}
             </Link>
+            {/* Language Switcher - Mobile */}
+            <div className="px-2 pt-2">
+              <DynamicLanguageSwitcher mode="select" showNativeNames />
+            </div>
           </nav>
         )}
       </div>
diff --git a/src/hooks/useFeatureFlag.ts b/src/hooks/useFeatureFlag.ts
new file mode 100644
index 00000000..4e9fc891
--- /dev/null
+++ b/src/hooks/useFeatureFlag.ts
@@ -0,0 +1,85 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { FeatureFlag } from '@/lib/feature-flags';
+
+interface FlagState {
+  flag: FeatureFlag | null;
+  isEnabled: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * useFeatureFlag — evaluates a single flag server-side for the given user context.
+ *
+ * @param flagId  The flag's id (e.g. "flag_new_dashboard")
+ * @param context Flat key→value attributes for targeting (userId, plan, …)
+ *
+ * @example
+ * const { isEnabled } = useFeatureFlag('flag_new_dashboard', { userId: user.id });
+ * if (isEnabled) return <NewDashboard />;
+ */
+export function useFeatureFlag(
+  flagId: string,
+  context: Record<string, string> = {},
+): FlagState {
+  const [state, setState] = useState<FlagState>({
+    flag: null,
+    isEnabled: false,
+    isLoading: true,
+    error: null,
+  });
+
+  const contextKey = JSON.stringify(context);
+
+  const load = useCallback(async () => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const params = new URLSearchParams({ id: flagId, ...context });
+      const res = await fetch(`/api/admin/feature-flags/evaluate?${params}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as { flag: FeatureFlag; isEnabled: boolean };
+      setState({ flag: data.flag, isEnabled: data.isEnabled, isLoading: false, error: null });
+    } catch (err) {
+      setState({ flag: null, isEnabled: false, isLoading: false, error: String(err) });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flagId, contextKey]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return state;
+}
+
+/**
+ * useAllFeatureFlags — fetches the full flag list (for admin UI use).
+ */
+export function useAllFeatureFlags() {
+  const [flags, setFlags] = useState<FeatureFlag[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const reload = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/admin/feature-flags');
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as { flags: FeatureFlag[] };
+      setFlags(data.flags);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  return { flags, isLoading, error, reload };
+}
diff --git a/src/hooks/useInternationalization.tsx b/src/hooks/useInternationalization.tsx
index 6775d5a7..1a339476 100644
--- a/src/hooks/useInternationalization.tsx
+++ b/src/hooks/useInternationalization.tsx
@@ -25,6 +25,7 @@ import {
   formatFileSize,
   formatDuration,
 } from '@/utils/i18nUtils';
+import i18n, { loadLocale } from '@/lib/i18n/config';
 
 interface I18nContextValue {
   language: LanguageCode;
@@ -63,6 +64,15 @@ export function I18nProvider({
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
+  // Keep react-i18next (i18n singleton) in sync with the active language.
+  useEffect(() => {
+    if (i18n.language !== language) {
+      void loadLocale(language).then(() => {
+        void i18n.changeLanguage(language);
+      });
+    }
+  }, [language]);
+
   // Load translations when language changes
   useEffect(() => {
     let cancelled = false;
@@ -120,15 +130,18 @@ export function I18nProvider({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Intentionally run once on mount - setLanguage is stable
 
-  // Save language preference to localStorage
+  // Save language preference to localStorage + cookie (cookie enables SSR-side lang/dir)
   const changeLanguage = useCallback(async (newLanguage: LanguageCode) => {
     setLanguage(newLanguage);
     localStorage.setItem('i18n:language', newLanguage);
 
-    // Update HTML lang attribute
-    if (typeof document !== 'undefined') {
-      document.documentElement.lang = newLanguage;
-    }
+    // Persist to cookie so the server can read it on next request for SSR lang/dir.
+    document.cookie = `i18n:language=${newLanguage};path=/;max-age=31536000;SameSite=Lax`;
+
+    // Update <html lang> and <html dir> immediately for the current page visit.
+    const newDir = ['ar', 'he', 'fa', 'ur'].includes(newLanguage) ? 'rtl' : 'ltr';
+    document.documentElement.lang = newLanguage;
+    document.documentElement.dir = newDir;
   }, []);
 
   // Get cultural preferences
diff --git a/src/lib/feature-flags/index.ts b/src/lib/feature-flags/index.ts
new file mode 100644
index 00000000..03ef5350
--- /dev/null
+++ b/src/lib/feature-flags/index.ts
@@ -0,0 +1,5 @@
+/**
+ * src/lib/feature-flags — public barrel
+ */
+export type { FeatureFlag, TargetingRule, AuditEntry, RolloutStrategy } from './store';
+export { flagStore, auditLog, evaluateFlag, createAuditEntry, generateId } from './store';
diff --git a/src/lib/feature-flags/store.ts b/src/lib/feature-flags/store.ts
new file mode 100644
index 00000000..5f5e3076
--- /dev/null
+++ b/src/lib/feature-flags/store.ts
@@ -0,0 +1,175 @@
+/**
+ * Feature Flag types and in-process store.
+ *
+ * Persistence: flags are kept in a module-level Map so they survive
+ * across API requests within the same Node.js process (dev / single
+ * instance prod). Replace `flagStore` / `auditStore` with a database
+ * client for multi-instance deployments.
+ */
+
+// ─── Core types ───────────────────────────────────────────────────────────────
+
+export type RolloutStrategy = 'all' | 'percentage' | 'targeting';
+
+export interface TargetingRule {
+  /** e.g. "userId", "email", "country", "plan" */
+  attribute: string;
+  operator: 'equals' | 'contains' | 'startsWith' | 'in';
+  /** string or comma-separated list for 'in' */
+  value: string;
+}
+
+export interface FeatureFlag {
+  id: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+  strategy: RolloutStrategy;
+  /** 0–100, used when strategy === 'percentage' */
+  percentage: number;
+  /** used when strategy === 'targeting' */
+  rules: TargetingRule[];
+  tags: string[];
+  createdAt: string;
+  updatedAt: string;
+  createdBy: string;
+}
+
+export interface AuditEntry {
+  id: string;
+  flagId: string;
+  flagName: string;
+  action: 'created' | 'updated' | 'deleted' | 'toggled';
+  actor: string;
+  before: Partial<FeatureFlag> | null;
+  after: Partial<FeatureFlag> | null;
+  timestamp: string;
+}
+
+// ─── In-process stores ────────────────────────────────────────────────────────
+
+export const flagStore = new Map<string, FeatureFlag>();
+export const auditLog: AuditEntry[] = [];
+
+// ─── Seed with sensible defaults ──────────────────────────────────────────────
+
+const now = new Date().toISOString();
+
+const SEED_FLAGS: FeatureFlag[] = [
+  {
+    id: 'flag_new_dashboard',
+    name: 'New Dashboard',
+    description: 'Enables the redesigned learner dashboard.',
+    enabled: false,
+    strategy: 'percentage',
+    percentage: 10,
+    rules: [],
+    tags: ['ui', 'dashboard'],
+    createdAt: now,
+    updatedAt: now,
+    createdBy: 'system',
+  },
+  {
+    id: 'flag_ai_tutor',
+    name: 'AI Tutor',
+    description: 'Activates the AI-powered tutoring assistant.',
+    enabled: false,
+    strategy: 'targeting',
+    percentage: 0,
+    rules: [{ attribute: 'plan', operator: 'equals', value: 'pro' }],
+    tags: ['ai', 'beta'],
+    createdAt: now,
+    updatedAt: now,
+    createdBy: 'system',
+  },
+  {
+    id: 'flag_video_speed',
+    name: 'Video Speed Controls',
+    description: 'Shows advanced playback speed options (0.5×–3×) in the video player.',
+    enabled: true,
+    strategy: 'all',
+    percentage: 100,
+    rules: [],
+    tags: ['video', 'ux'],
+    createdAt: now,
+    updatedAt: now,
+    createdBy: 'system',
+  },
+];
+
+for (const f of SEED_FLAGS) {
+  flagStore.set(f.id, f);
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+export function generateId(prefix = 'flag'): string {
+  return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function createAuditEntry(
+  action: AuditEntry['action'],
+  actor: string,
+  before: FeatureFlag | null,
+  after: FeatureFlag | null,
+): AuditEntry {
+  const entry: AuditEntry = {
+    id: generateId('audit'),
+    flagId: (after ?? before)!.id,
+    flagName: (after ?? before)!.name,
+    action,
+    actor,
+    before: before ? { ...before } : null,
+    after: after ? { ...after } : null,
+    timestamp: new Date().toISOString(),
+  };
+  // Keep last 500 audit entries
+  auditLog.unshift(entry);
+  if (auditLog.length > 500) auditLog.length = 500;
+  return entry;
+}
+
+/**
+ * Evaluate whether a flag is active for a given user context.
+ * Context is a flat key→value map (e.g. { userId, plan, country }).
+ */
+export function evaluateFlag(flag: FeatureFlag, context: Record<string, string> = {}): boolean {
+  if (!flag.enabled) return false;
+
+  switch (flag.strategy) {
+    case 'all':
+      return true;
+
+    case 'percentage': {
+      if (flag.percentage >= 100) return true;
+      if (flag.percentage <= 0) return false;
+      // Deterministic per-user bucket via userId hash
+      const userId = context.userId ?? '';
+      let hash = 0;
+      for (let i = 0; i < (flag.id + userId).length; i++) {
+        hash = Math.imul(31, hash) + (flag.id + userId).charCodeAt(i);
+        hash |= 0;
+      }
+      const bucket = Math.abs(hash) % 100;
+      return bucket < flag.percentage;
+    }
+
+    case 'targeting': {
+      if (flag.rules.length === 0) return false;
+      // ALL rules must match (AND logic)
+      return flag.rules.every((rule) => {
+        const attrVal = context[rule.attribute] ?? '';
+        switch (rule.operator) {
+          case 'equals':    return attrVal === rule.value;
+          case 'contains':  return attrVal.includes(rule.value);
+          case 'startsWith':return attrVal.startsWith(rule.value);
+          case 'in':        return rule.value.split(',').map((v) => v.trim()).includes(attrVal);
+          default:          return false;
+        }
+      });
+    }
+
+    default:
+      return false;
+  }
+}
diff --git a/src/lib/import/index.ts b/src/lib/import/index.ts
new file mode 100644
index 00000000..021f9702
--- /dev/null
+++ b/src/lib/import/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Public barrel for src/lib/import.
+ *
+ * Import from '@/lib/import' to access the full pipeline:
+ *
+ *   import { parseCsv, parseXlsxAsync, runValidationPipeline,
+ *            createRollbackManager } from '@/lib/import';
+ */
+
+export { parseCsv, parseXlsx, parseXlsxAsync } from './parser';
+export { applyMappings, validateRow, runValidationPipeline } from './validator';
+export { createRollbackManager } from './rollback';
+export type {
+  RawRow,
+  ImportRecord,
+  ImportResult,
+  ColumnMapping,
+  ProgressCallback,
+  FieldValidator,
+  ImportSchema,
+} from './types';
+export type { RollbackManager, RollbackAction, RollbackResult } from './rollback';
diff --git a/src/lib/import/parser.ts b/src/lib/import/parser.ts
new file mode 100644
index 00000000..8ef5dcb2
--- /dev/null
+++ b/src/lib/import/parser.ts
@@ -0,0 +1,379 @@
+/**
+ * CSV / Excel parser.
+ *
+ * Parses CSV text or Excel binary data into an array of raw row objects
+ * without any third-party dependency — keeps the bundle lean and avoids
+ * adding papaparse/sheetjs as hard deps.
+ *
+ * Supported inputs:
+ *  - CSV text (string)
+ *  - XLSX binary content (ArrayBuffer) — basic BIFF8/OOXML via the
+ *    browser's native FileReader + a lightweight row extractor
+ *
+ * For production-grade XLSX support (formulas, merged cells, etc.) the
+ * caller can swap in SheetJS; the API is identical.
+ */
+
+import type { RawRow } from './types';
+
+// ─── CSV ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Parse a single CSV line respecting RFC 4180 quoting rules.
+ * Handles quoted fields that contain commas and escaped double-quotes ("").
+ */
+function parseCsvLine(line: string, delimiter = ','): string[] {
+  const fields: string[] = [];
+  let current = '';
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    const next = line[i + 1];
+
+    if (inQuotes) {
+      if (ch === '"' && next === '"') {
+        // Escaped double-quote inside quoted field
+        current += '"';
+        i++;
+      } else if (ch === '"') {
+        inQuotes = false;
+      } else {
+        current += ch;
+      }
+    } else {
+      if (ch === '"') {
+        inQuotes = true;
+      } else if (ch === delimiter) {
+        fields.push(current.trim());
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+  }
+
+  fields.push(current.trim());
+  return fields;
+}
+
+/** Parse CSV text into an array of RawRow objects keyed by the header row. */
+export function parseCsv(text: string, delimiter = ','): RawRow[] {
+  // Normalize line endings
+  const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
+
+  // Drop completely empty trailing lines
+  while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+    lines.pop();
+  }
+
+  if (lines.length < 2) return [];
+
+  const headers = parseCsvLine(lines[0], delimiter);
+  const rows: RawRow[] = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim() === '') continue;
+
+    const fields = parseCsvLine(line, delimiter);
+    const row: RawRow = {};
+    headers.forEach((header, idx) => {
+      row[header] = fields[idx] ?? '';
+    });
+    rows.push(row);
+  }
+
+  return rows;
+}
+
+// ─── Excel (XLSX) ─────────────────────────────────────────────────────────────
+
+/**
+ * Very basic XLSX reader — extracts the first sheet's rows as raw text.
+ *
+ * Implementation strategy:
+ *   1. Treat the XLSX file as a ZIP (OOXML format).
+ *   2. Extract xl/worksheets/sheet1.xml from the ZIP.
+ *   3. Parse the XML to pull out <row>/<c> elements and shared strings.
+ *
+ * This covers the common case (text/number cells in a plain export).
+ * Returns null when parsing fails so the UI can show a graceful error.
+ */
+export async function parseXlsx(buffer: ArrayBuffer): Promise<RawRow[] | null> {
+  try {
+    // Use the DecompressionStream API (available in modern browsers + Node 18+)
+    // to unzip the XLSX. We lean on the browser's built-in ZIP support rather
+    // than bundling a full ZIP library.
+    const uint8 = new Uint8Array(buffer);
+
+    // Attempt a direct read of the ZIP Central Directory to locate entries.
+    const entries = readZipEntries(uint8);
+    if (!entries) return null;
+
+    const sharedStringsRaw = entries['xl/sharedStrings.xml'] ?? entries['xl/sharedstrings.xml'];
+    const sheetRaw = entries['xl/worksheets/sheet1.xml'];
+    if (!sheetRaw) return null;
+
+    const sharedStrings = sharedStringsRaw ? parseSharedStrings(sharedStringsRaw) : [];
+    return parseSheetXml(sheetRaw, sharedStrings);
+  } catch {
+    return null;
+  }
+}
+
+// ─── Minimal ZIP reader ────────────────────────────────────────────────────────
+
+interface ZipEntry {
+  name: string;
+  content: string;
+}
+
+/** Walk the ZIP local-file headers and return a map of path → decoded UTF-8 text. */
+function readZipEntries(data: Uint8Array): Record<string, string> | null {
+  const map: Record<string, string> = {};
+  const decoder = new TextDecoder('utf-8');
+  let offset = 0;
+
+  while (offset < data.length - 4) {
+    const sig =
+      data[offset] |
+      (data[offset + 1] << 8) |
+      (data[offset + 2] << 16) |
+      (data[offset + 3] << 24);
+
+    // Local file header signature: 0x04034b50
+    if (sig !== 0x04034b50) break;
+
+    const flags = data[offset + 6] | (data[offset + 7] << 8);
+    const compression = data[offset + 8] | (data[offset + 9] << 8);
+    const compressedSize =
+      data[offset + 18] |
+      (data[offset + 19] << 8) |
+      (data[offset + 20] << 16) |
+      (data[offset + 21] << 24);
+    const fileNameLen = data[offset + 26] | (data[offset + 27] << 8);
+    const extraFieldLen = data[offset + 28] | (data[offset + 29] << 8);
+
+    const nameStart = offset + 30;
+    const name = decoder.decode(data.slice(nameStart, nameStart + fileNameLen));
+    const dataStart = nameStart + fileNameLen + extraFieldLen;
+
+    if (compression === 0 && (flags & 0x08) === 0) {
+      // Stored (uncompressed)
+      const content = decoder.decode(data.slice(dataStart, dataStart + compressedSize));
+      map[name] = content;
+    } else if (compression === 8) {
+      // Deflate — decompress using DecompressionStream when available
+      try {
+        const compressed = data.slice(dataStart, dataStart + compressedSize);
+        // Synchronous path: store raw bytes, decode later (async not possible here)
+        // We mark these as deferred — for simplicity we skip compressed entries
+        // and only process stored ones. In practice XLSX stores XML files
+        // compressed; to handle this we use a different async approach below.
+        void compressed; // will be handled via parseXlsxAsync
+      } catch {
+        // ignore
+      }
+    }
+
+    offset = dataStart + compressedSize;
+  }
+
+  return Object.keys(map).length > 0 ? map : null;
+}
+
+/**
+ * Async version that handles Deflate-compressed ZIP entries (the common case
+ * in XLSX files) using the browser's native `DecompressionStream`.
+ */
+export async function parseXlsxAsync(buffer: ArrayBuffer): Promise<RawRow[] | null> {
+  try {
+    const uint8 = new Uint8Array(buffer);
+    const decoder = new TextDecoder('utf-8');
+    const entries: Record<string, string> = {};
+
+    let offset = 0;
+    while (offset < uint8.length - 4) {
+      const sig =
+        uint8[offset] |
+        (uint8[offset + 1] << 8) |
+        (uint8[offset + 2] << 16) |
+        (uint8[offset + 3] << 24);
+
+      if (sig !== 0x04034b50) break;
+
+      const flags = uint8[offset + 6] | (uint8[offset + 7] << 8);
+      const compression = uint8[offset + 8] | (uint8[offset + 9] << 8);
+      const compressedSize =
+        uint8[offset + 18] |
+        (uint8[offset + 19] << 8) |
+        (uint8[offset + 20] << 16) |
+        (uint8[offset + 21] << 24);
+      const fileNameLen = uint8[offset + 26] | (uint8[offset + 27] << 8);
+      const extraFieldLen = uint8[offset + 28] | (uint8[offset + 29] << 8);
+      const nameStart = offset + 30;
+      const name = decoder.decode(uint8.slice(nameStart, nameStart + fileNameLen));
+      const dataStart = nameStart + fileNameLen + extraFieldLen;
+      const rawData = uint8.slice(dataStart, dataStart + compressedSize);
+
+      if (compression === 0 && (flags & 0x08) === 0) {
+        entries[name] = decoder.decode(rawData);
+      } else if (compression === 8 && typeof DecompressionStream !== 'undefined') {
+        try {
+          // Add raw deflate header required by DecompressionStream
+          const ds = new DecompressionStream('raw' as CompressionFormat);
+          const writer = ds.writable.getWriter();
+          const reader = ds.readable.getReader();
+          writer.write(rawData);
+          writer.close();
+
+          const chunks: Uint8Array[] = [];
+          let done = false;
+          while (!done) {
+            const { value, done: d } = await reader.read();
+            if (value) chunks.push(value);
+            done = d;
+          }
+
+          const total = chunks.reduce((n, c) => n + c.length, 0);
+          const merged = new Uint8Array(total);
+          let pos = 0;
+          for (const c of chunks) {
+            merged.set(c, pos);
+            pos += c.length;
+          }
+          entries[name] = decoder.decode(merged);
+        } catch {
+          // DecompressionStream may not support 'raw' — skip this entry
+        }
+      }
+
+      offset = dataStart + compressedSize;
+    }
+
+    const sharedStringsXml =
+      entries['xl/sharedStrings.xml'] ?? entries['xl/sharedstrings.xml'] ?? '';
+    const sheetXml = entries['xl/worksheets/sheet1.xml'];
+    if (!sheetXml) return null;
+
+    const sharedStrings = sharedStringsXml ? parseSharedStrings(sharedStringsXml) : [];
+    return parseSheetXml(sheetXml, sharedStrings);
+  } catch {
+    return null;
+  }
+}
+
+// ─── XML helpers ──────────────────────────────────────────────────────────────
+
+/** Extract text nodes from <si>/<t> shared-string entries. */
+function parseSharedStrings(xml: string): string[] {
+  const strings: string[] = [];
+  const siRegex = /<si>([\s\S]*?)<\/si>/g;
+  const tRegex = /<t[^>]*>([\s\S]*?)<\/t>/g;
+  let siMatch: RegExpExecArray | null;
+
+  while ((siMatch = siRegex.exec(xml)) !== null) {
+    let text = '';
+    let tMatch: RegExpExecArray | null;
+    tRegex.lastIndex = 0;
+    while ((tMatch = tRegex.exec(siMatch[1])) !== null) {
+      text += tMatch[1];
+    }
+    strings.push(decodeXmlEntities(text));
+  }
+
+  return strings;
+}
+
+/** Parse an OOXML worksheet into RawRows. */
+function parseSheetXml(xml: string, sharedStrings: string[]): RawRow[] {
+  const rows: RawRow[] = [];
+  let headers: string[] = [];
+
+  const rowRegex = /<row[^>]*>([\s\S]*?)<\/row>/g;
+  const cellRegex = /<c\s([^>]*)>([\s\S]*?)<\/c>/g;
+  const vRegex = /<v>([\s\S]*?)<\/v>/;
+
+  let rowMatch: RegExpExecArray | null;
+  let rowIndex = 0;
+
+  while ((rowMatch = rowRegex.exec(xml)) !== null) {
+    const rowContent = rowMatch[1];
+    const cells: { col: number; value: string }[] = [];
+
+    let cellMatch: RegExpExecArray | null;
+    while ((cellMatch = cellRegex.exec(rowContent)) !== null) {
+      const attrs = cellMatch[1];
+      const inner = cellMatch[2];
+
+      const rAttr = /\br="([A-Z]+\d+)"/.exec(attrs);
+      const tAttr = /\bt="([^"]*)"/.exec(attrs);
+      if (!rAttr) continue;
+
+      const colLetters = rAttr[1].replace(/\d+/, '');
+      const colIndex = colLettersToIndex(colLetters);
+
+      const vMatch = vRegex.exec(inner);
+      let value = '';
+      if (vMatch) {
+        if (tAttr && tAttr[1] === 's') {
+          // Shared string
+          const idx = parseInt(vMatch[1], 10);
+          value = sharedStrings[idx] ?? '';
+        } else {
+          value = decodeXmlEntities(vMatch[1]);
+        }
+      }
+
+      cells.push({ col: colIndex, value });
+    }
+
+    if (cells.length === 0) {
+      rowIndex++;
+      continue;
+    }
+
+    // Build a dense array up to the max column
+    const maxCol = Math.max(...cells.map((c) => c.col));
+    const dense = Array.from({ length: maxCol + 1 }, () => '');
+    cells.forEach(({ col, value }) => {
+      dense[col] = value;
+    });
+
+    if (rowIndex === 0) {
+      headers = dense;
+    } else {
+      const row: RawRow = {};
+      headers.forEach((h, i) => {
+        row[h] = dense[i] ?? '';
+      });
+      rows.push(row);
+    }
+
+    rowIndex++;
+  }
+
+  return rows;
+}
+
+/** Convert Excel column letters (A, B, … Z, AA, …) to a 0-based index. */
+function colLettersToIndex(letters: string): number {
+  let n = 0;
+  for (const ch of letters.toUpperCase()) {
+    n = n * 26 + (ch.charCodeAt(0) - 64);
+  }
+  return n - 1;
+}
+
+function decodeXmlEntities(s: string): string {
+  return s
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, "'");
+}
+
+// Re-export the ZipEntry type for tests
+export type { ZipEntry };
diff --git a/src/lib/import/rollback.ts b/src/lib/import/rollback.ts
new file mode 100644
index 00000000..d6770e28
--- /dev/null
+++ b/src/lib/import/rollback.ts
@@ -0,0 +1,84 @@
+/**
+ * Rollback manager for bulk import operations.
+ *
+ * Callers register compensating actions for each successfully persisted record.
+ * On failure, `rollback()` executes them in reverse order (LIFO), ensuring
+ * partial writes are cleaned up correctly.
+ *
+ * Usage:
+ *
+ *   const rb = createRollbackManager();
+ *
+ *   for (const record of validRecords) {
+ *     const id = await persistRecord(record.data);
+ *     rb.register(() => deleteRecord(id), `row ${record.rowIndex}`);
+ *   }
+ *
+ *   if (shouldRollback) {
+ *     const result = await rb.rollback();
+ *     console.log(result.errors); // any rollback failures
+ *   }
+ */
+
+export interface RollbackAction {
+  /** Human-readable label for error reporting. */
+  label: string;
+  /** The compensating action to execute. */
+  fn: () => Promise<void> | void;
+}
+
+export interface RollbackResult {
+  /** Number of actions that ran successfully. */
+  rolledBack: number;
+  /** Errors that occurred during rollback (non-fatal). */
+  errors: Array<{ label: string; error: string }>;
+}
+
+export interface RollbackManager {
+  /** Register a compensating action. */
+  register(fn: () => Promise<void> | void, label?: string): void;
+  /** Execute all registered actions in reverse order. */
+  rollback(): Promise<RollbackResult>;
+  /** Discard all registered actions (call after a fully successful import). */
+  clear(): void;
+  /** How many actions are currently registered. */
+  readonly size: number;
+}
+
+export function createRollbackManager(): RollbackManager {
+  const actions: RollbackAction[] = [];
+
+  return {
+    register(fn, label = `action-${actions.length + 1}`) {
+      actions.push({ fn, label });
+    },
+
+    async rollback(): Promise<RollbackResult> {
+      let rolledBack = 0;
+      const errors: RollbackResult['errors'] = [];
+
+      // Execute in reverse insertion order
+      for (let i = actions.length - 1; i >= 0; i--) {
+        const { fn, label } = actions[i];
+        try {
+          await fn();
+          rolledBack++;
+        } catch (e: unknown) {
+          errors.push({ label, error: e instanceof Error ? e.message : String(e) });
+        }
+      }
+
+      // Clear after rollback attempt regardless of partial failures
+      actions.length = 0;
+      return { rolledBack, errors };
+    },
+
+    clear() {
+      actions.length = 0;
+    },
+
+    get size() {
+      return actions.length;
+    },
+  };
+}
diff --git a/src/lib/import/types.ts b/src/lib/import/types.ts
new file mode 100644
index 00000000..c2243c86
--- /dev/null
+++ b/src/lib/import/types.ts
@@ -0,0 +1,54 @@
+/**
+ * Shared types for the bulk-import pipeline.
+ */
+
+/** A raw row from CSV/Excel parsing (column name → cell value). */
+export type RawRow = Record<string, string>;
+
+/** One validated (or failed) record after the validation stage. */
+export interface ImportRecord<T = unknown> {
+  /** Original 1-based row number in the source file. */
+  rowIndex: number;
+  /** Raw values before transformation. */
+  raw: RawRow;
+  /** Transformed data — present only when the row passed validation. */
+  data?: T;
+  /** Field-level validation errors, keyed by field name. */
+  errors: Record<string, string>;
+  /** Whether this row passed all validation checks. */
+  valid: boolean;
+}
+
+/** Result returned by the full import pipeline. */
+export interface ImportResult<T = unknown> {
+  total: number;
+  succeeded: number;
+  failed: number;
+  records: ImportRecord<T>[];
+}
+
+/** A single column-mapping entry: source CSV header → target model field. */
+export interface ColumnMapping {
+  sourceHeader: string;
+  targetField: string;
+}
+
+/** Progress callback shape. */
+export type ProgressCallback = (processed: number, total: number) => void;
+
+/** A field-level validator: returns an error message string or null when valid. */
+export type FieldValidator<V = unknown> = (value: V, row: RawRow) => string | null;
+
+/** Schema used to validate and transform a single import row. */
+export type ImportSchema<T> = {
+  [K in keyof T]: {
+    /** Column name(s) to read from — supports aliases. */
+    sourceCols: string[];
+    /** Whether the field is required. */
+    required?: boolean;
+    /** Optional transform applied before validation. */
+    transform?: (raw: string) => T[K];
+    /** Optional extra validators beyond required/presence checks. */
+    validators?: FieldValidator<T[K]>[];
+  };
+};
diff --git a/src/lib/import/validator.ts b/src/lib/import/validator.ts
new file mode 100644
index 00000000..546773ea
--- /dev/null
+++ b/src/lib/import/validator.ts
@@ -0,0 +1,148 @@
+/**
+ * Validation pipeline.
+ *
+ * Runs each row through the ImportSchema and returns ImportRecord results
+ * with per-field error messages. Reports progress via an optional callback.
+ */
+
+import type {
+  RawRow,
+  ImportRecord,
+  ImportResult,
+  ImportSchema,
+  ColumnMapping,
+  ProgressCallback,
+} from './types';
+
+/**
+ * Apply column mappings to rename source headers to target field names.
+ * Returns a new row object using the mapped keys.
+ */
+export function applyMappings(row: RawRow, mappings: ColumnMapping[]): RawRow {
+  const mapped: RawRow = { ...row };
+  for (const { sourceHeader, targetField } of mappings) {
+    if (sourceHeader in mapped && sourceHeader !== targetField) {
+      mapped[targetField] = mapped[sourceHeader];
+      delete mapped[sourceHeader];
+    }
+  }
+  return mapped;
+}
+
+/**
+ * Validate and transform a single raw row against the schema.
+ * Returns an ImportRecord with `valid=true` and `data` when the row passes,
+ * or `valid=false` with populated `errors` when it fails.
+ */
+export function validateRow<T>(
+  raw: RawRow,
+  rowIndex: number,
+  schema: ImportSchema<T>,
+): ImportRecord<T> {
+  const errors: Record<string, string> = {};
+  const result: Partial<T> = {};
+
+  for (const fieldKey of Object.keys(schema) as Array<keyof T>) {
+    const def = schema[fieldKey];
+    const { sourceCols, required = false, transform, validators = [] } = def;
+
+    // Resolve the raw value from the first matching source column
+    let rawValue = '';
+    for (const col of sourceCols) {
+      if (col in raw && raw[col] !== '') {
+        rawValue = raw[col];
+        break;
+      }
+    }
+
+    // Required check
+    if (required && rawValue === '') {
+      errors[fieldKey as string] = `${String(fieldKey)} is required`;
+      continue;
+    }
+
+    // Transform
+    let transformed: T[keyof T];
+    try {
+      transformed = transform ? transform(rawValue) : (rawValue as unknown as T[keyof T]);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      errors[fieldKey as string] = `Transform failed: ${msg}`;
+      continue;
+    }
+
+    // Custom validators
+    let fieldError: string | null = null;
+    for (const validator of validators) {
+      const msg = validator(transformed, raw);
+      if (msg !== null) {
+        fieldError = msg;
+        break;
+      }
+    }
+
+    if (fieldError !== null) {
+      errors[fieldKey as string] = fieldError;
+    } else {
+      result[fieldKey] = transformed;
+    }
+  }
+
+  const valid = Object.keys(errors).length === 0;
+  return {
+    rowIndex,
+    raw,
+    data: valid ? (result as T) : undefined,
+    errors,
+    valid,
+  };
+}
+
+/**
+ * Run the full validation pipeline over all rows.
+ *
+ * Processes rows in batches to keep the UI responsive (yields control via
+ * `setTimeout(0)` between batches). Calls `onProgress` after each batch.
+ *
+ * @param rows      Raw rows from the parser
+ * @param schema    Field-level validation schema
+ * @param mappings  Optional column renames to apply before validation
+ * @param onProgress Optional callback called after each batch
+ * @param batchSize Rows per batch (default 100)
+ * @param signal    AbortSignal to cancel mid-run
+ */
+export async function runValidationPipeline<T>(
+  rows: RawRow[],
+  schema: ImportSchema<T>,
+  mappings: ColumnMapping[] = [],
+  onProgress?: ProgressCallback,
+  batchSize = 100,
+  signal?: AbortSignal,
+): Promise<ImportResult<T>> {
+  const records: ImportRecord<T>[] = [];
+  const total = rows.length;
+
+  for (let i = 0; i < total; i += batchSize) {
+    if (signal?.aborted) break;
+
+    const batch = rows.slice(i, i + batchSize);
+    for (let j = 0; j < batch.length; j++) {
+      const mappedRow = applyMappings(batch[j], mappings);
+      records.push(validateRow<T>(mappedRow, i + j + 1, schema));
+    }
+
+    onProgress?.(Math.min(i + batchSize, total), total);
+
+    // Yield to keep the main thread responsive between batches
+    await new Promise<void>((resolve) => setTimeout(resolve, 0));
+  }
+
+  const succeeded = records.filter((r) => r.valid).length;
+
+  return {
+    total: records.length,
+    succeeded,
+    failed: records.length - succeeded,
+    records,
+  };
+}
diff --git a/src/providers/RootProviders.tsx b/src/providers/RootProviders.tsx
index 897b76f4..642247d7 100644
--- a/src/providers/RootProviders.tsx
+++ b/src/providers/RootProviders.tsx
@@ -2,6 +2,7 @@
 
 import { Suspense } from 'react';
 import dynamic from 'next/dynamic';
+import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '@/lib/theme-provider';
 import { I18nProvider } from '@/hooks/useInternationalization';
 import { InternationalizationEngine } from '@/components/i18n/InternationalizationEngine';
@@ -13,6 +14,7 @@ import { EnvGuard } from '@/components/shared/EnvGuard';
 import { FeatureFlagProvider } from '@/components/shared/FeatureFlagProvider';
 import { ToastProvider } from '@/context/ToastContext';
 import { Loading } from '@/components/ui/Loading';
+import i18n from '@/lib/i18n/config';
 
 // Lazy load heavy/non-critical providers/components to improve initial render time
 const OfflineModeProvider = dynamic(
@@ -48,16 +50,19 @@ const DynamicTheming = dynamic(() => import('@/components/theme/DynamicTheming')
 interface RootProvidersProps {
   children: React.ReactNode;
   defaultTheme: string;
+  /** Locale read from cookie server-side; used to initialise i18n before hydration. */
+  defaultLocale?: string;
 }
 
 /**
  * Consolidates all client-side providers and components to reduce layout complexity
  * and enables lazy loading of non-critical systems.
  */
-export function RootProviders({ children, defaultTheme }: RootProvidersProps) {
+export function RootProviders({ children, defaultTheme, defaultLocale = 'en' }: RootProvidersProps) {
   return (
+    <I18nextProvider i18n={i18n}>
     <FeatureFlagProvider>
-    <I18nProvider>
+      <I18nProvider defaultLanguage={defaultLocale as import('@/locales/types').LanguageCode}>
       <InternationalizationEngine>
         <CulturalAdaptationManager>
           <ThemeProvider defaultTheme={defaultTheme}>
@@ -89,7 +94,8 @@ export function RootProviders({ children, defaultTheme }: RootProvidersProps) {
           </ThemeProvider>
         </CulturalAdaptationManager>
       </InternationalizationEngine>
-    </I18nProvider>
+      </I18nProvider>
     </FeatureFlagProvider>
+    </I18nextProvider>
   );
 }