diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..726b928
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+*   @DaleStudy/dale-ui
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 0000000..f12b17b
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,19 @@
+name: "Chromatic 🎨"
+
+on: push
+
+jobs:
+  chromatic:
+    environment:
+      name: chromatic
+      url: https://${{ github.ref_name }}--675790d317ba346348aa3490.chromatic.com
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install
+      - uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/README.md b/README.md
index 74872fd..1b1986d 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +1,8 @@
-# React + TypeScript + Vite
+[![Chromatic 🎨](https://github.com/DaleStudy/dale-ui/actions/workflows/chromatic.yml/badge.svg)](https://github.com/DaleStudy/dale-ui/actions/workflows/chromatic.yml)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# 달레 UI
 
-Currently, two official plugins are available:
+🎨 달레 스터디의 디자인 시스템
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+- [스토리북](https://main--675790d317ba346348aa3490.chromatic.com)
+- [위키](https://github.com/DaleStudy/dale-ui/wiki)
diff --git a/bun.lockb b/bun.lockb
index a07346f..0e04fc6 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 0434e71..a173521 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "chromatic": "^11.20.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
deleted file mode 100644
index 7bd29f1..0000000
--- a/src/components/Button/Button.css
+++ /dev/null
@@ -1,41 +0,0 @@
-button {
-  --button-color: #ffffff;
-  --button-bg-color: #0d6efd;
-  --button-hover-bg-color: #025ce2;
-
-  appearance: none;
-
-  margin: 0;
-  padding: 0.5rem 1rem;
-
-  background: var(--button-bg-color);
-  color: var(--button-color);
-
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: center;
-  text-decoration: none;
-
-  display: inline-block;
-  width: auto;
-
-  border: none;
-  border-radius: 4px;
-
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  cursor: pointer;
-  transition: 0.5s;
-
-  width: 100%;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background: var(--button-hover-bg-color);
-    outline: 0;
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}