diff --git a/components/blog-card.tsx b/components/blog-card.tsx
index 47d6438..54559de 100644
--- a/components/blog-card.tsx
+++ b/components/blog-card.tsx
@@ -19,7 +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 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">
+      <article className="flex flex-col h-full bg-white dark:bg-zinc-900 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 && (
           <div className="absolute top-3 right-3 z-20">
@@ -44,13 +44,16 @@ export default function BlogCard({ post }: BlogCardProps) {
         </div>
 
         <div className="flex flex-col flex-grow p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
-            {post.title}
+          {/* Title: ensure visible in dark mode; apply gradient only on hover via child span */}
+          <h2 className="text-xl font-bold mb-3 line-clamp-2 text-gray-900 dark:text-white">
+            <span className="transition-all duration-300 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent dark:group-hover:bg-none dark:group-hover:text-[#91A511]">
+              {post.title}
+            </span>
           </h2>
 
-          <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">{post.excerpt}</p>
 
-          <div className="mt-auto flex items-center justify-between text-sm text-gray-500">
+          <div className="mt-auto flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
             <div className="flex items-center gap-1 group-hover:text-[#228B22] transition-colors">
               <User className="w-4 h-4" />
               <span>{post.author}</span>
diff --git a/package-lock.json b/package-lock.json
index 4cf6033..21c0b8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "lucide-react": "^0.454.0",
         "next": "15.2.4",
         "next-mdx-remote": "^5.0.0",
+        "next-themes": "^0.4.6",
         "react": "^19",
         "react-dom": "^19",
         "serve": "^14.2.4",
@@ -6120,6 +6121,16 @@
         "react": ">=16"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 3044b1a..6391a13 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "lucide-react": "^0.454.0",
     "next": "15.2.4",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.4.6",
     "react": "^19",
     "react-dom": "^19",
     "serve": "^14.2.4",