diff --git a/packages/ui/src/Switch.stories.tsx b/packages/ui/src/Switch.stories.tsx
new file mode 100644
index 000000000..83b44191d
--- /dev/null
+++ b/packages/ui/src/Switch.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+	title: 'Switch',
+	component: Switch,
+	argTypes: {},
+	parameters: {
+		backgrounds: {
+			default: 'dark'
+		}
+	},
+};
+
+export default meta;
+
+
+export const Default = () => {
+	return (
+		<div className="w-full h-screen p-10 bg-app">
+			<h1 className="text-[20px] font-bold text-white">Switch</h1>
+			<div className='mt-6'>
+			<Switch/>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/ui/src/Switch.tsx b/packages/ui/src/Switch.tsx
index 245f634ec..634119c8e 100644
--- a/packages/ui/src/Switch.tsx
+++ b/packages/ui/src/Switch.tsx
@@ -12,7 +12,7 @@ const switchStyles = cva(
 	[
 		'relative inline-flex shrink-0 transition',
 		'items-center rounded-full p-1',
-		'bg-app-line radix-state-checked:bg-accent'
+		'bg-app-line radix-state-checked:bg-accent focus:outline-none focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
 	],
 	{
 		variants: {