diff --git a/package-lock.json b/package-lock.json
index 4029cbf..e97ea01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -84,6 +84,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.7.tgz",
       "integrity": "sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.25.7",
@@ -1276,6 +1277,7 @@
       "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1329,6 +1331,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.1.tgz",
       "integrity": "sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.8.1",
         "@typescript-eslint/types": "8.8.1",
@@ -1545,6 +1548,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1728,6 +1732,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001663",
         "electron-to-chromium": "^1.5.28",
@@ -2011,6 +2016,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz",
       "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.11.0",
@@ -3096,6 +3102,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -3263,6 +3270,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3738,6 +3746,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3819,6 +3828,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
       "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/components/Blog/Blog.tsx b/src/components/Blog/Blog.tsx
index 8d58193..e508277 100644
--- a/src/components/Blog/Blog.tsx
+++ b/src/components/Blog/Blog.tsx
@@ -86,7 +86,7 @@ export const Blog: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
           <p className="text-gray-600">Loading blog posts...</p>
@@ -98,11 +98,11 @@ export const Blog: React.FC = () => {
   if (error) {
     return (
       <div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
-        <div className="text-center bg-white p-8 rounded-lg shadow-lg max-w-md">
+        <div className="text-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md">
           <div className="text-red-500 text-4xl mb-4">⚠️</div>
-          <h2 className="text-xl font-bold text-gray-900 mb-2">Failed to Load Blog Posts</h2>
-          <p className="text-gray-600 mb-4">{error}</p>
-          <button 
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Failed to Load Blog Posts</h2>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">{error}</p>
+          <button
             onClick={() => window.location.reload()}
             className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"
           >
@@ -115,16 +115,16 @@ export const Blog: React.FC = () => {
 
   if (selectedPost) {
     return (
-      <div className="min-h-screen bg-gray-50 py-8">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
           <button
             onClick={() => setSelectedPost(null)}
-            className="inline-flex items-center space-x-2 text-gray-600 hover:text-purple-600 transition-colors mb-8"
+            className="inline-flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors mb-8"
           >
             <span>← Back to Blog</span>
           </button>
 
-          <article className="bg-white rounded-2xl shadow-sm overflow-hidden">
+          <article className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
             <div className="relative h-64 bg-gradient-to-br from-purple-600 to-blue-600">
               <div className="absolute inset-0 bg-black/20"></div>
               <div className="relative h-full flex items-center justify-center">
@@ -139,8 +139,8 @@ export const Blog: React.FC = () => {
               </div>
             </div>
 
-            <div className="px-6 py-6 border-b border-gray-200">
-              <div className="flex items-center space-x-6 text-sm text-gray-600">
+            <div className="px-6 py-6 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center space-x-6 text-sm text-gray-600 dark:text-gray-300">
                 <div className="flex items-center space-x-2">
                   <User className="h-4 w-4" />
                   <span className="font-medium">{selectedPost.author}</span>
@@ -168,13 +168,13 @@ export const Blog: React.FC = () => {
             </div>
 
             <div className="px-6 py-8">
-              <div className="prose prose-lg max-w-none">
-                <p className="text-gray-700 leading-relaxed">
+              <div className="prose prose-lg max-w-none dark:prose-invert">
+                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
                   {selectedPost.content}
                 </p>
-                <p className="text-gray-700 leading-relaxed mt-6">
-                  This approach has helped countless developers transition from tutorial hell to building 
-                  production-ready applications. The journey isn't always smooth, but every challenge 
+                <p className="text-gray-700 dark:text-gray-300 leading-relaxed mt-6">
+                  This approach has helped countless developers transition from tutorial hell to building
+                  production-ready applications. The journey isn't always smooth, but every challenge
                   you overcome makes you a stronger developer.
                 </p>
               </div>
@@ -186,15 +186,15 @@ export const Blog: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
             Community Blog
           </h1>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Stories, insights, and tutorials celebrating diversity, inclusion, and positive collaboration 
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Stories, insights, and tutorials celebrating diversity, inclusion, and positive collaboration
             in technology. Every voice matters, every story has value.
           </p>
         </div>
@@ -208,22 +208,21 @@ export const Blog: React.FC = () => {
               placeholder="Search posts..."
               value={searchTerm}
               onChange={(e) => handleSearch(e.target.value)}
-              className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
             />
           </div>
 
           <div className="flex items-center justify-center flex-wrap gap-2">
             <div className="flex items-center space-x-2 mr-4">
-              <Tag className="h-4 w-4 text-gray-500" />
-              <span className="text-sm font-medium text-gray-700">Filter by tag:</span>
+              <Tag className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by tag:</span>
             </div>
             <button
               onClick={() => handleTagFilter('all')}
-              className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
-                selectedTag === 'all'
+              className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTag === 'all'
                   ? 'bg-purple-600 text-white'
-                  : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-              }`}
+                  : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
+                }`}
             >
               All
             </button>
@@ -231,11 +230,10 @@ export const Blog: React.FC = () => {
               <button
                 key={tag}
                 onClick={() => handleTagFilter(tag)}
-                className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
-                  selectedTag === tag
+                className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTag === tag
                     ? 'bg-purple-600 text-white'
-                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-                }`}
+                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
+                  }`}
               >
                 {tag}
               </button>
@@ -246,9 +244,9 @@ export const Blog: React.FC = () => {
         {/* Posts Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {filteredPosts.map(post => (
-            <article 
+            <article
               key={post.id}
-              className="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden cursor-pointer group"
+              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden cursor-pointer group"
               onClick={() => setSelectedPost(post)}
             >
               <div className="relative h-24 bg-gradient-to-br from-purple-100 to-blue-100 overflow-hidden">
@@ -269,15 +267,15 @@ export const Blog: React.FC = () => {
               </div>
 
               <div className="p-6">
-                <h2 className="text-lg font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors">
+                <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                   {post.title}
                 </h2>
-                
-                <p className="text-gray-600 mb-4">
+
+                <p className="text-gray-600 dark:text-gray-300 mb-4">
                   {post.summary}
                 </p>
 
-                <div className="flex items-center justify-between text-sm text-gray-500 mb-4">
+                <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-4">
                   <div className="flex items-center space-x-4">
                     <div className="flex items-center space-x-1">
                       <User className="h-4 w-4" />
@@ -298,7 +296,7 @@ export const Blog: React.FC = () => {
                   {post.tags.slice(0, 3).map((tag, index) => (
                     <span
                       key={index}
-                      className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium"
+                      className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-md font-medium"
                     >
                       #{tag}
                     </span>
@@ -314,37 +312,37 @@ export const Blog: React.FC = () => {
         </div>
 
         {/* Code of Conduct Reminder */}
-        <div className="mt-16 bg-green-50 border border-green-200 rounded-2xl p-8">
+        <div className="mt-16 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-2xl p-8">
           <div className="text-center mb-6">
-            <h2 className="text-2xl font-bold text-green-900 mb-4">Our Community Values</h2>
-            <p className="text-green-800 max-w-3xl mx-auto">
-              All blog content and community interactions are guided by our commitment to respect, 
+            <h2 className="text-2xl font-bold text-green-900 dark:text-green-100 mb-4">Our Community Values</h2>
+            <p className="text-green-800 dark:text-green-200 max-w-3xl mx-auto">
+              All blog content and community interactions are guided by our commitment to respect,
               inclusion, and empathy. We celebrate diverse perspectives and create space for everyone to learn and grow.
             </p>
           </div>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
-            <div className="bg-white p-4 rounded-lg border border-green-200">
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
               <div className="text-2xl mb-2">🤝</div>
-              <h3 className="font-semibold text-green-900 mb-1">Respect</h3>
-              <p className="text-sm text-green-700">Every person deserves dignity and consideration</p>
+              <h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Respect</h3>
+              <p className="text-sm text-green-700 dark:text-green-300">Every person deserves dignity and consideration</p>
             </div>
-            <div className="bg-white p-4 rounded-lg border border-green-200">
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
               <div className="text-2xl mb-2">🌍</div>
-              <h3 className="font-semibold text-green-900 mb-1">Inclusion</h3>
-              <p className="text-sm text-green-700">All backgrounds and perspectives are welcome</p>
+              <h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Inclusion</h3>
+              <p className="text-sm text-green-700 dark:text-green-300">All backgrounds and perspectives are welcome</p>
             </div>
-            <div className="bg-white p-4 rounded-lg border border-green-200">
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
               <div className="text-2xl mb-2">💚</div>
-              <h3 className="font-semibold text-green-900 mb-1">Empathy</h3>
-              <p className="text-sm text-green-700">We seek to understand and support each other</p>
+              <h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Empathy</h3>
+              <p className="text-sm text-green-700 dark:text-green-300">We seek to understand and support each other</p>
             </div>
           </div>
-          
+
           <div className="text-center mt-6">
-            <a 
-              href="#code-of-conduct" 
-              className="inline-flex items-center text-green-700 hover:text-green-900 font-medium transition-colors"
+            <a
+              href="#code-of-conduct"
+              className="inline-flex items-center text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 font-medium transition-colors"
             >
               Read our full Code of Conduct
               <ExternalLink className="h-4 w-4 ml-2" />
@@ -356,7 +354,7 @@ export const Blog: React.FC = () => {
         <div className="mt-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-8 text-center text-white">
           <h2 className="text-2xl font-bold mb-4">Join Our Inclusive Community</h2>
           <p className="text-purple-100 mb-6 max-w-2xl mx-auto">
-            Get updates on community posts, inclusive tech content, and opportunities to connect 
+            Get updates on community posts, inclusive tech content, and opportunities to connect
             with like-minded developers who value diversity and collaboration.
           </p>
           <div className="max-w-md mx-auto flex space-x-4">
diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx
index c16dea7..822d08d 100644
--- a/src/components/Projects/Projects.tsx
+++ b/src/components/Projects/Projects.tsx
@@ -49,8 +49,8 @@ export const Projects: React.FC = () => {
       setFilteredProjects(projects);
     } else {
       setFilteredProjects(
-        projects.filter(project => 
-          project.technologies.some(t => 
+        projects.filter(project =>
+          project.technologies.some(t =>
             t.toLowerCase().includes(tech.toLowerCase())
           )
         )
@@ -60,7 +60,7 @@ export const Projects: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
           <p className="text-gray-600">Loading projects...</p>
@@ -72,11 +72,11 @@ export const Projects: React.FC = () => {
   if (error) {
     return (
       <div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
-        <div className="text-center bg-white p-8 rounded-lg shadow-lg max-w-md">
+        <div className="text-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md">
           <div className="text-red-500 text-4xl mb-4">⚠️</div>
-          <h2 className="text-xl font-bold text-gray-900 mb-2">Failed to Load Projects</h2>
-          <p className="text-gray-600 mb-4">{error}</p>
-          <button 
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Failed to Load Projects</h2>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">{error}</p>
+          <button
             onClick={() => window.location.reload()}
             className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"
           >
@@ -88,20 +88,20 @@ export const Projects: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
             Community Projects
           </h1>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-6">
-            Discover inclusive, collaborative projects built by our diverse community. 
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-6">
+            Discover inclusive, collaborative projects built by our diverse community.
             Every project welcomes contributors of all backgrounds and skill levels.
           </p>
-          
+
           {/* Code of Conduct Notice */}
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 max-w-4xl mx-auto">
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 max-w-4xl mx-auto">
             <div className="flex items-start space-x-3">
               <div className="flex-shrink-0">
                 <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
@@ -109,9 +109,9 @@ export const Projects: React.FC = () => {
                 </div>
               </div>
               <div className="text-left">
-                <h3 className="text-sm font-semibold text-blue-900 mb-1">Community Standards</h3>
-                <p className="text-sm text-blue-800">
-                  Participation in these projects is guided by our community standards of respect, 
+                <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">Community Standards</h3>
+                <p className="text-sm text-blue-800 dark:text-blue-200">
+                  Participation in these projects is guided by our community standards of respect,
                   inclusion, and empathy. We're committed to creating a welcoming environment for everyone.
                 </p>
               </div>
@@ -123,17 +123,16 @@ export const Projects: React.FC = () => {
         <div className="mb-8">
           <div className="flex items-center justify-center flex-wrap gap-4">
             <div className="flex items-center space-x-2">
-              <Filter className="h-5 w-5 text-gray-500" />
-              <span className="text-sm font-medium text-gray-700">Filter by technology:</span>
+              <Filter className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by technology:</span>
             </div>
             <div className="flex flex-wrap gap-2">
               <button
                 onClick={() => handleTechFilter('all')}
-                className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
-                  selectedTech === 'all'
+                className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTech === 'all'
                     ? 'bg-purple-600 text-white'
-                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-                }`}
+                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
+                  }`}
               >
                 All
               </button>
@@ -141,11 +140,10 @@ export const Projects: React.FC = () => {
                 <button
                   key={tech}
                   onClick={() => handleTechFilter(tech)}
-                  className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
-                    selectedTech === tech
+                  className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTech === tech
                       ? 'bg-purple-600 text-white'
-                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-                  }`}
+                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
+                    }`}
                 >
                   {tech}
                 </button>
@@ -157,7 +155,7 @@ export const Projects: React.FC = () => {
         {/* Projects Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {filteredProjects.map(project => (
-            <div key={project.id} className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden group">
+            <div key={project.id} className="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden group">
               {/* Project Image */}
               <div className="relative h-48 bg-gradient-to-br from-purple-100 to-blue-100 overflow-hidden">
                 <div className="w-full h-full flex items-center justify-center">
@@ -177,11 +175,11 @@ export const Projects: React.FC = () => {
 
               {/* Project Content */}
               <div className="p-6">
-                <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                   {project.title}
                 </h3>
-                
-                <p className="text-gray-600 mb-4">
+
+                <p className="text-gray-600 dark:text-gray-300 mb-4">
                   {project.description}
                 </p>
 
@@ -191,13 +189,13 @@ export const Projects: React.FC = () => {
                     {project.technologies.slice(0, 4).map((tech, index) => (
                       <span
                         key={index}
-                        className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium"
+                        className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-md font-medium"
                       >
                         {tech}
                       </span>
                     ))}
                     {project.technologies.length > 4 && (
-                      <span className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded-md font-medium">
+                      <span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs rounded-md font-medium">
                         +{project.technologies.length - 4} more
                       </span>
                     )}
@@ -210,12 +208,12 @@ export const Projects: React.FC = () => {
                     href={project.githubUrl}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center space-x-2 text-gray-600 hover:text-purple-600 transition-colors"
+                    className="inline-flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
                   >
                     <Github className="h-5 w-5" />
                     <span className="text-sm font-medium">View Code</span>
                   </a>
-                  
+
                   <button className="inline-flex items-center space-x-2 bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
                     <ExternalLink className="h-4 w-4" />
                     <span>Live Demo</span>
@@ -230,7 +228,7 @@ export const Projects: React.FC = () => {
         <div className="mt-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-8 text-center text-white">
           <h2 className="text-2xl font-bold mb-4">Share Your Inclusive Project</h2>
           <p className="text-purple-100 mb-6 max-w-2xl mx-auto">
-            Built something that brings people together? We'd love to showcase projects that 
+            Built something that brings people together? We'd love to showcase projects that
             prioritize accessibility, collaboration, and learning opportunities for everyone.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
@@ -238,8 +236,8 @@ export const Projects: React.FC = () => {
               <ExternalLink className="h-5 w-5" />
               <span>Submit Your Project</span>
             </button>
-            <a 
-              href="#code-of-conduct" 
+            <a
+              href="#code-of-conduct"
               className="text-purple-100 hover:text-white text-sm underline transition-colors"
             >
               Review Community Guidelines