diff --git a/packages/features/calendars/weeklyview/components/calendar.stories.mdx b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
index 2ba17e64fd..1aeea475b5 100644
--- a/packages/features/calendars/weeklyview/components/calendar.stories.mdx
+++ b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
@@ -55,15 +55,31 @@ export const Template = (args) => <Calendar {...args} />;
 </Canvas>
 
 <Canvas>
-  <Story name="Onclick Handlers">
-    <Calendar
-      startHour={8}
-      endHour={17}
-      events={events}
-      onEventClick={(e) => alert(e.title)}
-      onEmptyCellClick={(date) => alert(date.toString())}
-      sortEvents
-      hoverEventDuration={30}
-    />
+  <Story name="Onclick Handlers"
+         args={{
+            startHour: 8,
+            endHour: 17,
+            hoverEventDuration: 30,
+          }}
+         argTypes={{
+           startHour: {
+             control: { type: "number", min: 0, max: 23, step: 1 },
+           },
+            endHour: {
+              control: { type: "number", min: 0, max: 23, step: 1 },
+            },
+           hoverEventDuration: {
+             control: { type: "number", min: 0, max: 60, step: 1 },
+           },
+         }}
+  >
+    {({...args}) => (
+      <Calendar {...args}
+                events={events}
+                onEventClick={(e) => alert(e.title)}
+                onEmptyCellClick={(date) => alert(date.toString())}
+                sortEvents
+      />
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/alert/alert.stories.mdx b/packages/ui/components/alert/alert.stories.mdx
index 0f2186a106..cfd93b8088 100644
--- a/packages/ui/components/alert/alert.stories.mdx
+++ b/packages/ui/components/alert/alert.stories.mdx
@@ -35,23 +35,37 @@ Each alert has a state to represent neutral, positive or negative responses.
 
 <Canvas>
   <Story
-    name="Alert">
-    <VariantsTable titles={['Default']} columnMinWidth={150}>
-      <VariantRow variant="Success">
-        <Alert severity="success" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Warning">
-        <Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Error">
-        <Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Neutral">
-        <Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Info">
-        <Alert severity="info" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-    </VariantsTable>
+    name="Alert"
+    args={{
+      severity: 'success',
+      title: 'Summarise what happened',
+      message: 'Describe what can be done about it here.',
+    }}
+    argTypes={{
+      severity: {
+        control: {
+          type: 'inline-radio',
+          options: ['success', 'warning', 'error', 'neutral', 'info'],
+        },
+      },
+      title: {
+        control: {
+          type: 'text'
+        }
+      },
+      message: {
+        control: {
+          type: 'text'
+        }
+      },
+    }}
+  >
+    {({ severity, title, message }) => (
+      <VariantsTable titles={['Default']} columnMinWidth={150}>
+        <VariantRow variant={severity}>
+          <Alert severity={severity} title={title} message={message} />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx
index 5e7d5fbe31..671a780a62 100644
--- a/packages/ui/components/avatar/avatar.stories.mdx
+++ b/packages/ui/components/avatar/avatar.stories.mdx
@@ -125,14 +125,29 @@ Avatar group can be composed differently based on the number of user profile.
 
 <Canvas>
   <Story
-    name="Avatar">
-    <VariantsTable titles={['Default']} columnMinWidth={150}>
-      <VariantRow variant="Sm">
-        <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+    name="Avatar"
+    args={{
+      size: 'sm',
+      alt: 'Avatar Story',
+      gravatarFallbackMd5: 'Ui@CAL.com',
+    }}
+    argTypes={{
+      size: {
+        control: {
+          type: 'inline-radio',
+          options: ['sm', 'lg'],
+        },
+      },
+      alt: { control: 'text' },
+      gravatarFallbackMd5: { control: 'text' },
+    }}
+  >
+    {({ size, alt, gravatarFallbackMd5 }) => (
+  <VariantsTable titles={['Default']} columnMinWidth={150}>
+      <VariantRow variant={size}>
+        <Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
       </VariantRow>
-      <VariantRow variant="Lg">
-        <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
-      </VariantRow>
-    </VariantsTable>
+  </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index 817d6dcfac..d3233ca2d4 100644
--- a/packages/ui/components/badge/badge.stories.mdx
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -56,28 +56,32 @@ Alet badge is used in conjunction with an item, profile or label to indicate num
 <Title offset title="Badge" suffix="Variants" />
 
 <Canvas>
-  <Story name="All Variants">
-    <VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
-      <VariantRow variant="Default">
-        <Badge variant="default" >Badge text</Badge>
-        <Badge variant="default" withDot>Badge text</Badge>
-        <Badge variant="default" startIcon={Plus}>Badge text</Badge>
+  <Story name="All Variants"
+  args={{
+    severity: 'default',
+    label: 'Badge text',
+  }}
+  argTypes={{
+    severity: {
+      control: {
+        type: 'inline-radio',
+        options: ['default', 'success', 'gray', 'error'],
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+  }}>
+    {({ severity, label }) => (
+  <VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
+      <VariantRow variant={severity}>
+        <Badge variant={severity}>{label}</Badge>
+        <Badge variant={severity} withDot>{label}</Badge>
+        <Badge variant={severity} startIcon={Plus}>{label}</Badge>
       </VariantRow>
-      <VariantRow variant="Success">
-        <Badge variant="success" >Badge text</Badge>
-        <Badge variant="success" withDot>Badge text</Badge>
-        <Badge variant="success" startIcon={Plus}>Badge text</Badge>
-      </VariantRow>
-      <VariantRow variant="gray">
-        <Badge variant="gray" >Badge text</Badge>
-        <Badge variant="gray" withDot>Badge text</Badge>
-        <Badge variant="gray" startIcon={Plus}>Badge text</Badge>
-      </VariantRow>
-      <VariantRow variant="error">
-        <Badge variant="error" >Badge text</Badge>
-        <Badge variant="error" withDot>Badge text</Badge>
-        <Badge variant="error" startIcon={Plus}>Badge text</Badge>
-      </VariantRow>
-    </VariantsTable>
+  </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index c40d65bd37..fbdc1a6cca 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.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 { Plus, X } from '../icon';
 import { Button } from './Button';
 
@@ -87,7 +97,6 @@ Button are clickable elements that initiates user actions. Labels in the button
 
 <Title offset title="Buttons" suffix="Variants" />
 
-
 <Canvas>
   <Story name="All variants">
     <VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive',"Icon"]} columnMinWidth={150}>
@@ -128,4 +137,66 @@ Button are clickable elements that initiates user actions. Labels in the button
       </VariantRow>
     </VariantsTable>
   </Story>
+  <Story name="Button Playground"
+         args={{
+           color: 'primary',
+           size: 'base',
+           loading: false,
+           disabled: false,
+           children: 'Button text',
+           className: ''
+         }}
+         argTypes={{
+            color: {
+              control: {
+                type: 'inline-radio',
+                options: ['primary', 'secondary', 'minimal', 'destructive']
+              }
+            },
+            size: {
+              control: {
+                type: 'inline-radio',
+                options: ['base', 'sm']
+              }
+            },
+            loading: {
+              control: {
+                type: 'boolean'
+              }
+            },
+            disabled: {
+              control: {
+                type: 'boolean'
+              }
+            },
+            children: {
+              control: {
+                type: 'text'
+              }
+            },
+            className: {
+              control: {
+                type: 'inline-radio',
+                options: ['', 'sb-pseudo--hover', 'sb-pseudo--focus']
+              }
+            }
+      }}
+  >
+    {({ color, size, loading, disabled, children, className }) => (
+  <VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
+    <VariantRow variant="Button">
+      <Button
+        color={color}
+        size={size}
+        variant="default"
+        loading={loading}
+        disabled={disabled}
+        className={className}
+      >
+        {children}
+      </Button>
+    </VariantRow>
+  </VariantsTable>
+    )}
+  </Story>
 </Canvas>
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 4ae04619fa..7201ed4b90 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -47,7 +47,7 @@ Button group enables multiple buttons to be combined into a single unit. It offe
 
 <Canvas>
   <Story
-    name="All Variatns">
+    name="All Variants">
     <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
@@ -81,3 +81,38 @@ Button group enables multiple buttons to be combined into a single unit. It offe
     </VariantsTable>
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="ButtonGroup Playground"
+    args={{
+      color: 'secondary',
+      combined: false,
+    }}
+    argTypes={{
+      color: {
+        control: {
+          type: 'select',
+          options: ['primary', 'secondary', 'minimal'],
+        },
+      },
+      combined: {
+        control: {
+          type: 'boolean',
+        },
+      },
+    }}
+  >
+    {({ color, combined }) => (
+      <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
+        <VariantRow  variant="">
+          <ButtonGroup combined={combined}>
+            <Button StartIcon={Trash} variant="icon" color={color}  />
+            <Button StartIcon={Navigation} variant="icon" color={color}/>
+            <Button StartIcon={Clipboard} variant="icon"  color={color}/>
+          </ButtonGroup>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/card/card.stories.mdx b/packages/ui/components/card/card.stories.mdx
index c58d101120..69b83f88c9 100644
--- a/packages/ui/components/card/card.stories.mdx
+++ b/packages/ui/components/card/card.stories.mdx
@@ -22,19 +22,37 @@ export const tip = {
 
 
 <Canvas>
-  <Story name="Card">
-    <VariantsTable titles={['']} columnMinWidth={150}>
-      <VariantRow variant="Sidebar Card">
+  <Story name="Card"
+  args={{
+    thumbnailUrl: tip.thumbnailUrl,
+    mediaLink: tip.mediaLink,
+    title: tip.title,
+    description: tip.description,
+    learnMoreHref: tip.href,
+    learnMoreText: "learn more",
+  }}
+  argTypes={{
+    thumbnailUrl: { control: { type: 'text' } },
+    mediaLink: { control: { type: 'text' } },
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    learnMoreHref: { control: { type: 'text' } },
+    learnMoreText: { control: { type: 'text' } },
+  }}>
+    {({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
+      <VariantsTable titles={['']} columnMinWidth={150}>
+        <VariantRow variant="Sidebar Card">
           <Card
-                variant="SidebarCard"
-                thumbnailUrl={tip.thumbnailUrl}
-                mediaLink={tip.mediaLink}
-                title={tip.title}
-                description={tip.description}
-                learnMore={{ href: tip.href, text: "learn more" }}
-                actionButton={{ onClick: () => console.log("Clicked") }}
-              />
-      </VariantRow>
-    </VariantsTable>
+            variant="SidebarCard"
+            thumbnailUrl={thumbnailUrl}
+            mediaLink={mediaLink}
+            title={title}
+            description={description}
+            learnMore={{ href: tip.href, text: learnMoreText }}
+            actionButton={{ onClick: () => console.log("Clicked") }}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index d769dc393b..9d083982c7 100644
--- a/packages/ui/components/empty-screen/empty-screen.stories.mdx
+++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx
@@ -13,16 +13,36 @@ 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.',
+      buttonText: 'Learn More',
+    }}
+    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}
+            buttonOnClick={() => alert("Learned More!!")}
+          />
+        </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/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx
index cc4f29bef2..32b5ff9014 100644
--- a/packages/ui/components/form/select/select.stories.mdx
+++ b/packages/ui/components/form/select/select.stories.mdx
@@ -112,6 +112,10 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
 ## Select Story
 <Canvas>
   <Story name="Default">
-      <SelectField options={options} label={"Default Select"}/>
+    <VariantsTable titles={['Default']} columnMinWidth={450} >
+      <VariantRow>
+        <SelectField options={options} label={"Default Select"}/>
+      </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>
diff --git a/packages/ui/components/tooltip/tooltip.stories.mdx b/packages/ui/components/tooltip/tooltip.stories.mdx
index 2d7e7e8fb0..a09c727fd5 100644
--- a/packages/ui/components/tooltip/tooltip.stories.mdx
+++ b/packages/ui/components/tooltip/tooltip.stories.mdx
@@ -15,21 +15,46 @@ Tooltip components can be used to provide additional information about an elemen
 
 
 <Canvas>
-  <Story name="Tooltip">
+  <Story name="Tooltip"
+  args={{
+    alertMsg: 'Copied!',
+    hoverMsg: "Copy to clipboard",
+    content: 'Hover Me',
+  }}
+         argTypes={{
+            alertMsg: {
+              control: {
+                type: 'text',
+              },
+            },
+            hoverMsg: {
+              control: {
+                type: 'text',
+              },
+            },
+            content: {
+              control: {
+                type: 'text',
+              },
+            },
+         }}
+  >
+    {({ alertMsg, hoverMsg, content }) => (
     <TooltipProvider>
       <VariantsTable titles={['']} columnMinWidth={150}>
         <VariantRow variant="Default">
-          <Tooltip content="Copy to clipboard">
+          <Tooltip content={`${hoverMsg}`}>
             <span
               className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
               onClick={() => {
-                alert('Copied!');
+                alert(`${alertMsg}`);
               }}>
-              Hover Me
+              {content}
             </span>
           </Tooltip>
         </VariantRow>
       </VariantsTable>
     </TooltipProvider>
+    )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/top-banner/topbanner.stories.mdx b/packages/ui/components/top-banner/topbanner.stories.mdx
index 72e7886a36..44a53efbe1 100644
--- a/packages/ui/components/top-banner/topbanner.stories.mdx
+++ b/packages/ui/components/top-banner/topbanner.stories.mdx
@@ -62,3 +62,41 @@ Each toast has a state to represent neutral, positive or negative responses.
         />
          </Example>
 </Examples>
+
+<Canvas>
+  <Story name="TopBanner"
+         args={{
+           text: 'Something big is happening we want you to know about.',
+           variant: 'default'
+  }}
+         argTypes={{
+            variant: {
+              control: {
+                type: 'select',
+                options: ['default', 'warning', 'error'],
+              },
+            },
+           text: {
+              control: {
+                type: 'text',
+              },
+            },
+  }}>
+    {({ text, variant, ...args }) => (
+      <TopBanner
+        {...args}
+        actions={
+          <button
+            className="border-b border-black text-sm"
+            onClick={() => {
+              alert("test");
+            }}>
+            Action
+          </button>
+        }
+        variant={variant}
+        text={text}
+      />
+    )}
+  </Story>
+</Canvas>