diff --git a/src/components/home/ThemeIcon.tsx b/src/components/home/ThemeIcon.tsx
new file mode 100644
index 0000000..1b5710f
--- /dev/null
+++ b/src/components/home/ThemeIcon.tsx
@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { ThemeContext } from "@/context/Theme";
+import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
+
+function ThemeIcon() {
+ const { theme, setTheme } = useContext(ThemeContext);
+
+ const onClick = () => {
+ const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
+ setTheme(nextTheme);
+ };
+
+ const getIcon = () => {
+ switch (theme) {
+ case "light":
+ return ;
+ case "dark":
+ return ;
+ case "system":
+ return ;
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default ThemeIcon;
diff --git a/src/pages/IndexPage.tsx b/src/pages/IndexPage.tsx
index ccdb44c..f175dbc 100644
--- a/src/pages/IndexPage.tsx
+++ b/src/pages/IndexPage.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
import BlockmaticLogo from "@/assets/blockmatic.svg?react";
import GithubIcon from "@/assets/github.svg?react";
+import ThemeIcon from "@/components/home/ThemeIcon";
import AppPreview from "@/components/home/AppPreview";
import ImageComparison from "@/components/home/ImageComparison";
@@ -15,13 +16,15 @@ function IndexPage() {