diff --git a/website3.0/components/Header.js b/website3.0/components/Header.js
index 6af89331..21531b73 100644
--- a/website3.0/components/Header.js
+++ b/website3.0/components/Header.js
@@ -98,7 +98,8 @@ const Header = () => {
         <div className="nav-actions">
           <a href="https://github.com/sponsors/mdazfar2" target="_blank">
             <button className="nav-sponsor-btn">
-              Sponsor <FontAwesomeIcon icon={faHeart} id="heart" width={25} />
+               <FontAwesomeIcon icon={faHeart} id="heart" width={25} />
+               Sponsor
             </button>
           </a>
           <ToggleSwitch />
diff --git a/website3.0/components/ToggleSwitch.js b/website3.0/components/ToggleSwitch.js
index be9091c1..46df6c95 100644
--- a/website3.0/components/ToggleSwitch.js
+++ b/website3.0/components/ToggleSwitch.js
@@ -1,7 +1,5 @@
 import { useState, useEffect } from "react";
 import "@stylesheets/darkmode.css";
-
-//Importing FontAwesome for Icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMoon } from "@fortawesome/free-regular-svg-icons";
 
@@ -19,22 +17,26 @@ const ToggleSwitch = () => {
       document.body.classList.remove("dark-mode");
     }
   }, []);
+
   // Function to toggle dark mode
   const toggleMode = () => {
     const newMode = !isDarkMode;
     // Update state with new mode
     setIsDarkMode(newMode);
     // Toggle dark mode class on body
-    document.body.classList.toggle("dark-mode");
+    if (newMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
     // Store new mode preference in local storage
-    localStorage.setItem("dark-mode", newMode);
+    localStorage.setItem("dark-mode", newMode.toString());
   };
 
   return (
-    <div className="toggle-switch">
+    <button className={`nav-sponsor-btn ${isDarkMode ? 'dark-mode' : ''}`} onClick={toggleMode} style={{ height: '45px', width: '45px', borderRadius: '15px' }}>
       {isDarkMode ? (
         <svg
-          onClick={toggleMode}
           id="sun"
           className="sun1 size-6"
           viewBox="0 0 24 24"
@@ -50,12 +52,11 @@ const ToggleSwitch = () => {
       ) : (
         <FontAwesomeIcon
           icon={faMoon}
-          onClick={toggleMode}
           width={25}
           className="moon"
         />
       )}
-    </div>
+    </button>
   );
 };
 
diff --git a/website3.0/pages/HomePage.js b/website3.0/pages/HomePage.js
index 5bbc3e00..22cd5e3c 100644
--- a/website3.0/pages/HomePage.js
+++ b/website3.0/pages/HomePage.js
@@ -196,8 +196,8 @@ function HomePage() {
             <li className="isDisplay">
               <a href="https://github.com/sponsors/mdazfar2" target="_blank">
                 <h3 className="home-sponsor-btn">
-                  Sponsor{" "}
                   <FontAwesomeIcon icon={faHeart} id="heart" width={25} />
+                  Sponsor{" "}
                 </h3>
               </a>
             </li>
diff --git a/website3.0/stylesheets/header.css b/website3.0/stylesheets/header.css
index 3169e469..bd997ec8 100644
--- a/website3.0/stylesheets/header.css
+++ b/website3.0/stylesheets/header.css
@@ -84,7 +84,7 @@ nav {
 .nav-sponsor-btn {
   background-color: rgba(245, 245, 245, 0.788);
   border: none;
-  border-radius: 25px;
+  border-radius: 15px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   color: #000000;
   font-size: 20px;
@@ -102,7 +102,7 @@ nav {
 }
 
 #heart {
-  color: rgba(255, 0, 0, 0.84);
+  color:  rgb(234, 139, 155); ;
 }
 .nav-sponsor-btn:active {
   transform: translateY(1px);
diff --git a/website3.0/stylesheets/homepage.css b/website3.0/stylesheets/homepage.css
index c5967e51..40b7259a 100644
--- a/website3.0/stylesheets/homepage.css
+++ b/website3.0/stylesheets/homepage.css
@@ -55,7 +55,7 @@ a {
 }
 
 #heart {
-  color: red;
+  color: rgb(234, 139, 155);
 }
 
 .main-content {