diff --git a/.vscode/settings.json b/.vscode/settings.json
index 25fa621..415cb65 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 99d71ba..ae949d4 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -1,49 +1,81 @@
-import { Test } from '@sopt-makers/ui';
-import './App.css';
-import { useState, ChangeEvent } from 'react';
-import TextField from '../../../packages/ui/Input/TextField';
-import TextArea from '../../../packages/ui/Input/TextArea';
-import SearchField from '../../../packages/ui/Input/SearchField';
+import "./App.css";
+
+import { ChangeEvent, useState } from "react";
+
+import SearchField from "../../../packages/ui/Input/SearchField";
+import { Test } from "@sopt-makers/ui";
+import TextArea from "../../../packages/ui/Input/TextArea";
+import TextField from "../../../packages/ui/Input/TextField";
 
 function App() {
-  const [input, setInput] = useState('');
-  const [textarea, setTextarea] = useState('');
-  const [search, setSearch] = useState('');
+  const [input, setInput] = useState("");
+  const [textarea, setTextarea] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
-  }
+  };
 
   const inputValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
   const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setTextarea(e.target.value);
-  }
+  };
 
   const textareaValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
-  const handleTextareaSubmit = () => { console.log(textarea) }
+  const handleTextareaSubmit = () => {
+    console.log(textarea);
+  };
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-  }
+  };
 
-  const handleSearchSubmit = () => { console.log(search) }
+  const handleSearchSubmit = () => {
+    console.log(search);
+  };
 
-  const handleSearchReset = () => { setSearch('') }
+  const handleSearchReset = () => {
+    setSearch("");
+  };
 
   return (
     <>
       <Test text="Test Component" size="big" color="blue" />
-      <TextField<string> placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={inputValidation} value={input} onChange={handleInputChange} />
-      <TextArea placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={textareaValidation} value={textarea} onChange={handleTextareaChange} onSubmit={handleTextareaSubmit} maxLength={300} />
-      <SearchField placeholder="Placeholder..." value={search} onChange={handleSearchChange} onSubmit={handleSearchSubmit} onReset={handleSearchReset} />
+      <TextField<string>
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={inputValidation}
+        value={input}
+        onChange={handleInputChange}
+      />
+      <TextArea
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={textareaValidation}
+        value={textarea}
+        onChange={handleTextareaChange}
+        onSubmit={handleTextareaSubmit}
+        maxLength={300}
+      />
+      <SearchField
+        placeholder="Placeholder..."
+        value={search}
+        onChange={handleSearchChange}
+        onSubmit={handleSearchSubmit}
+        onReset={handleSearchReset}
+      />
     </>
   );
 }
diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css
index 4e11abb..544c531 100644
--- a/apps/docs/src/index.css
+++ b/apps/docs/src/index.css
@@ -7,36 +7,41 @@
 }
 
 body {
-  background-color: rgb(0, 0, 0);
+  background-color: #1e1e1e;
 }
 
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2")
+    format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2")
+    format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2")
+    format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2")
+    format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2")
+    format("woff2");
   font-weight: 700;
   font-style: normal;
 }
diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx
index c6214ac..c17006d 100644
--- a/apps/docs/src/stories/Button.stories.tsx
+++ b/apps/docs/src/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@sopt-makers/ui';
+import { IconPlus, IconChevronRight } from '@sopt-makers/icons';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
@@ -16,6 +17,13 @@ export default {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] },
+    rounded: { control: 'radio', options: ['md', 'lg'] },
+    LeftIcon: { control: false },
+    RightIcon: { control: false }
+  }
 } as Meta<ButtonStoryProps>;
 
 // 기본 버튼 스토리
@@ -30,22 +38,24 @@ export const Default: StoryObj<ButtonStoryProps> = {
 };
 
 // 커스텀 버튼 스토리
-export const Another: StoryObj<ButtonStoryProps> = {
+export const LeftIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Another Button',
-    size: 'lg',
+    children: 'LeftIcon Button',
+    size: 'sm',
     theme: 'red',
     rounded: 'lg',
     disabled: false,
+    LeftIcon: IconPlus,
   },
 };
 
-export const Disabled: StoryObj<ButtonStoryProps> = {
+export const RightIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Disabled Button',
-    size: 'md',
+    children: 'RightIcon Button',
+    size: 'lg',
     theme: 'blue',
     rounded: 'lg',
-    disabled: true,
+    disabled: false,
+    RightIcon: IconChevronRight,
   },
 };
\ No newline at end of file
diff --git a/apps/docs/src/stories/Callout.stories.tsx b/apps/docs/src/stories/Callout.stories.tsx
new file mode 100644
index 0000000..ebf6546
--- /dev/null
+++ b/apps/docs/src/stories/Callout.stories.tsx
@@ -0,0 +1,73 @@
+import { Callout } from "@sopt-makers/ui";
+import { Meta, StoryObj } from "@storybook/react";
+
+interface CalloutProps {
+  children: React.ReactNode;
+  type: "danger" | "information" | "warning";
+  hasIcon?: boolean;
+  buttonLabel?: string;
+  isButtonDisabled?: boolean;
+  onClick?: () => void;
+}
+
+export default {
+  title: "Components/Callout",
+  component: Callout,
+  tags: ["autodocs"],
+  argTypes: {
+    type: { control: 'radio', options: ['danger', 'information', 'warning'] },
+  }
+} as Meta<CalloutProps>;
+
+// danger 콜아웃 스토리
+export const Danger: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "danger",
+    hasIcon: false,
+  },
+};
+// information 콜아웃 스토리
+export const Information: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "information",
+    hasIcon: false,
+  },
+};
+// warning 콜아웃 스토리
+export const Warning: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "warning",
+    hasIcon: false,
+  },
+};
+
+// warning+icon+button 콜아웃 스토리
+export const CalloutWithBtn: StoryObj<CalloutProps> = {
+  args: {
+    children: (
+      <>
+        버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
+        isButtonDisabled 옵션으로 disabled state를 확인해보세요.
+      </>
+    ),
+    type: "warning",
+    hasIcon: true,
+    buttonLabel: "hover, press 해보세요!",
+    isButtonDisabled: false,
+  },
+};
+
+// 여러줄 텍스트 콜아웃 스토리
+export const CalloutWithLongText: StoryObj<CalloutProps> = {
+  args: {
+    children:
+      "Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요. Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요.",
+    type: "information",
+    hasIcon: true,
+    buttonLabel: "소셜 계정 재설정하기",
+    isButtonDisabled: false,
+  },
+};
diff --git a/apps/docs/src/stories/CheckBox.stories.tsx b/apps/docs/src/stories/CheckBox.stories.tsx
index c27a6fe..b15c29d 100644
--- a/apps/docs/src/stories/CheckBox.stories.tsx
+++ b/apps/docs/src/stories/CheckBox.stories.tsx
@@ -1,10 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CheckBox } from '@sopt-makers/ui';
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckBox } from "@sopt-makers/ui";
 
 const meta = {
-  title: 'Components/CheckBox',
+  title: "Components/Control/CheckBox",
   component: CheckBox,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof CheckBox>;
 
 export default meta;
@@ -13,22 +18,23 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     checked: true,
-    size: 'small',
+    size: "sm",
+    label: "Label",
   },
 };
 
 export const LargeLabel: StoryObj = {
   args: {
     checked: false,
-    size: 'large',
-    label: 'Label'
+    size: "lg",
+    label: "Label",
   },
 };
 
 export const SmallLabel: StoryObj = {
   args: {
     checked: false,
-    size: 'small',
-    label: 'Label'
+    size: "sm",
+    label: "Label",
   },
 };
diff --git a/apps/docs/src/stories/Chip.stories.tsx b/apps/docs/src/stories/Chip.stories.tsx
new file mode 100644
index 0000000..307b95c
--- /dev/null
+++ b/apps/docs/src/stories/Chip.stories.tsx
@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '@sopt-makers/ui';
+import { IconCheck, IconAlarmClock } from '@sopt-makers/icons';
+
+interface ChipOwnProps {
+  iconColor?: string;
+  size?: 'sm' | 'md';
+  active?: boolean;
+  LeftIcon?: React.ComponentType;
+  RightIcon?: React.ComponentType;
+}
+
+type ChipStoryProps = ChipOwnProps & { children: string };
+
+export default {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md'] },
+    iconColor: { control: 'color' },
+    LeftIcon: { control: false },
+    RightIcon: { control: false },
+  }
+} as Meta<ChipStoryProps>;
+
+// 기본 chip 스토리
+export const Default: StoryObj<ChipStoryProps> = {
+  args: {
+    children: 'Default Chip',
+    size: 'sm',
+    active: false,
+  },
+};
+
+// active chip 스토리
+export const Active: StoryObj<ChipStoryProps> = {
+  args: {
+    children: 'Active Chip',
+    size: 'md',
+    active: true,
+  },
+};
+
+// left icon (with color) chip 스토리
+export const LeftIcon: StoryObj<ChipStoryProps> = {
+  args: {
+    children: 'Chip with a LeftIcon',
+    size: 'sm',
+    active: false,
+    LeftIcon: IconCheck,
+  },
+};
+
+// colored right icon chip 스토리
+export const RightIconWithColor: StoryObj<ChipStoryProps> = {
+  args: {
+    children: 'Chip with a colored RightIcon',
+    iconColor: '#cd24ea',
+    size: 'sm',
+    active: false,
+    RightIcon: IconAlarmClock,
+  },
+};
diff --git a/apps/docs/src/stories/Dialog.stories.tsx b/apps/docs/src/stories/Dialog.stories.tsx
index 32ff77c..a4cc037 100644
--- a/apps/docs/src/stories/Dialog.stories.tsx
+++ b/apps/docs/src/stories/Dialog.stories.tsx
@@ -96,7 +96,7 @@ export const DesktopSingleLabel: StoryObj = {
       checkBoxOptions: {
         label: '다시는 보지 않기',
         checked: false,
-        size: 'small',
+        size: 'sm',
         color: 'white',
         onChange: (e) => checkCheckBox(e.target.checked),
       },
@@ -168,7 +168,7 @@ export const DesktopSingleLong: StoryObj = {
       checkBoxOptions: {
         label: '다시는 보지 않기',
         checked: false,
-        size: 'small',
+        size: 'sm',
         color: 'white',
         onChange: (e) => checkCheckBox(e.target.checked),
       },
@@ -259,7 +259,7 @@ export const MobileSingleLabel: StoryObj = {
       checkBoxOptions: {
         label: '다시는 보지 않기',
         checked: false,
-        size: 'small',
+        size: 'sm',
         color: 'white',
         onChange: (e) => checkCheckBox(e.target.checked),
       },
@@ -323,7 +323,7 @@ export const MobileSingleLong: StoryObj = {
       checkBoxOptions: {
         label: '다시는 보지 않기',
         checked: false,
-        size: 'small',
+        size: 'sm',
         color: 'white',
         onChange: (e) => checkCheckBox(e.target.checked),
       },
diff --git a/apps/docs/src/stories/Radio.stories.tsx b/apps/docs/src/stories/Radio.stories.tsx
new file mode 100644
index 0000000..0f93cdf
--- /dev/null
+++ b/apps/docs/src/stories/Radio.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Radio } from "@sopt-makers/ui";
+
+const meta = {
+  title: "Components/Control/Radio",
+  component: Radio,
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
+} as Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: true,
+    size: "sm",
+  },
+};
+
+export const LargeRadio: StoryObj = {
+  args: {
+    checked: false,
+    size: "lg",
+    label: "Label",
+  },
+};
+
+export const SmallRadio: StoryObj = {
+  args: {
+    checked: false,
+    size: "sm",
+    label: "Label",
+  },
+};
diff --git a/apps/docs/src/stories/Tab.stories.tsx b/apps/docs/src/stories/Tab.stories.tsx
new file mode 100644
index 0000000..3a77512
--- /dev/null
+++ b/apps/docs/src/stories/Tab.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tab } from "@sopt-makers/ui";
+
+const meta = {
+  title: "Components/Tab",
+  component: Tab,
+  tags: ["autodocs"],
+  args: {
+    tabItems: ['Tab1', 'Tab2', 'Tab3'],
+    selectedInitial: 'Tab1',
+  },
+  argTypes: {
+    style: { control: 'radio', options: ['primary', 'secondary'] },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    selectedInitial: { control: 'select', options: ['Tab1', 'Tab2', 'Tab3'] },
+  }
+} as Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    style: 'primary',
+    size: 'sm',
+  },
+};
+
+export const Secondary: StoryObj = {
+  args: {
+    style: 'secondary',
+    size: 'lg',
+  },
+};
diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx
new file mode 100644
index 0000000..43b8aab
--- /dev/null
+++ b/apps/docs/src/stories/Tag.stories.tsx
@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { type HTMLAttributes } from "react";
+import { Tag } from "@sopt-makers/ui";
+
+interface TagOwnProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: string;
+  size?: "sm" | "md" | "lg";
+  shape?: "rect" | "pill";
+  variant?: "default" | "primary" | "secondary";
+  type?: "solid" | "line";
+}
+
+type TagStoryProps = TagOwnProps & { children: string };
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    shape: { control: 'radio', options: ['rect', 'pill'] },
+    variant: { control: 'radio', options: ['default', 'primary', 'secondary'] },
+    type: { control: 'radio', options: ['solid', 'line'] },
+  }
+} as Meta<TagStoryProps>;
+
+// 기본 태그 스토리
+export const Default: StoryObj<TagStoryProps> = {
+  args: {
+    children: "Default Tag",
+    size: "sm",
+    shape: "rect",
+    variant: "default",
+    type: "solid",
+  },
+};
diff --git a/apps/docs/src/stories/Toggle.stories.tsx b/apps/docs/src/stories/Toggle.stories.tsx
new file mode 100644
index 0000000..3cb8546
--- /dev/null
+++ b/apps/docs/src/stories/Toggle.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "@sopt-makers/ui";
+
+const meta = {
+  title: "Components/Control/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+  }
+} as Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: true,
+    size: "lg",
+  },
+};
+
+export const LargeToggle: StoryObj = {
+  args: {
+    checked: false,
+    size: "lg",
+  },
+};
+
+export const SmallToggle: StoryObj = {
+  args: {
+    checked: false,
+    size: "sm",
+  },
+};
diff --git a/packages/ui/Button/Button.tsx b/packages/ui/Button/Button.tsx
index bc7d017..2dc12fa 100644
--- a/packages/ui/Button/Button.tsx
+++ b/packages/ui/Button/Button.tsx
@@ -1,8 +1,9 @@
 import React, { type ButtonHTMLAttributes } from 'react';
 import * as S from './style.css';
 import createButtonVariant from './utils';
+import { iconSizes } from './constants';
 
-interface IconProps { color?: string }
+interface IconProps { color?: string, width: number, height: number }
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
@@ -25,14 +26,15 @@ function Button({
   ...buttonElementProps
 }: ButtonProps) {
   const variant = createButtonVariant(theme, rounded, size);
+  const iconSize = iconSizes[size];
   return (
     <button className={`${S.root} ${variant} ${className}`}
       type="button"
       {...buttonElementProps}
     >
-      {LeftIcon ? <LeftIcon /> : null}
+      {LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
       <span>{children}</span>
-      {RightIcon ? <RightIcon /> : null}
+      {(RightIcon && !LeftIcon) ? <RightIcon height={iconSize} width={iconSize} /> : null}
     </button>
   );
 }
diff --git a/packages/ui/Button/constants.ts b/packages/ui/Button/constants.ts
index 69f1af1..1859fe1 100644
--- a/packages/ui/Button/constants.ts
+++ b/packages/ui/Button/constants.ts
@@ -1,23 +1,19 @@
-import theme from '../theme.css';
-import type {
-  ButtonColorTheme,
-  ButtonColorThemeWithStatus,
-  ButtonSizeTheme,
-} from './types';
+import theme from "../theme.css";
+import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme } from "./types";
 
 export const bgColors: Record<ButtonColorThemeWithStatus, string> = {
-  'white-default': theme.colors.white,
-  'black-default': theme.colors.gray700,
-  'blue-default': theme.colors.success,
-  'red-default': theme.colors.error,
-  'white-hover': theme.colors.gray50,
-  'black-hover': theme.colors.gray600,
-  'blue-hover': theme.colors.blue500,
-  'red-hover': theme.colors.red500,
-  'white-press': theme.colors.gray100,
-  'black-press': theme.colors.gray500,
-  'blue-press': theme.colors.blue600,
-  'red-press': theme.colors.red600,
+  "white-default": theme.colors.white,
+  "black-default": theme.colors.gray700,
+  "blue-default": theme.colors.success,
+  "red-default": theme.colors.error,
+  "white-hover": theme.colors.gray50,
+  "black-hover": theme.colors.gray600,
+  "blue-hover": theme.colors.blue500,
+  "red-hover": theme.colors.red500,
+  "white-press": theme.colors.gray100,
+  "black-press": theme.colors.gray500,
+  "blue-press": theme.colors.blue600,
+  "red-press": theme.colors.red600,
 };
 
 export const textColors = {
@@ -25,28 +21,33 @@ export const textColors = {
   dark: theme.colors.gray800,
 };
 
-export const colorThemeToTextColor: Record<ButtonColorTheme, 'light' | 'dark'> =
-  {
-    white: 'dark',
-    black: 'light',
-    red: 'light',
-    blue: 'light',
-  };
+export const colorThemeToTextColor: Record<ButtonColorTheme, "light" | "dark"> = {
+  white: "dark",
+  black: "light",
+  red: "light",
+  blue: "light",
+};
 
 export const borderRadiuses: Record<ButtonSizeTheme, string> = {
-  sm: '8px',
-  md: '10px',
-  lg: '12px',
+  sm: "8px",
+  md: "10px",
+  lg: "12px",
 };
 
 export const paddings: Record<ButtonSizeTheme, string> = {
-  sm: '9px 14px',
-  md: '12px 20px',
-  lg: '16px 26px',
+  sm: "9px 14px",
+  md: "12px 20px",
+  lg: "16px 26px",
 };
 
 export const fontSizes: Record<ButtonSizeTheme, string> = {
-  sm: '14px',
-  md: '14px',
-  lg: '18px',
+  sm: "14px",
+  md: "14px",
+  lg: "18px",
+};
+
+export const iconSizes: Record<ButtonSizeTheme, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
 };
diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
new file mode 100644
index 0000000..fc75d7d
--- /dev/null
+++ b/packages/ui/Callout/Callout.tsx
@@ -0,0 +1,57 @@
+import {
+  IconAlertCircle,
+  IconChevronRight,
+  IconInfoCircle,
+} from "@sopt-makers/icons";
+import type { ReactNode } from "react";
+import {
+  buttonIcon,
+  button,
+  calloutVariant,
+  container,
+  iconVariant,
+  text,
+} from "./style.css";
+import type { CalloutType } from "./types";
+
+const icons = {
+  danger: IconAlertCircle,
+  information: IconInfoCircle,
+  warning: IconAlertCircle,
+};
+interface CalloutProps {
+  children: ReactNode;
+  type: CalloutType;
+  hasIcon?: boolean;
+  buttonLabel?: string;
+  isButtonDisabled?: boolean;
+  onClick?: () => void;
+}
+
+function Callout(props: CalloutProps) {
+  const { children, type, hasIcon, buttonLabel, isButtonDisabled, onClick } =
+    props;
+  const Icon = icons[type];
+
+  return (
+    <aside className={calloutVariant[type]}>
+      {buttonLabel || hasIcon ? <Icon className={iconVariant[type]} /> : null}
+      <div className={container}>
+        <span className={text}>{children}</span>
+        {buttonLabel ? (
+          <button
+            className={button}
+            disabled={isButtonDisabled}
+            onClick={onClick}
+            type="button"
+          >
+            <span>{buttonLabel}</span>
+            <IconChevronRight className={buttonIcon} />
+          </button>
+        ) : null}
+      </div>
+    </aside>
+  );
+}
+
+export default Callout;
diff --git a/packages/ui/Callout/constants.ts b/packages/ui/Callout/constants.ts
new file mode 100644
index 0000000..6c640b4
--- /dev/null
+++ b/packages/ui/Callout/constants.ts
@@ -0,0 +1,24 @@
+import type { CSSProperties } from "react";
+import theme from "../theme.css";
+import type { CalloutType } from "./types";
+
+export const iconColors: Record<CalloutType, string> = {
+  danger: theme.colors.red500,
+  information: theme.colors.blue500,
+  warning: theme.colors.yellow500,
+};
+
+export const calloutColors: Record<CalloutType, CSSProperties> = {
+  danger: {
+    backgroundColor: theme.colors.redAlpha100,
+    borderColor: theme.colors.red600,
+  },
+  information: {
+    backgroundColor: theme.colors.blueAlpha100,
+    borderColor: theme.colors.blueAlpha600,
+  },
+  warning: {
+    backgroundColor: "rgba(255, 194, 52, 0.1)",
+    borderColor: theme.colors.yellow600,
+  },
+};
diff --git a/packages/ui/Callout/index.tsx b/packages/ui/Callout/index.tsx
new file mode 100644
index 0000000..68a8991
--- /dev/null
+++ b/packages/ui/Callout/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Callout";
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
new file mode 100644
index 0000000..613009a
--- /dev/null
+++ b/packages/ui/Callout/style.css.ts
@@ -0,0 +1,92 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+import theme from "../theme.css";
+import { calloutColors, iconColors } from "./constants";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 18,
+});
+
+export const text = style({
+  textAlign: "left",
+  ...theme.fontsObject.BODY_3_14_M,
+  color: theme.colors.gray30,
+});
+
+export const button = style({
+  display: "flex",
+  alignItems: "center",
+
+  paddingBottom: 4,
+
+  borderWidth: "0px 0px 0.8px 0px",
+  borderStyle: "solid",
+  borderColor: "transparent",
+  backgroundColor: "transparent",
+
+  cursor: "pointer",
+  color: theme.colors.gray30,
+  ...theme.fontsObject.LABEL_4_12_SB,
+
+  ":hover": {
+    color: theme.colors.gray50,
+    borderColor: theme.colors.gray50,
+  },
+  ":active": {
+    color: theme.colors.gray100,
+    borderColor: theme.colors.gray100,
+  },
+  ":disabled": {
+    color: theme.colors.gray500,
+    borderColor: "transparent",
+    cursor: "default",
+  },
+});
+
+export const buttonIcon = style({
+  width: 16,
+  color: theme.colors.gray30,
+  selectors: {
+    [`${button}:hover &`]: {
+      color: theme.colors.gray50,
+    },
+    [`${button}:active &`]: {
+      color: theme.colors.gray100,
+    },
+    [`${button}:disabled &`]: {
+      color: theme.colors.gray500,
+    },
+  },
+});
+
+// ▶️ icon styleVariants
+const iconBase = style({
+  flexShrink: 0,
+  width: 20,
+});
+
+export const iconVariant = styleVariants(iconColors, (color) => [
+  iconBase,
+  { color },
+]);
+
+// ▶️ callout styleVariants
+const calloutBase = style({
+  display: "flex",
+  gap: 10,
+  alignItems: "flex-start",
+  padding: "14px 18px",
+
+  border: "1px solid",
+  borderRadius: 10,
+});
+
+export const calloutVariant = styleVariants(
+  calloutColors,
+  ({ backgroundColor, borderColor }) => [
+    calloutBase,
+    { backgroundColor, borderColor },
+  ]
+);
diff --git a/packages/ui/Callout/types.ts b/packages/ui/Callout/types.ts
new file mode 100644
index 0000000..887157f
--- /dev/null
+++ b/packages/ui/Callout/types.ts
@@ -0,0 +1 @@
+export type CalloutType = "danger" | "information" | "warning";
diff --git a/packages/ui/CheckBox/index.tsx b/packages/ui/CheckBox/index.tsx
deleted file mode 100644
index 248b0db..0000000
--- a/packages/ui/CheckBox/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import { IconCheck } from '@sopt-makers/icons';
-import {
-  check,
-  checkBox,
-  checkBoxChecked,
-  checkBoxInput,
-  checkBoxLabel,
-  checkBoxWrapper,
-  labelColor,
-} from './style.css';
-
-export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  label?: string;
-  size?: 'small' | 'large';
-  checked?: boolean;
-  color?: 'white';
-}
-
-const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  ({ checked = false, label, size = 'small', color = 'white', onChange, ...props }, ref) => {
-    return (
-      <label className={checkBoxWrapper}>
-        <input className={checkBoxInput} onChange={onChange} ref={ref} type="checkbox" {...props} />
-        <div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
-          {checked ? <IconCheck className={check[size]} /> : null}
-        </div>
-        <p className={`${checkBoxLabel[size]} ${labelColor[color]}`}>{label ? label : null}</p>
-      </label>
-    );
-  }
-);
-CheckBox.displayName = 'CheckBox';
-
-export default CheckBox;
diff --git a/packages/ui/CheckBox/style.css.ts b/packages/ui/CheckBox/style.css.ts
deleted file mode 100644
index 3774656..0000000
--- a/packages/ui/CheckBox/style.css.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import theme from "../theme.css";
-
-export const checkBoxWrapper = style({
-  display: 'flex',
-  alignItems: 'center',
-  cursor: 'pointer',
-});
-
-export const checkBoxInput = style({
-  position: 'absolute',
-  width: '1px',
-  height: '1px',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-});
-
-const checkBoxBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  transition: '0.2s background-color',
-  borderRadius: '5px',
-});
-
-export const checkBox = styleVariants({
-  small: [checkBoxBase, { width: '18px', height: '18px' }],
-  large: [checkBoxBase, { width: '24px', height: '24px' }],
-});
-
-export const checkBoxChecked = styleVariants({
-  true: [checkBoxBase, { backgroundColor: theme.colors.blue400 }],
-  false: [checkBoxBase, { backgroundColor: theme.colors.gray500 }],
-});
-
-export const checkBoxLabel = styleVariants({
-  small: [
-    theme.fontsObject.BODY_3_14_R,
-    {
-      marginLeft: '8px',
-    },
-  ],
-  large: [
-    theme.fontsObject.BODY_2_16_R,
-    {
-      marginLeft: '10px',
-    },
-  ],
-});
-
-export const labelColor = styleVariants({
-  white: {
-    color: theme.colors.gray10,
-  },
-});
-
-export const check = styleVariants({
-  small: { width: 18, color: theme.colors.white },
-  large: { width: 24, color: theme.colors.white },
-});
diff --git a/packages/ui/Chip/Chip.tsx b/packages/ui/Chip/Chip.tsx
new file mode 100644
index 0000000..01a504f
--- /dev/null
+++ b/packages/ui/Chip/Chip.tsx
@@ -0,0 +1,62 @@
+import type { ButtonHTMLAttributes, CSSProperties, ComponentType } from 'react';
+import { root, activeStyle, sprinkles } from './style.css';
+
+interface IconProps {
+  color?: string;
+  style?: CSSProperties;
+}
+
+interface BaseChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: string | number;
+  className?: string;
+  iconColor?: string;
+  size?: 'sm' | 'md';
+  active?: boolean;
+}
+
+interface LeftIconChipProps extends BaseChipProps {
+  LeftIcon?: ComponentType<IconProps>;
+  RightIcon?: never;
+}
+
+interface RightIconChipProps extends BaseChipProps {
+  LeftIcon?: never;
+  RightIcon?: ComponentType<IconProps>;
+}
+
+type ChipProps = LeftIconChipProps | RightIconChipProps;
+
+function Chip({
+  children,
+  className,
+  LeftIcon,
+  RightIcon,
+  iconColor,
+  size = 'sm',
+  active = false,
+  ...buttonElementProps
+}: ChipProps) {
+  return (
+    <button
+      className={`${root} ${className} ${sprinkles({
+        padding: size,
+        fontStyle: size,
+      })} ${active && activeStyle}`}
+      type='button'
+      {...buttonElementProps}
+    >
+      {LeftIcon ? (
+        <LeftIcon color={iconColor} style={{ width: '16px', height: '16px' }} />
+      ) : null}
+      <span>{children}</span>
+      {!LeftIcon && RightIcon ? (
+        <RightIcon
+          color={iconColor}
+          style={{ width: '16px', height: '16px' }}
+        />
+      ) : null}
+    </button>
+  );
+}
+
+export default Chip;
diff --git a/packages/ui/Chip/constants.ts b/packages/ui/Chip/constants.ts
new file mode 100644
index 0000000..fe82017
--- /dev/null
+++ b/packages/ui/Chip/constants.ts
@@ -0,0 +1,12 @@
+import theme from '../theme.css';
+import type { ChipSizeTheme } from './types';
+
+export const paddings: Record<ChipSizeTheme, string> = {
+  sm: '9px 14px',
+  md: '10px 20px',
+};
+
+export const fonts = {
+  sm: theme.fontsObject.LABEL_3_14_SB,
+  md: theme.fontsObject.LABEL_2_16_SB,
+};
diff --git a/packages/ui/Chip/index.tsx b/packages/ui/Chip/index.tsx
new file mode 100644
index 0000000..fa00616
--- /dev/null
+++ b/packages/ui/Chip/index.tsx
@@ -0,0 +1 @@
+export { default } from './Chip';
diff --git a/packages/ui/Chip/style.css.ts b/packages/ui/Chip/style.css.ts
new file mode 100644
index 0000000..ec328f1
--- /dev/null
+++ b/packages/ui/Chip/style.css.ts
@@ -0,0 +1,41 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import { style } from '@vanilla-extract/css';
+import theme from '../theme.css';
+import { fonts, paddings } from './constants';
+
+const active = {
+  boxShadow: `0 0 0 1px ${theme.colors.gray100} inset`,
+  color: theme.colors.white,
+  backgroundColor: theme.colors.gray700,
+};
+
+export const root = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 4,
+  boxShadow: `0 0 0 1px ${theme.colors.gray700} inset`,
+  borderRadius: 9999,
+  color: theme.colors.gray300,
+  backgroundColor: theme.colors.gray800,
+  cursor: 'pointer',
+  borderStyle: 'none',
+
+  ':hover': {
+    color: theme.colors.white,
+    backgroundColor: theme.colors.gray700,
+  },
+
+  ':active': active,
+});
+
+export const activeStyle = style(active);
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    padding: paddings,
+    fontStyle: fonts,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);
diff --git a/packages/ui/Chip/types.ts b/packages/ui/Chip/types.ts
new file mode 100644
index 0000000..ef442c6
--- /dev/null
+++ b/packages/ui/Chip/types.ts
@@ -0,0 +1 @@
+export type ChipSizeTheme = 'sm' | 'md';
diff --git a/packages/ui/Control/CheckBox.tsx b/packages/ui/Control/CheckBox.tsx
new file mode 100644
index 0000000..3a2777f
--- /dev/null
+++ b/packages/ui/Control/CheckBox.tsx
@@ -0,0 +1,39 @@
+import type { InputHTMLAttributes } from "react";
+import { forwardRef } from "react";
+import { IconCheck } from "@sopt-makers/icons";
+import theme from "../theme.css";
+import {
+  check,
+  checkBox,
+  checkBoxChecked,
+  checkBoxInput,
+  controlLabel,
+  controlWrapper,
+} from "./style.css";
+
+export interface CheckBoxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  size?: "sm" | "lg";
+  checked?: boolean;
+  color?: string;
+}
+
+const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
+    return (
+      <label className={controlWrapper}>
+        <input className={checkBoxInput} ref={ref} type="checkbox" {...props} />
+        <div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
+          {checked ? <IconCheck className={check[size]} /> : null}
+        </div>
+        {label ? (
+          <p className={controlLabel[size]} style={{ color }}>{label}</p>
+        ) : null}
+      </label>
+    );
+  }
+);
+CheckBox.displayName = "CheckBox";
+
+export default CheckBox;
diff --git a/packages/ui/Control/Radio.tsx b/packages/ui/Control/Radio.tsx
new file mode 100644
index 0000000..0d21ad3
--- /dev/null
+++ b/packages/ui/Control/Radio.tsx
@@ -0,0 +1,34 @@
+import type { InputHTMLAttributes } from "react";
+import { forwardRef } from "react";
+import theme from "../theme.css";
+import { controlLabel, controlWrapper, radio } from "./style.css";
+
+export interface RadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  size?: "sm" | "lg";
+  checked?: boolean;
+  color?: string;
+}
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
+    return (
+      <label className={controlWrapper}>
+        <input
+          checked={checked}
+          className={radio[size]}
+          ref={ref}
+          type="radio"
+          {...props}
+        />
+        {label ? (
+          <p className={controlLabel[size]} style={{ color }}>label</p>
+        ) : null}
+      </label>
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+export default Radio;
diff --git a/packages/ui/Control/Toggle.tsx b/packages/ui/Control/Toggle.tsx
new file mode 100644
index 0000000..92c9b3e
--- /dev/null
+++ b/packages/ui/Control/Toggle.tsx
@@ -0,0 +1,22 @@
+import * as Switch from "@radix-ui/react-switch";
+import { toggleState, toggleThumb, toggleWrapper } from "./style.css";
+
+export interface ToggleProps {
+  size?: "sm" | "lg";
+  checked: boolean;
+}
+
+export default function Toggle({
+  size = "lg",
+  checked = true,
+  ...restProps
+}: ToggleProps) {
+  return (
+    <Switch.Root
+      className={`${toggleWrapper[size]} ${toggleState[`${checked}`]}`}
+      {...restProps}
+    >
+      <Switch.Thumb className={toggleThumb[size]} data-state={checked} />
+    </Switch.Root>
+  );
+}
diff --git a/packages/ui/Control/index.ts b/packages/ui/Control/index.ts
new file mode 100644
index 0000000..d5f61b6
--- /dev/null
+++ b/packages/ui/Control/index.ts
@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio";
+export { default as Toggle } from "./Toggle";
+export { default as CheckBox } from "./CheckBox";
diff --git a/packages/ui/Control/style.css.ts b/packages/ui/Control/style.css.ts
new file mode 100644
index 0000000..e488dad
--- /dev/null
+++ b/packages/ui/Control/style.css.ts
@@ -0,0 +1,130 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+import theme from "../theme.css";
+
+// Control 컴포넌트에서 사용되는 공통 스타일링
+export const controlWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+  width: "fit-content",
+});
+
+export const controlLabel = styleVariants({
+  sm: [
+    theme.fontsObject.BODY_3_14_R,
+    {
+      marginLeft: "6px",
+    },
+  ],
+  lg: [
+    theme.fontsObject.BODY_2_16_R,
+    {
+      marginLeft: "8px",
+    },
+  ],
+});
+
+// Radio 관련 스타일링
+const radioBase = style({
+  all: "unset",
+  borderRadius: "9999px",
+  border: `1.5px solid ${theme.colors.gray500}`,
+  boxSizing: "border-box",
+});
+
+export const radio = styleVariants({
+  sm: [
+    radioBase,
+    {
+      width: "16px",
+      height: "16px",
+      selectors: {
+        "&:checked": {
+          border: `4px solid ${theme.colors.blue400}`,
+          backgroundColor: theme.colors.white,
+        },
+      },
+    },
+  ],
+  lg: [
+    radioBase,
+    {
+      width: "22px",
+      height: "22px",
+      selectors: {
+        "&:checked": {
+          border: `6px solid ${theme.colors.blue400}`,
+          backgroundColor: theme.colors.white,
+        },
+      },
+    },
+  ],
+});
+
+// CheckBox 관련 스타일링
+const checkBoxBase = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "0.2s background-color",
+  borderRadius: "5px",
+});
+
+export const checkBox = styleVariants({
+  sm: [checkBoxBase, { width: "16px", height: "18px" }],
+  lg: [checkBoxBase, { width: "22px", height: "24px" }],
+});
+
+export const checkBoxInput = style({
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+});
+
+export const checkBoxChecked = styleVariants({
+  true: [checkBoxBase, { backgroundColor: theme.colors.blue400 }],
+  false: [checkBoxBase, { backgroundColor: theme.colors.gray500 }],
+});
+
+export const check = styleVariants({
+  sm: { width: 12, color: theme.colors.white },
+  lg: { width: 16, color: theme.colors.white },
+});
+
+// Toggle 관련 스타일링
+const toggleBase = style({
+  all: "unset",
+  display: "flex",
+  borderRadius: "9999px",
+  border: "none",
+  boxSizing: "border-box",
+});
+
+const toggleThumbBase = style({
+  display: "block",
+  borderRadius: "9999px",
+  backgroundColor: theme.colors.white,
+  filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.20))",
+});
+
+export const toggleWrapper = styleVariants({
+  lg: [toggleBase, { width: 40, height: 24, padding: 4 }],
+  sm: [toggleBase, { width: 30, height: 18, padding: 3 }],
+});
+
+export const toggleState = styleVariants({
+  true: { justifyContent: "flex-end", backgroundColor: theme.colors.blue400 },
+  false: {
+    justifyContent: "flex-start",
+    backgroundColor: theme.colors.gray400,
+  },
+});
+
+export const toggleThumb = styleVariants({
+  lg: [toggleThumbBase, { width: 16, height: 16 }],
+  sm: [toggleThumbBase, { width: 12, height: 12 }],
+});
diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
index d0bf2cb..b1b85f4 100644
--- a/packages/ui/Dialog/DialogComponent.tsx
+++ b/packages/ui/Dialog/DialogComponent.tsx
@@ -1,5 +1,5 @@
+import { CheckBox } from 'Control';
 import Button from '../Button';
-import CheckBox from '../CheckBox';
 import Dialog from './Dialog';
 import { buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css';
 import type { DialogValueProps } from './types';
diff --git a/packages/ui/Dialog/types.ts b/packages/ui/Dialog/types.ts
index 8418fd1..fea9860 100644
--- a/packages/ui/Dialog/types.ts
+++ b/packages/ui/Dialog/types.ts
@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import type React from 'react';
-import type { CheckBoxProps } from '../CheckBox';
+
+import { CheckBoxProps } from 'Control/CheckBox';
+
 
 export interface ChildrenProp {
   children: ReactNode;
diff --git a/packages/ui/Tab/Tab.tsx b/packages/ui/Tab/Tab.tsx
new file mode 100644
index 0000000..250af21
--- /dev/null
+++ b/packages/ui/Tab/Tab.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import * as S from './style.css';
+import { createTabVariant, createTabItemVariant } from './utils';
+
+export type TabStyle = 'primary' | 'secondary';
+export type TabSize = 'sm' | 'md' | 'lg';
+
+interface TabProps<T extends string> {
+  style: TabStyle;
+  size: TabSize;
+  tabItems: T[];
+  selectedInitial?: T;
+  translator?: Record<T, string>;
+  className?: string;
+  onChange: (selected: T) => void;
+}
+
+function Tab<T extends string>(props: TabProps<T>) {
+  const { style, size, tabItems, selectedInitial, translator, className, onChange } = props;
+
+  const tabVariant = createTabVariant(style);
+  const tabItemVariant = createTabItemVariant(style);
+
+  const [selected, setSelected] = useState<T>(selectedInitial ?? tabItems[0]);
+
+  const handleClickTabItem = (item: T) => {
+    setSelected(item);
+    onChange(item);
+  }
+
+  return <div className={`${S.tab} ${tabVariant} ${className}`}>
+    {tabItems.map(item => {
+      const isSelected = selected === item ? 'selected' : '';
+      return <div className={S.tabItemWrap} key={item}>
+        <button className={`${S.tabItem} ${tabItemVariant} ${isSelected} ${S.fontStyles[size]}`} onClick={() => { handleClickTabItem(item); }} type="button">
+          {translator ? translator[item] : item}
+        </button>
+        <div className={`${S.tabItemUnderline} ${isSelected}`} />
+      </div>
+    }
+    )}
+  </div>
+}
+
+export default Tab;
\ No newline at end of file
diff --git a/packages/ui/Tab/constants.ts b/packages/ui/Tab/constants.ts
new file mode 100644
index 0000000..d473b49
--- /dev/null
+++ b/packages/ui/Tab/constants.ts
@@ -0,0 +1,11 @@
+import type { TabStyle } from "./Tab";
+
+export const itemWidths: Record<TabStyle, string> = {
+  primary: "fit-content",
+  secondary: "120px",
+};
+
+export const flexGaps: Record<TabStyle, string> = {
+  primary: "16px",
+  secondary: "0",
+};
diff --git a/packages/ui/Tab/index.tsx b/packages/ui/Tab/index.tsx
new file mode 100644
index 0000000..a3a50f4
--- /dev/null
+++ b/packages/ui/Tab/index.tsx
@@ -0,0 +1 @@
+export { default } from './Tab';
\ No newline at end of file
diff --git a/packages/ui/Tab/style.css.ts b/packages/ui/Tab/style.css.ts
new file mode 100644
index 0000000..2fa79c5
--- /dev/null
+++ b/packages/ui/Tab/style.css.ts
@@ -0,0 +1,72 @@
+import { globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import theme from "../theme.css";
+import { itemWidths, flexGaps } from "./constants";
+
+export const tab = style({
+  display: "flex",
+  width: "100%",
+  overflowX: "scroll",
+
+  msOverflowStyle: "none",
+  scrollbarWidth: "none",
+  "::-webkit-scrollbar": {
+    display: "none",
+  },
+});
+
+export const tabItemWrap = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+export const tabItem = style({
+  color: theme.colors.gray600,
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+
+  ":hover": {
+    color: theme.colors.gray300,
+  },
+});
+globalStyle(`${tabItem}.selected`, {
+  color: theme.colors.white,
+  transition: "color 0.5s",
+});
+
+export const tabItemUnderline = style({
+  width: "1%",
+  height: "2px",
+  marginTop: "4px",
+  background: "none",
+});
+globalStyle(`${tabItemUnderline}.selected`, {
+  width: "100%",
+  background: theme.colors.white,
+  transition: "all 0.5s",
+});
+
+export const fontStyles = styleVariants({
+  sm: theme.fontsObject.HEADING_7_16_B,
+  md: theme.fontsObject.HEADING_5_20_B,
+  lg: theme.fontsObject.HEADING_4_24_B,
+});
+
+const tabSprinkleProperties = defineProperties({
+  properties: {
+    gap: flexGaps,
+  },
+});
+const tabItemSprinkleProperties = defineProperties({
+  properties: {
+    width: itemWidths,
+  },
+});
+
+export const tabSprinkles = createSprinkles(tabSprinkleProperties);
+export const tabItemSprinkles = createSprinkles(tabItemSprinkleProperties);
diff --git a/packages/ui/Tab/utils.ts b/packages/ui/Tab/utils.ts
new file mode 100644
index 0000000..0d949d4
--- /dev/null
+++ b/packages/ui/Tab/utils.ts
@@ -0,0 +1,12 @@
+import { tabItemSprinkles, tabSprinkles } from "./style.css";
+import type { TabStyle } from "./Tab";
+
+export const createTabVariant = (style: TabStyle) =>
+  tabSprinkles({
+    gap: style,
+  });
+
+export const createTabItemVariant = (style: TabStyle) =>
+  tabItemSprinkles({
+    width: style,
+  });
diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
new file mode 100644
index 0000000..92383ff
--- /dev/null
+++ b/packages/ui/Tag/Tag.tsx
@@ -0,0 +1,27 @@
+import * as S from "./style.css";
+import createTagStyle from "./utils";
+
+interface TagProps {
+  children?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+  shape?: "rect" | "pill";
+  variant?: "default" | "primary" | "secondary";
+  type?: "solid" | "line";
+}
+
+function Tag({
+  children,
+  size = "sm",
+  shape = "rect",
+  variant = "default",
+  type = "solid",
+}: TagProps) {
+  const style = createTagStyle(type, variant, shape, size);
+  return (
+    <div className={`${S.root} ${style}`}>
+      {children}
+    </div>
+  );
+}
+
+export default Tag;
diff --git a/packages/ui/Tag/constants.ts b/packages/ui/Tag/constants.ts
new file mode 100644
index 0000000..ff699e0
--- /dev/null
+++ b/packages/ui/Tag/constants.ts
@@ -0,0 +1,48 @@
+import theme from "../theme.css";
+import type {
+  TagBgColorTheme,
+  TagShapeTheme,
+  TagSizeTheme,
+  TagVariantTheme,
+} from "./types";
+
+export const bgColors: Record<TagBgColorTheme, string> = {
+  "default-solid": theme.colors.gray700,
+  "primary-solid": theme.colors.orangeAlpha200,
+  "secondary-solid": theme.colors.blueAlpha200,
+  "default-line": "unset",
+  "primary-line": "unset",
+  "secondary-line": "unset",
+};
+
+export const borders: Record<TagBgColorTheme, string> = {
+  "default-solid": "none",
+  "primary-solid": "none",
+  "secondary-solid": "none",
+  "default-line": `0 0 0 1px ${theme.colors.gray300} inset`,
+  "primary-line": `0 0 0 1px ${theme.colors.orange700} inset`,
+  "secondary-line": `0 0 0 1px ${theme.colors.blue700} inset`,
+};
+
+export const textColors: Record<TagVariantTheme, string> = {
+  default: theme.colors.gray10,
+  primary: theme.colors.secondary,
+  secondary: theme.colors.success,
+};
+
+export const borderRadiuses: Record<TagShapeTheme, string> = {
+  rect: "4px",
+  pill: "100px",
+};
+
+export const paddings: Record<TagSizeTheme, string> = {
+  sm: "3px 6px",
+  md: "3px 7px",
+  lg: "3px 8px",
+};
+
+export const fonts = {
+  sm: theme.fontsObject.LABEL_5_11_SB,
+  md: theme.fontsObject.LABEL_3_14_SB,
+  lg: theme.fontsObject.LABEL_2_16_SB,
+};
diff --git a/packages/ui/Tag/index.tsx b/packages/ui/Tag/index.tsx
new file mode 100644
index 0000000..21bb058
--- /dev/null
+++ b/packages/ui/Tag/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Tag";
diff --git a/packages/ui/Tag/style.css.ts b/packages/ui/Tag/style.css.ts
new file mode 100644
index 0000000..7f5969e
--- /dev/null
+++ b/packages/ui/Tag/style.css.ts
@@ -0,0 +1,31 @@
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import { style } from "@vanilla-extract/css";
+import {
+  bgColors,
+  borderRadiuses,
+  borders,
+  fonts,
+  paddings,
+  textColors,
+} from "./constants";
+
+export const root = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "fit-content",
+  height: "fit-content",
+});
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    backgroundColor: bgColors,
+    boxShadow: borders,
+    color: textColors,
+    borderRadius: borderRadiuses,
+    padding: paddings,
+    fontStyle: fonts,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);
diff --git a/packages/ui/Tag/types.ts b/packages/ui/Tag/types.ts
new file mode 100644
index 0000000..dd54cd5
--- /dev/null
+++ b/packages/ui/Tag/types.ts
@@ -0,0 +1,9 @@
+export type TagSizeTheme = "sm" | "md" | "lg";
+
+export type TagShapeTheme = "rect" | "pill";
+
+export type TagVariantTheme = "default" | "primary" | "secondary";
+
+export type TagTypeTheme = "solid" | "line";
+
+export type TagBgColorTheme = `${TagVariantTheme}-${TagTypeTheme}`;
diff --git a/packages/ui/Tag/utils.ts b/packages/ui/Tag/utils.ts
new file mode 100644
index 0000000..cfa73e4
--- /dev/null
+++ b/packages/ui/Tag/utils.ts
@@ -0,0 +1,24 @@
+import type {
+  TagShapeTheme,
+  TagSizeTheme,
+  TagTypeTheme,
+  TagVariantTheme,
+} from "./types";
+import { sprinkles } from "./style.css";
+
+function createTagStyle(
+  typeTheme: TagTypeTheme,
+  variantTheme: TagVariantTheme,
+  shapeTheme: TagShapeTheme,
+  sizeTheme: TagSizeTheme
+) {
+  return sprinkles({
+    backgroundColor: `${variantTheme}-${typeTheme}`,
+    boxShadow: `${variantTheme}-${typeTheme}`,
+    color: variantTheme,
+    borderRadius: shapeTheme,
+    padding: sizeTheme,
+    fontStyle: sizeTheme,
+  });
+}
+export default createTagStyle;
diff --git a/packages/ui/Toast/parts/style.css.ts b/packages/ui/Toast/parts/style.css.ts
index ad0ac99..d710ba0 100644
--- a/packages/ui/Toast/parts/style.css.ts
+++ b/packages/ui/Toast/parts/style.css.ts
@@ -7,7 +7,7 @@ const toastAnimation = keyframes({
 });
 
 export const root = style({
-  animation: `${toastAnimation} 4s`,
+  animation: `${toastAnimation} 3s`,
   animationFillMode: "forwards",
 
   display: "flex",
@@ -19,7 +19,7 @@ export const root = style({
   left: "calc(50% - 16px)",
   transform: "translateX(-50%)",
   transition: "transform .2s linear",
-  
+
   width: "var(--mds-toast-width, 380px)",
   margin: "0 16px",
   padding: "14px 16px",
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 9c0674f..c039bff 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,13 +1,17 @@
-export * from "./cssVariables";
+export * from './cssVariables';
 
 // component exports
-export { default as Button } from "./Button";
-export { default as CheckBox } from "./CheckBox";
-export { Dialog, DialogContext, DialogProvider, useDialog } from "./Dialog";
-export type { DialogOptionType } from "./Dialog";
-export { ToastProvider, useToast, Toast } from "./Toast";
-export type { ToastOptionType } from "./Toast";
+export { default as Button } from './Button';
+export { CheckBox, Toggle, Radio } from "./Control";
+export { Dialog, DialogContext, DialogProvider, useDialog } from './Dialog';
+export type { DialogOptionType } from './Dialog';
+export { ToastProvider, useToast, Toast } from './Toast';
+export type { ToastOptionType } from './Toast';
 export { TextField, TextArea, SearchField, Select, UserMention } from "./Input";
+export { default as Tag } from "./Tag";
+export { default as Chip } from './Chip';
+export { default as Callout } from "./Callout";
+export { default as Tab } from "./Tab";
 
 // test component
-export { default as Test } from "./Test";
+export { default as Test } from './Test';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e160a1e..3d2f962 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-switch": "^1.0.3",
     "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.3",
diff --git a/yarn.lock b/yarn.lock
index 32b013f..a82aa01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2188,6 +2188,20 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-switch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
+  integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-toggle-group@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"