diff --git a/client/src/pages/public/Login.jsx b/client/src/pages/public/Login.jsx
index 146afb0..3fa281d 100644
--- a/client/src/pages/public/Login.jsx
+++ b/client/src/pages/public/Login.jsx
@@ -6,6 +6,8 @@ import { motion as Motion } from "framer-motion";
 import { toast } from "react-toastify";
 import { Loader2, Eye, EyeOff, ArrowLeft } from "lucide-react";
 import SDEverse from "../../assets/sdeverse.png";
+import { MdDarkMode } from "react-icons/md";
+import { MdLightMode } from "react-icons/md";
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -14,6 +16,11 @@ const Login = () => {
 
   const [formData, setFormData] = useState({ email: "", password: "" });
   const [showPassword, setShowPassword] = useState(false);
+  const [toggleMode, setToggleMode] = useState(()=>{
+    const savedTheme = localStorage.getItem('login-theme')
+ 
+    return savedTheme === 'dark'
+  })
 
   const handleChange = (e) =>
     setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -22,13 +29,22 @@ const Login = () => {
     e.preventDefault();
     dispatch(loginUser(formData));
   };
-
+  const handleModeChange = () => {
+    setToggleMode(!toggleMode)
+  }
   useEffect(() => {
     if (user) {
       toast.success("Login successful!");
       navigate("/");
     }
   }, [user, navigate]);
+  useEffect(() => {
+    if (toggleMode) {
+      localStorage.setItem('login-theme' ,'dark')
+    } else {
+      localStorage.setItem('login-theme' ,'light')
+    } 
+  }, [toggleMode]);
 
   useEffect(() => {
     if (error) {
@@ -41,9 +57,12 @@ const Login = () => {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
-      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4"
+      className={`min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4 ${toggleMode ? 'dark' : ''} dark:from-[#030712] dark:via-[#030712] dark:to-[#030712] ` }
     >
-      <div className="absolute inset-0 z-0 overflow-hidden">
+      <button onClick={handleModeChange} className="absolute top-4 right-4 w-[50px] h-[50px] flex items-center justify-center z-20">
+        {!toggleMode ? <MdDarkMode className="text-3xl" /> : <MdLightMode className="text-3xl text-white" />}
+      </button>
+      <div className="absolute inset-0 z-0 overflow-hidden" style={{ display: toggleMode ? 'none' : 'block' }}>
         <div className="absolute -top-1/4 -left-1/4 w-[500px] h-[500px] bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
         <div className="absolute top-1/3 -right-1/4 w-[500px] h-[500px] bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
         <div className="absolute -bottom-1/4 left-1/4 w-[500px] h-[500px] bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
@@ -53,10 +72,10 @@ const Login = () => {
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="relative z-10 max-w-md w-full bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/30"
+        className="relative z-10 max-w-md w-full bg-white/80 dark:bg-gray-900 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/30"
       >
-        <Link to="/" className="p-1 rounded-sm border w-6 text-indigo-700 flex items-center hover:bg-indigo-700 hover:text-white ">
-         <ArrowLeft className="w-5 h-5" />
+        <Link to="/" className="p-1 rounded-sm border w-6 text-indigo-700 flex items-center hover:bg-indigo-700 hover:text-white dark:bg-transparent dark:text-gray-400 dark:hover:bg-gray-400 dark:hover:text-[#191A18]">
+          <ArrowLeft className="w-5 h-5" />
         </Link>
 
         <div className="text-center mb-8">
@@ -64,16 +83,16 @@ const Login = () => {
             whileHover={{ scale: 1.05 }}
             className="mx-auto mb-4"
           >
-          <img
-            src={SDEverse}
-            alt="SDEverse Logo"
-            className="w-20 h-20 mx-auto object-contain"
-          />
+            <img
+              src={SDEverse}
+              alt="SDEverse Logo"
+              className="w-20 h-20 mx-auto object-contain"
+            />
           </Motion.div>
-          <h2 className="text-3xl font-bold text-indigo-700 mb-2">
+          <h2 className="text-3xl font-bold text-indigo-700 dark:text-[#2C2CD4] mb-2">
             Welcome back to SDEverse
           </h2>
-          <p className="text-gray-600">Sign in to continue your journey</p>
+          <p className="text-gray-600 dark:text-gray-400">Sign in to continue your journey</p>
         </div>
 
         {error && (
@@ -88,7 +107,7 @@ const Login = () => {
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 dark:text-indigo-400 mb-2">
               Email
             </label>
             <div className="relative">
@@ -98,13 +117,13 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleChange}
                 required
-                className="w-full px-4 py-3 bg-white rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition"
+                className="w-full px-4 py-3 bg-white dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white rounded-lg border border-gray-300 c focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition"
                 placeholder="your.email@example.com"
               />
               <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 text-gray-400"
+                  className="h-5 w-5 text-gray-400 dark:text-gray-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -122,12 +141,12 @@ const Login = () => {
 
           <div>
             <div className="flex items-center justify-between mb-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-indigo-400">
                 Password
               </label>
               <a
                 href="/forgot-password"
-                className="text-sm text-indigo-600 hover:text-indigo-500"
+                className="text-sm text-indigo-600 hover:text-indigo-500 dark:text-blue-500"
               >
                 Forgot password?
               </a>
@@ -139,18 +158,18 @@ const Login = () => {
                 value={formData.password}
                 onChange={handleChange}
                 required
-                className="w-full px-4 py-3 bg-white rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition"
+                className="w-full px-4 py-3 bg-white dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white rounded-lg border border-gray-300 dark:border-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition"
                 placeholder="••••••••"
               />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute inset-y-0 right-0 flex items-center pr-3"
+                className="absolute inset-y-0 right-0 flex items-center pr-3 "
               >
                 {showPassword ? (
-                  <EyeOff className="h-5 w-5 text-gray-400" />
+                  <EyeOff className="h-5 w-5 text-gray-400 dark:text-gray-400" />
                 ) : (
-                  <Eye className="h-5 w-5 text-gray-400" />
+                  <Eye className="h-5 w-5 text-gray-400 dark:text-gray-400" />
                 )}
               </button>
             </div>
@@ -161,7 +180,7 @@ const Login = () => {
             whileTap={{ scale: 0.98 }}
             type="submit"
             disabled={loading}
-            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium shadow-lg hover:shadow-indigo-200/50 transition-all duration-300 flex items-center justify-center"
+            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium shadow-lg hover:shadow-indigo-200/50 dark:hover:shadow-gray-800 transition-all duration-300 flex items-center justify-center"
           >
             {loading ? (
               <>
@@ -175,11 +194,11 @@ const Login = () => {
         </form>
 
         <div className="mt-8 text-center">
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             Don't have an account?{" "}
             <a
               href="/register"
-              className="font-medium text-indigo-600 hover:text-indigo-500"
+              className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-blue-500"
             >
               Sign up
             </a>
diff --git a/client/src/pages/public/Register.jsx b/client/src/pages/public/Register.jsx
index 5a564df..55d4830 100644
--- a/client/src/pages/public/Register.jsx
+++ b/client/src/pages/public/Register.jsx
@@ -3,13 +3,20 @@ import { useDispatch, useSelector } from "react-redux";
 import { registerUser } from "../../features/auth/authSlice";
 import { Link, useNavigate } from "react-router-dom";
 import { motion as Motion } from "framer-motion";
-import { Loader2, Eye, EyeOff, ArrowLeft, Check, X } from "lucide-react";
+import { Loader2, Eye, EyeOff, ArrowLeft, Check, X, LucideCalculator } from "lucide-react";
 import SDEverse from "../../assets/sdeverse.png";
 import { toast } from "react-toastify";
+import { MdDarkMode } from "react-icons/md";
+import { MdLightMode } from "react-icons/md";
 
 const Register = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const [toggleMode, setToggleMode] = useState(()=>{
+    const savedTheme = localStorage.getItem('register-theme')
+ 
+    return savedTheme === 'dark'
+  })
   const { loading, error, user } = useSelector((state) => state.auth);
 
   const [formData, setFormData] = useState({
@@ -68,7 +75,13 @@ const Register = () => {
 
     return errors;
   };
-
+  useEffect(() => {
+    if (toggleMode) {
+      localStorage.setItem('register-theme' ,'dark')
+    } else {
+      localStorage.setItem('register-theme' ,'light')
+    } 
+  }, [toggleMode]);
   const handleSubmit = (e) => {
     e.preventDefault();
     
@@ -82,6 +95,9 @@ const Register = () => {
     dispatch(registerUser(formData));
     
   };
+  const handleModeChange = () => {
+    setToggleMode(!toggleMode)
+  }
 
   const formatErrorMessage = (error) => {
     if (!error) return "";
@@ -120,9 +136,12 @@ const Register = () => {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
-      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4"
+      className={`min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4 dark:from-[#030712] dark:via-[#030712] dark:to-[#030712] ${toggleMode ? 'dark' : ''}`}
     >
-      <div className="absolute inset-0 z-0 overflow-hidden">
+      <button onClick={handleModeChange} className="absolute top-4 right-4 w-[50px] h-[50px] flex items-center justify-center z-20">
+        {!toggleMode ? <MdDarkMode className="text-3xl" /> : <MdLightMode className="text-3xl text-white" />}
+      </button>
+      <div className="absolute inset-0 z-0 overflow-hidden" style={{ display: toggleMode ? 'none' : 'block' }}>
         <div className="absolute -top-1/4 -right-1/4 w-[500px] h-[500px] bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
         <div className="absolute top-1/3 -left-1/4 w-[500px] h-[500px] bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
         <div className="absolute -bottom-1/4 right-1/4 w-[500px] h-[500px] bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
@@ -132,9 +151,9 @@ const Register = () => {
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="relative z-10 max-w-md w-full bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/30"
+        className="relative z-10 max-w-md w-full bg-white/80 dark:bg-gray-900 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/30"
       >
-        <Link to="/" className="p-1 rounded-sm border w-6 text-indigo-700 flex items-center hover:bg-indigo-700 hover:text-white ">
+        <Link to="/" className="p-1 rounded-sm border w-6 text-indigo-700 flex items-center hover:bg-indigo-700 hover:text-white dark:bg-transparent dark:text-gray-400 dark:hover:bg-gray-400 dark:hover:text-[#191A18]">
          <ArrowLeft className="w-5 h-5" />
         </Link>
         <div className="text-center mb-8">
@@ -149,10 +168,10 @@ const Register = () => {
               className="w-20 h-20 mx-auto object-contain"
             />
           </Motion.div>
-          <h2 className="text-3xl font-bold text-indigo-700 mb-2">
+          <h2 className="text-3xl font-bold text-indigo-700 mb-2 dark:text-[#2C2CD4]">
             Create your SDEverse account
           </h2>
-          <p className="text-gray-600">Start your coding journey today</p>
+          <p className="text-gray-600 dark:text-gray-400">Start your coding journey today</p>
         </div>
 
         {error && (
@@ -168,7 +187,7 @@ const Register = () => {
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 mb-2 dark:text-indigo-400">
               Username
             </label>
             <div className="relative">
@@ -178,15 +197,15 @@ const Register = () => {
                 value={formData.username}
                 onChange={handleChange}
                 required
-                className={`w-full px-4 py-3 bg-white rounded-lg border ${
-                  validationErrors.username ? "border-red-500" : "border-gray-300"
-                } focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
+                className={`w-full px-4 py-3 bg-white rounded-lg border dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white ${
+                  validationErrors.username ? "border-red-500" : "border-gray-300 "
+                }dark:border-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
                 placeholder="Enter your username"
               />
               <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 text-gray-400"
+                  className="h-5 w-5 text-gray-400 dark:text-gray-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -207,7 +226,7 @@ const Register = () => {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-400">
               Email
             </label>
             <div className="relative">
@@ -217,15 +236,15 @@ const Register = () => {
                 value={formData.email}
                 onChange={handleChange}
                 required
-                className={`w-full px-4 py-3 bg-white rounded-lg border ${
+                className={`w-full px-4 py-3 bg-white rounded-lg border dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white ${
                   validationErrors.email ? "border-red-500" : "border-gray-300"
-                } focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
+                } dark:border-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
                 placeholder="your.email@example.com"
               />
               <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 text-gray-400"
+                  className="h-5 w-5 text-gray-400 dark:text-gray-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -245,7 +264,7 @@ const Register = () => {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-400">
               Password
             </label>
             <div className="relative">
@@ -255,9 +274,9 @@ const Register = () => {
                 value={formData.password}
                 onChange={handleChange}
                 required
-                className={`w-full px-4 py-3 bg-white rounded-lg border ${
+                className={`w-full px-4 py-3 bg-white rounded-lg border dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white ${
                   validationErrors.password ? "border-red-500" : "border-gray-300"
-                } focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
+                } dark:border-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 transition`}
                 placeholder="••••••••"
               />
               <button
@@ -266,9 +285,9 @@ const Register = () => {
                 className="absolute inset-y-0 right-0 flex items-center pr-3"
               >
                 {showPassword ? (
-                  <EyeOff className="h-5 w-5 text-gray-400" />
+                  <EyeOff className="h-5 w-5 text-gray-400 dark:text-gray-400" />
                 ) : (
-                  <Eye className="h-5 w-5 text-gray-400" />
+                  <Eye className="h-5 w-5 text-gray-400 dark:text-gray-400" />
                 )}
               </button>
             </div>
@@ -277,39 +296,39 @@ const Register = () => {
               <Motion.div
                 initial={{ opacity: 0, y: -10 }}
                 animate={{ opacity: 1, y: 0 }}
-                className="mt-3 p-3 bg-gray-50 rounded-lg space-y-2"
+                className="mt-3 p-3 bg-gray-50 dark:bg-gray-400 rounded-lg space-y-2"
               >
-                <p className="text-xs font-medium text-gray-700 mb-2">Password requirements:</p>
+                <p className="text-xs font-medium text-gray-700 mb-2 dark:text-black">Password requirements:</p>
                 
                 <div className="flex items-center gap-2">
                   {passwordCriteria.minLength ? (
-                    <Check className="w-4 h-4 text-green-600" />
+                    <Check className="w-4 h-4 text-green-600 dark:text-green-800" />
                   ) : (
-                    <X className="w-4 h-4 text-gray-400" />
+                    <X className="w-4 h-4 text-gray-400 dark:text-black" />
                   )}
-                  <span className={`text-xs ${passwordCriteria.minLength ? "text-green-600 font-medium" : "text-gray-600"}`}>
+                  <span className={`text-xs ${passwordCriteria.minLength ? "text-green-600 dark:text-green-800 font-medium" : "text-gray-600 dark:text-black"}`}>
                     At least 6 characters
                   </span>
                 </div>
                 
                 <div className="flex items-center gap-2">
                   {passwordCriteria.hasLetter ? (
-                    <Check className="w-4 h-4 text-green-600" />
+                    <Check className="w-4 h-4 text-green-600 dark:text-green-800" />
                   ) : (
-                    <X className="w-4 h-4 text-gray-400" />
+                    <X className="w-4 h-4 text-gray-400 dark:text-black" />
                   )}
-                  <span className={`text-xs ${passwordCriteria.hasLetter ? "text-green-600 font-medium" : "text-gray-600"}`}>
+                  <span className={`text-xs ${passwordCriteria.hasLetter ? "text-green-600 dark:text-green-800 font-medium" : "text-gray-600 dark:text-black"}`}>
                     Contains at least one letter
                   </span>
                 </div>
                 
                 <div className="flex items-center gap-2">
                   {passwordCriteria.hasNumber ? (
-                    <Check className="w-4 h-4 text-green-600" />
+                    <Check className="w-4 h-4 text-green-600 dark:text-green-800" />
                   ) : (
-                    <X className="w-4 h-4 text-gray-400" />
+                    <X className="w-4 h-4 text-gray-400 dark:text-black" />
                   )}
-                  <span className={`text-xs ${passwordCriteria.hasNumber ? "text-green-600 font-medium" : "text-gray-600"}`}>
+                  <span className={`text-xs ${passwordCriteria.hasNumber ? "text-green-600 dark:text-green-800 font-medium" : "text-gray-600 dark:text-black"}`}>
                     Contains at least one number
                   </span>
                 </div>
@@ -326,7 +345,7 @@ const Register = () => {
             whileTap={{ scale: 0.98 }}
             type="submit"
             disabled={loading}
-            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium shadow-lg hover:shadow-indigo-200/50 transition-all duration-300 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium shadow-lg hover:shadow-indigo-200/50 dark:hover:shadow-gray-800 transition-all duration-300 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {loading ? (
               <>
@@ -340,11 +359,11 @@ const Register = () => {
         </form>
 
         <div className="mt-8 text-center">
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             Already have an account?{" "}
             <a
               href="/login"
-              className="font-medium text-indigo-600 hover:text-indigo-500"
+              className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-blue-500"
             >
               Sign in
             </a>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 0000000..6f78cef
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,11 @@
+
+
+module.exports = {
+    
+    darkMode: 'class', 
+    content: [
+      "./index.html",
+      "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    plugins: [],
+  }
\ No newline at end of file