diff --git a/src/App.css b/src/App.css
index e69de29..e380619 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;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 0f5bcc1..dbaba06 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,18 @@
 import "./App.css";
+import Header from "./components/header";
+import CategoryFilter from "./components/CategoryFilter";
+import RestaurantList from "./components/RestaurantList";
+
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  return <div>
+  <Header />
+
+  <main>
+    <CategoryFilter />
+    <RestaurantList />
+  </main>
+  </div>;
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
new file mode 100644
index 0000000..7fb7ff1
--- /dev/null
+++ b/src/components/CategoryFilter.jsx
@@ -0,0 +1,17 @@
+function 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;
\ No newline at end of file
diff --git a/src/components/RestaurantList.jsx b/src/components/RestaurantList.jsx
new file mode 100644
index 0000000..61a31a3
--- /dev/null
+++ b/src/components/RestaurantList.jsx
@@ -0,0 +1,112 @@
+function RestaurantList(){
+  return (
+    <section className="restaurant-list-container">
+    <ul className="restaurant-list">
+      <li className="restaurant">
+        <div className="restaurant__category">
+          <img
+            src="./templates/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="./templates/category-chinese.png"
+              alt="중식"
+              className="category-icon"
+              />
+          </div>
+          <div className="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="./templates/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="./templates/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=".\templates\category-asian.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="./templates/category-etc.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>
+      </ul>
+      </section>
+  );
+}
+
+export default RestaurantList;
\ No newline at end of file
diff --git a/src/components/header.jsx b/src/components/header.jsx
new file mode 100644
index 0000000..74a5b73
--- /dev/null
+++ b/src/components/header.jsx
@@ -0,0 +1,14 @@
+function Header(){
+  return (
+    <div>
+    <header className="gnb">
+    <h1 className="gnb__title text-title">점심 뭐 먹지</h1>
+    <button type="button" className="gnb__button" aria-label="음식점 추가">
+      <img src="./templates/add-button.png" alt="음식점 추가" />
+    </button>
+  </header>
+  </div>
+  );
+}
+
+export default Header;
\ No newline at end of file