diff --git a/README.md b/README.md
index 77a7894..bd265cf 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,43 @@
 ## Studay
-### 학원으로 바쁜 내 아이!
 
-그동안 엑셀로 아이 교육비 가계부를 관리했나요?</br>
-주변 학원 조회 데이터를 가져와서 내 아이 스케줄을 만들고 `한 달 교육비를 미리 예상`할 수 있어요
+![image](https://github.com/Guzzing/Studay_Server/assets/108210958/db0e5fdb-0f2b-47e3-85c9-ca8f6e4bb675)
 
-차곡차곡 쌓여진 교육비 데이터를 통해   `교육비 추이`를 쉽게 파악할 수 있도록 통계 자료도 제공합니다!
+# 프로젝트 기획 배경
 
-우리 아이에게  최고의 학원 선택을 할 수 있도록 이 학원 저 학원을 비교해본 경험이 있나요?
+퇴근하기 전까지 아이를 돌봐줄 학원을 알아보기 위해 고군분투하는 맞벌이 부부의 모습을 보고 만들게 되었습니다.
+손쉽게 학원 정보를 얻고 내 아이 학원 스케줄을 관리하도록 도와줍니다.
+<br />
+
+## 제공하는 기능
+
+![image](https://github.com/Guzzing/Studay_Server/assets/108210958/d795e4b3-2ae8-42fd-92b3-f08cdae60040)
+
+[🔗 UI & 기획 보러가기](https://docs.google.com/presentation/d/1hJgL1egziuzGhJqr2-rU9AKTz00zuXmgqWG40X9fCyA)
+
+- 카카오 로그인
+- 내 주변 학원 지도 제공
+    - 위치에 따른 학원 검색
+    - 학원 수업(이름, 수업명, 비용), 리뷰, 전화번호 등의 상세보기
+    - 학원비용, 학원 과목, 위치에 따른 필터 검색
+    - 학원 이름 검색
+    - 학원 찜하기를 통한 학원비 장바구니 기능(예상 한달 교육비를 알려줍니다.)
+- 아이 일정 제공
+    - 현재 시각의 아이 스케줄 정보 제공
+    - 달력을 통한 아이별 학원 스케줄
+- 학원 정보 요약 정보 제공
+    - 아이가 다니는 학원 정보 목록 제공
+    - 학원 재료비, 수업비, 납부 일자 등록 기능 제공
+      <br />
+
+# 운영중인 사이트
+
+https://www.studay.me/
 
-다른 학부모가 작성한 태그 학원 리뷰를 통해서 학원에 대한 정보를 확인할 수 있어요.
+# 프로젝트의 주요 관심사
 
-스터데이를 **통해서 여러 개의 가안을 만들어 보며 `최적의 선택`에 도움을 줄 수 있을 거예요.**
+- 실제 서비스 가능한 완성도로 서버-클라이언트 구현(API, UI, 통신 규약, 기능성)
+- 제 3자가 자신의 코드를 리팩토링 할 수 있다는 생각을 갖고 작성하는 확장, 유지보수하기 좋은 코드
+- QA와 사용자 인터뷰를 통한 사용자 친화적인 서비스 만들기
 
 ## 🛠 기술스택
 
@@ -83,7 +110,9 @@
 | <img width="120" height="120" src="https://avatars.githubusercontent.com/u/106604926?v=4" /> |             <img width="120" height="120" src="https://avatars.githubusercontent.com/u/67894159?v=4" />             |<img width="120" height="120" src="https://avatars.githubusercontent.com/u/85999976?v=4" /> |
 |                            [김희석](https://github.com/HeeSeok-kim)                             |                                         [김유진](https://github.com/eugene028)                                         |                             [김지성](https://github.com/jisung24)                             |
 
+## 시연영상
 
+https://github.com/Guzzing/Studay_Server/assets/108210958/72281f97-5a5a-497e-bf8f-d5437e63a422
 
 ## ☘ environment variables
 
@@ -108,4 +137,3 @@ npm run build //빌드
 npm run mobild //모바일 환경에서 확인
 ```
 
-## 
diff --git a/src/components/common/badge/Badge.stories.tsx b/src/components/common/badge/Badge.stories.tsx
new file mode 100644
index 0000000..2e2d755
--- /dev/null
+++ b/src/components/common/badge/Badge.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Badge from './Badge'
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  tags: ['autodocs'],
+  title: 'components/Badge',
+  argTypes: {
+    value: {
+      control: 'text'
+    },
+    isSelected: {
+      control: 'select',
+      options: [true, false]
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  render: (args) => <Badge value={args.value} isSelected={args.isSelected} />
+}
diff --git a/src/components/common/badge/Badge.tsx b/src/components/common/badge/Badge.tsx
new file mode 100644
index 0000000..55e09f9
--- /dev/null
+++ b/src/components/common/badge/Badge.tsx
@@ -0,0 +1,16 @@
+interface BadgeProps {
+  value: string
+  isSelected: boolean
+}
+const Badge = ({ value, isSelected }: BadgeProps) => {
+  return (
+    <div
+      className={`rounded-[100px] flex justify-center items-center w-full h-full px-[8px] py-[4px] ${
+        isSelected ? 'bg-green-5 text-green-50' : 'bg-gray-5 text-gray-50'
+      } `}>
+      {value}
+    </div>
+  )
+}
+
+export default Badge
diff --git a/tailwind.config.js b/tailwind.config.js
index 9743862..efaae3e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,6 +47,16 @@ export default {
         r200: 'rgba(244,244,244,1)'
       },
       gray: {
+        5: '#F2F2F2',
+        10: '#E4E4E4',
+        20: '#D4D3D3',
+        30: '#C7C7C7',
+        40: '#ABABAB',
+        50: '#919191',
+        60: '#777777',
+        70: '#5F5F5F',
+        80: '#333333',
+        90: '#1C1C1C',
         100: '#D9D9D9',
         200: '#CACACA',
         300: '#B2b9C1',
@@ -75,6 +85,18 @@ export default {
         r400: 'rgba(255,94,94,1)',
         r500: 'rgba(252,76,78,1)',
         r600: 'rgba(255,0,0,1)'
+      },
+      green: {
+        5: '#E2FDF3',
+        10: '#1AFFA8',
+        20: '#00F598',
+        30: '#00F598',
+        40: '#00E58E',
+        50: '#00D282',
+        60: '#00C278',
+        70: '#00AD6B',
+        80: '#00995F',
+        90: '#00804F'
       }
     },
     extend: {
@@ -83,5 +105,5 @@ export default {
       }
     }
   },
-  plugins: [require("tailwind-scrollbar-hide")]
+  plugins: [require('tailwind-scrollbar-hide')]
 }