diff --git a/src/Progress/Progress.stories.tsx b/src/Progress/Progress.stories.tsx
index 26501de8..4e423aa6 100644
--- a/src/Progress/Progress.stories.tsx
+++ b/src/Progress/Progress.stories.tsx
@@ -8,10 +8,66 @@ export default {
   component: Progress,
 } as Meta
 
-export const Default: Story<ProgressProps> = (args) => {
-  return <Progress {...args} />
+const Template: Story<ProgressProps> = (args) => {
+  return (
+    <div className='flex flex-col gap-y-2'>
+      <Progress {...args} className="w-56" value={0} />
+      <Progress {...args} className="w-56" value={10} />
+      <Progress {...args} className="w-56" value={40} />
+      <Progress {...args} className="w-56" value={70} />
+      <Progress {...args} className="w-56" value={100} />
+    </div>
+  )
 }
+
+export const Default = Template.bind({})
 Default.args = {
-  value: 50,
   max: 100,
 }
+
+export const PrimaryColor = Template.bind({})
+PrimaryColor.args = {
+  max: 100,
+  color: 'primary'
+}
+
+export const SecondaryColor = Template.bind({})
+SecondaryColor.args = {
+  max: 100,
+  color: 'secondary'
+}
+
+export const AccentColor = Template.bind({})
+AccentColor.args = {
+  max: 100,
+  color: 'accent'
+}
+
+export const SuccessColor = Template.bind({})
+SuccessColor.args = {
+  max: 100,
+  color: 'success'
+}
+
+export const InfoColor = Template.bind({})
+InfoColor.args = {
+  max: 100,
+  color: 'info'
+}
+
+export const WarningColor = Template.bind({})
+WarningColor.args = {
+  max: 100,
+  color: 'warning'
+}
+
+export const ErrorColor = Template.bind({})
+ErrorColor.args = {
+  max: 100,
+  color: 'error'
+}
+
+export const Indeterminate: Story<ProgressProps> = (args) => {
+  return <Progress {...args} className="w-56" />
+}
+Indeterminate.args = {}