diff --git a/frontend/app/[topic]/TopicLayout.tsx b/frontend/app/[topic]/TopicLayout.tsx
index f02ae13..d44d173 100644
--- a/frontend/app/[topic]/TopicLayout.tsx
+++ b/frontend/app/[topic]/TopicLayout.tsx
@@ -10,6 +10,7 @@
 
 import { useEffect, useMemo, useState, useRef, useCallback } from "react";
 import { useTheme } from "../../src/context/ThemeContext";
+import { useGitHubStats } from "../../src/hooks/useGitHubStats"; 
 import { useRouter } from "next/navigation";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
 import toast, { Toaster } from "react-hot-toast";
@@ -55,7 +56,8 @@ export default function TopicLayout({
   prevTopic?: { id: string; title?: string } | null;
   nextTopic?: { id: string; title?: string } | null;
 }) {
-  const { darkMode, toggleTheme } = useTheme();
+  // Removed `darkMode` - we only need toggleTheme for the button!
+  const { toggleTheme } = useTheme();
   const router = useRouter();
 
   const [domHeadings, setDomHeadings] = useState<Array<{ id: string; title: string; depth: number }>>([]);
@@ -68,17 +70,7 @@ export default function TopicLayout({
   const [expandedOutline, setExpandedOutline] = useState<Record<string, boolean>>({});
   const [activeOutlineId, setActiveOutlineId] = useState<string | null>(null);
 
-
-  const [githubStats, setGithubStats] = useState({
-    stars: "-",
-    openIssues: "-",
-    openPrs: "-",
-    mergedPrs: "-",
-    lastPush: "",
-    contributors: [] as any[],
-    loading: true
-  });
-
+  const githubStats = useGitHubStats();
 
   const progressBarRef = useRef<HTMLDivElement>(null);
   const scrollTopBtnRef = useRef<HTMLButtonElement>(null);
@@ -110,40 +102,6 @@ export default function TopicLayout({
     };
   }, [isMobileMenuOpen, cmdOpen]);
 
-  useEffect(() => {
-    const fetchGitHubStats = async () => {
-      try {
-        const [repoRes, openPrsRes, mergedPrsRes, issuesRes, contributorsRes] = await Promise.all([
-          fetch('https://api.github.com/repos/yash-pluto/refme').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:open').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:merged').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:issue+is:open').catch(() => null),
-          fetch('https://api.github.com/repos/yash-pluto/refme/contributors').catch(() => null)
-        ]);
-
-        const repoData = repoRes && repoRes.ok ? await repoRes.json() : {};
-        const openPrsData = openPrsRes && openPrsRes.ok ? await openPrsRes.json() : {};
-        const mergedPrsData = mergedPrsRes && mergedPrsRes.ok ? await mergedPrsRes.json() : {};
-        const issuesData = issuesRes && issuesRes.ok ? await issuesRes.json() : {};
-        const contributorsData = contributorsRes && contributorsRes.ok ? await contributorsRes.json() : [];
-
-        setGithubStats({
-          stars: repoData.stargazers_count !== undefined ? repoData.stargazers_count.toString() : "-",
-          openIssues: issuesData.total_count !== undefined ? issuesData.total_count.toString() : "-",
-          openPrs: openPrsData.total_count !== undefined ? openPrsData.total_count.toString() : "-",
-          mergedPrs: mergedPrsData.total_count !== undefined ? mergedPrsData.total_count.toString() : "-",
-          lastPush: repoData.pushed_at || repoData.updated_at || "",
-          contributors: Array.isArray(contributorsData) ? contributorsData : [],
-          loading: false
-        });
-      } catch (error) {
-        setGithubStats(prev => ({ ...prev, loading: false }));
-      }
-    };
-
-    fetchGitHubStats();
-  }, []);
-
   useEffect(() => {
     const article = document.querySelector("article");
     const headingNodes = article ? Array.from(article.querySelectorAll("h2[id], h3[id]")) : [];
@@ -257,15 +215,16 @@ export default function TopicLayout({
     });
   }, [outlineGroups]);
 
+  // REFACTORED: Converted all JS logic to pure Tailwind `dark:` classes
   const themeClasses = {
-    page: darkMode ? "bg-[#050505] text-[#F5F5F5]" : "bg-[#FFFFFF] text-[#111111]",
-    sidebar: darkMode ? "bg-[#101010]" : "bg-[#F7F7F7]",
-    header: darkMode ? "bg-[#050505]/90" : "bg-[#FFFFFF]/90",
-    border: darkMode ? "border-[#222222]" : "border-[#E5E5E5]",
-    muted: darkMode ? "text-zinc-400" : "text-zinc-500",
-    hoverAccent: darkMode ? "hover:text-[#C699FF]" : "hover:text-[#6f45d6]",
-    activeNavBg: darkMode ? "bg-[#C699FF]/15 text-[#C699FF]" : "bg-[#6f45d6]/10 text-[#6f45d6]",
-    inputBg: darkMode ? "bg-[#101010]" : "bg-[#F4F4F4]",
+    page: "bg-[#FFFFFF] text-[#111111] dark:bg-[#050505] dark:text-[#F5F5F5]",
+    sidebar: "bg-[#F7F7F7] dark:bg-[#101010]",
+    header: "bg-[#FFFFFF]/90 dark:bg-[#050505]/90",
+    border: "border-[#E5E5E5] dark:border-[#222222]",
+    muted: "text-zinc-500 dark:text-zinc-400",
+    hoverAccent: "hover:text-[#6f45d6] dark:hover:text-[#C699FF]",
+    activeNavBg: "bg-[#6f45d6]/10 text-[#6f45d6] dark:bg-[#C699FF]/15 dark:text-[#C699FF]",
+    inputBg: "bg-[#F4F4F4] dark:bg-[#101010]",
   };
 
   const getTopicIcon = (topicId: string) => {
@@ -330,10 +289,23 @@ export default function TopicLayout({
 
       <div ref={progressBarRef} className="fixed left-0 top-0 z-[100] h-[3px] bg-[#C699FF] will-change-[width]" style={{ width: "0%" }} />
 
-      <Toaster position="bottom-center" toastOptions={{ style: { background: darkMode ? '#111' : '#fff', color: darkMode ? '#fff' : '#111', border: `1px solid ${darkMode ? '#222' : '#E5E5E5'}` }}} />
-
-      <SearchPalette isOpen={cmdOpen} onClose={() => setCmdOpen(false)} searchData={searchData} onSelect={handleSearchSelect} placeholder="Search documentation or type a command..." />
-
+      {/* REFACTORED: Used !important classes to override react-hot-toast defaults via Tailwind instead of JS styles */}
+      <Toaster 
+        position="bottom-center" 
+        toastOptions={{ 
+          className: '!bg-white dark:!bg-[#111] !text-[#111] dark:!text-white !border !border-[#E5E5E5] dark:!border-[#222]' 
+        }} 
+      />
+
+    <SearchPalette 
+        isOpen={cmdOpen} 
+        onClose={() => setCmdOpen(false)} 
+        onToggle={() => setCmdOpen((prev) => !prev)}
+        searchData={searchData} 
+        onSelect={handleSearchSelect} 
+        placeholder="Search documentation or type a command..." 
+      />
+      
       {isMobileMenuOpen && <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm lg:hidden" onClick={() => setIsMobileMenuOpen(false)} />}
       
       <div className={`fixed bottom-0 left-0 top-0 z-50 w-[280px] transform border-r transition-transform duration-300 ease-in-out lg:hidden ${themeClasses.sidebar} ${themeClasses.border} ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`}>
@@ -386,8 +358,10 @@ export default function TopicLayout({
             </button>
           </div>
 
-          <button onClick={toggleTheme} className={`shrink-0 rounded-full border px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.2em] transition-colors ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.hoverAccent}`}>
-            {darkMode ? "Light" : "Dark"}
+          {/* REFACTORED: Used CSS display classes instead of JS ternary for the text! */}
+          <button onClick={toggleTheme} className={`shrink-0 flex justify-center items-center min-w-[70px] rounded-full border px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.2em] transition-colors ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.hoverAccent}`}>
+            <span className="block dark:hidden">Dark</span>
+            <span className="hidden dark:block">Light</span>
           </button>
         </div>
       </header>
@@ -439,7 +413,7 @@ export default function TopicLayout({
 
             <button 
               onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); setActiveOutlineId(null); }}
-              className={`shrink-0 text-[13px] font-medium transition-colors ${!activeGroupTitle ? (darkMode ? "text-[#C699FF]" : "text-[#6f45d6]") : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
+              className={`shrink-0 text-[13px] font-medium transition-colors ${!activeGroupTitle ? "text-[#6f45d6] dark:text-[#C699FF]" : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
             >
               {currentTopicTitle}
             </button>
@@ -449,7 +423,7 @@ export default function TopicLayout({
                 <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
                 <button 
                   onClick={() => activeGroupId && scrollToSection(activeGroupId)}
-                  className={`shrink-0 transition-colors text-[13px] font-medium ${!activeChildTitle ? (darkMode ? "text-[#C699FF]" : "text-[#6f45d6]") : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
+                  className={`shrink-0 transition-colors text-[13px] font-medium ${!activeChildTitle ? "text-[#6f45d6] dark:text-[#C699FF]" : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
                 >
                   {activeGroupTitle}
                 </button>
@@ -461,7 +435,7 @@ export default function TopicLayout({
                 <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
                 <button
                   onClick={() => activeChildId && scrollToSection(activeChildId)}
-                  className={`shrink-0 px-2 py-0.5 rounded text-[13px] font-medium ${darkMode ? "bg-[#C699FF]/15 text-[#C699FF]" : "bg-[#6f45d6]/10 text-[#6f45d6]"}`}
+                  className={`shrink-0 px-2 py-0.5 rounded text-[13px] font-medium bg-[#6f45d6]/10 text-[#6f45d6] dark:bg-[#C699FF]/15 dark:text-[#C699FF]`}
                 >
                   {activeChildTitle}
                 </button>
@@ -482,13 +456,13 @@ export default function TopicLayout({
                     <div className={`border-t px-4 py-4 space-y-4 ${themeClasses.border}`}>
                       {outlineGroups.map((group) => (
                         <div key={group.id} className="space-y-2">
-                          <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); setIsMobileTocOpen(false); }} className={`block text-[14px] font-medium ${activeOutlineId === group.id ? (darkMode ? "text-[#C699FF]" : "text-[#6f45d6]") : themeClasses.muted}`}>
+                          <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); setIsMobileTocOpen(false); }} className={`block text-[14px] font-medium ${activeOutlineId === group.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
                             {group.title}
                           </a>
                           {group.items.length > 0 && (
                             <div className={`ml-1 space-y-2 border-l pl-3 ${themeClasses.border}`}>
                               {group.items.map((item) => (
-                                <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); setIsMobileTocOpen(false); }} className={`block text-[13px] font-medium ${activeOutlineId === item.id ? (darkMode ? "text-[#C699FF]" : "text-[#6f45d6]") : themeClasses.muted}`}>
+                                <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); setIsMobileTocOpen(false); }} className={`block text-[13px] font-medium ${activeOutlineId === item.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
                                   {item.title}
                                 </a>
                               ))}
@@ -508,10 +482,8 @@ export default function TopicLayout({
               {children}
             </article>
 
-            {/* Combined Bottom Section */}
             <div className={`mt-10 xl:mt-16 flex flex-col items-center justify-center gap-10 border-t pt-10 ${themeClasses.border}`}>
               
-              {/* Center Aligned Feedback Section */}
               <div className="relative flex items-center justify-center h-8 w-full">
                 <div className={`absolute inset-0 flex items-center justify-center w-full gap-4 transition-opacity duration-300 ${feedbackSubmitted ? "opacity-0 pointer-events-none" : "opacity-100"}`}>
                   <span className={`text-[13px] font-medium ${themeClasses.muted}`}>Was this page helpful?</span>
@@ -537,19 +509,19 @@ export default function TopicLayout({
                 </div>
               </div>
 
-              {/* Updated Dynamic GitHub Widget */}
-              <div className={`relative z-10 flex flex-col rounded-3xl border w-full max-w-2xl mx-auto shadow-sm overflow-hidden ${darkMode ? "bg-[#0a0a0a] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
-                <div className={`p-6 sm:p-8 border-b ${darkMode ? "bg-[#111] border-[#333]" : "bg-zinc-50 border-[#E5E5E5]"}`}>
+              {/* REFACTORED: Completely eliminated JS conditional rendering for the GitHub widget */}
+              <div className={`relative z-10 flex flex-col rounded-3xl border w-full max-w-2xl mx-auto shadow-sm overflow-hidden bg-white border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-[#333]`}>
+                <div className={`p-6 sm:p-8 border-b bg-zinc-50 border-[#E5E5E5] dark:bg-[#111] dark:border-[#333]`}>
                   <div className="flex items-start justify-between mb-8">
                     <div className="flex items-center gap-5">
                       <img 
                         src="https://github.com/yash-pluto.png" 
                         alt="Yash Vardhan" 
-                        className={`h-20 w-20 rounded-full border-4 shadow-sm ${darkMode ? "border-[#222]" : "border-white"}`} 
+                        className={`h-20 w-20 rounded-full border-4 shadow-sm border-white dark:border-[#222]`} 
                       />
                       <div>
                         <div className="flex items-center gap-2 mb-1">
-                          <a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className={`text-2xl font-extrabold tracking-tight hover:underline ${darkMode ? "text-white" : "text-black"}`}>
+                          <a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className={`text-2xl font-extrabold tracking-tight hover:underline text-black dark:text-white`}>
                             Yash-Pluto
                           </a>
                           <BadgeCheck size={20} className="text-[#C699FF]" />
@@ -558,58 +530,58 @@ export default function TopicLayout({
                       </div>
                     </div>
                     <a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className="pt-1 hidden sm:block">
-                      <FaGithub size={32} className={`${darkMode ? "text-white" : "text-zinc-900"} hover:opacity-70 transition-opacity`} />
+                      <FaGithub size={32} className={`text-zinc-900 dark:text-white hover:opacity-70 transition-opacity`} />
                     </a>
                   </div>
                   
-                  <p className={`text-[15px] leading-relaxed mb-6 ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <p className={`text-[15px] leading-relaxed mb-6 text-zinc-700 dark:text-zinc-300`}>
                     Join the community building the ultimate quick-reference. Contributions are welcome for all categories and languages.
                   </p>
 
                   <div className="flex flex-col sm:flex-row flex-wrap gap-3">
-                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border ${darkMode ? "bg-[#1a1a1a] border-[#333] shadow-inner" : "bg-white border-[#E5E5E5] shadow-sm"}`}>
+                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#1a1a1a] dark:border-[#333] dark:shadow-inner`}>
                       <span className="text-[#C699FF] text-base font-black">✓</span>
-                      <span className={`text-xs font-bold uppercase tracking-wide ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>Open Source Architecture</span>
+                      <span className={`text-xs font-bold uppercase tracking-wide text-zinc-700 dark:text-zinc-300`}>Open Source Architecture</span>
                     </div>
-                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border ${darkMode ? "bg-[#1a1a1a] border-[#333] shadow-inner" : "bg-white border-[#E5E5E5] shadow-sm"}`}>
+                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#1a1a1a] dark:border-[#333] dark:shadow-inner`}>
                       <span className="text-[#C699FF] text-base font-black">✓</span>
-                      <span className={`text-xs font-bold uppercase tracking-wide ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>Community Driven Updates</span>
+                      <span className={`text-xs font-bold uppercase tracking-wide text-zinc-700 dark:text-zinc-300`}>Community Driven Updates</span>
                     </div>
                   </div>
                 </div>
 
                 <div className="p-6 sm:p-8">
                   <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <GitPullRequest size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Open PRs</span>
                       </div>
-                      <span className={`text-2xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.openPrs}</span>
+                      <span className={`text-2xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openPrs}</span>
                     </div>
                     
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <GitMerge size={16} className="text-purple-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Merged</span>
                       </div>
-                      <span className={`text-2xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.mergedPrs}</span>
+                      <span className={`text-2xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.mergedPrs}</span>
                     </div>
 
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <CircleDot size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Issues</span>
                       </div>
-                      <span className={`text-2xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.openIssues}</span>
+                      <span className={`text-2xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openIssues}</span>
                     </div>
 
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <Star size={16} className="text-amber-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Stars</span>
                       </div>
-                      <span className={`text-2xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.stars}</span>
+                      <span className={`text-2xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.stars}</span>
                     </div>
                   </div>
 
@@ -624,7 +596,7 @@ export default function TopicLayout({
                                 src={user.avatar_url} 
                                 alt={user.login}
                                 title={user.login}
-                                className={`h-10 w-10 rounded-full border-[3px] ${darkMode ? 'border-[#0a0a0a]' : 'border-white'} shadow-md`}
+                                className={`h-10 w-10 rounded-full border-[3px] border-white dark:border-[#0a0a0a] shadow-md`}
                                 style={{ zIndex: 10 - idx, opacity: 1 - (idx * 0.12) }} 
                               />
                             ))}
@@ -641,7 +613,7 @@ export default function TopicLayout({
                         href={`https://github.com/yash-pluto/refme/edit/main/frontend/content/${topicKey}.mdx`} 
                         target="_blank" 
                         rel="noopener noreferrer" 
-                        className={`flex flex-1 sm:flex-none justify-center items-center gap-2 rounded-xl px-4 py-3 text-[13px] font-bold border transition-colors ${darkMode ? "border-[#333] hover:bg-white/5 text-zinc-300" : "border-[#E5E5E5] hover:bg-black/5 text-zinc-700"}`}
+                        className={`flex flex-1 sm:flex-none justify-center items-center gap-2 rounded-xl px-4 py-3 text-[13px] font-bold border transition-colors border-[#E5E5E5] hover:bg-black/5 text-zinc-700 dark:border-[#333] dark:hover:bg-white/5 dark:text-zinc-300`}
                       >
                         Edit Page
                       </a>
@@ -649,7 +621,7 @@ export default function TopicLayout({
                         href="https://github.com/yash-pluto/refme" 
                         target="_blank" 
                         rel="noopener noreferrer" 
-                        className={`flex flex-1 sm:flex-none justify-center items-center gap-2 rounded-xl px-5 py-3 text-[13px] font-bold transition-all active:scale-[0.98] ${darkMode ? "bg-white text-black hover:bg-zinc-200" : "bg-black text-white hover:bg-zinc-800"}`}
+                        className={`flex flex-1 sm:flex-none justify-center items-center gap-2 rounded-xl px-5 py-3 text-[13px] font-bold transition-all active:scale-[0.98] bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
                       >
                         <FaGithub size={16} /> Contribute
                       </a>
@@ -693,13 +665,13 @@ export default function TopicLayout({
                   const isActiveGroup = activeOutlineId === group.id;
                   return (
                     <div key={group.id} className="mb-4">
-                      <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); }} className={`block text-[13px] tracking-tight font-semibold leading-snug transition-colors mb-2 ${isActiveGroup ? (darkMode ? "text-[#C699FF] drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)]") : `${themeClasses.muted} hover:text-current`}`}>
+                      <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); }} className={`block text-[13px] tracking-tight font-semibold leading-snug transition-colors mb-2 ${isActiveGroup ? "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)] dark:text-[#C699FF] dark:drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : `${themeClasses.muted} hover:text-current`}`}>
                         {group.title}
                       </a>
                       {group.items.length > 0 && (
                         <div className={`border-l ml-[3px] pl-3 mt-1 space-y-2 ${themeClasses.border}`}>
                           {group.items.map((item) => (
-                            <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); }} className={`block text-[12px] font-medium leading-snug transition-colors ${activeOutlineId === item.id ? (darkMode ? "text-[#C699FF] drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)]") : `${themeClasses.muted} hover:text-current`}`}>
+                            <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); }} className={`block text-[12px] font-medium leading-snug transition-colors ${activeOutlineId === item.id ? "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)] dark:text-[#C699FF] dark:drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : `${themeClasses.muted} hover:text-current`}`}>
                               {item.title}
                             </a>
                           ))}
@@ -719,7 +691,7 @@ export default function TopicLayout({
       <button
         ref={scrollTopBtnRef}
         onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-        className={`fixed bottom-24 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-full border shadow-lg transition-all duration-300 md:bottom-24 md:right-12 pointer-events-none translate-y-8 opacity-0 ${darkMode ? "bg-[#101010] border-[#333]" : "bg-white border-[#E5E5E5]"} ${themeClasses.hoverAccent}`}
+        className={`fixed bottom-24 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-full border shadow-lg transition-all duration-300 md:bottom-24 md:right-12 pointer-events-none translate-y-8 opacity-0 bg-white border-[#E5E5E5] dark:bg-[#101010] dark:border-[#333] ${themeClasses.hoverAccent}`}
         aria-label="Scroll to top"
       >
         <ArrowUp size={18} />
diff --git a/frontend/app/[topic]/page.tsx b/frontend/app/[topic]/page.tsx
index 7087dc6..06b1898 100644
--- a/frontend/app/[topic]/page.tsx
+++ b/frontend/app/[topic]/page.tsx
@@ -20,10 +20,18 @@ const mdxComponents = {
   },
 };
 
+export async function generateStaticParams() {
+  const topics = getAllTopics();
+  
+  return topics.map((topic) => ({
+    topic: topic.id,
+  }));
+}
+
 export default async function TopicPage({
   params,
 }: {
-  params: { topic: string };
+  params: Promise<{ topic: string }>;
 }) {
   const resolvedParams = await params;
   const topicData = getTopicBySlug(resolvedParams.topic);
@@ -62,4 +70,4 @@ export default async function TopicPage({
       <MDXRemote source={topicData.content} components={mdxComponents} />
     </TopicLayout>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/components/Callout.tsx b/frontend/app/components/Callout.tsx
index 0dd1633..324fdd2 100644
--- a/frontend/app/components/Callout.tsx
+++ b/frontend/app/components/Callout.tsx
@@ -1,5 +1,3 @@
-"use client";
-import { useTheme } from "../../src/context/ThemeContext";
 import { Info, AlertTriangle, Lightbulb, ShieldAlert } from "lucide-react";
 
 type CalloutType = "info" | "tip" | "warning" | "danger";
@@ -13,31 +11,25 @@ export default function Callout({
   title?: string;
   children: React.ReactNode;
 }) {
-  const { darkMode } = useTheme();
-
   const config = {
     info: {
       icon: Info,
-      light: "bg-blue-50 border-blue-200 text-blue-900",
-      dark: "bg-blue-950/30 border-blue-900/50 text-blue-200",
+      styles: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/30 dark:border-blue-900/50 dark:text-blue-200",
       iconColor: "text-blue-500",
     },
     tip: {
       icon: Lightbulb,
-      light: "bg-emerald-50 border-emerald-200 text-emerald-900",
-      dark: "bg-emerald-950/30 border-emerald-900/50 text-emerald-200",
+      styles: "bg-emerald-50 border-emerald-200 text-emerald-900 dark:bg-emerald-950/30 dark:border-emerald-900/50 dark:text-emerald-200",
       iconColor: "text-emerald-500",
     },
     warning: {
       icon: AlertTriangle,
-      light: "bg-amber-50 border-amber-200 text-amber-900",
-      dark: "bg-amber-950/30 border-amber-900/50 text-amber-200",
+      styles: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950/30 dark:border-amber-900/50 dark:text-amber-200",
       iconColor: "text-amber-500",
     },
     danger: {
       icon: ShieldAlert,
-      light: "bg-red-50 border-red-200 text-red-900",
-      dark: "bg-red-950/30 border-red-900/50 text-red-200",
+      styles: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/30 dark:border-red-900/50 dark:text-red-200",
       iconColor: "text-red-500",
     },
   };
@@ -47,9 +39,7 @@ export default function Callout({
 
   return (
     <div
-      className={`my-6 flex gap-3 rounded-xl border p-4 ${
-        darkMode ? activeConfig.dark : activeConfig.light
-      } transition-colors duration-200`}
+      className={`my-6 flex gap-3 rounded-xl border p-4 ${activeConfig.styles} transition-colors duration-200`}
     >
       <div className="mt-0.5 shrink-0">
         <Icon size={18} className={activeConfig.iconColor} />
diff --git a/frontend/app/components/ClientCodeBlock.tsx b/frontend/app/components/ClientCodeBlock.tsx
index 0855c49..c3b819b 100644
--- a/frontend/app/components/ClientCodeBlock.tsx
+++ b/frontend/app/components/ClientCodeBlock.tsx
@@ -2,15 +2,14 @@
 
 /**
  * @fileoverview Reusable Client-side Code Block component with syntax highlighting.
- * Safely handles server-side rendering (SSR) hydration mismatches, applies a custom 
- * "Pitch Black" textmate theme mapping, and enforces strict flex boundaries to 
- * prevent mobile viewport overflow.
+ * Applies a custom "Pitch Black" textmate theme mapping, and enforces strict flex 
+ * boundaries to prevent mobile viewport overflow.
  *
  * @author Yash Vardhan
  */
 
 import { useTheme } from "../../src/context/ThemeContext";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Copy, Check, FileCode2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
@@ -31,19 +30,10 @@ export default function ClientCodeBlock({
   filename,
   highlightLines = [],
 }: ClientCodeBlockProps) {
-  const { darkMode } = useTheme();
-  
-  // Track mount state to defer rendering of browser-specific APIs (clipboard, highlighter)
-  const [mounted, setMounted] = useState(false);
+  // Grab `mounted` to defer the Javascript-heavy SyntaxHighlighter
+  const { darkMode, mounted } = useTheme();
   const [copied, setCopied] = useState(false);
 
-  /**
-   * Initializes the component safely on the client.
-   * Prevents React Hydration Mismatch errors caused by rendering 
-   * theme-dependent or layout-heavy nodes on the server.
-   */
-  useEffect(() => setMounted(true), []);
-
   /**
    * Writes the active code block to the system clipboard.
    * Temporarily toggles the copied state for visual feedback.
@@ -60,7 +50,6 @@ export default function ClientCodeBlock({
 
   /**
    * Pitch Black Theme Mapping
-   * Mapped directly from the custom VSCode textmate token JSON.
    */
   const pitchBlackModernStyle = {
     'code[class*="language-"]': {
@@ -179,46 +168,22 @@ export default function ClientCodeBlock({
     delete: { background: '#F4F4F0' },
   };
 
-  /**
-   * Theme-aware structural classes.
-   * Matches the newly provided VSCode palette for borders and active tabs.
-   */
-  const theme = {
-    border: darkMode ? "border-[#232323]" : "border-[#D1D1D1]",
-    headerBg: darkMode ? "bg-[#101010]" : "bg-[#EAEAEA]",
-    codeBg: darkMode ? "bg-[#101010]" : "bg-[#F4F4F0]",
-    text: darkMode ? "text-[#FFF]" : "text-zinc-700",
-    iconHover: darkMode ? "hover:text-[#C699FF]" : "hover:text-indigo-600",
-  };
-
-  // Render a structural skeleton while waiting for client hydration
-  if (!mounted) {
-    return (
-      <div
-        className={`w-full h-48 animate-pulse rounded-md mb-8 mt-4 border ${darkMode ? "bg-[#101010] border-[#232323]" : "bg-[#EAEAEA] border-[#D1D1D1]"}`}
-      ></div>
-    );
-  }
-
   return (
     <div
-      className={`w-full min-w-0 border ${theme.border} flex flex-col mb-8 mt-4 rounded-md overflow-hidden transition-colors duration-200`}
+      suppressHydrationWarning
+      className="w-full min-w-0 border border-[#D1D1D1] dark:border-[#232323] flex flex-col mb-8 mt-4 rounded-md overflow-hidden transition-colors duration-200"
     >
-      <div
-        className={`w-full flex items-center justify-between px-4 py-2.5 border-b ${theme.border} ${theme.headerBg} transition-colors duration-200`}
-      >
+      <div className="w-full flex items-center justify-between px-4 py-2.5 border-b border-[#D1D1D1] dark:border-[#232323] bg-[#EAEAEA] dark:bg-[#101010] transition-colors duration-200">
         <div className="flex items-center gap-2">
           {filename ? (
             <>
               <FileCode2 size={14} className="opacity-60 text-[#A0A0A0]" />
-              <span className={`font-mono text-xs font-medium ${theme.text}`}>
+              <span className="font-mono text-xs font-medium text-zinc-700 dark:text-[#FFF]">
                 {filename}
               </span>
             </>
           ) : (
-            <span
-              className={`font-mono text-[10px] font-bold uppercase tracking-widest opacity-70 ${theme.text}`}
-            >
+            <span className="font-mono text-[10px] font-bold uppercase tracking-widest opacity-70 text-zinc-700 dark:text-[#FFF]">
               {language}
             </span>
           )}
@@ -226,55 +191,57 @@ export default function ClientCodeBlock({
         
         <button
           onClick={copyToClipboard}
-          className={`opacity-50 ${theme.iconHover} transition-colors`}
+          className="opacity-50 hover:text-indigo-600 dark:hover:text-[#C699FF] transition-colors"
           aria-label="Copy code"
         >
           {copied ? (
-            <Check
-              size={15}
-              className={darkMode ? "text-[#99FFE4]" : "text-emerald-600"}
-            />
+            <Check size={15} className="text-emerald-600 dark:text-[#99FFE4]" />
           ) : (
             <Copy size={15} />
           )}
         </button>
       </div>
 
-      <div
-        className={`w-full py-4 overflow-x-auto ${theme.codeBg} transition-colors duration-200`}
-      >
-        <SyntaxHighlighter
-          language={language}
-          style={darkMode ? pitchBlackModernStyle : softLightModernStyle}
-          wrapLines={true}
-          lineProps={(lineNumber) => {
-            const isHighlighted = highlightLines.includes(lineNumber);
-            return {
-              style: {
-                display: "block",
-                minWidth: "fit-content", // Ensures highlights stretch across scrollable container
-                backgroundColor: isHighlighted 
-                  ? (darkMode ? "rgba(198, 153, 255, 0.1)" : "rgba(111, 69, 214, 0.1)") 
-                  : "transparent",
-                borderLeft: isHighlighted 
-                  ? (darkMode ? "3px solid #C699FF" : "3px solid #6f45d6") 
-                  : "3px solid transparent",
-                paddingLeft: "13px",
-                paddingRight: "16px",
-              }
-            };
-          }}
-          customStyle={{
-            background: "transparent",
-            padding: 0,
-            margin: 0,
-            fontSize: "0.9rem",
-            lineHeight: "1.7",
-            overflowX: "auto", 
-          }}
-        >
-          {code}
-        </SyntaxHighlighter>
+      <div className="w-full py-4 overflow-x-auto bg-[#F4F4F0] dark:bg-[#101010] transition-colors duration-200">
+        {/* Render a height-preserving invisible block before hydration, then swap to real highlighter */}
+        {!mounted ? (
+          <pre className="m-0 p-0 text-[0.9rem] leading-[1.7] opacity-0" aria-hidden="true">
+            <code>{code}</code>
+          </pre>
+        ) : (
+          <SyntaxHighlighter
+            language={language}
+            style={darkMode ? pitchBlackModernStyle : softLightModernStyle}
+            wrapLines={true}
+            lineProps={(lineNumber) => {
+              const isHighlighted = highlightLines.includes(lineNumber);
+              return {
+                style: {
+                  display: "block",
+                  minWidth: "fit-content",
+                  backgroundColor: isHighlighted 
+                    ? (darkMode ? "rgba(198, 153, 255, 0.1)" : "rgba(111, 69, 214, 0.1)") 
+                    : "transparent",
+                  borderLeft: isHighlighted 
+                    ? (darkMode ? "3px solid #C699FF" : "3px solid #6f45d6") 
+                    : "3px solid transparent",
+                  paddingLeft: "13px",
+                  paddingRight: "16px",
+                }
+              };
+            }}
+            customStyle={{
+              background: "transparent",
+              padding: 0,
+              margin: 0,
+              fontSize: "0.9rem",
+              lineHeight: "1.7",
+              overflowX: "auto", 
+            }}
+          >
+            {code}
+          </SyntaxHighlighter>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/app/components/DirectoryList.tsx b/frontend/app/components/DirectoryList.tsx
deleted file mode 100644
index 2b67965..0000000
--- a/frontend/app/components/DirectoryList.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-// app/components/DirectoryList.tsx
-"use client";
-
-import Link from "next/link";
-import { cloneElement } from "react";
-import { REFERENCE_DATA } from "../page";
-import { ArrowRight } from "lucide-react";
-
-interface DirectoryListProps {
-  darkMode: boolean;
-  searchQuery: string;
-}
-
-export default function DirectoryList({
-  darkMode,
-  searchQuery,
-}: DirectoryListProps) {
-  const filteredData = REFERENCE_DATA.map((section) => ({
-    ...section,
-    items: section.items.filter((item) =>
-      item.name.toLowerCase().includes(searchQuery.toLowerCase()),
-    ),
-  })).filter((section) => section.items.length > 0);
-
-  if (filteredData.length === 0) {
-    return (
-      <div className={`rounded-3xl border p-10 text-sm ${darkMode ? "border-[#1f1f1f] bg-[#0d0d0d] text-[#b9b9b9]" : "border-[#e1dfd8] bg-[#f7f5f1] text-[#4f5863]"}`}>
-        No matching entries found.
-      </div>
-    );
-  }
-
-  return (
-    <div className='space-y-6 pb-8'>
-      {filteredData.map((section) => (
-        <section key={section.category} className='space-y-4'>
-          <div className='flex items-center gap-3 px-1'>
-            <div className={`flex h-8 w-8 items-center justify-center rounded-xl border ${darkMode ? "border-[#1f1f1f] bg-[#101010] text-zinc-200" : "border-[#e3e0d9] bg-[#f1efe9] text-[#111111]"}`}>
-              {cloneElement(section.icon, {
-                className: "block",
-                style: { color: darkMode ? "#f4f4f5" : "#111111" },
-              })}
-            </div>
-            <h2 className='text-[11px] font-semibold uppercase tracking-[0.26em] text-zinc-500'>
-              {section.category}
-            </h2>
-          </div>
-
-          <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
-            {section.items.map((item) => {
-              const iconNode = cloneElement(item.icon, {
-                className: "block",
-                style: {
-                  color: darkMode ? "#f4f4f5" : "#111111",
-                  opacity: 1,
-                },
-              });
-
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className={`group relative overflow-hidden rounded-3xl border p-5 transition-colors ${darkMode ? "border-[#1f1f1f] bg-[#0d0d0d] hover:bg-[#121212]" : "border-[#e1dfd8] bg-[#f9f7f4] hover:bg-[#f3f0ea]"}`}
-                >
-                  <div className='mb-5 flex items-center justify-between'>
-                    <div className={`flex h-11 w-11 items-center justify-center rounded-2xl border ${darkMode ? "border-white/10 bg-white/5" : "border-[#d9d4cd] bg-[#f0eee8]"}`}>
-                      {iconNode}
-                    </div>
-
-                    <div className='flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.22em] text-zinc-500'>
-                      Open
-                      <ArrowRight size={14} />
-                    </div>
-                  </div>
-
-                  <div className='space-y-2'>
-                    <h3 className='text-2xl font-bold tracking-[-0.05em]'>{item.name}</h3>
-                    <p className={`text-sm leading-6 ${darkMode ? "text-[#a9afb7]" : "text-[#4f5863]"}`}>
-                      {item.desc}
-                    </p>
-                  </div>
-                </Link>
-              );
-            })}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/app/components/Footer.tsx b/frontend/app/components/Footer.tsx
index 98830eb..bcf6a26 100644
--- a/frontend/app/components/Footer.tsx
+++ b/frontend/app/components/Footer.tsx
@@ -1,40 +1,23 @@
-// Footer.tsx
 "use client";
 
 import Link from "next/link";
-import { useTheme } from "../../src/context/ThemeContext";
 import { FaGithub, FaLinkedin, FaYoutube, FaTwitter } from "react-icons/fa";
 
 export default function Footer() {
-  const { darkMode } = useTheme();
-
-  const themeClasses = {
-    bg: darkMode ? "bg-[#050505]" : "bg-zinc-50",
-    border: darkMode ? "border-[#333]" : "border-[#E5E5E5]",
-    text: darkMode ? "text-zinc-400" : "text-zinc-500",
-    hover: darkMode ? "hover:text-white" : "hover:text-black",
-    heading: darkMode ? "text-white" : "text-black",
-    iconBtn: darkMode ? "border-[#333] hover:bg-[#1a1a1a]" : "border-[#E5E5E5] hover:bg-zinc-200",
-  };
-
-  const watermarkStroke = darkMode
-    ? "rgba(255, 255, 255, 0.82)"
-    : "rgba(0, 0, 0, 0.72)";
-
   return (
-    <footer className={`w-full ${themeClasses.bg} border-t ${themeClasses.border} pt-10 pb-6 overflow-hidden mt-auto relative`}>
+    <footer className="w-full bg-zinc-50 dark:bg-[#050505] border-t border-[#E5E5E5] dark:border-[#333] pt-10 pb-6 overflow-hidden mt-auto relative">
       <div className="mx-auto max-w-[1400px] px-4 md:px-6 lg:px-8">
         
         <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-6 mb-2">
           <div className="md:col-span-4 lg:col-span-5 flex flex-col gap-4">
-            <p className={`text-[14px] font-semibold max-w-xs leading-relaxed ${themeClasses.heading}`}>
+            <p className="text-[14px] font-semibold max-w-xs leading-relaxed text-black dark:text-white">
               RefMe is the modern and intuitive way to master tech stacks and build exceptional products.
             </p>
             <div className="flex items-center gap-3">
-              <a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className={`flex h-9 w-9 items-center justify-center rounded-xl border transition-colors ${themeClasses.iconBtn} ${themeClasses.heading}`}>
+              <a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className="flex h-9 w-9 items-center justify-center rounded-xl border transition-colors border-[#E5E5E5] dark:border-[#333] hover:bg-zinc-200 dark:hover:bg-[#1a1a1a] text-black dark:text-white">
                 <FaGithub size={15} />
               </a>
-              <a href="https://linkedin.com/in/vardhan-yash3105" target="_blank" rel="noopener noreferrer" className={`flex h-9 w-9 items-center justify-center rounded-xl border transition-colors ${themeClasses.iconBtn} ${themeClasses.heading}`}>
+              <a href="https://linkedin.com/in/vardhan-yash3105" target="_blank" rel="noopener noreferrer" className="flex h-9 w-9 items-center justify-center rounded-xl border transition-colors border-[#E5E5E5] dark:border-[#333] hover:bg-zinc-200 dark:hover:bg-[#1a1a1a] text-black dark:text-white">
                 <FaLinkedin size={15} />
               </a>
             </div>
@@ -42,34 +25,34 @@ export default function Footer() {
 
           <div className="md:col-span-8 lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-6">
             <div className="flex flex-col gap-3">
-              <h4 className={`text-[13px] font-bold border-b pb-2 ${themeClasses.border} ${themeClasses.heading}`}>Product</h4>
+              <h4 className="text-[13px] font-bold border-b pb-2 border-[#E5E5E5] dark:border-[#333] text-black dark:text-white">Product</h4>
               <ul className="flex flex-col gap-2">
-                <li><Link href="/updates" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Product Updates</Link></li>
-                <li><Link href="/roadmaps" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Roadmaps</Link></li>
-                <li><Link href="/tutorials" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Video Tutorials</Link></li>
+                <li><Link href="/updates" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Product Updates</Link></li>
+                <li><Link href="/roadmaps" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Roadmaps</Link></li>
+                <li><Link href="/tutorials" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Video Tutorials</Link></li>
               </ul>
             </div>
             
             <div className="flex flex-col gap-3">
-              <h4 className={`text-[13px] font-bold border-b pb-2 ${themeClasses.border} ${themeClasses.heading}`}>Resources</h4>
+              <h4 className="text-[13px] font-bold border-b pb-2 border-[#E5E5E5] dark:border-[#333] text-black dark:text-white">Resources</h4>
               <ul className="flex flex-col gap-2">
-                <li><Link href="/stories" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Customer stories</Link></li>
-                <li><Link href="/docs" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Product docs</Link></li>
-                <li><Link href="/philosophy" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Philosophy</Link></li>
+                <li><Link href="/stories" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Customer stories</Link></li>
+                <li><Link href="/docs" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Product docs</Link></li>
+                <li><Link href="/philosophy" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Philosophy</Link></li>
               </ul>
             </div>
 
             <div className="flex flex-col gap-3">
-              <h4 className={`text-[13px] font-bold border-b pb-2 ${themeClasses.border} ${themeClasses.heading}`}>Company</h4>
+              <h4 className="text-[13px] font-bold border-b pb-2 border-[#E5E5E5] dark:border-[#333] text-black dark:text-white">Company</h4>
               <ul className="flex flex-col gap-2">
-                <li><a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>About</a></li>
+                <li><a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">About</a></li>
                 <li>
-                  <Link href="/careers" className={`inline-flex items-center gap-2 text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>
+                  <Link href="/careers" className="inline-flex items-center gap-2 text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">
                     Careers
-                    <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${darkMode ? "bg-[#222] text-zinc-300" : "bg-zinc-200 text-zinc-700"}`}>WE'RE HIRING</span>
+                    <span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-zinc-200 text-zinc-700 dark:bg-[#222] dark:text-zinc-300">WE'RE HIRING</span>
                   </Link>
                 </li>
-                <li><a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className={`text-[13px] font-medium transition-colors ${themeClasses.text} ${themeClasses.hover}`}>Open Source</a></li>
+                <li><a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className="text-[13px] font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white">Open Source</a></li>
               </ul>
             </div>
           </div>
@@ -81,22 +64,13 @@ export default function Footer() {
           style={{ height: "clamp(65px, 10vw, 150px)" }}
         >
          <div
-          className="absolute left-1/2 flex w-max -translate-x-1/2 items-start justify-center whitespace-nowrap font-black uppercase"
+          className="absolute left-1/2 flex w-max -translate-x-1/2 items-start justify-center whitespace-nowrap font-black uppercase text-[#fafafa] dark:text-[#050505] [-webkit-text-stroke:3px_rgba(0,0,0,0.72)] dark:[-webkit-text-stroke:3px_rgba(255,255,255,0.82)] [text-shadow:0_0_10px_rgba(0,0,0,1),_0_0_10px_rgba(0,0,0,10)] dark:[text-shadow:0_0_10px_#FFFFFF,_0_0_30px_#FFFFFF]"
           style={{
             fontSize: "clamp(75px, 14vw, 200px)",
             bottom: "-40%",
             lineHeight: "0.78",
             letterSpacing: "0.045em",
             paddingLeft: "0.045em",
-            
-            textShadow: darkMode 
-              ? "0 0 10px #FFFFFF, 0 0 30px #FFFFFF" 
-              : "0 0 10px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,10)", 
-
-            color: darkMode ? "#050505" : "#fafafa", 
-            
-            WebkitTextStroke: `3px ${watermarkStroke}`,
-            
             WebkitMaskImage: `
               linear-gradient(
                 to bottom,
@@ -125,22 +99,17 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className={`relative flex flex-col sm:flex-row items-center justify-between gap-4 pt-5 border-t ${themeClasses.border} text-[13px] font-medium ${themeClasses.text}`}>
+        <div className="relative flex flex-col sm:flex-row items-center justify-between gap-4 pt-5 border-t border-[#E5E5E5] dark:border-[#333] text-[13px] font-medium text-zinc-500 dark:text-zinc-400">
           
           <div 
-            className="absolute top-0 left-0 w-full h-[95px] -translate-y-full pointer-events-none z-10"
-            style={{
-              background: darkMode 
-                ? 'linear-gradient(to top, #050505 10%, rgba(5,5,5,0.85) 40%, transparent 100%)' 
-                : 'linear-gradient(to top, #fafafa 10%, rgba(250,250,250,0.85) 40%, transparent 100%)'
-            }}
+            className="absolute top-0 left-0 w-full h-[95px] -translate-y-full pointer-events-none z-10 bg-[linear-gradient(to_top,#fafafa_10%,rgba(250,250,250,0.85)_40%,transparent_100%)] dark:bg-[linear-gradient(to_top,#050505_10%,rgba(5,5,5,0.85)_40%,transparent_100%)]"
           />
 
           <p className="relative z-20">© 2026 RefMe</p>
           <div className="flex items-center gap-6 relative z-20">
-            <Link href="/security" className={`transition-colors ${themeClasses.hover}`}>Security</Link>
-            <Link href="/terms" className={`transition-colors ${themeClasses.hover}`}>Terms of service</Link>
-            <Link href="/privacy" className={`transition-colors ${themeClasses.hover}`}>Privacy policy</Link>
+            <Link href="/security" className="transition-colors hover:text-black dark:hover:text-white">Security</Link>
+            <Link href="/terms" className="transition-colors hover:text-black dark:hover:text-white">Terms of service</Link>
+            <Link href="/privacy" className="transition-colors hover:text-black dark:hover:text-white">Privacy policy</Link>
           </div>
         </div>
       </div>
diff --git a/frontend/app/components/MdxTypography.tsx b/frontend/app/components/MdxTypography.tsx
index 516537a..f9011c8 100644
--- a/frontend/app/components/MdxTypography.tsx
+++ b/frontend/app/components/MdxTypography.tsx
@@ -1,7 +1,4 @@
-// app/components/MdxTypography.tsx
-"use client";
 import React from "react";
-import { useTheme } from "../../src/context/ThemeContext";
 
 const getHeadingId = (children: React.ReactNode) => {
   const text = React.Children.toArray(children)
@@ -20,16 +17,13 @@ const getHeadingId = (children: React.ReactNode) => {
 };
 
 export const MdxH2 = (props: any) => {
-  const { darkMode } = useTheme();
   const { className = "", style, children, ...rest } = props;
   const headingId = props.id || getHeadingId(children);
 
   return (
     <h2
       id={headingId}
-      className={`mt-16 mb-6 block w-full box-border break-words border-b border-current/10 pb-4 text-3xl font-semibold tracking-[-0.05em] text-current md:text-4xl ${
-        darkMode ? "text-zinc-100" : "text-zinc-900"
-      } ${className}`.trim()}
+      className={`mt-16 mb-6 block w-full box-border break-words border-b border-current/10 pb-4 text-3xl font-semibold tracking-[-0.05em] text-zinc-900 md:text-4xl dark:text-zinc-100 ${className}`.trim()}
       style={{ scrollMarginTop: "1rem", ...style }}
       {...rest}
     >
@@ -39,16 +33,13 @@ export const MdxH2 = (props: any) => {
 };
 
 export const MdxH3 = (props: any) => {
-  const { darkMode } = useTheme();
   const { children, ...rest } = props;
   const headingId = props.id || getHeadingId(children);
 
   return (
     <h3
       id={headingId}
-      className={`pt-8 text-xl font-semibold tracking-[-0.04em] ${
-        darkMode ? "text-zinc-100" : "text-zinc-900"
-      }`}
+      className="pt-8 text-xl font-semibold tracking-[-0.04em] text-zinc-900 dark:text-zinc-100"
       {...rest}
     >
       {children}
@@ -57,25 +48,19 @@ export const MdxH3 = (props: any) => {
 };
 
 export const MdxP = (props: any) => {
-  const { darkMode } = useTheme();
   return (
     <p
-      className={`mb-6 max-w-3xl text-[1.03rem] leading-8 text-current/80 ${
-        darkMode ? "text-zinc-300" : "text-zinc-700"
-      }`}
+      className="mb-6 max-w-3xl text-[1.03rem] leading-8 text-zinc-700 dark:text-zinc-300"
       {...props}
     />
   );
 };
 
 export const MdxUl = (props: any) => {
-  const { darkMode } = useTheme();
   return (
     <ul
-      className={`mb-6 list-disc list-inside space-y-2 text-[1.02rem] leading-7 text-current/80 ${
-        darkMode ? "text-zinc-300" : "text-zinc-700"
-      }`}
+      className="mb-6 list-disc list-inside space-y-2 text-[1.02rem] leading-7 text-zinc-700 dark:text-zinc-300"
       {...props}
     />
   );
-};
+};
\ No newline at end of file
diff --git a/frontend/app/components/SearchPalette.tsx b/frontend/app/components/SearchPalette.tsx
index 11f0e41..e29a711 100644
--- a/frontend/app/components/SearchPalette.tsx
+++ b/frontend/app/components/SearchPalette.tsx
@@ -1,3 +1,4 @@
+// app/components/SearchPalette.tsx
 "use client";
 
 /**
@@ -34,6 +35,7 @@ export interface SearchItem {
 interface SearchPaletteProps {
   isOpen: boolean;
   onClose: () => void;
+  onToggle: () => void;
   searchData: SearchItem[];
   onSelect: (item: SearchItem) => void;
   placeholder?: string;
@@ -99,28 +101,29 @@ function HighlightText({
   return <>{elements}</>;
 }
 
+// 1. Moved themeClasses outside the component since it is now static CSS strings!
+const themeClasses = {
+  panel: "bg-white dark:bg-[#050505]",
+  border: "border-black/10 dark:border-white/10",
+  muted: "text-zinc-500 dark:text-zinc-400",
+  navItem: "text-[#111111] dark:text-[#F5F5F5]",
+  hoverAccent: "hover:text-zinc-900 dark:hover:text-white",
+  highlightText: "font-medium rounded-[3px] px-[2px] bg-[#6f45d6]/15 text-[#6f45d6] dark:bg-[#C699FF]/25 dark:text-[#C699FF]",
+};
+
 export default function SearchPalette({
   isOpen,
   onClose,
+  onToggle,
   searchData,
   onSelect,
   placeholder = "Search topics, commands, or concepts...",
 }: SearchPaletteProps) {
+  // We keep useTheme solely for the toggle function and the dynamic label string
   const { darkMode, toggleTheme } = useTheme();
   const router = useRouter();
   const [docSearch, setDocSearch] = useState("");
 
-  const themeClasses = {
-    panel: darkMode ? "bg-[#050505]" : "bg-white",
-    border: darkMode ? "border-white/10" : "border-black/10",
-    muted: darkMode ? "text-zinc-400" : "text-zinc-500",
-    navItem: darkMode ? "text-[#F5F5F5]" : "text-[#111111]",
-    hoverAccent: darkMode ? "hover:text-white" : "hover:text-zinc-900",
-    highlightText: darkMode
-      ? "font-medium bg-[#C699FF]/25 text-[#C699FF] rounded-[3px] px-[2px]"
-      : "font-medium bg-[#6f45d6]/15 text-[#6f45d6] rounded-[3px] px-[2px]",
-  };
-
   /**
    * Static global actions bound to the palette default state.
    * Memoized to prevent unnecessary re-evaluations during typing.
@@ -136,6 +139,7 @@ export default function SearchPalette({
       },
       {
         id: "action-theme",
+        // This is safe from hydration mismatch because the modal returns null if !isOpen
         title: `Switch to ${darkMode ? "Light" : "Dark"} Mode`,
         type: "action",
         icon: <Monitor size={16} className="opacity-70" />,
@@ -205,17 +209,18 @@ export default function SearchPalette({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
-        onClose();
+        if (isOpen) onClose();
         return;
       }
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         event.preventDefault();
-        onClose();
+        onToggle();
       }
     };
+    
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, onToggle]);
 
   useEffect(() => {
     document.body.style.overflow = isOpen ? "hidden" : "";
@@ -336,7 +341,8 @@ export default function SearchPalette({
                   >
                     <div className="flex items-center gap-3 min-w-0">
                       {item.icon && (
-                        <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md border ${darkMode ? "bg-white/5 border-white/10" : "bg-black/5 border-black/10"}`}>
+                        // 2. Switched from a JS ternary to standard Tailwind classes for the icon container
+                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-black/5 border-black/10 dark:bg-white/5 dark:border-white/10">
                           {item.icon}
                         </div>
                       )}
diff --git a/frontend/app/docs/page.tsx b/frontend/app/docs/page.tsx
index 24d1690..0743149 100644
--- a/frontend/app/docs/page.tsx
+++ b/frontend/app/docs/page.tsx
@@ -1,44 +1,31 @@
-// app/docs/page.tsx
-"use client";
-
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
-import { useTheme } from "../../src/context/ThemeContext";
 
 export default function DocumentationPage() {
-  const { darkMode } = useTheme();
-
   return (
-    <div
-      className={`min-h-screen ${darkMode ? "bg-[#050505] text-zinc-100" : "bg-zinc-50 text-zinc-900"} font-sans selection:bg-zinc-500/30 pb-20`}
-    >
-      <div className='max-w-3xl mx-auto px-6 pt-24'>
+    <div className="min-h-screen bg-zinc-50 dark:bg-[#050505] text-zinc-900 dark:text-zinc-100 font-sans selection:bg-zinc-500/30 pb-20">
+      <div className="max-w-3xl mx-auto px-6 pt-24">
         <Link
-          href='/'
-          className='inline-flex items-center gap-2 text-sm font-medium text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300 transition-colors mb-12'
+          href="/"
+          className="inline-flex items-center gap-2 text-sm font-medium text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300 transition-colors mb-12"
         >
           <ArrowLeft size={16} /> Back to Hub
         </Link>
 
-        <h1 className='text-4xl font-black tracking-tighter mb-4'>
-          RefMe<span className='text-zinc-500'>_</span> Architecture & Vision
+        <h1 className="text-4xl font-black tracking-tighter mb-4">
+          RefMe<span className="text-zinc-500">_</span> Architecture & Vision
         </h1>
-        <p
-          className={`text-lg mb-12 ${darkMode ? "text-zinc-400" : "text-zinc-600"}`}
-        >
+        <p className="text-lg mb-12 text-zinc-600 dark:text-zinc-400">
           A deep dive into how RefMe is built, the problem it solves, and the
           journey of crafting a modern full-stack reference tool.
         </p>
 
-        <div className='space-y-12'>
-          {/* Section: The Problem */}
+        <div className="space-y-12">
           <section>
-            <h2 className='text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4'>
+            <h2 className="text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4">
               The Problem
             </h2>
-            <p
-              className={`leading-relaxed ${darkMode ? "text-zinc-400" : "text-zinc-600"}`}
-            >
+            <p className="leading-relaxed text-zinc-600 dark:text-zinc-400">
               As developers, we constantly switch contexts between writing code,
               running CLI commands, managing infrastructure, and configuring
               tools. The syntax escapes us. We end up opening dozens of browser
@@ -49,14 +36,11 @@ export default function DocumentationPage() {
             </p>
           </section>
 
-          {/* Section: The Solution */}
           <section>
-            <h2 className='text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4'>
+            <h2 className="text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4">
               The Solution
             </h2>
-            <p
-              className={`leading-relaxed ${darkMode ? "text-zinc-400" : "text-zinc-600"}`}
-            >
+            <p className="leading-relaxed text-zinc-600 dark:text-zinc-400">
               <strong>RefMe</strong> is built to be the antidote to
               documentation fatigue. It is a centralized repository of core
               programming languages, CLI tools, infrastructure templates, and AI
@@ -66,14 +50,11 @@ export default function DocumentationPage() {
             </p>
           </section>
 
-          {/* Section: Tech Stack & System Design */}
           <section>
-            <h2 className='text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4'>
+            <h2 className="text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4">
               System Design & Tech Stack
             </h2>
-            <ul
-              className={`list-disc pl-5 space-y-3 ${darkMode ? "text-zinc-400" : "text-zinc-600"}`}
-            >
+            <ul className="list-disc pl-5 space-y-3 text-zinc-600 dark:text-zinc-400">
               <li>
                 <strong>Framework:</strong> Next.js 15 (App Router) to ensure
                 excellent SEO, fast server-side rendering, and easy API route
@@ -86,14 +67,15 @@ export default function DocumentationPage() {
                 syntax highlighting to reduce visual noise.
               </li>
               <li>
-                <strong>Architecture:</strong> Component-driven. A custom global
-                `ThemeContext` seamlessly orchestrates the dark/light modes
-                without relying on heavy third-party theme providers.
+                <strong>Architecture:</strong> Component-driven and Server-first. 
+                Theme resolution is handled via a blocking pre-hydration script, 
+                eliminating hydration mismatches and removing the need for heavy 
+                client-side theme providers on static pages.
               </li>
               <li>
                 <strong>Data Layer:</strong> Currently utilizing modularized
                 static JSON/TypeScript data structures (`cheatsheets.ts` and
-                `references.json`) for zero-latency retrieval.{" "}
+                `references.json`) for zero-latency retrieval.
               </li>
               <li>
                 <strong>Icons & Assets:</strong> Lucide React for consistent,
@@ -102,19 +84,16 @@ export default function DocumentationPage() {
             </ul>
           </section>
 
-          {/* Section: Future Roadmap */}
           <section>
-            <h2 className='text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4'>
+            <h2 className="text-2xl font-bold border-b border-zinc-200 dark:border-zinc-800 pb-2 mb-4">
               Future Ideas & Roadmap
             </h2>
-            <div
-              className={`space-y-4 ${darkMode ? "text-zinc-400" : "text-zinc-600"}`}
-            >
+            <div className="space-y-4 text-zinc-600 dark:text-zinc-400">
               <p>
                 As this side project evolves, several key features are planned
                 for the pipeline:
               </p>
-              <ul className='list-disc pl-5 space-y-2'>
+              <ul className="list-disc pl-5 space-y-2">
                 <li>
                   <strong>Backend Integration:</strong> Migrating static data to
                   a database (like PostgreSQL via Prisma) to allow dynamic
@@ -142,4 +121,4 @@ export default function DocumentationPage() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index baa0442..5e33db0 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,4 +1,3 @@
-// app/layout.tsx
 import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "../src/context/ThemeContext";
@@ -44,17 +43,36 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en' className='h-full antialiased'>
+    <html lang='en' className='h-full antialiased' suppressHydrationWarning>
       <head>
         <meta
           name='viewport'
           content='width=device-width, initial-scale=1, maximum-scale=5'
         />
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('refme-theme');
+                  const dark = stored ? stored === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+                  if (dark) {
+                    document.documentElement.classList.add('dark');
+                    document.body.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
       </head>
-      {/* Added font-sans here so it applies globally by default */}
-      <body className='min-h-full flex flex-col bg-zinc-50 text-zinc-950 dark:bg-[#050505] dark:text-zinc-100 font-sans tracking-tight'>
+      <body 
+        suppressHydrationWarning 
+        className='min-h-full flex flex-col bg-zinc-50 text-zinc-950 dark:bg-[#050505] dark:text-zinc-100 font-sans tracking-tight'
+      >
         <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 4276e0b..7e15e9f 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { useTheme } from "../src/context/ThemeContext";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
 import SearchPalette, { useSearchOSKey, SearchItem } from "../app/components/SearchPalette";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
 import Footer from "./components/Footer";
 
 import {
@@ -162,11 +162,15 @@ function timeSince(dateString: string) {
 }
 
 export default function LandingPage() {
-  const { darkMode, toggleTheme } = useTheme();
+  const { toggleTheme } = useTheme(); // No longer pulling in `darkMode` state!
   const router = useRouter();
   
+  const [mounted, setMounted] = useState(false);
+  
   const [cmdOpen, setCmdOpen] = useState(false);
-  const { modifierKey, isMounted } = useSearchOSKey();
+  const { modifierKey } = useSearchOSKey();
+  
+  const shouldReduceMotion = useReducedMotion();
   
   const [githubStats, setGithubStats] = useState({
     stars: "-",
@@ -184,22 +188,23 @@ export default function LandingPage() {
   const [showScrollIndicator, setShowScrollIndicator] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Centralized Tailwind classes using dark: instead of JS ternary logic
   const themeClasses = {
-    page: darkMode ? "bg-[#0a0a0a] text-[#ededed]" : "bg-[#FFFFFF] text-[#111111]",
-    header: darkMode ? "bg-[#0a0a0a]/95" : "bg-[#FFFFFF]/95",
-    panel: darkMode ? "bg-[#141414]" : "bg-[#F7F7F7]",
-    border: darkMode ? "border-[#333333]" : "border-[#E5E5E5]",
-    muted: darkMode ? "text-zinc-400" : "text-zinc-500",
-    accent: darkMode ? "text-zinc-100" : "text-zinc-900",
-    inputBg: darkMode ? "bg-[#1a1a1a]" : "bg-[#F4F4F4]",
-    hoverAccent: darkMode ? "hover:text-[#C699FF]" : "hover:text-[#6f45d6]",
-    cardHover: darkMode
-      ? "hover:border-[#555] hover:bg-[#141414]"
-      : "hover:border-[#ccc] hover:bg-[#fafafa]",
-    iconBox: darkMode ? "bg-[#1a1a1a] border-[#333] text-zinc-400" : "bg-[#f4f4f4] border-[#E5E5E5] text-zinc-500",
-    iconBoxHover: darkMode 
-      ? "group-hover:text-white" 
-      : "group-hover:text-black",
+    page: "bg-[#FFFFFF] text-[#111111] dark:bg-[#0a0a0a] dark:text-[#ededed]",
+    header: "bg-[#FFFFFF]/95 dark:bg-[#0a0a0a]/95",
+    panel: "bg-[#F7F7F7] dark:bg-[#141414]",
+    border: "border-[#E5E5E5] dark:border-[#333333]",
+    muted: "text-zinc-500 dark:text-zinc-400",
+    accent: "text-zinc-900 dark:text-zinc-100",
+    inputBg: "bg-[#F4F4F4] dark:bg-[#1a1a1a]",
+    hoverAccent: "hover:text-[#6f45d6] dark:hover:text-[#C699FF]",
+    cardHover: "hover:border-[#ccc] hover:bg-[#fafafa] dark:hover:border-[#555] dark:hover:bg-[#141414]",
+    iconBox: "bg-[#f4f4f4] border-[#E5E5E5] text-zinc-500 dark:bg-[#1a1a1a] dark:border-[#333] dark:text-zinc-400",
+    iconBoxHover: "group-hover:text-black dark:group-hover:text-white",
   };
 
   useEffect(() => {
@@ -244,29 +249,13 @@ export default function LandingPage() {
   }, []);
 
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setCmdOpen(false);
-        return;
-      }
-      const isModifier = event.metaKey || event.ctrlKey;
-      if (!isModifier || event.key.toLowerCase() !== "k") return;
-      
-      event.preventDefault();
-      setCmdOpen((open) => !open);
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
-
-  useEffect(() => {
-    if (!isAutoPlaying) return;
+    // Break the autoplay circuit entirely if user prefers reduced motion
+    if (!isAutoPlaying || shouldReduceMotion) return;
     const interval = setInterval(() => {
       setActiveTab((prev) => (prev + 1) % REFERENCE_DATA.length);
     }, 5000);
     return () => clearInterval(interval);
-  }, [isAutoPlaying]);
+  }, [isAutoPlaying, shouldReduceMotion]);
 
   const checkScroll = () => {
     if (scrollContainerRef.current) {
@@ -314,16 +303,17 @@ export default function LandingPage() {
 
   const timeSinceStr = timeSince(githubStats.lastPush);
   
+  // Dynamic arrays converted to Tailwind
   const dynamicBuildStats = [
-    { title: "Repository Synced", desc: `Last push: ${timeSinceStr}`, icon: <CheckCircle2 size={16} />, bg: darkMode ? "bg-white text-black" : "bg-black text-white" },
-    { title: "Active Contributors", desc: `${githubStats.contributors.length} devs building RefMe`, icon: <Code2 size={16} />, bg: darkMode ? "bg-[#222] text-white" : "bg-zinc-100 text-black" },
-    { title: "Code Reviews", desc: `${githubStats.openPrs} open PRs pending`, icon: <GitPullRequest size={16} />, bg: darkMode ? "bg-[#222] text-white" : "bg-zinc-100 text-black" }
+    { title: "Repository Synced", desc: `Last push: ${timeSinceStr}`, icon: <CheckCircle2 size={16} />, bg: "bg-black text-white dark:bg-white dark:text-black" },
+    { title: "Active Contributors", desc: `${githubStats.contributors.length} devs building RefMe`, icon: <Code2 size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" },
+    { title: "Code Reviews", desc: `${githubStats.openPrs} open PRs pending`, icon: <GitPullRequest size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" }
   ];
 
   const dynamicActivityFeeds = [
-    { title: "Successful Merges", desc: `${githubStats.mergedPrs} PRs merged to main`, icon: <GitMerge size={16} />, bg: darkMode ? "bg-[#222] text-white" : "bg-zinc-100 text-black" },
-    { title: "Community Health", desc: `${githubStats.openIssues} open issues tracked`, icon: <CircleDot size={16} />, bg: darkMode ? "bg-[#222] text-white" : "bg-zinc-100 text-black" },
-    { title: "Global Reach", desc: `${githubStats.stars} repository stars`, icon: <Star size={16} />, bg: darkMode ? "bg-[#222] text-white" : "bg-zinc-100 text-black" }
+    { title: "Successful Merges", desc: `${githubStats.mergedPrs} PRs merged to main`, icon: <GitMerge size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" },
+    { title: "Community Health", desc: `${githubStats.openIssues} open issues tracked`, icon: <CircleDot size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" },
+    { title: "Global Reach", desc: `${githubStats.stars} repository stars`, icon: <Star size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" }
   ];
 
   const currentBuild = dynamicBuildStats[cycle];
@@ -344,16 +334,23 @@ export default function LandingPage() {
     }
   };
 
+  const isReducedMotionSafe = mounted && shouldReduceMotion;
+
   const itemVariants = {
-    hidden: { opacity: 0, y: 15 },
+    hidden: { 
+      opacity: 0, 
+      y: isReducedMotionSafe ? 0 : 15 
+    },
     visible: {
       opacity: 1,
       y: 0,
-      transition: {
-        type: "spring" as const,
-        stiffness: 400,
-        damping: 30
-      }
+      transition: isReducedMotionSafe 
+        ? { duration: 0.15 } 
+        : {
+            type: "spring" as const,
+            stiffness: 400,
+            damping: 30
+          }
     },
   };
 
@@ -375,8 +372,14 @@ export default function LandingPage() {
         }
       `}} />
       
-      <SearchPalette isOpen={cmdOpen} onClose={() => setCmdOpen(false)} searchData={searchData} onSelect={handleSearchSelect} placeholder="Search algorithms, frameworks, or concepts..." />
-
+      <SearchPalette 
+        isOpen={cmdOpen} 
+        onClose={() => setCmdOpen(false)} 
+        onToggle={() => setCmdOpen((prev) => !prev)} 
+        searchData={searchData} 
+        onSelect={handleSearchSelect} 
+        placeholder="Search algorithms, frameworks, or concepts..." 
+      />
       <header className={`fixed top-0 left-0 w-full z-50 h-16 border-b ${themeClasses.border} ${themeClasses.header} backdrop-blur-md`}>
         <div className="mx-auto flex h-full max-w-[1700px] items-center justify-between px-4 lg:px-6">
           <div className="flex items-center gap-4">
@@ -391,12 +394,15 @@ export default function LandingPage() {
           <div className="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
             <button onClick={() => setCmdOpen(true)} className={`flex w-full items-center justify-between rounded-full border px-4 py-1.5 transition-all hover:border-[#C699FF]/50 ${themeClasses.border} ${themeClasses.inputBg}`}>
               <div className="flex items-center gap-3 text-sm opacity-60"><Search className="h-4 w-4" /> <span>Search...</span></div>
-              <span className={`hidden md:block rounded border border-current/20 px-1.5 py-0.5 text-[10px] font-bold opacity-50`}>{modifierKey}K</span>
+              <span suppressHydrationWarning className={`hidden md:block rounded border border-current/20 px-1.5 py-0.5 text-[10px] font-bold opacity-50`}>
+                {mounted ? modifierKey : "Ctrl"}K
+              </span>
             </button>
           </div>
 
           <button onClick={toggleTheme} className={`shrink-0 rounded-full border px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.2em] transition-colors ${themeClasses.border} ${themeClasses.panel} ${themeClasses.hoverAccent}`}>
-            {darkMode ? "Light" : "Dark"}
+            <span className="block dark:hidden">Dark</span>
+            <span className="hidden dark:block">Light</span>
           </button>
         </div>
       </header>
@@ -418,11 +424,11 @@ export default function LandingPage() {
                 <div className="relative group inline-flex">
                   <button 
                     onClick={() => document.getElementById('ecosystem')?.scrollIntoView({ behavior: 'smooth' })} 
-                    className={`rounded-full px-8 py-3.5 text-sm font-bold transition-transform hover:scale-[0.98] ${darkMode ? "bg-white text-black" : "bg-black text-white"}`}
+                    className={`rounded-full px-8 py-3.5 text-sm font-bold transition-transform hover:scale-[0.98] bg-black text-white dark:bg-white dark:text-black`}
                   >
                     Start reading
                   </button>
-                  <div className={`absolute top-full left-1/2 mt-3 -translate-x-1/2 px-4 py-2 rounded-lg text-[13px] font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 border shadow-2xl ${darkMode ? "bg-[#222222] text-white border-[#333333]" : "bg-white text-black border-[#E5E5E5]"}`}>
+                  <div className={`absolute top-full left-1/2 mt-3 -translate-x-1/2 px-4 py-2 rounded-lg text-[13px] font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 border shadow-2xl bg-white text-black border-[#E5E5E5] dark:bg-[#222222] dark:text-white dark:border-[#333333]`}>
                     Explore JS, React, System Design & more
                   </div>
                   
@@ -448,7 +454,7 @@ export default function LandingPage() {
                     <Code2 size={16} /> Community Driven
                   </div>
                 </div>
-                <Link href="/docs" className={`inline-flex items-center gap-2 text-[13px] font-bold tracking-wide uppercase transition-colors w-fit ${darkMode ? "text-[#C699FF] hover:text-white" : "text-[#6f45d6] hover:text-black"}`}>
+                <Link href="/docs" className={`inline-flex items-center gap-2 text-[13px] font-bold tracking-wide uppercase transition-colors w-fit text-[#6f45d6] hover:text-black dark:text-[#C699FF] dark:hover:text-white`}>
                   Read the RefMe Philosophy <ArrowRight size={14} />
                 </Link>
               </div>
@@ -456,19 +462,19 @@ export default function LandingPage() {
 
             <div className="lg:col-span-6 w-full flex justify-center lg:justify-end relative mt-10 lg:mt-0">
               
-              <div className={`relative z-10 flex flex-col rounded-3xl border w-full max-w-[560px] shadow-2xl overflow-hidden ${darkMode ? "bg-[#0a0a0a] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
+              <div className={`relative z-10 flex flex-col rounded-3xl border w-full max-w-[560px] shadow-2xl overflow-hidden bg-white border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-[#333]`}>
                 
-                <div className={`p-6 sm:p-10 border-b ${darkMode ? "bg-[#111] border-[#333]" : "bg-zinc-50 border-[#E5E5E5]"}`}>
+                <div className={`p-6 sm:p-10 border-b bg-zinc-50 border-[#E5E5E5] dark:bg-[#111] dark:border-[#333]`}>
                   <div className="flex items-start justify-between mb-8">
                     <div className="flex items-center gap-5">
                       <img 
                         src="https://github.com/yash-pluto.png" 
                         alt="Yash Vardhan" 
-                        className={`h-20 w-20 rounded-full border-4 shadow-sm ${darkMode ? "border-[#222]" : "border-white"}`} 
+                        className={`h-20 w-20 rounded-full border-4 shadow-sm border-white dark:border-[#222]`} 
                       />
                       <div>
                         <div className="flex items-center gap-2 mb-1">
-                          <a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className={`text-2xl sm:text-3xl font-extrabold tracking-tight hover:underline ${darkMode ? "text-white" : "text-black"}`}>
+                          <a href="https://yash-pluto.vercel.app/" target="_blank" rel="noopener noreferrer" className={`text-2xl sm:text-3xl font-extrabold tracking-tight hover:underline text-black dark:text-white`}>
                             Yash-Pluto
                           </a>
                           <BadgeCheck size={24} className="text-[#C699FF]" />
@@ -477,22 +483,22 @@ export default function LandingPage() {
                       </div>
                     </div>
                     <a href="https://github.com/yash-pluto/refme" target="_blank" rel="noopener noreferrer" className="pt-1">
-                      <FaGithub size={32} className={`${darkMode ? "text-white" : "text-zinc-900"} hover:opacity-70 transition-opacity`} />
+                      <FaGithub size={32} className={`text-zinc-900 hover:opacity-70 transition-opacity dark:text-white`} />
                     </a>
                   </div>
                   
-                  <p className={`text-base leading-relaxed mb-6 ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <p className={`text-base leading-relaxed mb-6 text-zinc-700 dark:text-zinc-300`}>
                     Join the community building the ultimate quick-reference. Contributions are welcome for all categories and languages.
                   </p>
 
                   <div className="flex flex-col sm:flex-row flex-wrap gap-3">
-                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border ${darkMode ? "bg-[#1a1a1a] border-[#333] shadow-inner" : "bg-white border-[#E5E5E5] shadow-sm"}`}>
+                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#1a1a1a] dark:border-[#333] dark:shadow-inner`}>
                       <span className="text-[#C699FF] text-base font-black">✓</span>
-                      <span className={`text-xs font-bold uppercase tracking-wide ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>Open Source Architecture</span>
+                      <span className={`text-xs font-bold uppercase tracking-wide text-zinc-700 dark:text-zinc-300`}>Open Source Architecture</span>
                     </div>
-                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border ${darkMode ? "bg-[#1a1a1a] border-[#333] shadow-inner" : "bg-white border-[#E5E5E5] shadow-sm"}`}>
+                    <div className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#1a1a1a] dark:border-[#333] dark:shadow-inner`}>
                       <span className="text-[#C699FF] text-base font-black">✓</span>
-                      <span className={`text-xs font-bold uppercase tracking-wide ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>Community Driven Updates</span>
+                      <span className={`text-xs font-bold uppercase tracking-wide text-zinc-700 dark:text-zinc-300`}>Community Driven Updates</span>
                     </div>
                   </div>
                 </div>
@@ -500,36 +506,36 @@ export default function LandingPage() {
                 <div className="p-6 sm:p-8">
                   <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
                     
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <GitPullRequest size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Open PRs</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.openPrs}</span>
+                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openPrs}</span>
                     </div>
                     
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <GitMerge size={16} className="text-purple-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Merged</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.mergedPrs}</span>
+                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.mergedPrs}</span>
                     </div>
 
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <CircleDot size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Issues</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.openIssues}</span>
+                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openIssues}</span>
                     </div>
 
-                    <div className={`flex flex-col justify-between p-4 rounded-xl border ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"} shadow-sm`}>
+                    <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
                       <div className="flex items-center gap-2 mb-3">
                         <Star size={16} className="text-amber-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Stars</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight ${darkMode ? "text-white" : "text-black"}`}>{githubStats.stars}</span>
+                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.stars}</span>
                     </div>
 
                   </div>
@@ -545,7 +551,7 @@ export default function LandingPage() {
                                 src={user.avatar_url} 
                                 alt={user.login}
                                 title={user.login}
-                                className={`h-10 w-10 rounded-full border-[3px] ${darkMode ? 'border-[#0a0a0a]' : 'border-white'} shadow-md`}
+                                className={`h-10 w-10 rounded-full border-[3px] border-white shadow-md dark:border-[#0a0a0a]`}
                                 style={{ zIndex: 10 - idx, opacity: 1 - (idx * 0.12) }} 
                               />
                             ))}
@@ -561,7 +567,7 @@ export default function LandingPage() {
                       href="https://github.com/yash-pluto/refme" 
                       target="_blank" 
                       rel="noopener noreferrer" 
-                      className={`flex w-full sm:w-auto justify-center items-center gap-2 rounded-xl px-6 py-3.5 text-sm font-bold transition-all active:scale-[0.98] ${darkMode ? "bg-white text-black hover:bg-zinc-200" : "bg-black text-white hover:bg-zinc-800"}`}
+                      className={`flex w-full sm:w-auto justify-center items-center gap-2 rounded-xl px-6 py-3.5 text-sm font-bold transition-all active:scale-[0.98] bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
                     >
                       <FaGithub size={18} /> Contribute on GitHub
                     </a>
@@ -571,23 +577,23 @@ export default function LandingPage() {
               </div>
 
               {/* Dynamic Floating Element 1 - Top Right */}
-              <div key={`build-${cycle}`} className={`absolute -top-12 right-0 sm:-top-8 sm:-right-8 z-20 flex items-center gap-3.5 rounded-2xl border p-3 sm:p-3.5 shadow-2xl scale-[0.85] sm:scale-100 origin-top-right sm:origin-center animate-in fade-in zoom-in duration-500 pointer-events-none ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
+              <div key={`build-${cycle}`} className={`absolute -top-12 right-0 sm:-top-8 sm:-right-8 z-20 flex items-center gap-3.5 rounded-2xl border p-3 sm:p-3.5 shadow-2xl scale-[0.85] sm:scale-100 origin-top-right sm:origin-center animate-in fade-in zoom-in duration-500 pointer-events-none bg-white border-[#E5E5E5] dark:bg-[#141414] dark:border-[#333]`}>
                 <div className={`flex h-10 w-10 items-center justify-center rounded-full ${currentBuild.bg}`}>
                   {currentBuild.icon}
                 </div>
                 <div className="pr-2">
-                  <p className={`text-[13px] font-bold ${darkMode ? "text-white" : "text-black"}`}>{currentBuild.title}</p>
+                  <p className={`text-[13px] font-bold text-black dark:text-white`}>{currentBuild.title}</p>
                   <p className={`text-[11px] font-medium ${themeClasses.muted}`}>{currentBuild.desc}</p>
                 </div>
               </div>
 
               {/* Dynamic Floating Element 2 - Bottom Left */}
-              <div key={`activity-${cycle}`} className={`absolute -bottom-12 left-0 sm:-bottom-8 sm:-left-8 z-20 flex items-center gap-3.5 rounded-2xl border p-3 sm:p-3.5 shadow-2xl scale-[0.85] sm:scale-100 origin-bottom-left sm:origin-center animate-in fade-in zoom-in duration-500 pointer-events-none ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
+              <div key={`activity-${cycle}`} className={`absolute -bottom-12 left-0 sm:-bottom-8 sm:-left-8 z-20 flex items-center gap-3.5 rounded-2xl border p-3 sm:p-3.5 shadow-2xl scale-[0.85] sm:scale-100 origin-bottom-left sm:origin-center animate-in fade-in zoom-in duration-500 pointer-events-none bg-white border-[#E5E5E5] dark:bg-[#141414] dark:border-[#333]`}>
                 <div className={`flex h-10 w-10 items-center justify-center rounded-full ${currentActivity.bg}`}>
                   {currentActivity.icon}
                 </div>
                 <div className="pr-2">
-                  <p className={`text-[13px] font-bold ${darkMode ? "text-white" : "text-black"}`}>{currentActivity.title}</p>
+                  <p className={`text-[13px] font-bold text-black dark:text-white`}>{currentActivity.title}</p>
                   <p className={`text-[11px] font-medium ${themeClasses.muted}`}>{currentActivity.desc}</p>
                 </div>
               </div>
@@ -598,13 +604,13 @@ export default function LandingPage() {
         </div>
       </section>
 
-      <section className={`py-24 md:py-32 border-b ${themeClasses.border} ${darkMode ? "bg-[#050505]" : "bg-zinc-50/50"}`}>
+      <section className={`py-24 md:py-32 border-b ${themeClasses.border} bg-zinc-50/50 dark:bg-[#050505]`}>
         <div className="mx-auto max-w-[1200px] px-4 md:px-6 lg:px-8 text-center flex flex-col items-center">
           
           <p className={`text-sm font-bold tracking-wide uppercase mb-4 ${themeClasses.muted}`}>
             Built for everyone who wants to learn
           </p>
-          <h2 className={`text-4xl md:text-5xl font-extrabold tracking-tight mb-6 text-balance ${darkMode ? "text-white" : "text-zinc-900"}`}>
+          <h2 className={`text-4xl md:text-5xl font-extrabold tracking-tight mb-6 text-balance text-zinc-900 dark:text-white`}>
             For students, professors, teachers, and developers.
           </h2>
 
@@ -612,61 +618,61 @@ export default function LandingPage() {
             
             <div className="max-w-4xl mx-auto w-full px-2 sm:px-4">
               <div className="flex justify-between items-center px-4 sm:px-12 md:px-24 mb-6">
-                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm ${darkMode ? "bg-[#111] border-zinc-600 text-zinc-200" : "bg-white border-[#E5E5E5] text-zinc-700"}`}>Students</div>
-                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm ${darkMode ? "bg-[#111] border-zinc-600 text-zinc-200" : "bg-white border-[#E5E5E5] text-zinc-700"}`}>Educators</div>
-                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm ${darkMode ? "bg-[#111] border-zinc-600 text-zinc-200" : "bg-white border-[#E5E5E5] text-zinc-700"}`}>Developers</div>
+                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm bg-white border-[#E5E5E5] text-zinc-700 dark:bg-[#111] dark:border-zinc-600 dark:text-zinc-200`}>Students</div>
+                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm bg-white border-[#E5E5E5] text-zinc-700 dark:bg-[#111] dark:border-zinc-600 dark:text-zinc-200`}>Educators</div>
+                <div className={`px-4 py-1.5 rounded-lg border text-xs font-bold shadow-sm bg-white border-[#E5E5E5] text-zinc-700 dark:bg-[#111] dark:border-zinc-600 dark:text-zinc-200`}>Developers</div>
               </div>
 
               <div className="relative flex justify-between items-center px-8 sm:px-16 md:px-28 mb-10 sm:mb-16">
-                <div className={`absolute top-1/2 left-8 right-8 sm:left-16 sm:right-16 md:left-28 md:right-28 h-[2px] -translate-y-1/2 z-0 ${darkMode ? "bg-zinc-600" : "bg-zinc-200"}`} />
-                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 ${darkMode ? "border-zinc-400 bg-zinc-900" : "border-zinc-300 bg-zinc-50"}`} />
-                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 ${darkMode ? "border-zinc-400 bg-zinc-900" : "border-zinc-300 bg-zinc-50"}`} />
-                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 ${darkMode ? "border-zinc-400 bg-zinc-900" : "border-zinc-300 bg-zinc-50"}`} />
+                <div className={`absolute top-1/2 left-8 right-8 sm:left-16 sm:right-16 md:left-28 md:right-28 h-[2px] -translate-y-1/2 z-0 bg-zinc-200 dark:bg-zinc-600`} />
+                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 border-zinc-300 bg-zinc-50 dark:border-zinc-400 dark:bg-zinc-900`} />
+                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 border-zinc-300 bg-zinc-50 dark:border-zinc-400 dark:bg-zinc-900`} />
+                <div className={`w-3.5 h-3.5 rounded-full border-[3px] z-10 border-zinc-300 bg-zinc-50 dark:border-zinc-400 dark:bg-zinc-900`} />
               </div>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-5xl mx-auto px-4">
               
-              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
-                <h3 className={`text-xl font-bold tracking-tight mb-6 ${darkMode ? "text-white" : "text-black"}`}>Structured Roadmaps.</h3>
+              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm bg-white border-[#E5E5E5] dark:bg-[#141414] dark:border-[#333]`}>
+                <h3 className={`text-xl font-bold tracking-tight mb-6 text-black dark:text-white`}>Structured Roadmaps.</h3>
                 <div className="space-y-4">
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Step-by-step learning paths
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Master the topics listed below
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Clear progression for all levels
                   </div>
                 </div>
               </div>
 
-              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
-                <h3 className={`text-xl font-bold tracking-tight mb-6 ${darkMode ? "text-white" : "text-black"}`}>Video Tutorials.</h3>
+              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm bg-white border-[#E5E5E5] dark:bg-[#141414] dark:border-[#333]`}>
+                <h3 className={`text-xl font-bold tracking-tight mb-6 text-black dark:text-white`}>Video Tutorials.</h3>
                 <div className="space-y-4">
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Dedicated videos for every concept
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Visual explanations that stick
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Learn at your own pace
                   </div>
                 </div>
               </div>
 
-              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm ${darkMode ? "bg-[#141414] border-[#333]" : "bg-white border-[#E5E5E5]"}`}>
-                <h3 className={`text-xl font-bold tracking-tight mb-6 ${darkMode ? "text-white" : "text-black"}`}>For Everyone.</h3>
+              <div className={`flex flex-col rounded-3xl border p-8 shadow-sm bg-white border-[#E5E5E5] dark:bg-[#141414] dark:border-[#333]`}>
+                <h3 className={`text-xl font-bold tracking-tight mb-6 text-black dark:text-white`}>For Everyone.</h3>
                 <div className="space-y-4">
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Perfect for students & learners
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Resources for teachers & professors
                   </div>
-                  <div className={`flex items-start gap-3 text-sm font-medium ${darkMode ? "text-zinc-300" : "text-zinc-700"}`}>
+                  <div className={`flex items-start gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300`}>
                     <span className={themeClasses.muted}>✓</span> Quick reference for developers
                   </div>
                 </div>
@@ -680,7 +686,7 @@ export default function LandingPage() {
 
       <section id="ecosystem" className={`py-24 md:py-32 w-full mx-auto px-4 md:px-6 lg:px-8 max-w-[1500px]`}>
         <div className="mb-16 text-center flex flex-col items-center">
-          <h2 className={`text-4xl md:text-5xl font-extrabold tracking-tight mb-4 ${darkMode ? "text-white" : "text-zinc-900"}`}>
+          <h2 className={`text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-zinc-900 dark:text-white`}>
             Explore the Ecosystem
           </h2>
           <p className={`text-lg font-medium max-w-2xl ${themeClasses.muted}`}>
@@ -701,19 +707,21 @@ export default function LandingPage() {
                   }}
                   className={`flex items-start gap-4 p-5 rounded-2xl border text-left transition-all duration-300 ${
                     isActive 
-                      ? (darkMode ? "bg-[#1a1a1a] border-[#444] shadow-md" : "bg-white border-[#ccc] shadow-md")
-                      : (darkMode ? "bg-[#0a0a0a] border-[#222] hover:bg-[#111] hover:border-[#333]" : "bg-zinc-50 border-transparent hover:bg-zinc-100 hover:border-[#E5E5E5]")
+                      ? "bg-white border-[#ccc] shadow-md dark:bg-[#1a1a1a] dark:border-[#444]"
+                      : "bg-zinc-50 border-transparent hover:bg-zinc-100 hover:border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-[#222] dark:hover:bg-[#111] dark:hover:border-[#333]"
                   }`}
                 >
                   <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-colors ${
                     isActive 
-                      ? (darkMode ? "bg-[#333] border-[#555] text-white" : "bg-zinc-100 border-[#ddd] text-black")
-                      : (darkMode ? "bg-[#111] border-[#333] text-zinc-400" : "bg-white border-[#E5E5E5] text-zinc-500")
+                      ? "bg-zinc-100 border-[#ddd] text-black dark:bg-[#333] dark:border-[#555] dark:text-white"
+                      : "bg-white border-[#E5E5E5] text-zinc-500 dark:bg-[#111] dark:border-[#333] dark:text-zinc-400"
                   }`}>
                     {cat.icon}
                   </div>
                   <div>
-                    <h3 className={`text-base font-bold mb-1 transition-colors ${isActive ? (darkMode ? "text-white" : "text-black") : (darkMode ? "text-zinc-300" : "text-zinc-700")}`}>
+                    <h3 className={`text-base font-bold mb-1 transition-colors ${
+                      isActive ? "text-black dark:text-white" : "text-zinc-700 dark:text-zinc-300"
+                    }`}>
                       {cat.category}
                     </h3>
                     <p className={`text-[13px] leading-relaxed ${themeClasses.muted}`}>
@@ -725,7 +733,7 @@ export default function LandingPage() {
             })}
           </div>
 
-          <div className={`w-full lg:w-[65%] rounded-3xl border p-6 sm:p-10 flex flex-col relative h-[600px] lg:h-full overflow-hidden ${darkMode ? "bg-[#111] border-[#333]" : "bg-white border-[#E5E5E5] shadow-sm"}`}>
+          <div className={`w-full lg:w-[65%] rounded-3xl border p-6 sm:p-10 flex flex-col relative h-[600px] lg:h-full overflow-hidden bg-white border-[#E5E5E5] shadow-sm dark:bg-[#111] dark:border-[#333]`}>
             
             <AnimatePresence mode="wait">
               <motion.div
@@ -737,10 +745,10 @@ export default function LandingPage() {
                 className="flex flex-col h-full overflow-hidden"
               >
                 <motion.div variants={itemVariants} className="mb-6 shrink-0">
-                  <div className={`flex h-12 w-12 items-center justify-center rounded-xl border mb-5 shadow-sm ${darkMode ? "bg-[#1a1a1a] border-[#444] text-white" : "bg-zinc-50 border-[#ccc] text-black"}`}>
+                  <div className={`flex h-12 w-12 items-center justify-center rounded-xl border mb-5 shadow-sm bg-zinc-50 border-[#ccc] text-black dark:bg-[#1a1a1a] dark:border-[#444] dark:text-white`}>
                       {REFERENCE_DATA[activeTab].icon}
                   </div>
-                  <h2 className={`text-3xl font-extrabold tracking-tight mb-2 ${darkMode ? "text-white" : "text-black"}`}>
+                  <h2 className={`text-3xl font-extrabold tracking-tight mb-2 text-black dark:text-white`}>
                     {REFERENCE_DATA[activeTab].category}
                   </h2>
                   <p className={`text-base ${themeClasses.muted}`}>
@@ -757,13 +765,13 @@ export default function LandingPage() {
                     <motion.div key={item.name} variants={itemVariants}>
                       <Link
                         href={item.href}
-                        className={`group flex items-center gap-4 p-4 rounded-xl border transition-all ${darkMode ? "bg-[#1a1a1a] border-[#333] hover:border-[#555] hover:bg-[#222]" : "bg-zinc-50 border-[#E5E5E5] hover:border-[#ccc] hover:bg-zinc-100"}`}
+                        className={`group flex items-center gap-4 p-4 rounded-xl border transition-all bg-zinc-50 border-[#E5E5E5] hover:border-[#ccc] hover:bg-zinc-100 dark:bg-[#1a1a1a] dark:border-[#333] dark:hover:border-[#555] dark:hover:bg-[#222]`}
                       >
                         <div className="shrink-0 flex items-center justify-center relative">
-                          <CheckCircle2 size={20} className={`${darkMode ? "text-zinc-500 group-hover:text-zinc-300" : "text-zinc-400 group-hover:text-zinc-600"} transition-colors`} />
+                          <CheckCircle2 size={20} className={`transition-colors text-zinc-400 group-hover:text-zinc-600 dark:text-zinc-500 dark:group-hover:text-zinc-300`} />
                         </div>
                         <div className="flex-1 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
-                          <span className={`text-[15px] font-bold ${darkMode ? "text-zinc-200 group-hover:text-white" : "text-zinc-800 group-hover:text-black"}`}>
+                          <span className={`text-[15px] font-bold text-zinc-800 group-hover:text-black dark:text-zinc-200 dark:group-hover:text-white`}>
                             {item.name}
                           </span>
                           <span className={`hidden sm:block text-zinc-500 text-sm opacity-50`}>-</span>
@@ -784,10 +792,10 @@ export default function LandingPage() {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
-                  className={`absolute bottom-0 left-0 right-0 h-32 pointer-events-none flex items-end justify-center pb-6 ${darkMode ? "bg-gradient-to-t from-[#111] to-transparent" : "bg-gradient-to-t from-white to-transparent"}`}
+                  className={`absolute bottom-0 left-0 right-0 h-32 pointer-events-none flex items-end justify-center pb-6 bg-gradient-to-t from-white to-transparent dark:from-[#111]`}
                 >
                   <div
-                    className={`flex items-center gap-2 text-[11px] font-bold tracking-widest uppercase px-4 py-2 rounded-full border shadow-sm backdrop-blur-sm ${darkMode ? "bg-black/50 border-[#333] text-zinc-300" : "bg-white/70 border-[#E5E5E5] text-zinc-600"}`}
+                    className={`flex items-center gap-2 text-[11px] font-bold tracking-widest uppercase px-4 py-2 rounded-full border shadow-sm backdrop-blur-sm bg-white/70 border-[#E5E5E5] text-zinc-600 dark:bg-black/50 dark:border-[#333] dark:text-zinc-300`}
                   >
                     Scroll for more
                   </div>
diff --git a/frontend/src/context/ThemeContext.tsx b/frontend/src/context/ThemeContext.tsx
index 011cd9e..7375cd9 100644
--- a/frontend/src/context/ThemeContext.tsx
+++ b/frontend/src/context/ThemeContext.tsx
@@ -1,37 +1,28 @@
 "use client";
 
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 interface ThemeContextValue {
   darkMode: boolean;
   toggleTheme: () => void;
+  mounted: boolean;
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [darkMode, setDarkMode] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    const storedTheme = window.localStorage.getItem("refme-theme");
-    if (storedTheme === "light" || storedTheme === "dark") {
-      setDarkMode(storedTheme === "dark");
-      return;
-    }
-
-    const prefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    ).matches;
-    setDarkMode(prefersDark);
+    const isDark = document.documentElement.classList.contains("dark");
+    setDarkMode(isDark);
+    setMounted(true);
   }, []);
 
   useEffect(() => {
+    if (!mounted) return; 
+
     const root = document.documentElement;
     const body = document.body;
 
@@ -44,19 +35,18 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       body.classList.remove("dark");
       window.localStorage.setItem("refme-theme", "light");
     }
-  }, [darkMode]);
+  }, [darkMode, mounted]);
 
   const value = useMemo(
     () => ({
       darkMode,
       toggleTheme: () => setDarkMode((current) => !current),
+      mounted,
     }),
-    [darkMode],
+    [darkMode, mounted],
   );
 
-  return (
-    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }
 
 export function useTheme() {
@@ -65,4 +55,4 @@ export function useTheme() {
     throw new Error("useTheme must be used inside ThemeProvider");
   }
   return context;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/useGitHubStats.ts b/frontend/src/hooks/useGitHubStats.ts
new file mode 100644
index 0000000..fa47ef2
--- /dev/null
+++ b/frontend/src/hooks/useGitHubStats.ts
@@ -0,0 +1,88 @@
+import { useState, useEffect } from "react";
+
+export interface GitHubStats {
+  stars: string;
+  openIssues: string;
+  openPrs: string;
+  mergedPrs: string;
+  lastPush: string;
+  contributors: any[];
+  loading: boolean;
+}
+
+const CACHE_KEY = "refme-github-stats-cache";
+const CACHE_DURATION_MS = 36000000; 
+
+export function useGitHubStats(): GitHubStats {
+  const [githubStats, setGithubStats] = useState<GitHubStats>({
+    stars: "-",
+    openIssues: "-",
+    openPrs: "-",
+    mergedPrs: "-",
+    lastPush: "",
+    contributors: [],
+    loading: true,
+  });
+
+  useEffect(() => {
+    const fetchGitHubStats = async () => {
+      try {
+        try {
+          const cachedStr = localStorage.getItem(CACHE_KEY);
+          if (cachedStr) {
+            const cached = JSON.parse(cachedStr);
+            if (cached && cached.timestamp && Date.now() - cached.timestamp < CACHE_DURATION_MS) {
+              setGithubStats({ ...cached.data, loading: false });
+              return; 
+            }
+          }
+        } catch (cacheReadError) {
+          console.warn("Failed to read GitHub stats from cache:", cacheReadError);
+        }
+
+        const [repoRes, openPrsRes, mergedPrsRes, issuesRes, contributorsRes] = await Promise.all([
+          fetch('https://api.github.com/repos/yash-pluto/refme').catch(() => null),
+          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:open').catch(() => null),
+          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:merged').catch(() => null),
+          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:issue+is:open').catch(() => null),
+          fetch('https://api.github.com/repos/yash-pluto/refme/contributors').catch(() => null)
+        ]);
+
+        const repoData = repoRes && repoRes.ok ? await repoRes.json() : {};
+        const openPrsData = openPrsRes && openPrsRes.ok ? await openPrsRes.json() : {};
+        const mergedPrsData = mergedPrsRes && mergedPrsRes.ok ? await mergedPrsRes.json() : {};
+        const issuesData = issuesRes && issuesRes.ok ? await issuesRes.json() : {};
+        const contributorsData = contributorsRes && contributorsRes.ok ? await contributorsRes.json() : [];
+
+        const freshData = {
+          stars: repoData.stargazers_count !== undefined ? repoData.stargazers_count.toString() : "-",
+          openIssues: issuesData.total_count !== undefined ? issuesData.total_count.toString() : "-",
+          openPrs: openPrsData.total_count !== undefined ? openPrsData.total_count.toString() : "-",
+          mergedPrs: mergedPrsData.total_count !== undefined ? mergedPrsData.total_count.toString() : "-",
+          lastPush: repoData.pushed_at || repoData.updated_at || "",
+          contributors: Array.isArray(contributorsData) ? contributorsData : [],
+        };
+
+        setGithubStats({ ...freshData, loading: false });
+
+        try {
+          localStorage.setItem(
+            CACHE_KEY,
+            JSON.stringify({
+              data: freshData,
+              timestamp: Date.now(),
+            })
+          );
+        } catch (cacheWriteError) {
+          console.warn("Failed to write GitHub stats to cache:", cacheWriteError);
+        }
+      } catch (error) {
+        setGithubStats((prev) => ({ ...prev, loading: false }));
+      }
+    };
+
+    fetchGitHubStats();
+  }, []);
+
+  return githubStats;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/mdx.ts b/frontend/src/lib/mdx.ts
index 38bc772..581ec87 100644
--- a/frontend/src/lib/mdx.ts
+++ b/frontend/src/lib/mdx.ts
@@ -1,7 +1,7 @@
-// src/lib/mdx.ts
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
+import { cache } from 'react';
 
 export type DocHeading = {
   id: string;
@@ -9,7 +9,6 @@ export type DocHeading = {
   depth: number;
 };
 
-// This safely resolves the 'content' directory at the root of your Next.js app
 const contentDir = path.join(process.cwd(), "content");
 
 export function extractHeadings(content: string): DocHeading[] {
@@ -41,7 +40,6 @@ export function extractHeadings(content: string): DocHeading[] {
 export function getTopicBySlug(slug: string) {
   const fullPath = path.join(contentDir, `${slug}.mdx`);
 
-  // If the file doesn't exist, return null (this triggers the 404)
   if (!fs.existsSync(fullPath)) return null;
 
   const fileContents = fs.readFileSync(fullPath, "utf8");
@@ -50,12 +48,12 @@ export function getTopicBySlug(slug: string) {
   return { frontmatter: data, content, headings: extractHeadings(content) };
 }
 
-export function getAllTopics() {
+export const getAllTopics = cache(() => {
   if (!fs.existsSync(contentDir)) return [];
 
   const fileNames = fs.readdirSync(contentDir);
   const topics = fileNames
-    .filter((fileName) => fileName.endsWith(".mdx")) // Only get MDX files
+    .filter((fileName) => fileName.endsWith(".mdx")) 
     .map((fileName) => {
       const id = fileName.replace(/\.mdx$/, "");
       const fullPath = path.join(contentDir, fileName);
@@ -70,4 +68,4 @@ export function getAllTopics() {
     });
 
   return topics;
-}
+});
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 7199083..1812368 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,8 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: "class", // <-- ADD THIS LINE
+  darkMode: "class", 
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
-  // ... rest of your config
 };
 export default config;