diff --git a/.github/workflows/build-chromatic.yml b/.github/workflows/build-chromatic.yml
index 385cb5a0b0..952ef7be4c 100644
--- a/.github/workflows/build-chromatic.yml
+++ b/.github/workflows/build-chromatic.yml
@@ -6,9 +6,11 @@ on:
       - release
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
   pull_request:
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
 
 jobs:
   chromatic-deployment:
diff --git a/.github/workflows/build-storybook.yml b/.github/workflows/build-storybook.yml
index c4aa2e6cfc..eeb1f1fdfa 100644
--- a/.github/workflows/build-storybook.yml
+++ b/.github/workflows/build-storybook.yml
@@ -6,9 +6,11 @@ on:
       - release
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
   pull_request:
     paths:
       - 'app/client/packages/design-system/**'
+      - 'app/client/packages/storybook/**'
 
 jobs:
   chromatic-deployment:
diff --git a/app/client/packages/storybook/stories/design-system/widgets/Switch.stories.mdx b/app/client/packages/storybook/stories/design-system/widgets/Switch.stories.mdx
index 58e9fdc2e6..e22ef4b5b2 100644
--- a/app/client/packages/storybook/stories/design-system/widgets/Switch.stories.mdx
+++ b/app/client/packages/storybook/stories/design-system/widgets/Switch.stories.mdx
@@ -21,72 +21,74 @@ Switch is a component that allows the user to select one or more options from a
   <Story name="Switch">{Template.bind({})}</Story>
 </Canvas>
 
+<ArgsTable story="Switch" of={Switch} />
+
 ### States
 
-<Canvas>
-  <Story
-    name="State - unchecked"
-    args={{
-      children: "Unchecked",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="State - Default Checked"
-    args={{
-      defaultSelected: true,
-      children: "Checked",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="State - Disabled"
-    args={{
-      defaultSelected: true,
-      children: "Disabled",
-      isDisabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="State - Disabled unchecked"
-    args={{
-      children: "Disabled unchecked",
-      isDisabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  name="State - unchecked"
+  args={{
+    children: "Unchecked",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="State - Default Checked"
+  args={{
+    defaultSelected: true,
+    children: "Checked",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="State - Disabled"
+  args={{
+    defaultSelected: true,
+    children: "Disabled",
+    isDisabled: true,
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="State - Disabled unchecked"
+  args={{
+    children: "Disabled unchecked",
+    isDisabled: true,
+  }}
+>
+  {Template.bind({})}
+</Story>
 
 ### Label Position
 
-<Canvas>
-  <Story
-    parameters={{
-      width: 250,
-    }}
-    name="Label Position - Left"
-    args={{
-      labelPosition: "left",
-      children: "Label Position - Left",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    parameters={{
-      width: 250,
-    }}
-    name="Label Position - Right"
-    args={{
-      labelPosition: "right",
-      children: "Label Position - Right",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  parameters={{
+    width: 250,
+  }}
+  name="Label Position - Left"
+  args={{
+    labelPosition: "left",
+    children: "Label Position - Left",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  parameters={{
+    width: 250,
+  }}
+  name="Label Position - Right"
+  args={{
+    labelPosition: "right",
+    children: "Label Position - Right",
+  }}
+>
+  {Template.bind({})}
+</Story>
diff --git a/app/client/packages/storybook/stories/design-system/widgets/SwitchGroup.stories.mdx b/app/client/packages/storybook/stories/design-system/widgets/SwitchGroup.stories.mdx
index b8a61c0f25..9eb3cc6c8b 100644
--- a/app/client/packages/storybook/stories/design-system/widgets/SwitchGroup.stories.mdx
+++ b/app/client/packages/storybook/stories/design-system/widgets/SwitchGroup.stories.mdx
@@ -31,89 +31,78 @@ Switch Group is a group of checkboxes that can be selected together.
 
 # Orientation
 
-<Canvas>
-  <Story
-    args={{
-      orientation: "vertical",
-    }}
-    name="Orientation - Vertical"
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    args={{
-      orientation: "horizontal",
-    }}
-    name="Orientation - Horizontal"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    orientation: "vertical",
+  }}
+  name="Orientation - Vertical"
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  args={{
+    orientation: "horizontal",
+  }}
+  name="Orientation - Horizontal"
+>
+  {Template.bind({})}
+</Story>
 
 # Emphasized
 
-<Canvas>
-  <Story
-    args={{
-      isEmphasized: true,
-    }}
-    name="Is Emphasised"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    isEmphasized: true,
+  }}
+  name="Is Emphasised"
+>
+  {Template.bind({})}
+</Story>
 
 # Label Position and Alignment
 
-<Canvas>
-  <Story
-    args={{
-      labelPosition: "side",
-      labelWidth: "100px",
-      errorMessage: "This is a description",
-    }}
-    name="Label Position - Side"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    labelPosition: "side",
+    labelWidth: "100px",
+    errorMessage: "This is a description",
+  }}
+  name="Label Position - Side"
+>
+  {Template.bind({})}
+</Story>
 
 # Is Disabled
 
-<Canvas>
-  <Story
-    args={{
-      isDisabled: true,
-    }}
-    name="Is Disabled"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    isDisabled: true,
+  }}
+  name="Is Disabled"
+>
+  {Template.bind({})}
+</Story>
 
 # Is Required
 
-<Canvas>
-  <Story
-    args={{
-      isRequired: true,
-    }}
-    name="Is Required"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    isRequired: true,
+  }}
+  name="Is Required"
+>
+  {Template.bind({})}
+</Story>
 
 # Invalid State
 
-<Canvas>
-  <Story
-    args={{
-      validationState: "invalid",
-      errorMessage: "This is a error message",
-    }}
-    name="Invalid State"
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
+<Story
+  args={{
+    validationState: "invalid",
+    errorMessage: "This is a error message",
+  }}
+  name="Invalid State"
+>
+  {Template.bind({})}
+</Story>