diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 9bad3616..221ef64b 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -5,19 +5,17 @@ import { useTheme } from './ThemeProvider'
 export function ThemeToggle() {
   const { toggleMode } = useTheme()
 
-  const handleToggleMode = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    e.preventDefault()
-    e.stopPropagation()
-    toggleMode()
-  }
-
   return (
-    <div
-      onClick={handleToggleMode}
+    <button
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        toggleMode()
+      }}
+      aria-label="Toggle color theme"
       className={`bg-gray-500/10 dark:bg-gray-500/30 rounded-lg flex items-center justify-between
         hover:bg-gray-500/20 dark:hover:bg-gray-500/40
+        focus:ring-2 focus:ring-offset-2 focus:ring-gray-500/50 dark:focus:ring-gray-400/50
         cursor-pointer transition-all duration-300 ease-in-out text-xs font-black`}
     >
       <div className="flex-1 flex items-center justify-between p-2 gap-1">
@@ -29,6 +27,6 @@ export function ThemeToggle() {
           Auto
         </div>
       </div>
-    </div>
+    </button>
   )
 }