diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1170d6b..c88d170 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,29 +1,84 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
-
 import { logo } from './assets';
 import { Home, CreatePost } from './pages/index.js';
 
-const App = () => (
-  <BrowserRouter>
-    <header className="w-full flex justify-between items-center bg-white sm:px-8 px-4 py-4 border-b border-b-[#e6ebf4]">
-      <Link to="/">
-        <div className="flex items-center">
-          <img src={logo} alt="logo" className="object-contain size-full" />
-          <h2 className="text-2xl font-bold font-serif text-left ">OwnAI</h2>
+const App = () => {
+  const [theme, setTheme] = useState(() => {
+    // const savedTheme = localStorage.getItem('theme');
+    // if (savedTheme) return savedTheme;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+   const contrastStyle = {
+    filter: theme=='dark' ? 'contrast(0.1)' : 'contrast(1)', 
+  };
+  return (
+    <BrowserRouter>
+     <header className="w-full flex justify-between items-center bg-white  dark:bg-custom-black sm:px-8 px-4 py-4 border-b border-b-[#e6ebf4] dark:border-b-gray-600">
+        <Link to="/">
+            <div className="flex items-center">
+                  <img
+                    src={logo}
+                    alt="logo"
+                    style={contrastStyle} 
+                    className="object-contain size-full"
+                  />
+                  <h2 className="text-2xl font-bold font-serif text-left text-black dark:text-white">OwnAI</h2>
+            </div>
+        </Link>
+
+        <div className="flex items-center gap-4">
+          
+          <button
+            id='button'
+            onClick={toggleTheme}
+            aria-label="Toggle theme"
+            className="display-none"
+          >           
+            {/* {theme === 'light' ? 'Dark Mode' : 'Light Mode'} */}
+          </button>
+            <label class="relative cursor-pointer p-2 "  for="button">
+                        <svg class="dark:hidden"  width="20" height="18" xmlns="http://www.w3.org/2000/svg">
+                            <path class="fill-slate-300" d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z" />
+                            <path class="fill-slate-400" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
+                        </svg>
+                        <svg class="hidden dark:block" width="20" height="18" xmlns="http://www.w3.org/2000/svg">
+                            <path class="fill-slate-400" d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z" />
+                            <path class="fill-slate-500" d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z" />
+                        </svg>
+                  
+                </label>
+
+          <Link
+            to="/create-post"
+            className="font-inter font-medium bg-[#6469ff] text-white px-4 py-2 rounded-md"
+          >
+            Create
+          </Link>
         </div>
-      </Link>
-    
+      </header>
 
-      <Link to="/create-post" className="font-inter font-medium bg-[#6469ff] text-white px-4 py-2 rounded-md">Create</Link>
-    </header>
-    <main className="sm:p-8 px-4 py-8 w-full bg-[#f9fafe] min-h-[calc(100vh-73px)]">
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/create-post" element={<CreatePost />} />
-      </Routes>
-    </main>
-  </BrowserRouter>
-);
+      <main className="sm:p-8 px-4 py-8 w-full bg-[#f9fafe] dark:bg-black min-h-[calc(100vh-73px)]">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/create-post" element={<CreatePost />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+};
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/client/src/components/FormField.jsx b/client/src/components/FormField.jsx
index 5e54258..3008abe 100644
--- a/client/src/components/FormField.jsx
+++ b/client/src/components/FormField.jsx
@@ -14,7 +14,7 @@ const FormField = ({
     <div className="flex items-center gap-2 mb-2">
       <label
         htmlFor={name}
-        className="block text-sm font-medium text-gray-900"
+        className="block text-sm font-medium text-gray-900 dark:text-white"
       >
         {labelName}
       </label>
@@ -22,7 +22,7 @@ const FormField = ({
         <button
           type="button"
           onClick={handleSurpriseMe}
-          className="font-semibold text-xs bg-[#EcECF1] py-1 px-2 rounded-[5px] text-black"
+          className="font-semibold text-xs bg-[#EcECF1] py-1 px-2 rounded-[5px] text-black dark:text-white dark:bg-gray-700"
         >
           Surprise me
         </button>
diff --git a/client/src/index.css b/client/src/index.css
index 42fb166..b8855ba 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,22 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+
 * {
-	font-family: "Inter", sans-serif;
+  font-family: "Inter", sans-serif;
+  transition: color 0.5s ease, background-color 0.6s ease; 
 }
 
+/* Grid layout adjustment */
 @media screen and (min-width: 480px) {
-	.card:nth-child(7n + 1) {
-		grid-column: auto/span 2;
-		grid-row: auto/span 2;
-	}
+  .card:nth-child(7n + 1) {
+    grid-column: auto/span 2;
+    grid-row: auto/span 2;
+  }
 }
 
 .prompt::-webkit-scrollbar {
-	width: 5px;
+  width: 5px;
 }
 
 .prompt::-webkit-scrollbar-thumb {
-	background-color: #666e75;
-	border-radius: 5px;
+  background-color: #666e75;
+  border-radius: 5px;
 }
+
+
diff --git a/client/src/pages/CreatePost.jsx b/client/src/pages/CreatePost.jsx
index 66f9538..4cf0b13 100644
--- a/client/src/pages/CreatePost.jsx
+++ b/client/src/pages/CreatePost.jsx
@@ -81,8 +81,8 @@ const CreatePost = () => {
   return (
     <section className="max-w-7xl mx-auto">
       <div>
-        <h1 className="font-extrabold text-[#222328] text-[32px]">Create</h1>
-        <p className="mt-2 text-[#666e75] text-[14px] max-w-[500px]">Generate an imaginative image through <span className='font-bold font-serif text-lg'>Own-AI</span> and share it with the community</p>
+        <h1 className="font-extrabold text-[#222328] text-[32px] dark:text-white">Create</h1>
+        <p className="mt-2 text-[#666e75] text-[14px] max-w-[500px] dark:text-gray-400">Generate an imaginative image through <span className='font-bold font-serif text-lg dark:text-gray-300'>Own-AI</span> and share it with the community</p>
       </div>
 
       <form className="mt-16 max-w-3xl" onSubmit={handleSubmit}>
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 764f3a9..5d0fa35 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -63,8 +63,8 @@ const Home = () => {
   return (
     <section className="max-w-7xl mx-auto">
       <div>
-        <h1 className="font-extrabold text-[#222328] text-[32px]">The Community Showcase</h1>
-        <p className="mt-2 text-[#666e75] text-[14px] max-w-[500px]">Browse through a collection of imaginative and visually stunning images generated by <span className='font-bold font-serif text-lg'>Own-AI</span> based on pollinations.ai model.</p>
+       <h1 className="font-extrabold text-[#222328] text-[32px] dark:text-white">The Community Showcase</h1>
+        <p className="mt-2 text-[#666e75] text-[14px] max-w-[500px] dark:text-gray-400">Browse through a collection of imaginative and visually stunning images generated by <span className='font-bold font-serif text-lg'>Own-AI</span> based on pollinations.ai model.</p>
       </div>
 
       <div className="mt-16">
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 109fd06..9b0d2e5 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -2,6 +2,7 @@
 
 export default {
   content: ['./src/**/*.{js,jsx}'],
+  darkMode: 'class',
   theme: {
     extend: {
       screens: {
@@ -14,6 +15,9 @@ export default {
         card: '0 0 1px 0 rgba(189,192,207,0.06),0 10px 16px -1px rgba(189,192,207,0.2)',
         cardhover: '0 0 1px 0 rgba(189,192,207,0.06),0 10px 16px -1px rgba(189,192,207,0.4)',
       },
+       colors: {
+        'custom-black': '#0a0a0a', // Define a very dark shade of black
+      },
     },
   },
   plugins: [],