diff --git a/website/src/components/UI/ColorModeSwitch.tsx b/website/src/components/UI/ColorModeSwitch.tsx
index ed309328..ccb2af5b 100644
--- a/website/src/components/UI/ColorModeSwitch.tsx
+++ b/website/src/components/UI/ColorModeSwitch.tsx
@@ -1,11 +1,18 @@
-import { Button, useColorMode } from "@chakra-ui/react";
+import { Switch, useColorMode } from "@chakra-ui/react";
 import React from "react";
 
 type Props = {};
 
 const ColorModeSwitch = (props: Props) => {
   const { colorMode, toggleColorMode } = useColorMode();
-  return <Button onClick={toggleColorMode}>Toggle {colorMode === "light" ? "Dark" : "Light"}</Button>;
+  return (
+    <Switch
+      onChange={toggleColorMode}
+      defaultChecked={colorMode === "light"}
+      checked={colorMode === "light"}
+      size="lg"
+    />
+  );
 };
 
 export default ColorModeSwitch;