diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index b6639f3..00c7333 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { IconButton } from "@radix-ui/themes";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { MoonIcon, SunIcon, DesktopIcon } from "@radix-ui/react-icons";
 import { useEffect, useState } from "react";
 
 export const ThemeToggle = () => {
@@ -19,22 +19,43 @@ export const ThemeToggle = () => {
 	}
 
 	const toggleTheme = () => {
-		setTheme(theme === "light" ? "dark" : "light");
+		if (theme === "light") {
+			setTheme("dark");
+		} else if (theme === "dark") {
+			setTheme("system");
+		} else {
+			setTheme("light");
+		}
 	};
 
+	const getNextTheme = () => {
+		if (theme === "light") return "dark";
+		if (theme === "dark") return "system";
+		return "light";
+	};
+
+	const getIcon = () => {
+		if (theme === "light") {
+			return <SunIcon width="22" height="22" />;
+		} else if (theme === "dark") {
+			return <MoonIcon width="22" height="22" />;
+		} else {
+			return <DesktopIcon width="22" height="22" />;
+		}
+	};
+
+	const nextTheme = getNextTheme();
+	const themeLabel = theme === "system" ? "system" : theme === "light" ? "light" : "dark";
+
 	return (
 		<IconButton
 			size="3"
 			variant="ghost"
 			onClick={toggleTheme}
 			aria-label="Toggle theme"
-			title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+			title={`Current: ${themeLabel} mode. Click to switch to ${nextTheme} mode`}
 		>
-			{theme === "light" ? (
-				<MoonIcon width="22" height="22" />
-			) : (
-				<SunIcon width="22" height="22" />
-			)}
+			{getIcon()}
 		</IconButton>
 	);
 };