diff --git a/src/components/Partials/RightSideBar.jsx b/src/components/Partials/RightSideBar.jsx
index 9974a09..8de8b76 100644
--- a/src/components/Partials/RightSideBar.jsx
+++ b/src/components/Partials/RightSideBar.jsx
@@ -158,17 +158,30 @@ export default function RightSideBar({ myJobList }) {
             {/* dark mode */}
             <div
               onClick={darkMode.handleThemeSwitch}
-              className="item flex space-x-3 items-center mb-4"
+              className="item flex space-x-5 items-center mb-4 cursor-pointer"
             >
-              <div className="flex space-x-2.5 items-center">
-                <span className="dark:text-dark-gray text-white">
+              <span className="dark:text-dark-gray text-white">
+                {darkMode.theme === "light" ? (
                   <svg
-                    width="27"
-                    height="27"
-                    viewBox="0 0 27 27"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-6 h-6 fill-black"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    viewBox="0 0 24 24"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    className="fill-current"
+                    className="fill-current w-6 h-6"
                   >
                     <path
                       fillRule="evenodd"
@@ -221,11 +234,11 @@ export default function RightSideBar({ myJobList }) {
                       d="M3.92974 5.82165L5.43568 7.34911C5.94893 7.86969 6.78228 7.86969 7.29553 7.34911C7.80878 6.82853 7.80878 5.98328 7.29553 5.46269L5.78958 3.93524C5.27633 3.41465 4.44299 3.41465 3.92974 3.93524C3.41649 4.45582 3.41649 5.30107 3.92974 5.82165Z"
                     />
                   </svg>
-                </span>
-                <p className="text-thin-light-gray text-base font-medium">
-                  {darkMode.theme === "light" ? "Dark" : "Light"} Mode
-                </p>
-              </div>
+                )}
+              </span>
+              <p className="text-thin-light-gray text-base font-medium">
+                {darkMode.theme === "light" ? "Dark" : "Light"} Mode
+              </p>
             </div>
           </div>
         </div>