diff --git a/src/app/[name]/(Profile)/profile/settings/page.tsx b/src/app/[name]/(Profile)/profile/settings/page.tsx
index c9fa157..1b5d879 100644
--- a/src/app/[name]/(Profile)/profile/settings/page.tsx
+++ b/src/app/[name]/(Profile)/profile/settings/page.tsx
@@ -51,7 +51,7 @@ function UserSettingsIndex() {
                                                     <label
                                                         key={j}
                                                         htmlFor={item.HtmlName}
-                                                        className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                                                        className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-neutral-200 dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-black"
                                                     >
 
                                                         <span className="inline-flex items-center gap-2.5 text-sm2">
diff --git a/src/components/icons/EyeToggleIcon.tsx b/src/components/icons/EyeToggleIcon.tsx
index b5f41b5..2cb3d03 100644
--- a/src/components/icons/EyeToggleIcon.tsx
+++ b/src/components/icons/EyeToggleIcon.tsx
@@ -46,7 +46,7 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
             {/* Eye Circle */}
             <path
                 d="M12.9833 9.99994C12.9833 11.6499 11.6499 12.9833 9.99994 12.9833C8.34993 12.9833 7.0166 11.6499 7.0166 9.99994C7.0166 8.34993 8.34993 7.0166 9.99994 7.0166C11.6499 7.0166 12.9833 8.34993 12.9833 9.99994Z"
-                stroke="#333"
+                stroke="currentColor"
                 strokeWidth="1.2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -55,7 +55,7 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
             {/* Eye Outline */}
             <path
                 d="M10.0001 16.8918C12.9418 16.8918 15.6834 15.1584 17.5918 12.1584C18.3418 10.9834 18.3418 9.00843 17.5918 7.83343C15.6834 4.83343 12.9418 3.1001 10.0001 3.1001C7.05845 3.1001 4.31678 4.83343 2.40845 7.83343C1.65845 9.00843 1.65845 10.9834 2.40845 12.1584C4.31678 15.1584 7.05845 16.8918 10.0001 16.8918Z"
-                stroke="#333"
+                stroke="currentColor"
                 strokeWidth="1.2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -64,7 +64,8 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
             {/* Slash Line - Animate with Framer Motion */}
             <motion.path
                 d="M19.6 1.66675L1.66699 19.6"
-                stroke="#FFF"
+                stroke="currentColor"
+                className='dark:stroke-container'
                 strokeWidth="1.2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -77,7 +78,7 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
             />
             <motion.path
                 d="M18.3332 1.66675L1.66699 18.3334"
-                stroke="#333"
+                stroke="currentColor"
                 strokeWidth="1.2"
                 strokeLinecap="round"
                 strokeLinejoin="round"