diff --git a/src/app/api/og/dashboard/route.tsx b/src/app/api/og/dashboard/route.tsx
index 829850a..6145377 100644
--- a/src/app/api/og/dashboard/route.tsx
+++ b/src/app/api/og/dashboard/route.tsx
@@ -25,8 +25,27 @@ export async function GET(req: NextRequest) {
       timeZone: 'Asia/Kolkata',
     }).format(new Date());
 
+    // Read theme
+    const theme = searchParams.get('theme') || 'dark';
+    const isDark = theme === 'dark';
+
+    // Theme Variables
+    const bgColor = isDark 
+      ? 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)' 
+      : 'linear-gradient(145deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%)';
+    const textColor = isDark ? '#ffffff' : '#0f172a';
+    const gridColor = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
+    const cardBg = isDark 
+      ? 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)' 
+      : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)';
+    const cardBorder = isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.05)';
+    const textSec = isDark ? 'rgba(255,255,255,0.5)' : 'rgba(15,23,42,0.5)';
+    const textTert = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(15,23,42,0.7)';
+    const dividerColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+    const logoName = isDark ? 'Rectangular_dark_background.png' : 'Rectangular_light_background.png';
+
     // Load logo from disk and convert to base64
-    const logoPath = join(process.cwd(), 'public', 'PragatiVeer_Logo', 'PNG_Logos', 'Rectangular_dark_background.png');
+    const logoPath = join(process.cwd(), 'public', 'PragatiVeer_Logo', 'PNG_Logos', logoName);
     let logoUrl = '';
     try {
       const logoData = readFileSync(logoPath);
@@ -45,8 +64,8 @@ export async function GET(req: NextRequest) {
             flexDirection: 'column',
             justifyContent: 'space-between',
             alignItems: 'center',
-            background: 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)',
-            color: '#ffffff',
+            background: bgColor,
+            color: textColor,
             fontFamily: '"Inter", sans-serif',
             padding: '70px 0',
           }}
@@ -59,7 +78,7 @@ export async function GET(req: NextRequest) {
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundImage: 'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)',
+              backgroundImage: `radial-gradient(circle at 2px 2px, ${gridColor} 1px, transparent 0)`,
               backgroundSize: '40px 40px',
               zIndex: 0,
             }}
@@ -81,23 +100,23 @@ export async function GET(req: NextRequest) {
             {/* Main Content - 2x2 Grid */}
             <div style={{ display: 'flex', flexWrap: 'wrap', width: '880px', justifyContent: 'space-between', gap: '32px', marginTop: 20 }}>
               
-              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
+                <span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
                 <span style={{ fontSize: 64, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{score}</span>
               </div>
               
-              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
+                <span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
                 <span style={{ fontSize: 64, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span>
               </div>
               
-              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
+                <span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
                 <span style={{ fontSize: 64, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span>
               </div>
               
-              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
-                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
+                <span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
                 <span style={{ fontSize: 64, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span>
               </div>
               
@@ -106,7 +125,7 @@ export async function GET(req: NextRequest) {
             {/* Footer */}
             <div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: 20 }}>
               {/* Divider */}
-              <div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 40 }} />
+              <div style={{ width: '100%', height: '1px', backgroundColor: dividerColor, marginBottom: 40 }} />
               
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -116,20 +135,20 @@ export async function GET(req: NextRequest) {
                   </div>
                   
                   <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <div style={{ fontSize: 44, fontWeight: 900, color: '#ffffff', letterSpacing: '-0.02em' }}>{name}</div>
-                    <div style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>Generated: {exportDate}</div>
+                    <div style={{ fontSize: 44, fontWeight: 900, color: textColor, letterSpacing: '-0.02em' }}>{name}</div>
+                    <div style={{ fontSize: 20, color: textSec, marginTop: 4 }}>Generated: {exportDate}</div>
                     <div style={{ display: 'flex', marginTop: 8 }}>
                       <div style={{ fontSize: 22, color: '#06b6d4', fontWeight: 700, marginRight: 16 }}>{`${target} Aspirant`}</div>
-                      <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>•</div>
-                      <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
+                      <div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>•</div>
+                      <div style={{ fontSize: 22, color: textTert, fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
                     </div>
                   </div>
                 </div>
 
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
-                  <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', fontWeight: 600 }}>pragativeer.com</div>
-                  <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>contact@pragativeer.com</div>
-                  <div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>+91 9079337961</div>
+                  <div style={{ fontSize: 22, color: textTert, fontWeight: 600 }}>pragativeer.com</div>
+                  <div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>contact@pragativeer.com</div>
+                  <div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>+91 9079337961</div>
                 </div>
               </div>
             </div>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index a049510..563b682 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Facebook, Download, MessageCircle } from "lucide-react"
+import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Download } from "lucide-react"
 import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
 import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
 import { useActiveUser } from "@/hooks/useActiveUser"
@@ -55,7 +55,10 @@ export default function DashboardPage() {
       timeZone: 'Asia/Kolkata',
     }).format(new Date());
 
-    return `/api/og/dashboard?score=${encodeURIComponent(score)}&accuracy=${encodeURIComponent(accuracy)}&qs=${encodeURIComponent(qs)}&rank=${encodeURIComponent(rank)}&name=${encodeURIComponent(name)}&target=${target}&plan=${encodeURIComponent(plan)}&date=${encodeURIComponent(date)}`
+    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+    const themeParam = isDark ? 'dark' : 'light';
+
+    return `/api/og/dashboard?score=${encodeURIComponent(score)}&accuracy=${encodeURIComponent(accuracy)}&qs=${encodeURIComponent(qs)}&rank=${encodeURIComponent(rank)}&name=${encodeURIComponent(name)}&target=${target}&plan=${encodeURIComponent(plan)}&date=${encodeURIComponent(date)}&theme=${themeParam}`
   }
 
   const handleDownload = async () => {
@@ -131,11 +134,11 @@ export default function DashboardPage() {
             {shareMenuOpen && (
               <div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
                 <button onClick={handleShareFacebook} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
-                  <Facebook size={16} className="mr-3 text-blue-600" />
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-blue-600"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                   Share on Facebook
                 </button>
                 <button onClick={handleShareWhatsApp} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
-                  <MessageCircle size={16} className="mr-3 text-green-500" />
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-green-500"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
                   Share on WhatsApp
                 </button>
                 <button onClick={handleDownload} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors border-t border-border">