diff --git a/app/a/[slug]/BlogPostClient.tsx b/app/a/[slug]/BlogPostClient.tsx
index 1cc923c..f58e14f 100644
--- a/app/a/[slug]/BlogPostClient.tsx
+++ b/app/a/[slug]/BlogPostClient.tsx
@@ -5,27 +5,29 @@ import { ArrowLeft, Calendar, User } from "lucide-react"
 import Image from "next/image"
 import { MarkdownRenderer } from "@/lib/markdown-renderer"
 import Footer from "@/components/footer"
+import ThemeToggle from "@/components/theme-toggle"
 import { BlogPost } from "@/lib/blog"
 
 export default function BlogPostPage({ post }: { post: BlogPost }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 dark:from-slate-950 dark:via-emerald-950 dark:to-slate-900 transition-colors">
       {/* Header */}
-      <header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
+      <header className="border-b border-[#228B22]/10 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm transition-colors">
         <div className="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
           <Link
             href="/"
-            className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] transition-colors font-semibold"
+            className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] dark:text-amber-200 dark:hover:text-amber-300 transition-colors font-semibold"
           >
             <ArrowLeft className="w-4 h-4 mr-2" />
             Back to Stable Viewpoints
           </Link>
+          <ThemeToggle />
         </div>
       </header>
 
       {/* Article */}
       <article className="max-w-4xl mx-auto px-4 py-12">
-        <div className="bg-white shadow-xl overflow-hidden border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10">
+        <div className="bg-white dark:bg-slate-900/70 shadow-xl overflow-hidden border border-[#228B22]/10 dark:border-white/10 transition-colors">
           {/* Hero Image */}
           {post.image && (
             <div className="relative h-64 md:h-96">
@@ -50,7 +52,7 @@ export default function BlogPostPage({ post }: { post: BlogPost }) {
               {post.title}
             </h1>
 
-            <div className="flex items-center gap-6 text-gray-600 mb-8 pb-8 border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20">
+            <div className="flex items-center gap-6 text-gray-600 dark:text-gray-300 mb-8 pb-8 border-b border-[#228B22]/15 dark:border-white/10">
               <div className="flex items-center gap-2">
                 <User className="w-4 h-4 text-[#228B22]" />
                 <span className="font-medium">{post.author}</span>
@@ -67,12 +69,12 @@ export default function BlogPostPage({ post }: { post: BlogPost }) {
               </div>
             </div>
 
-            <div className="prose prose-lg max-w-none">
+            <div className="prose prose-lg max-w-none dark:prose-invert">
               <MarkdownRenderer content={post.content} />
             </div>
 
-            <div className="mt-12 pt-8 border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20">
-              <p className="text-sm text-gray-500 italic">
+            <div className="mt-12 pt-8 border-t border-[#228B22]/15 dark:border-white/10">
+              <p className="text-sm text-gray-500 dark:text-gray-400 italic">
                 © {new Date(post.date).getFullYear()} {post.author}. All rights reserved.
               </p>
             </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 192fb19..eef5ad5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next"
 import { Inter, Playfair_Display } from "next/font/google"
 import "./globals.css"
 import { getBaseUrl, getAbsoluteUrl, getOgImageUrl } from "@/lib/metadata"
+import { ThemeProvider } from "@/components/theme-provider"
 
 const inter = Inter({ subsets: ["latin"] })
 const playfair = Playfair_Display({
@@ -76,8 +77,10 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={`${inter.className} ${playfair.variable}`}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} ${playfair.variable}`}>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index 8afdbc1..429356e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,7 @@ import BlogCard from "@/components/blog-card"
 import Pagination from "@/components/pagination"
 import Link from "next/link"
 import Footer from "@/components/footer"
+import ThemeToggle from "@/components/theme-toggle"
 
 interface BlogPost {
   slug: string
@@ -76,10 +77,10 @@ export default function HomePage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
+      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 dark:from-slate-950 dark:via-emerald-950 dark:to-slate-900 transition-colors flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#228B22] mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading articles...</p>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#228B22] dark:border-amber-300 mx-auto mb-4"></div>
+          <p className="text-gray-600 dark:text-gray-300">Loading articles...</p>
         </div>
       </div>
     )
@@ -87,9 +88,9 @@ export default function HomePage() {
 
   if (!paginatedData) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
+      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 dark:from-slate-950 dark:via-emerald-950 dark:to-slate-900 transition-colors flex items-center justify-center">
         <div className="text-center">
-          <p className="text-gray-600">Failed to load articles.</p>
+          <p className="text-gray-600 dark:text-gray-300">Failed to load articles.</p>
         </div>
       </div>
     )
@@ -98,23 +99,25 @@ export default function HomePage() {
   const { posts, totalPages, hasNextPage, hasPrevPage } = paginatedData
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 dark:from-slate-950 dark:via-emerald-950 dark:to-slate-900 transition-colors">
       {/* Header */}
-      <header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
-        <div className="max-w-6xl mx-auto px-4 py-4 md:py-6 flex justify-between items-center gap-4">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2 truncate">
+      <header className="border-b border-[#228B22]/10 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm transition-colors">
+        <div className="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
+          <div>
+            <h1 className="text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2">
               Stable Viewpoints
             </h1>
-            <p className="text-gray-600 dark:text-gray-300 mt-1 md:mt-2 text-sm sm:text-base md:text-lg truncate">Independent Articles about Stability</p>
+            <p className="text-gray-600 dark:text-gray-300 mt-2 text-lg">Independent Articles about Stability</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <ThemeToggle />
+            <Link
+              href="/submit"
+              className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-6 py-3 font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+            >
+              Submit an Article
+            </Link>
           </div>
-          <Link
-            href="/submit"
-            className="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-3 sm:px-4 md:px-6 py-2 md:py-3 text-sm md:text-base font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 rounded whitespace-nowrap"
-          >
-            <span className="hidden sm:inline">Submit an Article</span>
-            <span className="sm:hidden">Submit</span>
-          </Link>
         </div>
       </header>
 
diff --git a/app/submit/page.tsx b/app/submit/page.tsx
index 638f35b..cdb65ec 100644
--- a/app/submit/page.tsx
+++ b/app/submit/page.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link"
 import { ArrowLeft, Upload, FileText, ImageIcon, CheckCircle, Users, MessageCircle } from "lucide-react"
 import Footer from "@/components/footer"
+import ThemeToggle from "@/components/theme-toggle"
 
 export const metadata = {
   title: "Submit an Article | Stable Viewpoints",
@@ -10,30 +11,31 @@ export const metadata = {
 
 export default function SubmitPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 dark:from-slate-950 dark:via-emerald-950 dark:to-slate-900 transition-colors text-gray-900 dark:text-gray-100">
       {/* Header */}
-      <header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
+      <header className="border-b border-[#228B22]/10 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm transition-colors">
         <div className="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
           <Link
             href="/"
-            className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] transition-colors font-semibold"
+            className="inline-flex items-center text-[#228B22] hover:text-[#3E921E] dark:text-amber-200 dark:hover:text-amber-300 transition-colors font-semibold"
           >
             <ArrowLeft className="w-4 h-4 mr-2" />
             Back to Stable Viewpoints
           </Link>
+          <ThemeToggle />
         </div>
       </header>
 
       {/* Main Content */}
       <main className="max-w-4xl mx-auto px-4 py-12">
-        <div className="bg-white shadow-xl overflow-hidden border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10">
+        <div className="bg-white dark:bg-slate-950/50 shadow-xl overflow-hidden border border-[#228B22]/10 dark:border-white/10 transition-colors">
           <div className="p-8 md:p-12">
             {/* Title */}
             <h1 className="text-4xl md:text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#91A511] to-[#E4B905] bg-clip-text text-transparent mb-6 leading-tight pb-2">
               Submit an Article
             </h1>
 
-            <p className="text-gray-700 mb-8 leading-relaxed">
+            <p className="text-gray-700 dark:text-gray-200 mb-8 leading-relaxed">
               Stable Viewpoints is a digital publication focused on thoughtful perspectives about stability in our
               rapidly changing world. We explore how emerging technologies can be used to bring greater stability to the
               world. Our mission is to provide well-researched, balanced viewpoints on issues that matter for creating a
@@ -49,37 +51,37 @@ export default function SubmitPage() {
               <div className="grid md:grid-cols-2 gap-4">
                 <div className="bg-gradient-to-r from-[#228B22]/5 to-[#91A511]/5 p-4 rounded-lg border border-[#228B22]/10">
                   <h3 className="font-semibold text-[#228B22] mb-2">Blockchain & Cryptocurrencies</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     Digital assets, blockchain technology, cryptocurrency adoption, regulatory frameworks
                   </p>
                 </div>
                 <div className="bg-gradient-to-r from-[#91A511]/5 to-[#ADAC0D]/5 p-4 rounded-lg border border-[#91A511]/10">
                   <h3 className="font-semibold text-[#91A511] mb-2">Artificial Intelligence</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     AI governance, machine learning applications, ethical AI development, automation impact
                   </p>
                 </div>
                 <div className="bg-gradient-to-r from-[#ADAC0D]/5 to-[#C8B209]/5 p-4 rounded-lg border border-[#ADAC0D]/10">
                   <h3 className="font-semibold text-[#ADAC0D] mb-2">Economic & Financial Stability</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     Monetary policy, financial markets, economic resilience, inflation dynamics
                   </p>
                 </div>
                 <div className="bg-gradient-to-r from-[#C8B209]/5 to-[#E4B905]/5 p-4 rounded-lg border border-[#C8B209]/10">
                   <h3 className="font-semibold text-[#C8B209] mb-2">Decentralized Finance (DeFi)</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     Protocol analysis, yield farming, liquidity provision, DeFi security
                   </p>
                 </div>
                 <div className="bg-gradient-to-r from-[#E4B905]/5 to-[#FFBF00]/5 p-4 rounded-lg border border-[#E4B905]/10">
                   <h3 className="font-semibold text-[#E4B905] mb-2">Technology & Society</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     Digital transformation, cybersecurity, privacy rights, technological disruption
                   </p>
                 </div>
                 <div className="bg-gradient-to-r from-[#FFBF00]/5 to-[#FFC517]/5 p-4 rounded-lg border border-[#FFBF00]/10">
                   <h3 className="font-semibold text-[#FFBF00] mb-2">Monetary Systems</h3>
-                  <p className="text-gray-600 text-sm">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm">
                     Central bank digital currencies (CBDCs), stablecoins, alternative monetary frameworks
                   </p>
                 </div>
@@ -89,7 +91,7 @@ export default function SubmitPage() {
             {/* How to Submit */}
             <section className="mb-12">
               <h2 className="text-3xl font-bold text-gray-900 mb-6">How to Submit an Article</h2>
-              <p className="text-gray-700 mb-8 leading-relaxed">
+              <p className="text-gray-700 dark:text-gray-200 mb-8 leading-relaxed">
                 We welcome contributions from writers, researchers, and experts who share our commitment to thoughtful,
                 well-researched content. Here's how to submit your article:
               </p>
@@ -102,10 +104,10 @@ export default function SubmitPage() {
                   </span>
                   Prepare Your Article
                 </h3>
-                <p className="text-gray-700 mb-4">
+                <p className="text-gray-700 dark:text-gray-200 mb-4">
                   Your article should be written in Markdown format (.md file) and include:
                 </p>
-                <ul className="list-disc list-inside text-gray-700 space-y-2">
+                <ul className="list-disc list-inside text-gray-700 dark:text-gray-200 space-y-2">
                   <li>
                     <strong>Title</strong>: Clear and descriptive
                   </li>
@@ -135,7 +137,7 @@ export default function SubmitPage() {
                   </span>
                   Format Your Article
                 </h3>
-                <p className="text-gray-700 mb-4">Create a file with this structure:</p>
+                <p className="text-gray-700 dark:text-gray-200 mb-4">Create a file with this structure:</p>
                 <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
                   <pre className="text-sm">{`---
 title: "Your Article Title Here"
@@ -171,19 +173,19 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                   </span>
                   Submit your Article to the GitHub Repo
                 </h3>
-                <p className="text-gray-700 mb-4">
+                <p className="text-gray-700 dark:text-gray-200 mb-4">
                   Don't worry if you're new to GitHub - here's a simple step-by-step guide:
                 </p>
 
                 {/* Sub-step 3.1 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       1
                     </span>
                     Go to our repository
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     Visit{" "}
                     <Link
                       href="https://github.com/StabilityNexus/StableViewpoints"
@@ -195,27 +197,27 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 3.2 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       2
                     </span>
                     Fork the repository
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     Click the "Fork" button in the top-right corner. This creates your own copy of the project.
                   </p>
                 </div>
 
                 {/* Sub-step 3.3 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       3
                     </span>
                     Add your images
                   </h4>
-                  <ul className="text-gray-700 list-disc list-inside space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 list-disc list-inside space-y-2">
                     <li>
                       In your forked repository, click on <code className="bg-gray-100 px-1 rounded">public</code>{" "}
                       folder
@@ -237,14 +239,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 3.4 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       4
                     </span>
                     Add your article
                   </h4>
-                  <ul className="text-gray-700 list-disc list-inside space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 list-disc list-inside space-y-2">
                     <li>
                       Navigate to <code className="bg-gray-100 px-1 rounded">public</code> →{" "}
                       <code className="bg-gray-100 px-1 rounded">articles</code> folder
@@ -259,14 +261,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 3.5 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       5
                     </span>
                     Use images in your article
                   </h4>
-                  <ul className="text-gray-700 list-disc list-inside space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 list-disc list-inside space-y-2">
                     <li>
                       <strong>Header image</strong>: Set in the frontmatter as{" "}
                       <code className="bg-gray-100 px-1 rounded">image: "/images/your-header-image.jpg"</code>
@@ -284,14 +286,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 3.6 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#ADAC0D]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#ADAC0D]/20">
                   <h4 className="text-lg font-semibold text-[#ADAC0D] mb-3 flex items-center gap-3">
                     <span className="bg-[#ADAC0D] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       6
                     </span>
                     Commit your changes
                   </h4>
-                  <ul className="text-gray-700 list-disc list-inside space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 list-disc list-inside space-y-2">
                     <li>Scroll down to "Commit new file"</li>
                     <li>Add a commit message like "Add article: Your Article Title"</li>
                     <li>Click "Commit new file"</li>
@@ -309,14 +311,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </h3>
 
                 {/* Sub-step 4.1 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#C8B209]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#C8B209]/20">
                   <h4 className="text-lg font-semibold text-[#C8B209] mb-3 flex items-center gap-3">
                     <span className="bg-[#C8B209] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       1
                     </span>
                     Navigate to the articles index
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     Go to <code className="bg-gray-100 px-1 rounded">public</code> →{" "}
                     <code className="bg-gray-100 px-1 rounded">articles</code> folder, then click on{" "}
                     <code className="bg-gray-100 px-1 rounded">articles-index.json</code>
@@ -324,14 +326,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 4.2 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#C8B209]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#C8B209]/20">
                   <h4 className="text-lg font-semibold text-[#C8B209] mb-3 flex items-center gap-3">
                     <span className="bg-[#C8B209] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       2
                     </span>
                     Edit the file
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     Click the pencil icon to edit the file, then add your article information to the{" "}
                     <code className="bg-gray-100 px-1 rounded">articles</code> array at the top (it will appear first on
                     the website)
@@ -339,7 +341,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 4.3 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#C8B209]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#C8B209]/20">
                   <h4 className="text-lg font-semibold text-[#C8B209] mb-3 flex items-center gap-3">
                     <span className="bg-[#C8B209] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       3
@@ -360,14 +362,14 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </div>
 
                 {/* Sub-step 4.4 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#C8B209]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#C8B209]/20">
                   <h4 className="text-lg font-semibold text-[#C8B209] mb-3 flex items-center gap-3">
                     <span className="bg-[#C8B209] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       4
                     </span>
                     Important formatting notes
                   </h4>
-                  <ul className="text-gray-700 list-disc list-inside space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 list-disc list-inside space-y-2">
                     <li>Add a comma after the previous entry and ensure proper JSON formatting</li>
                     <li>
                       <strong>Featured articles</strong>: Set{" "}
@@ -389,41 +391,41 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 </h3>
 
                 {/* Sub-step 5.1 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#E4B905]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#E4B905]/20">
                   <h4 className="text-lg font-semibold text-[#E4B905] mb-3 flex items-center gap-3">
                     <span className="bg-[#E4B905] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       1
                     </span>
                     Start the pull request
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     You'll see a banner saying "This branch is ahead". Click "Contribute" → "Open pull request"
                   </p>
                 </div>
 
                 {/* Sub-step 5.2 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#E4B905]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#E4B905]/20">
                   <h4 className="text-lg font-semibold text-[#E4B905] mb-3 flex items-center gap-3">
                     <span className="bg-[#E4B905] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       2
                     </span>
                     Add details
                   </h4>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-200">
                     Add a title and description for your submission. <strong>Include</strong>: List of images you've
                     added and their purpose
                   </p>
                 </div>
 
                 {/* Sub-step 5.3 */}
-                <div className="mb-6 p-4 bg-white/50 rounded-lg border border-[#E4B905]/20">
+                <div className="mb-6 p-4 bg-white/50 dark:bg-slate-900/40 rounded-lg border border-[#E4B905]/20">
                   <h4 className="text-lg font-semibold text-[#E4B905] mb-3 flex items-center gap-3">
                     <span className="bg-[#E4B905] text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                       3
                     </span>
                     Submit
                   </h4>
-                  <p className="text-gray-700">Click "Create pull request" to submit your article for review</p>
+                  <p className="text-gray-700 dark:text-gray-200">Click "Create pull request" to submit your article for review</p>
                 </div>
               </div>
 
@@ -438,25 +440,25 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                 <div className="space-y-3">
                   <div className="flex items-center gap-3">
                     <CheckCircle className="w-5 h-5 text-[#228B22]" />
-                    <span className="text-gray-700">
+                    <span className="text-gray-700 dark:text-gray-200">
                       <strong>Initial Review</strong>: We'll review your submission as soon as possible
                     </span>
                   </div>
                   <div className="flex items-center gap-3">
                     <MessageCircle className="w-5 h-5 text-[#91A511]" />
-                    <span className="text-gray-700">
+                    <span className="text-gray-700 dark:text-gray-200">
                       <strong>Feedback</strong>: If changes are needed, we'll provide constructive feedback
                     </span>
                   </div>
                   <div className="flex items-center gap-3">
                     <Upload className="w-5 h-5 text-[#E4B905]" />
-                    <span className="text-gray-700">
+                    <span className="text-gray-700 dark:text-gray-200">
                       <strong>Publication</strong>: Once approved, your article will be published on the site
                     </span>
                   </div>
                   <div className="flex items-center gap-3">
                     <Users className="w-5 h-5 text-[#FFBF00]" />
-                    <span className="text-gray-700">
+                    <span className="text-gray-700 dark:text-gray-200">
                       <strong>Promotion</strong>: We'll share your article on our social media channels
                     </span>
                   </div>
@@ -474,7 +476,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
               <div className="grid md:grid-cols-2 gap-6">
                 <div className="bg-gradient-to-r from-[#228B22]/5 to-[#91A511]/5 p-6 rounded-lg border border-[#228B22]/10">
                   <h3 className="text-xl font-semibold text-[#228B22] mb-4">Technical Requirements</h3>
-                  <ul className="text-gray-700 space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 space-y-2">
                     <li>
                       <strong>Formats</strong>: JPG, PNG, or WebP
                     </li>
@@ -492,7 +494,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
 
                 <div className="bg-gradient-to-r from-[#91A511]/5 to-[#ADAC0D]/5 p-6 rounded-lg border border-[#91A511]/10">
                   <h3 className="text-xl font-semibold text-[#91A511] mb-4">Content Guidelines</h3>
-                  <ul className="text-gray-700 space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 space-y-2">
                     <li>
                       <strong>Copyright</strong>: Only use images you own or have permission to use
                     </li>
@@ -511,7 +513,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
 
               <div className="mt-6 p-6 bg-gradient-to-r from-[#ADAC0D]/5 to-[#C8B209]/5 rounded-lg border border-[#ADAC0D]/10">
                 <h3 className="text-xl font-semibold text-[#ADAC0D] mb-4">Naming Convention</h3>
-                <ul className="text-gray-700 space-y-2">
+                <ul className="text-gray-700 dark:text-gray-200 space-y-2">
                   <li>Use descriptive, lowercase names with hyphens</li>
                   <li>
                     <strong>Examples</strong>:{" "}
@@ -533,7 +535,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
               <div className="grid md:grid-cols-2 gap-6">
                 <div className="bg-gradient-to-r from-[#E4B905]/5 to-[#FFBF00]/5 p-6 rounded-lg border border-[#E4B905]/10">
                   <h3 className="text-xl font-semibold text-[#E4B905] mb-4">Content Standards</h3>
-                  <ul className="text-gray-700 space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 space-y-2">
                     <li>
                       <strong>Original work only</strong> - no plagiarism or previously published content
                     </li>
@@ -551,7 +553,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
 
                 <div className="bg-gradient-to-r from-[#FFBF00]/5 to-[#FFC517]/5 p-6 rounded-lg border border-[#FFBF00]/10">
                   <h3 className="text-xl font-semibold text-[#FFBF00] mb-4">Technical Requirements</h3>
-                  <ul className="text-gray-700 space-y-2">
+                  <ul className="text-gray-700 dark:text-gray-200 space-y-2">
                     <li>
                       <strong>Markdown format</strong> (.md file)
                     </li>
@@ -569,7 +571,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
             {/* Contact */}
             <section className="mb-8">
               <h2 className="text-3xl font-bold text-gray-900 mb-6">Questions?</h2>
-              <p className="text-gray-700 mb-6">
+              <p className="text-gray-700 dark:text-gray-200 mb-6">
                 If you have questions about the submission process or want to discuss a potential article idea, contact
                 us via:
               </p>
@@ -596,7 +598,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
 
             {/* Footer Message */}
             <div className="border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 pt-8">
-              <p className="text-gray-600 italic text-center">
+              <p className="text-gray-600 dark:text-gray-300 italic text-center">
                 Stable Viewpoints is committed to fostering thoughtful dialogue about the challenges and opportunities
                 of our time. We believe that through careful analysis and open discussion, we can work together toward a
                 more stable future.
diff --git a/components/blog-card.tsx b/components/blog-card.tsx
index a74b383..18d9053 100644
--- a/components/blog-card.tsx
+++ b/components/blog-card.tsx
@@ -19,6 +19,7 @@ interface BlogCardProps {
 export default function BlogCard({ post }: BlogCardProps) {
   return (
     <Link href={`/a/${post.slug}`} className="group h-full">
+      <article className="flex flex-col h-full bg-white/95 dark:bg-slate-900/80 shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-[#228B22]/10 dark:border-white/10 relative rounded-lg">
       <article className="flex flex-col h-full bg-white dark:bg-gray-800 shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
 
         {post.featured && (
diff --git a/components/footer.tsx b/components/footer.tsx
index 5401ecb..75688a5 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -24,18 +24,18 @@ const LinkedInIcon = () => (
 
 export default function Footer() {
   return (
-    <footer className="border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
+    <footer className="border-t border-[#228B22]/10 dark:border-white/10 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 backdrop-blur-sm mt-20 transition-colors">
       <div className="max-w-6xl mx-auto px-4 py-12">
         <div className="flex flex-col md:flex-row justify-between items-center gap-6">
           <div className="text-center md:text-left">
             <h3 className="text-2xl font-bold font-playfair bg-gradient-to-r from-[#228B22] to-[#E4B905] bg-clip-text text-transparent mb-2">
               Stable Viewpoints
             </h3>
-            <p className="text-gray-600">Fostering thoughtful dialogue toward a more stable future.</p>
+            <p className="text-gray-600 dark:text-gray-300">Fostering thoughtful dialogue toward a more stable future.</p>
           </div>
 
           <div className="flex items-center gap-6">
-            <span className="text-gray-600 font-medium">Connect with us:</span>
+            <span className="text-gray-600 dark:text-gray-300 font-medium">Connect with us:</span>
             <div className="flex items-center gap-4">
               <Link
                 href="https://t.me/StabilityNexus"
diff --git a/components/pagination.tsx b/components/pagination.tsx
index d3da3ec..f80ed57 100644
--- a/components/pagination.tsx
+++ b/components/pagination.tsx
@@ -49,8 +49,8 @@ export default function Pagination({
           disabled={!hasPrevPage || currentPage <= 1}
           className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
             hasPrevPage && currentPage > 1
-              ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
-              : "bg-gray-100 text-gray-400 cursor-not-allowed"
+              ? "bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22] hover:text-white dark:hover:bg-[#3E921E] dark:hover:text-white cursor-pointer"
+              : "bg-gray-100 dark:bg-slate-800 text-gray-400 dark:text-gray-500 cursor-not-allowed"
           }`}
         >
           <ChevronLeft className="w-4 h-4" />
@@ -66,7 +66,7 @@ export default function Pagination({
               className={`px-4 py-2 transition-colors ${
                 pageNum === currentPage
                   ? "bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default"
-                  : "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer"
+                  : "bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22]/10 dark:hover:bg-slate-800 cursor-pointer"
               }`}
             >
               {pageNum}
@@ -80,8 +80,8 @@ export default function Pagination({
           disabled={!hasNextPage || currentPage >= totalPages}
           className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
             hasNextPage && currentPage < totalPages
-              ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
-              : "bg-gray-100 text-gray-400 cursor-not-allowed"
+              ? "bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22] hover:text-white dark:hover:bg-[#3E921E] dark:hover:text-white cursor-pointer"
+              : "bg-gray-100 dark:bg-slate-800 text-gray-400 dark:text-gray-500 cursor-not-allowed"
           }`}
         >
           Next
@@ -98,7 +98,7 @@ export default function Pagination({
       {hasPrevPage && currentPage > 1 ? (
         <Link
           href={`/?page=${currentPage - 1}`}
-          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
+          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22] hover:text-white dark:hover:bg-[#3E921E] dark:hover:text-white cursor-pointer"
         >
           <ChevronLeft className="w-4 h-4" />
           Previous
@@ -106,7 +106,7 @@ export default function Pagination({
       ) : (
         <button
           disabled
-          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed"
+          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 dark:bg-slate-800 text-gray-400 dark:text-gray-500 cursor-not-allowed"
         >
           <ChevronLeft className="w-4 h-4" />
           Previous
@@ -127,7 +127,7 @@ export default function Pagination({
             <Link
               key={pageNum}
               href={`/?page=${pageNum}`}
-              className="px-4 py-2 transition-colors bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer"
+              className="px-4 py-2 transition-colors bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22]/10 dark:hover:bg-slate-800 cursor-pointer"
             >
               {pageNum}
             </Link>
@@ -139,7 +139,7 @@ export default function Pagination({
       {hasNextPage && currentPage < totalPages ? (
         <Link
           href={`/?page=${currentPage + 1}`}
-          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
+          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white dark:bg-slate-900 border border-[#228B22]/20 dark:border-white/20 text-[#228B22] dark:text-amber-200 hover:bg-[#228B22] hover:text-white dark:hover:bg-[#3E921E] dark:hover:text-white cursor-pointer"
         >
           Next
           <ChevronRight className="w-4 h-4" />
@@ -147,7 +147,7 @@ export default function Pagination({
       ) : (
         <button
           disabled
-          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed"
+          className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 dark:bg-slate-800 text-gray-400 dark:text-gray-500 cursor-not-allowed"
         >
           Next
           <ChevronRight className="w-4 h-4" />
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 55c2f6e..d8259ef 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,11 +1,57 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import {
-  ThemeProvider as NextThemesProvider,
-  type ThemeProviderProps,
-} from 'next-themes'
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+type Theme = "light" | "dark"
+
+interface ThemeContextValue {
+  theme: Theme
+  toggleTheme: () => void
+  setTheme: (theme: Theme) => void
+  isReady: boolean
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>("light")
+  const [isReady, setIsReady] = useState(false)
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("sv-theme") as Theme | null
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const initialTheme: Theme = storedTheme ?? (prefersDark ? "dark" : "light")
+    setThemeState(initialTheme)
+    setIsReady(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isReady) return
+    document.documentElement.classList.toggle("dark", theme === "dark")
+    localStorage.setItem("sv-theme", theme)
+  }, [theme, isReady])
+
+  const setTheme = (value: Theme) => setThemeState(value)
+  const toggleTheme = () => setThemeState((prev) => (prev === "dark" ? "light" : "dark"))
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        toggleTheme,
+        setTheme,
+        isReady,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
 }
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..74eccb7
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "@/components/theme-provider"
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme, isReady } = useTheme()
+  const isDark = theme === "dark"
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      disabled={!isReady}
+      className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-[#228B22]/30 bg-white/90 text-[#228B22] transition-all duration-300 hover:scale-105 hover:border-[#228B22]/60 hover:bg-[#228B22]/10 hover:text-[#228B22] disabled:opacity-60 dark:border-white/20 dark:bg-slate-800/70 dark:text-amber-200 dark:hover:bg-slate-700/60 dark:hover:text-white"
+    >
+      {isDark ? <Sun className="h-5 w-5" aria-hidden="true" /> : <Moon className="h-5 w-5" aria-hidden="true" />}
+    </button>
+  )
+}
diff --git a/lib/markdown-renderer.tsx b/lib/markdown-renderer.tsx
index 5a1d63a..acfd8b7 100644
--- a/lib/markdown-renderer.tsx
+++ b/lib/markdown-renderer.tsx
@@ -11,9 +11,18 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
     let html = text
 
     // Headers
-    html = html.replace(/^### (.*$)/gim, '<h3 class="text-xl font-medium text-gray-800 mt-5 mb-2">$1</h3>')
-    html = html.replace(/^## (.*$)/gim, '<h2 class="text-2xl font-semibold text-gray-800 mt-6 mb-3">$1</h2>')
-    html = html.replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold text-gray-900 mt-8 mb-4">$1</h1>')
+    html = html.replace(
+      /^### (.*$)/gim,
+      '<h3 class="text-xl font-medium text-gray-800 dark:text-gray-100 mt-5 mb-2">$1</h3>',
+    )
+    html = html.replace(
+      /^## (.*$)/gim,
+      '<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mt-6 mb-3">$1</h2>',
+    )
+    html = html.replace(
+      /^# (.*$)/gim,
+      '<h1 class="text-3xl font-bold text-white-900 dark:text-white mt-8 mb-4">$1</h1>',
+    )
 
     // Bold and italic
     html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
@@ -22,11 +31,14 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
     // Code blocks
     html = html.replace(
       /```([\s\S]*?)```/g,
-      '<pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4"><code class="text-sm">$1</code></pre>'
+      '<pre class="bg-gray-100 dark:bg-slate-800 p-4 rounded-lg overflow-x-auto my-4"><code class="text-sm text-gray-800 dark:text-gray-100">$1</code></pre>',
     )
 
     // Inline code
-    html = html.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 py-0.5 rounded text-sm">$1</code>')
+    html = html.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-gray-100 dark:bg-slate-800 px-1 py-0.5 rounded text-sm text-gray-800 dark:text-gray-100">$1</code>',
+    )
 
     // Images - handle base path for GitHub Pages
     html = html.replace(
@@ -47,7 +59,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
     // Blockquotes
     html = html.replace(
       /^> (.*$)/gim,
-      '<blockquote class="border-l-4 border-[#FFBF00] pl-4 italic text-gray-600 my-6 bg-yellow-50 py-2">$1</blockquote>',
+      '<blockquote class="border-l-4 border-[#FFBF00] pl-4 italic text-gray-600 dark:text-gray-300 my-6 bg-yellow-50 dark:bg-slate-900/50 py-2">$1</blockquote>',
     )
 
     // Horizontal rules
@@ -65,13 +77,13 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
 
       if (trimmed.startsWith("- ")) {
         if (!inList) {
-          processedLines.push('<ul class="list-disc list-inside mb-4 text-gray-700 space-y-1">')
+          processedLines.push('<ul class="list-disc list-inside mb-4 text-gray-700 dark:text-gray-200 space-y-1">')
           inList = true
         }
         processedLines.push(`<li class="mb-1">${trimmed.substring(2)}</li>`)
       } else if (trimmed.match(/^\d+\. /)) {
         if (!inOrderedList) {
-          processedLines.push('<ol class="list-decimal list-inside mb-4 text-gray-700 space-y-1">')
+          processedLines.push('<ol class="list-decimal list-inside mb-4 text-gray-700 dark:text-gray-200 space-y-1">')
           inOrderedList = true
         }
         processedLines.push(`<li class="mb-1">${trimmed.replace(/^\d+\. /, '')}</li>`)
@@ -118,11 +130,16 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
       ) {
         return trimmed
       }
-      return `<p class="text-gray-700 leading-relaxed mb-4">${trimmed}</p>`
+      return `<p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">${trimmed}</p>`
     })
 
     return finalProcessedLines.join("\n")
   }
 
-  return <div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
+  return (
+    <div
+      className="prose prose-lg max-w-none dark:prose-invert"
+      dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+    />
+  )
 }