diff --git a/src/shared/SwitchDarkMode.tsx b/src/shared/SwitchDarkMode.tsx
new file mode 100644
index 0000000..31fea42
--- /dev/null
+++ b/src/shared/SwitchDarkMode.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { MoonIcon } from "@heroicons/react/24/solid";
+import { SunIcon } from "@heroicons/react/24/outline";
+import { useThemeMode } from "@/utils/useThemeMode";
+export interface SwitchDarkModeProps {
+  className?: string;
+}
+const SwitchDarkMode: React.FC<SwitchDarkModeProps> = ({ className = "" }) => {
+  const { _toogleDarkMode, isDarkMode, toDark, toLight } = useThemeMode();
+
+  return (
+    <button
+      onClick={_toogleDarkMode}
+      className={`self-center text-2xl md:text-3xl w-12 h-12 rounded-full text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none flex items-center justify-center ${className}`}
+    >
+      <span className="sr-only">Enable dark mode</span>
+      {isDarkMode ? (
+        <MoonIcon className="w-7 h-7" aria-hidden="true" />
+      ) : (
+        <SunIcon className="w-7 h-7" aria-hidden="true" />
+      )}
+    </button>
+  );
+};
+
+export default SwitchDarkMode;