diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e9525e7a..79429c00 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,120 +25,125 @@ import LeaderBoard from "./pages/LeaderBoard";
 import CustomizeWithAi from "./pages/CustomizeWithAi";
 import ScrollToTopWhenRouteChanges from "./components/ScrollToTopWhenRouteChanges";
 import './i18n';
-import CodeEditor from "./pages/CodeEditor";
 import ShowProfile from "./pages/ShowProfile";
 import { Tooltip } from 'react-tooltip'
 import EditPost from "./pages/EditPost";
+import useTheme from './hooks/useTheme';
+import CodeEditor from "./pages/CodeEditor";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
-function App() {
 
+function App() {
+  const { theme, toggleTheme } = useTheme();
   return (
     <BrowserRouter>
       <RecoilRoot>
         <React.Suspense fallback={<Loader />}>
-          <Navbar />
+
           <GoTop/>
-          <ScrollToTopWhenRouteChanges/>
-          <div className="min-h-[80vh] mt-12 pt-12">
-            <Routes>
-              <Route path="/app" element={<Home />} />
-              <Route path="/app/posts/:id" element={<Post />} />
-              <Route path="/app/posts" element={<Posts />} />
-              <Route path="/app/profile/:id" element={<ShowProfile/>} />
-              <Route
-                path="/app/signin"
-                element={
-                  <NonAuthenticatedRoute>
-                    <Signin />
-                  </NonAuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/signup"
-                element={
-                  <NonAuthenticatedRoute>
-                    <Signup />
-                  </NonAuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/new-post"
-                element={
-                  <AuthenticatedRoute>
-                    <NewPost />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/posts/edit/:id"
-                element={
-                  <AuthenticatedRoute>
-                    <EditPost />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/profile"
-                element={
-                  <AuthenticatedRoute>
-                    <Profile />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/fav"
-                element={
-                  <AuthenticatedRoute>
-                    <Favorite />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/customize-with-ai/:id"
-                element={
-                  <AuthenticatedRoute>
-                    <CustomizeWithAi />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-               path="/app/leaderboard"
-                element={
-                    <LeaderBoard />
-                }
-              />
-              <Route
-               path="/app/code"
-                element={
-                  <AuthenticatedRoute>
-                    <CodeEditor />
-                  </AuthenticatedRoute>
-                }
-              />
-              <Route
-                path="/app/contact-us"
-                element={
-                  <ContactUs />
-                }
-              />
-              <Route
-                path="/app/about"
-                element={
-                  <About />
-                }
-              />
-              <Route
-                path="/app/policy"
-                element={
-                  <Policy />
-                }
-              />
-              <Route path="*" element={<PageNotFound/>} />
-            </Routes>
+          <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
+            <Navbar theme={theme} toggleTheme={toggleTheme}  />
+            <ScrollToTopWhenRouteChanges/>
+            <div className="min-h-[80vh] mt-12 pt-12">
+              <Routes>
+                <Route path="/app" element={<Home />} />
+                <Route path="/app/posts/:id" element={<Post />} />
+                <Route path="/app/posts" element={<Posts    />} />
+                <Route path="/app/profile/:id" element={<ShowProfile/>} />
+                <Route
+                  path="/app/signin"
+                  element={
+                    <NonAuthenticatedRoute>
+                      <Signin />
+                    </NonAuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/signup"
+                  element={
+                    <NonAuthenticatedRoute>
+                      <Signup />
+                    </NonAuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/new-post"
+                  element={
+                    <AuthenticatedRoute>
+                      <NewPost  />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/posts/edit/:id"
+                  element={
+                    <AuthenticatedRoute>
+                      <EditPost />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/profile"
+                  element={
+                    <AuthenticatedRoute>
+                      <Profile  />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/fav"
+                  element={
+                    <AuthenticatedRoute>
+                      <Favorite />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/customize-with-ai/:id"
+                  element={
+                    <AuthenticatedRoute>
+                      <CustomizeWithAi />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                path="/app/leaderboard"
+                  element={
+                      <LeaderBoard   />
+                  }
+                />
+                <Route
+                path="/app/code"
+                  element={
+                    <AuthenticatedRoute>
+                      <CodeEditor />
+                    </AuthenticatedRoute>
+                  }
+                />
+                <Route
+                  path="/app/contact-us"
+                  element={
+                    <ContactUs />
+                  }
+                />
+                <Route
+                  path="/app/about"
+                  element={
+                    <About />
+                  }
+                />
+                <Route
+                  path="/app/policy"
+                  element={
+                    <Policy />
+                  }
+                />
+                <Route path="*" element={<PageNotFound/>} />
+              </Routes>
+            </div>
+            <Footer />
           </div>
-          <Footer />
         </React.Suspense>
       </RecoilRoot>
       <Tooltip id="my-tooltip" place='right' style={{backgroundColor:"#00AAFF",color:'#fff',fontSize:'15px'}} />
diff --git a/frontend/src/components/FAQ.tsx b/frontend/src/components/FAQ.tsx
index cdbfd74d..3c718e53 100644
--- a/frontend/src/components/FAQ.tsx
+++ b/frontend/src/components/FAQ.tsx
@@ -42,18 +42,18 @@ const FAQ: React.FC = () => {
   };
 
   return (
-    <section className="bg-[#000435] mb-20 text-white" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
-        <h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center text-white">🤔 Frequently Asked Questions 🤔</h2>
+    <section className=" text-[#000435] bg-white dark:text-white dark:bg-[#000435]" >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8  text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">🤔 Frequently Asked Questions 🤔</h2>
         <dl className="space-y-5">
           {faqs.map((faq, index) => (
             <div key={index} className="space-y-2">
-              <div className={`rounded-lg ${activeIndex === index ? 'animated-border' : 'border-2 border-transparent'}`}>
+              <div className={`rounded-lg ${activeIndex === index ? 'animated-border' : 'border-2 border-transparent  text-[#000435] bg-white dark:text-white dark:bg-[#000435]'}`}>
                 <button
                   onClick={() => handleToggle(index)}
-                  className={`animated-border-inner w-full focus:outline-none transition duration-100 ease-in-out`}
+                  className={`animated-border-inner w-full focus:outline-none transition duration-100 ease-in-out  text-[#000435] bg-white dark:text-white dark:bg-[#000435]`}
                 >
-                  <span className="text-lg md:text-2xl leading-6 font-medium">{faq.question}</span>
+                  <span className="text-lg md:text-2xl leading-6 font-medium  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">{faq.question}</span>
                   {activeIndex === index ? <BiChevronUp className="h-5 w-5" /> : <BiChevronDown className="h-5 w-5" />}
                 </button>
               </div>
@@ -61,7 +61,7 @@ const FAQ: React.FC = () => {
                 className={`transition-all duration-1000 ease-in-out overflow-hidden ${activeIndex === index ? 'max-h-full' : 'max-h-0'}`}
                 style={{ maxHeight: activeIndex === index ? '200px' : '0px' }} // Adjust maxHeight as needed
               >
-                <div className="mt-2 ml-4 text-xl font-mono">{faq.answer}</div>
+                <div className="mt-2 ml-4 text-xl font-mono ">{faq.answer}</div>
               </div>
             </div>
           ))}
@@ -71,5 +71,4 @@ const FAQ: React.FC = () => {
   );
 };
 
-export default FAQ;
-
+export default FAQ;
\ No newline at end of file
diff --git a/frontend/src/components/Features.tsx b/frontend/src/components/Features.tsx
index f8cae4b7..52eb95e6 100644
--- a/frontend/src/components/Features.tsx
+++ b/frontend/src/components/Features.tsx
@@ -1,61 +1,54 @@
 import { RiTailwindCssFill } from "react-icons/ri";
 import { MdLeaderboard } from "react-icons/md";
+import bgHero from "../assets/bgHero.png";
 import { BiSolidCustomize } from "react-icons/bi";
 import { FaLaptopFile } from "react-icons/fa6";
 
 const Features = () => {
   return (
-    <div>
-      <section className="text-gray-400">
-        <div className="container px-5 py-24 mx-auto">
+    <div  className={`w-full`}style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <section className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}  >
+        <div className="container px-5 py-24 mx-auto"  >
           <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
-            <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
+            <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
               🫴 What we offer to developers 📦
             </h1>
           </div>
           <div className="flex flex-wrap -m-4">
-            <div className="xl:w-1/4 md:w-1/2 p-4">
-              <div className="feature-card">
-                <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
-                  <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
-                    <RiTailwindCssFill size={23} />
-                  </div>
-                  <h2 className="text-lg text-white font-medium title-font mb-2">Responsive Design</h2>
-                  <p className="leading-relaxed text-base">All components are from best sources and designed to be fully responsive 📝ensuring they look great on any device📱</p>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+              <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
+                <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
+                <RiTailwindCssFill size={23}/>
                 </div>
+                <h2 className="text-lg text-[#000435] dark:text-white  font-medium title-font mb-2">Responsive Design</h2>
+                <p className="leading-relaxed text-base">All components are from best sources and designed to be fully responsive 📝ensuring they look great on any device📱</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
-              <div className="feature-card">
-                <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
-                  <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
-                    <MdLeaderboard size={23} />
-                  </div>
-                  <h2 className="text-lg text-white font-medium title-font mb-2">Leaderboard</h2>
-                  <p className="leading-relaxed text-base">Compete with other developers and 🪜climb the leaderboard by sharing your best components and get recognized 🥇</p>
+              <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
+              <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
+                <MdLeaderboard size={23}/>
                 </div>
+                <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Leaderboard</h2>
+                <p className="leading-relaxed text-base">Compete with other developers and 🪜climb the leaderboard by sharing your best components and get recognized 🥇</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
-              <div className="feature-card">
-                <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
-                  <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
-                    <FaLaptopFile size={23} />
-                  </div>
-                  <h2 className="text-lg text-white font-medium title-font mb-2">Personalization</h2>
-                  <p className="leading-relaxed text-base">Engage with the community by 👍/👎components. Save your 💖 components for quick access in your future projects.</p>
+              <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
+              <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
+                <FaLaptopFile size={23}/>
                 </div>
+                <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Personalization</h2>
+                <p className="leading-relaxed text-base">Engage with the community by 👍/👎components. Save your 💖 components for quick access in your future projects.</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
-              <div className="feature-card">
-                <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
-                  <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
-                    <BiSolidCustomize size={23} />
-                  </div>
-                  <h2 className="text-lg text-white font-medium title-font mb-2">Customizable Code Snippets</h2>
-                  <p className="leading-relaxed text-base">Easily customize and preview code 👀 snippets with our built-in editor and A.I tailored specifically for Tailwind CSS 💅</p>
+              <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
+              <div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
+                <BiSolidCustomize size={23}/>
                 </div>
+                <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Customizable Code Snippets</h2>
+                <p className="leading-relaxed text-base">Easily customize and preview code 👀 snippets with our built-in editor and A.I tailored specifically for Tailwind CSS 💅</p>
               </div>
             </div>
           </div>
@@ -65,4 +58,4 @@ const Features = () => {
   );
 };
 
-export default Features;
+export default Features;
\ No newline at end of file
diff --git a/frontend/src/components/Loader.tsx b/frontend/src/components/Loader.tsx
index a4c17565..734292ce 100644
--- a/frontend/src/components/Loader.tsx
+++ b/frontend/src/components/Loader.tsx
@@ -2,11 +2,11 @@ const Loader = () => {
   return (
     <div
       role="status"
-      className="h-screen w-screen flex items-center justify-center"
+      className="h-screen w-screen flex items-center text-[#000435] bg-white dark:text-white dark:bg-[#000435] justify-center"
     >
       <svg
         aria-hidden="true"
-        className="w-24 h-24 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        className="w-24 h-24 text-gray-200 animate-spin dark:text-gray-600  bg-white  dark:bg-[#000435] fill-blue-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 3b9f5c23..ebf6e414 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { loggedInState, tokenState } from "../store/atoms/auth";
 import { Link, useLocation } from "react-router-dom";
@@ -6,8 +6,14 @@ import toast from "react-hot-toast";
 import logo from '../assets/favicon.png';
 import { useTranslation } from "react-i18next";
 import LanguageDropdown from "./LanguageDropdown";
+import { FaSun, FaMoon } from 'react-icons/fa';
 
-const Navbar = () => {
+ interface NavbarProps {
+  theme: 'light' | 'dark';
+  toggleTheme: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme })=> {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const setTokenState = useSetRecoilState(tokenState);
   const isLoggedIn = useRecoilValue(loggedInState);
@@ -29,27 +35,26 @@ const Navbar = () => {
     toast.success('Logged out successfully');
   };
 
-  const getNavLinkClass = (path:string) => {
+  const getNavLinkClass = (path: string) => {
     return location.pathname === path
-
-    ? "block py-2 px-3 bg-blue-600 rounded md:bg-transparent md:p-0 text-white md:text-blue-300"
-    : "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent";
+      ? "block py-2 px-3 bg-blue-600 rounded md:bg-transparent md:p-0 text-white md:text-blue-300"
+      : "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent";
   };
 
   return (
-    <nav className="bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc]  fixed w-full z-20 top-0 start-0">
+    <nav className={`bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-20 top-0 start-0 `}>
 
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <Link to="/app" className="flex items-center justify-between space-x-3 rtl:space-x-reverse" onClick={closeMenu}>
-            <div className="flex items-center space-x-3 rtl:space-x-reverse">
-              <img src={logo} className="h-8" alt="Styleshare Logo" />
-              <span className="self-center text-2xl font-bold  text-white font-mono">
-                {t("navbar.logo")}
-              </span>
-            </div>
-            <div className=" ">
-              <LanguageDropdown />
-            </div>
+          <div className="flex items-center space-x-3 rtl:space-x-reverse dark:text-black">
+            <img src={logo} className="h-8" alt="Styleshare Logo" />
+            <span className="self-center text-2xl font-bold text-white font-mono">
+              {t("navbar.logo")}
+            </span>
+          </div>
+          <div className=" ">
+            <LanguageDropdown />
+          </div>
         </Link>
         <button
           onClick={toggleMenu}
@@ -76,9 +81,7 @@ const Navbar = () => {
           </svg>
         </button>
         <div
-          className={`${
-            isMenuOpen ? "block" : "hidden"
-          } w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`}
+          className={`${isMenuOpen ? "block" : "hidden"} w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`}
           id="navbar-default"
         >
           <ul className="font-medium flex flex-col p-0 text-lg lg:p-0 mt-4 border rounded-lg lg:flex-row lg:space-x-5 rtl:space-x-reverse lg:mt-0 lg:border-0">
@@ -100,31 +103,34 @@ const Navbar = () => {
             {!isLoggedIn ? (
               <div className="flex flex-col lg:flex-row lg:space-x-4">
                 <li className="mb-2 lg:mb-0">
-                  <Link
-                    to="/app/signin"
-                    onClick={closeMenu}
-                  >
-                      <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+                  <Link to="/app/signin" onClick={closeMenu}>
+                    <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
                       <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-                      <span className="inline-flex   h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l  from-[#c779e8] to-indigo-500 px-5  text-lg font-small text-white backdrop-blur-3xl">
+                      <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
                         {t("navbar.links.signin")}
                       </span>
                     </button>
                   </Link>
                 </li>
                 <li>
-                  <Link
-                    to="/app/signup"
-                    onClick={closeMenu}
-                  >
+                  <Link to="/app/signup" onClick={closeMenu}>
                     <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
                       <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-                      <span className="inline-flex   h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l  from-[#c779e8] to-indigo-500 px-5  text-lg font-small text-white backdrop-blur-3xl">
-                      {t("navbar.links.signup")}
+                      <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
+                        {t("navbar.links.signup")}
                       </span>
                     </button>
                   </Link>
                 </li>
+                <li>
+                  <button
+                    onClick={toggleTheme}
+                    className="inline-flex mt-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
+                  >
+                    {theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
+                  </button>
+                </li>
+
               </div>
             ) : (
               <>
@@ -134,11 +140,7 @@ const Navbar = () => {
                   </Link>
                 </li>
                 <li className="mt-2">
-                  <Link
-                    to="/app/code"
-                    className={getNavLinkClass("/app/code")}
-                    onClick={closeMenu}
-                  >
+                  <Link to="/app/code" className={getNavLinkClass("/app/code")} onClick={closeMenu}>
                     {t("CodeEditor")}
                   </Link>
                 </li>
@@ -152,13 +154,19 @@ const Navbar = () => {
                     {t("navbar.links.favorite")}
                   </Link>
                 </li>
-                <li className="mt-2">
+                <li className="mt-1">
                   <button
-                    className="block py-2 px-3 rounded lg:border-0 lg:p-0 text-white lg:hover:text-blue-500 hover:bg-gray-700 hover:text-white lg:hover:bg-transparent w-full text-left"
+                    className=" text-white px-4 py-2 -mt-3  rounded-lg bg-blue-500 hover:bg-blue-600"
                     onClick={handleLogout}
                   >
                     {t("navbar.links.logout")}
                   </button>
+                  <button
+                  onClick={toggleTheme}
+                  className="inline-flex mx-1  border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
+                >
+                  {theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
+                </button>
                 </li>
               </>
             )}
@@ -170,4 +178,3 @@ const Navbar = () => {
 };
 
 export default Navbar;
-
diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
index ba63dbb1..05e6b848 100644
--- a/frontend/src/components/PostCard.tsx
+++ b/frontend/src/components/PostCard.tsx
@@ -88,12 +88,12 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
               emoji = null;
           }
           return (
-            <div key={index} className="relative w-10 h-10 border-2 rounded-full dark:border-gray-800 flex items-center justify-center bg-gray-700">
+            <div key={index} className="relative w-10 h-10 border-2 rounded-full dark:border-gray-800 flex items-center justify-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
               {emoji}
             </div>
           );
         })}
-        <div className="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2  rounded-full  dark:border-gray-800">
+        <div className="flex items-center justify-center w-10 h-10 text-xs font-mediumtext-[#000435] bg-white dark:text-white dark:bg-[#000435] border-2  rounded-full  dark:border-gray-800">
           +{totalReactions}
         </div>
       </div>
@@ -103,26 +103,26 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
   return (
     <div
       key={post.id}
-      className="bg-gray-800 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out"
+      className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out"
     >
-      <h2 className="text-xl font-bold mb-3 text-white">{post.title}</h2>
-      <p className="text-gray-300 mb-4">
+      <h2 className="text-xl font-bold mb-3 text-[#5f67de] bg-white dark:text-white dark:bg-blue-950">{post.title}</h2>
+      <p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">
         {post.description.length > 100
           ? `${post.description.slice(0, 100)}...`
           : post.description}
       </p>
-      <p className="text-gray-400 mb-4">By: {post.author.username}</p>
-      <div className="mt-2 flex flex-wrap gap-2">
+      <p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">By: {post.author.username}</p>
+      <div className="mt-2 flex flex-wrap gap-2  text-blue-950 bg-white dark:text-white dark:bg-blue-950 ">
         {post.tags.map((tag, index) => (
           <span
             key={index}
-            className="text-sm bg-gray-700 text-white px-3 py-1 rounded-full"
+            className="text-sm text-blue-950 bg-white dark:text-white dark:bg-blue-950 border-2 border-blue-900 dark:border-white px-3 py-1 rounded-full"
           >
             {tag}
           </span>
         ))}
       </div>
-      <div className="flex justify-between mt-1">
+      <div className="flex justify-between mt-1 ">
         <Link
           to={`/app/posts/${post.id}`}
           className="inline-block mt-4 text-blue-400 hover:text-blue-300 transition-colors duration-200 rounded-3xl border-2 border-blue-500 hover:border-blue-300 px-4 py-2"
@@ -140,9 +140,10 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
             <button
               onClick={handleDelete}
               disabled={isDeleting}
-              className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 hover:border-red-400 p-2 rounded-3xl"
-            >
-              {isDeleting ? "Deleting..." : <MdDeleteOutline size={25} />}
+              className="" 
+            > <Link className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 dark:border-red-500 hover:border-red-400 p-2 rounded-3xl" to={""}>
+                {isDeleting ? "Deleting..." : <MdDeleteOutline  size={20} />}
+                </Link>
             </button>
           </div>
         )}
@@ -152,4 +153,4 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
   );
 };
 
-export default PostCard;
+export default PostCard;
\ No newline at end of file
diff --git a/frontend/src/components/PostCodeWindow.tsx b/frontend/src/components/PostCodeWindow.tsx
index 30e2c015..92b08d60 100644
--- a/frontend/src/components/PostCodeWindow.tsx
+++ b/frontend/src/components/PostCodeWindow.tsx
@@ -12,7 +12,7 @@ function PostCodeWindow({
   return (
     <>
       <div className="mb-2">
-        <div className="flex bg-gray-800 border border-gray-700 rounded">
+        <div className="flex text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-700 rounded">
           <button
             onClick={() => handleTabSwitch("html")}
             className={`px-4 py-2 ${
@@ -38,7 +38,7 @@ function PostCodeWindow({
         </div>
         <div className="">
           {activeTab === "html" ? (
-            <pre className="p-4 bg-gray-800 border border-gray-700 rounded overflow-auto max-h-96">
+            <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-[#223bb9] border-4 border-sky-700 rounded overflow-auto max-h-96">
               <code>{codeSnippet}</code>
             </pre>
           ) : (
diff --git a/frontend/src/components/PostPreview.tsx b/frontend/src/components/PostPreview.tsx
index eac73ae1..b0edae3e 100644
--- a/frontend/src/components/PostPreview.tsx
+++ b/frontend/src/components/PostPreview.tsx
@@ -24,7 +24,7 @@ function PostPreview({
   }, []);
 
   return (
-    <div className="p-4 bg-gray-800 z-0 overflow-hidden rounded border border-gray-700">
+    <div className="p-4 text-[#000435] bg-white dark:text-white dark:bg-[#fff] z-0 overflow-hidden rounded border-2 border-sky-400">
       <iframe
         ref={ref}
         className="w-full border-0"
diff --git a/frontend/src/components/ReactionButtons.tsx b/frontend/src/components/ReactionButtons.tsx
index 27b10ab8..f7c4fcf7 100644
--- a/frontend/src/components/ReactionButtons.tsx
+++ b/frontend/src/components/ReactionButtons.tsx
@@ -132,13 +132,13 @@ const ReactionButton: React.FC<ReactionButtonProps> = ({ postId, initialReaction
     >
       <button
         onClick={reaction ? handleRemoveReaction : handleDefaultReaction}
-        className="p-2 bg-blue-950 backdrop-blur-sm rounded-lg border border-sky-500"
+        className="p-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-lg border border-sky-500"
       >
         {reaction ? reactionEmoji(reaction) : <AiOutlineLike size={30} color='#87CEEB' />}
       </button>
       {showEmojis && (
         <div
-          className="absolute flex space-x-5 mt-1 bg-blue-950 backdrop-blur-sm p-3 rounded-lg border border-sky-500 shadow-lg z-50"
+          className="absolute flex space-x-5 mt-1 text-[#000435] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm p-3 rounded-lg border border-sky-500 shadow-lg z-50"
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
         >
@@ -152,7 +152,7 @@ const ReactionButton: React.FC<ReactionButtonProps> = ({ postId, initialReaction
       )}
       <br/>
       {reaction && (
-        <div className="mt-2 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-blue-950 backdrop-blur-sm dark:text-blue-300  border border-sky-500">You reacted with {reaction}</div>
+        <div className="mt-2 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded  bg-white  dark:bg-[#000435] backdrop-blur-sm dark:text-blue-300  border border-sky-500">You reacted with {reaction}</div>
       )}
     </div>
   );
diff --git a/frontend/src/components/Showcase.tsx b/frontend/src/components/Showcase.tsx
index 43ddfb47..a1335b1f 100644
--- a/frontend/src/components/Showcase.tsx
+++ b/frontend/src/components/Showcase.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import bgHero from "../assets/bgHero.png";
+// import bgHero from "../assets/bgHero.png";
 import editor from "../assets/editor.png"; // Import the image
 
 const Showcase: React.FC = () => {
@@ -20,9 +20,9 @@ const Showcase: React.FC = () => {
   ];
 
   return (
-    <section className="bg-[#000435] mb-20 text-white" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center text-white">🚀  Our Code Editor 🚀</h2>
+    <section className=" text-[#000435] bg-white dark:text-white dark:bg-[#000435]" >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
+        <h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">🚀  Our Code Editor 🚀</h2>
         <div className="flex flex-col md:flex-row md:space-x-6 items-center">
           <div className="md:w-1/2 space-y-5">
             {features.map((feature, index) => (
@@ -41,5 +41,4 @@ const Showcase: React.FC = () => {
   );
 };
 
-export default Showcase;
-
+export default Showcase;
\ No newline at end of file
diff --git a/frontend/src/components/TestimonialSlider.tsx b/frontend/src/components/TestimonialSlider.tsx
index 11ac89f4..12dcb8c2 100644
--- a/frontend/src/components/TestimonialSlider.tsx
+++ b/frontend/src/components/TestimonialSlider.tsx
@@ -47,7 +47,7 @@ const testimonials: Testimonial[] = [
 const NextArrow: React.FC<{ className?: string; style?: React.CSSProperties; onClick?: () => void }> = ({ className, style, onClick }) => {
   return (
     <div
-      className={`${className} text-black rounded-full  transform scale-125 hover:scale-150 transition-transform duration-300`}
+      className={`${className}  text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-full  transform scale-125 hover:scale-150 transition-transform duration-300`}
       style={{ ...style, display: 'block' }}
       onClick={onClick}
     >
@@ -59,7 +59,7 @@ const NextArrow: React.FC<{ className?: string; style?: React.CSSProperties; onC
 const PrevArrow: React.FC<{ className?: string; style?: React.CSSProperties; onClick?: () => void }> = ({ className, style, onClick }) => {
   return (
     <div
-      className={`${className} text-black rounded-full  transform scale-125 hover:scale-150 transition-transform duration-300`}
+      className={`${className}  text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-full  transform scale-125 hover:scale-150 transition-transform duration-300`}
       style={{ ...style, display: 'block' }}
       onClick={onClick}
     >
@@ -113,18 +113,18 @@ const TestimonialSlider: React.FC = () => {
   };
 
   return (
-    <div className=" bg-[#000435] testimonial-slider py-10 mx-10 max-w-70 px-4 md:px-10" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-      <h2 className="text-3xl md:text-4xl font-extrabold text-center text-white mb-8 " >⭐ What Our Users Say ⭐</h2>
+    <div className="  text-[#000435] bg-white dark:text-white dark:bg-[#000435] testimonial-slider py-10  max-w-70 px-4 md:px-10"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+      <h2 className="text-3xl md:text-4xl font-extrabold text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-8 " >⭐ What Our Users Say ⭐</h2>
       <Slider {...settings}>
         {testimonials.map((testimonial, index) => (
-          <div key={index} className="  testimonial  p-6 md:p-20 rounded-lg shadow-lg    text-white flex flex-col items-center justify-center" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          <div key={index} className="  testimonial  p-6 md:p-20 rounded-lg shadow-lg     text-[#000435] bg-white dark:text-white dark:bg-[#000435] flex flex-col items-center justify-center" >
             <img
               src={testimonial.image}
               alt={`${testimonial.author}'s picture`}
-              className="w-32 h-32 md:w-40 md:h-40 rounded-full mb-8 border-4 border-white-1000 mx-auto mt-0 p-2"
+              className="w-32 h-32 md:w-40 md:h-40 rounded-full mb-8 border-4 border-[#000435] dark:border-white mx-auto mt-0 p-2  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"
             />
-            <p className="text-lg md:text-2xl italic mb-4 md:mb-6 text-center">"{testimonial.quote}"</p>
-            <h4 className="text-base mt-4 md:mt-6 md:text-xl font-semibold text-center text-white-700">- {testimonial.author}</h4>
+            <p className="text-lg md:text-2xl italic mb-4 md:mb-6 text-center  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">"{testimonial.quote}"</p>
+            <h4 className="text-base mt-4 md:mt-6 md:text-xl font-semibold text-center text-white-700  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">- {testimonial.author}</h4>
 
           </div>
         ))}
@@ -133,7 +133,4 @@ const TestimonialSlider: React.FC = () => {
   );
 };
 
-export default TestimonialSlider;
-
-
-
+export default TestimonialSlider;
\ No newline at end of file
diff --git a/frontend/src/hooks/useTheme.tsx b/frontend/src/hooks/useTheme.tsx
new file mode 100644
index 00000000..d0cb24f5
--- /dev/null
+++ b/frontend/src/hooks/useTheme.tsx
@@ -0,0 +1,29 @@
+
+import { useState, useEffect } from 'react';
+
+const useTheme = () => {
+    const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            setTheme(savedTheme as 'light' | 'dark');
+        } else {
+            const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            setTheme(defaultTheme);
+        }
+    }, []);
+
+    useEffect(() => {
+        document.body.className = theme;
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    };
+
+    return { theme, toggleTheme };
+};
+
+export default useTheme;
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 9d2fcb92..e71a4e3c 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -7,7 +7,7 @@ function About() {
   const { t } = useTranslation();
 
   return (
-    <div className="w-full bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+    <div className="w-full  text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
       <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
         <img className="w-[550px] mx-auto my-4" src={about} alt="About Us" />
         <div className="flex flex-col justify-center">
@@ -17,13 +17,13 @@ function About() {
           <h1 className='md:text-4xl sm:text-3xl font-bold py-4 text-white'>
             {t('about.head1.heading')}
           </h1>
-          <p className="text-lg text-gray-300 text-justify">
+          <p className="text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] text-justify">
             💁‍♂️ {t('about.head1.paragraph')}
           </p>
-          <p className='md:text-3xl sm:text-3xl text-2xl font-bold py-4 text-white'>
+          <p className='md:text-3xl sm:text-3xl text-2xl font-bold py-4 text-[#000435] bg-white dark:text-white dark:bg-[#000435]'>
             🤔 {t('about.head2.heading')}
           </p>
-          <p className="text-lg text-gray-300">
+          <p className="text-lg  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
             <span> ✅ {t('about.head2.list.l1')}</span><br />
             <span> ✅ {t('about.head2.list.l2')}</span><br />
             <span> ✅ {t('about.head2.list.l3')}</span><br />
@@ -43,4 +43,4 @@ function About() {
   );
 }
 
-export default About;
+export default About;
\ No newline at end of file
diff --git a/frontend/src/pages/CodeEditor.tsx b/frontend/src/pages/CodeEditor.tsx
index cda94d66..16ec7e01 100644
--- a/frontend/src/pages/CodeEditor.tsx
+++ b/frontend/src/pages/CodeEditor.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import MonacoEditor from '@monaco-editor/react';
-import { CiLight, CiDark } from 'react-icons/ci';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from "react-i18next";
 import toast, { Toaster } from 'react-hot-toast';
 import { FaCopy } from 'react-icons/fa';
+import bgHero from "../assets/bgHero.png";
 
-const CodeEditor = () => {
+const CodeEditor = ()=> {
   const initialCode = `<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-blue-400 py-6 sm:py-12">
     <div class="relative px-6 pt-10 pb-8 shadow-2xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
       <div class="mx-auto max-w-md text-white">
@@ -44,12 +44,11 @@ const CodeEditor = () => {
     </div>
   </div>`;
   const [code, setCode] = useState(initialCode);
-  const [theme, setTheme] = useState<'light' | 'dark'>(
-    () => (localStorage.getItem('theme') as 'light' | 'dark') || 'dark'
-  );
+
   const outputRef = useRef<HTMLIFrameElement>(null);
   const navigate = useNavigate();
   const { t } = useTranslation();
+ 
 
   const updateOutput = (code: string) => {
     const doc = `
@@ -72,9 +71,6 @@ const CodeEditor = () => {
     updateOutput(code);
   }, [code]);
 
-  useEffect(() => {
-    localStorage.setItem('theme', theme);
-  }, [theme]);
 
   const handlePublish = () => {
     navigate('/app/new-post', { state: { codeSnippet: code } });
@@ -91,59 +87,55 @@ const CodeEditor = () => {
   };
 
   return (
-    <div className='flex flex-col h-screen -mt-28 sm:-mt-8'>
-      <Toaster />
-      <nav className={`bg-${theme === 'dark' ? 'gray-900' : 'white'} text-white p-16 sm:p-5 mt-20 sm:mt-1`}>
-        <div className="flex justify-between items-center">
-          <div className="flex-1"></div>
-          <button 
-            onClick={handlePublish}
-            className='p-2 rounded cursor-pointer  border-2 font-mono border-red-100 focus:outline-none bg-[#000435] text-white hover:bg-[#801fc4]'>
-            {t("share")}
-          </button>
-          <div className="flex-1 flex justify-end">
+
+      <div className='flex flex-col h-screen -mt-28 sm:-mt-8'style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <Toaster />
+        <nav className={`text-[#000435] bg-white dark:text-white dark:bg-[#000435] p-16 sm:p-5 mt-20 sm:mt-1`}style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          <div className="flex justify-between items-center">
+            <div className="flex-1"></div>
             <button 
-              onClick={handleCopyToClipboard}
-              className='p-2 rounded cursor-pointer mr-2 font-mono  focus:outline-none gray-800 text-white bg-gray-800 gray-200 hover:bg-gray-600 h '>
-                <FaCopy />
-            </button>
-            <button
-              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-              className={`p-2 rounded cursor-pointer focus:outline-none bg-${theme === 'dark' ? 'gray-800 text-white hover:bg-gray-700' : 'gray-200 text-black hover:bg-gray-300'}`}
-            >
-              {theme === 'light' ? <CiDark className="text-xl" /> : <CiLight className="text-xl" />}
+              onClick={handlePublish}
+              className='p-2 rounded cursor-pointer  border-2 font-mono border-red-200 focus:outline-none text-[#801fc4] bg-white dark:text-white dark:bg-[#000490] hover:bg-sky-500 hover:text-white dark:hover:text-white dark:hover:bg-sky-500'>
+              {t("share")}
             </button>
+            <div className="flex-1 flex justify-end">
+              <button 
+                onClick={handleCopyToClipboard}
+                className='p-2 rounded cursor-pointer  border-2 font-mono border-red-200 focus:outline-none text-[#801fc4] bg-white dark:text-white dark:bg-[#000490] hover:bg-sky-500 hover:text-white dark:hover:text-white dark:hover:bg-sky-500 '>
+                  <FaCopy />
+              </button>
+            </div>
+          </div>
+        </nav>
+        <div className="flex flex-col lg:flex-row flex-1">
+          <div className="w-full lg:w-1/2 h-1/2 lg:h-full">
+            <MonacoEditor
+              height="100%"
+              language="html"
+              theme={ 'vs-dark'}
+              value={code}
+              onChange={(newValue) => {
+                if (newValue !== undefined) {
+                  setCode(newValue);
+                }
+              }}
+            />
+          </div>
+          <div className="w-full lg:w-1/2 h-1/2 lg:h-full">
+            <iframe
+              ref={outputRef}
+              style={{
+                width: '100%',
+                height: '100%',
+                border: 'none',
+                backgroundColor: "white"
+              }}
+            ></iframe>
           </div>
-        </div>
-      </nav>
-      <div className="flex flex-col lg:flex-row flex-1">
-        <div className="w-full lg:w-1/2 h-1/2 lg:h-full">
-          <MonacoEditor
-            height="100%"
-            language="html"
-            theme={theme === 'light' ? 'vs-light' : 'vs-dark'}
-            value={code}
-            onChange={(newValue) => {
-              if (newValue !== undefined) {
-                setCode(newValue);
-              }
-            }}
-          />
-        </div>
-        <div className="w-full lg:w-1/2 h-1/2 lg:h-full">
-          <iframe
-            ref={outputRef}
-            style={{
-              width: '100%',
-              height: '100%',
-              border: 'none',
-              backgroundColor: "white"
-            }}
-          ></iframe>
         </div>
       </div>
-    </div>
+
   );
 };
 
-export default CodeEditor;
+export default CodeEditor;
\ No newline at end of file
diff --git a/frontend/src/pages/Comment.tsx b/frontend/src/pages/Comment.tsx
index 69372e9f..f08c9000 100644
--- a/frontend/src/pages/Comment.tsx
+++ b/frontend/src/pages/Comment.tsx
@@ -74,13 +74,13 @@ const Comment = () => {
   }
   
   return (
-    <div className="">
+    <div className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
       <div>
         <h3 className="text-xl font-semibold mb-4">{comments.length} {t("postdet.comments")}</h3>
         {comments.length > 0 ? (
           <ul className="space-y-3">
           {comments.map((comment: IComment) => (
-            <li key={comment.id} className="border-b border-gray-700 pb-3 flex items-start space-x-3">
+            <li key={comment.id} className="border-b border-blue-500 pb-3 flex items-start space-x-3">
               <img
                 src={`https://ui-avatars.com/api/?name=${comment.user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`}
                 width={40}
@@ -94,21 +94,21 @@ const Comment = () => {
                     <span className="text-xs text-gray-500">{new Date(comment.createdAt).toLocaleString()}</span>
                   </strong>
                 </Link>
-                <p className="text-sm text-white">{comment.content}</p>
+                <p className="text-sm text-[#000435] bg-white dark:text-white dark:bg-[#000435]">{comment.content}</p>
               </div>
             </li>
           ))}
         </ul>
         
         ) : (
-          <p className="text-gray-300">{t("postdet.firstcomment")}</p>
+          <p className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]">{t("postdet.firstcomment")}</p>
         )}
       </div>
       <form onSubmit={handleCommentSubmit} className="mt-5">
         <textarea
           value={commentContent}
           onChange={(e) => setCommentContent(e.target.value)}
-          className="w-full p-2 bg-gray-800 border border-gray-700 rounded mb-2"
+          className="w-full p-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-gray-700 rounded mb-2"
           rows={2}
           placeholder={t("postdet.addcomment")}
           disabled={submitting}
@@ -127,4 +127,4 @@ const Comment = () => {
   );
 };
 
-export default Comment;
+export default Comment;
\ No newline at end of file
diff --git a/frontend/src/pages/ContactUs.tsx b/frontend/src/pages/ContactUs.tsx
index c1bb11de..94481aae 100644
--- a/frontend/src/pages/ContactUs.tsx
+++ b/frontend/src/pages/ContactUs.tsx
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import bgHero from "../assets/bgHero.png";
 
 function ContactUs() {
   const [name, setName] = useState("");
@@ -66,22 +67,23 @@ function ContactUs() {
     }
   };
   return (
-    <div className="text-white">
+
+    <div className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
       <section className="flex justify-center p-12 md:bg-grey-500">
-        <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+        <div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 border-blue-700 dark:border-sky-500"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
           <div className="max-w-md mx-auto mt-8 p-6 rounded-lg shadow-md">
-            <h2 className="text-3xl font-bold mb-4 text-white text-center">
+            <h2 className="text-3xl font-bold mb-4  text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
               Contact Us
             </h2>
             <form onSubmit={handleSubmit}>
               <div className="mb-4">
-                <label htmlFor="name" className="block text-white">
+                <label htmlFor="name" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
                   Name
                 </label>
                 <input
                   type="text"
                   id="name"
-                  className="form-input text-white mt-1 p-2 block w-full rounded-lg bg-gray-700"
+                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
                   placeholder="Your Name"
                   value={name}
                   onChange={(e) => setName(e.target.value)}
@@ -89,13 +91,13 @@ function ContactUs() {
                 />
               </div>
               <div className="mb-4">
-                <label htmlFor="email" className="block text-white">
+                <label htmlFor="email" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
                   Email
                 </label>
                 <input
                   type="email"
                   id="email"
-                  className="form-input text-white mt-1 p-2 block w-full rounded-lg bg-gray-700"
+                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
                   placeholder="your-email@example.com"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
@@ -103,13 +105,13 @@ function ContactUs() {
                 />
               </div>
               <div className="mb-4">
-                <label htmlFor="subject" className="block text-white">
+                <label htmlFor="subject" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
                   Subject
                 </label>
                 <input
                   type="text"
                   id="subject"
-                  className="form-input text-white mt-1 p-2 block w-full rounded-lg bg-gray-700"
+                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
                   placeholder="Subject"
                   value={subject}
                   onChange={(e) => setSubject(e.target.value)}
@@ -117,12 +119,12 @@ function ContactUs() {
                 />
               </div>
               <div className="mb-4">
-                <label htmlFor="message" className="block text-white">
+                <label htmlFor="message" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
                   Message
                 </label>
                 <textarea
                   id="message"
-                  className="form-input text-white mt-1 p-2 block w-full rounded-lg bg-gray-700"
+                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
                   placeholder="Your Message"
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
@@ -149,4 +151,4 @@ function ContactUs() {
   )
 }
 
-export default ContactUs
+export default ContactUs
\ No newline at end of file
diff --git a/frontend/src/pages/CustomizeWithAi.tsx b/frontend/src/pages/CustomizeWithAi.tsx
index 302cbccd..dde83ea0 100644
--- a/frontend/src/pages/CustomizeWithAi.tsx
+++ b/frontend/src/pages/CustomizeWithAi.tsx
@@ -7,6 +7,7 @@ import { useRecoilValue } from "recoil";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import PostCodeWithPreview from "../components/PostCodeWithPreview";
+import bgHero from "../assets/bgHero.png";
 
 const CustomizeWithAi = () => {
   const user = useRecoilValue(userState);
@@ -63,58 +64,60 @@ const CustomizeWithAi = () => {
   };
 
   return (
-    <div className="customize-page p-6 text-white max-w-screen-xl mx-auto">
-      <h1 className="text-3xl font-bold mb-5">✨ {t("postdet.cus")} ✨</h1>
-      <div className="mb-6">
-        <h2 className="text-xl font-semibold mb-2">😀 {t("custom.og")}</h2>
-        <PostCodeWithPreview
-          id={post.id}
-          isOwner={false}
-          codeSnippet={post.codeSnippet}
-          jsCodeSnippet={post.jsCodeSnippet}
-          handleCustomizeAi={() => {}}
-          showCustomizeAiOption={false}
-          showTogether={false}
-        />
-      </div>
-      <input
-        className="w-full p-3 mb-5 rounded bg-blue-950 backdrop-blur-sm "
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        placeholder={t("custom.des")}
-        required
-      />
-      {loading ? (
-        <button
-          className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded mb-4 cursor-not-allowed"
-          onClick={handleCustomize}
-        >
-          Please wait...
-        </button>
-      ) : (
-        <button
-          className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded mb-4"
-          onClick={handleCustomize}
-        >
-          {t("newPost.submit")}
-        </button>
-      )}
-      {customCode && (
-        <div className="mb-6">
-          <h2 className="text-xl font-semibold mb-2">
-            🌟 Customized Code Snippet
-          </h2>
-          <PostCodeWithPreview
-            id={post.id}
-            isOwner={false}
-            codeSnippet={customCode}
-            jsCodeSnippet={""}
-            handleCustomizeAi={() => {}}
-            showCustomizeAiOption={false}
-            showTogether={false}
+    <div className="-mt-20 w-full  text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="customize-page p-6  max-w-screen-xl mx-auto text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
+          <h1 className="text-3xl font-bold mb-5 text-[#9b42c4] bg-white dark:text-white dark:bg-[#000435]">✨ {t("postdet.cus")} ✨</h1>
+          <div className="mb-6">
+            <h2 className="text-xl font-semibold mb-2">😀 {t("custom.og")}</h2>
+            <PostCodeWithPreview
+              id={post.id}
+              isOwner={false}
+              codeSnippet={post.codeSnippet}
+              jsCodeSnippet={post.jsCodeSnippet}
+              handleCustomizeAi={() => {}}
+              showCustomizeAiOption={false}
+              showTogether={false}
+            />
+          </div>
+          <input
+            className="w-full p-3 mb-5 rounded text-[#000435] bg-white dark:text-white dark:bg-[#000435] border-2 border-sky-500 backdrop-blur-sm "
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("custom.des")}
+            required
           />
+          {loading ? (
+            <button
+              className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded mb-4 cursor-not-allowed"
+              onClick={handleCustomize}
+            >
+              Please wait...
+            </button>
+          ) : (
+            <button
+              className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded mb-4"
+              onClick={handleCustomize}
+            >
+              {t("newPost.submit")}
+            </button>
+          )}
+          {customCode && (
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold  text-[#9b42c4] dark:text-white mb-2">
+                🌟 Customized Code Snippet
+              </h2>
+              <PostCodeWithPreview
+                id={post.id}
+                isOwner={false}
+                codeSnippet={customCode}
+                jsCodeSnippet={""}
+                handleCustomizeAi={() => {}}
+                showCustomizeAiOption={false}
+                showTogether={false}
+              />
+            </div>
+          )}
         </div>
-      )}
     </div>
   );
 };
diff --git a/frontend/src/pages/EditPost.tsx b/frontend/src/pages/EditPost.tsx
index ebae25df..b62bad79 100644
--- a/frontend/src/pages/EditPost.tsx
+++ b/frontend/src/pages/EditPost.tsx
@@ -70,7 +70,7 @@ const EditPost = () => {
   }
 
   return (
-    <div className="p-6 text-white max-w-screen-xl mx-auto">
+    <div className="p-6 text-[#000435] bg-white dark:text-white dark:bg-[#000435] max-w-screen-xl mx-auto">
       <h2 className="text-2xl font-semibold mb-4">Edit Post</h2>
       <p className="mt-4">{error}</p>
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -84,7 +84,7 @@ const EditPost = () => {
             name="title"
             value={post.title}
             onChange={(e) => setPost({ ...post, title: e.target.value })}
-            className="w-full px-3 py-2 bg-gray-800 text-white border border-gray-700 rounded"
+            className="w-full px-3 py-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-blue-500 rounded"
           />
         </div>
         <div className="mb-4">
@@ -96,7 +96,7 @@ const EditPost = () => {
             name="description"
             value={post.description}
             onChange={(e) => setPost({ ...post, description: e.target.value })}
-            className="w-full px-3 py-2 bg-gray-800 text-white border border-gray-700 rounded"
+            className="w-full px-3 py-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-blue-500 rounded"
           />
         </div>
         <div className="mb-4">
@@ -108,7 +108,7 @@ const EditPost = () => {
             name="codeSnippet"
             value={post.codeSnippet}
             onChange={(e) => setPost({ ...post, codeSnippet: e.target.value })}
-            className="w-full px-3 py-2 bg-gray-800 text-white border border-gray-700 rounded"
+            className="w-full px-3 py-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-blue-500 rounded"
           />
         </div>
         <div className="mb-4">
@@ -120,7 +120,7 @@ const EditPost = () => {
             name="jsCodeSnippet"
             value={post.jsCodeSnippet}
             onChange={(e) => setPost({ ...post, jsCodeSnippet: e.target.value })}
-            className="w-full px-3 py-2 bg-gray-800 text-white border border-gray-700 rounded"
+            className="w-full px-3 py-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-blue-500 rounded"
           />
         </div>
         <div>
@@ -131,7 +131,7 @@ const EditPost = () => {
             {post.tags.map((tag) => (
               <span
                 key={tag}
-                className="inline-flex items-center px-2 py-1 bg-gray-700 text-sm rounded"
+                className="inline-flex items-center px-2 py-1  text-[#fff]  dark:text-white   bg-gray-700 text-sm rounded"
               >
                 {tag}
                 <button
@@ -149,7 +149,7 @@ const EditPost = () => {
             id="tagInput"
             value={tagInput}
             onChange={(e) => setTagInput(e.target.value)}
-            className="p-2 bg-gray-800 border border-gray-700 rounded"
+            className="p-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-blue-500 rounded"
           />
           <button
             type="button"
diff --git a/frontend/src/pages/Favorite.tsx b/frontend/src/pages/Favorite.tsx
index 1637562f..ab236c1a 100644
--- a/frontend/src/pages/Favorite.tsx
+++ b/frontend/src/pages/Favorite.tsx
@@ -6,6 +6,7 @@ import { tokenState, userState } from "../store/atoms/auth";
 import Loader from "../components/Loader";
 import PostCard from "../components/PostCard";
 import { useTranslation } from "react-i18next";
+import bgHero from "../assets/bgHero.png";
 
 const Favorite = () => {
   const user = useRecoilValue(userState);
@@ -15,6 +16,7 @@ const Favorite = () => {
   const token = useRecoilValue(tokenState);
   const currentUser = useRecoilValue(userState);
   const { t } = useTranslation();
+  
 
   const fetchFavoritePosts = async (user: IUser): Promise<IPost[]> => {
     try {
@@ -65,27 +67,29 @@ const Favorite = () => {
 
   return (
     <>
-      <div className="max-w-screen-xl mx-auto p-4 text-white flex flex-col items-center">
-      <div className="w-80 bg-blue-950 backdrop-blur-sm rounded-xl p-3 border border-sky-500 text-center text-xl font-semibold">
-      {t("myfavpost")} 😍
-      </div>
-      <div className="mt-8 w-full">
-        {favoritePosts.length > 0 ? (
-          <>
-            <h4 className="font-semibold">{t("favpost")} ( {favoritePosts.length} )</h4>
-            <div className="mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
-              {favoritePosts.map(post => (
-                <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser}/>
-              ))}
-            </div>
-          </>
-        ) : (
-          <div className="text-center text-lg text-gray-300 font-semibold">{t("nofav")} 😟</div>
-        )}
+      <div className="-mt-8 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="max-w-screen-xl mx-auto p-4 text-[#000435] bg-white dark:text-white dark:bg-[#000435] flex flex-col items-center">
+        <div className="w-80 text-[#000435] bg-white  backdrop-blur-sm rounded-xl p-3 border border-sky-500 text-center text-xl font-semibold dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        {t("myfavpost")} 😍
+        </div>
+        <div className="mt-8 w-full  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          {favoritePosts.length > 0 ? (
+            <>
+              <h4 className="font-semibold ">{t("favpost")} ( {favoritePosts.length} )</h4>
+              <div className=" mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full ">
+                {favoritePosts.map(post => (
+                  <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser}/>
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="text-center text-lg text-[#000435] font-semibold dark:text-white">{t("nofav")} 😟</div>
+          )}
+        </div>
+        </div>
       </div>
-    </div>
     </>
   );
 };
 
-export default Favorite;
+export default Favorite;
\ No newline at end of file
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 15678610..fc18290a 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -16,15 +16,15 @@ function Home() {
   const { t } = useTranslation();
   
   return (      
-  <div className="min-h-screen bg-[#000435] text-white" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-        <div className="w-full bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+  <div className="-mt-7 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="w-full  text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
           <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
             <div className="flex flex-col justify-center">
               <h1>
                 <TypewriterEffectSmoothDemo />
               </h1>
               <h1 className='md:text-3xl sm:text-3xl font-medium py-2'>{t("hero.subheading")}</h1>
-              <p className="text-lg text-gray-300 font-semibold">
+              <p className="text-lg  text-[#000435] bg-white dark:text-white dark:bg-[#000435] font-semibold">
                 <span> ✅ {t("hero.list.first")}</span><br />
                 <span> ✅ {t("hero.list.second")}</span><br />
                 <span> ✅ {t("hero.list.third")}</span><br />
@@ -32,7 +32,7 @@ function Home() {
               </p>
               <Link
                 to="/app/posts"
-                className='text-white mt-9'>
+                className=' text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-9'>
                 <MagicButton title={t("hero.button")} />
               </Link>
             </div>
diff --git a/frontend/src/pages/HomePagePosts.tsx b/frontend/src/pages/HomePagePosts.tsx
index 1cd0fbf9..6e1eb2cf 100644
--- a/frontend/src/pages/HomePagePosts.tsx
+++ b/frontend/src/pages/HomePagePosts.tsx
@@ -4,6 +4,7 @@ import { userState } from "../store/atoms/auth";
 import { useRecoilValue } from "recoil";
 import { useTranslation } from "react-i18next";
 import usePosts from "../hooks/usePosts";
+import bgHero from "../assets/bgHero.png";
 
 const HomePagePost = () => {
   const {posts, error, loading, handleDelete} = usePosts({ initialPage: 1, pageSize: -6 ,searchQuery: "", tags: []});
@@ -23,8 +24,8 @@ const HomePagePost = () => {
   }
 
   return (
-    <div className="max-w-screen-xl flex flex-col items-center justify-center mx-auto p-4">
-      <h1 className="text-3xl font-semibold my-4 text-white">
+    <div className="max-w-screen-xl flex flex-col items-center justify-center mx-auto p-4  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <h1 className="text-3xl font-semibold my-4  text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
         📃 {t("PostHeading")}
       </h1>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full my-10">
@@ -41,4 +42,4 @@ const HomePagePost = () => {
   );
 };
 
-export default HomePagePost;
+export default HomePagePost;
\ No newline at end of file
diff --git a/frontend/src/pages/LeaderBoard.tsx b/frontend/src/pages/LeaderBoard.tsx
index d39cce37..6e9a1d23 100644
--- a/frontend/src/pages/LeaderBoard.tsx
+++ b/frontend/src/pages/LeaderBoard.tsx
@@ -5,69 +5,73 @@ import { useRecoilValue } from 'recoil';
 import { userState } from '../store/atoms/auth';
 import { useTranslation } from 'react-i18next';
 import useLeaderboard from '../hooks/useLeadearboard';
+import bgHero from "../assets/bgHero.png";
 
-const LeaderBoard = () => {
+
+const LeaderBoard  = () => {
     const {loading, leaderboard} = useLeaderboard();
   const currentUser = useRecoilValue(userState);
   const {t} = useTranslation();
 
 
   return (
-    <div className="p-3 mb-10">
-      <h2 className="text-3xl font-bold text-center mb-8 text-gray-50">{t("navbar.links.leaderboard")} 🥳</h2>
-      <div className="shadow-md bg-blue-950 backdrop-blur-sm rounded-lg p-4 border-2 border-sky-500 lg:mx-52 md:mx-20 overflow-x-auto">
-        {loading ? (
-          <div className="flex justify-center">
-            <Loader />
-          </div>
-        ) : (
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className='text-center text-sm font-medium text-gray-100 border-b-2 border-sky-600 '>
-              <tr>
-                <th scope="col" className='px-6 py-3 text-gray-100 uppercase tracking-wider'>{t("leaderboard.rank")}</th>
-                <th scope="col" className='px-6 py-3 text-gray-100 uppercase tracking-wider'>{t("leaderboard.profile")}</th>
-                <th scope="col" className='px-6 py-3 text-gray-100 uppercase tracking-wider'>{t("leaderboard.username")}</th>
-                <th scope="col" className='px-6 py-3 text-gray-100 uppercase tracking-wider'>{t("leaderboard.posts")}</th>
-                <th scope="col" className='px-6 py-3 text-gray-100 uppercase tracking-wider'>{t("leaderboard.likes")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {leaderboard.map((user, index) => (
-                <tr
-                  key={user.userId}
-                  className={`text-center text-gray-50 border-b-2 border-sky-900 font-semibold ${currentUser && user.userId === currentUser.id ? ' bg-sky-500' : ''}`}
-                >
-                  <td className='px-6 py-4 '>
-                    {(index === 0 || index === 1 || index === 2) ? (
+    <div className="-mt-7 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+      <div className="p-3 mb-10 text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <h2 className={`text-3xl text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] font-bold text-center mb-8`}>{t("navbar.links.leaderboard")} 🥳</h2>
+        <div className="shadow-md text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-lg p-4 border-2 border-sky-500 lg:mx-52 md:mx-20 overflow-x-auto">
+          {loading ? (
+            <div className="flex justify-center">
+              <Loader />
+            </div>
+          ) : (
+            <table className="min-w-full divide-y divide-gray-200 ">
+              <thead className='text-center text-sm font-medium text-[#000435] bg-white dark:text-white dark:bg-[#5f67de] border-b-2 border-sky-600 '>
+                <tr>
+                  <th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.rank")}</th>
+                  <th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.profile")}</th>
+                  <th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.username")}</th>
+                  <th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.posts")}</th>
+                  <th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.likes")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {leaderboard.map((user, index) => (
+                  <tr
+                    key={user.userId}
+                    className={`text-center text-[#000435] dark:text-gray-50 border-b-2 border-sky-900 font-semibold ${currentUser && user.userId === currentUser.id ? ' bg-sky-500' : ''}`}
+                  >
+                    <td className='px-6 py-4 '>
+                      {(index === 0 || index === 1 || index === 2) ? (
+                        <div className="flex flex-col items-center">
+                          <GiTrophyCup className={index === 0 ? "text-[#FFD700] text-4xl" : index === 1 ? "text-[#C0C0C0] text-4xl" : "text-[#CD7F32] text-4xl"} />
+                        </div>
+                      ) : (
+                        user.rank
+                      )}
+                    </td>
+                    <td className='px-6 py-4 '>
                       <div className="flex flex-col items-center">
-                        <GiTrophyCup className={index === 0 ? "text-[#FFD700] text-4xl" : index === 1 ? "text-[#C0C0C0] text-4xl" : "text-[#CD7F32] text-4xl"} />
+                        <img className="h-8 w-8 rounded-full" src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
                       </div>
-                    ) : (
-                      user.rank
-                    )}
-                  </td>
-                  <td className='px-6 py-4 '>
-                    <div className="flex flex-col items-center">
-                      <img className="h-8 w-8 rounded-full" src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
-                    </div>
-                  </td>
-                  <td className='px-6 py-4 '>
-                    <Link to={`/app/profile/${user.userId}`} data-tooltip-content={`View ${user.username} profile 👀`} data-tooltip-id="my-tooltip" className={`text-sm text-gray-50 ${currentUser && user.userId === currentUser.id ? 'font-bold' : ''}`}>@{user.username}</Link>
-                  </td>
-                  <td className='px-6 py-4 '>
-                    <div className="text-sm text-gray-50">{user.postCount}</div>
-                  </td>
-                  <td className='px-6 py-4 '>
-                    <div className="text-sm text-gray-50">{user.totalLikes}</div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
+                    </td>
+                    <td className='px-6 py-4 '>
+                      <Link to={`/app/profile/${user.userId}`} data-tooltip-content={`View ${user.username} profile 👀`} data-tooltip-id="my-tooltip" className={`text-sm  dark:text-gray-50 ${currentUser && user.userId === currentUser.id ? 'font-bold' : ''}`}>@{user.username}</Link>
+                    </td>
+                    <td className='px-6 py-4 '>
+                      <div className="text-sm text-[#000435] dark:text-gray-50">{user.postCount}</div>
+                    </td>
+                    <td className='px-6 py-4 '>
+                      <div className="text-sm text-[#000435] dark:text-gray-50">{user.totalLikes}</div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
       </div>
     </div>
   );
 }
 
-export default LeaderBoard;
+export default LeaderBoard;
\ No newline at end of file
diff --git a/frontend/src/pages/NewPost.tsx b/frontend/src/pages/NewPost.tsx
index 85b19d9a..dcf3e485 100644
--- a/frontend/src/pages/NewPost.tsx
+++ b/frontend/src/pages/NewPost.tsx
@@ -5,6 +5,7 @@ import { tokenState } from "../store/atoms/auth";
 import { useNavigate, useLocation } from "react-router-dom";
 import toast from 'react-hot-toast';
 import { useTranslation } from "react-i18next";
+import bgHero from "../assets/bgHero.png";
 
 const NewPost = () => {
   const [title, setTitle] = useState("");
@@ -69,108 +70,110 @@ const NewPost = () => {
   };
 
   return (
-    <div className="border border-blue-900 rounded-lg p-6 text-white sm:max-w-[70%] max-w-[50vh] mx-auto m-10">
+    <div className=" min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="border  text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg p-6 sm:max-w-[70%] max-w-[50vh] mx-auto "style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
       <h2 className="text-2xl font-semibold mb-4 text-center">Create New Post</h2>
-      <p className="mt-4">{errorMessage}</p>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="title" className="block text-sm font-medium">
-          {t("newPost.createPost")}
-          </label>
-          <input
-            type="text"
-            id="title"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            required
-            className="mt-1 p-2 w-full bg-[#151569] border border-blue-900 rounded"
-          />
-        </div>
-        <div>
-          <label htmlFor="description" className="block text-sm font-medium">
-          {t("newPost.description")}
-          </label>
-          <textarea
-            id="description"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            required
-            className="mt-1 p-2 w-full bg-[#151569] border border-blue-900 rounded"
-          ></textarea>
-        </div>
-        <div>
-          <label htmlFor="codeSnippet" className="block text-sm font-medium">
-          {t("newPost.codeSnippet")}
-          </label>
-          <textarea
-            id="codeSnippet"
-            value={codeSnippet}
-            onChange={(e) => setCodeSnippet(e.target.value)}
-            className="mt-1 p-2 w-full bg-[#151569] border border-blue-900 rounded"
-          ></textarea>
-        </div>
-        <div>
-          <label htmlFor="jsCodeSnippet" className="block text-sm font-medium">
-          {t("newPost.jsCodeSnippet")}
-          </label>
-          <textarea
-            id="jsCodeSnippet"
-            value={jsCodeSnippet}
-            onChange={(e) => setJsCodeSnippet(e.target.value)}
-            className="mt-1 p-2 w-full bg-[#151569] border border-blue-900 rounded"
-            placeholder="Don't forget to include the script tags!"
-          ></textarea>
-        </div>
-        <div>
-          <label htmlFor="tags" className="block text-sm font-medium">
-          {t("newPost.tags")}
-          </label>
-          <div className="mt-1 mb-2 flex flex-wrap gap-2">
-            {tags.map((tag) => (
-              <span
-                key={tag}
-                className="inline-flex items-center px-2 py-1 bg-red-500 border border-red-900 text-sm rounded"
-              >
-                {tag}
-                <button
-                  type="button"
-                  onClick={() => handleRemoveTag(tag)}
-                  className="ml-2 text-gray-300 hover:text-white"
+        <p className="mt-4">{errorMessage}</p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="title" className="block text-sm font-medium">
+            {t("newPost.createPost")}
+            </label>
+            <input
+              type="text"
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+              className="mt-1 p-2 w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-500 rounded"
+            />
+          </div>
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium">
+            {t("newPost.description")}
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              required
+              className="mt-1 p-2 w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-500 rounded"
+            ></textarea>
+          </div>
+          <div>
+            <label htmlFor="codeSnippet" className="block text-sm font-medium">
+            {t("newPost.codeSnippet")}
+            </label>
+            <textarea
+              id="codeSnippet"
+              value={codeSnippet}
+              onChange={(e) => setCodeSnippet(e.target.value)}
+              className="mt-1 p-2 w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-500 rounded"
+            ></textarea>
+          </div>
+          <div>
+            <label htmlFor="jsCodeSnippet" className="block text-sm font-medium">
+            {t("newPost.jsCodeSnippet")}
+            </label>
+            <textarea
+              id="jsCodeSnippet"
+              value={jsCodeSnippet}
+              onChange={(e) => setJsCodeSnippet(e.target.value)}
+              className="mt-1 p-2 w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-500 rounded"
+              placeholder="Don't forget to include the script tags!"
+            ></textarea>
+          </div>
+          <div>
+            <label htmlFor="tags" className="block text-sm font-medium">
+            {t("newPost.tags")}
+            </label>
+            <div className="mt-1 mb-2 flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="inline-flex items-center px-2 py-1 text-white bg-red-500 border border-red-900 text-sm rounded"
                 >
-                  &times;
-                </button>
-              </span>
-            ))}
+                  {tag}
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveTag(tag)}
+                    className="ml-2 text-gray-100  hover:text-white"
+                  >
+                    &times;
+                  </button>
+                </span>
+              ))}
+            </div>
+            <div className="flex flex-col sm:flex-row gap-4">
+            <input
+              type="text"
+              id="tagInput"
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              className="p-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-500  rounded w-full"
+            />
+            <button
+              type="button"
+              onClick={handleAddTag}
+              className="p-2 text-[#000435] bg-sky-300 dark:text-blue-950 dark:bg-[#fff] border border-sky-500 hover:bg-sky-500 hover:text-white  dark:hover:bg-sky-500 dark:hover:text-white duration-300 rounded  w-1/3"
+            >
+              {t("allPosts.tag")}
+            </button>
+            
+              
+            </div>
           </div>
-          <div className="flex flex-col sm:flex-row gap-4">
-          <input
-            type="text"
-            id="tagInput"
-            value={tagInput}
-            onChange={(e) => setTagInput(e.target.value)}
-            className="p-2 bg-[#151569] border-blue-900 border rounded w-full"
-          />
+          <div className="flex justify-center items-center">
           <button
-            type="button"
-            onClick={handleAddTag}
-            className="p-2 bg-white hover:bg-gray-200 duration-300 rounded text-black w-1/3"
+            type="submit"
+            className="mt-4 py-2 px-24 w-full sm:w-fit bg-green-600 hover:bg-green-700 duration-300 rounded text-white"
           >
-            {t("allPosts.tag")}
+            {t("newPost.submit")}
           </button>
           
-            
           </div>
+        </form>
         </div>
-        <div className="flex justify-center items-center">
-        <button
-          type="submit"
-          className="mt-4 py-2 px-24 w-full sm:w-fit bg-green-600 hover:bg-green-700 duration-300 rounded text-white"
-        >
-          {t("newPost.submit")}
-        </button>
-        
-        </div>
-      </form>
     </div>
   );
 };
diff --git a/frontend/src/pages/Policy.tsx b/frontend/src/pages/Policy.tsx
index f85ce2d0..3cd6d0bb 100644
--- a/frontend/src/pages/Policy.tsx
+++ b/frontend/src/pages/Policy.tsx
@@ -21,7 +21,7 @@ function Policy() {
   }, [location]);
 
   return (
-    <div className="w-full bg-[#000435] py-16 px-4 text-white">
+    <div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] py-16 px-4 ">
       <div className="flex flex-col items-start">
         <div className="flex items-center mb-8 w-full">
           <img src={privacy} alt="Privacy" className="rounded-lg w-32 h-32 mr-8" />
@@ -125,4 +125,4 @@ function Policy() {
   );
 }
 
-export default Policy;
+export default Policy;
\ No newline at end of file
diff --git a/frontend/src/pages/Post.tsx b/frontend/src/pages/Post.tsx
index 69fa6b5a..702344d4 100644
--- a/frontend/src/pages/Post.tsx
+++ b/frontend/src/pages/Post.tsx
@@ -12,6 +12,7 @@ import usePost from "../hooks/usePost";
 import SharePostButtons from "../components/SharePostButtons";
 import ReactionButton from "../components/ReactionButtons";
 import PostCodeWithPreview from "../components/PostCodeWithPreview";
+import bgHero from "../assets/bgHero.png";
 
 const Post = () => {
   const { id } = useParams<{ id: string }>();
@@ -124,7 +125,8 @@ const Post = () => {
   };
 
   return (
-    <div className="p-6 text-white max-w-screen-xl mx-auto">
+    <div className="-mt-10 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="p-6  text-[#000435] bg-white dark:text-white dark:bg-[#000435] max-w-screen-xl mx-auto" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
       <>
         <button
           onClick={() => window.history.back()}
@@ -132,19 +134,19 @@ const Post = () => {
         >
           <IoMdArrowRoundBack size={20} />
         </button>
-        <div className="flex flex-row content-center mb-1">
-          <h2 className="text-2xl font-semibold mr-3">{post.title}</h2>
+        <div className="flex flex-row content-center mb-1 ">
+          <h2 className="text-2xl font-semibold mr-3 ">{post.title}</h2>
           {isFavorite ? (
             <MdFavorite
               onClick={handleRemoveFromFavorite}
               size={33}
-              className="cursor-pointer text-blue-600 "
+              className="cursor-pointer text-[#fe4c4c]  "
             />
           ) : (
             <MdFavoriteBorder
               onClick={handleAddToFavorite}
               size={33}
-              className="cursor-pointer text-white"
+              className="cursor-pointer text-[#e74e4e] bg-white dark:text-white dark:bg-[#000435] "
             />
           )}
         </div>
@@ -165,7 +167,7 @@ const Post = () => {
             {post.tags.map((tag, index) => (
               <span
                 key={index}
-                className="inline-flex items-center px-2 py-1 bg-gray-700 text-sm rounded"
+                className="inline-flex items-center px-2 py-1 text-[#fff] bg-sky-400 dark:text-white dark:bg-[#838387]  text-sm rounded"
               >
                 {tag}
               </span>
@@ -186,6 +188,7 @@ const Post = () => {
         <SharePostButtons shareUrl={shareUrl} title={title} />
         <Comment />
       </>
+        </div>
     </div>
   );
 };
diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx
index d4f3bd59..4e1e1f3c 100644
--- a/frontend/src/pages/Posts.tsx
+++ b/frontend/src/pages/Posts.tsx
@@ -5,6 +5,7 @@ import { userState } from "../store/atoms/auth";
 import { useRecoilValue } from "recoil";
 import { useTranslation } from "react-i18next";
 import usePosts from "../hooks/usePosts";
+import bgHero from "../assets/bgHero.png";
 
 const Posts = () => {
   const [showFilterDialog, setShowFilterDialog] = useState(false);
@@ -64,87 +65,89 @@ const Posts = () => {
   // );
 
   return (
-    <div className="max-w-screen-xl flex flex-col items-center justify-center mx-auto p-4">
-      <h1 className="text-2xl font-semibold mb-4 text-white">
-        {t("allPosts.Posts")}
-      </h1>
-      <div className="w-full flex justify-between mb-4 relative">
-        <button
-          onClick={toggleFilterDialog}
-          className="flex items-center text-white hover:text-gray-400"
-        >
-          {t("allPosts.filter")}
-          <svg
-            className="w-4 h-4 ml-2"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+    <div className="-mt-7 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+      <div className="max-w-screen-xl flex flex-col items-center justify-center mx-auto p-4"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <h1 className="text-2xl font-semibold mb-4 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435]">
+          {t("allPosts.Posts")}
+        </h1>
+        <div className="w-full flex justify-between mb-4 relative">
+          <button
+            onClick={toggleFilterDialog}
+            className="flex items-center text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] hover:text-blue-400"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M19 9l-7 7-7-7"
-            ></path>
-          </svg>
-        </button>
-        {showFilterDialog && (
-          <div
-            ref={filterRef}
-            className="absolute top-full mt-2 bg-gray-800 p-4 rounded shadow-lg w-full max-w-md"
-          >
-            <div className="mb-2">
-              <input
-                type="text"
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={t("allPosts.tag")}
-                className="p-2 w-full rounded bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
-              />
-            </div>
-            <button
-              onClick={addTag}
-              className="px-4 py-2 text-white border border-gray-600 rounded hover:bg-gray-700"
+            {t("allPosts.filter")}
+            <svg
+              className="w-4 h-4 ml-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M19 9l-7 7-7-7"
+              ></path>
+            </svg>
+          </button>
+          {showFilterDialog && (
+            <div
+              ref={filterRef}
+              className="absolute top-full mt-2 bg-gray-800 p-4 rounded shadow-lg w-full max-w-md"
             >
-              {t("allPosts.tag")}
-            </button>
-            <div className="mt-2 flex flex-wrap">
-              {filterTags.map((tag, index) => (
-                <div
-                  key={index}
-                  className="flex items-center bg-gray-700 text-white px-2 py-1 rounded mr-2 mb-2"
-                >
-                  <span>{tag}</span>
-                  <button
-                    onClick={() => removeTag(tag)}
-                    className="ml-2 focus:outline-none"
+              <div className="mb-2">
+                <input
+                  type="text"
+                  value={tagInput}
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={t("allPosts.tag")}
+                  className="p-2 w-full rounded bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
+                />
+              </div>
+              <button
+                onClick={addTag}
+                className="px-4 py-2 text-white border border-gray-600 rounded hover:bg-gray-700"
+              >
+                {t("allPosts.tag")}
+              </button>
+              <div className="mt-2 flex flex-wrap">
+                {filterTags.map((tag, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center bg-gray-700 text-white px-2 py-1 rounded mr-2 mb-2"
                   >
-                    <svg
-                      className="w-4 h-4 fill-current text-red-500"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span>{tag}</span>
+                    <button
+                      onClick={() => removeTag(tag)}
+                      className="ml-2 focus:outline-none"
                     >
-                      <path d="M10 0c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm5 13.586-1.414 1.414-3.586-3.586-3.586 3.586-1.414-1.414 3.586-3.586-3.586-3.586 1.414-1.414 3.586 3.586 3.586-3.586 1.414 1.414-3.586 3.586 3.586 3.586z" />
-                    </svg>
-                  </button>
-                </div>
-              ))}
+                      <svg
+                        className="w-4 h-4 fill-current text-red-500"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M10 0c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm5 13.586-1.414 1.414-3.586-3.586-3.586 3.586-1.414-1.414 3.586-3.586-3.586-3.586 1.414-1.414 3.586 3.586 3.586-3.586 1.414 1.414-3.586 3.586 3.586 3.586z" />
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-          }}
-          placeholder={t("allPosts.search")}
-          className="p-2 w-full max-w-xs rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-        />
+          )}
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+            }}
+            placeholder={t("allPosts.search")}
+            className="p-2 w-full max-w-xs rounded-md text-[#000435] bg-white dark:text-white dark:bg-[#000435] border border-sky-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <PostListWithPagination searchQuery={searchQuery} tags={filterTags} />
       </div>
-      <PostListWithPagination searchQuery={searchQuery} tags={filterTags} />
     </div>
   );
 };
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 3d712d5c..d1b6e2eb 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -11,8 +11,10 @@ import { MdOutlineMailOutline } from "react-icons/md";
 import { AiTwotoneInfoCircle } from "react-icons/ai";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import bgHero from "../assets/bgHero.png";
 
-const Profile = () => {
+
+const Profile = ()=> {
   const [posts, setPosts] = useState<IPost[]>([]);
   const [user, setUser] = useState<IUser | null>(null);
   const [loading, setLoading] = useState(true);
@@ -23,6 +25,7 @@ const Profile = () => {
   const token = useRecoilValue(tokenState);
   const currentUser = useRecoilValue(userState);
   const { t } = useTranslation();
+  
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -97,53 +100,57 @@ const Profile = () => {
 
   return (
     <>
-      <div className="max-w-screen-xl mx-auto p-4 text-white flex flex-col items-center">
-        <div className="w-80 bg-blue-950 backdrop-blur-sm rounded-xl p-3 border border-sky-500">
-          <div className="p-2 flex justify-end mr-2">
-            {
-              user?.verified ?
-                <GoVerified className="text-2xl text-white" title="Verified" />
-                :
-                <GoUnverified className="text-2xl text-white" title="Unverified" />
-            }
-          </div>
-          <div className="flex flex-col items-center mb-3">
-            <img src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} width={60} alt="profile-pic" />
-            <p className="p-4 text-xl">{user?.username}</p>
-            <p className="text-sky-400 flex items-center"><MdOutlineMailOutline className="text-xl" /> <span className="ml-2 text-sm">{user?.email}</span></p>
-          </div>
-        </div>
-        {
-          !user?.verified && (
-            <div className="w-80 mt-6 bg-red-950 backdrop-blur-sm rounded-sm p-3 border border-dashed border-red-500">
-              <div className="flex justify-between items-center">
-                <p className="font-sans text-sm text-white">Please verify your account</p>
-                <button className="bg-red-500 py-2 px-3 rounded-md text-sm hover:bg-red-600" onClick={handleGenerateOtp}>{otpSent ? "Resend OTP" : "Verify"}</button>
-              </div>
-              {
-                otpSent && (
-                  <form method="post" action="#" className="flex justify-around items-center mt-5 mb-4" onSubmit={(e)=>{
-                    e.preventDefault()
-                    handleVerifyOtp()
-                  }}>
-                    <input className="outline-none py-2 px-8 text-black text-md box-content" placeholder="Enter OTP" type="number" name="otp" id="otp" onChange={(e) => { setOtp(e.target.value) }} value={otp} min={100000} max={999999} required />
-                    <button className="bg-blue-500 py-2 px-5 rounded-md text-xs hover:bg-blue-600">Verify OTP</button>
-                  </form>
-                )
-              }
+      <div className="-mt-5 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="w-full max-w-screen-xl mx-auto p-4  flex flex-col items-center  text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+
+          <div className="w-80   text-[#000435] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-xl p-3 border border-sky-500" >
+            <div className="p-2 flex justify-end mr-2 ">
               {
-                verificationError && (
-                  <div className="py-2 text-sm text-red-300 flex justify-start flex-wrap items-center font-mono"><AiTwotoneInfoCircle className="text-red-500 text-lg me-2" />{verificationError}</div>
-                )
+                user?.verified ?
+                  <GoVerified className="text-2xl text-[#000435] bg-white dark:text-white dark:bg-[#000435]" title="Verified" />
+                  :
+                  <GoUnverified className="text-2xl text-[#000435] bg-white dark:text-white dark:bg-[#000435]" title="Unverified" />
               }
             </div>
-          )
-        }
-        <div className="mt-8 w-full">
-          <h4 className="font-semibold">{t("leaderboard.posts")} ( {user?.posts.length} )</h4>
-          <div className="mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
+            <div className="flex flex-col items-center mb-3">
+              <img src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} width={60} alt="profile-pic" />
+              <p className="p-4 text-xl">{user?.username}</p>
+              <p className="text-sky-400 flex items-center "><MdOutlineMailOutline className="text-xl " /> <span className="ml-2 text-sm">{user?.email}</span></p>
+            </div>
+          </div>
+          {
+            !user?.verified && (
+              <div className="w-80 mt-6 bg-red-950 backdrop-blur-sm rounded-sm p-3 border border-dashed border-red-500">
+                <div className="flex justify-between items-center">
+                  <p className="font-sans text-sm text-white">Please verify your account</p>
+                  <button className="bg-red-500 py-2 px-3 rounded-md text-sm hover:bg-red-600" onClick={handleGenerateOtp}>{otpSent ? "Resend OTP" : "Verify"}</button>
+                </div>
+                {
+                  otpSent && (
+                    <form method="post" action="#" className="flex justify-around items-center mt-5 mb-4" onSubmit={(e)=>{
+                      e.preventDefault()
+                      handleVerifyOtp()
+                    }}>
+                      <input className="outline-none py-2 px-8 text-black text-md box-content" placeholder="Enter OTP" type="number" name="otp" id="otp" onChange={(e) => { setOtp(e.target.value) }} value={otp} min={100000} max={999999} required />
+                      <button className="bg-blue-500 py-2 px-5 rounded-md text-xs hover:bg-blue-600">Verify OTP</button>
+                    </form>
+                  )
+                }
+                {
+                  verificationError && (
+                    <div className="py-2 text-sm text-red-300 flex justify-start flex-wrap items-center font-mono"><AiTwotoneInfoCircle className="text-red-500 text-lg me-2" />{verificationError}</div>
+                  )
+                }
+              </div>
+            )
+          }
+          <div className="mt-8 w-full">
+            <h4 className={` text-[#000435] dark:text-white font-semibold`}>
+              {t("leaderboard.posts")} ( {user?.posts.length} )</h4>
+            <div className="mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
 
-            {user?.posts.map(post => <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser} />)}
+              {user?.posts.map(post => <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser} />)}
+            </div>
           </div>
         </div>
       </div>
@@ -151,4 +158,4 @@ const Profile = () => {
   );
 };
 
-export default Profile;
+export default Profile;
\ No newline at end of file
diff --git a/frontend/src/pages/ShowProfile.tsx b/frontend/src/pages/ShowProfile.tsx
index b70c655c..097654c0 100644
--- a/frontend/src/pages/ShowProfile.tsx
+++ b/frontend/src/pages/ShowProfile.tsx
@@ -8,6 +8,7 @@ import { useRecoilValue } from 'recoil';
 import { userState } from '../store/atoms/auth';
 import Loader from '../components/Loader';
 import { GoUnverified, GoVerified } from 'react-icons/go';
+import bgHero from "../assets/bgHero.png";
 
 const ShowProfile = () => {
   const { id } = useParams();
@@ -32,7 +33,7 @@ const ShowProfile = () => {
     };
 
     fetchUserProfile();
-  }, [id]);
+  }, [id, posts]);
 
   const handleDelete = (id: string) => {
     setPosts((prevPosts) => prevPosts.filter((post) => post.id !== id));
@@ -53,33 +54,35 @@ const ShowProfile = () => {
   };
 
   return (
-    <div className="max-w-screen-xl mx-auto p-4 text-white flex flex-col items-center">
-        <div className="w-80 bg-blue-950 backdrop-blur-sm rounded-xl p-3 border border-sky-500">
-          <div className="p-2 flex justify-end mr-2">
-            {
-              user?.verified ?
-                <GoVerified className="text-2xl text-white" title="Verified" />
-                :
-                <GoUnverified className="text-2xl text-white" title="Unverified" />
-            }
+    <div className="-mt-5 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+        <div className="max-w-screen-xl mx-auto p-4 text-[#000435] bg-white dark:text-white dark:bg-[#000435] flex flex-col items-center"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          <div className="w-80 text-[#000435] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-xl p-3 border border-sky-500">
+            <div className="p-2 flex justify-end mr-2">
+              {
+                user?.verified ?
+                  <GoVerified className="text-2xl text-[#000435] bg-white dark:text-white dark:bg-[#000435]" title="Verified" />
+                  :
+                  <GoUnverified className="text-2xl text-[#000435] bg-white dark:text-white dark:bg-[#000435]" title="Unverified" />
+              }
+            </div>
+            <div className="flex flex-col items-center mb-3">
+              <img src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} width={60} alt="profile-pic" />
+              <p className="p-4 text-xl">{user?.username}</p>
+              <p className="text-sky-400 flex items-center">
+              <span className="ml-2 text-base font-semibold">Joined: {formatDate(user?.createdAt)}</span>
+            </p>          
+            </div>
           </div>
-          <div className="flex flex-col items-center mb-3">
-            <img src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} width={60} alt="profile-pic" />
-            <p className="p-4 text-xl">{user?.username}</p>
-            <p className="text-sky-400 flex items-center">
-            <span className="ml-2 text-base font-semibold">Joined: {formatDate(user?.createdAt)}</span>
-          </p>          
-          </div>
-        </div>
-        <div className="mt-8 w-full">
-          <h4 className="font-semibold">{t("leaderboard.posts")} ( {user?.posts.length} )</h4>
-          <div className="mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
+          <div className="mt-8 w-full">
+            <h4 className="font-semibold">{t("leaderboard.posts")} ( {user?.posts.length} )</h4>
+            <div className="mt-6 mb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
 
-            {user?.posts.map(post => <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser} />)}
+              {user?.posts.map(post => <PostCard key={post.id} post={post} onDelete={handleDelete} currentUser={currentUser} />)}
+            </div>
           </div>
         </div>
-      </div>
+    </div>
   );
 };
 
-export default ShowProfile;
+export default ShowProfile;
\ No newline at end of file
diff --git a/frontend/src/pages/Signin.tsx b/frontend/src/pages/Signin.tsx
index 7647c72d..0d777edd 100644
--- a/frontend/src/pages/Signin.tsx
+++ b/frontend/src/pages/Signin.tsx
@@ -6,6 +6,7 @@ import { tokenState } from "../store/atoms/auth";
 import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import bgHero from "../assets/bgHero.png";
 
 const Signin = () => {
   const [email, setEmail] = useState("");
@@ -50,79 +51,81 @@ const Signin = () => {
   };
 
   return (
-    <section className=" flex justify-center p-12 md:bg-grey-500">
-    <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+    <div className="-mt-8 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+      <section className=" flex justify-center p-12 md:bg-grey-500">
+      <div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000453] rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0  "style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
 
-    <div className="max-w-md mx-auto mt-8 p-6  rounded-lg shadow-md">
-      <h2 className="text-3xl font-bold mb-4 text-white text-center">
-      {t("login.sigin")}
-      </h2>
-      <form onSubmit={handleSubmit}>
-        <div className="mb-4">
-          <label htmlFor="email" className="block text-white">
-          {t("login.email")}
-          </label>
-          <input
-            type="email"
-            id="email"
-            className="form-input text-white mt-1 p-2 block w-full rounded-lg bg-gray-700"
-            placeholder="john@gmail.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-          <p className="text-sm  font-semibold mb-2 text-red-600">
-            {error.email}
-          </p>
-        </div>
-        <div className="mb-4">
-          <label htmlFor="password" className="block text-white relative">
-          {t("login.password")}
-          <input
-             type={showPassword ? "text" : "password"}
-            id="password"
-            className="form-input mt-1 p-2 block w-full text-white rounded-lg bg-gray-700"
-            placeholder="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required/>
-            <span
-            onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-[38px] cursor-pointer ">
-            {showPassword ? (
-                <AiOutlineEyeInvisible
-                    fontSize={24}
-                    fill="#AFB2BF"
-                />
-            ) : (
-                <AiOutlineEye fontSize={24} fill="#AFB2BF" />
-            )}
-            </span>
-          </label>
-                              
-          <p className="text-sm font-semibold mb-2 text-red-600">
-            {error.password}
-          </p>
-        </div>
-        <div className="flex justify-center">
-        <button
-          type="submit"
-          className=" bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
-        >
-          {t("login.sigin")}
-        </button>
-        </div>
-      </form>
-      <p className=" mt-4 text-md text-white">
-      {t("login.noAccount")} -
-        <Link to="/app/signup" className="text-blue-500 text-lg p-2">
-        {t("register.signup")}
-        </Link>
-      </p>
+      <div className="max-w-md mx-auto mt-8 p-6  rounded-lg shadow-md">
+        <h2 className="text-3xl font-bold mb-4 text-[#5f67de] dark:text-white text-center">
+        {t("login.sigin")}
+        </h2>
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-[#5f67de] dark:text-white">
+            {t("login.email")}
+            </label>
+            <input
+              type="email"
+              id="email"
+              className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000453] border border-[#5f67de] dark:border-white mt-1 p-2 block w-full rounded-lg  "
+              placeholder="john@gmail.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <p className="text-sm  font-semibold mb-2 text-red-600">
+              {error.email}
+            </p>
+          </div>
+          <div className="mb-4">
+            <label htmlFor="password" className="block text-[#5f67de] dark:text-white relative">
+            {t("login.password")}
+            <input
+              type={showPassword ? "text" : "password"}
+              id="password"
+              className="form-input mt-1 p-2 block w-full text-[#000435] bg-white dark:text-white dark:bg-[#000453] rounded-lg border border-[#5f67de] dark:border-white "
+              placeholder="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required/>
+              <span
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-[38px] cursor-pointer ">
+              {showPassword ? (
+                  <AiOutlineEyeInvisible
+                      fontSize={24}
+                      fill="#AFB2BF"
+                  />
+              ) : (
+                  <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+              )}
+              </span>
+            </label>
+                                
+            <p className="text-sm font-semibold mb-2 text-red-600">
+              {error.password}
+            </p>
+          </div>
+          <div className="flex justify-center">
+          <button
+            type="submit"
+            className=" bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
+          >
+            {t("login.sigin")}
+          </button>
+          </div>
+        </form>
+        <p className=" mt-4 text-md text-[#000435] bg-white dark:text-white dark:bg-[#000453]">
+        {t("login.noAccount")} -
+          <Link to="/app/signup" className="text-blue-500 text-lg p-2">
+          {t("register.signup")}
+          </Link>
+        </p>
+      </div>
+      </div>
+      </section>
     </div>
-    </div>
-    </section>
   );
 };
 
-export default Signin;
+export default Signin;
\ No newline at end of file
diff --git a/frontend/src/pages/Signup.tsx b/frontend/src/pages/Signup.tsx
index 8e3b0bf5..8685a27b 100644
--- a/frontend/src/pages/Signup.tsx
+++ b/frontend/src/pages/Signup.tsx
@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faCircle } from "@fortawesome/free-solid-svg-icons";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import bgHero from "../assets/bgHero.png";
 
 const Signup = () => {
   const [username, setUsername] = useState("");
@@ -83,178 +84,180 @@ const Signup = () => {
   };
 
   return (
-    <section className="flex justify-center p-10 md:bg-grey-500">
-      <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-        <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-          <h2 className="text-3xl font-bold mb-4 text-white text-center">
-          {t("register.signup")}
-          </h2>
-          <p className="text-lg font-semibold mb-2 text-red-600 text-center">
-            {error.message}
-          </p>
-          <form onSubmit={handleSubmit}>
-            <div className="mb-4">
-              <label htmlFor="username" className="block text-gray-200">
-              {t("register.username")}
-              </label>
-              <input
-                type="text"
-                id="username"
-                className="form-input mt-1 p-2 block w-full rounded-lg bg-gray-700 text-white"
-                value={username}
-                placeholder="John Doe"
-                onChange={(e) => setUsername(e.target.value)}
-                required
-              />
-            </div>
-            <p className="text-sm font-semibold mb-2 text-red-600">
-              {error.username}
+    <div className="-mt-8 min-h-screen  text-[#000435] bg-white dark:text-white dark:bg-[#000435]"  style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
+      <section className="flex justify-center p-10 md:bg-grey-500">
+        <div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000453] rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0  dark:border-gray-700"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+            <h2 className="text-3xl font-bold mb-4 text-[#5f67de] dark:text-white text-center">
+            {t("register.signup")}
+            </h2>
+            <p className="text-lg font-semibold mb-2 text-red-600 text-center">
+              {error.message}
             </p>
-            <div className="mb-4">
-              <label htmlFor="email" className="block text-gray-200">
-              {t("login.email")}
-              </label>
-              <input
-                type="email"
-                id="email"
-                className="form-input mt-1 p-2 block w-full rounded-lg text-white bg-gray-700"
-                placeholder="john@gmail.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
+            <form onSubmit={handleSubmit}>
+              <div className="mb-4">
+                <label htmlFor="username" className="block text-[#5f67de] dark:text-white">
+                {t("register.username")}
+                </label>
+                <input
+                  type="text"
+                  id="username"
+                  className="form-input mt-1 p-2 block w-full rounded-lg text-[#000435] bg-white dark:text-white dark:bg-[#000453] border border-[#5f67de] dark:border-white"
+                  value={username}
+                  placeholder="John Doe"
+                  onChange={(e) => setUsername(e.target.value)}
+                  required
+                />
+              </div>
               <p className="text-sm font-semibold mb-2 text-red-600">
-                {error.email}
+                {error.username}
               </p>
-            </div>
-            <div className="mb-4">
-              <label
-                htmlFor="password"
-                className="block text-gray-200 relative"
-              >
-                {t("login.password")}
+              <div className="mb-4">
+                <label htmlFor="email" className="block text-[#5f67de] dark:text-white">
+                {t("login.email")}
+                </label>
                 <input
-                  type={showPassword ? "text" : "password"}
-                  id="password"
-                  className="form-input mt-1 p-2 block w-full rounded-lg text-white bg-gray-700"
-                  placeholder="password"
-                  value={password}
-                  onChange={handlePasswordChange}
+                  type="email"
+                  id="email"
+                  className="form-input mt-1 p-2 block w-full rounded-lg text-[#000435] bg-white dark:text-white dark:bg-[#000453] border border-[#5f67de] dark:border-white"
+                  placeholder="john@gmail.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
                   required
                 />
-                <span
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-[38px] cursor-pointer"
+                <p className="text-sm font-semibold mb-2 text-red-600">
+                  {error.email}
+                </p>
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="password"
+                  className="block text-[#5f67de] dark:text-white relative"
                 >
-                  {showPassword ? (
-                    <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
-                  ) : (
-                    <AiOutlineEye fontSize={24} fill="#AFB2BF" />
-                  )}
-                </span>
-              </label>
-              {passwordStrength && (
-                <div className="mt-2">
-                  <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-                    <div
-                      className={`h-2.5 rounded-full ${strengthMeterColor(
-                        passwordStrength.score
-                      )}`}
-                      style={{ width: `${(passwordStrength.score + 1) * 20}%` }}
-                    ></div>
-                  </div>
-                  <p className="text-gray-400 text-sm">
-                    {
-                      ["Weak", "Fair", "Good", "Strong", "Very Strong"][
-                        passwordStrength.score
-                      ]
-                    }
-                  </p>
-                </div>
-              )}
-              <ul className="list-none text-gray-400 text-sm mt-2">
-                <li className="text-sm">
-                  <span className="low-upper-case">
-                    <FontAwesomeIcon
-                      icon={
-                        /([a-z].*[A-Z])|([A-Z].*[a-z])/.test(password)
-                          ? faCheck
-                          : faCircle
-                      }
-                      className={
-                        /([a-z].*[A-Z])|([A-Z].*[a-z])/.test(password)
-                          ? "text-green-600"
-                          : "text-gray-400"
-                      }
-                    />
-                    &nbsp;Lowercase & Uppercase
-                  </span>
-                </li>
-                <li className="text-sm">
-                  <span className="one-number">
-                    <FontAwesomeIcon
-                      icon={/([0-9])/.test(password) ? faCheck : faCircle}
-                      className={
-                        /([0-9])/.test(password)
-                          ? "text-green-600"
-                          : "text-gray-400"
-                      }
-                    />
-                    &nbsp;Number (0-9)
+                  {t("login.password")}
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    id="password"
+                    className="form-input mt-1 p-2 block w-full rounded-lg text-[#000435] bg-white dark:text-white dark:bg-[#000453] border border-[#5f67de] dark:border-white"
+                    placeholder="password"
+                    value={password}
+                    onChange={handlePasswordChange}
+                    required
+                  />
+                  <span
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-[38px] cursor-pointer"
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
+                    ) : (
+                      <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+                    )}
                   </span>
-                </li>
-                <li className="text-sm">
-                  <span className="one-special-char">
-                    <FontAwesomeIcon
-                      icon={
-                        /([!,%,&,@,#,$,^,*,?,_,~])/.test(password)
-                          ? faCheck
-                          : faCircle
+                </label>
+                {passwordStrength && (
+                  <div className="mt-2">
+                    <div className="w-full text-[#5f67de] dark:text-white rounded-full h-2.5 dark:bg-gray-700">
+                      <div
+                        className={`h-2.5 rounded-full ${strengthMeterColor(
+                          passwordStrength.score
+                        )}`}
+                        style={{ width: `${(passwordStrength.score + 1) * 20}%` }}
+                      ></div>
+                    </div>
+                    <p className="text-[#5f67de] dark:text-white text-sm">
+                      {
+                        ["Weak", "Fair", "Good", "Strong", "Very Strong"][
+                          passwordStrength.score
+                        ]
                       }
-                      className={
-                        /([!,%,&,@,#,$,^,*,?,_,~])/.test(password)
-                          ? "text-green-600"
-                          : "text-gray-400"
-                      }
-                    />
-                    &nbsp;Special Character (!@#$%^&*)
-                  </span>
-                </li>
-                <li className="text-sm">
-                  <span className="eight-character">
-                    <FontAwesomeIcon
-                      icon={password.length > 7 ? faCheck : faCircle}
-                      className={
-                        password.length > 7 ? "text-green-600" : "text-gray-400"
-                      }
-                    />
-                    &nbsp;At least 8 Characters
-                  </span>
-                </li>
-              </ul>
-            </div>
-            <p className="text-sm font-semibold mb-2 text-red-600">
-              {error.password}
+                    </p>
+                  </div>
+                )}
+                <ul className="list-none text-[#5f67de] dark:text-white text-sm mt-2">
+                  <li className="text-sm">
+                    <span className="low-upper-case">
+                      <FontAwesomeIcon
+                        icon={
+                          /([a-z].*[A-Z])|([A-Z].*[a-z])/.test(password)
+                            ? faCheck
+                            : faCircle
+                        }
+                        className={
+                          /([a-z].*[A-Z])|([A-Z].*[a-z])/.test(password)
+                            ? "text-green-600"
+                            : "text-gray-400"
+                        }
+                      />
+                      &nbsp;Lowercase & Uppercase
+                    </span>
+                  </li>
+                  <li className="text-sm">
+                    <span className="one-number">
+                      <FontAwesomeIcon
+                        icon={/([0-9])/.test(password) ? faCheck : faCircle}
+                        className={
+                          /([0-9])/.test(password)
+                            ? "text-green-600"
+                            : "text-gray-400"
+                        }
+                      />
+                      &nbsp;Number (0-9)
+                    </span>
+                  </li>
+                  <li className="text-sm">
+                    <span className="one-special-char">
+                      <FontAwesomeIcon
+                        icon={
+                          /([!,%,&,@,#,$,^,*,?,_,~])/.test(password)
+                            ? faCheck
+                            : faCircle
+                        }
+                        className={
+                          /([!,%,&,@,#,$,^,*,?,_,~])/.test(password)
+                            ? "text-green-600"
+                            : "text-gray-400"
+                        }
+                      />
+                      &nbsp;Special Character (!@#$%^&*)
+                    </span>
+                  </li>
+                  <li className="text-sm">
+                    <span className="eight-character">
+                      <FontAwesomeIcon
+                        icon={password.length > 7 ? faCheck : faCircle}
+                        className={
+                          password.length > 7 ? "text-green-600" : "text-gray-400"
+                        }
+                      />
+                      &nbsp;At least 8 Characters
+                    </span>
+                  </li>
+                </ul>
+              </div>
+              <p className="text-sm font-semibold mb-2 text-red-600">
+                {error.password}
+              </p>
+              <div className="flex justify-center">
+                <button
+                  type="submit"
+                  className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full"
+                >
+                  {t("register.signup")}
+                </button>
+              </div>
+            </form>
+            <p className="mt-4 text-sm text-[#000435] bg-white dark:text-white dark:bg-[#000453]">
+            {t("register.alAccount")}{" "}
+              <Link to="/app/signin" className="text-blue-500">
+              {t("login.sigin")}
+              </Link>
             </p>
-            <div className="flex justify-center">
-              <button
-                type="submit"
-                className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full"
-              >
-                {t("register.signup")}
-              </button>
-            </div>
-          </form>
-          <p className="mt-4 text-sm text-white">
-          {t("register.alAccount")}{" "}
-            <Link to="/app/signin" className="text-blue-500">
-            {t("login.sigin")}
-            </Link>
-          </p>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 };
 
-export default Signup;
+export default Signup;
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9037cd42..f312312b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode:'class',
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {