diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index d769dc393b..e08ad3c3bc 100644
--- a/packages/ui/components/empty-screen/empty-screen.stories.mdx
+++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx
@@ -13,16 +13,35 @@ The CTA button can prompt the user to add the info/ apps needed for the page.
 
 <Canvas>
   <Story
-    name="EmptyScreen">
-    <VariantsTable titles={[]} columnMinWidth={150}>
-      <VariantRow variant="Default">
-        <EmptyScreen
-          Icon={Calendar}
-          headline="Empty state header"
-          description="Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More."
-          buttonText="Button text"
-        />
-      </VariantRow>
-    </VariantsTable>
+    name="EmptyScreen"
+    args={{
+      headline: 'Empty state header',
+      description: 'Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More.',
+      buttonText: 'Button text',
+    }}
+    argTypes={{
+      headline: {
+        control: 'text',
+      },
+      description: {
+        control: 'text',
+      },
+      buttonText: {
+        control: 'text',
+      },
+    }}
+  >
+    {({ headline, description, buttonText }) => (
+      <VariantsTable titles={[]} columnMinWidth={150}>
+        <VariantRow variant="Default">
+          <EmptyScreen
+            Icon={Calendar}
+            headline={headline}
+            description={description}
+            buttonText={buttonText}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx
index ed23692733..16243c02d1 100644
--- a/packages/ui/components/form/checkbox/checkbox.stories.mdx
+++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx
@@ -45,20 +45,45 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
 </Examples>
 
 <Canvas>
-  <Story name="Checkbox">
-    <VariantsTable titles={[""]} columnMinWidth={150}>
-      <VariantRow variant="Default">
-        <Checkbox label="Default"  />
-        <Checkbox label="Error" error/>
-        <Checkbox label="Disabled"  disabled/>
-        <Checkbox label="Disabled Checked"  checked disabled />
-      </VariantRow>
-        <VariantRow variant="Description As Label">
-          <Checkbox description="Default" descriptionAsLabel  />
-          <Checkbox description="Error" error descriptionAsLabel/>
-          <Checkbox description="Disabled"  disabled descriptionAsLabel/>
-          <Checkbox description="Disabled Checked"  checked disabled descriptionAsLabel/>
-      </VariantRow>
-    </VariantsTable>
+  <Story name="Checkbox"
+    args={{
+      label: "Default",
+      description: "Default Description",
+      error: false,
+      disabled: false,
+    }}
+         argTypes={{
+            label: {
+              control: {
+                type: 'text',
+              },
+            },
+            description: {
+              control: {
+                type: 'text',
+              },
+            },
+            error: {
+              control: {
+                type: 'boolean',
+              },
+            },
+            disabled: {
+              control: {
+                type: 'boolean',
+              },
+            }
+         }}
+  >
+    {({ label, description, error, disabled }) => (
+  <VariantsTable titles={[""]} columnMinWidth={150}>
+    <VariantRow variant="Default">
+      <Checkbox label={label} error={error} disabled={disabled} />
+    </VariantRow>
+    <VariantRow variant="Description As Label">
+      <Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel/>
+    </VariantRow>
+  </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/toast/toast.stories.mdx b/packages/ui/components/toast/toast.stories.mdx
index 36eaa81f04..4a49c82e46 100644
--- a/packages/ui/components/toast/toast.stories.mdx
+++ b/packages/ui/components/toast/toast.stories.mdx
@@ -1,5 +1,15 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  RowTitles,
+  CustomArgsTable,
+  VariantRow
+} from "@calcom/storybook/components";
 
 import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
 
@@ -30,3 +40,28 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
     <ErrorToast message="Error Toast" toastVisible={true}/>
   </Example>
 </Examples>
+
+## Toast Story
+
+<Canvas>
+  <Story name="Default"
+  args={{
+    message: 'Default Toast',
+    toastVisible: true
+  }}
+         argTypes={{
+            message: { control: 'text' },
+            toastVisible: { control: 'boolean'}
+  }}>
+    {({message, toastVisible}) => (
+      <VariantsTable titles={['Default','Success', 'Warning', 'Error']} columnMinWidth={150}>
+        <VariantRow variant="Default">
+          <DefaultToast message={message} toastVisible={toastVisible}/>
+          <SuccessToast message={message} toastVisible={toastVisible}/>
+          <WarningToast message={message} toastVisible={toastVisible}/>
+          <ErrorToast message={message} toastVisible={toastVisible}/>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>