diff --git a/src/stories/Avatar.stories.tsx b/src/stories/Atoms/Avatar.stories.tsx
similarity index 78%
rename from src/stories/Avatar.stories.tsx
rename to src/stories/Atoms/Avatar.stories.tsx
index 936056b..b9be9e6 100644
--- a/src/stories/Avatar.stories.tsx
+++ b/src/stories/Atoms/Avatar.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from '../components/Avatar/Avatar';
+import { Avatar } from '../../components/Avatar/Avatar';
 
 const meta: Meta<typeof Avatar> = {
   title: 'Design System/Avatar',
@@ -36,12 +36,7 @@ export const Sizes: Story = {
 export const Circle: Story = {
   render: () => (
     <>
-      <Avatar
-        size="medium"
-        username="Da Yeon"
-        src="https://avatars.githubusercontent.com/u/93921784?v=4"
-        selected={true}
-      />
+      <Avatar size="medium" username="Da Yeon" src="https://avatars.githubusercontent.com/u/93921784?v=4" selected={true} />
     </>
   ),
 };
diff --git a/src/stories/AvatarList.stories.tsx b/src/stories/Atoms/AvatarList.stories.tsx
similarity index 86%
rename from src/stories/AvatarList.stories.tsx
rename to src/stories/Atoms/AvatarList.stories.tsx
index 2237fbb..faa4361 100644
--- a/src/stories/AvatarList.stories.tsx
+++ b/src/stories/Atoms/AvatarList.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { AvatarList, AvatarListProps } from '../components/AvatarList/AvatarList';
+import { AvatarList, AvatarListProps } from '../../components/AvatarList/AvatarList';
 
 export default {
   title: 'Design System/AvatarList',
@@ -44,11 +44,11 @@ Ellipsized.args = {
 
 export const BigUserCount = Template.bind({});
 BigUserCount.args = {
-    users: Ellipsized.args.users as AvatarListProps['users'],
-    userCount: 100,
+  users: Ellipsized.args.users as AvatarListProps['users'],
+  userCount: 100,
 };
 
 export const Empty = Template.bind({});
 Empty.args = {
   users: [],
-};
\ No newline at end of file
+};
diff --git a/src/stories/Badge.stories.tsx b/src/stories/Atoms/Badge.stories.tsx
similarity index 92%
rename from src/stories/Badge.stories.tsx
rename to src/stories/Atoms/Badge.stories.tsx
index 55c97f8..f06a2e3 100644
--- a/src/stories/Badge.stories.tsx
+++ b/src/stories/Atoms/Badge.stories.tsx
@@ -1,5 +1,5 @@
 import { containerStyle, informationStyle } from './styles';
-import Badge from '../components/Badge/Badge';
+import Badge from '../../components/Badge/Badge';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
@@ -36,7 +36,7 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {};
 
 export const Variants: Story = {
-  render: ({children}) => (
+  render: ({ children }) => (
     <ul css={containerStyle}>
       <li css={informationStyle}>
         <h6>keyword</h6>
@@ -65,13 +65,13 @@ export const Sizes: Story = {
     <ul css={containerStyle}>
       <li css={informationStyle}>
         <h6>Small</h6>
-        <Badge variant={variant} size='small'>
+        <Badge variant={variant} size="small">
           {children}
         </Badge>
       </li>
       <li css={informationStyle}>
         <h6>Large</h6>
-        <Badge variant={variant} size='large'>
+        <Badge variant={variant} size="large">
           {children}
         </Badge>
       </li>
diff --git a/src/stories/Body.stories.tsx b/src/stories/Atoms/Body.stories.tsx
similarity index 62%
rename from src/stories/Body.stories.tsx
rename to src/stories/Atoms/Body.stories.tsx
index f68c351..08623b4 100644
--- a/src/stories/Body.stories.tsx
+++ b/src/stories/Atoms/Body.stories.tsx
@@ -1,8 +1,8 @@
-import { containerStyle, informationStyle } from '@stories/styles';
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { BodyProps } from '../components/Body/Body';
-import Body from '../components/Body/Body';
+import type { BodyProps } from '../../components/Body/Body';
+import Body from '../../components/Body/Body';
 
 const meta = {
   title: 'Design System/Body',
@@ -47,25 +47,25 @@ export const Playground: Story = {};
 
 export const Sizes: Story = {
   render: ({ children }) => (
-      <>
-        <li css={informationStyle}>
-          <h6>Small</h6>
-          <Body size="small">{children}</Body>
-        </li>
-        <li css={informationStyle}>
-          <h6>Medium</h6>
-          <Body size="medium">{children}</Body>
-        </li>
-        <li css={informationStyle}>
-          <h6>Large</h6>
-          <Body size="large">{children}</Body>
-        </li>
-        <li css={informationStyle}>
-          <h6>X Large</h6>
-          <Body size="xLarge">{children}</Body>
-        </li>
-      </>
-    ),
+    <>
+      <li css={informationStyle}>
+        <h6>Small</h6>
+        <Body size="small">{children}</Body>
+      </li>
+      <li css={informationStyle}>
+        <h6>Medium</h6>
+        <Body size="medium">{children}</Body>
+      </li>
+      <li css={informationStyle}>
+        <h6>Large</h6>
+        <Body size="large">{children}</Body>
+      </li>
+      <li css={informationStyle}>
+        <h6>X Large</h6>
+        <Body size="xLarge">{children}</Body>
+      </li>
+    </>
+  ),
   argTypes: {
     size: {
       control: false,
@@ -73,11 +73,10 @@ export const Sizes: Story = {
   },
 };
 
-
 export const Small: Story = createBodyStory('small') as Story;
 
 export const Medium: Story = createBodyStory('medium') as Story;
 
 export const Large: Story = createBodyStory('large') as Story;
 
-export const XLarge: Story = createBodyStory('xLarge') as Story;;
\ No newline at end of file
+export const XLarge: Story = createBodyStory('xLarge') as Story;
diff --git a/src/stories/Button.stories.tsx b/src/stories/Atoms/Button.stories.tsx
similarity index 83%
rename from src/stories/Button.stories.tsx
rename to src/stories/Atoms/Button.stories.tsx
index ae329f3..4cf802e 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Atoms/Button.stories.tsx
@@ -1,8 +1,8 @@
-import { containerStyle, informationStyle } from '../stories/styles';
+import { containerStyle, informationStyle } from './styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ButtonProps } from '../components/Button/Button';
-import Button from '../components/Button/Button';
+import type { ButtonProps } from '../../components/Button/Button';
+import Button from '../../components/Button/Button';
 
 const meta = {
   title: 'Design System/Button',
@@ -52,13 +52,13 @@ export const Variants: Story = {
     <ul css={containerStyle}>
       <li css={informationStyle}>
         <h6>Primary</h6>
-        <Button variant='primary' size={size} disabled={disabled}>
+        <Button variant="primary" size={size} disabled={disabled}>
           {children}
         </Button>
       </li>
       <li css={informationStyle}>
         <h6>Secondary</h6>
-        <Button variant='secondary' size={size} disabled={disabled}>
+        <Button variant="secondary" size={size} disabled={disabled}>
           {children}
         </Button>
       </li>
@@ -76,19 +76,19 @@ export const Sizes: Story = {
     <ul css={containerStyle}>
       <li css={informationStyle}>
         <h6>Small</h6>
-        <Button variant={variant} size='small' disabled={disabled}>
+        <Button variant={variant} size="small" disabled={disabled}>
           {children}
         </Button>
       </li>
       <li css={informationStyle}>
         <h6>Medium</h6>
-        <Button variant={variant} size='medium' disabled={disabled}>
+        <Button variant={variant} size="medium" disabled={disabled}>
           {children}
         </Button>
       </li>
       <li css={informationStyle}>
         <h6>Large</h6>
-        <Button variant={variant} size='large' disabled={disabled}>
+        <Button variant={variant} size="large" disabled={disabled}>
           {children}
         </Button>
       </li>
diff --git a/src/stories/Atoms/Checkbox.stories.tsx b/src/stories/Atoms/Checkbox.stories.tsx
new file mode 100644
index 0000000..a7c627c
--- /dev/null
+++ b/src/stories/Atoms/Checkbox.stories.tsx
@@ -0,0 +1,57 @@
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Checkbox from '../../components/Checkbox/Checkbox';
+
+const meta = {
+  title: 'Design System/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    checked: {
+      control: { type: 'boolean' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    checked: true,
+    label: 'Label',
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Checkboxes: Story = {
+  render: () => (
+    <ul css={containerStyle}>
+      <li css={informationStyle}>
+        <h6>Checked</h6>
+        <Checkbox isChecked />
+      </li>
+      <li css={informationStyle}>
+        <h6>Unchecked</h6>
+        <Checkbox />
+      </li>
+      <li css={informationStyle}>
+        <h6>Checked with Label</h6>
+        <Checkbox checked label="Label" isChecked />
+      </li>
+      <li css={informationStyle}>
+        <h6>Unchecked with Label</h6>
+        <Checkbox label="Label" />
+      </li>
+    </ul>
+  ),
+  argTypes: {
+    checked: {
+      control: false,
+    },
+    label: {
+      control: false,
+    },
+  },
+};
diff --git a/src/stories/Heading.stories.tsx b/src/stories/Atoms/Heading.stories.tsx
similarity index 58%
rename from src/stories/Heading.stories.tsx
rename to src/stories/Atoms/Heading.stories.tsx
index e430568..08fbe39 100644
--- a/src/stories/Heading.stories.tsx
+++ b/src/stories/Atoms/Heading.stories.tsx
@@ -1,7 +1,7 @@
-import { containerStyle, informationStyle } from '@stories/styles';
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { HeadingProps } from '../components/Heading/Heading';
-import Heading from '../components/Heading/Heading';
+import type { HeadingProps } from '../../components/Heading/Heading';
+import Heading from '../../components/Heading/Heading';
 
 const meta = {
   title: 'Design System/Heading',
@@ -46,29 +46,29 @@ export const Playground: Story = {};
 
 export const Sizes: Story = {
   render: ({ children }) => (
-      <>
-        <li css={informationStyle}>
-          <h6>Small</h6>
-          <Heading size="small">{children}</Heading>
-        </li>
-        <li css={informationStyle}>
-          <h6>Medium</h6>
-          <Heading size="medium">{children}</Heading>
-        </li>
-        <li css={informationStyle}>
-          <h6>Large</h6>
-          <Heading size="large">{children}</Heading>
-        </li>
-        <li css={informationStyle}>
-          <h6>X Large</h6>
-          <Heading size="xLarge">{children}</Heading>
-        </li>
-        <li css={informationStyle}>
-          <h6>XX Large</h6>
-          <Heading size="xxLarge">{children}</Heading>
-        </li>
-      </>
-    ),
+    <>
+      <li css={informationStyle}>
+        <h6>Small</h6>
+        <Heading size="small">{children}</Heading>
+      </li>
+      <li css={informationStyle}>
+        <h6>Medium</h6>
+        <Heading size="medium">{children}</Heading>
+      </li>
+      <li css={informationStyle}>
+        <h6>Large</h6>
+        <Heading size="large">{children}</Heading>
+      </li>
+      <li css={informationStyle}>
+        <h6>X Large</h6>
+        <Heading size="xLarge">{children}</Heading>
+      </li>
+      <li css={informationStyle}>
+        <h6>XX Large</h6>
+        <Heading size="xxLarge">{children}</Heading>
+      </li>
+    </>
+  ),
   argTypes: {
     size: {
       control: false,
@@ -76,13 +76,12 @@ export const Sizes: Story = {
   },
 };
 
-
 export const Small: Story = createHeadingStory('small') as Story;
 
 export const Medium: Story = createHeadingStory('medium') as Story;
 
 export const Large: Story = createHeadingStory('large') as Story;
 
-export const XLarge: Story = createHeadingStory('xLarge') as Story;;
+export const XLarge: Story = createHeadingStory('xLarge') as Story;
 
 export const XXLarge: Story = createHeadingStory('xxLarge') as Story;
diff --git a/src/stories/Input.stories.tsx b/src/stories/Atoms/Input.stories.tsx
similarity index 68%
rename from src/stories/Input.stories.tsx
rename to src/stories/Atoms/Input.stories.tsx
index 248de07..7c8b933 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Atoms/Input.stories.tsx
@@ -1,5 +1,5 @@
 import Icon from '@components/Icon/Icon';
-import { containerStyle, informationStyle } from '@stories/styles';
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Input from '@components/Input/Input';
@@ -46,17 +46,17 @@ export const Playground: Story = {};
 
 export const Variants: Story = {
   render: ({ size, isError, placeholder }) => (
-      <ul css={containerStyle}>
-        <li css={informationStyle}>
-          <h6>Default</h6>
-          <Input size={size} isError={isError} placeholder={placeholder} />
-        </li>
-        <li css={informationStyle}>
-          <h6>Text</h6>
-          <Input variant="text" size={size} isError={isError} placeholder={placeholder} />
-        </li>
-      </ul>
-    ),
+    <ul css={containerStyle}>
+      <li css={informationStyle}>
+        <h6>Default</h6>
+        <Input size={size} isError={isError} placeholder={placeholder} />
+      </li>
+      <li css={informationStyle}>
+        <h6>Text</h6>
+        <Input variant="text" size={size} isError={isError} placeholder={placeholder} />
+      </li>
+    </ul>
+  ),
   argTypes: {
     variant: {
       control: false,
@@ -66,21 +66,21 @@ export const Variants: Story = {
 
 export const Sizes: Story = {
   render: ({ variant, isError, placeholder }) => (
-      <ul css={containerStyle}>
-        <li css={informationStyle}>
-          <h6>Small</h6>
-          <Input size="small" variant={variant} isError={isError} placeholder={placeholder} />
-        </li>
-        <li css={informationStyle}>
-          <h6>Medium</h6>
-          <Input variant={variant} isError={isError} placeholder={placeholder} />
-        </li>
-        <li css={informationStyle}>
-          <h6>Large</h6>
-          <Input size="large" variant={variant} isError={isError} placeholder={placeholder} />
-        </li>
-      </ul>
-    ),
+    <ul css={containerStyle}>
+      <li css={informationStyle}>
+        <h6>Small</h6>
+        <Input size="small" variant={variant} isError={isError} placeholder={placeholder} />
+      </li>
+      <li css={informationStyle}>
+        <h6>Medium</h6>
+        <Input variant={variant} isError={isError} placeholder={placeholder} />
+      </li>
+      <li css={informationStyle}>
+        <h6>Large</h6>
+        <Input size="large" variant={variant} isError={isError} placeholder={placeholder} />
+      </li>
+    </ul>
+  ),
   argTypes: {
     size: {
       control: false,
@@ -112,7 +112,7 @@ export const Text: Story = {
 
 export const WithIcon: Story = {
   args: {
-    icon: <Icon icon="search" color='#ADACAF'/>,
+    icon: <Icon icon="search" color="#ADACAF" />,
   },
   argTypes: {
     icon: {
@@ -148,7 +148,7 @@ export const WithLabelAndSupportingText: Story = {
 export const WithIconLabelAndSupportingText: Story = {
   args: {
     label: 'Label',
-    icon: <Icon icon="search" color='#ADACAF' />,
+    icon: <Icon icon="search" color="#ADACAF" />,
     supportingText: 'Supporting Text',
     required: true,
   },
diff --git a/src/stories/Logo.stories.tsx b/src/stories/Atoms/Logo.stories.tsx
similarity index 94%
rename from src/stories/Logo.stories.tsx
rename to src/stories/Atoms/Logo.stories.tsx
index b26fe44..f0fd7b0 100644
--- a/src/stories/Logo.stories.tsx
+++ b/src/stories/Atoms/Logo.stories.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { Logo, CharacterProps } from '../components/Logo/Logo';
-import { characters } from '../assets/characters';
+import { Logo, CharacterProps } from '../../components/Logo/Logo';
+import { characters } from '../../assets/characters';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const Meta = styled.div`
@@ -55,7 +55,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-
 export const Labels = {
   render: (): JSX.Element => (
     <>
diff --git a/src/stories/Modal.stories.tsx b/src/stories/Atoms/Modal.stories.tsx
similarity index 100%
rename from src/stories/Modal.stories.tsx
rename to src/stories/Atoms/Modal.stories.tsx
diff --git a/src/stories/Paragraph.stories.tsx b/src/stories/Atoms/Paragraph.stories.tsx
similarity index 100%
rename from src/stories/Paragraph.stories.tsx
rename to src/stories/Atoms/Paragraph.stories.tsx
diff --git a/src/stories/ShowMoreBtn.stories.tsx b/src/stories/Atoms/ShowMoreBtn.stories.tsx
similarity index 100%
rename from src/stories/ShowMoreBtn.stories.tsx
rename to src/stories/Atoms/ShowMoreBtn.stories.tsx
diff --git a/src/stories/Skeleton.stories.tsx b/src/stories/Atoms/Skeleton.stories.tsx
similarity index 79%
rename from src/stories/Skeleton.stories.tsx
rename to src/stories/Atoms/Skeleton.stories.tsx
index 88669c2..a5ab209 100644
--- a/src/stories/Skeleton.stories.tsx
+++ b/src/stories/Atoms/Skeleton.stories.tsx
@@ -1,4 +1,4 @@
-import { containerStyle } from '@stories/styles';
+import { containerStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Skeleton from '@components/Skeleton/Skeleton';
@@ -29,7 +29,7 @@ export const Image: Story = {
   args: {
     width: '168px',
     height: '260px',
-    variant: "square"
+    variant: 'square',
   },
 };
 
@@ -52,13 +52,13 @@ export const Circle: Story = {
 
 export const Combination: Story = {
   render: () => (
-      <div css={containerStyle}>
-        <Skeleton variant="circle" width="100px" />
-        <Skeleton width="300px" height="100px" />
-        <Skeleton />
-        <Skeleton />
-      </div>
-    ),
+    <div css={containerStyle}>
+      <Skeleton variant="circle" width="100px" />
+      <Skeleton width="300px" height="100px" />
+      <Skeleton />
+      <Skeleton />
+    </div>
+  ),
   argTypes: {
     variant: { control: false },
     width: { control: false },
diff --git a/src/stories/SwitchToggle.stories.tsx b/src/stories/Atoms/SwitchToggle.stories.tsx
similarity index 100%
rename from src/stories/SwitchToggle.stories.tsx
rename to src/stories/Atoms/SwitchToggle.stories.tsx
diff --git a/src/stories/Atoms/Tabs.stories.tsx b/src/stories/Atoms/Tabs.stories.tsx
new file mode 100644
index 0000000..1acd962
--- /dev/null
+++ b/src/stories/Atoms/Tabs.stories.tsx
@@ -0,0 +1,87 @@
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useSelect } from '../../hooks/useSelect';
+
+import Tab from '@components/Tab/Tab';
+import Tabs from '@components/Tabs/Tabs';
+
+const meta = {
+  title: 'Design System/Tabs',
+  component: Tabs,
+  decorators: [
+    (Story) => (
+      <ul css={containerStyle}>
+        <Story />
+      </ul>
+    ),
+  ],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  render: () => {
+    const outlineSelector = useSelect('tab1');
+    const selectedOutline = outlineSelector.selected;
+    const handleSelectOutline = outlineSelector.handleSelectClick;
+
+    const blockSelector = useSelect('tab1');
+    const selectedBlock = blockSelector.selected;
+    const handleSelectBlock = blockSelector.handleSelectClick;
+
+    const outlineSelectorOverflow = useSelect('tab1');
+    const selectedOutlineOverflow = outlineSelectorOverflow.selected;
+    const handleSelectOutlineOverflow = outlineSelectorOverflow.handleSelectClick;
+
+    return (
+      <>
+        <li css={informationStyle}>
+          <h6>outline</h6>
+          <Tabs>
+            <Tab text="Tab 1" variant="outline" tabId="tab1" changeSelect={handleSelectOutline} selectedId={selectedOutline} />
+            <Tab text="Tab 2" variant="outline" tabId="tab2" changeSelect={handleSelectOutline} selectedId={selectedOutline} />
+          </Tabs>
+        </li>
+        <li css={informationStyle}>
+          <h6>block</h6>
+          <Tabs>
+            <Tab text="Tab 1" variant="block" tabId="tab1" changeSelect={handleSelectBlock} selectedId={selectedBlock} />
+            <Tab text="Tab 2" variant="block" tabId="tab2" changeSelect={handleSelectBlock} selectedId={selectedBlock} />
+          </Tabs>
+        </li>
+        <li css={informationStyle}>
+          <h6>overflow-outline</h6>
+          <Tabs>
+            <Tab text="Tab 1" variant="outline" tabId="tab1" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 2" variant="outline" tabId="tab2" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 3" variant="outline" tabId="tab3" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 4" variant="outline" tabId="tab4" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 5" variant="outline" tabId="tab5" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 6" variant="outline" tabId="tab6" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 7" variant="outline" tabId="tab7" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 8" variant="outline" tabId="tab8" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 9" variant="outline" tabId="tab9" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 10" variant="outline" tabId="tab10" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 11" variant="outline" tabId="tab11" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 12" variant="outline" tabId="tab12" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 13" variant="outline" tabId="tab13" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab14" variant="outline" tabId="tab14" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 15" variant="outline" tabId="tab15" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 16" variant="outline" tabId="tab16" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 17" variant="outline" tabId="tab17" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 18" variant="outline" tabId="tab18" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 19" variant="outline" tabId="tab19" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 20" variant="outline" tabId="tab20" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 21" variant="outline" tabId="tab21" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 22" variant="outline" tabId="tab22" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 23" variant="outline" tabId="tab23" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 24" variant="outline" tabId="tab24" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+            <Tab text="Tab 25" variant="outline" tabId="tab25" changeSelect={handleSelectOutlineOverflow} selectedId={selectedOutlineOverflow} />
+          </Tabs>
+        </li>
+      </>
+    );
+  },
+};
diff --git a/src/stories/Textarea.stories.tsx b/src/stories/Atoms/Textarea.stories.tsx
similarity index 70%
rename from src/stories/Textarea.stories.tsx
rename to src/stories/Atoms/Textarea.stories.tsx
index eaec378..9ba5a08 100644
--- a/src/stories/Textarea.stories.tsx
+++ b/src/stories/Atoms/Textarea.stories.tsx
@@ -1,4 +1,4 @@
-import { containerStyle, informationStyle } from '@stories/styles';
+import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Textarea from '@components/Textarea/Textarea';
@@ -39,21 +39,21 @@ export const Playground: Story = {};
 
 export const Sizes: Story = {
   render: ({ isError, placeholder }) => (
-      <ul css={containerStyle}>
-        <li css={informationStyle}>
-          <h6>Small</h6>
-          <Textarea size="small" isError={isError} placeholder={placeholder} />
-        </li>
-        <li css={informationStyle}>
-          <h6>Medium</h6>
-          <Textarea isError={isError} placeholder={placeholder} />
-        </li>
-        <li css={informationStyle}>
-          <h6>Large</h6>
-          <Textarea size="large" isError={isError} placeholder={placeholder} />
-        </li>
-      </ul>
-    ),
+    <ul css={containerStyle}>
+      <li css={informationStyle}>
+        <h6>Small</h6>
+        <Textarea size="small" isError={isError} placeholder={placeholder} />
+      </li>
+      <li css={informationStyle}>
+        <h6>Medium</h6>
+        <Textarea isError={isError} placeholder={placeholder} />
+      </li>
+      <li css={informationStyle}>
+        <h6>Large</h6>
+        <Textarea size="large" isError={isError} placeholder={placeholder} />
+      </li>
+    </ul>
+  ),
   argTypes: {
     size: {
       control: false,
diff --git a/src/stories/Toast.stories.tsx b/src/stories/Atoms/Toast.stories.tsx
similarity index 98%
rename from src/stories/Toast.stories.tsx
rename to src/stories/Atoms/Toast.stories.tsx
index c62ba70..f663fec 100644
--- a/src/stories/Toast.stories.tsx
+++ b/src/stories/Atoms/Toast.stories.tsx
@@ -1,5 +1,5 @@
 import Icon from '@components/Icon/Icon';
-import { containerStyle } from '@stories/styles';
+import { containerStyle } from '@/stories/Atoms/styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Button from '@components/Button/Button';
diff --git a/src/stories/styles.ts b/src/stories/Atoms/styles.ts
similarity index 93%
rename from src/stories/styles.ts
rename to src/stories/Atoms/styles.ts
index 56c0d92..e26f4fb 100644
--- a/src/stories/styles.ts
+++ b/src/stories/Atoms/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-import { themes } from '../styles/Theme';
+import { themes } from '../../styles/Theme';
 
 const containerStyle = css({
   display: 'flex',
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
deleted file mode 100644
index ef18cf2..0000000
--- a/src/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { containerStyle, informationStyle } from '@stories/styles';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Checkbox from '../components/Checkbox/Checkbox';
-
-const meta = {
-  title: 'Design System/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    checked: {
-      control: { type: 'boolean' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-  },
-  args: {
-    checked: true,
-    label: 'Label',
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
-
-export const Checkboxes: Story = {
-  render: () => (
-      <ul css={containerStyle}>
-        <li css={informationStyle}>
-          <h6>Checked</h6>
-          <Checkbox isChecked />
-        </li>
-        <li css={informationStyle}>
-          <h6>Unchecked</h6>
-          <Checkbox />
-        </li>
-        <li css={informationStyle}>
-          <h6>Checked with Label</h6>
-          <Checkbox checked label="Label" isChecked />
-        </li>
-        <li css={informationStyle}>
-          <h6>Unchecked with Label</h6>
-          <Checkbox label="Label" />
-        </li>
-      </ul>
-    ),
-  argTypes: {
-    checked: {
-      control: false,
-    },
-    label: {
-      control: false,
-    },
-  },
-};
diff --git a/src/stories/DesignToken/colors.stories.tsx b/src/stories/DesignToken/colors.stories.tsx
new file mode 100644
index 0000000..812b7db
--- /dev/null
+++ b/src/stories/DesignToken/colors.stories.tsx
@@ -0,0 +1,151 @@
+import { Meta } from '@storybook/react';
+import { css } from '@emotion/react';
+
+export default {
+  title: 'Design Token/Colors',
+  parameters: {
+    docs: {
+      description: {
+        component: '디자인에 사용된 컬러를 스케일로 표시했습니다. 각 컬러는 Color Token에 참조됩니다.',
+      },
+    },
+  },
+} as Meta;
+
+const colorBlockStyle = (color: string) => css`
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  background-color: ${color};
+`;
+
+const ColorBlock = ({ color, label }: { color: string; label: string }) => (
+  <div
+    css={css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    `}
+  >
+    <div css={colorBlockStyle(color)} style={{ width: '80px', height: '60px' }}></div>
+    <p
+      css={css`
+        font-size: 0.875rem;
+        font-weight: 500;
+      `}
+    >
+      {label}
+    </p>
+    <p
+      css={css`
+        font-size: 0.75rem;
+        color: #6b7280;
+      `}
+    >
+      {color}
+    </p>
+  </div>
+);
+
+export const Colors = () => (
+  <div
+    css={css`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `}
+  >
+    <section>
+      <h2
+        css={css`
+          font-size: 2rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: black;
+        `}
+      >
+        Tint
+      </h2>
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: repeat(6, 1fr);
+          gap: 1rem;
+          color: black;
+        `}
+      >
+        {[
+          { label: 'purple-06', color: '#7E16FD' },
+          { label: 'purple-05', color: '#9549FF' },
+          { label: 'purple-04', color: '#AA6FFF' },
+          { label: 'purple-03', color: '#C49BFF' },
+          { label: 'purple-02', color: '#DCC4FE' },
+          { label: 'purple-01', color: '#F2E7FF' },
+          { label: 'green-06', color: '#1BD27D' },
+          { label: 'green-05', color: '#0DE781' },
+          { label: 'green-04', color: '#25F281' },
+          { label: 'green-03', color: '#85F6A9' },
+          { label: 'green-02', color: '#BAF9CB' },
+          { label: 'green-01', color: '#E2FDEA' },
+          { label: 'red-01', color: '#F74F3B' },
+          { label: 'blue-01', color: '#00C3FF' },
+          { label: 'yellow-01', color: '#FFEB00' },
+        ].map((item) => (
+          <ColorBlock key={item.label} color={item.color} label={item.label} />
+        ))}
+      </div>
+    </section>
+
+    <section>
+      <h2
+        css={css`
+          font-size: 1.125rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: black;
+        `}
+      >
+        Gray
+      </h2>
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: repeat(6, 1fr);
+          gap: 1rem;
+          color: black;
+          margin-bottom: 1rem;
+        `}
+      >
+        {[
+          { label: 'black', color: '#000000' },
+          { label: 'white', color: '#FFFFFF' },
+        ].map((item) => (
+          <ColorBlock key={item.label} color={item.color} label={item.label} />
+        ))}
+      </div>
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: repeat(6, 1fr);
+          gap: 1rem;
+          color: black;
+        `}
+      >
+        {[
+          { label: 'gray-08', color: '#333036' },
+          { label: 'gray-07', color: '#28262B' },
+          { label: 'gray-06', color: '#5C595E' },
+          { label: 'gray-05', color: '#858386' },
+          { label: 'gray-04', color: '#ADACAF' },
+          { label: 'gray-03', color: '#D6D6D7' },
+          { label: 'gray-02', color: '#EBEAEB' },
+          { label: 'gray-01', color: '#F5F5F5' },
+        ].map((item) => (
+          <ColorBlock key={item.label} color={item.color} label={item.label} />
+        ))}
+      </div>
+    </section>
+  </div>
+);
diff --git a/src/stories/DesignToken/grid.stories.tsx b/src/stories/DesignToken/grid.stories.tsx
new file mode 100644
index 0000000..aa15c27
--- /dev/null
+++ b/src/stories/DesignToken/grid.stories.tsx
@@ -0,0 +1,59 @@
+import { Meta } from '@storybook/react';
+import { css } from '@emotion/react';
+
+export default {
+  title: 'Design Token/Grid',
+  parameters: {
+    docs: {
+      description: {
+        component: '모바일 및 PC 뷰의 페이지 사이즈 및 간격을 정의합니다.',
+      },
+    },
+  },
+} as Meta;
+
+const gridContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '32px',
+  color: 'black',
+});
+
+const gridBox = (width: string) =>
+  css({
+    width,
+    height: '100px',
+    border: '1px solid red',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'red',
+    fontWeight: 'bold',
+  });
+
+export const GridDocumentation = () => (
+  <div css={gridContainer}>
+    <h1 css={css({ fontSize: '20px' })}>Grid</h1>
+    <p>모바일, PC view 페이지 사이즈 및 간격을 정의했습니다.</p>
+
+    <section>
+      <h2 css={css({ fontSize: '15px', marginBottom: '10px' })}>Mobile</h2>
+      <p css={css({ fontWeight: 'bold' })}>
+        min-width <span css={css({ color: 'red' })}>360px</span>
+      </p>
+      <div css={gridBox('360px')}>360px</div>
+      <p>
+        max <span css={css({ color: 'red' })}>600px</span>
+      </p>
+      <div css={gridBox('600px')}>600px</div>
+    </section>
+
+    <section>
+      <h2 css={css({ fontSize: '15px', marginBottom: '10px' })}>PC</h2>
+      <p css={css({ fontWeight: 'bold' })}>
+        min-width <span css={css({ color: 'red' })}>1200px</span>
+      </p>
+      <div css={gridBox('1200px')}>1200px</div>
+    </section>
+  </div>
+);
diff --git a/src/stories/Icon.stories.tsx b/src/stories/DesignToken/icon.stories.tsx
similarity index 91%
rename from src/stories/Icon.stories.tsx
rename to src/stories/DesignToken/icon.stories.tsx
index 32fc93a..fbeccd5 100644
--- a/src/stories/Icon.stories.tsx
+++ b/src/stories/DesignToken/icon.stories.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { Icon, IconProps } from '../components/Icon/Icon';
-import { icons } from '../assets/icons';
+import { Icon, IconProps } from '../../components/Icon/Icon';
+import { icons } from '../../assets/icons';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const Meta = styled.div`
@@ -48,14 +48,13 @@ const List = styled.ul`
 `;
 
 const meta = {
-  title: 'Design System/Icon',
+  title: 'Design Token/Icon',
   component: Icon,
 } satisfies Meta<typeof Icon>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-
 export const Labels = {
   render: (): JSX.Element => (
     <>
@@ -63,7 +62,7 @@ export const Labels = {
       <List>
         {Object.keys(icons).map((key) => (
           <Item key={key}>
-            <Icon icon={key as keyof typeof icons} aria-hidden />
+            <Icon icon={key as keyof typeof icons} aria-hidden color="black" />
             <Meta>{key}</Meta>
           </Item>
         ))}
diff --git a/src/stories/DesignToken/semantic.stories.tsx b/src/stories/DesignToken/semantic.stories.tsx
new file mode 100644
index 0000000..a50272a
--- /dev/null
+++ b/src/stories/DesignToken/semantic.stories.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Design Token/Semantic Colors',
+  parameters: {
+    docs: {
+      description: {
+        component: '라이트모드 및 다크모드에서 사용하는 시맨틱 컬러를 정의했습니다. Colors 스케일에 포함된 색상을 참조했습니다.',
+      },
+    },
+  },
+} as Meta;
+
+const SemanticColorBlock = ({ label, color }: { label: string; color: string }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+    <div style={{ width: '80px', height: '40px', backgroundColor: color, borderRadius: '4px', marginBottom: '8px' }}></div>
+    <p style={{ fontSize: '14px', fontWeight: '500' }}>{label}</p>
+    <p style={{ fontSize: '12px', color: '#666' }}>{color}</p>
+  </div>
+);
+
+export const SemanticColors = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+    <section>
+      <h2 style={{ fontSize: '18px', fontWeight: '600', color: 'black', marginBottom: '10px' }}>Background</h2>
+
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>light</div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gap: '16px',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: 'black',
+          marginTop: '10px',
+        }}
+      >
+        <SemanticColorBlock label="background gray-01" color="#F5F5F5" />
+        <SemanticColorBlock label="background-elevated white" color="#FFFFFF" />
+      </div>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>dark</div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gap: '16px',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: 'black',
+          marginTop: '10px',
+        }}
+      >
+        <SemanticColorBlock label="background gray-07" color="#28262B" />
+        <SemanticColorBlock label="background-elevated gray-06" color="#5C595E" />
+      </div>
+    </section>
+
+    <section>
+      <h2 style={{ fontSize: '18px', fontWeight: '600', color: 'black', marginBottom: '10px' }}>Base</h2>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>light</div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px', color: 'black' }}>
+        <SemanticColorBlock label="primary gray-08" color="#333036" />
+        <SemanticColorBlock label="secondary gray-06" color="#5C595E" />
+        <SemanticColorBlock label="tertiary gray-04" color="#ADACAF" />
+        <SemanticColorBlock label="muted gray-03" color="#D6D6D7" />
+        <SemanticColorBlock label="faint gray-02" color="#EBEAEB" />
+      </div>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>dark</div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px', color: 'black' }}>
+        <SemanticColorBlock label="primary white" color="#FFFFFF" />
+        <SemanticColorBlock label="secondary gray-02" color="#EBEAEB" />
+        <SemanticColorBlock label="tertiary gray-04" color="#ADACAF" />
+        <SemanticColorBlock label="muted gray-05" color="#858386" />
+        <SemanticColorBlock label="faint gray-06" color="#5C595E" />
+      </div>
+    </section>
+
+    <section>
+      <h2 style={{ fontSize: '18px', fontWeight: '600', color: 'black', marginBottom: '10px' }}>Accent</h2>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>light</div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', color: 'black' }}>
+        <SemanticColorBlock label="primary purple-04" color="#8D76FF" />
+        <SemanticColorBlock label="primary-hover purple-05" color="#7C62FF" />
+        <SemanticColorBlock label="secondary green-04" color="#4ADB8D" />
+        <SemanticColorBlock label="secondary-light green-02" color="#8CE7B6" />
+      </div>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>dark</div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', color: 'black' }}>
+        <SemanticColorBlock label="primary purple-04" color="#8D76FF" />
+        <SemanticColorBlock label="primary-hover purple-05" color="#7C62FF" />
+        <SemanticColorBlock label="secondary green-04" color="#4ADB8D" />
+        <SemanticColorBlock label="secondary-light green-02" color="#8CE7B6" />
+      </div>
+    </section>
+
+    <section>
+      <h2 style={{ fontSize: '18px', fontWeight: '600', color: 'black', marginBottom: '10px' }}>System</h2>
+      <div style={{ fontSize: '14px', fontWeight: '600', color: 'black' }}>light / dark</div>
+      <div>
+        <SemanticColorBlock label="error red-01" color="#FF4D4F" />
+      </div>
+    </section>
+  </div>
+);
diff --git a/src/stories/DesignToken/typography.stories.tsx b/src/stories/DesignToken/typography.stories.tsx
new file mode 100644
index 0000000..8eb27ee
--- /dev/null
+++ b/src/stories/DesignToken/typography.stories.tsx
@@ -0,0 +1,79 @@
+import { Meta } from '@storybook/react';
+import { css } from '@emotion/react';
+import { themes } from '../../styles/Theme';
+const { typography } = themes.light;
+
+export default {
+  title: 'Design Token/Typography',
+  parameters: {
+    docs: {
+      description: {
+        component: 'heading 및 body는 특정 컴포넌트를 구분하지 않고 모든 UI에 사용되는 폰트입니다. 폰트 크기는 10px = 1rem으로 계산됩니다.',
+      },
+    },
+  },
+} as Meta;
+
+const createTypographyStyle = (type: keyof typeof typography) =>
+  css({
+    fontSize: typography[type].fontSize,
+    lineHeight: typography[type].lineHeight,
+    fontWeight: typography[type].fontWeight,
+  });
+
+const TypographyBlock = ({ text, style }: { text: string; style: ReturnType<typeof css> }) => (
+  <div css={css({ marginBottom: '16px' })}>
+    <p css={style}>{text}</p>
+  </div>
+);
+
+const heading01 = createTypographyStyle('heading01');
+const heading02 = createTypographyStyle('heading02');
+const heading03 = createTypographyStyle('heading03');
+const heading04 = createTypographyStyle('heading04');
+const heading05 = createTypographyStyle('heading05');
+
+const body01 = createTypographyStyle('body01');
+const body02 = createTypographyStyle('body02');
+const body03 = createTypographyStyle('body03');
+const body04 = createTypographyStyle('body04');
+
+const paragraph = createTypographyStyle('paragraph');
+const badge = createTypographyStyle('badge');
+
+export const Typography = () => (
+  <div css={css({ display: 'flex', flexDirection: 'column', gap: '24px', color: 'black' })}>
+    <section>
+      <h2 css={heading02}>Font Family</h2>
+      <TypographyBlock text="Pretendard" style={heading03} />
+      <TypographyBlock text="프리텐다드" style={heading03} />
+    </section>
+
+    <section>
+      <h2 css={heading02}>Headings</h2>
+      <TypographyBlock text="Heading 01 24px 2.4rem" style={heading01} />
+      <TypographyBlock text="Heading 02 20px 2.0rem" style={heading02} />
+      <TypographyBlock text="Heading 03 18px 1.8rem" style={heading03} />
+      <TypographyBlock text="Heading 04 16px 1.6rem" style={heading04} />
+      <TypographyBlock text="Heading 05 14px 1.4rem" style={heading05} />
+    </section>
+
+    <section>
+      <h2 css={heading02}>Body Text</h2>
+      <TypographyBlock text="Body 01 16px 1.6rem" style={body01} />
+      <TypographyBlock text="Body 02 14px 1.4rem" style={body02} />
+      <TypographyBlock text="Body 03 12px 1.2rem" style={body03} />
+      <TypographyBlock text="Body 04 11px 1.1rem" style={body04} />
+    </section>
+
+    <section>
+      <h2 css={heading02}>Paragraph</h2>
+      <TypographyBlock text="Paragraph 16px 1.6rem (160% line height)" style={paragraph} />
+    </section>
+
+    <section>
+      <h2 css={heading02}>Badges</h2>
+      <TypographyBlock text="Badge 01 14px 1.4rem (120% line height)" style={badge} />
+    </section>
+  </div>
+);
diff --git a/src/stories/Tabs.stories.tsx b/src/stories/Tabs.stories.tsx
deleted file mode 100644
index c1f28fb..0000000
--- a/src/stories/Tabs.stories.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { containerStyle, informationStyle } from '@stories/styles';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { useSelect } from '../hooks/useSelect';
-
-import Tab from '@components/Tab/Tab';
-import Tabs from '@components/Tabs/Tabs';
-
-const meta = {
-  title: 'Design System/Tabs',
-  component: Tabs,
-  decorators: [
-    (Story) => (
-      <ul css={containerStyle}>
-        <Story />
-      </ul>
-    ),
-  ],
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Variants: Story = {
-  render: () => {
-    const outlineSelector = useSelect('tab1');
-    const selectedOutline = outlineSelector.selected;
-    const handleSelectOutline = outlineSelector.handleSelectClick;
-
-    const blockSelector = useSelect('tab1');
-    const selectedBlock = blockSelector.selected;
-    const handleSelectBlock = blockSelector.handleSelectClick;
-
-    const outlineSelectorOverflow = useSelect('tab1');
-    const selectedOutlineOverflow = outlineSelectorOverflow.selected;
-    const handleSelectOutlineOverflow = outlineSelectorOverflow.handleSelectClick;
-
-    return (
-      <>
-        <li css={informationStyle}>
-          <h6>outline</h6>
-          <Tabs>
-            <Tab
-              text="Tab 1"
-              variant="outline"
-              tabId="tab1"
-              changeSelect={handleSelectOutline}
-              selectedId={selectedOutline}
-            />
-            <Tab
-              text="Tab 2"
-              variant="outline"
-              tabId="tab2"
-              changeSelect={handleSelectOutline}
-              selectedId={selectedOutline}
-            />
-          </Tabs>
-        </li>
-        <li css={informationStyle}>
-          <h6>block</h6>
-          <Tabs>
-            <Tab
-              text="Tab 1"
-              variant="block"
-              tabId="tab1"
-              changeSelect={handleSelectBlock}
-              selectedId={selectedBlock}
-            />
-            <Tab
-              text="Tab 2"
-              variant="block"
-              tabId="tab2"
-              changeSelect={handleSelectBlock}
-              selectedId={selectedBlock}
-            />
-          </Tabs>
-        </li>
-        <li css={informationStyle}>
-          <h6>overflow-outline</h6>
-          <Tabs>
-            <Tab
-              text="Tab 1"
-              variant="outline"
-              tabId="tab1"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 2"
-              variant="outline"
-              tabId="tab2"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 3"
-              variant="outline"
-              tabId="tab3"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 4"
-              variant="outline"
-              tabId="tab4"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 5"
-              variant="outline"
-              tabId="tab5"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 6"
-              variant="outline"
-              tabId="tab6"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 7"
-              variant="outline"
-              tabId="tab7"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 8"
-              variant="outline"
-              tabId="tab8"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 9"
-              variant="outline"
-              tabId="tab9"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 10"
-              variant="outline"
-              tabId="tab10"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 11"
-              variant="outline"
-              tabId="tab11"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 12"
-              variant="outline"
-              tabId="tab12"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 13"
-              variant="outline"
-              tabId="tab13"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab14"
-              variant="outline"
-              tabId="tab14"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 15"
-              variant="outline"
-              tabId="tab15"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 16"
-              variant="outline"
-              tabId="tab16"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 17"
-              variant="outline"
-              tabId="tab17"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 18"
-              variant="outline"
-              tabId="tab18"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 19"
-              variant="outline"
-              tabId="tab19"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 20"
-              variant="outline"
-              tabId="tab20"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 21"
-              variant="outline"
-              tabId="tab21"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 22"
-              variant="outline"
-              tabId="tab22"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 23"
-              variant="outline"
-              tabId="tab23"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 24"
-              variant="outline"
-              tabId="tab24"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-            <Tab
-              text="Tab 25"
-              variant="outline"
-              tabId="tab25"
-              changeSelect={handleSelectOutlineOverflow}
-              selectedId={selectedOutlineOverflow}
-            />
-          </Tabs>
-        </li>
-      </>
-    );
-  },
-};