diff --git a/src/App.css b/src/App.css
index e69de29..2a0d5c0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,62 @@
+* {
+  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 ********************************************/
+
+/* 음식점 목록 *****************************************/
+
+/* 카테고리/정렬 필터 */
+
+/* 음식점 목록 */
+
+/* 음식점 정보/추가 모달 *****************************************/
diff --git a/src/App.jsx b/src/App.jsx
index 0f5bcc1..b3dd4b1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,26 @@
 import "./App.css";
+import AddRestaurantModal from "./components/AddRestaurantModal";
+import CategoryFilter from "./components/CategoryFilter";
+import Header from "./components/Header";
+import RestaurantList from "./components/RestaurantList";
+import RestaurantName from "./components/RestaurantName";
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  return (
+    <div>
+      <Header />
+
+      <main>
+        <CategoryFilter />
+        <RestaurantList />
+      </main>
+
+      <aside>
+        <RestaurantName />
+        <AddRestaurantModal />
+      </aside>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/assets/App.css b/src/assets/App.css
new file mode 100644
index 0000000..2a0d5c0
--- /dev/null
+++ b/src/assets/App.css
@@ -0,0 +1,62 @@
+* {
+  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 ********************************************/
+
+/* 음식점 목록 *****************************************/
+
+/* 카테고리/정렬 필터 */
+
+/* 음식점 목록 */
+
+/* 음식점 정보/추가 모달 *****************************************/
diff --git a/src/components/AddRestaurantModal.jsx b/src/components/AddRestaurantModal.jsx
new file mode 100644
index 0000000..f876f72
--- /dev/null
+++ b/src/components/AddRestaurantModal.jsx
@@ -0,0 +1,54 @@
+import "./../css/AddRestaurant.css";
+
+const AddRestaurantModal = () => {
+  return (
+    <>
+      <div className="modal ">
+        <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 htmlFor="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 htmlFor="name text-caption">이름</label>
+              <input type="text" name="name" id="name" required />
+            </div>
+
+            <div className="form-item">
+              <label htmlFor="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>
+    </>
+  );
+};
+
+export default AddRestaurantModal;
diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
new file mode 100644
index 0000000..a3901f3
--- /dev/null
+++ b/src/components/CategoryFilter.jsx
@@ -0,0 +1,26 @@
+import "./../css/CategoryFilter.module.css";
+
+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..394d3c0
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,21 @@
+import "./../css/Header.css";
+
+const Header = () => {
+  return (
+    <>
+      <header className="gnb">
+        <h1 className="gnb__title">점심 뭐 먹지</h1>
+        <button type="button" className="gnb__button" aria-label="음식점 추가">
+          <img
+            className="gnb__button 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..21cb5cd
--- /dev/null
+++ b/src/components/RestaurantList.jsx
@@ -0,0 +1,121 @@
+import "./../css/RestaurantList.css";
+
+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="중식"
+                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="./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="아시안"
+                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-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;
diff --git a/src/components/RestaurantName.jsx b/src/components/RestaurantName.jsx
new file mode 100644
index 0000000..45aea42
--- /dev/null
+++ b/src/components/RestaurantName.jsx
@@ -0,0 +1,27 @@
+import "./../css/AddRestaurant.css";
+
+const RestaurantName = () => {
+  return (
+    <>
+      <div className="modal">
+        <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>
+    </>
+  );
+};
+
+export default RestaurantName;
diff --git a/src/css/AddRestaurant.css b/src/css/AddRestaurant.css
new file mode 100644
index 0000000..a7e0aab
--- /dev/null
+++ b/src/css/AddRestaurant.css
@@ -0,0 +1,125 @@
+.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/css/CategoryFilter.module.css b/src/css/CategoryFilter.module.css
new file mode 100644
index 0000000..4c3ac4d
--- /dev/null
+++ b/src/css/CategoryFilter.module.css
@@ -0,0 +1,22 @@
+.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;
+}
diff --git a/src/css/Header.css b/src/css/Header.css
new file mode 100644
index 0000000..32df2e1
--- /dev/null
+++ b/src/css/Header.css
@@ -0,0 +1,32 @@
+.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;
+}
diff --git a/src/css/RestaurantList.css b/src/css/RestaurantList.css
new file mode 100644
index 0000000..296f812
--- /dev/null
+++ b/src/css/RestaurantList.css
@@ -0,0 +1,61 @@
+.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;
+}