diff --git a/package-lock.json b/package-lock.json
index 0b3b059..a3fb379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "ioredis": "^5.4.1",
         "next": "14.2.13",
         "next-plausible": "^3.12.4",
+        "next-themes": "^0.4.3",
         "openai": "^4.65.0",
         "react": "^18",
         "react-dom": "^18"
@@ -10036,6 +10037,16 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.3.tgz",
+      "integrity": "sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 465f847..a410fe1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "ioredis": "^5.4.1",
     "next": "14.2.13",
     "next-plausible": "^3.12.4",
+    "next-themes": "^0.4.3",
     "openai": "^4.65.0",
     "react": "^18",
     "react-dom": "^18"
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 77de676..e6c8354 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -6,7 +6,7 @@ import Photo from './photo.jpeg'
 export default async function AboutPage() {
   return (
     <div className="p-4 md:p-6 lg:p-8">
-      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl">
+      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl dark:text-gray-100">
         About CheckMVP
       </h1>
 
@@ -42,7 +42,7 @@ export default async function AboutPage() {
       </div>
 
       <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
-        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl dark:text-gray-100">
           Just Talk to Your Customers!
         </h2>
 
@@ -64,7 +64,7 @@ export default async function AboutPage() {
       </div>
 
       <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
-        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl dark:text-gray-100">
           What We Bring to The Table?
         </h2>
 
diff --git a/src/app/concepts/[id]/NotWellDefinedProblem.tsx b/src/app/concepts/[id]/NotWellDefinedProblem.tsx
index 087346e..0a99498 100644
--- a/src/app/concepts/[id]/NotWellDefinedProblem.tsx
+++ b/src/app/concepts/[id]/NotWellDefinedProblem.tsx
@@ -46,7 +46,7 @@ const NotWellDefinedProblem = ({ problem, evaluation }: Props) => (
         {evaluation.suggestions.map((item, index) => (
           <div
             key={index}
-            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
           >
             {item}
           </div>
diff --git a/src/app/concepts/[id]/ProblemRequiresChanges.tsx b/src/app/concepts/[id]/ProblemRequiresChanges.tsx
index bc14551..5ed1ad0 100644
--- a/src/app/concepts/[id]/ProblemRequiresChanges.tsx
+++ b/src/app/concepts/[id]/ProblemRequiresChanges.tsx
@@ -117,7 +117,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
           {evaluation.suggestions.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -133,7 +133,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
             {evaluation.recommendations.map((item, index) => (
               <div
                 key={index}
-                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6"
+                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900"
               >
                 <p className="grow md:text-lg">{item}</p>
 
diff --git a/src/app/concepts/[id]/ReportPage.tsx b/src/app/concepts/[id]/ReportPage.tsx
index 5c8bf01..c71ba31 100644
--- a/src/app/concepts/[id]/ReportPage.tsx
+++ b/src/app/concepts/[id]/ReportPage.tsx
@@ -16,7 +16,7 @@ interface Props {
   concept: Concept
 }
 
-const reloadInterval = 5000
+const reloadInterval = 500000
 
 const ReportPage = ({ concept }: Props) => {
   const router = useRouter()
diff --git a/src/app/concepts/[id]/WellDefinedProblem.tsx b/src/app/concepts/[id]/WellDefinedProblem.tsx
index 5d69e7d..46d65c8 100644
--- a/src/app/concepts/[id]/WellDefinedProblem.tsx
+++ b/src/app/concepts/[id]/WellDefinedProblem.tsx
@@ -87,7 +87,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.painPoints.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -102,7 +102,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.targetAudience.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900"
             >
               <p className="mb-4 text-lg font-bold md:text-xl">
                 {item.segment}
diff --git a/src/app/ideas/[id]/IdeaAnalysisReport.tsx b/src/app/ideas/[id]/IdeaAnalysisReport.tsx
index 0a49984..ca495d4 100644
--- a/src/app/ideas/[id]/IdeaAnalysisReport.tsx
+++ b/src/app/ideas/[id]/IdeaAnalysisReport.tsx
@@ -230,13 +230,13 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
   return (
     <div className="p-4 md:p-6 lg:p-8">
       <div className="flex flex-col md:flex-row">
-        <aside className="sticky top-4 hidden self-start rounded-lg bg-gray-100 p-2 shadow-lg md:block md:w-1/4">
+        <aside className="sticky top-4 hidden self-start rounded-lg bg-gray-100 p-2 shadow-lg md:block md:w-1/4 dark:bg-gray-900">
           <NavBar />
         </aside>
 
         <div className="flex-1 md:pl-8">
           <div className="mb-2 flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-gray-700 md:text-3xl lg:text-4xl">
+            <h1 className="text-2xl font-bold text-gray-700 md:text-3xl lg:text-4xl dark:text-gray-200">
               Your Idea Report
             </h1>
 
@@ -260,7 +260,7 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
 
           {showFeedbackForm && (
             <div className="fixed inset-0 flex items-center justify-center bg-gray-800/50">
-              <div className="max-w-2xl rounded bg-white p-4 shadow-md md:p-8">
+              <div className="max-w-2xl rounded bg-white p-4 shadow-md md:p-8 dark:bg-gray-900">
                 <FeedbackForm
                   onSubmit={handleFeedbackSubmit}
                   onClose={() => setShowFeedbackForm(false)}
@@ -337,7 +337,7 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
           <HorizontalLine />
 
           <div className="my-4 flex items-center justify-between">
-            <p className="text-xl font-bold text-gray-700 md:text-2xl">
+            <p className="text-xl font-bold text-gray-700 md:text-2xl dark:text-gray-300">
               Your PDF Report:
             </p>
 
diff --git a/src/app/ideas/[id]/components/NavBar.tsx b/src/app/ideas/[id]/components/NavBar.tsx
index 96b14da..e1d2fa5 100644
--- a/src/app/ideas/[id]/components/NavBar.tsx
+++ b/src/app/ideas/[id]/components/NavBar.tsx
@@ -1,119 +1,86 @@
 import Link from 'next/link'
 import React from 'react'
 
+const className =
+  'block rounded px-4 py-2 text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-200'
+
 export const NavBar = () => (
   <nav className="space-y-1">
-    <Link
-      href="#context"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#context" className={className}>
       Context
     </Link>
-    <Link
-      href="#market_analysis"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#market_analysis" className={className}>
       Market Analysis
     </Link>
-    <Link
-      href="#competitor_overview"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#competitor_overview" className={className}>
       Competitors
     </Link>
-    <Link
-      href="#value_proposition"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#value_proposition" className={className}>
       Value Proposition
     </Link>
-    <Link
-      href="#target_audiences"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#target_audiences" className={className}>
       Target Audiences
     </Link>
-    <Link
-      href="#swot_analysis"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#swot_analysis" className={className}>
       SWOT Analysis
     </Link>
-    <Link
-      href="#elevator_pitch"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#elevator_pitch" className={className}>
       Elevator Pitch
     </Link>
-    <Link
-      href="#product_names"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#product_names" className={className}>
       Product Names
     </Link>
-    <Link
-      href="#google_trends"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#google_trends" className={className}>
       Google Trends
     </Link>
-    <Link
-      href="#content_ideas"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#content_ideas" className={className}>
       Content Ideas
     </Link>
     <Link
       href="#actionable_next_steps"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Next Steps
     </Link>
     <Link
       href="#two_week_testing_plan"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Two-Week Testing Plan
     </Link>
     <Link
       href="#estimated_costs"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Estimated Costs
     </Link>
     <Link
       href="#early_adopters"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Early Adopters
     </Link>
     <Link
       href="#networking_opportunities"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Networking
     </Link>
     <Link
       href="#feedback_templates"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Feedback Templates
     </Link>
-    <Link
-      href="#pitch_deck"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
-    >
+    <Link href="#pitch_deck" className="block rounded px-4 py-2 text-gray-500">
       Pitch Deck
     </Link>
-    <Link
-      href="#roadmap"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
-    >
+    <Link href="#roadmap" className="block rounded px-4 py-2 text-gray-500">
       Roadmap
     </Link>
     <Link
       href="#tools_and_resources"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Tools & Resources
     </Link>
diff --git a/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx b/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx
index 3342569..ab58b6f 100644
--- a/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx
+++ b/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx
@@ -11,7 +11,6 @@ const SectionActionableNextSteps = () => {
   return (
     <SectionWrapper id="actionable_next_steps">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_actionable_next_steps"
diff --git a/src/app/ideas/[id]/components/SectionCompetitors.tsx b/src/app/ideas/[id]/components/SectionCompetitors.tsx
index 4433931..baaf19e 100644
--- a/src/app/ideas/[id]/components/SectionCompetitors.tsx
+++ b/src/app/ideas/[id]/components/SectionCompetitors.tsx
@@ -40,7 +40,6 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
   return (
     <SectionWrapper id="competitor_overview">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_competitor_overview"
@@ -68,7 +67,7 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
                     onReport(`competitor_analysis.competitors.${idx}`)
                   }
                 >
-                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0">
+                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
                     <h3 className="mb-2 text-lg font-semibold md:text-xl">
                       Product:
                     </h3>
@@ -77,7 +76,7 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
                         href={competitor.url}
                         target="_blank"
                         rel="nofollow noopener noreferrer"
-                        className="text-blue-700 underline hover:text-blue-600"
+                        className="text-blue-700 underline hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-400"
                       >
                         {competitor.productName}
                       </a>
diff --git a/src/app/ideas/[id]/components/SectionContentIdeas.tsx b/src/app/ideas/[id]/components/SectionContentIdeas.tsx
index ac27f7d..7bcb455 100644
--- a/src/app/ideas/[id]/components/SectionContentIdeas.tsx
+++ b/src/app/ideas/[id]/components/SectionContentIdeas.tsx
@@ -35,7 +35,6 @@ const SectionContentIdeas: React.FC<SectionContentIdeasProps> = ({
   return (
     <SectionWrapper id="content_ideas">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_content_ideas_for_marketing"
@@ -143,7 +142,7 @@ const ContentIdea: React.FC<ContentIdeaSectionProps> = ({
     header={header}
     onReport={() => onReport(`content_ideas_for_marketing.${section}`)}
   >
-    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4">
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4 dark:bg-gray-900">
       <h3 className="mb-2 text-lg font-semibold">Platforms:</h3>
 
       <Paragraph>{data.platforms.join(', ')}</Paragraph>
diff --git a/src/app/ideas/[id]/components/SectionContext.tsx b/src/app/ideas/[id]/components/SectionContext.tsx
index 8900de7..bd34ef4 100644
--- a/src/app/ideas/[id]/components/SectionContext.tsx
+++ b/src/app/ideas/[id]/components/SectionContext.tsx
@@ -21,7 +21,6 @@ const SectionContext: React.FC<SectionContextProps> = ({ onReport, data }) => {
   return (
     <SectionWrapper id="context">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_context"
diff --git a/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx b/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx
index 3423a59..19193ca 100644
--- a/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx
+++ b/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx
@@ -11,7 +11,6 @@ const SectionEarlyAdopters = () => {
   return (
     <SectionWrapper id="early_adopters">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_early_adopters_acquisition_ideas"
diff --git a/src/app/ideas/[id]/components/SectionElevatorPitch.tsx b/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
index abdc1ee..93a24ee 100644
--- a/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
+++ b/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
@@ -31,7 +31,6 @@ const SectionElevatorPitch: React.FC<SectionElevatorPitchProps> = ({
   return (
     <SectionWrapper id="elevator_pitch">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_elevator_pitch"
@@ -100,7 +99,7 @@ const Pitch: React.FC<PitchProps> = ({ idx, pitch, onReport }) => {
       header={`${idx + 1}. ${pitch.hook}`}
       onReport={() => onReport(`elevator_pitch.${idx}`)}
     >
-      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0">
+      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
         <Paragraph>
           {pitch.problem} {pitch.solution} {pitch.valueProposition}
         </Paragraph>
diff --git a/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx b/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx
index 0d15e67..07bf6f1 100644
--- a/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx
+++ b/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx
@@ -11,7 +11,6 @@ const SectionEstimatedCosts = () => {
   return (
     <SectionWrapper id="estimated_costs">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_estimated_costs_and_timeline"
diff --git a/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx b/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx
index 590a0b8..2d7b786 100644
--- a/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx
+++ b/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx
@@ -11,7 +11,6 @@ const SectionFeedbackTemplates = () => {
   return (
     <SectionWrapper id="feedback_templates">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_initial_feedback_templates"
diff --git a/src/app/ideas/[id]/components/SectionGoogleTrends.tsx b/src/app/ideas/[id]/components/SectionGoogleTrends.tsx
index d243151..6c1e2cf 100644
--- a/src/app/ideas/[id]/components/SectionGoogleTrends.tsx
+++ b/src/app/ideas/[id]/components/SectionGoogleTrends.tsx
@@ -23,7 +23,6 @@ const SectionGoogleTrends: React.FC<SectionGoogleTrendsProps> = ({
   return (
     <SectionWrapper id="google_trends">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_google_trends_keywords"
@@ -59,7 +58,7 @@ const SectionGoogleTrends: React.FC<SectionGoogleTrendsProps> = ({
                   <Link
                     href={`https://trends.google.com/trends/explore?date=today%201-m&q=${keyword}&hl=en`}
                     key={keyword}
-                    className="inline-flex cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white px-4 py-2 shadow transition-all duration-200 hover:bg-gray-200"
+                    className="inline-flex cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white px-4 py-2 shadow transition-all duration-200 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800"
                     target="_blank"
                     rel="nofollow noopener noreferrer"
                   >
diff --git a/src/app/ideas/[id]/components/SectionMarketAnalysis.tsx b/src/app/ideas/[id]/components/SectionMarketAnalysis.tsx
index 8edc8b1..1fcb861 100644
--- a/src/app/ideas/[id]/components/SectionMarketAnalysis.tsx
+++ b/src/app/ideas/[id]/components/SectionMarketAnalysis.tsx
@@ -28,7 +28,6 @@ const SectionMarketAnalysis: React.FC<SectionMarketAnalysisProps> = ({
   return (
     <SectionWrapper id="market_analysis">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_market_analysis_overview"
diff --git a/src/app/ideas/[id]/components/SectionNetworkingOpportunities.tsx b/src/app/ideas/[id]/components/SectionNetworkingOpportunities.tsx
index 87f215c..185460e 100644
--- a/src/app/ideas/[id]/components/SectionNetworkingOpportunities.tsx
+++ b/src/app/ideas/[id]/components/SectionNetworkingOpportunities.tsx
@@ -11,7 +11,6 @@ const SectionNetworkingOpportunities = () => {
   return (
     <SectionWrapper id="networking_opportunities">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_networking_opportunities"
diff --git a/src/app/ideas/[id]/components/SectionPitchDeck.tsx b/src/app/ideas/[id]/components/SectionPitchDeck.tsx
index 06163a7..aa28be9 100644
--- a/src/app/ideas/[id]/components/SectionPitchDeck.tsx
+++ b/src/app/ideas/[id]/components/SectionPitchDeck.tsx
@@ -11,7 +11,6 @@ const SectionPitchDeck = () => {
   return (
     <SectionWrapper id="pitch_deck">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_pitch_deck_outline"
diff --git a/src/app/ideas/[id]/components/SectionProductNames.tsx b/src/app/ideas/[id]/components/SectionProductNames.tsx
index 7d2d5ad..6bc181d 100644
--- a/src/app/ideas/[id]/components/SectionProductNames.tsx
+++ b/src/app/ideas/[id]/components/SectionProductNames.tsx
@@ -32,7 +32,6 @@ const SectionProductNames: React.FC<SectionProductNamesProps> = ({
   return (
     <SectionWrapper id="product_names">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_potential_product_names"
@@ -57,7 +56,7 @@ const SectionProductNames: React.FC<SectionProductNamesProps> = ({
                   header={`${idx + 1}. ${productName.productName} - ${productName.tagline}`}
                   onReport={() => onReport(`potential_product_names.${idx}`)}
                 >
-                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0">
+                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
                     <Paragraph>
                       {productName.why} {productName.targetAudienceInsight}
                     </Paragraph>
@@ -81,7 +80,7 @@ const SectionProductNames: React.FC<SectionProductNamesProps> = ({
                             href={`https://www.namecheap.com/domains/registration/results/?domain=${item}`}
                             target="_blank"
                             rel="nofollow noopener noreferrer"
-                            className="text-blue-500 underline hover:text-blue-700"
+                            className="text-blue-700 underline hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-400"
                           >
                             {item}
                           </Link>
diff --git a/src/app/ideas/[id]/components/SectionRoadmap.tsx b/src/app/ideas/[id]/components/SectionRoadmap.tsx
index 737fc06..ec3166c 100644
--- a/src/app/ideas/[id]/components/SectionRoadmap.tsx
+++ b/src/app/ideas/[id]/components/SectionRoadmap.tsx
@@ -11,7 +11,6 @@ const SectionRoadmap = () => {
   return (
     <SectionWrapper id="roadmap">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_roadmap_suggestions"
diff --git a/src/app/ideas/[id]/components/SectionSWOTAnalysis.tsx b/src/app/ideas/[id]/components/SectionSWOTAnalysis.tsx
index c138259..1caaa21 100644
--- a/src/app/ideas/[id]/components/SectionSWOTAnalysis.tsx
+++ b/src/app/ideas/[id]/components/SectionSWOTAnalysis.tsx
@@ -25,7 +25,6 @@ const SectionSWOTAnalysis: React.FC<SectionSWOTAnalysisProps> = ({
   return (
     <SectionWrapper id="swot_analysis">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_swot_analysis"
diff --git a/src/app/ideas/[id]/components/SectionTargetAudiences.tsx b/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
index 272dfef..6cf5730 100644
--- a/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
+++ b/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
@@ -30,7 +30,6 @@ const SectionTargetAudiences: React.FC<SectionTargetAudiencesProps> = ({
   return (
     <SectionWrapper id="target_audiences">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_target_audiences"
@@ -54,7 +53,7 @@ const SectionTargetAudiences: React.FC<SectionTargetAudiencesProps> = ({
               header={`${idx + 1}. ${audience.segment}`}
               onReport={() => onReport(`target_audiences.${audience.id}`)}
             >
-              <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6">
+              <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 dark:bg-gray-900">
                 <h3 className="mb-2 text-lg font-semibold md:text-xl">
                   Description:
                 </h3>
diff --git a/src/app/ideas/[id]/components/SectionToolsAndResources.tsx b/src/app/ideas/[id]/components/SectionToolsAndResources.tsx
index 6f2277c..a7fe1b7 100644
--- a/src/app/ideas/[id]/components/SectionToolsAndResources.tsx
+++ b/src/app/ideas/[id]/components/SectionToolsAndResources.tsx
@@ -11,7 +11,6 @@ const SectionToolsAndResources = () => {
   return (
     <SectionWrapper id="tools_and_resources">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_suggested_tools_and_resources"
diff --git a/src/app/ideas/[id]/components/SectionTwoWeekTestingPlan.tsx b/src/app/ideas/[id]/components/SectionTwoWeekTestingPlan.tsx
index 7f5e94d..2d234c2 100644
--- a/src/app/ideas/[id]/components/SectionTwoWeekTestingPlan.tsx
+++ b/src/app/ideas/[id]/components/SectionTwoWeekTestingPlan.tsx
@@ -11,7 +11,6 @@ const SectionTwoWeekTestingPlan = () => {
   return (
     <SectionWrapper id="two_week_testing_plan">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_two_week_testing_plan"
diff --git a/src/app/ideas/[id]/components/SectionValueProposition.tsx b/src/app/ideas/[id]/components/SectionValueProposition.tsx
index 6fa2fb1..0ff64b0 100644
--- a/src/app/ideas/[id]/components/SectionValueProposition.tsx
+++ b/src/app/ideas/[id]/components/SectionValueProposition.tsx
@@ -26,7 +26,6 @@ const SectionValueProposition: React.FC<SectionValuePropositionProps> = ({
   return (
     <SectionWrapper id="value_proposition">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_value_proposition"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 61ce91f..138b822 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import PlausibleProvider from 'next-plausible'
+import { ThemeProvider } from 'next-themes'
 import React from 'react'
 import { env } from '@/lib/env'
 import type { Metadata } from 'next'
@@ -17,12 +18,14 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <PlausibleProvider domain={env.DOMAIN} />
       </head>
 
-      <body>{children}</body>
+      <body>
+        <ThemeProvider attribute="data-mode">{children}</ThemeProvider>
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62768e4..e93a2b6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -36,7 +36,7 @@ export default async function LandingPage() {
 
   return (
     <div className="p-4 md:p-6 lg:p-8">
-      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl">
+      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl lg:mb-12 dark:text-gray-100">
         Can Your Startup Idea Pass The Test?
       </h1>
 
@@ -80,7 +80,7 @@ export default async function LandingPage() {
         </div>
       </div>
 
-      <div className="mb-4 rounded-lg border border-green-300 bg-green-50 p-4 text-lg text-green-800 md:mb-4 lg:mb-8">
+      <div className="mb-4 rounded-lg border border-green-300 bg-green-50 p-4 text-lg text-green-800 md:mb-4 lg:mb-12">
         <p>
           We&apos;ve analyzed <strong>{totalConceptsCount} ideas</strong> so
           far! Let&apos;s see how we can help you today 🤗
@@ -144,7 +144,7 @@ const WhatIsInside = () => (
 const Screenshots = () => (
   <Section heading="Screenshots">
     <div className="grid grid-cols-1 gap-6 text-left md:grid-cols-2 md:gap-6 lg:gap-8">
-      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100">
+      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100 dark:bg-gray-700 dark:lg:hover:bg-gray-600">
         <Link href={IdeaReport01.src} target="_blank">
           <Image
             src={IdeaReport01.src}
@@ -155,7 +155,7 @@ const Screenshots = () => (
         </Link>
       </div>
 
-      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100">
+      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100 dark:bg-gray-700 dark:lg:hover:bg-gray-600">
         <Link href={IdeaReport02.src} target="_blank">
           <Image
             src={IdeaReport02.src}
@@ -166,7 +166,7 @@ const Screenshots = () => (
         </Link>
       </div>
 
-      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100">
+      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100 dark:bg-gray-700 dark:lg:hover:bg-gray-600">
         <Link href={IdeaReport03.src} target="_blank">
           <Image
             src={IdeaReport03.src}
@@ -177,7 +177,7 @@ const Screenshots = () => (
         </Link>
       </div>
 
-      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100">
+      <div className="rounded-lg bg-gray-50 p-2 shadow-lg lg:hover:bg-gray-100 dark:bg-gray-700 dark:lg:hover:bg-gray-600">
         <Link href={IdeaReport04.src} target="_blank">
           <Image
             src={IdeaReport04.src}
@@ -193,7 +193,7 @@ const Screenshots = () => (
 
 const Section: React.FC<SectionProps> = ({ heading, children }) => (
   <div className="mt-8 pb-4 md:mt-10 md:pb-6 lg:mt-14 lg:pb-8">
-    <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+    <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl dark:text-gray-100">
       {heading}
     </h2>
 
@@ -212,7 +212,7 @@ const SectionCell: React.FC<SectionCellProps> = ({
   heading,
   description,
 }) => (
-  <div className="rounded-lg bg-gray-50 px-6 py-5 shadow-lg lg:hover:bg-gray-100">
+  <div className="rounded-lg bg-gray-50 px-6 py-5 shadow-lg lg:hover:bg-gray-100 dark:bg-gray-700 dark:lg:hover:bg-gray-600">
     {number && (
       <div className="mb-2 text-center text-4xl font-bold text-blue-600 md:mb-4 md:text-5xl">
         {number}
diff --git a/src/app/start/page.tsx b/src/app/start/page.tsx
index 530e295..78b2c3f 100644
--- a/src/app/start/page.tsx
+++ b/src/app/start/page.tsx
@@ -17,7 +17,7 @@ export default async function StartPage({
     <div className="p-4 md:p-6 lg:p-8">
       {limiter.isAllowed ? (
         <>
-          <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+          <h1 className="mb-6 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl dark:text-gray-100">
             Only One Question
           </h1>
 
diff --git a/src/app/supporters/page.tsx b/src/app/supporters/page.tsx
index de5d43b..fe62ed4 100644
--- a/src/app/supporters/page.tsx
+++ b/src/app/supporters/page.tsx
@@ -18,11 +18,11 @@ const SupportersPage: React.FC = () => {
   return (
     <div className="p-4 md:p-6 lg:p-8">
       <header className="mb-8 text-center">
-        <h1 className="mb-4 text-3xl font-bold text-blue-600 md:mb-8 md:text-4xl">
+        <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl dark:text-gray-100">
           Meet the Supporters of CheckMVP ❤️
         </h1>
 
-        <p className="text-justify text-lg text-gray-600 md:text-center">
+        <p className="text-justify text-lg md:text-center">
           These amazing individuals may not have directly contributed to
           building CheckMVP, but their support has been invaluable to me on this
           journey. Whether it was through sharing their thoughts, offering
@@ -35,7 +35,7 @@ const SupportersPage: React.FC = () => {
         {supporters.map((supporter, index) => (
           <div
             key={index}
-            className="flex flex-col items-center rounded-lg border bg-white p-4 shadow-lg transition duration-300 hover:shadow-xl md:p-6"
+            className="flex flex-col items-center rounded-lg border bg-gray-50 p-4 shadow-lg transition duration-300 hover:shadow-xl md:p-6 dark:bg-gray-900"
           >
             <Link
               href={supporter.url}
@@ -51,17 +51,17 @@ const SupportersPage: React.FC = () => {
               />
             </Link>
 
-            <h2 className="text-xl font-semibold text-gray-800">
+            <h2 className="text-xl font-semibold">
               <Link
                 href={supporter.url}
                 target="_blank"
                 rel="noopener noreferrer nofollow"
-                className="mt-4 text-blue-600 hover:text-blue-700 hover:underline"
+                className="mt-4 text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-500"
               >
                 {supporter.name}
               </Link>
             </h2>
-            <p className="mt-2 text-center text-gray-600">
+            <p className="mt-2 text-center text-gray-700 dark:text-gray-300">
               {supporter.tagline}
             </p>
           </div>
@@ -71,7 +71,7 @@ const SupportersPage: React.FC = () => {
       <hr className="my-6" />
 
       <div className="my-6 text-center">
-        <p className="mb-6 text-lg text-gray-600">
+        <p className="mb-6 text-lg text-gray-700 dark:text-gray-300">
           Want to be featured as a supporter?
         </p>
 
diff --git a/src/app/template.tsx b/src/app/template.tsx
index 944d1ac..ffcc6bb 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -1,10 +1,11 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import ThemeToggle from '@/components/ThemeToggle'
 import CheckMVPLogo from '../../public/CheckMVP-Logo.png'
 
 const Template = ({ children }: { children: React.ReactNode }) => (
-  <div className="flex min-h-screen flex-col bg-gray-100">
-    <nav className="w-full bg-white shadow-md">
+  <div className="flex min-h-screen flex-col bg-gray-100 transition-colors duration-300 dark:bg-gray-900">
+    <nav className="w-full bg-white shadow-md transition-colors duration-300 dark:bg-gray-800">
       <div className="mx-auto max-w-5xl px-6">
         <div className="flex h-16 items-center justify-between">
           <Link href="/" className="flex items-center space-x-2">
@@ -13,13 +14,16 @@ const Template = ({ children }: { children: React.ReactNode }) => (
               alt="CheckMVP"
               width="150"
               height="40"
+              className="dark:invert"
             />
           </Link>
 
           <div className="flex items-center space-x-4 md:space-x-6">
+            <ThemeToggle />
+
             <Link
               href="/about"
-              className="flex items-center space-x-1 text-gray-900 hover:text-blue-500"
+              className="flex items-center space-x-1 text-gray-900 transition-colors duration-300 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400"
               title="About"
             >
               About
@@ -27,7 +31,7 @@ const Template = ({ children }: { children: React.ReactNode }) => (
 
             <Link
               href="/supporters"
-              className="flex items-center space-x-1 text-gray-900 hover:text-blue-500"
+              className="flex items-center space-x-1 text-gray-900 transition-colors duration-300 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400"
               title="Supporters"
             >
               Supporters
@@ -38,17 +42,19 @@ const Template = ({ children }: { children: React.ReactNode }) => (
     </nav>
 
     <main className="mx-auto w-full max-w-5xl grow px-4 py-6">
-      <div className="w-full rounded-lg bg-white shadow-md">{children}</div>
+      <div className="w-full rounded-lg bg-white shadow-md transition-colors duration-300 dark:bg-gray-800">
+        {children}
+      </div>
     </main>
 
-    <footer className="bg-gray-200 px-6 py-2 text-center">
-      <p className="text-sm text-gray-700">
+    <footer className="bg-gray-200 px-6 py-2 text-center transition-colors duration-300 dark:bg-gray-800">
+      <p className="text-sm text-gray-700 dark:text-gray-300">
         Built with ❤️ to startup founders and indie makers by{' '}
         <Link
           href="https://www.linkedin.com/in/alexanderkadyrov"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-blue-500 hover:underline"
+          className="text-blue-500 transition-colors duration-300 hover:underline dark:text-blue-400"
         >
           Alex Kadyrov
         </Link>
diff --git a/src/components/ConceptForm.tsx b/src/components/ConceptForm.tsx
index c35db59..02b4a44 100644
--- a/src/components/ConceptForm.tsx
+++ b/src/components/ConceptForm.tsx
@@ -151,8 +151,8 @@ const DefineConceptForm = ({ problem, hideExamples }: Props) => {
 
         {!hideExamples &&
           (showHint ? (
-            <div className="mb-4 rounded-lg border bg-white p-4 shadow-sm md:p-6">
-              <p className="text-lg text-gray-700">
+            <div className="mb-4 rounded-lg border bg-white p-4 shadow-sm md:p-6 dark:bg-gray-800">
+              <p className="text-lg text-gray-700 dark:text-gray-300">
                 The clearer the problem, the more valuable our feedback will be.
                 Focus on the challenges or frustrations that people face, and
                 how your product intends to alleviate them. Check out our
@@ -166,7 +166,7 @@ const DefineConceptForm = ({ problem, hideExamples }: Props) => {
                 setShowHint(!showHint)
               }}
               aria-label="Show Help"
-              className="mb-2 rounded bg-gray-100 p-2 hover:bg-green-100"
+              className="mb-2 rounded bg-gray-100 p-2 hover:bg-green-100 dark:bg-gray-700 dark:hover:bg-gray-600"
             >
               Need Help Getting Started?
             </button>
@@ -175,7 +175,7 @@ const DefineConceptForm = ({ problem, hideExamples }: Props) => {
         <textarea
           id="problem"
           name="problem"
-          className="mt-1 block h-64 w-full rounded-md border-gray-300 text-lg shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          className="mt-1 block h-64 w-full rounded-md border-gray-300 text-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-900 dark:text-gray-200"
           value={formData.problem}
           onChange={handleChange}
           required
@@ -189,7 +189,7 @@ Target Audience:
           maxLength={2048}
         />
 
-        <p className="mt-2 text-right text-sm text-gray-600">
+        <p className="mt-2 text-right text-sm text-gray-600 dark:text-gray-300">
           {remainingCharacters} characters remaining
         </p>
       </div>
@@ -232,7 +232,7 @@ Target Audience:
                 <button
                   type="button"
                   key={index}
-                  className="inline-flex cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white px-4 py-2 shadow transition-all duration-200 hover:bg-gray-200"
+                  className="inline-flex cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white px-4 py-2 shadow transition-all duration-200 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800"
                   onClick={(e) => {
                     e.preventDefault()
                     setFormData({ problem: example.description })
diff --git a/src/components/FetchingDataMessage.tsx b/src/components/FetchingDataMessage.tsx
index 3769687..075e174 100644
--- a/src/components/FetchingDataMessage.tsx
+++ b/src/components/FetchingDataMessage.tsx
@@ -1,7 +1,7 @@
 const FetchingDataMessage = () => (
-  <div className="mb-6 mt-4 flex items-center rounded-lg border border-purple-200 bg-purple-50 p-4 shadow-md md:text-lg">
+  <div className="mb-6 mt-4 flex items-center rounded-lg border border-purple-200 bg-purple-50 p-4 shadow-md md:text-lg dark:bg-purple-800">
     <div className="mr-4 size-6 animate-spin rounded-full border-4 border-purple-500 border-t-transparent" />
-    <p>
+    <p className="dark:text-color-300">
       Hang tight! We&apos;re fetching your data... This make take up to 30
       seconds...
     </p>
diff --git a/src/components/HorizontalLine.tsx b/src/components/HorizontalLine.tsx
index bde5a85..2c1c1df 100644
--- a/src/components/HorizontalLine.tsx
+++ b/src/components/HorizontalLine.tsx
@@ -1,3 +1,5 @@
-const HorizontalLine = () => <hr className="mt-4 md:mt-6" />
+const HorizontalLine = () => (
+  <hr className="mt-4 md:mt-6 dark:border-gray-500" />
+)
 
 export default HorizontalLine
diff --git a/src/components/RandomMessage.tsx b/src/components/RandomMessage.tsx
index 4bdbb5e..cc4a484 100644
--- a/src/components/RandomMessage.tsx
+++ b/src/components/RandomMessage.tsx
@@ -28,7 +28,7 @@ const RandomMessage: React.FC = () => {
     <div className="my-8 flex justify-center">
       {message && (
         <div className="max-w-3xl border-l-4 border-gray-300 px-4 md:px-6">
-          <p className="py-2 text-lg italic text-gray-800 md:text-xl">
+          <p className="py-2 text-lg italic text-gray-800 md:text-xl dark:text-gray-100">
             {message}
           </p>
         </div>
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index 4a3645c..3f3d80a 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -15,7 +15,7 @@ const Section: React.FC<SectionProps> = ({ header, children, onReport }) => (
           <button
             onClick={onReport}
             aria-label="Report"
-            className="flex items-center justify-center rounded bg-gray-50 px-2 py-1 text-sm hover:bg-red-100"
+            className="flex items-center justify-center rounded bg-gray-50 px-2 py-1 text-sm hover:bg-red-100 dark:bg-gray-600 dark:hover:bg-red-700"
           >
             Dislike
           </button>
diff --git a/src/components/SectionDescription.tsx b/src/components/SectionDescription.tsx
index 6f3f02c..153e894 100644
--- a/src/components/SectionDescription.tsx
+++ b/src/components/SectionDescription.tsx
@@ -7,8 +7,8 @@ interface SectionDescriptionProps {
 const SectionDescription: React.FC<SectionDescriptionProps> = ({
   children,
 }) => (
-  <div className="mb-8 rounded-lg border bg-white p-4 shadow-sm md:p-6">
-    <p className="text-gray-700 md:text-lg">{children}</p>
+  <div className="mb-8 rounded-lg border bg-white p-4 shadow-sm md:p-6 dark:bg-gray-900/50">
+    <p className="text-gray-700 md:text-lg dark:text-gray-300">{children}</p>
   </div>
 )
 
diff --git a/src/components/SectionHeader.tsx b/src/components/SectionHeader.tsx
index 8c8eeb6..e1ac58f 100644
--- a/src/components/SectionHeader.tsx
+++ b/src/components/SectionHeader.tsx
@@ -3,7 +3,6 @@
 import React from 'react'
 
 interface SectionHeaderProps {
-  color: string
   children: React.ReactNode
   sectionId: string
   onClick?: () => void
@@ -11,7 +10,6 @@ interface SectionHeaderProps {
 }
 
 const SectionHeader: React.FC<SectionHeaderProps> = ({
-  color,
   children,
   sectionId,
   onClick,
@@ -19,8 +17,10 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
 }) => (
   <button
     type="button"
-    className={`${isExpanded ? 'mb-6' : 'mb-0'} text-xl font-semibold md:text-2xl ${color} cursor-pointer ${
-      isExpanded ? 'text-blue-700' : 'text-blue-600'
+    className={`${isExpanded ? 'mb-6' : 'mb-0'} cursor-pointer text-xl font-semibold md:text-2xl ${
+      isExpanded
+        ? 'text-blue-700 dark:text-blue-300'
+        : 'text-blue-600 dark:text-blue-400'
     }`}
     onClick={onClick}
     aria-expanded={isExpanded}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..4e14428
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,25 @@
+'use client'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export default function ThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) return null
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      className="rounded-full bg-white p-2 text-2xl transition-colors duration-300 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
+      aria-label="Toggle Theme"
+      title="Toggle Theme"
+    >
+      {resolvedTheme === 'dark' ? '🌞' : '🌜'}
+    </button>
+  )
+}
diff --git a/src/concept/adapters/OpenAIService/ConceptEvaluator.ts b/src/concept/adapters/OpenAIService/ConceptEvaluator.ts
index 5cd728a..6bc9475 100644
--- a/src/concept/adapters/OpenAIService/ConceptEvaluator.ts
+++ b/src/concept/adapters/OpenAIService/ConceptEvaluator.ts
@@ -131,6 +131,8 @@ export class ConceptEvaluator {
 
       const problemEvaluation = message.parsed.problem_evaluation
 
+      console.log(JSON.stringify(problemEvaluation, null, 2))
+
       if (problemEvaluation.status === 'not-well-defined') {
         return {
           status: problemEvaluation.status,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 544823a..a285ff3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import formsPlugin from '@tailwindcss/forms'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
+  darkMode: ['selector', '[data-mode="dark"]'],
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',