diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5eb7625..fea0e41 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,6 +10,12 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #f9fafb;
+  color: #111827;
+}
+
+.dark body {
+  background-color: #111827; /* gray-900 */
+  color: #e5e7eb; /* gray-200 */
 }
 
 code {
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 8d1c7d3..1f1ea84 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -75,10 +75,10 @@ const Home = () => {
     <div className="max-w-7xl mx-auto">
       {/* Hero Section */}
       <div className="text-center py-12">
-        <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+        <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
           Algorithm <span className="text-primary-600">Visualizer</span>
         </h1>
-        <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
+        <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
           An interactive platform to learn, visualize, and analyze data structures and algorithms. 
           Built with C++ performance and modern web technologies.
         </p>
@@ -92,7 +92,7 @@ const Home = () => {
           </Link>
           <Link
             to="/performance"
-            className="inline-flex items-center px-6 py-3 bg-white text-primary-600 font-semibold rounded-lg border-2 border-primary-600 hover:bg-primary-50 transition-colors"
+            className="inline-flex items-center px-6 py-3 bg-white dark:bg-gray-100 text-primary-600 dark:text-primary-700 font-semibold rounded-lg border-2 border-primary-600 hover:bg-primary-50 dark:hover:bg-gray-200 transition-colors"
           >
             View Performance Analysis
           </Link>
@@ -101,21 +101,21 @@ const Home = () => {
 
       {/* Features Section */}
       <section className="py-16">
-        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
+        <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
           Why Choose Our Platform?
         </h2>
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => {
             const Icon = feature.icon;
             return (
-              <div key={index} className="text-center p-6 bg-white rounded-xl shadow-soft hover:shadow-medium transition-shadow">
-                <div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+              <div key={index} className="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-soft hover:shadow-medium transition-shadow">
+                <div className="bg-primary-100 dark:bg-primary-900/40 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                   <Icon className="h-8 w-8 text-primary-600" />
                 </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                   {feature.title}
                 </h3>
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-gray-300">
                   {feature.description}
                 </p>
               </div>
@@ -126,7 +126,7 @@ const Home = () => {
 
       {/* Algorithm Categories */}
       <section className="py-16">
-        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
+        <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
           Explore Algorithm Categories
         </h2>
         <div className="grid md:grid-cols-2 gap-8">
@@ -136,24 +136,24 @@ const Home = () => {
               <Link
                 key={index}
                 to={category.path}
-                className="bg-white rounded-xl shadow-soft hover:shadow-strong transition-all duration-300 p-6 group"
+                className="bg-white dark:bg-gray-800 rounded-xl shadow-soft hover:shadow-strong transition-all duration-300 p-6 group"
               >
                 <div className="flex items-start space-x-4">
                   <div className={`${category.color} p-3 rounded-lg group-hover:scale-110 transition-transform`}>
                     <Icon className="h-6 w-6 text-white" />
                   </div>
                   <div className="flex-1">
-                    <h3 className="text-xl font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
+                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary-600 transition-colors">
                       {category.title}
                     </h3>
-                    <p className="text-gray-600 mb-4">
+                    <p className="text-gray-600 dark:text-gray-300 mb-4">
                       {category.description}
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {category.algorithms.map((algo) => (
                         <span 
                           key={algo}
-                          className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
+                          className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm rounded-full"
                         >
                           {algo}
                         </span>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 366f6d4..28fd5da 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],