diff --git a/.env b/.env
new file mode 100644
index 00000000..79631b52
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+   PRIVATE_KEY=011d4ba8e7b549ee9cd718df4c25abed
+   RPC_URL_SEPOLIA=https://eth-mainnet.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk
+   RPC_URL_FUJI=https://avax-fuji.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk
+   ETHERSCAN_KEY=WCU9BD1WA1835GAU9VBTGSPA2DGEPQHYSF
\ No newline at end of file
diff --git a/blockchain/.env.example b/blockchain/.env.example
deleted file mode 100644
index d26c2bc2..00000000
--- a/blockchain/.env.example
+++ /dev/null
@@ -1,6 +0,0 @@
-PRIVATE_KEY = ENTER_YOUR_KEY_VALUE
-RPC_URL_SEPOLIA = ENTER_YOUR_KEY_VALUE
-RPC_URL_FUJI = ENTER_YOUR_KEY_VALUE
-RPC_URL_AMOY = ENTER_YOUR_KEY_VALUE
-RPC_URL_BSC = ENTER_YOUR_KEY_VALUE
-ETHERSCAN_KEY = ENTER_YOUR_KEY_VALUE
diff --git a/client/.env.example b/client/.env.example
deleted file mode 100644
index 16d49007..00000000
--- a/client/.env.example
+++ /dev/null
@@ -1,4 +0,0 @@
-NEXT_PUBLIC_SEPOLIA_RPC_URL = ENTER_RPC_URL
-NEXT_PUBLIC_AMOY_RPC_URL = ENTER_RPC_URL
-NEXT_PUBLIC_FUJI_RPC_URL = ENTER_RPC_URL
-NEXT_PUBLIC_PINATA_JWT = ENTER_PINATA_API_KEY
\ No newline at end of file
diff --git a/client/.env.lc b/client/.env.lc
new file mode 100644
index 00000000..045ace23
--- /dev/null
+++ b/client/.env.lc
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_SEPOLIA_RPC_URL = https://eth-mainnet.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk
+NEXT_PUBLIC_AMOY_RPC_URL = https://polygon-amoy.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk
+NEXT_PUBLIC_FUJI_RPC_URL = https://avax-fuji.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk
+NEXT_PUBLIC_PINATA_JWT = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mb3JtYXRpb24iOnsiaWQiOiI3Zjc0NGIzYi03NGZlLTQyOGMtYTY2NS1kMGFjODkwNTE0N2YiLCJlbWFpbCI6ImhlbWFudC5rQGFkeXB1LmVkdS5pbiIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJwaW5fcG9saWN5Ijp7InJlZ2lvbnMiOlt7ImRlc2lyZWRSZXBsaWNhdGlvbkNvdW50IjoxLCJpZCI6IkZSQTEifSx7ImRlc2lyZWRSZXBsaWNhdGlvbkNvdW50IjoxLCJpZCI6Ik5ZQzEifV0sInZlcnNpb24iOjF9LCJtZmFfZW5hYmxlZCI6ZmFsc2UsInN0YXR1cyI6IkFDVElWRSJ9LCJhdXRoZW50aWNhdGlvblR5cGUiOiJzY29wZWRLZXkiLCJzY29wZWRLZXlLZXkiOiIzNDRlMDU0ZTRiMDhkZWZjOTlmNiIsInNjb3BlZEtleVNlY3JldCI6IjE2MTcyZWM2YTMyYjVkMTlkZjUzNWE4ZjM2OTZlNzg5NGExMjY4MjViMTBmNTA2OWYzZDM4MWY4ZDBhMWZjNzQiLCJleHAiOjE3OTEzMDUwOTB9.c8lfSqJIUNh4F4DOvys5qI07pMwUc1H91dUBwt8emfI
\ No newline at end of file
diff --git a/client/app/components/Header/Header.tsx b/client/app/components/Header/Header.tsx
index 2fd84166..2cc66e38 100644
--- a/client/app/components/Header/Header.tsx
+++ b/client/app/components/Header/Header.tsx
@@ -13,6 +13,7 @@ import {
 } from "@heroicons/react/24/outline";
 import Web3Connect from "../Helper/Web3Connect";
 import Image from "next/image";
+import ThemeToggle from "../ThemeToggle/ThemeToggle";
 
 const menuItems = [
   { name: "Home", href: "/", icon: HomeIcon },
@@ -29,7 +30,7 @@ const Header = () => {
   return (
     <>
       <motion.header
-        className="bg-white border-b border-gray-200 fixed w-full z-30 shadow-sm"
+        className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 fixed w-full z-30 shadow-sm"
         initial={{ y: -100 }}
         animate={{ y: 0 }}
         transition={{ type: "spring", stiffness: 300, damping: 30 }}
@@ -44,7 +45,7 @@ const Header = () => {
                 src="/aossie.png"
                 alt="Agora Blockchain"
               />
-              <h1 className="ml-3 text-xl font-bold text-gray-800 hidden sm:block">
+              <h1 className="ml-3 text-xl font-bold text-gray-800 dark:text-gray-100 hidden sm:block">
                 Agora Blockchain
               </h1>
             </Link>
@@ -56,9 +57,9 @@ const Header = () => {
                   <motion.button
                     className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md ${
                       pathname === item.href
-                        ? "text-indigo-600"
-                        : "text-gray-700 hover:text-indigo-600"
-                    } bg-white hover:bg-gray-50`}
+                        ? "text-indigo-600 dark:text-indigo-400"
+                        : "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
+                    } bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700`}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.95 }}
                   >
@@ -67,7 +68,7 @@ const Header = () => {
                   </motion.button>
                   {pathname === item.href && (
                     <motion.div
-                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
+                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600 dark:bg-indigo-400"
                       layoutId="underline"
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}
@@ -76,6 +77,7 @@ const Header = () => {
                   )}
                 </Link>
               ))}
+              <ThemeToggle />
               <div className="hidden lg:block">
                 <Web3Connect />
               </div>
@@ -83,12 +85,13 @@ const Header = () => {
 
             {/* Mobile/Tablet Menu Button */}
             <div className="lg:hidden flex items-center space-x-2">
+              <ThemeToggle />
               <div className="scale-90">
                 <Web3Connect />
               </div>
               <button
                 onClick={toggleSidebar}
-                className="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700"
               >
                 <Bars3Icon className="h-6 w-6" />
               </button>
@@ -109,7 +112,7 @@ const Header = () => {
               onClick={toggleSidebar}
             />
             <motion.div
-              className="fixed right-0 top-0 h-full w-72 bg-white z-50 shadow-lg"
+              className="fixed right-0 top-0 h-full w-72 bg-white dark:bg-gray-900 z-50 shadow-lg"
               initial={{ x: "100%" }}
               animate={{ x: 0 }}
               exit={{ x: "100%" }}
@@ -118,7 +121,7 @@ const Header = () => {
               <div className="p-6">
                 <button
                   onClick={toggleSidebar}
-                  className="absolute top-4 right-4 p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                  className="absolute top-4 right-4 p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   <XMarkIcon className="h-6 w-6" />
                 </button>
@@ -130,8 +133,8 @@ const Header = () => {
                       onClick={toggleSidebar}
                       className={`flex items-center p-4 rounded-lg transition-colors ${
                         pathname === item.href
-                          ? "bg-indigo-50 text-indigo-600"
-                          : "text-gray-700 hover:bg-gray-50"
+                          ? "bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400"
+                          : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
                       }`}
                     >
                       <item.icon className="h-6 w-6 mr-4" />
diff --git a/client/app/components/ThemeProvider/ThemeProvider.tsx b/client/app/components/ThemeProvider/ThemeProvider.tsx
new file mode 100644
index 00000000..5ed8b7b9
--- /dev/null
+++ b/client/app/components/ThemeProvider/ThemeProvider.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useThemeStore } from "@/app/store/themeStore";
+
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const theme = useThemeStore((state) => state.theme);
+
+  useEffect(() => {
+    // Apply theme class to html element
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+      root.setAttribute("data-theme", "dark");
+    } else {
+      root.classList.remove("dark");
+      root.setAttribute("data-theme", "light");
+    }
+  }, [theme]);
+
+  return <>{children}</>;
+}
diff --git a/client/app/components/ThemeToggle/ThemeToggle.tsx b/client/app/components/ThemeToggle/ThemeToggle.tsx
new file mode 100644
index 00000000..f28a397a
--- /dev/null
+++ b/client/app/components/ThemeToggle/ThemeToggle.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { motion } from "framer-motion";
+import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
+import { useThemeStore } from "@/app/store/themeStore";
+
+const ThemeToggle = () => {
+  const { theme, toggleTheme } = useThemeStore();
+
+  useEffect(() => {
+    // Apply theme to document
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  }, [theme]);
+
+  return (
+    <motion.button
+      onClick={toggleTheme}
+      className="relative inline-flex items-center justify-center p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      aria-label="Toggle theme"
+      title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+    >
+      <motion.div
+        initial={false}
+        animate={{
+          rotate: theme === "dark" ? 180 : 0,
+          scale: theme === "dark" ? 0 : 1,
+        }}
+        transition={{ duration: 0.3 }}
+        className="absolute"
+      >
+        <SunIcon className="h-5 w-5 text-yellow-500" />
+      </motion.div>
+      <motion.div
+        initial={false}
+        animate={{
+          rotate: theme === "dark" ? 0 : -180,
+          scale: theme === "dark" ? 1 : 0,
+        }}
+        transition={{ duration: 0.3 }}
+        className="absolute"
+      >
+        <MoonIcon className="h-5 w-5 text-indigo-400" />
+      </motion.div>
+      {/* Invisible spacer to maintain button size */}
+      <div className="h-5 w-5 opacity-0">
+        <SunIcon />
+      </div>
+    </motion.button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/client/app/create/page.tsx b/client/app/create/page.tsx
index d8f62dad..72998ec9 100644
--- a/client/app/create/page.tsx
+++ b/client/app/create/page.tsx
@@ -107,15 +107,15 @@ const CreatePage: React.FC = () => {
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.5 }}
-    className="h-screen w-full bg-gradient-to-br pt-[50px] from-gray-100 to-gray-200 flex flex-col items-center justify-start p-4 overflow-y-auto"
+    className="h-screen w-full bg-gradient-to-br pt-[50px] from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex flex-col items-center justify-start p-4 overflow-y-auto"
   >
     <motion.div
       initial={{ y: 20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ delay: 0.2, duration: 0.5 }}
-      className="w-full max-w-2xl bg-white rounded-3xl shadow-2xl p-8 space-y-8 my-12"
+      className="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 space-y-8 my-12"
     >
-        <h2 className="text-3xl font-extrabold text-gray-800 mb-6 text-center">
+        <h2 className="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center">
           Create New Election
         </h2>
         <form onSubmit={createElection} className="space-y-6">
@@ -132,7 +132,7 @@ const CreatePage: React.FC = () => {
           {/* candidate section  shows placeholder if empty candidate and allows to add cnadidates*/ }
           <div className="space-y-4">
             <div className="flex justify-between items-center">
-              <h3 className="text-lg font-medium text-gray-900">Candidates</h3>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Candidates</h3>
               <motion.button
                 type="button"
                 onClick={addCandidate}
@@ -146,8 +146,8 @@ const CreatePage: React.FC = () => {
             </div>
             
             {candidates.length === 0 ? (
-              <p className="text-gray-500 text-sm italic text-center py-4">
-                No candidates added yet. Click "Add Candidate" to begin adding candidates.
+              <p className="text-gray-500 dark:text-gray-400 text-sm italic text-center py-4">
+                No candidates added yet. Click &quot;Add Candidate&quot; to begin adding candidates.
               </p>
             ) : (
               candidates.map((candidate, index) => (
@@ -155,10 +155,10 @@ const CreatePage: React.FC = () => {
                   key={index}
                   initial={{ opacity: 0, x: -20 }}
                   animate={{ opacity: 1, x: 0 }}
-                  className="p-4 border border-gray-200 rounded-lg space-y-3"
+                  className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg space-y-3"
                 >
                   <div className="flex justify-between items-center">
-                    <h4 className="text-md font-medium text-gray-700">
+                    <h4 className="text-md font-medium text-gray-700 dark:text-gray-300">
                       Candidate {index + 1}
                     </h4>
                     <motion.button
@@ -176,7 +176,7 @@ const CreatePage: React.FC = () => {
                     value={candidate.name}
                     onChange={(e) => updateCandidate(index, "name", e.target.value)}
                     placeholder="Candidate Name"
-                    className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                     required
                   />
                   <textarea
@@ -184,7 +184,7 @@ const CreatePage: React.FC = () => {
                     onChange={(e) => updateCandidate(index, "description", e.target.value)}
                     placeholder="Candidate Description"
                     rows={2}
-                    className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                     required
                   />
                 </motion.div>
@@ -193,14 +193,14 @@ const CreatePage: React.FC = () => {
           </div>
 
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
               Voting Type
             </label>
             <div className="flex items-center space-x-2">
               <select
                 value={selectedBallot}
                 onChange={handleBallotChange}
-                className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                className="block w-full px-3 py-2 bg-white dark:bg-gray-700 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
               >
                 {Object.entries(ballotTypeMap).map(([key, value]) => (
                   <option key={key} value={key}>
@@ -256,14 +256,14 @@ const InputField: React.FC<InputFieldProps> = ({
     animate={{ x: 0, opacity: 1 }}
     transition={{ delay: 0.3, duration: 0.5 }}
   >
-    <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+    <label htmlFor={name} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
       {label}
     </label>
     <input
       type="text"
       name={name}
       id={name}
-      className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+      className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
       placeholder={placeholder}
       required
     />
@@ -281,14 +281,14 @@ const TextareaField: React.FC<InputFieldProps> = ({
     animate={{ x: 0, opacity: 1 }}
     transition={{ delay: 0.4, duration: 0.5 }}
   >
-    <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+    <label htmlFor={name} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
       {label}
     </label>
     <textarea
       name={name}
       id={name}
       rows={4}
-      className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+      className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
       placeholder={placeholder}
       required
     ></textarea>
@@ -307,7 +307,7 @@ const DatePickerField: React.FC<DatePickerFieldProps> = ({
   label,
 }) => (
   <div className="space-y-1">
-    <label className="block text-sm font-medium text-gray-700">{label}</label>
+    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{label}</label>
     <DatePicker
       value={value}
       placement="topStart"
@@ -338,9 +338,9 @@ const ChainSwitchModal: React.FC<ChainSwitchModalProps> = ({ onSwitch }) => (
       initial={{ scale: 0.9, opacity: 0 }}
       animate={{ scale: 1, opacity: 1 }}
       transition={{ type: "spring", stiffness: 300, damping: 30 }}
-      className="bg-white rounded-lg p-8 shadow-xl text-center"
+      className="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-xl text-center"
     >
-      <p className="text-xl mb-4 text-gray-800">
+      <p className="text-xl mb-4 text-gray-800 dark:text-gray-100">
         Creating Elections is supported only on Sepolia
       </p>
       <motion.button
diff --git a/client/app/globals.css b/client/app/globals.css
index c898587a..f4c7f351 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -6,6 +6,11 @@ body {
   background-color: #ffffff;
   margin: 0;
   overflow: hidden;
+  transition: background-color 0.3s ease;
+}
+
+.dark body {
+  background-color: #1a1a1a;
 }
 
 html {
@@ -23,6 +28,10 @@ html {
   border-radius: 4px; 
 }
 
+.dark ::-webkit-scrollbar-track {
+  background: #2a2a2a;
+}
+
 /* Scrollbar thumb */
 ::-webkit-scrollbar-thumb {
   background-color: #cfcaca; 
@@ -30,6 +39,15 @@ html {
   border: 2px solid #f0f0f0; 
 }
 
+.dark ::-webkit-scrollbar-thumb {
+  background-color: #4a4a4a; 
+  border: 2px solid #2a2a2a;
+}
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: #ebe4e4; 
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: #5a5a5a; 
 }
\ No newline at end of file
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 5d344e2f..b5c7cfce 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -12,6 +12,7 @@ import Web3Connect from "./components/Helper/Web3Connect";
 import "rsuite/dist/rsuite-no-reset.min.css";
 import { CustomProvider } from "rsuite";
 import ChatBot from "./components/ChatBot/ChatBot";
+import ThemeProvider from "./components/ThemeProvider/ThemeProvider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -28,17 +29,19 @@ export default function RootLayout({
     <html lang="en">
       <link rel="icon" href="/aossie.png" sizes="any" />
       <body className={inter.className}>
-        <WagmiProvider config={config}>
-          <QueryClientProvider client={queryClient}>
-            <RainbowKitProvider initialChain={sepolia}>
-              <CustomProvider>
-                <Header />
-                <ChatBot />
-                {children}
-              </CustomProvider>
-            </RainbowKitProvider>
-          </QueryClientProvider>
-        </WagmiProvider>
+        <ThemeProvider>
+          <WagmiProvider config={config}>
+            <QueryClientProvider client={queryClient}>
+              <RainbowKitProvider initialChain={sepolia}>
+                <CustomProvider>
+                  <Header />
+                  <ChatBot />
+                  {children}
+                </CustomProvider>
+              </RainbowKitProvider>
+            </QueryClientProvider>
+          </WagmiProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/client/app/page.tsx b/client/app/page.tsx
index ca61711b..26b99249 100644
--- a/client/app/page.tsx
+++ b/client/app/page.tsx
@@ -3,7 +3,7 @@ import HomePage from "./components/Pages/HomePage";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen w-screen flex-col items-center justify-between overflow-hidden">
+    <main className="flex min-h-screen w-screen flex-col items-center justify-between overflow-hidden bg-white dark:bg-gray-900">
       <HomePage />
     </main>
   );
diff --git a/client/app/profile/page.tsx b/client/app/profile/page.tsx
index 6ebd82e8..97cad731 100644
--- a/client/app/profile/page.tsx
+++ b/client/app/profile/page.tsx
@@ -8,11 +8,11 @@ import Loader from "../components/Helper/Loader";
 
 const ElectionMiniSkeleton: React.FC = () => {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md animate-pulse w-full">
-      <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
-      <div className="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
-      <div className="h-4 bg-gray-200 rounded w-5/6 mb-4"></div>
-      <div className="h-8 bg-gray-200 rounded w-1/4 mt-6"></div>
+    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md animate-pulse w-full">
+      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
+      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-4"></div>
+      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6 mb-4"></div>
+      <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mt-6"></div>
     </div>
   );
 };
@@ -47,9 +47,9 @@ const ProfilePage: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen w-full bg-gradient-to-br from-gray-100 to-gray-200 pt-20 flex items-start justify-center">
-      <div className="w-full max-w-4xl p-6 bg-white rounded-3xl shadow-xl">
-        <h1 className="text-3xl font-bold text-gray-800 mb-6">Profile</h1>
+    <div className="min-h-screen w-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 pt-20 flex items-start justify-center">
+      <div className="w-full max-w-4xl p-6 bg-white dark:bg-gray-800 rounded-3xl shadow-xl">
+        <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">Profile</h1>
         <motion.div
           className="space-y-6 overflow-auto pr-4"
           style={{ height: "calc(100vh - 12rem)" }}
@@ -58,7 +58,7 @@ const ProfilePage: React.FC = () => {
           animate="visible"
         >
           {elections.length === 0 ? (
-            <div className="text-center text-gray-500 py-8">
+            <div className="text-center text-gray-500 dark:text-gray-400 py-8">
               No elections found
             </div>
           ) : (
diff --git a/client/app/store/themeStore.ts b/client/app/store/themeStore.ts
new file mode 100644
index 00000000..8ead7360
--- /dev/null
+++ b/client/app/store/themeStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface ThemeStore {
+  theme: "light" | "dark";
+  toggleTheme: () => void;
+  setTheme: (theme: "light" | "dark") => void;
+}
+
+export const useThemeStore = create<ThemeStore>()(
+  persist(
+    (set) => ({
+      theme: "light",
+      toggleTheme: () =>
+        set((state) => ({
+          theme: state.theme === "light" ? "dark" : "light",
+        })),
+      setTheme: (theme) => set({ theme }),
+    }),
+    {
+      name: "theme-storage",
+    }
+  )
+);
diff --git a/client/package-lock.json b/client/package-lock.json
index 6143ee65..f8051622 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2740,21 +2740,6 @@
         "ws": "7.4.6"
       }
     },
-    "node_modules/@ethersproject/providers/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/@ethersproject/providers/node_modules/ws": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
@@ -6229,21 +6214,6 @@
         "ws": "^7.5.1"
       }
     },
-    "node_modules/@walletconnect/jsonrpc-ws-connection/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/@walletconnect/jsonrpc-ws-connection/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -11876,21 +11846,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/metro/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/metro/node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -13494,21 +13449,6 @@
         "ws": "^7"
       }
     },
-    "node_modules/react-devtools-core/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/react-devtools-core/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -16583,6 +16523,126 @@
           "optional": true
         }
       }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
index f71309a3..08763076 100644
--- a/client/tailwind.config.ts
+++ b/client/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {
       backgroundImage: {
@@ -17,7 +18,7 @@ const config: Config = {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["light"],
+    themes: ["light", "dark"],
   },
 };
 export default config;