diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts
index 36ed544..1035220 100644
--- a/packages/frontend/.storybook/main.ts
+++ b/packages/frontend/.storybook/main.ts
@@ -26,4 +26,5 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
 };
+
 export default config;
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index 805e70a..02c372d 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -63,6 +63,10 @@ export * from './CheckRadioOutlineIcon';
 export * from './TrendingIcon';
 export * from './ChevronDoubleDownIcon';
 export * from './GearIcon';
+export * from './AppleIcon';
+export * from './CalendarDaysIcon';
+export * from './GoogleIcon';
+export * from './KeyIcon';
 
 // Templates
 export * from './templates';
diff --git a/packages/frontend/src/components/shared/Select/index.ts b/packages/frontend/src/components/shared/Select/index.ts
index 7868ecb..7669724 100644
--- a/packages/frontend/src/components/shared/Select/index.ts
+++ b/packages/frontend/src/components/shared/Select/index.ts
@@ -1 +1,2 @@
 export * from './Select';
+export * from './SelectItem';
diff --git a/packages/frontend/src/components/shared/Tooltip/index.ts b/packages/frontend/src/components/shared/Tooltip/index.ts
index a51f2a3..77078f8 100644
--- a/packages/frontend/src/components/shared/Tooltip/index.ts
+++ b/packages/frontend/src/components/shared/Tooltip/index.ts
@@ -1,2 +1,3 @@
 export * from './Tooltip';
 export * from './TooltipBase';
+export * from './TooltipContent';
diff --git a/packages/frontend/src/stories/Components/Avatar.stories.tsx b/packages/frontend/src/stories/Components/Avatar.stories.tsx
index 5d48298..d9bfdfd 100644
--- a/packages/frontend/src/stories/Components/Avatar.stories.tsx
+++ b/packages/frontend/src/stories/Components/Avatar.stories.tsx
@@ -27,6 +27,7 @@ const meta: Meta<typeof Avatar> = {
     },
   },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Avatar>;
diff --git a/packages/frontend/src/stories/Components/Calendar.stories.tsx b/packages/frontend/src/stories/Components/Calendar.stories.tsx
new file mode 100644
index 0000000..9e214b0
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Calendar.stories.tsx
@@ -0,0 +1,44 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Calendar } from 'components/shared/Calendar';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  args: {
+    wrapperProps: 'any' as unknown as any,
+    calendarWrapperProps: 'any' as unknown as any,
+    footerProps: 'any' as unknown as any,
+    actions: 'any' as unknown as any,
+    onSelect: () => {},
+    onCancel: () => {},
+    onReset: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  render: ({
+    wrapperProps,
+    calendarWrapperProps,
+    footerProps,
+    actions,
+    onSelect,
+    onCancel,
+    onReset,
+  }) => (
+    <Calendar
+      wrapperProps={wrapperProps}
+      calendarWrapperProps={calendarWrapperProps}
+      footerProps={footerProps}
+      actions={actions}
+      onSelect={onSelect}
+      onCancel={onCancel}
+      onReset={onReset}
+    />
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/Checkbox.stories.tsx b/packages/frontend/src/stories/Components/Checkbox.stories.tsx
new file mode 100644
index 0000000..7579457
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Checkbox.stories.tsx
@@ -0,0 +1,41 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Checkbox } from 'components/shared/Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  args: {
+    label: 'string',
+    description: 'string',
+    checked: 'CheckedState' as unknown as any,
+    defaultChecked: 'CheckedState' as unknown as any,
+    required: 'boolean' as unknown as any,
+    onCheckedChange: '(checked: CheckedState) => void' as unknown as any,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: ({
+    label,
+    description,
+    checked,
+    defaultChecked,
+    required,
+    onCheckedChange,
+  }) => (
+    <Checkbox
+      label={label}
+      description={description}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      required={required}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/DatePicker.stories.tsx b/packages/frontend/src/stories/Components/DatePicker.stories.tsx
new file mode 100644
index 0000000..f05e1d2
--- /dev/null
+++ b/packages/frontend/src/stories/Components/DatePicker.stories.tsx
@@ -0,0 +1,25 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { DatePicker } from 'components/shared/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  render: ({ calendarProps, onChange, value, selectRange, onReset }) => (
+    <DatePicker
+      calendarProps={calendarProps}
+      onChange={onChange}
+      value={value}
+      selectRange={selectRange}
+      onReset={onReset}
+    />
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/DotBorder.stories.tsx b/packages/frontend/src/stories/Components/DotBorder.stories.tsx
new file mode 100644
index 0000000..6d8f17b
--- /dev/null
+++ b/packages/frontend/src/stories/Components/DotBorder.stories.tsx
@@ -0,0 +1,15 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { DotBorder } from 'components/shared/DotBorder';
+
+const meta: Meta<typeof DotBorder> = {
+  title: 'Components/DotBorder',
+  component: DotBorder,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DotBorder>;
+
+export const Default: Story = {};
diff --git a/packages/frontend/src/stories/Components/Heading.stories.tsx b/packages/frontend/src/stories/Components/Heading.stories.tsx
new file mode 100644
index 0000000..1218725
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Heading.stories.tsx
@@ -0,0 +1,15 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Heading } from 'components/shared/Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Components/Heading',
+  component: Heading,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {};
diff --git a/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx b/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx
new file mode 100644
index 0000000..7c4a5ff
--- /dev/null
+++ b/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx
@@ -0,0 +1,32 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+import { IconWithFrame } from 'components/shared/IconWithFrame';
+
+const meta: Meta<typeof IconWithFrame> = {
+  title: 'Components/IconWithFrame',
+  component: IconWithFrame,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: 'object',
+    },
+    hasHighlight: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IconWithFrame>;
+
+export const Default: Story = {
+  render: ({ icon, hasHighlight }) => (
+    <IconWithFrame icon={icon} hasHighlight={hasHighlight} />
+  ),
+  args: {
+    hasHighlight: true,
+    icon: <PlusIcon />,
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx
new file mode 100644
index 0000000..a84c618
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AppleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof AppleIcon> = {
+  title: 'Icons/AppleIcon',
+  component: AppleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <AppleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx
new file mode 100644
index 0000000..e0eab68
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowLeftCircleFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowLeftCircleFilledIcon> = {
+  title: 'Icons/ArrowLeftCircleFilledIcon',
+  component: ArrowLeftCircleFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowLeftCircleFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ArrowLeftCircleFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx
new file mode 100644
index 0000000..ed6cf92
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowRightCircleFilledIcon> = {
+  title: 'Icons/ArrowRightCircleFilledIcon',
+  component: ArrowRightCircleFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowRightCircleFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ArrowRightCircleFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx
new file mode 100644
index 0000000..6f3741e
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowRightCircleIcon> = {
+  title: 'Icons/ArrowRightCircleIcon',
+  component: ArrowRightCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowRightCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ArrowRightCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx
new file mode 100644
index 0000000..35c8dc1
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BranchIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BranchIcon> = {
+  title: 'Icons/BranchIcon',
+  component: BranchIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BranchIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BranchIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx
new file mode 100644
index 0000000..1bf5af0
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BranchStrokeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BranchStrokeIcon> = {
+  title: 'Icons/BranchStrokeIcon',
+  component: BranchStrokeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BranchStrokeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BranchStrokeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx
new file mode 100644
index 0000000..0870ac0
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BuildingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BuildingIcon> = {
+  title: 'Icons/BuildingIcon',
+  component: BuildingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BuildingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BuildingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx
new file mode 100644
index 0000000..dc21788
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CalendarDaysIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CalendarDaysIcon> = {
+  title: 'Icons/CalendarDaysIcon',
+  component: CalendarDaysIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarDaysIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CalendarDaysIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx
new file mode 100644
index 0000000..9346fad
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CalendarIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CalendarIcon> = {
+  title: 'Icons/CalendarIcon',
+  component: CalendarIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CalendarIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx
new file mode 100644
index 0000000..7aba4e4
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckIcon> = {
+  title: 'Icons/CheckIcon',
+  component: CheckIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx
new file mode 100644
index 0000000..987f4d7
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRadioIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRadioIcon> = {
+  title: 'Icons/CheckRadioIcon',
+  component: CheckRadioIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRadioIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRadioIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx
new file mode 100644
index 0000000..8355ce6
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRadioOutlineIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRadioOutlineIcon> = {
+  title: 'Icons/CheckRadioOutlineIcon',
+  component: CheckRadioOutlineIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRadioOutlineIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRadioOutlineIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx
new file mode 100644
index 0000000..7f5d083
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRoundFilledIcon> = {
+  title: 'Icons/CheckRoundFilledIcon',
+  component: CheckRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRoundFilledIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx
new file mode 100644
index 0000000..95106e7
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronDoubleDownIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronDoubleDownIcon> = {
+  title: 'Icons/ChevronDoubleDownIcon',
+  component: ChevronDoubleDownIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronDoubleDownIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronDoubleDownIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx
new file mode 100644
index 0000000..9f65f9c
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronDownIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronDownIcon> = {
+  title: 'Icons/ChevronDownIcon',
+  component: ChevronDownIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronDownIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronDownIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx
new file mode 100644
index 0000000..239b975
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronGrabberHorizontal } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronGrabberHorizontal> = {
+  title: 'Icons/ChevronGrabberHorizontal',
+  component: ChevronGrabberHorizontal,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronGrabberHorizontal>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ChevronGrabberHorizontal size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx
new file mode 100644
index 0000000..0cd4dec
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronLeft } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronLeft> = {
+  title: 'Icons/ChevronLeft',
+  component: ChevronLeft,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronLeft>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronLeft size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx
new file mode 100644
index 0000000..c73cb39
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronRight } from '../../../components/shared/CustomIcon/ChevronRight';
+
+const meta: Meta<typeof ChevronRight> = {
+  title: 'Icons/ChevronRight',
+  component: ChevronRight,
+  tags: ['autodocs'],
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronRight>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronRight size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx
new file mode 100644
index 0000000..2b7a692
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronUpDown } from 'components/shared/CustomIcon/ChevronUpDown';
+
+const meta: Meta<typeof ChevronUpDown> = {
+  title: 'Icons/ChevronUpDown',
+  component: ChevronUpDown,
+  tags: ['autodocs'],
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronUpDown>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronUpDown size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx
new file mode 100644
index 0000000..4d08db6
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CirclePlaceholderOnIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CirclePlaceholderOnIcon> = {
+  title: 'Icons/CirclePlaceholderOnIcon',
+  component: CirclePlaceholderOnIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CirclePlaceholderOnIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <CirclePlaceholderOnIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx
new file mode 100644
index 0000000..9850d00
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ClockIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ClockIcon> = {
+  title: 'Icons/ClockIcon',
+  component: ClockIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ClockIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ClockIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx
new file mode 100644
index 0000000..d9dc223
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ClockOutlineIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ClockOutlineIcon> = {
+  title: 'Icons/ClockOutlineIcon',
+  component: ClockOutlineIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ClockOutlineIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ClockOutlineIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx
new file mode 100644
index 0000000..e5a69c0
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CommitIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CommitIcon> = {
+  title: 'Icons/CommitIcon',
+  component: CommitIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CommitIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CommitIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx
new file mode 100644
index 0000000..5b0a2af
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CopyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CopyIcon> = {
+  title: 'Icons/CopyIcon',
+  component: CopyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CopyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CopyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx
new file mode 100644
index 0000000..3cfa9b8
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CrossCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CrossCircleIcon> = {
+  title: 'Icons/CrossCircleIcon',
+  component: CrossCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CrossCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CrossCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx
new file mode 100644
index 0000000..073f8b3
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CrossIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CrossIcon> = {
+  title: 'Icons/CrossIcon',
+  component: CrossIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CrossIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CrossIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx
new file mode 100644
index 0000000..eb321b9
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CursorBoxIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CursorBoxIcon> = {
+  title: 'Icons/CursorBoxIcon',
+  component: CursorBoxIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CursorBoxIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CursorBoxIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx
new file mode 100644
index 0000000..8755382
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { EllipseIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof EllipseIcon> = {
+  title: 'Icons/EclipseIcon',
+  component: EllipseIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EllipseIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <EllipseIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx
new file mode 100644
index 0000000..71de09b
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { EllipsesIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof EllipsesIcon> = {
+  title: 'Icons/EllipsesIcon',
+  component: EllipsesIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EllipsesIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <EllipsesIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx
new file mode 100644
index 0000000..83a53af
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { FolderIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof FolderIcon> = {
+  title: 'Icons/FolderIcon',
+  component: FolderIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FolderIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <FolderIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx
new file mode 100644
index 0000000..8451df5
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GearIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GearIcon> = {
+  title: 'Icons/GearIcon',
+  component: GearIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GearIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GearIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx
new file mode 100644
index 0000000..2768d67
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitHubLogo } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitHubLogo> = {
+  title: 'Icons/GitHubLogo',
+  component: GitHubLogo,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitHubLogo>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitHubLogo size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx
new file mode 100644
index 0000000..6393083
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitIcon> = {
+  title: 'Icons/GitIcon',
+  component: GitIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx
new file mode 100644
index 0000000..27ba59f
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitTeaIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitTeaIcon> = {
+  title: 'Icons/GitTeaIcon',
+  component: GitTeaIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitTeaIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitTeaIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx
new file mode 100644
index 0000000..cc0b0f8
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GithubIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GithubIcon> = {
+  title: 'Icons/GithubIcon',
+  component: GithubIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GithubIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GithubIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx
new file mode 100644
index 0000000..acbec55
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GithubStrokeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GithubStrokeIcon> = {
+  title: 'Icons/GithubStrokeLogo',
+  component: GithubStrokeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GithubStrokeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GithubStrokeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx
new file mode 100644
index 0000000..454ed3d
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GlobeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GlobeIcon> = {
+  title: 'Icons/GlobeIcon',
+  component: GlobeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GlobeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GlobeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx
new file mode 100644
index 0000000..baea62b
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GoogleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GoogleIcon> = {
+  title: 'Icons/GoogleIcon',
+  component: GoogleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GoogleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GoogleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx
new file mode 100644
index 0000000..63d4b01
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { HorizontalDotIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof HorizontalDotIcon> = {
+  title: 'Icons/HorizontalDotIcon',
+  component: HorizontalDotIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HorizontalDotIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <HorizontalDotIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx
new file mode 100644
index 0000000..2a743f4
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InfoRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof InfoRoundFilledIcon> = {
+  title: 'Icons/InfoRoundFilledIcon',
+  component: InfoRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfoRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <InfoRoundFilledIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx
new file mode 100644
index 0000000..e6b4914
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InfoSquareIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof InfoSquareIcon> = {
+  title: 'Icons/InfoSquareIcon',
+  component: InfoSquareIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfoSquareIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <InfoSquareIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx
new file mode 100644
index 0000000..de89ac9
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { KeyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof KeyIcon> = {
+  title: 'Icons/KeyIcon',
+  component: KeyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof KeyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <KeyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx
new file mode 100644
index 0000000..882985e
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LifeBuoyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LifeBuoyIcon> = {
+  title: 'Icons/LifeBuoyIcon',
+  component: LifeBuoyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LifeBuoyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LifeBuoyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx
new file mode 100644
index 0000000..bc799eb
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LinkChainIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LinkChainIcon> = {
+  title: 'Icons/LinkChainIcon',
+  component: LinkChainIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkChainIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LinkChainIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx
new file mode 100644
index 0000000..3710efa
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LinkIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LinkIcon> = {
+  title: 'Icons/LinkIcon',
+  component: LinkIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LinkIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx
new file mode 100644
index 0000000..85d3a58
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LoaderIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LoaderIcon> = {
+  title: 'Icons/LoaderIcon',
+  component: LoaderIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoaderIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LoaderIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx
new file mode 100644
index 0000000..59a0cd0
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LoadingIcon> = {
+  title: 'Icons/LoadingIcon',
+  component: LoadingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoadingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LoadingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx
new file mode 100644
index 0000000..262bdf5
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LockIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LockIcon> = {
+  title: 'Icons/LockIcon',
+  component: LockIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LockIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LockIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx
new file mode 100644
index 0000000..50e4cac
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LogoutIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LogoutIcon> = {
+  title: 'Icons/LogoutIcon',
+  component: LogoutIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LogoutIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LogoutIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx
new file mode 100644
index 0000000..65f2c9c
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MenuIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof MenuIcon> = {
+  title: 'Icons/MenuIcon',
+  component: MenuIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <MenuIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx
new file mode 100644
index 0000000..ec05322
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MinusCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof MinusCircleIcon> = {
+  title: 'Icons/MinusCircleIcon',
+  component: MinusCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MinusCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <MinusCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx
new file mode 100644
index 0000000..697c3ae
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationBellIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof NotificationBellIcon> = {
+  title: 'Icons/NotificationBellIcon',
+  component: NotificationBellIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBellIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <NotificationBellIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx
new file mode 100644
index 0000000..333ebaa
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PencilIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof PencilIcon> = {
+  title: 'Icons/PencilIcon',
+  component: PencilIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PencilIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <PencilIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx
new file mode 100644
index 0000000..9a4260c
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof PlusIcon> = {
+  title: 'Icons/PlusIcon',
+  component: PlusIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PlusIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <PlusIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx
new file mode 100644
index 0000000..f834e96
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { QuestionMarkRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof QuestionMarkRoundFilledIcon> = {
+  title: 'Icons/QuestionMarkRoundFilledIcon',
+  component: QuestionMarkRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionMarkRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <QuestionMarkRoundFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx
new file mode 100644
index 0000000..3ce8a42
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { QuestionMarkRoundIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof QuestionMarkRoundIcon> = {
+  title: 'Icons/QuestionMarkRoundIcon',
+  component: QuestionMarkRoundIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionMarkRoundIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <QuestionMarkRoundIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx
new file mode 100644
index 0000000..38a8006
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RefreshIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof RefreshIcon> = {
+  title: 'Icons/RefreshIcon',
+  component: RefreshIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RefreshIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <RefreshIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx
new file mode 100644
index 0000000..13dc988
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RocketIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof RocketIcon> = {
+  title: 'Icons/RocketIcon',
+  component: RocketIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RocketIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <RocketIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx
new file mode 100644
index 0000000..8c6eb82
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SearchIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SearchIcon> = {
+  title: 'Icons/SearchIcon',
+  component: SearchIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SearchIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx
new file mode 100644
index 0000000..ed9c745
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SettingsSlidersIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SettingsSlidersIcon> = {
+  title: 'Icons/SettingsSlidersIcon',
+  component: SettingsSlidersIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsSlidersIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SettingsSlidersIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx
new file mode 100644
index 0000000..ce42ded
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SnowballIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SnowballIcon> = {
+  title: 'Icons/SnowballIcon',
+  component: SnowballIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SnowballIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SnowballIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx
new file mode 100644
index 0000000..0dc8e35
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { StorageIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof StorageIcon> = {
+  title: 'Icons/StorageIcon',
+  component: StorageIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StorageIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <StorageIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx
new file mode 100644
index 0000000..25406e5
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TrendingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof TrendingIcon> = {
+  title: 'Icons/TrendingIcon',
+  component: TrendingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TrendingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <TrendingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx
new file mode 100644
index 0000000..6512048
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { UndoIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof UndoIcon> = {
+  title: 'Icons/UndoIcon',
+  component: UndoIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UndoIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <UndoIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx
new file mode 100644
index 0000000..a4b336a
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningDiamondIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningDiamondIcon> = {
+  title: 'Icons/WarningDiamondIcon',
+  component: WarningDiamondIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningDiamondIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningDiamondIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx
new file mode 100644
index 0000000..ef0c381
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningIcon> = {
+  title: 'Icons/WarningIcon',
+  component: WarningIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx
new file mode 100644
index 0000000..41d1c4d
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningTriangleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningTriangleIcon> = {
+  title: 'Icons/WarningTriangleIcon',
+  component: WarningTriangleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningTriangleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningTriangleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/InlineNotification.stories.tsx b/packages/frontend/src/stories/Components/InlineNotification.stories.tsx
new file mode 100644
index 0000000..a96b8f7
--- /dev/null
+++ b/packages/frontend/src/stories/Components/InlineNotification.stories.tsx
@@ -0,0 +1,89 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+import { InlineNotification } from 'components/shared/InlineNotification';
+
+const inlineNotificationVariants = [
+  'info',
+  'danger',
+  'warning',
+  'success',
+  'generic',
+];
+const inlineNotificationSizes = ['md', 'sm'];
+
+const meta: Meta<typeof InlineNotification> = {
+  title: 'Components/InlineNotification',
+  component: InlineNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    icon: {
+      control: 'object',
+    },
+    variant: {
+      control: 'select',
+      options: inlineNotificationVariants,
+    },
+    size: {
+      control: 'select',
+      options: inlineNotificationSizes,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineNotification>;
+
+export const Default: Story = {
+  render: ({ title, description, icon, variant, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      variant={variant}
+      {...args}
+    />
+  ),
+  args: {
+    title: 'title is required',
+    variant: 'generic',
+    size: 'md',
+  },
+};
+
+export const WithDescription: Story = {
+  render: ({ title, description, icon, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      {...args}
+    />
+  ),
+  args: {
+    ...Default.args,
+    description: 'string',
+  },
+};
+
+export const WithIcon: Story = {
+  render: ({ title, description, icon, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      {...args}
+    />
+  ),
+  args: {
+    ...Default.args,
+    icon: <PlusIcon />,
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Input.stories.tsx b/packages/frontend/src/stories/Components/Input.stories.tsx
new file mode 100644
index 0000000..907042d
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Input.stories.tsx
@@ -0,0 +1,123 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Input } from 'components/shared/Input';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  render: ({ label, description, leftIcon, rightIcon, helperText }) => (
+    <Input
+      label={label}
+      description={description}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      helperText={helperText}
+    />
+  ),
+};
+
+export const WithLeftIcon: Story = {
+  render: ({ label, description, leftIcon }) => (
+    <Input label={label} description={description} leftIcon={leftIcon} />
+  ),
+  args: {
+    ...Default.args,
+    leftIcon: <PlusIcon />,
+  },
+};
+
+export const WithRightIcon: Story = {
+  render: ({ label, description, rightIcon }) => (
+    <Input label={label} description={description} rightIcon={rightIcon} />
+  ),
+  args: {
+    ...Default.args,
+    rightIcon: <PlusIcon />,
+  },
+};
+
+export const WithLeftAndRightIcon: Story = {
+  render: ({ label, description, leftIcon, rightIcon }) => (
+    <Input
+      label={label}
+      description={description}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+    />
+  ),
+  args: {
+    ...Default.args,
+    leftIcon: <PlusIcon />,
+    rightIcon: <PlusIcon />,
+  },
+};
+
+export const WithDescription: Story = {
+  render: ({ label, description }) => (
+    <Input label={label} description={description} />
+  ),
+  args: {
+    ...Default.args,
+    description: 'description',
+  },
+};
+
+export const WithHelperText: Story = {
+  render: ({ helperText }) => <Input helperText={helperText} />,
+  args: {
+    ...Default.args,
+    helperText: 'helper text',
+  },
+};
+
+export const WithLabel: Story = {
+  render: ({ label }) => <Input label={label} />,
+  args: {
+    ...Default.args,
+    label: 'label',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  render: ({ placeholder }) => <Input placeholder={placeholder} />,
+  args: {
+    ...Default.args,
+    placeholder: 'placeholder',
+  },
+};
+
+export const WithValue: Story = {
+  render: ({ value }) => <Input value={value} />,
+  args: {
+    ...Default.args,
+    value: 'Value',
+  },
+};
+
+export const WithDisabled: Story = {
+  render: ({ disabled }) => <Input disabled={disabled} />,
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Modal.stories.tsx b/packages/frontend/src/stories/Components/Modal.stories.tsx
new file mode 100644
index 0000000..3d3d4ed
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Modal.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from 'components/shared/Modal';
+import { Button } from 'components/shared/Button';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  title: 'Components/Modal',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <Modal>
+        <Modal.Trigger asChild>
+          <Button>Open modal</Button>
+        </Modal.Trigger>
+        <Modal.Content>
+          <Modal.Header>Modal title</Modal.Header>
+          <Modal.Body>
+            <p>Modal content</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button>Close</Button>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    );
+  },
+};
diff --git a/packages/frontend/src/stories/Components/OverflownText.stories.tsx b/packages/frontend/src/stories/Components/OverflownText.stories.tsx
new file mode 100644
index 0000000..63a3163
--- /dev/null
+++ b/packages/frontend/src/stories/Components/OverflownText.stories.tsx
@@ -0,0 +1,33 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { OverflownText } from 'components/shared/OverflownText';
+
+const meta: Meta<typeof OverflownText> = {
+  title: 'Components/OverflownText',
+  component: OverflownText,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OverflownText>;
+
+export const Default: Story = {
+  render: ({ children, content }) => (
+    <OverflownText content={content}>{children}</OverflownText>
+  ),
+  args: {
+    children:
+      'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ',
+    content:
+      'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx b/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx
new file mode 100644
index 0000000..4deb044
--- /dev/null
+++ b/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx
@@ -0,0 +1,38 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { SegmentedControls } from 'components/shared/SegmentedControls';
+
+const meta: Meta<typeof SegmentedControls> = {
+  title: 'Components/SegmentedControls',
+  component: SegmentedControls,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    value: {
+      control: 'text',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SegmentedControls>;
+
+export const Default: Story = {
+  render: ({ options, value, onChange }) => (
+    <SegmentedControls options={options} value={value} onChange={onChange} />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+    value: '1',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Select.stories.tsx b/packages/frontend/src/stories/Components/Select.stories.tsx
new file mode 100644
index 0000000..488f671
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Select.stories.tsx
@@ -0,0 +1,105 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Select } from 'components/shared/Select';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    multiple: {
+      control: 'boolean',
+    },
+    searchable: {
+      control: 'boolean',
+    },
+    clearable: {
+      control: 'boolean',
+    },
+    leftIcon: {
+      control: 'text',
+    },
+    rightIcon: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    hideValues: {
+      control: 'boolean',
+    },
+    value: {
+      control: 'object',
+    },
+    onClear: {
+      action: 'clear',
+    },
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: ({
+    options,
+    label,
+    description,
+    multiple,
+    searchable,
+    clearable,
+    leftIcon,
+    rightIcon,
+    helperText,
+    hideValues,
+    value,
+    onClear,
+    onChange,
+  }) => (
+    <Select
+      options={options}
+      label={label}
+      description={description}
+      multiple={multiple}
+      searchable={searchable}
+      clearable={clearable}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      helperText={helperText}
+      hideValues={hideValues}
+      value={value}
+      onClear={onClear}
+      onChange={onChange}
+    />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    label: 'Select',
+    description: 'Select an option',
+    multiple: false,
+    searchable: false,
+    clearable: false,
+    leftIcon: '',
+    rightIcon: '',
+    helperText: '',
+    hideValues: false,
+    value: { label: 'Option 1', value: 'option1' },
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Steps.stories.tsx b/packages/frontend/src/stories/Components/Steps.stories.tsx
new file mode 100644
index 0000000..446b854
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Steps.stories.tsx
@@ -0,0 +1,74 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Steps } from 'components/shared/Steps';
+
+const meta: Meta<typeof Steps> = {
+  title: 'Components/Steps',
+  component: Steps,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+    currentIndex: {
+      control: 'number',
+    },
+    steps: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Steps>;
+
+export const Default: Story = {
+  render: ({ orientation, currentIndex, steps }) => (
+    <Steps
+      currentIndex={currentIndex}
+      steps={steps}
+      orientation={orientation}
+    />
+  ),
+  args: {
+    currentIndex: 0,
+    steps: [
+      {
+        label: 'Create repository',
+      },
+      {
+        label: 'Deploy',
+      },
+      {
+        label: `What's next?`,
+      },
+    ],
+  },
+};
+
+export const Horizontal: Story = {
+  render: ({ orientation, currentIndex, steps }) => (
+    <Steps
+      currentIndex={currentIndex}
+      steps={steps}
+      orientation={orientation}
+    />
+  ),
+  args: {
+    currentIndex: 0,
+    steps: [
+      {
+        label: 'Create repository',
+      },
+      {
+        label: 'Deploy',
+      },
+      {
+        label: `What's next?`,
+      },
+    ],
+    orientation: 'horizontal',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Switch.stories.tsx b/packages/frontend/src/stories/Components/Switch.stories.tsx
new file mode 100644
index 0000000..c725628
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Switch.stories.tsx
@@ -0,0 +1,51 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Switch } from 'components/shared/Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    wrapperProps: {
+      control: 'object',
+    },
+    onCheckedChange: {
+      action: 'onCheckedChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: ({ label, description, wrapperProps, onCheckedChange }) => (
+    <Switch
+      label={label}
+      description={description}
+      wrapperProps={wrapperProps}
+      checked={false}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};
+
+export const Checked: Story = {
+  render: ({ label, description, wrapperProps, onCheckedChange }) => (
+    <Switch
+      label={label}
+      description={description}
+      wrapperProps={wrapperProps}
+      checked={true}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/Tabs.stories.tsx b/packages/frontend/src/stories/Components/Tabs.stories.tsx
new file mode 100644
index 0000000..2870874
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Tabs.stories.tsx
@@ -0,0 +1,85 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Tabs } from 'components/shared/Tabs';
+import { Badge } from 'components/shared/Badge';
+import { GlobeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+const tabs = Array.from({ length: 8 });
+
+export const Default: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger key={index} value={index.toString()}>
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+export const WithBages: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            value={index.toString()}
+            icon={<Badge variant="tertiary">{index}</Badge>}
+          >
+            Tab item
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Vertical: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.slice(0, 4).map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            icon={<GlobeIcon />}
+            value={index.toString()}
+          >
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    orientation: 'vertical',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Tag.stories.tsx b/packages/frontend/src/stories/Components/Tag.stories.tsx
new file mode 100644
index 0000000..e65b31f
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Tag.stories.tsx
@@ -0,0 +1,77 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Tag } from 'components/shared/Tag';
+import { CheckIcon, PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    leftIcon: {
+      control: 'object',
+    },
+    rightIcon: {
+      control: 'object',
+    },
+    type: {
+      control: 'select',
+      options: ['attention', 'negative', 'positive', 'emphasized', 'neutral'],
+    },
+    style: {
+      control: 'select',
+      options: ['default', 'outlined'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  render: ({ children, leftIcon, rightIcon, type, style, size, ...arg }) => (
+    <Tag
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      style={style}
+      type={type}
+      size={size}
+      {...arg}
+    >
+      {children}
+    </Tag>
+  ),
+  args: {
+    children: 'Tag',
+    style: 'default',
+    type: 'attention',
+    size: 'sm',
+  },
+};
+
+export const WithLeftIcon: Story = {
+  render: ({ ...arg }) => <Tag {...arg} />,
+  args: {
+    ...Default.args,
+    leftIcon: <CheckIcon />,
+  },
+};
+
+export const WithRightIcon: Story = {
+  render: ({ ...arg }) => <Tag {...arg} />,
+  args: {
+    ...Default.args,
+    rightIcon: <PlusIcon />,
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Toast.stories.tsx b/packages/frontend/src/stories/Components/Toast.stories.tsx
new file mode 100644
index 0000000..f0398bc
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Toast.stories.tsx
@@ -0,0 +1,101 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Toaster, useToast } from 'components/shared/Toast';
+import { Button } from 'components/shared/Button';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Toaster',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toaster>;
+
+// trigger the toast
+const Toast = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant}
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};
+
+// trigger the toast with cta
+const ToastWithCta = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                cta: [
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                    variant: 'tertiary',
+                  },
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                  },
+                ],
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant} with cta
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: ({}) => (
+    <div className="flex gap-10">
+      <Toast />
+      <Toaster />
+    </div>
+  ),
+};
+
+export const WithCta: Story = {
+  render: ({}) => (
+    <>
+      <ToastWithCta />
+      <Toaster />
+    </>
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/Tooltip.stories.tsx b/packages/frontend/src/stories/Components/Tooltip.stories.tsx
new file mode 100644
index 0000000..abb2e23
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Tooltip.stories.tsx
@@ -0,0 +1,71 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ContentProps, Tooltip } from 'components/shared/Tooltip';
+
+const alignments: ContentProps['align'][] = ['start', 'center', 'end'];
+const sides: ContentProps['side'][] = ['left', 'top', 'bottom', 'right'];
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    contentProps: {
+      control: 'object',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: ({ contentProps, children }) => (
+    <Tooltip contentProps={contentProps} content="Tooltip content">
+      {children}
+    </Tooltip>
+  ),
+  args: {
+    contentProps: {
+      align: 'center',
+      side: 'top',
+    },
+    children: <button>Hover me</button>,
+  },
+};
+
+export const AllAlignments: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {alignments.map((align) => (
+        <Tooltip
+          key={align}
+          content={`Tooltip content ${align}`}
+          contentProps={{ align }}
+        >
+          <button>Hover me</button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};
+
+export const AllSides: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {sides.map((side) => (
+        <Tooltip
+          key={side}
+          content={`Tooltip content ${side}`}
+          contentProps={{ side }}
+        >
+          <button>Hover me</button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/frontend/src/stories/Components/WavyBorder.stories.tsx b/packages/frontend/src/stories/Components/WavyBorder.stories.tsx
new file mode 100644
index 0000000..ddb8070
--- /dev/null
+++ b/packages/frontend/src/stories/Components/WavyBorder.stories.tsx
@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { WavyBorder } from 'components/shared/WavyBorder';
+
+const meta: Meta<typeof WavyBorder> = {
+  title: 'Components/WavyBorder',
+  component: WavyBorder,
+  tags: ['autodocs'],
+  args: {
+    variant: 'stroke',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WavyBorder>;
+
+export const Default: Story = {
+  render: ({ variant }) => <WavyBorder variant={variant} />,
+};
diff --git a/yarn.lock b/yarn.lock
index b570ea6..ee49075 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2513,18 +2513,6 @@
   dependencies:
     multiformats "^13.1.0"
 
-"@isaacs/cliui@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
-  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
-  dependencies:
-    string-width "^5.1.2"
-    string-width-cjs "npm:string-width@^4.2.0"
-    strip-ansi "^7.0.1"
-    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
-    wrap-ansi "^8.1.0"
-    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
-
 "@jest/expect-utils@^29.7.0":
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
@@ -5027,7 +5015,7 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
-"@storybook/addon-actions@8.0.10":
+"@storybook/addon-actions@8.0.10", "@storybook/addon-actions@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.0.10.tgz#df9fde0d234174eda5eb1c7af942da8e01924b50"
   integrity sha512-IEuc30UAFl7Ws0GwaY/whjBnGaViVEVjmPc+MXUym2wwwJbnCbI+BKJxPoYi/I7QJb5aUNToAE6pl2pDda2g3Q==
@@ -5131,7 +5119,7 @@
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@8.0.10":
+"@storybook/addon-measure@8.0.10", "@storybook/addon-measure@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.0.10.tgz#e59121634ee35c6fe128292456df4faaed0fed01"
   integrity sha512-quXQwmZJUhOxDIlbXTH6aKYQkwkDpL0UQRkUZn1xuZ2sVKJeaee73QSWqw8HDD4Rz9huS+OrAdVoq/Cz5FoC6A==
@@ -5144,7 +5132,7 @@
   resolved "https://registry.yarnpkg.com/@storybook/addon-onboarding/-/addon-onboarding-8.0.10.tgz#578f8b004e65882906f52157ae9ebf6e1966125d"
   integrity sha512-pcSBjOi944rg52bzaEt5jveFNTPbENna1FDUti8PK+vXgg7iAK6pIoZZiy7APU2N/YO/DxLgT276auVbPweEZg==
 
-"@storybook/addon-outline@8.0.10":
+"@storybook/addon-outline@8.0.10", "@storybook/addon-outline@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.0.10.tgz#d520e6ff4afea51efb056eeca88032df88c85394"
   integrity sha512-1eDO2s/vHhhSJo7W5SetqjleUBTZLI08VNP89c4j7vdRKiMZ1DYhr0dqUGIC3w7cDsawI/nQ24wancHHayAnqw==
@@ -5152,6 +5140,13 @@
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-themes@^8.0.10":
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-themes/-/addon-themes-8.0.10.tgz#2aa6c3475d0141c9ff2b8aedf30167314d9920c8"
+  integrity sha512-1aRpUmTjxYMZhlQVIFHYtC5oVgrKZXRB2yQlIp39LzNwZLlH+M7EgqMDiz7/BTGAHeEQV14Yj5aPVnOKgpaKnA==
+  dependencies:
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-toolbars@8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.0.10.tgz#753c7d3895ad84d8589fbf7c29baaf64249688b7"
@@ -7370,11 +7365,6 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
-  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
-
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -9356,11 +9346,6 @@ duplexify@^4.1.2:
     readable-stream "^3.1.1"
     stream-shift "^1.0.2"
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 ecdsa-sig-formatter@1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
@@ -9423,11 +9408,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-regex@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
-
 encode-utf8@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
@@ -11817,12 +11797,12 @@ it-to-stream@^1.0.0:
     p-fifo "^1.0.0"
     readable-stream "^3.6.0"
 
-jackspeak@^2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
-  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+jackspeak@2.1.1, jackspeak@^2.3.6:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
+  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
   dependencies:
-    "@isaacs/cliui" "^8.0.2"
+    cliui "^8.0.1"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
@@ -15808,7 +15788,7 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15817,15 +15797,6 @@ strict-uri-encode@^2.0.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
-
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -15845,14 +15816,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -17080,15 +17051,6 @@ workspace@^0.0.1-preview.1:
   resolved "https://registry.yarnpkg.com/workspace/-/workspace-0.0.1-preview.1.tgz#0ba0a6b92b3dbc7f1502dd12bc27a37b1eec9083"
   integrity sha512-oPpEvU7NIQ0MW7ReL+EigMUI2JPNp05kmqzWS6zXVUaSq5KxuQzfgxGd8wuurBulBkTaOnEcGge+2rriyDVHkw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -17098,14 +17060,14 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
-    ansi-styles "^6.1.0"
-    string-width "^5.0.1"
-    strip-ansi "^7.0.1"
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
 
 wrappy@1:
   version "1.0.2"