diff --git a/components/atoms/themeToggle.tsx b/components/atoms/themeToggle.tsx
index e3c5b60..e6e3f8e 100644
--- a/components/atoms/themeToggle.tsx
+++ b/components/atoms/themeToggle.tsx
@@ -1,7 +1,7 @@
-"use client";
-
+"use client"
 import { useEffect, useState } from "react";
 import { LightMode, DarkModeOutlined } from "@mui/icons-material";
+import { motion, AnimatePresence } from "framer-motion";
 import Button from "./Button";
 
 export default function ThemeToggle() {
@@ -22,28 +22,51 @@ export default function ThemeToggle() {
     }
   }, [darkMode]);
 
+  const spring = {
+    type: "spring",
+    stiffness: 700,
+    damping: 30
+  };
+
   return (
-    <div className='flex  items-center w-full max-w-[200px]'>
-      <Button width='specs' size='md'>
-        Login
-      </Button>
+    <>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={darkMode ? "dark" : "light"}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          className="fixed inset-0 z-[-1]"
+          style={{
+            backgroundColor: darkMode ? "#1a202c" : "#ffffff",
+          }}
+        />
+      </AnimatePresence>
 
-      <div
-        className='flex bg-[#fdfdfd] border border-[#dcd5d5] dark:border-[#FFFFFF33]/30 w-full max-w-[3.6rem] h-[1.7rem] ml-[1.2rem] rounded-[1.5rem]   dark:bg-green-900'
-        onClick={() => setDarkMode(!darkMode)}
-      >
-        <LightMode className='!text-base ml-[5.5px] place-self-center z-10 text-[#FFFFFF] dark:text-[#FFFFFF66]/40 ' />
+      <div className="flex items-center w-full max-w-[200px]">
+        <Button width="specs" size="md">
+          Login
+        </Button>
 
         <div
-          className={`flex bg-[#07C589] h-[1.8rem] w-full max-w-[1.8rem] rounded-full place-self-center transform z-0 transition-transform duration-300 ${
-            darkMode ? "ml-[1.7rem]" : "mr-[5.2rem]"
-          } absolute `}
+          className="flex bg-[#fdfdfd] border border-[#dcd5d5] dark:border-[#FFFFFF33]/30 w-full max-w-[3.6rem] h-[1.7rem] ml-[1.2rem] rounded-[1.5rem] dark:bg-green-900 relative cursor-pointer"
+          onClick={() => setDarkMode(!darkMode)}
         >
-          {/* sx={{color:"#fdfdfd",width:"65%"}} */}
-        </div>
+          <LightMode className="!text-base ml-[5.5px] place-self-center z-10 text-[#FFFFFF] dark:text-[#FFFFFF66]/40" />
 
-        <DarkModeOutlined className='!text-base mr-[2.2px] place-self-center z-10 text-[#1E1E1E99] dark:text-[#FFFFFF] ml-[12px] ' />
+          <motion.div
+            className="flex bg-[#07C589] h-[1.8rem] w-[1.8rem] rounded-full absolute"
+            layout
+            transition={spring}
+            animate={{
+              x: darkMode ? "1.7rem" : "0rem"
+            }}
+          />
+
+          <DarkModeOutlined className="!text-base mr-[2.2px] place-self-center z-10 text-[#1E1E1E99] dark:text-[#FFFFFF] ml-[12px]" />
+        </div>
       </div>
-    </div>
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b61d464..959a913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mui/icons-material": "^5.16.4",
         "@mui/material": "^5.16.4",
         "chart.js": "^4.4.3",
+        "framer-motion": "^11.11.0",
         "next": "14.2.5",
         "next-themes": "^0.3.0",
         "quill": "^2.0.2",
@@ -3055,6 +3056,31 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.0.tgz",
+      "integrity": "sha512-H6Pv12fcXaebinvnLDabTS9vHwtJKAo7XsnVeNLm5t8Yq5LuVvQ3DtL/2yBa2kGmhdIgx9cw8mbj6I8PYx7jPA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 3365933..945a513 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.16.4",
     "chart.js": "^4.4.3",
+    "framer-motion": "^11.11.0",
     "next": "14.2.5",
     "next-themes": "^0.3.0",
     "quill": "^2.0.2",