diff --git a/src/components/ThemeMode/ThemeMode.stories.tsx b/src/components/ThemeMode/ThemeMode.stories.tsx
new file mode 100644
index 00000000..41348e9e
--- /dev/null
+++ b/src/components/ThemeMode/ThemeMode.stories.tsx
@@ -0,0 +1,10 @@
+import { ThemeMode } from './ThemeMode';
+
+export default {
+  title: 'Components/Theme Mode',
+  component: ThemeMode,
+};
+
+export const _ThemeMode = {
+  render: () => <ThemeMode />,
+};
diff --git a/src/components/ThemeMode/ThemeMode.test.tsx b/src/components/ThemeMode/ThemeMode.test.tsx
new file mode 100644
index 00000000..6fc2fd5a
--- /dev/null
+++ b/src/components/ThemeMode/ThemeMode.test.tsx
@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ThemeMode } from './ThemeMode';
+
+describe('Components | Button | ThemeMode', () => {
+  test('it should render', () => {
+    render(<ThemeMode />);
+
+    let button = screen.getByTestId('theme-mode');
+
+    expect(button).toBeInTheDocument();
+  });
+});
diff --git a/src/components/ThemeMode/ThemeMode.tsx b/src/components/ThemeMode/ThemeMode.tsx
new file mode 100644
index 00000000..d0736ac1
--- /dev/null
+++ b/src/components/ThemeMode/ThemeMode.tsx
@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import { FiMoon, FiSun } from 'react-icons/fi';
+import { useLocalStorage } from '../../util/useLocalStorage';
+
+export function ThemeMode() {
+  const [theme, setTheme] = useLocalStorage<string>(
+    'massa-station-theme',
+    'dark',
+  );
+
+  function handleClick() {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }
+
+  const themeIcons = {
+    dark: <FiSun className="h-8 w-8" />,
+    light: <FiMoon className="h-8 w-8" />,
+  };
+
+  return (
+    <button
+      data-testid="theme-mode"
+      className={`bg-primary text-f-primary p-3 rounded-lg cursor-pointer 
+                  flex flex-row items-center justify-center
+                  hover:bg-tertiary
+                  active:bg-secondary
+                  h-12 w-12`}
+      onClick={handleClick}
+    >
+      <div className="flex justify-center items-center">
+        {themeIcons[theme as keyof typeof themeIcons]}
+      </div>
+    </button>
+  );
+}
diff --git a/src/components/ThemeMode/index.ts b/src/components/ThemeMode/index.ts
new file mode 100644
index 00000000..d9028641
--- /dev/null
+++ b/src/components/ThemeMode/index.ts
@@ -0,0 +1 @@
+export * from './ThemeMode';
diff --git a/src/components/index.ts b/src/components/index.ts
index 36a66fd4..2558e0f5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,3 +10,4 @@ export * from './SideMenu';
 export * from './Icons';
 export * from './Toggle';
 export * from './Balance';
+export * from './ThemeMode';