diff --git a/src/components/SpinButton/SpinButton.stories.tsx b/src/components/SpinButton/SpinButton.stories.tsx
index 79f292ab..4231e0be 100644
--- a/src/components/SpinButton/SpinButton.stories.tsx
+++ b/src/components/SpinButton/SpinButton.stories.tsx
@@ -1,26 +1,23 @@
-import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { SpinButton } from './SpinButton';
 import { Box } from '../Box';
 import { TextField } from '../TextField';
 
-export default {
-  title: 'Components/SpinButton',
+const meta: Meta<typeof SpinButton> = {
   component: SpinButton,
   argTypes: {
     onClick: { action: 'clicked' },
   },
-} as ComponentMeta<typeof SpinButton>;
-
-const Template: ComponentStory<typeof SpinButton> = (args) => (
-  <SpinButton {...args}></SpinButton>
-);
+};
+export default meta;
+type Story = StoryObj<typeof SpinButton>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};
 
-export const KeyboardSupport = () => {
-  const [valueNow, setValueNow] = useState(0);
+export const KeyboardSupport: StoryFn<typeof SpinButton> = () => {
+  const [valueNow, setValueNow] = React.useState(0);
   return (
     <Box style={{ overflow: 'auto', width: '80%' }} direction="row">
       <TextField
diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
index e52d33da..7db0300c 100644
--- a/src/components/Stepper/Stepper.stories.tsx
+++ b/src/components/Stepper/Stepper.stories.tsx
@@ -1,18 +1,67 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react';
 
 import { Stepper } from './Stepper';
 import { Step } from './Step';
 import { Activity, Flag, User, Zap } from '@lifeomic/chromicons';
 
-export default {
-  title: 'Components/Stepper',
+const meta: Meta<typeof Stepper> = {
   component: Stepper,
-  argTypes: {},
-  subcomponents: { Step },
-} as ComponentMeta<typeof Stepper>;
+  argTypes: {
+    height: {
+      control: { type: 'number' },
+    },
+    width: {
+      control: { type: 'number' },
+    },
+    margin: {
+      control: { type: 'number' },
+    },
+    marginTop: {
+      control: { type: 'number' },
+    },
+    marginBottom: {
+      control: { type: 'number' },
+    },
+    marginLeft: {
+      control: { type: 'number' },
+    },
+    marginRight: {
+      control: { type: 'number' },
+    },
+    marginX: {
+      control: { type: 'number' },
+    },
+    marginY: {
+      control: { type: 'number' },
+    },
+    padding: {
+      control: { type: 'number' },
+    },
+    paddingTop: {
+      control: { type: 'number' },
+    },
+    paddingBottom: {
+      control: { type: 'number' },
+    },
+    paddingLeft: {
+      control: { type: 'number' },
+    },
+    paddingRight: {
+      control: { type: 'number' },
+    },
+    paddingX: {
+      control: { type: 'number' },
+    },
+    paddingY: {
+      control: { type: 'number' },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Stepper>;
 
-const Template: ComponentStory<typeof Stepper> = (args) => (
+const Template: StoryFn<typeof Stepper> = (args) => (
   <Stepper {...args}>
     <Step icon={Zap} subTitle="950" title="Registered" />
     <Step icon={Activity} subTitle="900" title="Consented" />
@@ -25,7 +74,9 @@ const Template: ComponentStory<typeof Stepper> = (args) => (
   </Stepper>
 );
 
-export const Default = Template.bind({});
-Default.args = {
-  activeStep: 1,
+export const Default: Story = {
+  render: Template,
+  args: {
+    activeStep: 1,
+  },
 };