diff --git a/src/components/button/NightModeSwitch.tsx b/src/components/button/NightModeSwitch.tsx
index 94b4860..81472f7 100644
--- a/src/components/button/NightModeSwitch.tsx
+++ b/src/components/button/NightModeSwitch.tsx
@@ -1,24 +1,40 @@
 'use client';
 
+import { Moon, Sun1 } from 'iconsax-react';
 import React from 'react'
 
 type Props = {
-    
+
 } & React.InputHTMLAttributes<HTMLDivElement>;
 
 export default function NightModeSwitch({ checked, onClick }: Props) {
     return (
         <div
             onClick={onClick}
-            className={`visual-switch relative  inline-flex justify-between px-1.5 h-6 w-10.5 items-center rounded-full transition-colors duration-300 ${checked ? "bg-gray-800" : "bg-gray-300"
-                }`}
+            data-nightmode={checked}
+            className={
+                `visual-switch relative  inline-flex justify-between 
+                px-1.5 h-6 w-10.5 items-center rounded-full transition-colors 
+                duration-300 bg-gray-300 data-[nightmode=true]:bg-gray-800
+            `}
         >
-            A
             <span
-                className={`absolute inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300 ${checked ? "translate-x-1" : "-translate-x-3.5"
-                    }`}
+                data-nightmode={checked}
+                className={`
+                    absolute inline-block h-5 w-5 transform rounded-full
+                    transition-transform duration-300
+                    bg-white data-[nightmode=true]:bg-gray-600 
+                     -translate-x-3.5 data-[nightmode=true]:translate-x-1
+                `}
             />
-            B
+            <Moon
+                data-nightmode={checked}
+                size={12}
+                className='stroke-primary z-0 data-[nightmode=true]:stroke-white' />
+            <Sun1
+                data-nightmode={checked}
+                size={12}
+                className='stroke-[#FFA800] z-0' />
         </div>
     )
 }
diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx
index f4f5f0d..03d80ef 100644
--- a/src/components/menu/SideMenu.tsx
+++ b/src/components/menu/SideMenu.tsx
@@ -156,7 +156,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                 )
                             })}
                         <li className="mt-4 h-6">
-                            <SideMenuItem href={''} title={''} icon={<></>}>
+                            <SideMenuItem 
+                                className='pr-7'
+                                href={''} 
+                                title={''} 
+                                icon={<></>}>
                                 <NightModeSwitch checked={nightModeState} onClick={togglenightModeState} />
                             </SideMenuItem>
                         </li>