diff --git a/src/App.tsx b/src/App.tsx
index 6f1559fe..51b9d660 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,7 +23,7 @@ const App = () => {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
       <RouterProvider router={router} />
     </div>
   );
diff --git a/src/components/AboutUs/GoalsSection.tsx b/src/components/AboutUs/GoalsSection.tsx
index 046948cf..4e8106b8 100644
--- a/src/components/AboutUs/GoalsSection.tsx
+++ b/src/components/AboutUs/GoalsSection.tsx
@@ -4,21 +4,21 @@ import { FC } from 'react';
 
 const GoalsSection: FC = () => {
   return (
-    <section id="goals" className="w-full py-24 bg-white">
+    <section id="goals" className="w-full py-24 bg-white dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">
           <motion.h2
-            className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
+            className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
             initial={animations.flowContainer.initial}
             whileInView={animations.flowContainer.whileInView}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="text-blue-900 font-medium">
+            <span className="text-blue-900 dark:text-blue-400 font-medium">
               {sectionContent.title.main}
             </span>{' '}
-            <span className="text-red-600 font-medium">
+            <span className="text-red-600 dark:text-red-400 font-medium">
               {sectionContent.title.highlight}
             </span>
           </motion.h2>
@@ -32,7 +32,7 @@ const GoalsSection: FC = () => {
           />
 
           <motion.p
-            className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
+            className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
             initial={animations.flowContainer.initial}
             whileInView={animations.flowContainer.whileInView}
             viewport={{ once: true }}
@@ -47,7 +47,7 @@ const GoalsSection: FC = () => {
           {goals.map((goal, i) => (
             <motion.div
               key={i}
-              className="bg-white rounded-lg shadow-sm p-6 border border-slate-100 transition-all duration-300 
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-slate-100 dark:border-gray-700 transition-all duration-300 
                 hover:shadow-md group relative overflow-hidden"
               initial={animations.goalItem.initial}
               whileInView={{ opacity: 1, x: 0 }}
@@ -66,20 +66,20 @@ const GoalsSection: FC = () => {
                 <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-rose-400 flex items-center justify-center text-white font-semibold text-sm">
                   {i + 1}
                 </div>
-                <div className="h-px flex-grow bg-slate-100 ml-3"></div>
+                <div className="h-px flex-grow bg-slate-100 dark:bg-gray-700 ml-3"></div>
               </div>
 
               {/* Goal content */}
-              <h4 className="font-semibold text-slate-800 text-lg mb-3">
+              <h4 className="font-semibold text-slate-800 dark:text-slate-200 text-lg mb-3">
                 {goal.title}
               </h4>
-              <p className="text-slate-600 leading-relaxed">
+              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                 {goal.description}
               </p>
 
               {/* Category tag */}
               {goal.category && (
-                <div className="mt-4 inline-block px-3 py-1 bg-slate-50 text-xs font-medium text-slate-600 rounded-full">
+                <div className="mt-4 inline-block px-3 py-1 bg-slate-50 dark:bg-gray-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full">
                   {goal.category}
                 </div>
               )}
diff --git a/src/components/AboutUs/MissionSection.tsx b/src/components/AboutUs/MissionSection.tsx
index e316f89a..5208979e 100644
--- a/src/components/AboutUs/MissionSection.tsx
+++ b/src/components/AboutUs/MissionSection.tsx
@@ -3,21 +3,24 @@ import { content } from '@/constants/aboutUs/mission';
 
 const MissionSection = () => {
   return (
-    <section id={content.sectionId} className="w-full py-24 bg-white">
+    <section
+      id={content.sectionId}
+      className="w-full py-24 bg-white dark:bg-gray-900"
+    >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">
           <motion.h2
-            className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
+            className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="text-blue-900 font-medium">
+            <span className="text-blue-900 dark:text-blue-400 font-medium">
               {content.title.prefix}
             </span>{' '}
-            <span className="text-red-600 font-medium">
+            <span className="text-red-600 dark:text-red-400 font-medium">
               {content.title.highlighted}
             </span>
           </motion.h2>
@@ -54,7 +57,7 @@ const MissionSection = () => {
 
           {/* Text content */}
           <motion.div
-            className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700"
+            className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700 dark:text-slate-300"
             initial={{ opacity: 0, x: 20 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
diff --git a/src/components/AboutUs/PrinciplesSection.tsx b/src/components/AboutUs/PrinciplesSection.tsx
index 5cac651f..233a1a6e 100644
--- a/src/components/AboutUs/PrinciplesSection.tsx
+++ b/src/components/AboutUs/PrinciplesSection.tsx
@@ -3,21 +3,24 @@ import { principles, principlesContent } from '@/constants/aboutUs/principles';
 
 const PrinciplesSection = () => {
   return (
-    <section id={principlesContent.sectionId} className="w-full py-24 bg-white">
+    <section
+      id={principlesContent.sectionId}
+      className="w-full py-24 bg-white dark:bg-gray-900"
+    >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">
           <motion.h2
-            className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
+            className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="text-blue-900 font-medium">
+            <span className="text-blue-900 dark:text-blue-400 font-medium">
               {principlesContent.title.prefix}
             </span>{' '}
-            <span className="text-red-600 font-medium">
+            <span className="text-red-600 dark:text-red-400 font-medium">
               {principlesContent.title.highlight}
             </span>
           </motion.h2>
@@ -39,8 +42,8 @@ const PrinciplesSection = () => {
             viewport={{ once: true }}
             transition={{ duration: 0.8 }}
           >
-            <div className="bg-slate-50 p-8 rounded-lg shadow-md border-l-2 border-indigo-700">
-              <p className="text-base sm:text-lg text-slate-700 leading-relaxed">
+            <div className="bg-slate-50 dark:bg-slate-800 p-8 rounded-lg shadow-md border-l-2 border-indigo-700 dark:border-indigo-500">
+              <p className="text-base sm:text-lg text-slate-700 dark:text-slate-300 leading-relaxed">
                 {principlesContent.description}
               </p>
             </div>
@@ -83,7 +86,7 @@ const PrinciplesSection = () => {
               viewport={{ once: true }}
               transition={{ duration: 0.6, delay: 0.1 * index }}
             >
-              <div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-200 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
+              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-200 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
                 <div className="h-48 overflow-hidden relative">
                   <img
                     src={principle.image}
@@ -92,11 +95,11 @@ const PrinciplesSection = () => {
                   />
                 </div>
 
-                <div className="p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-slate-50">
-                  <h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-200">
+                <div className="p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-slate-50 dark:from-gray-800 dark:to-gray-800/50">
+                  <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-3 pb-2 border-b border-slate-200 dark:border-gray-700">
                     {principle.title}
                   </h3>
-                  <p className="text-slate-700 text-base">
+                  <p className="text-slate-700 dark:text-slate-300 text-base">
                     {principle.description}
                   </p>
                 </div>
diff --git a/src/components/AboutUs/ProjectSection.tsx b/src/components/AboutUs/ProjectSection.tsx
index a5d3409e..7bdc8e81 100644
--- a/src/components/AboutUs/ProjectSection.tsx
+++ b/src/components/AboutUs/ProjectSection.tsx
@@ -11,21 +11,24 @@ const ProjectsSection = () => {
     : projects.slice(0, initialProjectCount);
 
   return (
-    <section id={projectsContent.sectionId} className="w-full py-24">
+    <section
+      id={projectsContent.sectionId}
+      className="w-full py-24 dark:bg-gray-900"
+    >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">
           <motion.h2
-            className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
+            className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="text-blue-900 font-medium">
+            <span className="text-blue-900 dark:text-blue-400 font-medium">
               {projectsContent.title.prefix}
             </span>{' '}
-            <span className="text-red-600 font-medium">
+            <span className="text-red-600 dark:text-red-400 font-medium">
               {projectsContent.title.highlight}
             </span>
           </motion.h2>
@@ -40,7 +43,7 @@ const ProjectsSection = () => {
 
           {projectsContent.description && (
             <motion.p
-              className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
+              className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
@@ -62,14 +65,14 @@ const ProjectsSection = () => {
               transition={{ duration: 0.6, delay: 0.1 * i }}
               className="h-full"
             >
-              <div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-100 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
+              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
                 <div className="relative">
                   <div className="absolute top-0 right-0 z-10">
                     <div className="bg-blue-600 text-white text-xs py-1 px-3 font-medium">
                       Project {i + 1}
                     </div>
                   </div>
-                  <div className="w-full h-48 bg-slate-50 flex items-center justify-center p-6">
+                  <div className="w-full h-48 bg-slate-50 dark:bg-gray-700 flex items-center justify-center p-6">
                     <img
                       src={project.imageUrl}
                       alt={project.title}
@@ -79,11 +82,11 @@ const ProjectsSection = () => {
                 </div>
 
                 <div className="p-6 flex flex-col flex-grow">
-                  <h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-100">
+                  <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-3 pb-2 border-b border-slate-100 dark:border-gray-700">
                     {project.title}
                   </h3>
 
-                  <p className="text-slate-600 mb-6 flex-grow text-base">
+                  <p className="text-slate-600 dark:text-slate-300 mb-6 flex-grow text-base">
                     {project.description}
                   </p>
 
@@ -92,7 +95,7 @@ const ProjectsSection = () => {
                       {project.tags.map((tag, tagIndex) => (
                         <span
                           key={tagIndex}
-                          className="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium"
+                          className="px-2 py-1 bg-slate-100 dark:bg-gray-700 text-slate-700 dark:text-slate-300 rounded-full text-xs font-medium"
                         >
                           {tag}
                         </span>
@@ -104,7 +107,7 @@ const ProjectsSection = () => {
                   {project.link && (
                     <a
                       href={project.link}
-                      className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
+                      className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
                     >
                       {projectsContent.ctaText || 'Learn More'}
                       <svg
@@ -128,7 +131,7 @@ const ProjectsSection = () => {
                       href={project.exlink}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
+                      className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
                     >
                       {projectsContent.ctaText || 'Visit Website'}
                       <svg
@@ -149,7 +152,7 @@ const ProjectsSection = () => {
 
                   {!project.link && !project.exlink && (
                     <button
-                      className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
+                      className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
                       onClick={() => (window.location.href = '#projects')}
                     >
                       {projectsContent.ctaText || 'Learn More'}
@@ -186,7 +189,7 @@ const ProjectsSection = () => {
             {!showAllProjects ? (
               <button
                 onClick={() => setShowAllProjects(true)}
-                className="px-8 py-3 bg-blue-600 hover:bg-red-600 cursor-pointer text-white rounded-lg shadow-sm font-medium transition-all duration-300 inline-flex items-center gap-2"
+                className="px-8 py-3 bg-blue-600 hover:bg-red-600 dark:bg-blue-600 dark:hover:bg-red-700 cursor-pointer text-white rounded-lg shadow-sm font-medium transition-all duration-300 inline-flex items-center gap-2"
               >
                 Show more
                 <svg
diff --git a/src/components/AboutUs/RoadmapSection.tsx b/src/components/AboutUs/RoadmapSection.tsx
index 9f6fb58e..fc0279a5 100644
--- a/src/components/AboutUs/RoadmapSection.tsx
+++ b/src/components/AboutUs/RoadmapSection.tsx
@@ -4,21 +4,24 @@ import { roadmapItems, roadmapContent } from '@/constants/aboutUs/roadmap';
 
 const RoadmapSection: React.FC = () => {
   return (
-    <section id={roadmapContent.sectionId} className="w-full py-24 bg-white">
+    <section
+      id={roadmapContent.sectionId}
+      className="w-full py-24 bg-white dark:bg-gray-900"
+    >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="text-center mb-16">
           <motion.h2
-            className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
+            className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="text-blue-900 font-medium">
+            <span className="text-blue-900 dark:text-blue-400 font-medium">
               {roadmapContent.title.prefix}
             </span>{' '}
-            <span className="text-red-600 font-medium">
+            <span className="text-red-600 dark:text-red-400 font-medium">
               {roadmapContent.title.highlight}
             </span>
           </motion.h2>
@@ -32,7 +35,7 @@ const RoadmapSection: React.FC = () => {
           />
 
           <motion.p
-            className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
+            className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
@@ -44,7 +47,7 @@ const RoadmapSection: React.FC = () => {
 
         <div className="hidden md:block relative w-full mt-20">
           <motion.div
-            className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-slate-200 transform -translate-x-1/2"
+            className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-slate-200 dark:bg-gray-700 transform -translate-x-1/2"
             initial={{ scaleY: 0, transformOrigin: 'top' }}
             whileInView={{ scaleY: 1 }}
             viewport={{ once: true }}
@@ -67,14 +70,14 @@ const RoadmapSection: React.FC = () => {
                 {/* Content */}
                 <div className={`w-3/7 ${index % 2 === 0 ? 'pr-1' : 'pl-1'}`}>
                   <div
-                    className={`p-5 bg-white rounded-lg shadow-md border-t-2 ${
+                    className={`p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-t-2 ${
                       item.borderColor || 'border-blue-600'
                     } transition-all duration-300 hover:shadow-lg`}
                   >
                     <h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
                       {item.title}
                     </h3>
-                    <p className="text-slate-600 text-sm">
+                    <p className="text-slate-600 dark:text-slate-400 text-sm">
                       {item.description || 'Milestone in our journey'}
                     </p>
                   </div>
@@ -103,7 +106,7 @@ const RoadmapSection: React.FC = () => {
           <div className="flex flex-col items-start space-y-12">
             {/* Vertical connecting line */}
             <motion.div
-              className="absolute top-0 bottom-0 left-5 w-0.5 bg-slate-200 h-full"
+              className="absolute top-0 bottom-0 left-5 w-0.5 bg-slate-200 dark:bg-gray-700 h-full"
               style={{ zIndex: 1 }}
               initial={{ scaleY: 0, transformOrigin: 'top' }}
               whileInView={{ scaleY: 1 }}
@@ -135,14 +138,14 @@ const RoadmapSection: React.FC = () => {
 
                 {/* Card */}
                 <div
-                  className={`flex-grow p-5 bg-white rounded-lg shadow-md border-l-2 ${
+                  className={`flex-grow p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-l-2 ${
                     item.borderColor || 'border-blue-600'
                   }`}
                 >
                   <h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
                     {item.title}
                   </h3>
-                  <p className="text-slate-600 text-sm">
+                  <p className="text-slate-600 dark:text-slate-400 text-sm">
                     {item.description || 'Milestone in our journey'}
                   </p>
                 </div>
diff --git a/src/components/AboutUs/TextMaskSection.tsx b/src/components/AboutUs/TextMaskSection.tsx
index 34a18e3b..50ef7eb4 100644
--- a/src/components/AboutUs/TextMaskSection.tsx
+++ b/src/components/AboutUs/TextMaskSection.tsx
@@ -90,7 +90,7 @@ const TextMaskSection = () => {
                 <rect
                   width="100%"
                   height="100%"
-                  fill="rgba(255, 255, 255, 0.92)"
+                  className="fill-white/92 dark:fill-gray-900/92"
                   mask="url(#textMask)"
                 />
               </svg>
@@ -104,9 +104,9 @@ const TextMaskSection = () => {
             <div className="absolute bottom-6 right-6 w-16 h-16 border-b-2 border-r-2 border-white/60"></div>
           </div>
 
-          <div className="py-8 px-6 md:px-12 bg-white text-center">
+          <div className="py-8 px-6 md:px-12 bg-white dark:bg-gray-800 text-center">
             <motion.h3
-              className="text-lg md:text-xl font-medium text-blue-600 mb-3"
+              className="text-lg md:text-xl font-medium text-blue-600 dark:text-blue-400 mb-3"
               initial={{ opacity: 0, y: 10 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
@@ -116,7 +116,7 @@ const TextMaskSection = () => {
             </motion.h3>
 
             <motion.p
-              className="text-base md:text-lg text-slate-700 max-w-2xl mx-auto leading-relaxed"
+              className="text-base md:text-lg text-slate-700 dark:text-slate-300 max-w-2xl mx-auto leading-relaxed"
               initial={{ opacity: 0, y: 10 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
diff --git a/src/components/Banner/Theme.ts b/src/components/Banner/Theme.ts
index e8dc72b2..43120952 100644
--- a/src/components/Banner/Theme.ts
+++ b/src/components/Banner/Theme.ts
@@ -1,46 +1,50 @@
 export const themeConfig = {
   primary: {
-    background: 'from-blue-100 to-indigo-200',
-    border: 'border-blue-300',
-    icon: 'text-blue-700',
+    background:
+      'from-blue-100 to-indigo-200 dark:from-blue-900 dark:to-indigo-950',
+    border: 'border-blue-300 dark:border-blue-800',
+    icon: 'text-blue-700 dark:text-blue-300',
     button:
       'from-blue-700 to-indigo-800 hover:from-blue-800 hover:to-indigo-900',
     progress: 'from-blue-600 to-indigo-700',
-    text: 'text-blue-950',
+    text: 'text-blue-950 dark:text-blue-100',
   },
   success: {
-    background: 'from-green-100 to-emerald-200',
-    border: 'border-green-300',
-    icon: 'text-emerald-700',
+    background:
+      'from-green-100 to-emerald-200 dark:from-green-900 dark:to-emerald-950',
+    border: 'border-green-300 dark:border-green-800',
+    icon: 'text-emerald-700 dark:text-emerald-300',
     button:
       'from-green-700 to-emerald-800 hover:from-green-800 hover:to-emerald-900',
     progress: 'from-green-600 to-emerald-700',
-    text: 'text-green-950',
+    text: 'text-green-950 dark:text-green-100',
   },
   warning: {
-    background: 'from-amber-100 to-orange-200',
-    border: 'border-amber-300',
-    icon: 'text-amber-700',
+    background:
+      'from-amber-100 to-orange-200 dark:from-amber-900 dark:to-orange-950',
+    border: 'border-amber-300 dark:border-amber-800',
+    icon: 'text-amber-700 dark:text-amber-300',
     button:
       'from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800',
     progress: 'from-amber-600 to-orange-700',
-    text: 'text-amber-950',
+    text: 'text-amber-950 dark:text-amber-100',
   },
   sale: {
-    background: 'from-purple-100 to-fuchsia-200',
-    border: 'border-purple-300',
-    icon: 'text-purple-700',
+    background:
+      'from-purple-100 to-fuchsia-200 dark:from-purple-900 dark:to-fuchsia-950',
+    border: 'border-purple-300 dark:border-purple-800',
+    icon: 'text-purple-700 dark:text-purple-300',
     button:
       'from-purple-700 to-fuchsia-800 hover:from-purple-800 hover:to-fuchsia-900',
     progress: 'from-purple-600 to-fuchsia-700',
-    text: 'text-purple-950',
+    text: 'text-purple-950 dark:text-purple-100',
   },
   info: {
-    background: 'from-cyan-100 to-sky-200',
-    border: 'border-cyan-300',
-    icon: 'text-cyan-700',
+    background: 'from-cyan-100 to-sky-200 dark:from-cyan-900 dark:to-sky-950',
+    border: 'border-cyan-300 dark:border-cyan-800',
+    icon: 'text-cyan-700 dark:text-cyan-300',
     button: 'from-cyan-700 to-sky-800 hover:from-cyan-800 hover:to-sky-900',
     progress: 'from-cyan-600 to-sky-700',
-    text: 'text-cyan-950',
+    text: 'text-cyan-950 dark:text-cyan-100',
   },
 };
diff --git a/src/components/DeveloperTestimonials.tsx b/src/components/DeveloperTestimonials.tsx
index c57f43de..9d8c1cab 100644
--- a/src/components/DeveloperTestimonials.tsx
+++ b/src/components/DeveloperTestimonials.tsx
@@ -120,7 +120,7 @@ export function DeveloperTestimonials() {
           />
 
           <motion.h2
-            className="font-bold tracking-wider font-Caveat text-3xl md:text-5xl lg:text-6xl text-gray-800 text-center"
+            className="font-bold tracking-wider font-Caveat text-3xl md:text-5xl lg:text-6xl text-gray-800 dark:text-gray-200 text-center"
             variants={testimonialHeading}
           >
             <span className="text-5xl font-bold font-[Caveat]">
diff --git a/src/components/DirectorCard.tsx b/src/components/DirectorCard.tsx
index 3ca5ad0e..a2312838 100644
--- a/src/components/DirectorCard.tsx
+++ b/src/components/DirectorCard.tsx
@@ -6,12 +6,12 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
   const showPlaceholder = imageError || !director.imageUrl;
 
   return (
-    <div className="flex flex-col h-full bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+    <div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
       <div className="flex justify-center pt-8 pb-4 relative">
-        <div className="absolute top-0 left-0 w-1 h-full bg-red-500"></div>
-        <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-white shadow-md">
+        <div className="absolute top-0 left-0 w-1 h-full bg-red-500 dark:bg-red-400"></div>
+        <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-md">
           {showPlaceholder ? (
-            <div className="flex items-center justify-center w-full h-full bg-gray-100 text-gray-700 text-2xl font-bold">
+            <div className="flex items-center justify-center w-full h-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-2xl font-bold">
               {director.name
                 .split(' ')
                 .map((n) => n[0])
@@ -30,22 +30,24 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
 
       <div className="flex flex-col flex-grow p-5 gap-3">
         <div className="text-center">
-          <h3 className="text-xl font-bold text-gray-900">{director.name}</h3>
+          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+            {director.name}
+          </h3>
           {director.position && (
-            <p className="text-sm font-medium text-red-500 mt-1">
+            <p className="text-sm font-medium text-red-500 dark:text-red-400 mt-1">
               {director.position}
             </p>
           )}
         </div>
 
-        <div className="w-16 h-0.5 bg-gray-200 mx-auto"></div>
+        <div className="w-16 h-0.5 bg-gray-200 dark:bg-gray-700 mx-auto"></div>
         <div className="flex-grow">
-          <div className="text-gray-600 text-sm leading-relaxed max-h-28 overflow-y-auto pr-1 custom-scrollbar">
+          <div className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed max-h-28 overflow-y-auto pr-1 custom-scrollbar">
             {director.bio || 'No biography available.'}
           </div>
         </div>
 
-        <div className="pt-3 mt-auto border-t border-gray-100">
+        <div className="pt-3 mt-auto border-t border-gray-100 dark:border-gray-700">
           <div className="flex items-center justify-center gap-4">
             {director.socialLinks?.linkedin && (
               <SocialLink
@@ -71,7 +73,7 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
             {!director.socialLinks?.linkedin &&
               !director.socialLinks?.github &&
               !director.socialLinks?.wiki && (
-                <span className="text-xs text-gray-400">
+                <span className="text-xs text-gray-400 dark:text-gray-500">
                   No social links available
                 </span>
               )}
@@ -87,7 +89,7 @@ const SocialLink: React.FC<SocialLinkProps> = ({ href, aria, icon }) => (
     href={href}
     target="_blank"
     rel="noopener noreferrer"
-    className="text-gray-500 hover:text-red-500 transition-colors"
+    className="text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
     aria-label={aria}
   >
     {icon}
diff --git a/src/components/Donation.tsx b/src/components/Donation.tsx
index abec45bd..c5067b1d 100644
--- a/src/components/Donation.tsx
+++ b/src/components/Donation.tsx
@@ -21,7 +21,7 @@ const Donation: React.FC = () => {
   };
 
   return (
-    <section className="relative overflow-hidden bg-white text-black py-16 px-4">
+    <section className="relative overflow-hidden bg-white dark:bg-gray-900 text-black dark:text-white py-16 px-4">
       <div className="max-w-[90%] mx-auto flex flex-col lg:flex-row items-center justify-center lg:gap-12">
         {/* Left Side - Text Content */}
         <motion.div
@@ -31,7 +31,7 @@ const Donation: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, amount: 0.5 }}
         >
-          <p className="italic text-gray-600 text-lg md:text-xl">
+          <p className="italic text-gray-600 dark:text-gray-400 text-lg md:text-xl">
             Donate to Sugar Labs to make a{' '}
             <span className="font-bold">Positive</span> Impact
           </p>
@@ -39,7 +39,7 @@ const Donation: React.FC = () => {
             <span className="text-red-500">Support</span> and Empower <br />{' '}
             Learners Everywhere
           </h1>
-          <p className="text-gray-600 text-lg mt-4">
+          <p className="text-gray-600 dark:text-gray-400 text-lg mt-4">
             Support Sugar Labs and make a difference in children's education.
             Sugar Labs has brought educational software and authentic problem
             solving to millions in the US and across the globe.
@@ -91,7 +91,7 @@ const Donation: React.FC = () => {
             </motion.div>
             <Link to="/volunteer">
               <motion.div
-                className="bg-white border border-gray-300 rounded-full px-4 py-2 flex items-center shadow-lg"
+                className="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 flex items-center shadow-lg"
                 whileHover={{ scale: 1.05 }}
                 transition={{ type: 'spring', stiffness: 400, damping: 10 }}
               >
@@ -106,7 +106,9 @@ const Donation: React.FC = () => {
                     transition={{ delay: 0.05 * index }}
                   />
                 ))}
-                <span className="ml-4 text-sm">Join the volunteer</span>
+                <span className="ml-4 text-sm dark:text-gray-300">
+                  Join the volunteer
+                </span>
                 <motion.span
                   className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1"
                   initial={{ scale: 0 }}
@@ -135,7 +137,7 @@ const Donation: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, amount: 0.2 }}
         >
-          <motion.p className="text-lg" variants={fadeIn}>
+          <motion.p className="text-lg dark:text-gray-300" variants={fadeIn}>
             Join us to empower young learners across the globe. The simplest way
             to get involved is to join our newsletter.
           </motion.p>
@@ -151,7 +153,7 @@ const Donation: React.FC = () => {
               className="flex"
             >
               <input
-                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-full focus:outline-none bg-white dark:bg-gray-800 text-black dark:text-white"
                 placeholder="Enter your email"
                 type="email"
                 name="email"
diff --git a/src/components/FAQItem.tsx b/src/components/FAQItem.tsx
index 8dc5bc0e..36ddc417 100644
--- a/src/components/FAQItem.tsx
+++ b/src/components/FAQItem.tsx
@@ -38,13 +38,13 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
   return (
     <motion.div
       key={index}
-      className="border-b last:border-b-0"
+      className="border-b last:border-b-0 border-gray-200 dark:border-gray-700"
       variants={faqItemVariants}
       initial="initial"
       animate="animate"
     >
       <motion.button
-        className="w-full text-left py-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer"
+        className="w-full text-left py-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer text-gray-900 dark:text-gray-100"
         onClick={toggleFAQ}
         whileHover="hover"
         variants={faqQuestionButtonVariants}
@@ -54,6 +54,7 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
           variants={faqToggleIconVariants(isOpen)}
           initial="initial"
           animate="animate"
+          className="text-gray-600 dark:text-gray-400"
         >
           {isOpen ? '-' : '+'}
         </motion.span>
@@ -64,7 +65,7 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
         animate="animate"
         style={{ overflow: 'hidden' }}
       >
-        <p className="p-4 text-gray-700">{answer}</p>
+        <p className="p-4 text-gray-700 dark:text-gray-300">{answer}</p>
       </motion.div>
     </motion.div>
   );
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index f92664ae..66e0214a 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -48,14 +48,14 @@ const Info: React.FC = () => {
 
   return (
     <>
-      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white font-Inter">
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-gray-900 font-Inter">
         <main className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 py-8 sm:py-10 md:py-12 space-y-12 sm:space-y-16 md:space-y-20">
           {/* Hero Section */}
           <section className="container mx-auto px-2 sm:px-4 py-6 sm:py-8 max-w-7xl">
             <motion.div
               className="relative mb-6 sm:mb-8 rounded-2xl sm:rounded-3xl overflow-hidden shadow-xl sm:shadow-2xl 
                        transform hover:scale-[1.01] transition-all duration-500 
-                       ease-out bg-white"
+                       ease-out bg-white dark:bg-gray-800"
               initial="hidden"
               whileInView="visible"
               viewport={{ once: true }}
@@ -107,7 +107,7 @@ const Info: React.FC = () => {
                   <motion.div
                     key={key}
                     className="group relative rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl 
-                  transition-all duration-500 bg-white"
+                  transition-all duration-500 bg-white dark:bg-gray-800"
                     variants={subtleRise}
                     whileHover="hover"
                   >
@@ -170,10 +170,10 @@ const Info: React.FC = () => {
             <div className="space-y-6 sm:space-y-8 md:space-y-10">
               <div
                 className="inline-block px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-3 bg-gradient-to-r 
-                         from-red-500/10 to-orange-500/10 rounded-full"
+                         from-red-500/10 to-orange-500/10 dark:from-red-500/20 dark:to-orange-500/20 rounded-full"
               >
                 <span
-                  className="text-xs sm:text-sm font-bold text-red-600 tracking-wider 
+                  className="text-xs sm:text-sm font-bold text-red-600 dark:text-red-400 tracking-wider 
                            uppercase"
                 >
                   Empowering Young Learners
@@ -181,7 +181,7 @@ const Info: React.FC = () => {
               </div>
               <motion.h2
                 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black space-y-1 sm:space-y-2 
-                         font-display tracking-tight"
+                         font-display tracking-tight dark:text-white"
                 variants={subtleRise}
               >
                 <span className="font-bold tracking-wider font-Caveat text-5xl sm:text-6xl md:text-7xl lg:text-8xl">
@@ -201,13 +201,13 @@ const Info: React.FC = () => {
               </motion.h2>
 
               <motion.h4
-                className="text-base sm:text-lg md:text-xl font-bold text-gray-800"
+                className="text-base sm:text-lg md:text-xl font-bold text-gray-800 dark:text-gray-200"
                 variants={subtleRise}
               >
                 Igniting Curiosity through Project Based Learning
               </motion.h4>
 
-              <p className="text-gray-600 text-sm sm:text-base md:text-lg font-Roboto">
+              <p className="text-gray-600 dark:text-gray-400 text-sm sm:text-base md:text-lg font-Roboto">
                 Empowering Young Minds with Hands-on Learning, Transforming
                 Curiosity into Discovery and Innovation.
               </p>
diff --git a/src/components/Product.tsx b/src/components/Product.tsx
index f7dbbbd6..cf0883d3 100644
--- a/src/components/Product.tsx
+++ b/src/components/Product.tsx
@@ -21,7 +21,7 @@ const ProductCard = ({ product }: { product: ProductType }) => {
   const [currentImage, setCurrentImage] = useState(0);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 border-b pb-10">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 border-b dark:border-gray-700 pb-10">
       {/* Product Image Carousel with custom hover controls */}
       <div className="relative group w-full">
         <Carousel
@@ -69,8 +69,12 @@ const ProductCard = ({ product }: { product: ProductType }) => {
 
       {/* Product Details */}
       <div>
-        <h3 className="text-3xl font-semibold">{product.name}</h3>
-        <p className="text-gray-600 mt-2">{product.description}</p>
+        <h3 className="text-3xl font-semibold dark:text-white">
+          {product.name}
+        </h3>
+        <p className="text-gray-600 dark:text-gray-300 mt-2">
+          {product.description}
+        </p>
 
         <div className="mt-6">
           <a
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index ee85594f..84eb3876 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -10,19 +10,19 @@ import {
 
 const Stats = () => {
   return (
-    <section className="max-w-7xl mx-auto py-10 sm:py-16 md:py-20 px-4 sm:px-6 bg-white">
+    <section className="max-w-7xl mx-auto py-10 sm:py-16 md:py-20 px-4 sm:px-6 bg-white dark:bg-gray-900">
       <div className="relative mb-12 sm:mb-16 md:mb-24">
         <div className="absolute left-0 top-1/2 w-full h-0.5 sm:h-1 bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 transform -translate-y-1/2 opacity-30"></div>
 
         <motion.div
-          className="relative z-10 text-center mx-auto max-w-2xl bg-white px-2 py-2 sm:py-4"
+          className="relative z-10 text-center mx-auto max-w-2xl bg-white dark:bg-gray-900 px-2 py-2 sm:py-4"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, amount: 0.3 }}
         >
           <motion.h1 variants={headerReveal} className="text-center">
             <motion.span
-              className="block text-black font-Caveat text-5xl sm:text-6xl md:text-7xl mb-1 sm:mb-2"
+              className="block text-black dark:text-white font-Caveat text-5xl sm:text-6xl md:text-7xl mb-1 sm:mb-2"
               variants={headerReveal}
               custom={1}
             >
@@ -37,7 +37,7 @@ const Stats = () => {
               numbers
             </motion.div>
             <motion.span
-              className="text-black italic font-serif text-2xl sm:text-3xl md:text-4xl"
+              className="text-black dark:text-white italic font-serif text-2xl sm:text-3xl md:text-4xl"
               variants={headerReveal}
               custom={3}
             >
@@ -46,7 +46,7 @@ const Stats = () => {
           </motion.h1>
 
           <motion.p
-            className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-Roboto mt-4 sm:mt-6"
+            className="text-gray-600 dark:text-gray-400 text-base sm:text-lg md:text-xl leading-relaxed font-Roboto mt-4 sm:mt-6"
             variants={headerReveal}
             custom={4}
           >
@@ -65,12 +65,12 @@ const Stats = () => {
         viewport={{ once: true, amount: 0.1 }}
       >
         <motion.div
-          className="flex flex-col lg:flex-row items-center bg-gradient-to-r from-green-50 to-green-100 rounded-xl sm:rounded-2xl overflow-hidden shadow-lg sm:shadow-xl border border-green-200"
+          className="flex flex-col lg:flex-row items-center bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/50 dark:to-green-950/50 rounded-xl sm:rounded-2xl overflow-hidden shadow-lg sm:shadow-xl border border-green-200 dark:border-green-800"
           variants={item}
           whileHover="hover"
         >
           <div className="w-full lg:w-1/2 p-5 sm:p-8 lg:p-12">
-            <h3 className="text-gray-700 text-xl sm:text-2xl font-medium mb-3 sm:mb-4 font-AnonymousPro">
+            <h3 className="text-gray-700 dark:text-gray-200 text-xl sm:text-2xl font-medium mb-3 sm:mb-4 font-AnonymousPro">
               Kids whose lives have been enriched by using the Sugar Learning
               Platform.
             </h3>
@@ -126,7 +126,7 @@ const Stats = () => {
               ></div>
             </motion.div>
             <div className="p-4 sm:p-5 md:p-6">
-              <h3 className="text-gray-700 text-lg sm:text-xl font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-12 sm:h-14">
+              <h3 className="text-gray-700 dark:text-gray-200 text-lg sm:text-xl font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-12 sm:h-14">
                 {stat.title}
               </h3>
               <motion.div
@@ -145,16 +145,16 @@ const Stats = () => {
 
       {/* Closing Section with Interactive Element */}
       <motion.div
-        className="text-center mt-10 sm:mt-12 md:mt-16 pt-8 sm:pt-12 md:pt-16 border-t border-gray-200"
+        className="text-center mt-10 sm:mt-12 md:mt-16 pt-8 sm:pt-12 md:pt-16 border-t border-gray-200 dark:border-gray-700"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.8 }}
         viewport={{ once: true }}
       >
-        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-4 sm:mb-6">
+        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4 sm:mb-6">
           Join us and make a difference
         </h2>
-        <p className="text-gray-600 max-w-2xl mx-auto mb-6 sm:mb-8 md:mb-10 px-4 text-sm sm:text-base md:text-lg">
+        <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-6 sm:mb-8 md:mb-10 px-4 text-sm sm:text-base md:text-lg">
           These numbers represent more than statistics - they represent lives
           changed through education and technology. Sugar Labs continues to grow
           and impact communities worldwide.
@@ -177,7 +177,7 @@ const Stats = () => {
               >
                 {stat.value}
               </span>
-              <span className="text-gray-700 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-1">
+              <span className="text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-1">
                 {stat.title.split('.')[0].substring(0, 12)}
                 {stat.title.split('.')[0].length > 12 ? '...' : ''}
               </span>
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
index 13e68bb6..bd779450 100644
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@@ -62,7 +62,7 @@ const ReviewCard = ({
           <motion.img
             src={img}
             alt={name}
-            className="w-12 h-12 rounded-full border border-gray-300 object-cover"
+            className="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-600"
             variants={avatarReveal}
             onError={() => setImgError(true)}
           />
@@ -93,7 +93,7 @@ export function Testimonials() {
   const secondRow = testimonials.slice(Math.ceil(testimonials.length / 2));
 
   return (
-    <div className="w-full bg-gradient-to-b from-white-800 to-[#F5DDC8]">
+    <div className="w-full bg-gradient-to-b from-white-800 to-[#F5DDC8] dark:from-gray-900 dark:to-gray-800">
       {/* Heading Section with Hearts */}
       <motion.div
         className="flex items-center justify-center gap-4 md:gap-6 mb-12"
@@ -124,10 +124,10 @@ export function Testimonials() {
 
           {/* Heading */}
           <motion.h2
-            className="font-bold tracking-wider font-Caveat text-3xl md:text-5xl lg:text-6xl text-gray-800 text-center"
+            className="font-bold tracking-wider font-Caveat text-3xl md:text-5xl lg:text-6xl text-gray-800 dark:text-gray-200 text-center"
             variants={testimonialHeading}
           >
-            <span className="text-black">
+            <span className="text-black dark:text-white">
               Words of appreciation and
               <br /> admiration from others.
             </span>
@@ -185,8 +185,8 @@ export function Testimonials() {
         </Marquee>
 
         {/* Gradient Fades */}
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-6 md:w-10 bg-gradient-to-r from-background"></div>
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-6 md:w-10 bg-gradient-to-l from-background"></div>
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-6 md:w-10 bg-gradient-to-r from-[#F5DDC8] dark:from-gray-800"></div>
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-6 md:w-10 bg-gradient-to-l from-[#F5DDC8] dark:from-gray-800"></div>
       </motion.div>
     </div>
   );
diff --git a/src/components/Try.tsx b/src/components/Try.tsx
index 9bb35277..77323366 100644
--- a/src/components/Try.tsx
+++ b/src/components/Try.tsx
@@ -66,7 +66,7 @@ const Try: React.FC = () => {
       animate="visible"
       variants={fadeIn}
     >
-      <motion.main className="flex-grow bg-[#F6DEC9] px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
+      <motion.main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900/95 px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
         <div className="max-w-6xl mx-auto space-y-6 sm:space-y-8">
           <motion.header
             className="space-y-3 sm:space-y-4 md:space-y-6"
@@ -83,7 +83,7 @@ const Try: React.FC = () => {
                 EXPERIENCE
               </motion.span>
               <motion.span
-                className="text-black sm:ml-2 mt-1 sm:mt-0"
+                className="text-black dark:text-white sm:ml-2 mt-1 sm:mt-0"
                 variants={slideInRight}
               >
                 SUGAR
@@ -94,14 +94,14 @@ const Try: React.FC = () => {
               variants={subtleRise}
             >
               <motion.p
-                className="text-[#975555] text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
+                className="text-[#975555] dark:text-pink-400 text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
                 variants={fadeIn}
               >
                 "Our educational tools can be experienced in a number of ways.
                 Try the ones that are best for you!"
               </motion.p>
               <motion.i
-                className="text-xs md:text-sm text-gray-700 block"
+                className="text-xs md:text-sm text-gray-700 dark:text-gray-400 block"
                 variants={fadeIn}
               >
                 Whether you enjoy hands-on activities, visual learning, or
@@ -163,7 +163,7 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('prev', setCurrentCard, TryCardData.length)
                   }
-                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 dark:bg-gray-800/80 text-[#975555] dark:text-pink-400 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all"
                   aria-label="Previous"
                 >
                   <svg
@@ -184,7 +184,7 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('next', setCurrentCard, TryCardData.length)
                   }
-                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 dark:bg-gray-800/80 text-[#975555] dark:text-pink-400 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all"
                   aria-label="Next"
                 >
                   <svg
@@ -212,8 +212,8 @@ const Try: React.FC = () => {
                   onClick={() => setCurrentCard(index)}
                   className={`w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full transition-all duration-300 ${
                     currentCard === index
-                      ? 'bg-[#975555] w-4 sm:w-6'
-                      : 'bg-[#975555]/30'
+                      ? 'bg-[#975555] dark:bg-pink-400 w-4 sm:w-6'
+                      : 'bg-[#975555]/30 dark:bg-pink-400/30'
                   }`}
                   aria-label={`Go to slide ${index + 1}`}
                 />
@@ -244,7 +244,7 @@ const Try: React.FC = () => {
                 ALREADY USING
               </motion.span>
               <motion.span
-                className="text-black sm:ml-2 mt-1 sm:mt-0"
+                className="text-black dark:text-white sm:ml-2 mt-1 sm:mt-0"
                 variants={slideInRight}
               >
                 SUGAR?
@@ -255,13 +255,13 @@ const Try: React.FC = () => {
               variants={subtleRise}
             >
               <motion.p
-                className="text-[#975555] text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
+                className="text-[#975555] dark:text-pink-400 text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
                 variants={fadeIn}
               >
                 "We have many activities for you!"
               </motion.p>
               <motion.i
-                className="text-xs md:text-sm text-gray-700 block"
+                className="text-xs md:text-sm text-gray-700 dark:text-gray-400 block"
                 variants={fadeIn}
               >
                 The Sugar Learning platform is a complete environment for
@@ -339,7 +339,7 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('prev', setCurrentActivity, Activities.length)
                   }
-                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 dark:bg-gray-800/80 text-[#975555] dark:text-pink-400 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all"
                   aria-label="Previous"
                 >
                   <svg
@@ -360,7 +360,7 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('next', setCurrentActivity, Activities.length)
                   }
-                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 dark:bg-gray-800/80 text-[#975555] dark:text-pink-400 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all"
                   aria-label="Next"
                 >
                   <svg
@@ -388,8 +388,8 @@ const Try: React.FC = () => {
                   onClick={() => setCurrentActivity(index)}
                   className={`w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full transition-all duration-300 ${
                     currentActivity === index
-                      ? 'bg-[#975555] w-4 sm:w-6'
-                      : 'bg-[#975555]/30'
+                      ? 'bg-[#975555] dark:bg-pink-400 w-4 sm:w-6'
+                      : 'bg-[#975555]/30 dark:bg-pink-400/30'
                   }`}
                   aria-label={`Go to slide ${index + 1}`}
                 />
diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index 57195478..5400326c 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -29,13 +29,13 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
   href,
   version,
 }) => (
-  <div className="bg-white rounded-xl sm:rounded-3xl p-4 sm:p-6 md:p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
+  <div className="bg-white dark:bg-gray-800 rounded-xl sm:rounded-3xl p-4 sm:p-6 md:p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105 border border-transparent dark:border-gray-700">
     <img
       src={icon}
       alt={title}
       className="flex-1/3 w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 mb-3 sm:mb-4"
     />
-    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold mb-1 sm:mb-2">
+    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold mb-1 sm:mb-2 dark:text-white">
       {title}
     </h3>
 
@@ -43,22 +43,22 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
       <p
         className={`text-xs sm:text-sm mb-1 sm:mb-2 px-4 py-1 rounded-full inline-block ml-auto font-medium ${
           version === 'v4'
-            ? 'bg-pink-100 text-pink-700'
+            ? 'bg-pink-100 text-pink-700 dark:bg-pink-900/50 dark:text-pink-300'
             : version === 'v3'
-              ? 'bg-cyan-100 text-cyan-700'
-              : 'bg-gray-100 text-gray-600'
+              ? 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
         }`}
       >
         {version}
       </p>
     )}
 
-    <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6">
+    <p className="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-6">
       {description}
     </p>
 
     <a href={href} className="w-full">
-      <button className="w-full py-2 sm:py-3 px-4 sm:px-6 border-2 border-gray-900 rounded-full text-sm sm:text-base md:text-lg font-semibold hover:bg-gray-900 cursor-pointer hover:text-white transition-colors">
+      <button className="w-full py-2 sm:py-3 px-4 sm:px-6 border-2 border-gray-900 dark:border-gray-200 dark:text-white rounded-full text-sm sm:text-base md:text-lg font-semibold hover:bg-gray-900 cursor-pointer hover:text-white dark:hover:bg-gray-200 dark:hover:text-black transition-colors">
         {buttonText}
       </button>
     </a>
@@ -75,16 +75,16 @@ export const TryCard: React.FC<TryCardProps> = ({
   imagePath,
   gradientClass,
 }) => (
-  <div className="bg-white rounded-xl sm:rounded-2xl md:rounded-3xl shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] hover:shadow-[rgba(13,_38,_76,_0.25)_0px_12px_28px] transition-all duration-500 overflow-hidden mx-auto w-full group h-full">
+  <div className="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl md:rounded-3xl shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] hover:shadow-[rgba(13,_38,_76,_0.25)_0px_12px_28px] transition-all duration-500 overflow-hidden mx-auto w-full group h-full border border-transparent dark:border-gray-700">
     <div className="p-4 sm:p-5 md:p-6 flex flex-col h-full">
       {/* Content Section */}
       <div className="flex-1 flex flex-col space-y-3 sm:space-y-4">
         {/* Header */}
         <div className="space-y-2 flex-1/4 sm:space-y-3 text-center w-full">
-          <h2 className="text-lg sm:text-xl font-black text-gray-800 leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
+          <h2 className="text-lg sm:text-xl font-black text-gray-800 dark:text-transparent leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
             {title}
           </h2>
-          <p className="text-gray-500 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
+          <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
             {description}
           </p>
         </div>
@@ -105,9 +105,9 @@ export const TryCard: React.FC<TryCardProps> = ({
           </a>
           <Link
             to={learnMoreHref}
-            className="w-full bg-gray-50/80 backdrop-blur-sm border-[1.5px] border-gray-100 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3
+            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3
                      font-bold transition-all duration-500 hover:scale-[1.02] 
-                     hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-xs sm:text-sm
+                     hover:bg-gray-100/80 hover:border-gray-200 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
                      active:scale-95 relative overflow-hidden
                      before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
                      hover:before:translate-x-[150%] before:transition-transform before:duration-700"
@@ -119,7 +119,7 @@ export const TryCard: React.FC<TryCardProps> = ({
 
       {/* Image Section */}
       <div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-4 sm:mt-5 md:mt-6 relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent h-8 sm:h-10 md:h-12 z-10" />
+        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent dark:from-gray-800 dark:via-gray-800/50 h-8 sm:h-10 md:h-12 z-10" />
         <img
           src={imagePath}
           alt={title}
diff --git a/src/components/TryMore3D.tsx b/src/components/TryMore3D.tsx
index cf480494..edce9196 100644
--- a/src/components/TryMore3D.tsx
+++ b/src/components/TryMore3D.tsx
@@ -48,7 +48,7 @@ const ReviewCard = ({
 
 export function TryMore() {
   return (
-    <div className="relative flex flex-col lg:flex-row h-auto lg:h-96 w-full items-center justify-center gap-6 lg:gap-4 overflow-hidden [perspective:300px] px-4 sm:px-6 md:px-10 lg:pl-20 bg-gradient-to-b from-[#F5DDC8] to-white-800">
+    <div className="relative flex flex-col lg:flex-row h-auto lg:h-96 w-full items-center justify-center gap-6 lg:gap-4 overflow-hidden [perspective:300px] px-4 sm:px-6 md:px-10 lg:pl-20 bg-gradient-to-b from-[#F5DDC8] to-white dark:from-gray-800 dark:to-gray-900">
       <div className="height- 30px"></div>
 
       {/* Left Side Content */}
@@ -60,7 +60,7 @@ export function TryMore() {
         variants={staggerContainer}
       >
         <motion.h2
-          className="text-3xl sm:text-4xl font-extrabold text-[#975555] dark:text-[#975555]"
+          className="text-3xl sm:text-4xl font-extrabold text-[#975555] dark:text-red-400"
           variants={headerReveal}
         >
           <motion.span variants={slideInLeft} custom={0}>
diff --git a/src/components/TryNow/FeatureSection.tsx b/src/components/TryNow/FeatureSection.tsx
index 8a9f71f8..fd2c1017 100644
--- a/src/components/TryNow/FeatureSection.tsx
+++ b/src/components/TryNow/FeatureSection.tsx
@@ -30,9 +30,15 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
         variants={featureSectionAnimations.textContainer}
       >
         <h1 className="text-5xl font-bold text-blue-600">{data.title}</h1>
-        <h2 className="text-4xl font-bold text-black mt-2">{data.subtitle}</h2>
-        <p className="text-lg font-semibold mt-4">{data.quote}</p>
-        <p className="text-gray-700 mt-4">{data.description}</p>
+        <h2 className="text-4xl font-bold text-black dark:text-white mt-2">
+          {data.subtitle}
+        </h2>
+        <p className="text-lg font-semibold mt-4 dark:text-gray-300">
+          {data.quote}
+        </p>
+        <p className="text-gray-700 dark:text-gray-300 mt-4">
+          {data.description}
+        </p>
       </motion.div>
 
       {/* Right Side: Image Carousel */}
@@ -69,12 +75,14 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
           </Carousel>
         ) : (
           <motion.div
-            className="w-full max-w-lg h-64 bg-gray-300 rounded-lg flex items-center justify-center"
+            className="w-full max-w-lg h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center"
             initial="hidden"
             animate="visible"
             variants={featureSectionAnimations.image}
           >
-            <p className="text-gray-500">No Image Available</p>
+            <p className="text-gray-500 dark:text-gray-400">
+              No Image Available
+            </p>
           </motion.div>
         )}
       </motion.div>
@@ -82,7 +90,7 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
       {/* Optional Note */}
       {data.note && (
         <motion.p
-          className="text-black font-bold mt-6 text-center w-full"
+          className="text-black dark:text-white font-bold mt-6 text-center w-full"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}
diff --git a/src/components/TryNow/LogoCards.tsx b/src/components/TryNow/LogoCards.tsx
index 988a492b..107be98d 100644
--- a/src/components/TryNow/LogoCards.tsx
+++ b/src/components/TryNow/LogoCards.tsx
@@ -14,7 +14,7 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
       {data.map((card, index) => (
         <motion.div
           key={index}
-          className="bg-white shadow-lg rounded-xl p-6 flex flex-col items-center text-center border border-blue-500"
+          className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6 flex flex-col items-center text-center border border-blue-500 dark:border-blue-400"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, amount: 0.2 }}
@@ -32,13 +32,15 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
           </motion.div>
 
           {/* Title */}
-          <h3 className="text-xl font-bold text-blue-600 mt-4">{card.title}</h3>
+          <h3 className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-4">
+            {card.title}
+          </h3>
 
           {/* Divider */}
-          <hr className="w-full my-3 border-gray-300" />
+          <hr className="w-full my-3 border-gray-300 dark:border-gray-600" />
 
           {/* Description */}
-          <ul className="text-gray-600 text-sm text-left list-disc list-inside">
+          <ul className="text-gray-600 dark:text-gray-300 text-sm text-left list-disc list-inside">
             {card.description.map((point, i) => (
               <li key={i}>{point}</li>
             ))}
diff --git a/src/components/TryNow/NumberedCard.tsx b/src/components/TryNow/NumberedCard.tsx
index a5517b39..21756c1a 100644
--- a/src/components/TryNow/NumberedCard.tsx
+++ b/src/components/TryNow/NumberedCard.tsx
@@ -42,10 +42,10 @@ const NumberedCard: React.FC<NumberedCardProps> = ({
       </motion.div>
 
       {/* Title */}
-      <h3 className="text-lg font-semibold mt-6">{title}</h3>
+      <h3 className="text-lg font-semibold mt-6 dark:text-white">{title}</h3>
 
       {/* Description */}
-      <p className="text-gray-700 mt-2">{description}</p>
+      <p className="text-gray-700 dark:text-gray-300 mt-2">{description}</p>
 
       {/* Conditionally Render Image */}
       {image && (
diff --git a/src/components/TryNow/Paragraph.tsx b/src/components/TryNow/Paragraph.tsx
index 6c2fb53a..b269ef46 100644
--- a/src/components/TryNow/Paragraph.tsx
+++ b/src/components/TryNow/Paragraph.tsx
@@ -33,7 +33,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
     >
       {/* Styled Title */}
       <motion.h2
-        className="text-4xl font-semibold border-b-2 border-gray-300 inline-block pb-2 font-[Caveat]"
+        className="text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 inline-block pb-2 font-[Caveat] dark:text-white"
         variants={paragraphAnimations.text}
       >
         {title}
@@ -41,7 +41,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
 
       {/* Render Content as a List if Multiple Lines Exist */}
       {contentPoints.length > 1 ? (
-        <ul className="text-gray-700 mt-4 list-disc list-inside text-left">
+        <ul className="text-gray-700 dark:text-gray-300 mt-4 list-disc list-inside text-left">
           {contentPoints.map((point, index) => (
             <motion.li
               key={index}
@@ -61,7 +61,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
         </ul>
       ) : (
         <motion.p
-          className="text-gray-700 mt-4"
+          className="text-gray-700 dark:text-gray-300 mt-4"
           variants={paragraphAnimations.text}
         >
           <span
diff --git a/src/components/TryNow/StepsToUse.tsx b/src/components/TryNow/StepsToUse.tsx
index 9f752c9d..7557da5e 100644
--- a/src/components/TryNow/StepsToUse.tsx
+++ b/src/components/TryNow/StepsToUse.tsx
@@ -10,7 +10,7 @@ const StepsToUse = () => {
 
   return (
     <section className="w-[90%] mx-auto py-8">
-      <h2 className="text-3xl font-bold text-center text-black mb-6">
+      <h2 className="text-3xl font-bold text-center text-black dark:text-white mb-6">
         Steps to Boot Sugar on a Stick
       </h2>
 
@@ -28,14 +28,14 @@ const StepsToUse = () => {
           {steps.map((step, index) => (
             <div key={index} className="relative text-center">
               {/* TEXT CONTENT */}
-              <div className="text-lg font-semibold text-gray-600">
+              <div className="text-lg font-semibold text-gray-600 dark:text-gray-400">
                 Step {index + 1}
               </div>
-              <h3 className="text-2xl font-semibold text-black mt-1">
+              <h3 className="text-2xl font-semibold text-black dark:text-white mt-1">
                 {step.title}
               </h3>
               <p
-                className="text-gray-700 mt-2"
+                className="text-gray-700 dark:text-gray-300 mt-2"
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(
                     renderContentWithLinks(step.description, step.links),
diff --git a/src/components/TryNow/TeamSection.tsx b/src/components/TryNow/TeamSection.tsx
index aa4e835e..da8b1897 100644
--- a/src/components/TryNow/TeamSection.tsx
+++ b/src/components/TryNow/TeamSection.tsx
@@ -21,14 +21,14 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
     >
       {/* Title */}
       <motion.h1
-        className="text-5xl font-[Caveat] font-bold"
+        className="text-5xl font-[Caveat] font-bold dark:text-white"
         variants={teamSectionAnimations.heading}
       >
         Music Blocks Offline Edition
       </motion.h1>
 
       <motion.h2
-        className="text-4xl font-[Caveat] font-bold mt-2"
+        className="text-4xl font-[Caveat] font-bold mt-2 dark:text-white"
         variants={teamSectionAnimations.heading}
       >
         and <br /> Curriculum Development Team
@@ -41,7 +41,7 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
 
       {/* Grid Layout for Members */}
       <motion.div
-        className="grid md:grid-cols-2 gap-10 mt-12 bg-gray-100 p-10 rounded-lg"
+        className="grid md:grid-cols-2 gap-10 mt-12 bg-gray-100 dark:bg-gray-800 p-10 rounded-lg"
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -50,7 +50,7 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
         {members.map((member, index) => (
           <motion.div
             key={index}
-            className="flex flex-col md:flex-row items-center bg-white shadow-lg rounded-lg p-6"
+            className="flex flex-col md:flex-row items-center bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6"
             variants={teamSectionAnimations.memberCard}
           >
             {/* Member Image */}
@@ -69,7 +69,9 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
               >
                 {member.name}
               </h3>
-              <p className="text-gray-700 mt-2">{member.description}</p>
+              <p className="text-gray-700 dark:text-gray-300 mt-2">
+                {member.description}
+              </p>
             </div>
           </motion.div>
         ))}
diff --git a/src/components/shared/DarkModeToggle.tsx b/src/components/shared/DarkModeToggle.tsx
new file mode 100644
index 00000000..5771b2c6
--- /dev/null
+++ b/src/components/shared/DarkModeToggle.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+const DarkModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const theme = localStorage.getItem('theme');
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+      setIsDarkMode(true);
+    } else {
+      document.documentElement.classList.remove('dark');
+      setIsDarkMode(false);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    if (isDarkMode) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+    setIsDarkMode(!isDarkMode);
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
+    >
+      {isDarkMode ? '☀️' : '🌙'}
+    </button>
+  );
+};
+
+export default DarkModeToggle;
diff --git a/src/constants/Stats.ts b/src/constants/Stats.ts
index e4527bb2..2e8f027a 100644
--- a/src/constants/Stats.ts
+++ b/src/constants/Stats.ts
@@ -30,8 +30,8 @@ export const statisticsData = [
     imageSrc: stats.kidlaptop,
     imageAlt: 'Student with laptop',
     gradient: 'from-green-600 to-green-700',
-    bgColor: 'bg-green-50',
-    borderColor: 'border-green-200',
+    bgColor: 'bg-green-50 dark:bg-green-900/50',
+    borderColor: 'border-green-200 dark:border-green-800',
   },
   {
     title:
@@ -40,8 +40,8 @@ export const statisticsData = [
     imageSrc: stats.studentsCollaborating,
     imageAlt: 'Students collaborating',
     gradient: 'from-red-600 to-red-700',
-    bgColor: 'bg-red-50',
-    borderColor: 'border-red-200',
+    bgColor: 'bg-red-50 dark:bg-red-900/50',
+    borderColor: 'border-red-200 dark:border-red-800',
   },
   {
     title: 'Problem-solving tasks completed by students ages 13-17.',
@@ -49,8 +49,8 @@ export const statisticsData = [
     imageSrc: stats.studentMobile,
     imageAlt: 'Student with mobile device',
     gradient: 'from-green-600 to-green-700',
-    bgColor: 'bg-green-100',
-    borderColor: 'border-green-300',
+    bgColor: 'bg-green-100 dark:bg-green-900/60',
+    borderColor: 'border-green-300 dark:border-green-700',
   },
   {
     title: 'Activities Downloaded',
@@ -58,8 +58,8 @@ export const statisticsData = [
     imageSrc: stats.activity,
     imageAlt: 'Activity icon',
     gradient: 'from-yellow-600 to-yellow-700',
-    bgColor: 'bg-yellow-50',
-    borderColor: 'border-yellow-200',
+    bgColor: 'bg-yellow-50 dark:bg-yellow-900/50',
+    borderColor: 'border-yellow-200 dark:border-yellow-800',
   },
   {
     title: 'Languages our educational software has been translated into',
@@ -67,8 +67,8 @@ export const statisticsData = [
     imageSrc: stats.language,
     imageAlt: 'Language icon',
     gradient: 'from-blue-600 to-blue-700',
-    bgColor: 'bg-blue-50',
-    borderColor: 'border-blue-200',
+    bgColor: 'bg-blue-50 dark:bg-blue-900/50',
+    borderColor: 'border-blue-200 dark:border-blue-800',
   },
   {
     title:
@@ -77,7 +77,7 @@ export const statisticsData = [
     imageSrc: stats.mentorsTeaching,
     imageAlt: 'Mentors teaching',
     gradient: 'from-red-600 to-red-700',
-    bgColor: 'bg-red-100',
-    borderColor: 'border-red-300',
+    bgColor: 'bg-red-100 dark:bg-red-900/60',
+    borderColor: 'border-red-300 dark:border-red-700',
   },
 ];
diff --git a/src/constants/aboutUs/navigation.ts b/src/constants/aboutUs/navigation.ts
index 5d3c0ce9..ab60445f 100644
--- a/src/constants/aboutUs/navigation.ts
+++ b/src/constants/aboutUs/navigation.ts
@@ -21,12 +21,13 @@ export const navigationConfig = {
 
 export const navigationStyles = {
   container:
-    'sticky bg-white/90 backdrop-blur-md shadow-md rounded-lg p-4 mb-8 z-40 mt-16',
+    'sticky bg-white/90 dark:bg-gray-800/90 backdrop-blur-md shadow-md dark:shadow-gray-700 rounded-lg p-4 mb-8 z-40 mt-16',
   list: 'flex flex-wrap justify-center gap-4 md:gap-8',
   button: {
     base: 'px-4 py-2 rounded-md transition-all duration-300 text-sm md:text-base relative group hover:cursor-pointer',
-    active: 'text-red-500 font-medium',
-    inactive: 'text-gray-600 hover:text-red-500',
+    active: 'text-red-500 dark:text-red-400 font-medium',
+    inactive:
+      'text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400',
   },
   indicator: {
     base: 'absolute bottom-0 left-0 w-full h-0.5 bg-red-500 transform transition-all duration-300',
diff --git a/src/pages/About/AboutUs.tsx b/src/pages/About/AboutUs.tsx
index cafb4a03..3b2e1d10 100644
--- a/src/pages/About/AboutUs.tsx
+++ b/src/pages/About/AboutUs.tsx
@@ -19,7 +19,7 @@ const AboutUs = () => {
   }, []);
 
   return (
-    <div className="bg-white min-h-screen">
+    <div className="bg-white dark:bg-gray-900 min-h-screen">
       <div className="relative z-20">
         <Header />
       </div>
diff --git a/src/pages/About/ContactUs.tsx b/src/pages/About/ContactUs.tsx
index 8c9300d9..94333e4a 100644
--- a/src/pages/About/ContactUs.tsx
+++ b/src/pages/About/ContactUs.tsx
@@ -19,7 +19,7 @@ const ContactUs: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="min-h-screen bg-gray-50">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
         {/* Hero Section */}
         <motion.section
           variants={fadeIn}
@@ -93,7 +93,7 @@ const ContactUs: React.FC = () => {
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
             {/* Contact Information Card */}
             <motion.div
-              className="lg:col-span-7 bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition-shadow duration-300 hover:shadow-lg"
+              className="lg:col-span-7 bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg"
               variants={slideInLeft}
               initial="hidden"
               animate="visible"
@@ -102,7 +102,7 @@ const ContactUs: React.FC = () => {
             >
               <div className="p-6 md:p-8 lg:p-10">
                 <motion.h2
-                  className="text-2xl font-bold text-gray-800 mb-8 flex items-center"
+                  className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-8 flex items-center"
                   variants={fadeIn}
                   initial="hidden"
                   animate="visible"
@@ -122,7 +122,7 @@ const ContactUs: React.FC = () => {
                     iconSrc="assets/Icons/mail.svg"
                     title="By Mail"
                     description={
-                      <address className="mt-2 not-italic text-gray-600 leading-relaxed text-sm">
+                      <address className="mt-2 not-italic text-gray-600 dark:text-gray-400 leading-relaxed text-sm">
                         Sugar Labs
                         <br />
                         2028 E Ben White Blvd <b>STE 240 PMB 1271</b>
@@ -141,7 +141,7 @@ const ContactUs: React.FC = () => {
                     description={
                       <a
                         href="tel:+16177024088"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
+                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
                       >
                         +1 (617) 702-4088
                       </a>
@@ -155,7 +155,7 @@ const ContactUs: React.FC = () => {
                     description={
                       <a
                         href="mailto:info@sugarlabs.org"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
+                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
                       >
                         info@sugarlabs.org
                       </a>
@@ -169,7 +169,7 @@ const ContactUs: React.FC = () => {
                     description={
                       <Link
                         to="matrix"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
+                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
                       >
                         Go to Matrix Chat
                       </Link>
@@ -285,14 +285,14 @@ const ContactMethod: React.FC<ContactMethodProps> = ({
 }) => (
   <motion.div className="flex items-start" variants={subtleRise}>
     <motion.div
-      className="flex-shrink-0 p-3 bg-blue-50 rounded-lg text-blue-600 border border-blue-100"
+      className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-500/30"
       whileHover={{ scale: 1.1 }}
       transition={{ type: 'spring', stiffness: 400, damping: 10 }}
     >
       <img src={iconSrc} alt="" className="h-5 w-5" aria-hidden="true" />
     </motion.div>
     <div className="ml-4">
-      <h3 className="text-sm font-bold text-gray-800 uppercase tracking-wider">
+      <h3 className="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider">
         {title}
       </h3>
       {description}
diff --git a/src/pages/About/FAQs.tsx b/src/pages/About/FAQs.tsx
index 77ec184e..4587ba66 100644
--- a/src/pages/About/FAQs.tsx
+++ b/src/pages/About/FAQs.tsx
@@ -28,7 +28,7 @@ const FAQs = () => {
   }, [selectedCategory]);
 
   return (
-    <div className="min-h-screen bg-white text-gray-900">
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       <Header />
       <main className="container mx-auto p-4">
         {/* Top FAQs Section */}
@@ -46,13 +46,13 @@ const FAQs = () => {
               variants={slideInLeft}
             >
               <motion.h1
-                className="text-4xl font-bold"
+                className="text-4xl font-bold text-gray-900 dark:text-white"
                 variants={faqPageAnimations.headingText}
               >
                 FAQs
               </motion.h1>
               <motion.p
-                className="text-gray-600 mt-2 text-lg"
+                className="text-gray-600 dark:text-gray-300 mt-2 text-lg"
                 variants={faqPageAnimations.paragraphText}
               >
                 Have questions? Here you'll find the answers most valued by our
@@ -88,7 +88,7 @@ const FAQs = () => {
             variants={fadeIn}
           >
             <motion.h2
-              className="text-3xl font-bold mb-6"
+              className="text-3xl font-bold mb-6 text-gray-900 dark:text-white"
               variants={headerReveal}
             >
               Quick Answers
@@ -100,20 +100,20 @@ const FAQs = () => {
               {quickAnswers.map((qa, index) => (
                 <motion.div
                   key={index}
-                  className="bg-white shadow-lg rounded-2xl p-6 flex flex-col items-center border border-gray-200"
+                  className="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6 flex flex-col items-center border border-gray-200 dark:border-gray-700"
                   variants={faqPageAnimations.quickAnswerCard}
                   whileHover="hover"
                   whileTap="tap"
                 >
                   <motion.div
-                    className="w-12 h-12 bg-white flex items-center justify-center rounded-lg mb-4"
+                    className="w-12 h-12 bg-white dark:bg-gray-700 flex items-center justify-center rounded-lg mb-4"
                     variants={faqPageAnimations.quickAnswerIcon}
                     custom={index}
                   >
                     <img src={qa.image} alt={qa.question} className="w-6 h-6" />
                   </motion.div>
                   <h3 className="font-semibold text-center">{qa.question}</h3>
-                  <p className="text-gray-600 text-sm text-center mt-2">
+                  <p className="text-gray-600 dark:text-gray-400 text-sm text-center mt-2">
                     {qa.answer}
                   </p>
                 </motion.div>
@@ -141,7 +141,7 @@ const FAQs = () => {
                 className={`px-4 py-2 rounded-full transition-all ${
                   selectedCategory === 'all'
                     ? 'bg-blue-600 text-white cursor-pointer'
-                    : 'bg-gray-200 hover:bg-gray-300 cursor-pointer'
+                    : 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer'
                 }`}
               >
                 All
@@ -153,7 +153,7 @@ const FAQs = () => {
                   className={`px-4 py-2 rounded-full transition-all capitalize ${
                     selectedCategory === category
                       ? 'bg-blue-600 text-white cursor-pointer'
-                      : 'bg-gray-200 hover:bg-gray-300 cursor-pointer'
+                      : 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer'
                   }`}
                 >
                   {category}
@@ -170,7 +170,7 @@ const FAQs = () => {
             variants={faqPageAnimations.faqContainer}
           >
             <motion.h2
-              className="text-3xl font-bold mb-6 capitalize"
+              className="text-3xl font-bold mb-6 capitalize text-gray-900 dark:text-white"
               variants={headerReveal}
             >
               {selectedCategory === 'all'
@@ -178,7 +178,7 @@ const FAQs = () => {
                 : `${selectedCategory} FAQs`}
             </motion.h2>
             <motion.div
-              className="bg-white shadow-lg rounded-lg p-6"
+              className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6"
               variants={subtleRise}
             >
               {filteredFaqs.length > 0 ? (
@@ -191,7 +191,7 @@ const FAQs = () => {
                   />
                 ))
               ) : (
-                <p className="text-center text-gray-600 py-4">
+                <p className="text-center text-gray-600 dark:text-gray-400 py-4">
                   No FAQs found for this category.
                 </p>
               )}
diff --git a/src/pages/About/Leadership.tsx b/src/pages/About/Leadership.tsx
index 906c1151..bbf6ab56 100644
--- a/src/pages/About/Leadership.tsx
+++ b/src/pages/About/Leadership.tsx
@@ -14,14 +14,14 @@ import {
 
 const Leadership = () => {
   return (
-    <div>
+    <div className="bg-white dark:bg-gray-900">
       <Header />
-      <section className="py-24 px-4 bg-white">
+      <section className="py-24 px-4 bg-white dark:bg-gray-900">
         <div className="container mx-auto max-w-7xl">
           {/* Section header with animations */}
           <div className="text-center mb-16">
             <motion.h2
-              className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"
+              className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4"
               initial="hidden"
               whileInView="visible"
               viewport={{ once: true }}
@@ -50,7 +50,7 @@ const Leadership = () => {
             </div>
 
             <motion.p
-              className="text-lg text-gray-600 max-w-3xl mx-auto"
+              className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"
               initial="hidden"
               whileInView="visible"
               viewport={{ once: true }}
diff --git a/src/pages/Donate.tsx b/src/pages/Donate.tsx
index 37441ca0..4f24ede2 100644
--- a/src/pages/Donate.tsx
+++ b/src/pages/Donate.tsx
@@ -27,276 +27,282 @@ const Donate: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 font-sans mt-10 sm:mt-10 mb-10 sm:mb-16">
-        {/* Hero Section */}
-        <div className="flex flex-col md:flex-row gap-6 md:gap-10 mt-10">
-          {/* Left Column with Heading and Buttons */}
+      <div className="dark:bg-gray-900 text-gray-800 dark:text-gray-200">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 font-sans mt-10 sm:mt-10 mb-10 sm:mb-16">
+          {/* Hero Section */}
+          <div className="flex flex-col md:flex-row gap-6 md:gap-10 mt-10">
+            {/* Left Column with Heading and Buttons */}
+            <motion.div
+              className="flex-1 order-2 md:order-1"
+              variants={slideInLeft}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: 0.5 }}
+            >
+              <h1 className="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6">
+                Make a Lasting <span className="text-red-500">Impact</span> in
+                Education
+              </h1>
+
+              <p className="text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 text-base sm:text-lg">
+                A financial contribution to Sugar Labs is an investment in
+                education. Your tax-deductible donation helps us create
+                innovative tools for teaching and learning while mentoring
+                budding developers from around the world.
+              </p>
+
+              <motion.div
+                className="flex flex-wrap gap-4 mb-6 sm:mb-8"
+                variants={buttonAnimation}
+                whileHover="hover"
+                whileTap="tap"
+              >
+                <a href={donationData.url} target="_blank" rel="noreferrer">
+                  <button className="bg-green-600 hover:bg-green-700 cursor-pointer transition-colors text-white px-6 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md">
+                    Donate Now
+                  </button>
+                </a>
+              </motion.div>
+
+              <div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg border-l-4 border-blue-500 dark:border-blue-400 shadow-sm text-xs sm:text-sm">
+                <p className="text-gray-600 dark:text-gray-400">
+                  Your donation is tax-deductible in the United States as Sugar
+                  Labs is a registered 501(c)(3) nonprofit organization.
+                </p>
+              </div>
+            </motion.div>
+
+            {/* Right Column with Image */}
+            <motion.div
+              className="flex-1 order-1 md:order-2 mb-6 md:mb-0"
+              variants={slideInRight}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: 0.5 }}
+            >
+              <img
+                src={Img[0]}
+                alt="Children asking for donations"
+                className="w-full rounded-lg shadow-lg object-cover h-64 sm:h-full"
+              />
+            </motion.div>
+          </div>
+
+          {/* Impact Statement Section */}
           <motion.div
-            className="flex-1 order-2 md:order-1"
-            variants={slideInLeft}
+            className="my-10 sm:my-16 bg-gradient-to-r from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-700 p-5 sm:p-8 rounded-xl shadow-sm"
+            variants={slideInBottom}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true, amount: 0.5 }}
           >
-            <h1 className="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6">
-              Make a Lasting <span className="text-red-500">Impact</span> in
-              Education
-            </h1>
-
-            <p className="text-gray-700 mb-6 sm:mb-8 text-base sm:text-lg">
-              A financial contribution to Sugar Labs is an investment in
-              education. Your tax-deductible donation helps us create innovative
-              tools for teaching and learning while mentoring budding developers
-              from around the world.
-            </p>
+            <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
+              Your Donation Directly Assists Our Mission
+            </h2>
 
-            <motion.div
-              className="flex flex-wrap gap-4 mb-6 sm:mb-8"
-              variants={buttonAnimation}
-              whileHover="hover"
-              whileTap="tap"
-            >
-              <a href={donationData.url} target="_blank" rel="noreferrer">
-                <button className="bg-green-600 hover:bg-green-700 cursor-pointer transition-colors text-white px-6 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md">
-                  Donate Now
-                </button>
-              </a>
-            </motion.div>
+            <div className="prose prose-base sm:prose-lg max-w-none dark:text-gray-300">
+              <p className="mb-4">
+                Despite the fact that computers, and the software on those
+                computers, run the way much of the world works, there still
+                remains very little support in education, especially at the
+                levels of primary and secondary schooling, to cultivate a
+                computationally literate society. Despite initiatives, a mere
+                "day of code," sometimes as little as "an hour of code," is
+                woefully insufficient to instill computational literacy in a
+                generation of young learners.
+              </p>
 
-            <div className="bg-gray-100 p-4 rounded-lg border-l-4 border-blue-500 shadow-sm text-xs sm:text-sm">
-              <p className="text-gray-600">
-                Your donation is tax-deductible in the United States as Sugar
-                Labs is a registered 501(c)(3) nonprofit organization.
+              <p className="mb-4">
+                Sugar Labs, as an organization, and the suite of apps,
+                curriculum, rubrics, and mentoring, is well poised to bridge the
+                gap for many learners in the US and around the world - the gap
+                between educational services provided and what youth need
+                developmentally to succeed.
               </p>
             </div>
           </motion.div>
 
-          {/* Right Column with Image */}
+          {/* Why Your Support Matters */}
           <motion.div
-            className="flex-1 order-1 md:order-2 mb-6 md:mb-0"
-            variants={slideInRight}
+            className="my-10 sm:my-16"
+            variants={slideInBottom}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true, amount: 0.5 }}
           >
-            <img
-              src={Img[0]}
-              alt="Children asking for donations"
-              className="w-full rounded-lg shadow-lg object-cover h-64 sm:h-full"
-            />
-          </motion.div>
-        </div>
-
-        {/* Impact Statement Section */}
-        <motion.div
-          className="my-10 sm:my-16 bg-gradient-to-r from-blue-50 to-green-50 p-5 sm:p-8 rounded-xl shadow-sm"
-          variants={slideInBottom}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.5 }}
-        >
-          <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
-            Your Donation Directly Assists Our Mission
-          </h2>
-
-          <div className="prose prose-base sm:prose-lg max-w-none">
-            <p className="mb-4">
-              Despite the fact that computers, and the software on those
-              computers, run the way much of the world works, there still
-              remains very little support in education, especially at the levels
-              of primary and secondary schooling, to cultivate a computationally
-              literate society. Despite initiatives, a mere "day of code,"
-              sometimes as little as "an hour of code," is woefully insufficient
-              to instill computational literacy in a generation of young
-              learners.
-            </p>
-
-            <p className="mb-4">
-              Sugar Labs, as an organization, and the suite of apps, curriculum,
-              rubrics, and mentoring, is well poised to bridge the gap for many
-              learners in the US and around the world - the gap between
-              educational services provided and what youth need developmentally
-              to succeed.
-            </p>
-          </div>
-        </motion.div>
-
-        {/* Why Your Support Matters */}
-        <motion.div
-          className="my-10 sm:my-16"
-          variants={slideInBottom}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.5 }}
-        >
-          <h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
-            How Your Donation Makes a Difference
-          </h2>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
-            {IMPACT_STATS.map((stat) => (
-              <div
-                key={stat.title}
-                className="bg-white p-5 sm:p-6 rounded-lg shadow-md border border-gray-100"
-              >
-                <div className="text-green-500 text-3xl sm:text-4xl font-bold mb-2 sm:mb-3">
-                  {stat.value}
-                </div>
-                <h3 className="text-lg sm:text-xl font-semibold mb-2">
-                  {stat.title}
-                </h3>
-                <p className="text-gray-700 text-sm sm:text-base">
-                  {stat.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </motion.div>
-
-        {/* Mission Statement */}
-        <motion.div
-          className="my-10 sm:my-16"
-          variants={slideInBottom}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.5 }}
-        >
-          <div className="bg-gray-50 p-5 sm:p-6 rounded-lg shadow-sm border border-gray-100">
-            <h2 className="text-xl sm:text-2xl font-semibold mb-3 sm:mb-4 text-gray-800">
-              Our Mission
+            <h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
+              How Your Donation Makes a Difference
             </h2>
-            <p className="text-gray-800 text-xs sm:text-sm leading-relaxed mb-5 sm:mb-6">
-              Sugar Labs® is a US-based 501(c)(3) nonprofit organization with a
-              global mission to create educational opportunities in technology
-              to youth around the world. Volunteer mentors and contributors work
-              together to develop activity- focused software for children. All
-              software is developed with learning as the primary goal,
-              necessitating the need for source code to be published publicly
-              for study — worked upon openly within a community where students
-              are invited to make contributions under guidance of experienced
-              mentors.
-            </p>
 
-            <div className="mt-4 sm:mt-6">
-              <a
-                href={donationData.url}
-                target="_blank"
-                rel="noreferrer"
-                className="text-green-600 hover:text-green-700 font-medium flex items-center text-sm sm:text-base"
-              >
-                Help support our mission
-                <img src={Img[1]} alt="Right Arrow" className="h-4 w-4 ml-1" />
-              </a>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
+              {IMPACT_STATS.map((stat) => (
+                <div
+                  key={stat.title}
+                  className="bg-white dark:bg-gray-800 p-5 sm:p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700"
+                >
+                  <div className="text-green-500 text-3xl sm:text-4xl font-bold mb-2 sm:mb-3">
+                    {stat.value}
+                  </div>
+                  <h3 className="text-lg sm:text-xl font-semibold mb-2">
+                    {stat.title}
+                  </h3>
+                  <p className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
+                    {stat.description}
+                  </p>
+                </div>
+              ))}
             </div>
-          </div>
-        </motion.div>
-
-        {/* Financial Transparency Section */}
-        <motion.div
-          className="my-10 sm:my-16"
-          id="financial-transparency"
-          variants={slideInBottom}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.5 }}
-        >
-          <h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
-            Financial Transparency
-          </h2>
-
-          <div className="bg-white p-5 sm:p-8 rounded-xl shadow-md">
-            <p className="mb-5 sm:mb-6 text-sm sm:text-base">
-              Sugar Labs is committed to full financial transparency. As a
-              501(c)(3) nonprofit organization, we make our tax filings
-              available for public review.
-            </p>
+          </motion.div>
 
-            <h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">
-              Our 990 Tax Filings
-            </h3>
+          {/* Mission Statement */}
+          <motion.div
+            className="my-10 sm:my-16"
+            variants={slideInBottom}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.5 }}
+          >
+            <div className="bg-gray-50 dark:bg-gray-800 p-5 sm:p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
+              <h2 className="text-xl sm:text-2xl font-semibold mb-3 sm:mb-4 text-gray-800 dark:text-white">
+                Our Mission
+              </h2>
+              <p className="text-gray-800 dark:text-gray-300 text-xs sm:text-sm leading-relaxed mb-5 sm:mb-6">
+                Sugar Labs® is a US-based 501(c)(3) nonprofit organization with
+                a global mission to create educational opportunities in
+                technology to youth around the world. Volunteer mentors and
+                contributors work together to develop activity- focused software
+                for children. All software is developed with learning as the
+                primary goal, necessitating the need for source code to be
+                published publicly for study — worked upon openly within a
+                community where students are invited to make contributions under
+                guidance of experienced mentors.
+              </p>
 
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
-              {visibleFilings.map((filing) => (
+              <div className="mt-4 sm:mt-6">
                 <a
-                  key={filing.year}
-                  href={filing.link}
-                  className="bg-gray-50 hover:bg-gray-100 transition-colors p-3 sm:p-4 rounded-lg flex flex-col items-center text-center"
+                  href={donationData.url}
                   target="_blank"
                   rel="noreferrer"
+                  className="text-green-600 hover:text-green-700 font-medium flex items-center text-sm sm:text-base"
                 >
-                  <img src={Img[2]} alt="PDF Icon" className="h-8 w-8 mb-2" />
-                  <span className="font-medium text-xs sm:text-sm">
-                    {filing.year} Filings
-                  </span>
+                  Help support our mission
+                  <img
+                    src={Img[1]}
+                    alt="Right Arrow"
+                    className="h-4 w-4 ml-1"
+                  />
                 </a>
-              ))}
+              </div>
             </div>
+          </motion.div>
 
-            {/* Show More Button */}
-            {hasMoreFilings && !showAllFilings && (
-              <div className="mt-6 flex justify-center">
-                <button
-                  onClick={() => setShowAllFilings(true)}
-                  className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm font-medium flex items-center"
-                >
-                  Show More
-                </button>
-              </div>
-            )}
+          {/* Financial Transparency Section */}
+          <motion.div
+            className="my-10 sm:my-16"
+            id="financial-transparency"
+            variants={slideInBottom}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.5 }}
+          >
+            <h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
+              Financial Transparency
+            </h2>
 
-            <div className="mt-6 sm:mt-8 p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
-              <h4 className="font-medium mb-2 text-sm sm:text-base">
-                Note about 2018 and earlier
-              </h4>
-              <p className="text-xs sm:text-sm text-gray-700">
-                Sugar Labs Inc. received its 501(c)(3) nonprofit status in 2020.
-                Before 2019, Sugar Labs was a member organization under Software
-                Freedom Conservancy. To view our archived financial data from
-                before 2019, please visit:{' '}
-                <a
-                  href="https://wiki.sugarlabs.org/go/Finance"
-                  className="text-blue-600 hover:underline"
-                >
-                  https://wiki.sugarlabs.org/go/Finance
-                </a>
+            <div className="bg-white dark:bg-gray-800 p-5 sm:p-8 rounded-xl shadow-md">
+              <p className="mb-5 sm:mb-6 text-sm sm:text-base dark:text-gray-300">
+                Sugar Labs is committed to full financial transparency. As a
+                501(c)(3) nonprofit organization, we make our tax filings
+                available for public review.
               </p>
+
+              <h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4 dark:text-white">
+                Our 990 Tax Filings
+              </h3>
+
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
+                {visibleFilings.map((filing) => (
+                  <a
+                    key={filing.year}
+                    href={filing.link}
+                    className="bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors p-3 sm:p-4 rounded-lg flex flex-col items-center text-center"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <img src={Img[2]} alt="PDF Icon" className="h-8 w-8 mb-2" />
+                    <span className="font-medium text-xs sm:text-sm dark:text-gray-300">
+                      {filing.year} Filings
+                    </span>
+                  </a>
+                ))}
+              </div>
+
+              {/* Show More Button */}
+              {hasMoreFilings && !showAllFilings && (
+                <div className="mt-6 flex justify-center">
+                  <button
+                    onClick={() => setShowAllFilings(true)}
+                    className="bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 px-4 py-2 rounded-md text-sm font-medium flex items-center"
+                  >
+                    Show More
+                  </button>
+                </div>
+              )}
+
+              <div className="mt-6 sm:mt-8 p-3 sm:p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                <h4 className="font-medium mb-2 text-sm sm:text-base dark:text-white">
+                  Note about 2018 and earlier
+                </h4>
+                <p className="text-xs sm:text-sm text-gray-700 dark:text-gray-400">
+                  Sugar Labs Inc. received its 501(c)(3) nonprofit status in
+                  2020. Before 2019, Sugar Labs was a member organization under
+                  Software Freedom Conservancy. To view our archived financial
+                  data from before 2019, please visit:{' '}
+                  <a
+                    href="https://wiki.sugarlabs.org/go/Finance"
+                    className="text-blue-600 hover:underline"
+                  >
+                    https://wiki.sugarlabs.org/go/Finance
+                  </a>
+                </p>
+              </div>
             </div>
-          </div>
-        </motion.div>
+          </motion.div>
 
-        {/* Donation Section */}
-        <motion.div
-          className="my-10 sm:my-16 bg-green-50 p-5 sm:p-8 rounded-xl shadow-sm"
-          id="donate-section"
-          variants={slideInBottom}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.5 }}
-        >
-          <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
-            Support Our Mission Today
-          </h2>
+          {/* Donation Section */}
+          <motion.div
+            className="my-10 sm:my-16 bg-green-50 dark:bg-green-900/20 p-5 sm:p-8 rounded-xl shadow-sm"
+            id="donate-section"
+            variants={slideInBottom}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.5 }}
+          >
+            <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
+              Support Our Mission Today
+            </h2>
 
-          <p className="text-center max-w-3xl mx-auto mb-6 sm:mb-8 text-sm sm:text-base">
-            Financial contributions to Sugar Labs helps us continue to create
-            and maintain innovative tools for learning, as well as mentor youth
-            at a critical point in their development. Your support makes a
-            meaningful difference in the lives of children around the world.
-          </p>
+            <p className="text-center max-w-3xl mx-auto mb-6 sm:mb-8 text-sm sm:text-base dark:text-gray-300">
+              Financial contributions to Sugar Labs helps us continue to create
+              and maintain innovative tools for learning, as well as mentor
+              youth at a critical point in their development. Your support makes
+              a meaningful difference in the lives of children around the world.
+            </p>
 
-          <div className="flex justify-center gap-3 sm:gap-4 flex-wrap">
-            <a href={donationData.url} target="_blank" rel="noreferrer">
-              <button className="bg-green-600 hover:bg-green-700 cursor-pointer transition-colors text-white px-5 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md text-sm sm:text-base">
-                Make a One-Time Donation
-              </button>
-            </a>
-            <a href={donationData.urlMonth} target="_blank" rel="noreferrer">
-              <button className="bg-blue-600 hover:bg-blue-700 cursor-pointer transition-colors text-white px-5 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md text-sm sm:text-base">
-                Become a Monthly Supporter
-              </button>
-            </a>
-          </div>
-        </motion.div>
+            <div className="flex justify-center gap-3 sm:gap-4 flex-wrap">
+              <a href={donationData.url} target="_blank" rel="noreferrer">
+                <button className="bg-green-600 hover:bg-green-700 cursor-pointer transition-colors text-white px-5 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md text-sm sm:text-base">
+                  Make a One-Time Donation
+                </button>
+              </a>
+              <a href={donationData.urlMonth} target="_blank" rel="noreferrer">
+                <button className="bg-blue-600 hover:bg-blue-700 cursor-pointer transition-colors text-white px-5 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md text-sm sm:text-base">
+                  Become a Monthly Supporter
+                </button>
+              </a>
+            </div>
+          </motion.div>
+        </div>
       </div>
       <Footer />
     </>
diff --git a/src/pages/JoinDevelopment.tsx b/src/pages/JoinDevelopment.tsx
index 13240fb1..445068ce 100644
--- a/src/pages/JoinDevelopment.tsx
+++ b/src/pages/JoinDevelopment.tsx
@@ -13,7 +13,7 @@ const JoinDevelopment = () => {
   }, []);
 
   return (
-    <div className="bg-gradient-to-b to-red-50">
+    <div className="bg-gradient-to-b from-white to-red-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200">
       <Header />
       <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-6">
         <JoinToggle />
@@ -25,12 +25,12 @@ const JoinDevelopment = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
         >
-          <h2 className="text-5xl font-bold font-[Caveat]">
+          <h2 className="text-5xl font-bold font-[Caveat] dark:text-white">
             Before Beginning to Contribute
           </h2>
-          <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          <hr className="w-32 border-t-2 border-gray-400 dark:border-gray-600 mx-auto mt-2" />
 
-          <p className="text-lg text-gray-700 font-[Inter] mt-6 leading-relaxed">
+          <p className="text-lg text-gray-700 dark:text-gray-300 font-[Inter] mt-6 leading-relaxed">
             As a developer, whether you are just starting out or you've
             participated in other development before, there are a few things you
             need to know about our community. This page has important
@@ -55,14 +55,14 @@ const JoinDevelopment = () => {
             viewport={{ once: true, amount: 0.1 }}
           >
             <div className="text-center mb-8">
-              <span className="inline-block px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-semibold mb-4">
+              <span className="inline-block px-3 py-1 bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300 rounded-full text-sm font-semibold mb-4">
                 Resources
               </span>
-              <h2 className="text-4xl md:text-5xl font-bold font-[Caveat] mb-4">
+              <h2 className="text-4xl md:text-5xl font-bold font-[Caveat] mb-4 dark:text-white">
                 Important Links for Developers
               </h2>
-              <div className="w-24 h-1 bg-red-700 rounded mx-auto mb-6"></div>
-              <p className="text-lg text-gray-700 max-w-2xl mx-auto">
+              <div className="w-24 h-1 bg-red-700 dark:bg-red-500 rounded mx-auto mb-6"></div>
+              <p className="text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
                 Essential resources for people interested in making development
                 contributions to Sugar Labs
               </p>
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 6a1a1d2a..3cacd138 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -11,7 +11,7 @@ import { bannerConfigs } from '@/constants/Banner';
 
 const MainPage = () => {
   return (
-    <>
+    <div className="bg-white dark:bg-gray-900">
       <Header />
       <PromoBanner bannerConfigs={bannerConfigs} />
       <Info />
@@ -21,7 +21,7 @@ const MainPage = () => {
       <TryMore />
       <Donation />
       <Footer />
-    </>
+    </div>
   );
 };
 
diff --git a/src/pages/Matrix.tsx b/src/pages/Matrix.tsx
index 30d45078..55bf2044 100644
--- a/src/pages/Matrix.tsx
+++ b/src/pages/Matrix.tsx
@@ -50,16 +50,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
       <div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white mb-3 inline-flex">
         {icon}
       </div>
-      <div className="bg-white p-5 rounded-lg shadow-md">
-        <h3 className="text-lg font-bold text-magazine-navy mb-2">{title}</h3>
-        <p className="text-gray-600 text-sm leading-relaxed">
+      <div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md">
+        <h3 className="text-lg font-bold text-magazine-navy dark:text-gray-100 mb-2">
+          {title}
+        </h3>
+        <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
           {description}
           {link && (
             <a
               href={link.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
+              className="text-[#D4B062] hover:underline hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] ml-1 inline-flex items-center"
             >
               {link.text} <ChevronRight className="h-3 w-3 ml-1" />
             </a>
@@ -72,18 +74,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
       {isLeft ? (
         <>
           <div className="w-1/2 pr-8 mb-0 text-right">
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
-              <h3 className="text-xl font-bold text-magazine-navy mb-2">
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+              <h3 className="text-xl font-bold text-magazine-navy dark:text-gray-100 mb-2">
                 {title}
               </h3>
-              <p className="text-gray-600 leading-relaxed">
+              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                 {description}
                 {link && (
                   <a
                     href={link.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
+                    className="text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] hover:underline ml-1 inline-flex items-center"
                   >
                     {link.text} <ChevronRight className="h-3 w-3 ml-1" />
                   </a>
@@ -99,7 +101,7 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
               <div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white mr-3">
                 {icon}
               </div>
-              <span className="text-magazine-navy font-bold text-lg">
+              <span className="text-magazine-navy dark:text-gray-100 font-bold text-lg">
                 {title.split(' ')[0]}
               </span>
             </motion.div>
@@ -112,7 +114,7 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
               className="flex items-center justify-end"
               whileHover={{ x: -5 }}
             >
-              <span className="text-magazine-navy font-bold text-lg mr-3">
+              <span className="text-magazine-navy dark:text-gray-100 font-bold text-lg mr-3">
                 {title.split(' ')[0]}
               </span>
               <div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white">
@@ -124,18 +126,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
             <span className="text-white font-bold">{step}</span>
           </div>
           <div className="w-1/2 pl-8">
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
-              <h3 className="text-xl font-bold text-magazine-navy mb-2">
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+              <h3 className="text-xl font-bold text-magazine-navy dark:text-gray-100 mb-2">
                 {title}
               </h3>
-              <p className="text-gray-600 leading-relaxed">
+              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                 {description}
                 {link && (
                   <a
                     href={link.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
+                    className="text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] hover:underline ml-1 inline-flex items-center"
                   >
                     {link.text} <ChevronRight className="h-3 w-3 ml-1" />
                   </a>
@@ -165,23 +167,25 @@ const RoomCard: React.FC<RoomCardProps> = ({ link, getIcon }) => (
     key={link.id}
     variants={statCard}
     whileHover="hover"
-    className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-300 h-full"
+    className="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-100 dark:border-gray-700 hover:shadow-lg transition-all duration-300 h-full"
   >
     <div className="p-4 sm:p-6 flex flex-col h-full">
       <div className="flex items-center gap-3 mb-4">
         <div className="bg-[#D4B062] p-2 sm:p-3 rounded-full text-white flex-shrink-0">
           {getIcon(link.icon)}
         </div>
-        <h3 className="font-bold text-lg sm:text-xl">{link.title}</h3>
+        <h3 className="font-bold text-lg sm:text-xl text-magazine-navy dark:text-gray-100">
+          {link.title}
+        </h3>
       </div>
-      <p className="text-gray-600 mb-4 sm:mb-6 leading-relaxed text-sm sm:text-base flex-grow">
+      <p className="text-gray-600 dark:text-gray-300 mb-4 sm:mb-6 leading-relaxed text-sm sm:text-base flex-grow">
         {link.description}
       </p>
       <motion.a
         href={link.url}
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center text-[#D4B062] hover:text-magazine-navy transition-colors font-medium mt-auto"
+        className="inline-flex items-center text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] transition-colors font-medium mt-auto"
         whileHover={{ x: 5 }}
       >
         Join Room <ExternalLink className="ml-2 h-4 w-4" />
@@ -246,7 +250,7 @@ const Matrix: React.FC = () => {
   ];
 
   return (
-    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9]">
+    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
       <Header />
       <main className="flex-grow">
         {/* Hero Section*/}
@@ -307,12 +311,12 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={fadeIn}
-          className="py-12 sm:py-16 bg-[#FFFEF9]"
+          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
         >
           <div className="container mx-auto px-4 md:px-6">
             <div className="max-w-3xl mx-auto">
               <motion.h2
-                className="text-2xl sm:text-3xl font-bold mb-6 text-magazine-navy border-b-2 border-[#D4B062] pb-2 inline-block"
+                className="text-2xl sm:text-3xl font-bold mb-6 text-magazine-navy dark:text-gray-100 border-b-2 border-[#D4B062] pb-2 inline-block"
                 variants={fadeIn}
               >
                 What is Matrix?
@@ -350,11 +354,11 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9]"
+          className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9] dark:bg-gray-900"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>
-              <h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy dark:text-gray-100">
                 Join Our Matrix Rooms
               </h2>
               <div className="w-16 h-1 bg-[#D4B062] mx-auto rounded-full"></div>
@@ -375,11 +379,11 @@ const Matrix: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-12 sm:py-16 bg-[#FFFEF9]"
+          className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>
-              <h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy">
+              <h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy dark:text-gray-100">
                 How to Get Started with Matrix
               </h2>
               <div className="w-16 h-1 bg-[#D4B062] mx-auto rounded-full"></div>
diff --git a/src/pages/News/NewsDetailPage.tsx b/src/pages/News/NewsDetailPage.tsx
index 8e10ead6..da7e0f87 100644
--- a/src/pages/News/NewsDetailPage.tsx
+++ b/src/pages/News/NewsDetailPage.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import ShareModal from '@/components/ShareModal';
 import { Share2 } from 'lucide-react';
+import { motion } from 'framer-motion';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { getPostBySlug, Post } from '@/utils/posts-utils';
-import { motion } from 'framer-motion';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import MarkdownRenderer from '@/utils/MarkdownRenderer';
@@ -122,10 +122,12 @@ const NewsDetailPage: React.FC = () => {
     return (
       <>
         <Header />
-        <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-screen">
+        <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-screen bg-white dark:bg-gray-900">
           <div className="flex flex-col items-center">
-            <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-600 mb-4"></div>
-            <p className="text-gray-600">Loading article...</p>
+            <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-600 dark:border-blue-400 mb-4"></div>
+            <p className="text-gray-600 dark:text-gray-400">
+              Loading article...
+            </p>
           </div>
         </div>
         <Footer />
@@ -139,15 +141,15 @@ const NewsDetailPage: React.FC = () => {
       <>
         <Header />
         <div className="container mx-auto px-4 py-16 text-center min-h-screen flex flex-col justify-center">
-          <h1 className="text-3xl font-bold mb-4 text-blue-600">
+          <h1 className="text-3xl font-bold mb-4 text-blue-600 dark:text-blue-400">
             {error || 'Post Not Found'}
           </h1>
-          <p className="mb-8 text-gray-600">
+          <p className="mb-8 text-gray-600 dark:text-gray-400">
             The post you're looking for doesn't exist or has been removed.
           </p>
           <button
             onClick={handleGoBack}
-            className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors mx-auto focus:outline-none focus:ring-2 focus:ring-blue-400"
+            className="px-6 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors mx-auto focus:outline-none focus:ring-2 focus:ring-blue-400"
           >
             Back to News
           </button>
@@ -161,11 +163,11 @@ const NewsDetailPage: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="container mx-auto px-4 py-8 max-w-4xl bg-white mt-10">
+      <div className="container mx-auto px-4 py-8 max-w-4xl bg-white dark:bg-gray-900 mt-10 rounded-lg">
         {/* Back button */}
         <motion.button
           onClick={handleGoBack}
-          className="mb-6 px-4 py-2 flex items-center text-blue-600 hover:text-blue-700 transition-colors rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400"
+          className="mb-6 px-4 py-2 flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-md hover:bg-blue-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
           aria-label="Back to news list"
@@ -187,14 +189,16 @@ const NewsDetailPage: React.FC = () => {
         </motion.button>
 
         {/* Article Header */}
-        <div className="mb-8 border-b border-gray-200 pb-6">
+        <div className="mb-8 border-b border-gray-200 dark:border-gray-700 pb-6">
           {post.category && (
-            <span className="inline-block px-3 py-1 text-sm font-semibold bg-green-100 text-green-600 mb-4 rounded-full">
+            <span className="inline-block px-3 py-1 text-sm font-semibold bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 mb-4 rounded-full">
               {post.category}
             </span>
           )}
           <div className="flex items-center gap-3 mb-4">
-            <h1 className="text-4xl font-bold text-gray-900">{post.title}</h1>
+            <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
+              {post.title}
+            </h1>
             <button
               onClick={handleShareClick}
               className="p-2 rounded-full bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow hover:from-blue-700 hover:to-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all duration-300 cursor-pointer"
@@ -204,7 +208,7 @@ const NewsDetailPage: React.FC = () => {
               <Share2 size={16} className="text-white" />
             </button>
           </div>
-          <div className="flex flex-wrap items-center text-gray-500 mb-3">
+          <div className="flex flex-wrap items-center text-gray-500 dark:text-gray-400 mb-3">
             {post.date && (
               <>
                 <span className="mr-4 flex items-center">
@@ -258,7 +262,7 @@ const NewsDetailPage: React.FC = () => {
                 <span
                   key={index}
                   onClick={() => handleTagClick(tag)}
-                  className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-md hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors"
+                  className="text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-2 py-1 rounded-md hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-blue-300 cursor-pointer transition-colors"
                 >
                   #{tag}
                 </span>
@@ -292,7 +296,7 @@ const NewsDetailPage: React.FC = () => {
 
         {/* Article Content */}
         <motion.div
-          className="mb-12"
+          className="mb-12 prose dark:prose-invert  prose-slate max-w-none"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.5 }}
@@ -307,7 +311,7 @@ const NewsDetailPage: React.FC = () => {
         {/* Author Bio Section */}
         {post.author && (
           <motion.div
-            className="bg-blue-50 rounded-lg p-6 my-8 flex items-center space-x-4 cursor-pointer hover:bg-blue-100 transition-colors"
+            className="bg-blue-50 dark:bg-gray-800 dark:text-white rounded-lg p-6 my-8 flex items-center space-x-4 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors"
             onClick={handleAuthorClick}
             whileHover={{ scale: 1.02 }}
           >
@@ -319,17 +323,19 @@ const NewsDetailPage: React.FC = () => {
                   className="w-16 h-16 rounded-full object-cover"
                 />
               ) : (
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl">
+                <div className="w-16 h-16 bg-blue-100 dark:bg-gray-700 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-xl">
                   {post.author.name.charAt(0).toUpperCase()}
                 </div>
               )}
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-lg text-gray-800 hover:text-blue-600 transition-colors">
+              <h4 className="font-semibold text-lg text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                 About {post.author.name}
               </h4>
-              <p className="text-gray-600 mt-1">{post.author.description}</p>
-              <p className="text-sm text-blue-600 mt-2">
+              <p className="text-gray-600 dark:text-gray-600 mt-1">
+                {post.author.description}
+              </p>
+              <p className="text-sm text-blue-600 dark:text-blue-400 mt-2">
                 Click to view profile →
               </p>
             </div>
@@ -338,14 +344,16 @@ const NewsDetailPage: React.FC = () => {
 
         {/* Tags Section */}
         {post.tags && post.tags.length > 0 && (
-          <div className="border-t border-gray-200 pt-6 mb-8">
-            <h3 className="text-xl font-semibold mb-4 text-gray-700">Tags</h3>
+          <div className="border-t border-gray-200 dark:border-gray-700 pt-6 mb-8">
+            <h3 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-100">
+              Tags
+            </h3>
             <div className="flex flex-wrap gap-2">
               {post.tags.map((tag, index) => (
                 <span
                   key={index}
                   onClick={() => handleTagClick(tag)}
-                  className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors"
+                  className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-blue-400 cursor-pointer transition-colors"
                 >
                   #{tag}
                 </span>
diff --git a/src/pages/News/NewsPage.tsx b/src/pages/News/NewsPage.tsx
index ebdec180..c9274d08 100644
--- a/src/pages/News/NewsPage.tsx
+++ b/src/pages/News/NewsPage.tsx
@@ -153,7 +153,7 @@ const NewsPage: React.FC = () => {
     return (
       <>
         <Header />
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-black dark:to-gray-800">
           <div className="container mx-auto px-4 py-20">
             <motion.div
               className="text-center max-w-2xl mx-auto"
@@ -173,12 +173,12 @@ const NewsPage: React.FC = () => {
                 </div>
               </div>
 
-              <div className="bg-white rounded-2xl p-8 shadow-xl">
+              <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
                 <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-600 mx-auto mb-6" />
-                <h2 className="text-xl font-semibold text-gray-800 mb-2">
+                <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
                   Loading Latest News
                 </h2>
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-gray-400">
                   Fetching the most recent stories from Sugar Labs community...
                 </p>
               </div>
@@ -194,7 +194,7 @@ const NewsPage: React.FC = () => {
     return (
       <>
         <Header />
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-black dark:to-gray-800">
           <div className="container mx-auto px-4 py-20 text-center">
             <motion.h1
               className="text-8xl font-bold font-Caveat text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-600 mb-8"
@@ -218,7 +218,7 @@ const NewsPage: React.FC = () => {
                   />
                 </svg>
               </div>
-              <h2 className="text-xl font-semibold text-gray-800 mb-2">
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
                 Oops! Something went wrong
               </h2>
               <p className="text-red-600 mb-6">{error}</p>
@@ -239,7 +239,7 @@ const NewsPage: React.FC = () => {
   return (
     <>
       <Header />
-      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-black dark:to-gray-800">
         {/* Enhanced Hero Section */}
         <div className="relative overflow-hidden">
           <div className="absolute inset-0">
@@ -269,7 +269,7 @@ const NewsPage: React.FC = () => {
                 />
               </div>
 
-              <p className="text-xl mb-8 text-gray-700 leading-relaxed">
+              <p className="text-xl mb-8 text-gray-700 dark:text-gray-300 leading-relaxed ">
                 Discover the latest innovations, community updates, and
                 educational insights from the Sugar Labs ecosystem
               </p>
@@ -281,7 +281,7 @@ const NewsPage: React.FC = () => {
 
         <div className="container mx-auto px-4 py-8">
           {/* Enhanced Filters and Controls */}
-          <div className="bg-white rounded-2xl shadow-xl p-6 mb-8 border border-gray-100">
+          <div className="bg-white dark:bg-gray-800/50 dark:backdrop-blur-sm rounded-2xl shadow-xl p-6 mb-8 border border-gray-100 dark:border-gray-700">
             <div className="flex flex-col lg:flex-row gap-6">
               {/* Search Bar */}
               <div className="flex-1">
@@ -306,7 +306,7 @@ const NewsPage: React.FC = () => {
                         : '';
                       navigate(`/news/${catPath}${query}`, { replace: true });
                     }}
-                    className="w-full pl-10 pr-10 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
+                    className="w-full pl-10 pr-4 py-3 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                   />
                   {searchTerm && (
                     <button
@@ -329,13 +329,13 @@ const NewsPage: React.FC = () => {
 
               {/* View Mode Toggle */}
               <div className="flex items-center gap-4">
-                <div className="flex bg-gray-100 rounded-xl p-1">
+                <div className="flex bg-gray-100 dark:bg-gray-700 rounded-xl p-1">
                   <button
                     onClick={() => setViewMode('grid')}
                     className={`p-3 rounded-lg transition-all duration-300 ${
                       viewMode === 'grid'
-                        ? 'bg-white text-blue-600 shadow-md'
-                        : 'text-gray-600 hover:text-blue-600'
+                        ? 'bg-white dark:bg-blue-600 dark:text-white text-blue-600 shadow-md'
+                        : 'text-gray-600 dark:text-gray-400 hover:text-blue-600'
                     }`}
                     title="Grid View"
                   >
@@ -345,8 +345,8 @@ const NewsPage: React.FC = () => {
                     onClick={() => setViewMode('list')}
                     className={`p-3 rounded-lg transition-all duration-300 ${
                       viewMode === 'list'
-                        ? 'bg-white text-blue-600 shadow-md'
-                        : 'text-gray-600 hover:text-blue-600'
+                        ? 'bg-white  dark:bg-blue-600 dark:text-white text-blue-600 shadow-md'
+                        : 'text-gray-600  dark:text-gray-400 hover:text-blue-600'
                     }`}
                     title="List View"
                   >
@@ -357,10 +357,13 @@ const NewsPage: React.FC = () => {
             </div>
 
             {/* Category Filters - Always Visible */}
-            <div className="mt-6 pt-6 border-t border-gray-200">
+            <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
               <div className="flex items-center mb-4">
-                <Tag className="text-gray-600 mr-2" size={20} />
-                <h3 className="text-lg font-semibold text-gray-800">
+                <Tag
+                  className="text-gray-600 dark:text-gray-400 mr-2"
+                  size={20}
+                />
+                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
                   Categories
                 </h3>
               </div>
@@ -372,7 +375,7 @@ const NewsPage: React.FC = () => {
                     className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                       activeCategory === cat
                         ? 'bg-[#144EEC] text-white shadow-lg'
-                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-md'
+                        : 'bg-gray-100 dark:bg-gray-700 dark:text-gray-300 text-gray-700 hover:bg-gray-200 hover:shadow-md'
                     }`}
                     whileHover={{ scale: 1.05, cursor: 'pointer' }}
                     whileTap={{ scale: 0.95 }}
@@ -392,15 +395,18 @@ const NewsPage: React.FC = () => {
           {/* Template Category Note */}
           {activeCategory.toLowerCase() === 'template' && (
             <motion.div
-              className="bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-8 shadow-sm"
+              className="bg-amber-50 dark:bg-amber-900/50 border border-amber-200 dark:border-amber-700/50 rounded-2xl p-6 mb-8 shadow-sm"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.3 }}
             >
               <div className="flex items-start gap-3">
-                <Info className="text-amber-600 mt-1 flex-shrink-0" size={20} />
+                <Info
+                  className="text-amber-600 dark:text-amber-500 mt-1 flex-shrink-0"
+                  size={20}
+                />
                 <div>
-                  <p className="text-amber-800 font-medium">
+                  <p className="text-amber-800 dark:text-amber-300 font-medium">
                     <strong>Note:</strong> These are developer templates for
                     post formatting.
                   </p>
@@ -419,7 +425,7 @@ const NewsPage: React.FC = () => {
             <h2 className="text-5xl font-Caveat text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-600 mb-2">
               {activeCategory} {searchTerm && `· "${searchTerm}"`}
             </h2>
-            <p className="text-gray-600 flex items-center justify-center gap-2">
+            <p className="text-gray-600 dark:text-gray-400 flex items-center justify-center gap-2">
               <span>{filteredPosts.length} articles found</span>
               {searchTerm && (
                 <button
@@ -447,12 +453,12 @@ const NewsPage: React.FC = () => {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
               >
-                <div className="bg-white rounded-2xl p-12 shadow-xl max-w-md mx-auto">
+                <div className="bg-white dark:bg-gray-800 rounded-2xl p-12 shadow-xl max-w-md mx-auto">
                   <div className="text-6xl mb-6">🔍</div>
-                  <h3 className="text-2xl font-bold text-gray-800 mb-4">
+                  <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">
                     No articles found
                   </h3>
-                  <p className="text-gray-600 mb-6">
+                  <p className="text-gray-600 dark:text-gray-400 mb-6">
                     {searchTerm
                       ? `No articles match "${searchTerm}" in this category.`
                       : 'There are no articles in this category yet.'}
@@ -482,7 +488,7 @@ const NewsPage: React.FC = () => {
                 {visiblePosts.map((post, index) => (
                   <motion.article
                     key={post.slug}
-                    className={`bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer overflow-hidden group ${
+                    className={`bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer overflow-hidden group ${
                       viewMode === 'list' ? 'flex' : ''
                     }`}
                     onClick={() => handlePostClick(post.slug)}
@@ -504,7 +510,7 @@ const NewsPage: React.FC = () => {
                             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                           />
                         ) : (
-                          <div className="w-full h-full bg-gradient-to-br from-blue-100 via-purple-50 to-green-100 flex items-center justify-center">
+                          <div className="w-full h-full bg-gradient-to-br from-blue-100 via-purple-50 to-green-100 dark:from-blue-900/50 dark:via-purple-900/50 dark:to-green-900/50 flex items-center justify-center">
                             <div className="text-6xl opacity-50">📰</div>
                           </div>
                         )}
@@ -533,25 +539,25 @@ const NewsPage: React.FC = () => {
                     >
                       <div>
                         <h3
-                          className={`font-bold text-gray-800 mb-3 line-clamp-2 group-hover:text-blue-600 transition-colors ${
+                          className={`font-bold text-gray-800 dark:text-gray-200 mb-3 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors ${
                             viewMode === 'list' ? 'text-xl' : 'text-lg'
                           }`}
                         >
                           {post.title}
                         </h3>
-                        <p className="text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed">
+                        <p className="text-gray-600 dark:text-gray-400 text-sm line-clamp-3 mb-4 leading-relaxed">
                           {post.excerpt}
                         </p>
                       </div>
 
                       <div className="flex items-center justify-between">
                         {post.date && (
-                          <div className="flex items-center text-sm text-gray-500">
+                          <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                             <CalendarRange size={14} className="mr-2" />
                             {post.date}
                           </div>
                         )}
-                        <div className="flex items-center text-blue-600 text-sm font-medium group-hover:text-blue-700">
+                        <div className="flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium group-hover:text-blue-700 dark:group-hover:text-blue-300">
                           Read more
                           <ArrowRight
                             size={14}
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 76f17fb9..b9909fa0 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -21,7 +21,7 @@ import {
 
 const NotFoundPage: React.FC = () => {
   return (
-    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9]">
+    <div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
       <Header />
       <main className="flex-grow">
         {/* Hero Section */}
@@ -99,10 +99,10 @@ const NotFoundPage: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={fadeIn}
-          className="py-16 bg-[#FFFEF9]"
+          className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
         >
           <div className="container mx-auto px-4 md:px-6 max-w-4xl">
-            <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 p-8">
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-100 dark:border-gray-700 p-8">
               <div className="flex flex-col lg:flex-row items-center justify-center">
                 <motion.div
                   className="w-full lg:w-1/2 flex justify-center mb-8 lg:mb-0"
@@ -186,7 +186,7 @@ const NotFoundPage: React.FC = () => {
                   className="w-full lg:w-1/2 lg:pl-8"
                   transition={{ duration: 0.5, delay: 0.2 }}
                 >
-                  <h3 className="font-bold text-2xl text-magazine-navy mb-4 border-b-2 border-[#D4B062] pb-2 inline-block">
+                  <h3 className="font-bold text-2xl text-magazine-navy dark:text-white mb-4 border-b-2 border-[#D4B062] pb-2 inline-block">
                     Connection Status
                   </h3>
 
@@ -196,7 +196,9 @@ const NotFoundPage: React.FC = () => {
                       whileHover={{ x: 5 }}
                     >
                       <div className="w-3 h-3 bg-red-500 rounded-full mr-3 animate-pulse"></div>
-                      <p className="text-gray-700">Resource not found</p>
+                      <p className="text-gray-700 dark:text-gray-300">
+                        Resource not found
+                      </p>
                     </motion.div>
 
                     <motion.div
@@ -204,7 +206,9 @@ const NotFoundPage: React.FC = () => {
                       whileHover={{ x: 5 }}
                     >
                       <div className="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
-                      <p className="text-gray-700">Server connection: Active</p>
+                      <p className="text-gray-700 dark:text-gray-300">
+                        Server connection: Active
+                      </p>
                     </motion.div>
 
                     <motion.div className="mt-6" variants={bounce}>
@@ -234,12 +238,12 @@ const NotFoundPage: React.FC = () => {
           whileInView="visible"
           viewport={{ once: true, margin: '-100px' }}
           variants={staggerContainer}
-          className="py-16 bg-[#FFFEF9]"
+          className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
         >
           <div className="container mx-auto px-4 md:px-6">
             <motion.h2
               variants={subtleRise}
-              className="text-3xl font-bold mb-12 text-center text-magazine-navy border-b-2 border-[#D4B062] pb-2 inline-block mx-auto"
+              className="text-3xl font-bold mb-12 text-center text-magazine-navy dark:text-white border-b-2 border-[#D4B062] pb-2 inline-block mx-auto"
             >
               What Happened?
             </motion.h2>
@@ -247,9 +251,9 @@ const NotFoundPage: React.FC = () => {
             <div className="max-w-4xl mx-auto mb-16">
               <motion.div
                 variants={fadeIn}
-                className="bg-white p-6 rounded-xl shadow-md border border-gray-100"
+                className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-100 dark:border-gray-700"
               >
-                <p className="text-gray-600 mb-6 leading-relaxed">
+                <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                   The page you're looking for might have been removed, had its
                   name changed, or is temporarily unavailable. This could be due
                   to:
@@ -269,7 +273,9 @@ const NotFoundPage: React.FC = () => {
                       variants={cardFadeIn}
                     >
                       <div className="mr-3 mt-1 text-[#D4B062]">•</div>
-                      <p className="text-gray-700">{reason}</p>
+                      <p className="text-gray-700 dark:text-gray-300">
+                        {reason}
+                      </p>
                     </motion.div>
                   ))}
                 </div>
@@ -278,7 +284,7 @@ const NotFoundPage: React.FC = () => {
 
             <motion.h2
               variants={subtleRise}
-              className="text-3xl font-bold mb-12 text-center text-magazine-navy"
+              className="text-3xl font-bold mb-12 text-center text-magazine-navy dark:text-white"
             >
               What You Can Do
             </motion.h2>
@@ -308,18 +314,18 @@ const NotFoundPage: React.FC = () => {
                     custom={index}
                     variants={statCard}
                     whileHover="hover"
-                    className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
+                    className="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-100 dark:border-gray-700"
                   >
                     <div className="p-6">
                       <div className="flex items-center gap-4 mb-5">
                         <div className="bg-[#D4B062] p-3 rounded-full border-2 border-[#D4B062] text-white">
                           {item.icon}
                         </div>
-                        <h3 className="font-bold text-xl text-magazine-navy">
+                        <h3 className="font-bold text-xl text-magazine-navy dark:text-white">
                           {item.title}
                         </h3>
                       </div>
-                      <p className="text-gray-600 mb-6 leading-relaxed">
+                      <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                         {item.description}
                       </p>
                       {item.action ? (
diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index a05bf568..84e7f787 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -10,7 +10,7 @@ import Product from '@/components/Product';
 
 const ProductsPage = () => {
   return (
-    <div>
+    <div className="bg-white dark:bg-gray-900">
       <Header />
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         {/* Parent container to control animation sequence */}
@@ -23,7 +23,7 @@ const ProductsPage = () => {
             className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-extralight text-center mb-6 font-[Oswald] tracking-wide py-8"
             variants={fadeInUpAnimation}
           >
-            <span className="text-black">OUR</span>{' '}
+            <span className="text-black dark:text-white">OUR</span>{' '}
             <span className="text-red-500">MERCHANDISE</span>
           </motion.h2>
           <motion.div variants={zoomInAnimation}>
diff --git a/src/pages/TryNow/FlatHub.tsx b/src/pages/TryNow/FlatHub.tsx
index a819c320..f6bb6b5d 100644
--- a/src/pages/TryNow/FlatHub.tsx
+++ b/src/pages/TryNow/FlatHub.tsx
@@ -59,7 +59,7 @@ const FlatHubPage = () => {
           />
         ))}
 
-        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
+        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10 dark:text-white">
           What can you do with <span className="text-[#68A6F7]">Flatpak</span>?
         </h2>
 
@@ -69,7 +69,7 @@ const FlatHubPage = () => {
 
         <div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 my-8">
           <div className="w-full md:w-1/2">
-            <h2 className="text-2xl font-semibold mb-4 text-center font-Caveat">
+            <h2 className="text-2xl font-semibold mb-4 text-center font-Caveat dark:text-white">
               Getting Started
             </h2>
             <div className="grid grid-cols-1 gap-4 mt-6 p-4">
@@ -86,7 +86,7 @@ const FlatHubPage = () => {
             </div>
           </div>
           <div className="w-full md:w-1/2">
-            <h2 className="text-2xl font-semibold mb-4 text-center font-[Caveat]">
+            <h2 className="text-2xl font-semibold mb-4 text-center font-[Caveat] dark:text-white">
               Next Steps
             </h2>
             <div className="grid grid-cols-1 gap-4 mt-6 p-4">
@@ -104,12 +104,13 @@ const FlatHubPage = () => {
         </div>
 
         {/* New Developer Section */}
-        <div className="my-12 p-6 bg-gray-50 rounded-lg shadow-sm">
-          <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mb-6">
-            For <span className="text-blue-600">Developers</span>
+        <div className="my-12 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm">
+          <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mb-6 dark:text-white">
+            For{' '}
+            <span className="text-blue-600 dark:text-blue-400">Developers</span>
           </h2>
           <div className="max-w-3xl mx-auto">
-            <p className="text-lg mb-4">
+            <p className="text-lg mb-4 dark:text-gray-300">
               Looking to package and distribute Sugar activities using Flatpak?
               Our comprehensive guide walks you through the entire process of
               creating, building, and publishing Flatpak applications.
diff --git a/src/pages/TryNow/MusicBlocks.tsx b/src/pages/TryNow/MusicBlocks.tsx
index e2d64b91..e7419630 100644
--- a/src/pages/TryNow/MusicBlocks.tsx
+++ b/src/pages/TryNow/MusicBlocks.tsx
@@ -69,11 +69,11 @@ const MusicBlocksPage = () => {
 
         <p className="flex justify-center">
           <span className="text-[#436EA6]">Learn music</span>
-          &nbsp;<span>,</span>&nbsp;
+          &nbsp;<span className="dark:text-white">,</span>&nbsp;
           <span className="text-[#FEC613]">math</span>
-          &nbsp;<span>, and</span>&nbsp;
+          &nbsp;<span className="dark:text-white">, and</span>&nbsp;
           <span className="text-[#AB486A]">programming</span>
-          &nbsp;together.
+          &nbsp;<span className="dark:text-white">together.</span>
         </p>
 
         <div className="w-[80%] mx-auto flex justify-center">
@@ -95,7 +95,7 @@ const MusicBlocksPage = () => {
           />
         </div>
 
-        <p className="w-[80%] mx-auto flex justify-center">
+        <p className="w-[80%] mx-auto flex justify-center dark:text-gray-300">
           Music Blocks is an American-made educational software that teaches
           music, math, and programming all at once. By combining blocks that
           indicate instruments and rhythms, and by changing the pitch values,
@@ -115,14 +115,14 @@ const MusicBlocksPage = () => {
           />
         ))}
 
-        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
+        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10 dark:text-white">
           What can you do with{' '}
           <span className="text-[#68A6F7]">Music Blocks</span>??
         </h2>
 
         <LogoCards data={musicBlocksLogoCards} />
 
-        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
+        <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10 dark:text-white">
           How <span className="text-[#68A6F7]">Music Blocks</span> help your
           child's education??
         </h2>
diff --git a/src/pages/TrySugar.tsx b/src/pages/TrySugar.tsx
index 7f6d4709..3cd6877c 100644
--- a/src/pages/TrySugar.tsx
+++ b/src/pages/TrySugar.tsx
@@ -6,7 +6,7 @@ const TrySugar = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow bg-[#F6DEC9] p-4">
+      <main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900/95 p-4">
         <div className="max-w-6xl mx-auto space-y-8">
           <Try />
         </div>
diff --git a/src/pages/Volunteer.tsx b/src/pages/Volunteer.tsx
index a4d5b5b2..6b975c68 100644
--- a/src/pages/Volunteer.tsx
+++ b/src/pages/Volunteer.tsx
@@ -29,9 +29,9 @@ const Volunteer = () => {
   };
 
   return (
-    <div>
+    <div className="min-h-screen bg-[#FFFEF9] dark:bg-[#13141f]">
       <Header />
-      <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-6">
+      <main className="container mx-auto flex flex-col items-center justify-center p-6">
         <JoinToggle />
 
         {/* Content Section */}
@@ -44,10 +44,10 @@ const Volunteer = () => {
             whileInView="visible"
             viewport={{ once: true, amount: 0.5 }}
           >
-            <h2 className="text-4xl font-bold">
+            <h2 className="text-4xl font-bold dark:text-gray-100">
               Become a <span className="text-red-500">Volunteer</span>
             </h2>
-            <p className="text-lg text-gray-700 mt-4">
+            <p className="text-lg text-gray-700 dark:text-gray-300 mt-4">
               By bringing together people with diverse skills from around the
               globe to work toward our mission in education, volunteers in the
               Sugar Labs community have ample opportunities to grow their skills
@@ -85,12 +85,12 @@ const Volunteer = () => {
           whileInView="visible"
           viewport={{ once: true, amount: 0.5 }}
         >
-          <h2 className="text-5xl font-bold font-[Caveat]">
+          <h2 className="text-5xl font-bold font-[Caveat] dark:text-gray-100">
             Getting Involved as a Volunteer
           </h2>
-          <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          <hr className="w-32 border-t-2 border-gray-400 dark:border-gray-600 mx-auto mt-2" />
 
-          <p className="text-lg text-gray-700 font-[Inter] mt-6 leading-relaxed">
+          <p className="text-lg text-gray-700 dark:text-gray-300 font-[Inter] mt-6 leading-relaxed">
             Sugar Labs is seeking volunteer assistance in the roles of
             education, communication, advocacy, research, and technical.
             Sustained, committed help in any of these areas will help us grow as
@@ -99,11 +99,11 @@ const Volunteer = () => {
             then we encourage you to apply.
           </p>
 
-          <p className="text-lg text-gray-700 font-[Inter] mt-4 leading-relaxed">
+          <p className="text-lg text-gray-700 dark:text-gray-300 font-[Inter] mt-4 leading-relaxed">
             Send a notification of your interest to
             <a
               href="mailto:info@sugarlabs.org"
-              className="text-blue-500 underline"
+              className="text-blue-500 dark:text-blue-400 underline"
             >
               {' '}
               info@sugarlabs.org
@@ -117,7 +117,7 @@ const Volunteer = () => {
         {/* Volunteer Roles */}
         <div className="mt-16 max-w-6xl px-4" id="volunteer-cards">
           <motion.h2
-            className="text-5xl font-[Caveat] font-bold text-center"
+            className="text-5xl font-[Caveat] font-bold text-center dark:text-gray-100"
             variants={slideInBottom}
             initial="hidden"
             whileInView="visible"
@@ -125,35 +125,44 @@ const Volunteer = () => {
           >
             Volunteer Roles
           </motion.h2>
-          <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          <hr className="w-32 border-t-2 border-gray-400 dark:border-gray-600 mx-auto mt-2" />
 
           {/* Role Cards */}
           <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
             {roleCards.map((role, index) => (
               <motion.div
                 key={index}
-                className="border p-6 rounded-lg shadow-lg bg-white text-center"
+                className="border dark:border-gray-600 p-6 rounded-lg shadow-lg bg-white dark:bg-[#1a1b26] text-center"
                 variants={cardFadeIn}
                 initial="hidden"
                 whileInView="visible"
                 viewport={{ once: true, amount: 0.2 }}
               >
-                <h3 className="text-2xl font-bold">{role.title}</h3>
-                <hr className="w-16 border-t-2 border-gray-400 mx-auto mt-2" />
-                <p className="text-gray-700 mt-4">{role.description}</p>
-                <ul className="text-gray-600 text-left mt-3 space-y-2">
+                <h3 className="text-2xl font-bold dark:text-white">
+                  {role.title}
+                </h3>
+                <hr className="w-16 border-t-2 border-gray-400 dark:border-gray-500 mx-auto mt-2" />
+                <p className="text-gray-700 dark:text-gray-200 mt-4">
+                  {role.description}
+                </p>
+                <ul className="text-gray-600 dark:text-gray-300 text-left mt-3 space-y-2">
                   {role.points?.map((point, idx) => (
                     <li key={idx} className="flex items-start">
-                      <span className="text-red-500 font-bold mr-2">•</span>
-                      {point}
+                      <span className="text-red-500 dark:text-red-400 font-bold mr-2">
+                        •
+                      </span>
+                      <span className="dark:text-gray-200">{point}</span>
                     </li>
                   ))}
                 </ul>
                 {role.extra && (
-                  <p className="text-gray-700 text-sm mt-3">
+                  <p className="text-gray-700 dark:text-gray-300 text-sm mt-3">
                     {role.extra}{' '}
                     {role.link && (
-                      <a href={role.link} className="text-blue-500 underline">
+                      <a
+                        href={role.link}
+                        className="text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 underline"
+                      >
                         {role.link}
                       </a>
                     )}
@@ -172,12 +181,12 @@ const Volunteer = () => {
           whileInView="visible"
           viewport={{ once: true, amount: 0.5 }}
         >
-          <h2 className="text-5xl font-bold font-[Caveat]">
+          <h2 className="text-5xl font-bold font-[Caveat] dark:text-gray-100">
             Ways to Get <span className="text-red-500">Involved</span>
           </h2>
-          <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          <hr className="w-32 border-t-2 border-gray-400 dark:border-gray-600 mx-auto mt-2" />
 
-          <p className="text-lg text-gray-700 font-[Inter] mt-6 leading-relaxed">
+          <p className="text-lg text-gray-700 dark:text-gray-300 font-[Inter] mt-6 leading-relaxed">
             There are multiple ways to get involved, whether as a developer,
             educator, advocate, or communicator. Each role plays a vital part in
             helping us achieve our mission.
@@ -206,16 +215,16 @@ const Volunteer = () => {
           whileInView="visible"
           viewport={{ once: true, amount: 0.5 }}
         >
-          <h2 className="text-5xl font-bold font-[Caveat]">
+          <h2 className="text-5xl font-bold font-[Caveat] dark:text-gray-100">
             Interested in Helping Out?
           </h2>
-          <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          <hr className="w-32 border-t-2 border-gray-400 dark:border-gray-600 mx-auto mt-2" />
 
-          <p className="text-lg text-gray-700 font-[Inter] mt-6 leading-relaxed">
+          <p className="text-lg text-gray-700 dark:text-gray-300 font-[Inter] mt-6 leading-relaxed">
             Feel free to reach out to express your interest in volunteering via{' '}
             <a
               href={mailLink}
-              className="text-blue-500 hover:underline"
+              className="text-blue-500 dark:text-blue-400 hover:underline"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -224,14 +233,17 @@ const Volunteer = () => {
             or{' '}
             <a
               href={matrixLink}
-              className="text-blue-500 hover:underline"
+              className="text-blue-500 dark:text-blue-400 hover:underline"
               target="_blank"
               rel="noopener noreferrer"
             >
               Matrix
             </a>
             . Alternatively, you may send{' '}
-            <Link to="/contact-us" className="text-blue-600 hover:underline">
+            <Link
+              to="/contact-us"
+              className="text-blue-600 dark:text-blue-400 hover:underline"
+            >
               direct message
             </Link>{' '}
             to one of our social media channels.
diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
index df5bc290..8b706f57 100644
--- a/src/sections/Header.tsx
+++ b/src/sections/Header.tsx
@@ -4,6 +4,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import logo from '/assets/Icons/logo.svg';
 import NavDropdown from '@/sections/NavDropdown';
 import { navigationData } from '@/constants/Header';
+import DarkModeToggle from '@/components/shared/DarkModeToggle';
 
 const Header: React.FC = () => {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -51,7 +52,9 @@ const Header: React.FC = () => {
     <>
       <header
         className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-          isScrolled ? 'backdrop-blur-md bg-white/90 shadow-lg' : 'bg-white'
+          isScrolled
+            ? 'backdrop-blur-md bg-white/90 dark:bg-gray-900/80 shadow-lg'
+            : 'bg-white dark:bg-gray-900'
         }`}
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -78,19 +81,19 @@ const Header: React.FC = () => {
             >
               <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 ${
                     isMobileMenuOpen
                       ? 'rotate-45 translate-y-1.5'
                       : 'translate-y-[-4px]'
                   }`}
                 />
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${
                     isMobileMenuOpen ? 'opacity-0' : ''
                   }`}
                 />
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${
                     isMobileMenuOpen
                       ? '-rotate-45 -translate-y-1.5'
                       : 'translate-y-[4px]'
@@ -121,14 +124,16 @@ const Header: React.FC = () => {
                 <Link
                   key={link.label}
                   to={link.path}
-                  className="px-2 lg:px-3 py-2 text-gray-700 hover:text-blue-600 font-medium rounded-md
-                            transition-all duration-200 hover:bg-gray-50 text-sm lg:text-base"
+                  className="px-2 lg:px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+                            transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm lg:text-base"
                   onClick={handleNavigation}
                 >
                   {link.label}
                 </Link>
               ))}
 
+              <DarkModeToggle />
+
               {/* CTA Button */}
               <Link
                 to="/try-sugar"
@@ -188,7 +193,7 @@ const MobileNavDrawer: React.FC<{
           animate={{ opacity: 1, x: 0 }}
           exit={{ opacity: 0, x: '100%' }}
           transition={{ type: 'tween', duration: 0.3 }}
-          className="fixed md:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white shadow-xl z-40
+          className="fixed md:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white dark:bg-gray-900 shadow-xl z-40
                     flex flex-col h-full"
         >
           <div className="flex flex-col h-full">
@@ -207,7 +212,7 @@ const MobileNavDrawer: React.FC<{
                           setActiveDropdown(activeDropdown === key ? null : key)
                         }
                         className="flex items-center justify-between w-full text-left px-2 py-2
-                              text-gray-700 font-medium rounded-lg hover:bg-gray-50"
+                              text-gray-700 dark:text-gray-200 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
                         aria-expanded={activeDropdown === key}
                       >
                         <span>{dropdown.label}</span>
@@ -243,8 +248,8 @@ const MobileNavDrawer: React.FC<{
                                   key={item.path}
                                   to={item.path}
                                   onClick={onClose}
-                                  className="flex items-center px-4 py-2 text-sm text-gray-600
-                                      rounded-lg hover:bg-gray-50 hover:text-blue-600"
+                                  className="flex items-center px-4 py-2 text-sm text-gray-600 dark:text-gray-300
+                                      rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-blue-600"
                                 >
                                   {item.label}
                                 </Link>
@@ -263,17 +268,20 @@ const MobileNavDrawer: React.FC<{
                     key={link.label}
                     to={link.path}
                     onClick={onClose}
-                    className="block px-4 py-2 text-gray-700 font-medium rounded-lg
-                            hover:bg-gray-50 hover:text-blue-600"
+                    className="block px-4 py-2 text-gray-700 dark:text-gray-200 font-medium rounded-lg
+                            hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-blue-600"
                   >
                     {link.label}
                   </Link>
                 ))}
               </div>
+              <div className="px-4 py-2">
+                <DarkModeToggle />
+              </div>
             </div>
 
             {/* CTA button footer */}
-            <div className="p-4 border-t border-gray-200 sticky bottom-0 bg-white">
+            <div className="p-4 border-t border-gray-200 dark:border-gray-700 sticky bottom-0 bg-white dark:bg-gray-900">
               <Link
                 to="/try-sugar"
                 onClick={onClose}
diff --git a/src/sections/NavDropdown.tsx b/src/sections/NavDropdown.tsx
index 66c2a7ce..257713fe 100644
--- a/src/sections/NavDropdown.tsx
+++ b/src/sections/NavDropdown.tsx
@@ -26,9 +26,9 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
       onMouseLeave={() => setActive(null)}
     >
       <button
-        className={`px-2 lg:px-3 py-2 text-gray-700 hover:text-blue-600 font-medium rounded-md
-                  transition-all duration-200 hover:bg-gray-50 flex items-center space-x-1
-                  ${isActive ? 'text-blue-600' : ''}`}
+        className={`px-2 lg:px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+                  transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center space-x-1
+                  ${isActive ? 'text-blue-600 dark:text-blue-400' : ''}`}
         aria-expanded={isActive}
       >
         <span>{label}</span>
@@ -54,7 +54,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="absolute left-0 mt-2 w-56 rounded-xl bg-white shadow-xl ring-1 ring-black ring-opacity-5 overflow-hidden"
+            className="absolute left-0 mt-2 w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 overflow-hidden"
           >
             <div className="py-2">
               {items.map((item) => (
@@ -62,8 +62,8 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                   key={item.path}
                   to={item.path}
                   onClick={onNavigate}
-                  className="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50
-                          transition-all duration-200 hover:text-blue-600"
+                  className="group flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700
+                          transition-all duration-200 hover:text-blue-600 dark:hover:text-blue-400"
                 >
                   <span
                     className="w-2 h-2 rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
diff --git a/src/utils/MarkdownRenderer.tsx b/src/utils/MarkdownRenderer.tsx
index 7ecbbc92..7c267019 100644
--- a/src/utils/MarkdownRenderer.tsx
+++ b/src/utils/MarkdownRenderer.tsx
@@ -311,12 +311,12 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
 
   // Component definitions with shared styles
   const headingClasses = {
-    h1: 'text-3xl font-bold my-6 text-gray-900 group flex items-center border-b border-gray-200 pb-2',
-    h2: 'text-2xl font-semibold my-5 text-gray-900 group flex items-center border-b border-gray-200 pb-1',
-    h3: 'text-xl font-semibold my-4 text-gray-900 group flex items-center',
-    h4: 'text-lg font-semibold my-3 text-gray-900',
-    h5: 'text-base font-semibold my-3 text-gray-900',
-    h6: 'text-sm font-semibold my-3 text-gray-600 uppercase tracking-wide',
+    h1: 'text-3xl font-bold my-6 text-gray-900 dark:text-gray-100 group flex items-center border-b border-gray-200 dark:border-gray-700 pb-2',
+    h2: 'text-2xl font-semibold my-5 text-gray-900 dark:text-gray-100 group flex items-center border-b border-gray-200 dark:border-gray-700 pb-1',
+    h3: 'text-xl font-semibold my-4 text-gray-900 dark:text-gray-100 group flex items-center',
+    h4: 'text-lg font-semibold my-3 text-gray-900 dark:text-gray-100',
+    h5: 'text-base font-semibold my-3 text-gray-900 dark:text-gray-100',
+    h6: 'text-sm font-semibold my-3 text-gray-600 dark:text-gray-300 uppercase tracking-wide',
   };
 
   const createHeading =
@@ -344,7 +344,10 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     h6: createHeading('h6'),
 
     p: ({ children, ...props }) => (
-      <p {...props} className="my-4 text-gray-700 leading-relaxed">
+      <p
+        {...props}
+        className="my-4 text-gray-700 dark:text-gray-300 leading-relaxed"
+      >
         {children}
       </p>
     ),
@@ -469,32 +472,41 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     },
 
     table: ({ children, ...props }) => (
-      <div className="overflow-x-auto my-6 rounded-lg shadow-sm border border-gray-200">
-        <table {...props} className="min-w-full divide-y divide-gray-200">
+      <div className="overflow-x-auto my-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <table
+          {...props}
+          className="min-w-full divide-y divide-gray-200 dark:divide-gray-700"
+        >
           {children}
         </table>
       </div>
     ),
 
     thead: ({ children, ...props }) => (
-      <thead {...props} className="bg-gray-50">
+      <thead {...props} className="bg-gray-50 dark:bg-gray-800">
         {children}
       </thead>
     ),
     tbody: ({ children, ...props }) => (
-      <tbody {...props} className="bg-white divide-y divide-gray-200">
+      <tbody
+        {...props}
+        className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700"
+      >
         {children}
       </tbody>
     ),
     tr: ({ children, ...props }) => (
-      <tr {...props} className="hover:bg-gray-50 transition-colors">
+      <tr
+        {...props}
+        className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+      >
         {children}
       </tr>
     ),
     th: ({ children, ...props }) => (
       <th
         {...props}
-        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r last:border-r-0 border-gray-200"
+        className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-r last:border-r-0 border-gray-200 dark:border-gray-700"
       >
         {children}
       </th>
@@ -502,7 +514,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     td: ({ children, ...props }) => (
       <td
         {...props}
-        className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-r last:border-r-0 border-gray-200"
+        className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 border-r last:border-r-0 border-gray-200 dark:border-gray-700"
       >
         {children}
       </td>
@@ -519,7 +531,10 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       </ol>
     ),
     li: ({ children, ...props }) => (
-      <li {...props} className="text-gray-700 leading-relaxed">
+      <li
+        {...props}
+        className="text-gray-700 dark:text-gray-300 leading-relaxed"
+      >
         {children}
       </li>
     ),
@@ -532,7 +547,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
         <a
           href={href}
           {...props}
-          className="text-blue-600 hover:text-blue-800 hover:underline transition-colors font-medium"
+          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline transition-colors font-medium"
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
           data-anchor-link={isAnchor ? 'true' : undefined}
@@ -558,12 +573,15 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     },
 
     strong: ({ children, ...props }) => (
-      <strong {...props} className="font-semibold text-gray-900">
+      <strong
+        {...props}
+        className="font-semibold text-gray-900 dark:text-gray-100"
+      >
         {children}
       </strong>
     ),
     em: ({ children, ...props }) => (
-      <em {...props} className="italic text-gray-700">
+      <em {...props} className="italic text-gray-700 dark:text-gray-300">
         {children}
       </em>
     ),
@@ -609,7 +627,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   };
 
   return (
-    <div className="prose prose-lg max-w-none">
+    <div className="prose prose-lg dark:prose-invert prose-headings:dark:text-gray-100 prose-p:dark:text-gray-300 prose-strong:dark:text-gray-100 prose-em:dark:text-gray-300 prose-li:dark:text-gray-300 max-w-none">
       <ReactMarkdown
         remarkPlugins={[remarkFrontmatter, remarkGfm, remarkSupersub]}
         rehypePlugins={[