diff --git a/app/page.tsx b/app/page.tsx
index 8afdbc1..ea5fa74 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 ThemeToggleButton from "@/components/ui/theme-toggle-button"
 
 interface BlogPost {
   slug: string
@@ -98,7 +99,7 @@ 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-zinc-950 dark:via-zinc-900 dark:to-yellow-900/20">
       {/* 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">
@@ -108,6 +109,7 @@ export default function HomePage() {
             </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>
           </div>
+          <ThemeToggleButton />
           <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"
diff --git a/app/submit/page.tsx b/app/submit/page.tsx
index 638f35b..66cde0e 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 ThemeToggleButton from "@/components/ui/theme-toggle-button"
 
 export const metadata = {
   title: "Submit an Article | Stable Viewpoints",
@@ -10,9 +11,9 @@ 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-zinc-950 dark:via-zinc-900 dark:to-yellow-900/20">
       {/* 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-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-4xl mx-auto px-4 py-4 flex justify-between items-center">
           <Link
             href="/"
@@ -21,19 +22,20 @@ export default function SubmitPage() {
             <ArrowLeft className="w-4 h-4 mr-2" />
             Back to Stable Viewpoints
           </Link>
+          <ThemeToggleButton />
         </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="shadow-xl overflow-hidden border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10">
           <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 mb-8 leading-relaxed dark:text-gray-300">
               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
@@ -42,44 +44,44 @@ export default function SubmitPage() {
 
             {/* Topics We Cover */}
             <section className="mb-12">
-              <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
-                <FileText className="w-8 h-8 text-[#228B22]" />
+              <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3 dark:text-white">
+                <FileText className="w-8 h-8 text-[#228B22] " />
                 Topics We Cover
               </h2>
               <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 text-sm dark:text-gray-400">
                     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 text-sm dark:text-gray-400">
                     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 text-sm dark:text-gray-400">
                     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 text-sm dark:text-gray-400">
                     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 text-sm dark:text-gray-400">
                     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 text-sm dark:text-gray-400">
                     Central bank digital currencies (CBDCs), stablecoins, alternative monetary frameworks
                   </p>
                 </div>
@@ -88,8 +90,8 @@ 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">
+              <h2 className="text-3xl font-bold dark:text-gray-50 text-gray-900 mb-6">How to Submit an Article</h2>
+              <p className="text-gray-700 mb-8 leading-relaxed dark:text-gray-200">
                 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 mb-4 dark:text-gray-300">
                   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-300 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 mb-4 dark:text-gray-300">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 mb-4 dark:text-gray-300">
                   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-black/50 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,33 +197,33 @@ 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-black/50 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-black/50 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 list-disc list-inside space-y-2 dark:text-gray-200">
                     <li>
-                      In your forked repository, click on <code className="bg-gray-100 px-1 rounded">public</code>{" "}
+                      In your forked repository, click on <code className="dark:bg-gray-100 bg-gray-700 px-1 dark:text-gray-700 text-gray-200 rounded">public</code>{" "}
                       folder
                     </li>
                     <li>
-                      Then click on <code className="bg-gray-100 px-1 rounded">images</code> folder
+                      Then click on <code className="dark:bg-gray-100 bg-gray-700 dark:text-gray-700 text-gray-200 px-1 rounded">images</code> folder
                     </li>
                     <li>Click "Add file" → "Upload files"</li>
                     <li>Drag and drop your images or click "choose your files"</li>
@@ -230,28 +232,28 @@ Remember to cite your sources and provide value to our readers!`}</pre>
                     </li>
                     <li>
                       <strong>Naming</strong>: Use descriptive names with hyphens (e.g.,{" "}
-                      <code className="bg-gray-100 px-1 rounded">bitcoin-price-chart.jpg</code>)
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded  dark:text-gray-700 text-gray-200">bitcoin-price-chart.jpg</code>)
                     </li>
                     <li>Commit the images with a message like "Add images for [article title]"</li>
                   </ul>
                 </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-black/50 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
+                      Navigate to <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded  dark:text-gray-700 text-gray-200">public</code> →{" "}
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded  dark:text-gray-700 text-gray-200">articles</code> folder
                     </li>
                     <li>Click "Add file" → "Create new file"</li>
                     <li>
-                      Name your file: <code className="bg-gray-100 px-1 rounded">your-article-title.md</code> (use
+                      Name your file: <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded  dark:text-gray-700 text-gray-200">your-article-title.md</code> (use
                       hyphens instead of spaces)
                     </li>
                     <li>Paste your article content in the editor</li>
@@ -259,39 +261,39 @@ 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-black/50 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 list-disc dark:text-gray-200 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>
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">image: "/images/your-header-image.jpg"</code>
                     </li>
                     <li>
                       <strong>Inline images</strong>: Use markdown syntax{" "}
-                      <code className="bg-gray-100 px-1 rounded">![Description](/images/your-image.jpg)</code>
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">![Description](/images/your-image.jpg)</code>
                     </li>
                     <li>
                       <strong>Image paths</strong>: Always start with{" "}
-                      <code className="bg-gray-100 px-1 rounded">/images/</code> (e.g.,{" "}
-                      <code className="bg-gray-100 px-1 rounded">/images/defi-protocol-diagram.png</code>)
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">/images/</code> (e.g.,{" "}
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">/images/defi-protocol-diagram.png</code>)
                     </li>
                   </ul>
                 </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-black/50 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 list-disc list-inside space-y-2 dark:text-gray-200">
                     <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,37 +311,37 @@ 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-black/50 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">
-                    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>
+                  <p className="text-gray-700 dark:text-gray-200">
+                    Go to <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">public</code> →{" "}
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">articles</code> folder, then click on{" "}
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">articles-index.json</code>
                   </p>
                 </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-black/50 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
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">articles</code> array at the top (it will appear first on
                     the website)
                   </p>
                 </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-black/50 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,18 +362,18 @@ 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-black/50 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 list-disc list-inside space-y-2 dark:text-gray-200">
                     <li>Add a comma after the previous entry and ensure proper JSON formatting</li>
                     <li>
                       <strong>Featured articles</strong>: Set{" "}
-                      <code className="bg-gray-100 px-1 rounded">"featured": true</code> if you want your article
+                      <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">"featured": true</code> if you want your article
                       highlighted with a star (ask us first)
                     </li>
                     <li>Commit the changes with a message like "Add [article title] to index"</li>
@@ -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-black/50 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-black/50 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-black/50 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>
@@ -466,7 +468,7 @@ Remember to cite your sources and provide value to our readers!`}</pre>
 
             {/* Image Guidelines */}
             <section className="mb-12">
-              <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
+              <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-6 flex items-center gap-3">
                 <ImageIcon className="w-8 h-8 text-[#228B22]" />
                 Image Guidelines
               </h2>
@@ -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 space-y-2 dark:text-gray-200">
                     <li>
                       <strong>Copyright</strong>: Only use images you own or have permission to use
                     </li>
@@ -511,16 +513,16 @@ 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 space-y-2 dark:text-gray-200">
                   <li>Use descriptive, lowercase names with hyphens</li>
                   <li>
                     <strong>Examples</strong>:{" "}
-                    <code className="bg-gray-100 px-1 rounded">blockchain-network-diagram.jpg</code>,{" "}
-                    <code className="bg-gray-100 px-1 rounded">defi-yield-comparison.png</code>
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">blockchain-network-diagram.jpg</code>,{" "}
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">defi-yield-comparison.png</code>
                   </li>
                   <li>
                     Avoid spaces, special characters, or generic names like{" "}
-                    <code className="bg-gray-100 px-1 rounded">image1.jpg</code>
+                    <code className="dark:bg-gray-100 bg-gray-700 px-1 rounded dark:text-gray-700 text-gray-200">image1.jpg</code>
                   </li>
                 </ul>
               </div>
@@ -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 space-y-2 dark:text-gray-200">
                     <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 mb-6 dark:text-gray-200">
                 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 italic text-center dark:text-gray-100">
                 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/footer.tsx b/components/footer.tsx
index 5401ecb..1ab0bfd 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-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 ">
       <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 font-medium dark:text-gray-300">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..00c9341 100644
--- a/components/pagination.tsx
+++ b/components/pagination.tsx
@@ -47,11 +47,10 @@ export default function Pagination({
         <button
           onClick={() => onPageChange(currentPage - 1)}
           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"
-          }`}
+          className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${hasPrevPage && currentPage > 1
+            ? "bg-white dark:bg-black border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] dark:hover:bg-[#228B22] hover:text-white cursor-pointer"
+            : "bg-gray-200 dark:bg-zinc-800 text-gray-400 cursor-not-allowed"
+            }`}
         >
           <ChevronLeft className="w-4 h-4" />
           Previous
@@ -63,11 +62,10 @@ export default function Pagination({
             <button
               key={pageNum}
               onClick={() => onPageChange(pageNum)}
-              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"
-              }`}
+              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 dark:bg-black border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 dark:hover:bg-zinc-800 cursor-pointer"
+                }`}
             >
               {pageNum}
             </button>
@@ -78,11 +76,10 @@ export default function Pagination({
         <button
           onClick={() => onPageChange(currentPage + 1)}
           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"
-          }`}
+          className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${hasNextPage && currentPage < totalPages
+            ? "bg-white dark:bg-black border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] dark:hover:bg-[#228B22] hover:text-white cursor-pointer"
+            : "bg-gray-200 dark:bg-zinc-800 text-gray-400 cursor-not-allowed"
+            }`}
         >
           Next
           <ChevronRight className="w-4 h-4" />
@@ -139,7 +136,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 dark:bg-gray-900 bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
         >
           Next
           <ChevronRight className="w-4 h-4" />
@@ -147,7 +144,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-gray-900text-gray-400 cursor-not-allowed"
         >
           Next
           <ChevronRight className="w-4 h-4" />
diff --git a/components/ui/theme-toggle-button.tsx b/components/ui/theme-toggle-button.tsx
new file mode 100644
index 0000000..a84b1ee
--- /dev/null
+++ b/components/ui/theme-toggle-button.tsx
@@ -0,0 +1,28 @@
+"use client"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useState } from "react"
+
+function ThemeToggleButton() {
+  const [dark, setDark] = useState<boolean>(true)
+  function toggleTheme() {
+    setDark(pre => !pre)
+    document.querySelector('html')?.classList.toggle('dark')
+  }
+
+
+  return (
+    <button
+      onClick={toggleTheme}
+      title={dark ? "Switch to light mode" : "Switch to dark mode"}
+      className={` border-2 outline-0 rounded-full border-zinc-300/80 bg-slate-50 dark:border-zinc-600 dark:bg-slate-800 p-1.5`}
+    >
+      {!dark ? (
+        <MoonIcon className="text-zinc-400 size-5 " />
+      ) : (
+        <SunIcon className="text-zinc-600 size-5 " />
+      )}
+    </button>
+  )
+}
+
+export default ThemeToggleButton