diff --git a/.github/AUTO_ASSIGN_CONFIG.yml b/.github/AUTO_ASSIGN_CONFIG.yml
new file mode 100644
index 0000000..18dd9ec
--- /dev/null
+++ b/.github/AUTO_ASSIGN_CONFIG.yml
@@ -0,0 +1,8 @@
+addAssignees: author
+addReviewers: true
+
+numberOfReviewers: 0
+reviewers:
+  - Legitgoons
+  - BangDori
+  - suhwan2004
diff --git a/.github/workflows/pr-auto-assign.yml b/.github/workflows/pr-auto-assign.yml
new file mode 100644
index 0000000..cd24254
--- /dev/null
+++ b/.github/workflows/pr-auto-assign.yml
@@ -0,0 +1,17 @@
+name: pr-auto-assign
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  add-reviewers-and-assignee:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: kentaro-m/auto-assign-action@v2.0.0
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          configuration-path: '.github/AUTO_ASSIGN_CONFIG.yml'
diff --git a/app/page.tsx b/app/page.tsx
index 60a2477..046a7d3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,39 @@
 export default function Home() {
-  return <div className=" text-h1b">Hello World</div>;
+  return (
+    <div className="flex flex-row justify-center gap-12 bg-[#666666]">
+      <div className="w-72">
+        <p className="bg-white text-black">White</p>
+        <p className="bg-gray01 text-black">Gray 01</p>
+        <p className="bg-gray02 text-black">Gray 02</p>
+        <p className="bg-gray03 text-black">Gray 03</p>
+        <p className="bg-gray04 text-black">Gray 04</p>
+        <p className="bg-gray05 text-black">Gray 05</p>
+        <p className="bg-gray06 text-black">Gray 06</p>
+        <p className="bg-gray07 text-white">Gray 07</p>
+      </div>
+
+      <div className="w-72">
+        <p className="bg-red01 text-black">Red 01</p>
+        <p className="bg-red02 text-black">Red 02</p>
+        <p className="bg-red03 text-black">Red 03</p>
+
+        <div className="h-6" />
+
+        <p className="bg-yellow01 text-black">Yellow 01</p>
+        <p className="bg-yellow02 text-black">Yellow 02</p>
+      </div>
+
+      <div className="w-72">
+        <p className="bg-ashblue01 text-black">Ashblue 01</p>
+        <p className="bg-ashblue02 text-black">Ashblue 02</p>
+        <p className="bg-overlay text-white">Overlay</p>
+
+        <div className="h-6" />
+
+        <p className="bg-mint01 text-black">Mint 01</p>
+        <p className="bg-mint02 text-black">Mint 02</p>
+        <p className="bg-mint03 text-black">Mint 03</p>
+      </div>
+    </div>
+  );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 71814f5..14f5e87 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,6 +21,33 @@ const config: Config = {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+
+        white: '#ffffff',
+        black: '#000000',
+
+        gray01: '#f7f8f9',
+        gray02: '#f0f2f4',
+        gray03: '#dde0e5',
+        gray04: '#b3b9c4',
+        gray05: '#8691a2',
+        gray06: '#383e4a',
+        gray07: '#161a1d',
+
+        red01: '#fff1f1',
+        red02: '#ff9999',
+        red03: '#ff6767',
+
+        yellow01: '#fffedc',
+        yellow02: '#ffbd3b',
+
+        ashblue01: '#e7fcff',
+        ashblue02: '#d5f0f4',
+
+        mint01: '#d9f9fb',
+        mint02: '#9deff6',
+        mint03: '#00d5e1',
+
+        overlay: 'rgba(0, 0, 0, 0.3)',
       },
       fontFamily: {
         sans: ['Pretendard', 'sans-serif'],