diff --git a/src/components/SwitcherItem.tsx b/src/components/SwitcherItem.tsx
index e89cac9a..fdd773c8 100644
--- a/src/components/SwitcherItem.tsx
+++ b/src/components/SwitcherItem.tsx
@@ -4,6 +4,7 @@ import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
 
 export default function SwitcherItem({
   icon,
+  title,
   href,
   className: classNameProp,
   onClick,
@@ -12,6 +13,7 @@ export default function SwitcherItem({
   prefetch = SHOULD_PREFETCH_ALL_LINKS,
 }: {
   icon: JSX.Element
+  title?: string
   href?: string
   className?: string
   onClick?: () => void
@@ -41,9 +43,9 @@ export default function SwitcherItem({
 
   return (
     href
-      ? <Link {...{ href, className, prefetch }}>
+      ? <Link {...{ title, href, className, prefetch }}>
         {renderIcon()}
       </Link>
-      : <div {...{ onClick, className }}>{renderIcon()}</div>
+      : <div {...{ title, onClick, className }}>{renderIcon()}</div>
   );
 };
diff --git a/src/site/ThemeSwitcher.tsx b/src/site/ThemeSwitcher.tsx
index 3a2aa831..861a26bc 100644
--- a/src/site/ThemeSwitcher.tsx
+++ b/src/site/ThemeSwitcher.tsx
@@ -22,16 +22,19 @@ export default function ThemeSwitcher () {
   return (
     <Switcher>
       <SwitcherItem
+        title="System"
         icon={<BiDesktop size={16} />}
         onClick={() => setTheme('system')}
         active={theme === 'system'}
       />
       <SwitcherItem
+        title="Light"
         icon={<BiSun size={18} />}
         onClick={() => setTheme('light')}
         active={theme === 'light'}
       />
       <SwitcherItem
+        title="Dark"
         icon={<BiMoon size={16} />}
         onClick={() => setTheme('dark')}
         active={theme === 'dark'}