diff --git a/.storybook/main.js b/.storybook/main.js
index 1f36e7053..55ca45e6d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -29,6 +29,10 @@ module.exports = {
       ...config,
       resolve: {
         ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          src: path.resolve(__dirname, '../src'),
+        },
         fallback: {
           ...(config.resolve || {}).fallback,
           https: false,
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 56c8a0eef..49b27f5ef 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -5,11 +5,7 @@ import providersDecorator from './providersDecorator';
 import { MockedProvider } from '@apollo/client/testing';
 
 // Import design system component styles for our Stories.
-import '../src/design-system/components/Badge/Badge.css';
-import '../src/design-system/components/Button/Button.css';
-import '../src/design-system/components/Icon/Icon.css';
-import '../src/design-system/components/InputField/InputField.css';
-import '../src/design-system/components/RadioInput/RadioInput.css';
+import '../src/design-system/components/stylesheet.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index 080856d45..18633f6aa 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { default as DrawerComponent } from '.';
 import Box from '../Box';
 import Icon from '../../design-system/components/Icon';
-import Switch from '../Switch';
+import Switch from '../../design-system/components/Switch';
 
 export default {
   name: 'Drawer',
diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
index 438978fab..559a0f42a 100644
--- a/src/components/EntryForm.tsx
+++ b/src/components/EntryForm.tsx
@@ -20,7 +20,7 @@ import Box from '../components/Box';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import VisuallyHidden from '../components/VisuallyHidden';
-import Switch from '../components/Switch';
+import Switch from '../design-system/components/Switch';
 import { WEEKDAYS, isClosed, Weekdays } from '../lib/openingTimes';
 import crosshair from '../../public/crosshair-small.svg';
 
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
index 480aef032..9832ee3d2 100644
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { usePlausible } from 'next-plausible';
 
 import Box from './Box';
-import Switch from './Switch';
+import Switch from '../design-system/components/Switch';
 import Icon from '../design-system/components/Icon';
 import { IconProps } from '../design-system/components/Icon/Icon.types';
 import config from '../config';
diff --git a/src/components/Switch/Switch.md b/src/components/Switch/Switch.md
deleted file mode 100644
index 90759005c..000000000
--- a/src/components/Switch/Switch.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```jsx
-const [isChecked, setIsChecked] = React.useState(false);
-
-<Switch checked={isChecked} onChange={() => setIsChecked(!isChecked)} />;
-```
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
deleted file mode 100644
index 47a0829b9..000000000
--- a/src/components/Switch/Switch.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-
-import styled from '@emotion/styled';
-
-import Box from '../Box';
-
-const HEIGHT = 16;
-const WIDTH = 27;
-const OFFSET = 1;
-const LENGTH = HEIGHT - OFFSET * 2;
-
-const Inner = styled(Box)`
-  transition: left 0.2s ease;
-`;
-
-interface SwitchProps extends Partial<HTMLButtonElement> {
-  /** Determines whether the switch is on */
-  checked: boolean;
-  onClick?: () => void;
-  onChange?: (checked: boolean) => void;
-}
-
-const Switch: React.FC<SwitchProps> = React.forwardRef(
-  ({ checked, onClick, onChange, ...props }, ref) => {
-    return (
-      <Box
-        as="button"
-        type="button"
-        role="switch"
-        {...props}
-        ref={ref}
-        aria-checked={checked}
-        position="relative"
-        bg={checked ? 'tertiary' : 'primary'}
-        height={`${HEIGHT}px`}
-        width={`${WIDTH}px`}
-        borderRadius={'18px'}
-        onClick={() => {
-          if (onClick) {
-            onClick();
-          }
-          if (onChange) {
-            onChange(!checked);
-          }
-        }}
-      >
-        <Inner
-          as="span"
-          position="absolute"
-          top="1px"
-          left={
-            checked ? `calc(100% - ${LENGTH}px - ${OFFSET}px)` : `${OFFSET}px`
-          }
-          height={`${LENGTH}px`}
-          width={`${LENGTH}px`}
-          borderRadius="50%"
-          bg="white"
-        />
-      </Box>
-    );
-  }
-);
-
-// eslint-disable-next-line functional/immutable-data
-Switch.displayName = 'Switch';
-
-/** @component */
-export default Switch;
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
deleted file mode 100644
index 3c587b7aa..000000000
--- a/src/components/Switch/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Switch from './Switch';
-
-export default Switch;
diff --git a/src/design-system/components/Switch/Switch.css b/src/design-system/components/Switch/Switch.css
new file mode 100644
index 000000000..04a014c9d
--- /dev/null
+++ b/src/design-system/components/Switch/Switch.css
@@ -0,0 +1,31 @@
+.switch {
+    --switch-height: 16px;
+    --switch-width: 27px;
+    --switch-thumb-padding: 1px;
+    --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-padding) * 2);
+
+    position: relative;
+    background-color: var(--color-blue);
+    border-radius: calc(var(--switch-height) + var(--switch-thumb-padding) * 2);
+    width: var(--switch-width);
+    height: var(--switch-height);
+}
+
+.switch[aria-checked=true] {
+    background-color: var(--color-pink);
+}
+
+.switch .switch-thumb {
+    transition: left 0.2s ease;
+    position:absolute;
+    width: var(--switch-thumb-size); 
+    height: var(--switch-thumb-size);
+    top: var(--switch-thumb-padding);
+    left: var(--switch-thumb-padding);
+    border-radius: 50%;
+    background-color: white;
+}
+
+.switch[aria-checked=true] .switch-thumb {
+    left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-padding));
+}
\ No newline at end of file
diff --git a/src/design-system/components/Switch/Switch.stories.tsx b/src/design-system/components/Switch/Switch.stories.tsx
new file mode 100644
index 000000000..267586a07
--- /dev/null
+++ b/src/design-system/components/Switch/Switch.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Switch from './Switch';
+import { useState } from 'react';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Design-System/Form Elements/Switch',
+  component: Switch,
+};
+
+export default meta;
+
+const SwitchWithState = () => {
+  const [checked, setChecked] = useState(false);
+  return <Switch onChange={setChecked} checked={checked} />;
+};
+
+export const Primary: StoryObj<typeof Switch> = {
+  render: () => <SwitchWithState />,
+};
diff --git a/src/design-system/components/Switch/Switch.tsx b/src/design-system/components/Switch/Switch.tsx
new file mode 100644
index 000000000..0380eddc0
--- /dev/null
+++ b/src/design-system/components/Switch/Switch.tsx
@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+
+interface SwitchProps
+  extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onChange'> {
+  /** Determines whether the switch is on */
+  checked: boolean;
+  onClick?: () => void;
+  onChange?: (checked: boolean) => void;
+}
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, onClick, onChange, ...props }, ref) => {
+    return (
+      <button
+        type="button"
+        role="switch"
+        ref={ref}
+        {...props}
+        className="switch"
+        aria-checked={checked}
+        onClick={() => {
+          if (onClick) {
+            onClick();
+          }
+          if (onChange) {
+            onChange(!checked);
+          }
+        }}
+      >
+        <span className="switch-thumb" />
+      </button>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';
+
+export default Switch;
diff --git a/src/design-system/components/Switch/index.ts b/src/design-system/components/Switch/index.ts
new file mode 100644
index 000000000..ed80f23e5
--- /dev/null
+++ b/src/design-system/components/Switch/index.ts
@@ -0,0 +1 @@
+export { default } from './Switch';
diff --git a/src/design-system/components/stylesheet.css b/src/design-system/components/stylesheet.css
index 131db2873..1ecd6afe1 100644
--- a/src/design-system/components/stylesheet.css
+++ b/src/design-system/components/stylesheet.css
@@ -3,3 +3,4 @@
 @import 'src/design-system/components/Icon/Icon.css';
 @import 'src/design-system/components/InputField/InputField.css';
 @import 'src/design-system/components/RadioInput/RadioInput.css';
+@import 'src/design-system/components/Switch/Switch.css';