diff --git a/src/css/custom.css b/src/css/custom.css
index 030eaa8c..9b308a66 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,3 +1,9 @@
+[data-theme="light"] .interview-prep-page p,
+[data-theme="light"] .interview-prep-page li,
+[data-theme="light"] .interview-prep-page span,
+[data-theme="light"] .interview-prep-page div {
+  color: inherit;
+}
 /* You can override the default Infima variables here. */
 @import "tailwindcss";
 
@@ -826,6 +832,25 @@ html.theme-light .text-gray-900 {
   color: #1a1a1a !important;
 }
 
+/* ==== Interview Prep: enforce proper light theme surfaces ==== */
+/* Some Tailwind dark: classes may not be recognized by Docusaurus data-theme in all cases.
+   Ensure that in light mode, all Interview Prep cards use white surfaces and readable text. */
+[data-theme="light"] .interview-prep-page .bg-white,
+[data-theme="light"] .interview-prep-page [class*="bg-white/"],
+[data-theme="light"] .interview-prep-page .question-card,
+[data-theme="light"] .interview-prep-page .technical-inner,
+[data-theme="light"] .interview-prep-page .technical-inner-success,
+[data-theme="light"] .interview-prep-page .interview-prep-sidebar {
+  background-color: #ffffff !important;
+  color: #111827; /* gray-900 */
+}
+
+/* Ensure common dark-surface utilities don't leak into light theme in this area */
+[data-theme="light"] .interview-prep-page [class*="bg-gray-800"],
+[data-theme="light"] .interview-prep-page [class*="bg-gray-900"] {
+  background-color: #ffffff !important;
+}
+
 /*==== SECTION 13 Modern Blog Enhancements ======*/
 .modern-gradient-bg {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1123,7 +1148,8 @@ html {
 [data-theme="light"] .interview-prep-page h4,
 [data-theme="light"] .interview-prep-page h5,
 [data-theme="light"] .interview-prep-page h6 {
-  color: #ffffff !important;
+  /* Use a dark heading color in light mode for readability */
+  color: #111827 !important; /* Tailwind gray-900 */
 }
 
 .watch-video-btn {
@@ -1249,6 +1275,9 @@ html {
 }
 
 .explore-btn {
+  color: inherit;
+}
+[data-theme="dark"] .explore-btn {
   color: white;
 }
 
@@ -1262,17 +1291,24 @@ html {
   box-sizing: border-box !important;
 }
 
-.explore-btn:hover {
+[data-theme="dark"] .explore-btn:hover {
   color: white;
 }
 
-.custom-input {
-  background-color: #374151;
-  color: white; /* cyan-500 */
+/* Make the custom input theme-aware to avoid white text on light backgrounds */
+[data-theme="dark"] .custom-input {
+  background-color: #374151; /* gray-700 */
+  color: #ffffff;
+}
+[data-theme="light"] .custom-input {
+  background-color: #f9fafb; /* gray-50 */
+  color: #111827; /* gray-900 */
 }
 .company-border {
   border-color: #6b7280;
-  color: white;
+}
+[data-theme="dark"] .company-border {
+  color: #ffffff;
 }
 .company-blue-border {
   border-color: #3b82f6;
@@ -1316,14 +1352,17 @@ html {
   border-color: #1f2937; /* border-gray-800 */
   background-color: #1f2937; /* bg-gray-800 */
 }
-.company-tab-link {
+[data-theme="dark"] .company-tab-link {
   color: white;
 }
-.company-tab-link:hover {
+[data-theme="dark"] .company-tab-link:hover {
   color: white;
 }
 .company-tab-community-link {
-  color: #fdba74;
+  color: #9a3412; /* orange-800 for light */
+}
+[data-theme="dark"] .company-tab-community-link {
+  color: #fdba74; /* orange-300 in dark */
 }
 .company-tab-community-link:hover {
   color: #fdba74;
@@ -1365,12 +1404,13 @@ html {
   padding: 0 !important;
 }
 .practice-tab-link:hover{
-  color: white;
   text-decoration: none;
 }
-.practice-tab-link{
+[data-theme="dark"] .practice-tab-link{
   color: white;
-
+}
+[data-theme="light"] .practice-tab-link{
+  color: #1d4ed8; /* blue-700 */
 }
 
 /* ===== SECTION 14: SMOOTH PAGE TRANSITIONS ===== */
diff --git a/src/pages/interview-prep/BehavioralTab.tsx b/src/pages/interview-prep/BehavioralTab.tsx
index df9984c3..920846eb 100644
--- a/src/pages/interview-prep/BehavioralTab.tsx
+++ b/src/pages/interview-prep/BehavioralTab.tsx
@@ -23,7 +23,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
     <motion.div initial="hidden" animate="visible" variants={staggerContainer}>
       {/* Introduction Section */}
       <motion.div className="text-center mb-12" variants={fadeIn}>
-        <h2 className="text-4xl font-bold mb-4 text-white">Behavioral Interview Preparation</h2>
+        <h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Behavioral Interview Preparation</h2>
         <p className="text-xl text-center ml-3 text-gray-600 dark:text-gray-300 ">
           Master the art of storytelling and showcase your soft skills with confidence
         </p>
@@ -35,7 +35,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
         variants={fadeIn}
       >
         <div className="max-w-4xl mx-auto">
-          <h3 className="text-2xl font-bold mb-6 text-white flex items-center">
+          <h3 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white flex items-center">
             <span className="text-3xl mr-3">🤝</span>
             What are Behavioral Interviews?
           </h3>
@@ -411,11 +411,11 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
                 <h4 className="font-bold text-gray-900 dark:text-white mb-2">{video.title}</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">{video.description}</p>
                 <div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
-                  <span>{video.channel}</span>
-                  <span>{video.duration}</span>
+                  <span className="text-gray-500 dark:text-gray-400">{video.channel}</span>
+                  <span className="text-gray-500 dark:text-gray-400">{video.duration}</span>
                 </div>
                 <a href={video.url} target="_blank" rel="noopener noreferrer" className="watch-video-btn">
-                  <span className="mr-2">▶️</span>
+                  <span className="mr-2 text-inherit">▶️</span>
                   Watch Video
                 </a>
               </div>
diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx
index 170f01b5..8ca4c4be 100644
--- a/src/pages/interview-prep/CompaniesTab.tsx
+++ b/src/pages/interview-prep/CompaniesTab.tsx
@@ -178,7 +178,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                                         animate={{ scale: [1, 1.2, 1] }}
                                         transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
                                     />
-                                    <span className="relative z-10">{item.icon}</span>
+                                    <span className="relative z-10 text-inherit">{item.icon}</span>
                                 </div>
                                 <h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
                                 <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 leading-relaxed">{item.description}</p>
@@ -205,7 +205,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                                 >
                                     <div className={`text-3xl font-bold ${stat.color} mb-2`}>{stat.metric}</div>
                                     <div className="text-sm text-gray-600 dark:text-gray-300 flex items-center justify-center gap-2">
-                                        <span>{stat.icon}</span>
+                                        <span className="text-inherit">{stat.icon}</span>
                                         {stat.label}
                                     </div>
                                 </motion.div>) : null
@@ -225,7 +225,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                             placeholder="Search companies, focus areas, technologies, or interview types..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
-                            className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
+                            className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
                         />
                     </div>
                     <div className="flex gap-3">
@@ -622,7 +622,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                                         animate={{ scale: [1, 1.2, 1] }}
                                         transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
                                     />
-                                    <span className="relative z-10">{item.icon}</span>
+                                    <span className="relative z-10 text-inherit">{item.icon}</span>
                                 </div>
                                 <h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
                                 <p className="text-sm text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">{item.description}</p>
diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx
index 2dd17348..1b49590a 100644
--- a/src/pages/interview-prep/OverviewTab.tsx
+++ b/src/pages/interview-prep/OverviewTab.tsx
@@ -143,7 +143,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                 </span>
                                 Comprehensive Coverage
                             </h3>
-                            <ul className="space-y-3 text-gray-600 dark:text-gray-300">
+                            <ul className="space-y-3">
                                 <li className="flex items-start">
                                     <span className="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
                                     <span>
@@ -153,21 +153,21 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                 </li>
                                 <li className="flex items-start">
                                     <span className="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
-                                    <span>
+                                    <span className="text-gray-700 dark:text-gray-300">
                                         <strong>Behavioral Excellence:</strong> STAR method framework, leadership scenarios, and
                                         communication skills
                                     </span>
                                 </li>
                                 <li className="flex items-start">
                                     <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
-                                    <span>
+                                    <span className="text-gray-700 dark:text-gray-300">
                                         <strong>Company Intelligence:</strong> FAANG-specific strategies, culture insights, and
                                         insider tips
                                     </span>
                                 </li>
                                 <li className="flex items-start">
                                     <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
-                                    <span>
+                                    <span className="text-gray-700 dark:text-gray-300">
                                         <strong>Mock Practice:</strong> Real-time simulations with feedback and performance tracking
                                     </span>
                                 </li>
@@ -290,7 +290,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                                     animate={{ scale: [1, 1.2, 1] }}
                                                     transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
                                                 />
-                                                <span className="relative z-10">{stage.step}</span>
+                                                <span className="relative z-10 text-inherit">{stage.step}</span>
                                             </div>
                                             <motion.div
                                                 className="absolute -top-2 -right-2 w-8 h-8 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center shadow-md"
@@ -401,7 +401,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                                                             transition={{ duration: 0.4, delay: tipIndex * 0.1 }}
                                                                         >
                                                                             <span className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
-                                                                            <span className="leading-relaxed">{tip}</span>
+                                                                            <span className="leading-relaxed text-gray-700 dark:text-gray-300">{tip}</span>
                                                                         </motion.li>
                                                                     ))}
                                                                 </ul>
diff --git a/src/pages/interview-prep/PracticeTab.tsx b/src/pages/interview-prep/PracticeTab.tsx
index 65cda373..c0bafca0 100644
--- a/src/pages/interview-prep/PracticeTab.tsx
+++ b/src/pages/interview-prep/PracticeTab.tsx
@@ -597,7 +597,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                         >
                                             {showHints.has(question.id) ? "🔽" : "▶️"}
                                         </motion.span>
-                                        <span className="font-bold">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
+                                        <span className="font-bold text-gray-900 dark:text-white">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
                                     </div>
                                     <motion.span
                                         className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900/40 dark:to-purple-900/40 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full font-bold border border-blue-200 dark:border-blue-700"
@@ -623,7 +623,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                 >
                                                     💡
                                                 </motion.span>
-                                                <span>Helpful Hints:</span>
+                                                <span className="text-gray-900 dark:text-white">Helpful Hints:</span>
                                             </h4>
                                             <ul className="space-y-4">
                                                 {question.hints.map((hint, i) => (
@@ -641,7 +641,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                         >
                                                             {i + 1}
                                                         </motion.span>
-                                                        <span className="leading-relaxed font-medium">{hint}</span>
+                                                        <span className="leading-relaxed font-medium text-gray-700 dark:text-gray-300">{hint}</span>
                                                     </motion.li>
                                                 ))}
                                             </ul>
@@ -665,7 +665,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                 >
                                                     {showResources.has(question.id) ? "🔽" : "▶️"}
                                                 </motion.span>
-                                                <span className="font-bold">
+                                                <span className="font-bold text-gray-900 dark:text-white">
                                                     {showResources.has(question.id) ? "Hide Resources" : "Show Resources"}
                                                 </span>
                                             </div>
@@ -693,7 +693,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                         >
                                                             🔗
                                                         </motion.span>
-                                                        <span>Helpful Resources:</span>
+                                                        <span className="text-gray-900 dark:text-white">Helpful Resources:</span>
                                                     </h4>
                                                     <div className="grid gap-3">
                                                         {question.links.map((link, i) => {
@@ -795,7 +795,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                         >
                                                             🎯
                                                         </motion.span>
-                                                        <span>Session Active</span>
+                                                        <span className="text-gray-900 dark:text-white">Session Active</span>
                                                     </span>
                                                     <motion.span
                                                         className="text-2xl font-black text-blue-600 dark:text-blue-400"
@@ -818,7 +818,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                 >
                                                     ✓
                                                 </motion.span>
-                                                <span>Complete Practice</span>
+                                                <span className="text-gray-900 dark:text-white">Complete Practice</span>
                                             </motion.button>
                                         </motion.div>
                                     ) : (
@@ -845,7 +845,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                     >
                                                         ✓
                                                     </motion.span>
-                                                    <span>Completed</span>
+                                                    <span className="text-gray-900 dark:text-white">Completed</span>
                                                 </>
                                             ) : (
                                                 <>
@@ -855,7 +855,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
                                                     >
                                                         🚀
                                                     </motion.span>
-                                                    <span>Start Practice</span>
+                                                    <span className="text-gray-900 dark:text-white">Start Practice</span>
                                                 </>
                                             )}
                                         </motion.button>
diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx
index ae58fdc7..352a8400 100644
--- a/src/pages/interview-prep/index.tsx
+++ b/src/pages/interview-prep/index.tsx
@@ -4,6 +4,8 @@ import Layout from "@theme/Layout"
 import Head from "@docusaurus/Head"
 import { motion } from "framer-motion"
 import Link from "@docusaurus/Link"
+import { useColorMode } from '@docusaurus/theme-common';
+import clsx from 'clsx'
 import OverviewTab from "./OverviewTab"
 import TechnicalTab from "./TechnicalTab";
 import BehavioralTab from "./BehavioralTab"
@@ -1007,6 +1009,59 @@ const InterviewPrepPage: React.FC = () => {
       title="Interview Preparation - RecodeHive"
       description="Comprehensive interview preparation resources for technical and behavioral interviews at top tech companies"
     >
+      <InterviewPrepContent 
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        expandedCategories={expandedCategories}
+        toggleCategory={toggleCategory}
+        showTips={showTips}
+        toggleTips={toggleTips}
+        showQuestions={showQuestions}
+        toggleQuestions={toggleQuestions}
+        behavioralQuestions={behavioralQuestions}
+        technicalResources={technicalResources}
+        practicePlatforms={practicePlatforms}
+        companyTips={companyTips}
+        mockInterviewQuestions={mockInterviewQuestions}
+      />
+    </Layout>
+  )
+}
+
+function InterviewPrepContent({ 
+  activeTab, 
+  setActiveTab, 
+  expandedCategories, 
+  toggleCategory, 
+  showTips, 
+  toggleTips, 
+  showQuestions, 
+  toggleQuestions,
+  behavioralQuestions,
+  technicalResources,
+  practicePlatforms,
+  companyTips,
+  mockInterviewQuestions
+}: {
+  activeTab: string;
+  setActiveTab: React.Dispatch<React.SetStateAction<"overview" | "technical" | "behavioral" | "companies" | "practice">>;
+  expandedCategories: { [key: string]: boolean };
+  toggleCategory: (categoryIndex: number) => void;
+  showTips: { [key: number]: boolean };
+  toggleTips: (index: number) => void;
+  showQuestions: { [key: number]: boolean };
+  toggleQuestions: (index: number) => void;
+  behavioralQuestions: any[];
+  technicalResources: any[];
+  practicePlatforms: any[];
+  companyTips: any[];
+  mockInterviewQuestions: any[];
+}) {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === "dark";
+
+  return (
+    <>
       <Head>
         <title>Interview Preparation - RecodeHive</title>
         <meta
@@ -1015,7 +1070,12 @@ const InterviewPrepPage: React.FC = () => {
         />
       </Head>
 
-      <div className="min-h-screen bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
+      <div className={clsx(
+        "min-h-screen",
+        isDark 
+          ? "bg-gradient-to-b from-gray-900 to-gray-800 text-white" 
+          : "bg-gradient-to-b from-white to-gray-50 text-black"
+      )}>
         {/* Hero Section */}
         <motion.section
           className="hero-section py-20 px-4 text-center bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800 text-white relative overflow-hidden"
@@ -1070,8 +1130,8 @@ const InterviewPrepPage: React.FC = () => {
                     : "interview-prep-nav-tab-inactive border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                     }`}
                 >
-                  <span>{tab.icon}</span>
-                  <span>{tab.label}</span>
+                  <span className="text-inherit">{tab.icon}</span>
+                  <span className="text-inherit">{tab.label}</span>
                 </button>
               ))}
             </nav>
@@ -1079,7 +1139,7 @@ const InterviewPrepPage: React.FC = () => {
         </div>
 
         {/* Tab Content */}
-        <div className="interview-prep-page max-w-6xl mx-auto px-4 py-12">
+  <div className="interview-prep-page max-w-6xl mx-auto px-4 py-12">
           {/* Overview Tab */}
           {activeTab === "overview" && (
             <OverviewTab
@@ -1087,7 +1147,7 @@ const InterviewPrepPage: React.FC = () => {
               toggleQuestions={toggleQuestions}
               showTips={showTips}
               showQuestions={showQuestions}
-              setActiveTab={setActiveTab}  // ✅ pass setter
+              setActiveTab={setActiveTab}
             />
           )}
 
@@ -1159,7 +1219,7 @@ const InterviewPrepPage: React.FC = () => {
           </div>
         </motion.section>
       </div>
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a356309d..e8212e77 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,7 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+/* Support both class-based (.dark) and attribute-based ([data-theme="dark"]) dark modes */
+@custom-variant dark (&:is(.dark, [data-theme="dark"]) *);
 
 :root {
   --background: oklch(1 0 0);
diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css
index 86a1f034..933feb7c 100644
--- a/src/theme/Footer/Layout/enhanced-footer.css
+++ b/src/theme/Footer/Layout/enhanced-footer.css
@@ -1,5 +1,16 @@
 /* Enhanced Footer Styles - COMPLETELY ISOLATED FROM THEME CHANGES */
 
+/* Theme-aware footer styles */
+.enhanced-footer.light-theme {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%) !important;
+  color: #1e293b !important;
+}
+
+.enhanced-footer.dark-theme {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
+}
+
 /* Keyframe Animations */
 @keyframes linkPulse {
   0%, 100% {
@@ -111,73 +122,103 @@ html[data-theme='light'] .enhanced-footer * {
 }
 
 /* Force the main footer background and colors to never change */
-.enhanced-footer {
+.enhanced-footer.dark-theme {
   background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
+.enhanced-footer.light-theme {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%) !important;
+  color: #1e293b !important;
+}
+
 /* Absolute protection against any theme changes */
-[data-theme='dark'] .enhanced-footer,
-[data-theme='light'] .enhanced-footer,
-html[data-theme='dark'] .enhanced-footer,
-html[data-theme='light'] .enhanced-footer {
+[data-theme='dark'] .enhanced-footer.dark-theme,
+html[data-theme='dark'] .enhanced-footer.dark-theme {
   background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
-/* Force all text elements to maintain their colors */
-[data-theme='dark'] .enhanced-footer h1,
-[data-theme='dark'] .enhanced-footer h2,
-[data-theme='dark'] .enhanced-footer h3,
-[data-theme='dark'] .enhanced-footer h4,
-[data-theme='dark'] .enhanced-footer h5,
-[data-theme='dark'] .enhanced-footer h6,
-[data-theme='light'] .enhanced-footer h1,
-[data-theme='light'] .enhanced-footer h2,
-[data-theme='light'] .enhanced-footer h3,
-[data-theme='light'] .enhanced-footer h4,
-[data-theme='light'] .enhanced-footer h5,
-[data-theme='light'] .enhanced-footer h6 {
+[data-theme='light'] .enhanced-footer.light-theme,
+html[data-theme='light'] .enhanced-footer.light-theme {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%) !important;
+  color: #1e293b !important;
+}
+
+/* Force all text elements to maintain their colors based on theme */
+.enhanced-footer.dark-theme h1,
+.enhanced-footer.dark-theme h2,
+.enhanced-footer.dark-theme h3,
+.enhanced-footer.dark-theme h4,
+.enhanced-footer.dark-theme h5,
+.enhanced-footer.dark-theme h6 {
   color: #ffffff !important;
 }
 
-[data-theme='dark'] .enhanced-footer p,
-[data-theme='dark'] .enhanced-footer span,
-[data-theme='dark'] .enhanced-footer div,
-[data-theme='dark'] .enhanced-footer li,
-[data-theme='light'] .enhanced-footer p,
-[data-theme='light'] .enhanced-footer span,
-[data-theme='light'] .enhanced-footer div,
-[data-theme='light'] .enhanced-footer li {
+.enhanced-footer.light-theme h1,
+.enhanced-footer.light-theme h2,
+.enhanced-footer.light-theme h3,
+.enhanced-footer.light-theme h4,
+.enhanced-footer.light-theme h5,
+.enhanced-footer.light-theme h6 {
+  color: #1e293b !important;
+}
+
+.enhanced-footer.dark-theme p,
+.enhanced-footer.dark-theme span,
+.enhanced-footer.dark-theme div,
+.enhanced-footer.dark-theme li {
   color: #e2e8f0 !important;
 }
 
-[data-theme='dark'] .enhanced-footer a,
-[data-theme='light'] .enhanced-footer a {
+.enhanced-footer.light-theme p,
+.enhanced-footer.light-theme span,
+.enhanced-footer.light-theme div,
+.enhanced-footer.light-theme li {
+  color: #475569 !important;
+}
+
+.enhanced-footer.dark-theme a {
   color: #cbd5e1 !important;
 }
 
-[data-theme='dark'] .enhanced-footer a:hover,
-[data-theme='light'] .enhanced-footer a:hover {
+.enhanced-footer.light-theme a {
+  color: #334155 !important;
+}
+
+.enhanced-footer.dark-theme a:hover {
   color: #ffffff !important;
 }
 
+.enhanced-footer.light-theme a:hover {
+  color: #1e293b !important;
+}
+
 /* Specific protection for footer elements */
-[data-theme='dark'] .enhanced-footer .footer-brand-title,
-[data-theme='light'] .enhanced-footer .footer-brand-title {
+.enhanced-footer.dark-theme .footer-brand-title {
   color: #ffffff !important;
 }
 
-[data-theme='dark'] .enhanced-footer .footer-column-title,
-[data-theme='light'] .enhanced-footer .footer-column-title {
+.enhanced-footer.light-theme .footer-brand-title {
+  color: #1e293b !important;
+}
+
+.enhanced-footer.dark-theme .footer-column-title {
   color: #ffffff !important;
 }
 
-[data-theme='dark'] .enhanced-footer .footer-link,
-[data-theme='light'] .enhanced-footer .footer-link {
+.enhanced-footer.light-theme .footer-column-title {
+  color: #1e293b !important;
+}
+
+.enhanced-footer.dark-theme .footer-link {
   color: #cbd5e1 !important;
 }
 
+.enhanced-footer.light-theme .footer-link {
+  color: #334155 !important;
+}
+
 [data-theme='dark'] .enhanced-footer .footer-link:hover,
 [data-theme='light'] .enhanced-footer .footer-link:hover {
   color: #ffffff !important;
diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index 47fefe48..6a6eb5d3 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -1,6 +1,8 @@
 import React, { type ReactNode, useState, useEffect } from "react";
 import Link from "@docusaurus/Link";
 import type { Props } from "@theme/Footer/Layout";
+import { useColorMode } from '@docusaurus/theme-common';
+import clsx from 'clsx';
 import "./enhanced-footer.css";
 import Counter from "./Counter";
 import { createPortal } from "react-dom";
@@ -21,6 +23,9 @@ export default function FooterLayout({
   logo,
   copyright,
 }: Props): ReactNode {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === "dark";
+  
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
   const [stats, setStats] = useState<FooterStats>({
     activeUsers: "50K+",
@@ -89,7 +94,10 @@ export default function FooterLayout({
   };
 
   return (
-    <footer className="enhanced-footer">
+    <footer className={clsx(
+      "enhanced-footer",
+      isDark ? "dark-theme" : "light-theme"
+    )}>
       {/* Toast Notification */}
       {showToast &&
         createPortal(