diff --git a/01-first-component/README.md b/01-first-component/README.md
index 72b1469..fdc0cba 100644
--- a/01-first-component/README.md
+++ b/01-first-component/README.md
@@ -1,14 +1,17 @@
 # 01. 컴포넌트 선언하고 사용하기: Component 기본 구조와 JSX
 
 ## 🎯 요구 사항
-- `/templates` 에 있는 html 템플릿을 그대로 `App.jsx`에서 그릴 수 있게 해보세요. 
-- `App.jsx`를 여러 개의 컴포넌트로 분리해서 그려보세요.  
+
+- `/templates` 에 있는 html 템플릿을 그대로 `App.jsx`에서 그릴 수 있게 해보세요.
+- `App.jsx`를 여러 개의 컴포넌트로 분리해서 그려보세요.
   - 스타일도 별도의 css파일로 분리하여 각 컴포넌트에서 import합니다.
   - (선택) `module.css` 를 사용해 보세요.
 
 ### 구현 결과 예시
-- 예를 들어, `App.jsx`의 return문을 아래와 같이 작성했을 때에 앱이 정상적으로 그려지도록 구현해 주세요. 
-- 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다    
+
+- 예를 들어, `App.jsx`의 return문을 아래와 같이 작성했을 때에 앱이 정상적으로 그려지도록 구현해 주세요.
+- 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다
+
 ```javascript
 function App() {
   return (
@@ -28,6 +31,7 @@ function App() {
 ```
 
 ## ✅ 키워드
+
 - JSX
   - `class` -> `className`
   - `for` -> `htmlFor`
@@ -39,8 +43,10 @@ function App() {
   - export / import
 
 ## 🧙‍♀️ 진행 가이드
-- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다. 
+
+- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다.
 
 ## 🔗 참고 문서
+
 - [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step1-2 에 있는 것처럼 나만의 컴포넌트 단위를 나누어 보세요.
 - [Your First Component](https://react.dev/learn/your-first-component)
diff --git a/src/App.css b/src/App.css
index e69de29..6a3b09b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,302 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+html,
+body {
+  font-family: sans-serif;
+  font-size: 16px;
+}
+
+/* Colors *****************************************/
+:root {
+  --primary-color: #ec4a0a;
+  --lighten-color: #f6a88a;
+  --grey-100: #ffffff;
+  --grey-200: #d0d5dd;
+  --grey-300: #667085;
+  --grey-400: #344054;
+  --grey-500: #000000;
+}
+
+/* Typography *************************************/
+.text-title {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.text-subtitle {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+}
+
+.text-body {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.text-caption {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+/* Header ********************************************/
+.gnb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 64px;
+
+  padding: 0 16px;
+
+  background-color: var(--primary-color);
+}
+
+.gnb__title {
+  color: #fcfcfd;
+}
+
+.gnb__button {
+  height: 40px;
+
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.gnb__button img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+/* 음식점 목록 *****************************************/
+
+/* 카테고리/정렬 필터 */
+.restaurant-filter-container {
+  display: flex;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  margin-top: 24px;
+}
+
+.restaurant-filter-container select {
+  height: 44px;
+  min-width: 125px;
+
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background: transparent;
+
+  font-size: 16px;
+}
+
+.restaurant-filter {
+  padding: 8px;
+}
+
+/* 음식점 목록 */
+.restaurant-list-container {
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 16px;
+  margin: 16px 0;
+}
+
+.restaurant {
+  display: flex;
+  align-items: flex-start;
+
+  padding: 16px 8px;
+
+  border-bottom: 1px solid #e9eaed;
+}
+
+.restaurant__category {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
+
+  margin-right: 16px;
+
+  border-radius: 50%;
+  background: var(--lighten-color);
+}
+
+.category-icon {
+  width: 36px;
+  height: 36px;
+}
+
+.restaurant__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.restaurant__name {
+  margin: 0;
+}
+
+.restaurant__distance {
+  color: var(--primary-color);
+}
+
+.restaurant__description {
+  display: -webkit-box;
+
+  padding-top: 8px;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 음식점 정보/추가 모달 *****************************************/
+.modal {
+  display: none;
+}
+
+.modal--open {
+  display: block;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.modal-container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  padding: 32px 16px;
+
+  border-radius: 8px 8px 0px 0px;
+  background: var(--grey-100);
+}
+
+.modal-title {
+  margin-bottom: 36px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+
+  margin-bottom: 36px;
+}
+
+.form-item label {
+  color: var(--grey-400);
+  font-size: 14px;
+}
+
+.form-item--required label::after {
+  padding-left: 4px;
+
+  color: var(--primary-color);
+  content: "*";
+}
+
+.form-item .help-text {
+  color: var(--grey-300);
+}
+
+.form-item input,
+.form-item textarea,
+.form-item select {
+  padding: 8px;
+  margin: 6px 0;
+
+  border: 1px solid var(--grey-200);
+  border-radius: 8px;
+
+  font-size: 16px;
+}
+
+.form-item textarea {
+  resize: none;
+}
+
+.form-item select {
+  height: 44px;
+
+  padding: 8px;
+
+  border: 1px solid var(--grey-200);
+  border-radius: 8px;
+
+  color: var(--grey-300);
+}
+
+input[name="name"],
+input[name="link"] {
+  height: 44px;
+}
+
+.button-container {
+  display: flex;
+}
+
+.button {
+  width: 100%;
+  height: 44px;
+
+  margin-right: 16px;
+
+  border: none;
+  border-radius: 8px;
+
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.button:last-child {
+  margin-right: 0;
+}
+
+.button--secondary {
+  border: 1px solid var(--grey-300);
+  background: transparent;
+
+  color: var(--grey-300);
+}
+
+.button--primary {
+  background: var(--primary-color);
+
+  color: var(--grey-100);
+}
+
+.restaurant-info {
+  margin-bottom: 24px;
+}
diff --git a/src/App.jsx b/src/App.jsx
index 0f5bcc1..792ea82 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,84 @@
 import "./App.css";
+import CategoryFilter from "./components/CategoryFilter";
+import RestaurantList from "./components/RestaurantList";
+import Header from "./components/Header";
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  return (
+    <div>
+      <Header />
+
+      <main>
+        <CategoryFilter />
+        <RestaurantList />
+      </main>
+
+      {/* <aside>
+        //remove it
+        <div className="modal modal--open">
+          <div className="modal-backdrop"></div>
+          <div className="modal-container">
+            <h2 className="modal-title text-title">음식점 이름</h2>
+            <div className="restaurant-info">
+              <p className="restaurant-info__description text-body">
+                음식점 소개 문구
+              </p>
+            </div>
+            <div className="button-container">
+              <button className="button button--primary text-caption">
+                닫기
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="modal modal--open">
+          <div className="modal-backdrop"></div>
+          <div className="modal-container">
+            <h2 className="modal-title text-title">새로운 음식점</h2>
+            <form>
+              <div className="form-item form-item--required">
+                <label for="category text-caption">카테고리</label>
+                <select name="category" id="category" required>
+                  <option value="">선택해 주세요</option>
+                  <option value="한식">한식</option>
+                  <option value="중식">중식</option>
+                  <option value="일식">일식</option>
+                  <option value="양식">양식</option>
+                  <option value="아시안">아시안</option>
+                  <option value="기타">기타</option>
+                </select>
+              </div>
+
+              <div className="form-item form-item--required">
+                <label for="name text-caption">이름</label>
+                <input type="text" name="name" id="name" required />
+              </div>
+
+              <div className="form-item">
+                <label for="description text-caption">설명</label>
+                <textarea
+                  name="description"
+                  id="description"
+                  cols="30"
+                  rows="5"
+                ></textarea>
+                <span className="help-text text-caption">
+                  메뉴 등 추가 정보를 입력해 주세요.
+                </span>
+              </div>
+
+              <div className="button-container">
+                <button className="button button--primary text-caption">
+                  추가하기
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </aside> */}
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
new file mode 100644
index 0000000..d1cfb2e
--- /dev/null
+++ b/src/components/CategoryFilter.jsx
@@ -0,0 +1,22 @@
+const CategoryFilter = () => {
+  return (
+    <section className="restaurant-filter-container">
+      <select
+        name="category"
+        id="category-filter"
+        className="restaurant-filter"
+        aria-label="음식점 카테고리 필터"
+      >
+        <option value="전체">전체</option>
+        <option value="한식">한식</option>
+        <option value="중식">중식</option>
+        <option value="일식">일식</option>
+        <option value="양식">양식</option>
+        <option value="아시안">아시안</option>
+        <option value="기타">기타</option>
+      </select>
+    </section>
+  );
+};
+
+export default CategoryFilter;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..02c6e21
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,12 @@
+const Header = () => {
+  return (
+    <header class="gnb">
+      <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
+      <button type="button" class="gnb__button" aria-label="음식점 추가">
+        <img src="./add-button.png" alt="음식점 추가" />
+      </button>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/RestaurantList.jsx b/src/components/RestaurantList.jsx
new file mode 100644
index 0000000..fb19a46
--- /dev/null
+++ b/src/components/RestaurantList.jsx
@@ -0,0 +1,112 @@
+const RestaurantList = () => {
+  return (
+    <section className="restaurant-list-container">
+      <ul className="restaurant-list">
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img
+              src="./category-korean.png"
+              alt="한식"
+              className="category-icon"
+            />
+          </div>
+          <div className="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">피양콩할마니</h3>
+            <p className="restaurant__description text-body">
+              평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니.
+              두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도
+              사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로
+              직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을
+              선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날
+              방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수
+              있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수
+              있게 준비돼 있다.
+            </p>
+          </div>
+        </li>
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img
+              src="./category-chinese.png"
+              alt="중식"
+              class="category-icon"
+            />
+          </div>
+          <div class="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">친친</h3>
+            <p className="restaurant__description text-body">
+              Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로
+              정통 중식의 세계를 펼쳐갑니다
+            </p>
+          </div>
+        </li>
+
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img
+              src="./category-japanese.png"
+              alt="일식"
+              className="category-icon"
+            />
+          </div>
+          <div className="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">잇쇼우</h3>
+            <p className="restaurant__description text-body">
+              잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을
+              이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객
+              한분 한분께 최선을 다하겠습니다
+            </p>
+          </div>
+        </li>
+
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img
+              src="./category-western.png"
+              alt="양식"
+              className="category-icon"
+            />
+          </div>
+          <div className="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">이태리키친</h3>
+            <p className="restaurant__description text-body">
+              늘 변화를 추구하는 이태리키친입니다.
+            </p>
+          </div>
+        </li>
+
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img
+              src="./category-asian.png"
+              alt="아시안"
+              class="category-icon"
+            />
+          </div>
+          <div className="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">호아빈 삼성점</h3>
+            <p className="restaurant__description text-body">
+              푸짐한 양에 국물이 일품인 쌀국수
+            </p>
+          </div>
+        </li>
+
+        <li className="restaurant">
+          <div className="restaurant__category">
+            <img src="./category-etc.png" alt="기타" class="category-icon" />
+          </div>
+          <div className="restaurant__info">
+            <h3 className="restaurant__name text-subtitle">
+              도스타코스 선릉점
+            </h3>
+            <p className="restaurant__description text-body">
+              멕시칸 캐주얼 그릴
+            </p>
+          </div>
+        </li>
+      </ul>
+    </section>
+  );
+};
+
+export default RestaurantList;