diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..3a2021c21
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,28 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb-base",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2015,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off",
+    "no-plusplus": "off",
+    "class-methods-use-this": "off",
+    "radix": "off",
+    "no-restricted-properties": "off",
+    "max-depth" : ["error", 2],
+    "no-return-assign" : "off",
+    "no-continue" : "off",
+    "no-param-reassign" : "off",
+    "import/extensions" : "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..ae7194bd3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.ieda
+.DS_Store
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..13a6d0595
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "arrowParens": "always"
+}
diff --git a/README.md b/README.md
index e97a1d649..a7a818659 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,38 @@
 # 🚇 지하철 노선도 미션
+지하철 역을 추가 및 삭제하고, 생성된 노선에 역을 추가하고 삭제할 수 있는 프로그램이다.
 
-## 🚀 기능 요구사항
+## 🚀 기능 구현 목록
+1. 사용자는 버튼 4개(역 관리, 노선 관리, 구간 관리, 지하철 노선도 출력)를 선택할 수 있다.
 
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+2. 사용자는 역을 등록할 수 있다.
+    - [예외처리] 2글자 이상의 이름인지 검증해야 한다.
+    - [예외처리] 중복된 이름이 있는지 검증해야 한다.
+3. 사용자는 역을 삭제할 수 있다.
+    - [예외처리] 노선에 있는지 검증하고, 노선에 있다면 삭제할 수 없다.
+4. 사용자 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
-
-<img width="500" src="/images/section1.png">
-
-### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
-
-<img width="500" src="/images/section2.png">
+5. 사용자는 지하철 노선을 등록할 수 있다.
+    - [조건] 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+    - [예외처리] 중복된 노선 이름이 있는지 검증해야 한다.
+    - [예외처리] ~선 형태의 이름인지 검증해야 한다.
+    - [예외처리] 시작 종점과 하행 종점이 같은 노선은 등록할 수 없다.
+    - [예외처리] 상행 종점과 하행 종점이 동일한 기존의 노선이 있는지 검증해야 한다.
+    - [예외처리] 노선 이름은 무조건 입력해야 한다.
+6. 사용자는 지하철 노선을 삭제할 수 있다.
+7. 사용자는 지하철 노선의 목록을 조회할 수 있다.
+
+### 지하철 구간 관련 기능
+8. 사용자는 노선에 역을 추가할 수 있다.
+    - [예외처리] 중복된 역이 있는지 검증해야 한다.
+    - [조건] 하나의 역은 여러개의 노선에 추가될 수 있다.
+    - [조건] 역과 역 사이에 새로운 역이 추가 될 수 있다.
+    - [조건] 노선에서 갈래길은 생길 수 없다.
+9. 사용자는 노선의 역을 삭제할 수 있다.
+    - [예외처리] 노선에 역이 2개 이하인지 검증하고, 2개 이하면 삭제할 수 없다.
+    - [조건] 종점을 제거할 경우 다음 역이 종점이 된다.
+10. 사용자는 노선 별로 역의 목록을 볼 수 있다.
 
 ### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
-
-<br/>
-
-## 💻 프로그램 실행 결과
-
-### 역관리
-<img width="100%" src="/images/station_manager.gif">
-
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
-
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
-
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
-
-
-## ✅ 프로그래밍 요구사항
-
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
-
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
-
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
-- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
-- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
-- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
-
-### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
-
-### 기존 요구사항
-
-- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
-- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
-- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
-  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
-  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
-  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
-  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
-- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
-  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
-- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
-  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
-  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
-- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
-- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
-
-### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
-- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
-
-<br/>
-
-## 📝 미션 저장소 및 진행 요구사항
-
-- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
-- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
-- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
-- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+11. 사용자 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 전체 노선과 역 목록을 조회할 수 있다.
diff --git a/index.html b/index.html
index fc99deac2..b0d5daab9 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,52 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <style>
+      p {
+        font-size: 1.2rem;
+        margin-bottom: 0;
+      }
+
+      a {
+        text-decoration: none;
+        color: black;
+      }
+
+      button {
+        margin-left : 0.2rem;
+      }
+
+      li {
+        margin-left : 1rem;
+      }
+
+      .select-line-points {
+        margin: 1rem 0;
+      }
+
+      #section-selector-container{
+        margin-bottom: 2rem;
+      }
+    </style>
   </head>
   <body>
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
+      <nav class="menu-buttons">
+        <button id="station-manager-button">
+          <a href="#station-manager">역 관리</a>
+        </button>
+        <button id="line-manager-button">
+          <a href="#line-manager">노선 관리</a>
+        </button>
+        <button id="section-manager-button">
+          <a href="#section-manage">구간 관리</a>
+        </button>
+        <button id="map-print-manager-button">
+          <a href="#map-print">지하철 노선도 출력</a>
+        </button>
+      </nav>
+      <main class="content-container"></main>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/components/template/lineManagerTemplate.js b/src/components/template/lineManagerTemplate.js
new file mode 100644
index 000000000..815ac02d3
--- /dev/null
+++ b/src/components/template/lineManagerTemplate.js
@@ -0,0 +1,57 @@
+import stationStorage from '../../storage/stationStorage.js';
+
+const LINE_MANAGER_PAGE_TEMPLATE = `<section class="line-registration">
+    <p><strong>노선 이름</strong></p>
+    <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요">
+    <div class="select-line-points">
+      <label for="line-start-station-selector">상행 종점</label>
+      <select name="start-station" id="line-start-station-selector">
+      </select>
+      <br />
+      <label for="line-end-station-selector">하행 종점</label>
+      <select name="end-station" id="line-end-station-selector">
+      </select>
+    </div>
+    <button id="line-add-button">노선 추가</button>
+  </section>
+  <section class="line-table">
+    <table border="1">
+      <h2>🚉 지하철 노선 목록</h2>
+      <thead>
+        <tr>
+          <th>노선 이름</th>
+          <th>상행 종점역</th>
+          <th>하행 종점역</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      <tbody class="line-table-tbody"></tbody>
+    </table>
+  </section>`;
+
+const ALL_STATION_OPTION_LIST = (stations) => {
+  return stations
+    .map(
+      (station) =>
+        `<option id=${station.id} value=${station.name} data-station=${station}>${station.name}</option>`
+    )
+    .join('');
+};
+
+const LINE_TABLE_TEMPLATE = (line) => {
+  const lastStationId = line.stationIds[line.stationIds.length - 1];
+  const firstStationId = line.stationIds[0];
+
+  return `<tr id=${line.id}>
+    <td data-name=${line.name}>${line.name}</td>
+    <td data-name=${stationStorage().getStationById(firstStationId).name}>${
+    stationStorage().getStationById(firstStationId).name
+  }</td>
+    <td data-name=${stationStorage().getStationById(lastStationId).name}>${
+    stationStorage().getStationById(lastStationId).name
+  }</td>
+    <td><button class="line-delete-button">삭제</button></td>
+    </tr>`;
+};
+
+export { LINE_MANAGER_PAGE_TEMPLATE, ALL_STATION_OPTION_LIST, LINE_TABLE_TEMPLATE };
diff --git a/src/components/template/mapPrintManagerTemplate.js b/src/components/template/mapPrintManagerTemplate.js
new file mode 100644
index 000000000..b96ac3494
--- /dev/null
+++ b/src/components/template/mapPrintManagerTemplate.js
@@ -0,0 +1,24 @@
+import stationStorage from '../../storage/stationStorage.js';
+import lineStorage from '../../storage/lineStorage.js';
+
+const STATION_LIST_TEMPLATE = (stationId) => {
+  const station = stationStorage().getStationById(stationId);
+  return `<li data-stationId=${station.id}>${station.name}</li>`;
+};
+
+const MAP_MANAGER_PAGE_TEMPLATE = () => {
+  const lines = lineStorage().getLines();
+  return `<div class="map">
+  ${lines
+    .map(
+      (line) =>
+        `<article><h3>${line.name}</h3>
+           <ui data-lineId=${line.id}>${line.stationIds
+          .map(STATION_LIST_TEMPLATE)
+          .join('')}</ui></article>`
+    )
+    .join('')}
+  </div>`;
+};
+
+export default MAP_MANAGER_PAGE_TEMPLATE;
diff --git a/src/components/template/sectionManagerTemplate.js b/src/components/template/sectionManagerTemplate.js
new file mode 100644
index 000000000..7a5123daf
--- /dev/null
+++ b/src/components/template/sectionManagerTemplate.js
@@ -0,0 +1,52 @@
+import stationStorage from '../../storage/stationStorage.js';
+
+const SECTION_MANAGER_PAGE_MENU_TEMPLATE = `<section class="section-buttons-container">
+    <h3>구간을 수정할 노선을 선택해주세요</h3>
+    <nav class="line-buttons"></nav>
+  </section>
+  <section id="section-selector-container"></section>
+  <section id="section-table"></section>`;
+
+const SECTION_LINE_MENU_BTN = (line) => {
+  return `<button class="section-line-menu-button" data-lineId=${line.id}>${line.name}</button>`;
+};
+
+const SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE = `<h3 id="line-title"></h3>
+  <h4>구간 등록</h4>
+  <select name="start-station" id="section-station-selector"></select>
+  <input type="number" id="section-order-input" placeholder="순서">
+  <button id="section-add-button">등록</button>`;
+
+const SECTION_MANAGER_PAGE_TABLE_TEMPLATE = `<table border="1">
+      <thead>
+        <tr>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+    <tbody class="section-table-tbody"></tbody>
+  </table>`;
+
+const SECTION_TABLE_TEMPLATE = ({ id, stationIds }) => {
+  const stations = stationIds.map(stationStorage().getStationById);
+
+  return stations
+    .map(
+      (station, index) =>
+        `<tr id=${id}>
+           <td data-currentIndex=${index}>${index}</td>
+           <td data-name=${station.name}>${station.name}</td>
+           <td><button class="section-delete-button" data-stationId=${station.id}>노선에서 제거</button></td>
+       </tr>`
+    )
+    .join('');
+};
+
+export {
+  SECTION_MANAGER_PAGE_MENU_TEMPLATE,
+  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
+  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
+  SECTION_LINE_MENU_BTN,
+  SECTION_TABLE_TEMPLATE,
+};
diff --git a/src/components/template/stationManagerTemplate.js b/src/components/template/stationManagerTemplate.js
new file mode 100644
index 000000000..209f21d6b
--- /dev/null
+++ b/src/components/template/stationManagerTemplate.js
@@ -0,0 +1,24 @@
+const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
+  <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요.">
+  <button id="station-add-button">역 추가</button>
+  <div class="all-station-table">
+    <table border="1">
+    <h2>🚉 지하철 역 목록</h2>
+    <thead>
+      <tr>
+        <th>역 이름</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody class="station_manager_tbody"></tbody>
+    </table>
+  </div>`;
+
+const STATION_TABLE_TEMPLATE = (station) => {
+  return `<tr id=${station.id} data-lines=${station.line}>
+    <td data-name=${station.name}>${station.name}</td>
+    <td><button class="station-delete-button">삭제</button></td>
+    </tr>`;
+};
+
+export { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE };
diff --git a/src/components/views/SectionManagerPages/sectionManagerPage.js b/src/components/views/SectionManagerPages/sectionManagerPage.js
new file mode 100644
index 000000000..d5f0cb7a1
--- /dev/null
+++ b/src/components/views/SectionManagerPages/sectionManagerPage.js
@@ -0,0 +1,26 @@
+import {
+  SECTION_MANAGER_PAGE_MENU_TEMPLATE,
+  SECTION_LINE_MENU_BTN,
+} from '../../template/sectionManagerTemplate.js';
+import lineStorage from '../../../storage/lineStorage.js';
+import singleSectionManager from './singleSectionManager.js';
+
+export default function sectionManagerPage($element) {
+  const lines = lineStorage().getLines();
+
+  $element.innerHTML = SECTION_MANAGER_PAGE_MENU_TEMPLATE;
+  const $listMenuBtn = $element.querySelector('.line-buttons');
+  $listMenuBtn.innerHTML = lines.map(SECTION_LINE_MENU_BTN).join('');
+  const $sectionSelectorContainer = $element.querySelector('#section-selector-container');
+  const $sectionTable = $element.querySelector('#section-table');
+
+  const onMenuFilterHandler = (e) => {
+    if (!e.target.classList.contains('section-line-menu-button')) {
+      return;
+    }
+    const currentLine = lineStorage().getOneLine(e.target.dataset.lineid);
+    singleSectionManager($sectionSelectorContainer, $sectionTable, currentLine);
+  };
+
+  $listMenuBtn.addEventListener('click', onMenuFilterHandler);
+}
diff --git a/src/components/views/SectionManagerPages/singleSectionManager.js b/src/components/views/SectionManagerPages/singleSectionManager.js
new file mode 100644
index 000000000..c6af11abe
--- /dev/null
+++ b/src/components/views/SectionManagerPages/singleSectionManager.js
@@ -0,0 +1,115 @@
+import {
+  sectionIndexValidator,
+  sectionStationNameValidator,
+  sectionDeleteValidator,
+} from '../../../utils/validator/sectionValidator.js';
+import {
+  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
+  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
+  SECTION_TABLE_TEMPLATE,
+} from '../../template/sectionManagerTemplate.js';
+import { ALL_STATION_OPTION_LIST } from '../../template/lineManagerTemplate.js';
+import stationStorage from '../../../storage/stationStorage.js';
+import lineStorage from '../../../storage/lineStorage.js';
+
+export default function singleSectionManager($container, $table, line) {
+  const stations = stationStorage().getStations();
+  const lines = lineStorage().getLines();
+
+  $container.innerHTML = SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE;
+  const $lineTitle = $container.querySelector('#line-title');
+  $lineTitle.innerText = `${line.name} 관리`;
+
+  const $sectionSelector = $container.querySelector('#section-station-selector');
+  $sectionSelector.innerHTML = ALL_STATION_OPTION_LIST(stations);
+
+  $table.innerHTML = SECTION_MANAGER_PAGE_TABLE_TEMPLATE;
+  const $sectionTableBody = $table.querySelector('.section-table-tbody');
+  $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(line);
+
+  const $userSectionIndexInput = $container.querySelector('#section-order-input');
+  const $userSelectStationBtn = $container.querySelector('#section-station-selector');
+  const $userSectionSubmitBtn = $container.querySelector('#section-add-button');
+
+  const renderSection = (newLine) => {
+    $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(newLine);
+  };
+
+  const getStationById = (stationIds) => {
+    return stations.filter((station) => station.id === stationIds)[0];
+  };
+
+  const removeStationInLine = (stationId) => {
+    const deleteIndex = line.stationIds.findIndex((id) => id === stationId);
+    line.stationIds.splice(deleteIndex, 1);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].id === line.id) {
+        lines[i] = line;
+      }
+    }
+    lineStorage().setLine(lines);
+    return line;
+  };
+
+  const removeLineInStation = (stationId, lineId) => {
+    const station = getStationById(stationId);
+    const deleteIndex = station.line.findIndex((lineNum) => lineNum === lineId);
+    station.line.splice(deleteIndex, 1);
+    stationStorage().setStation(stations);
+  };
+
+  const removeStationInSection = (stationId, lineId) => {
+    removeLineInStation(stationId, lineId);
+    renderSection(removeStationInLine(stationId));
+  };
+
+  const onRemoveSubmitHandler = (e) => {
+    const stationId = parseInt(e.target.dataset.stationid);
+    const lineId = parseInt(e.target.closest('tr').id); // line.id
+    if (Number.isNaN(stationId)) {
+      return;
+    }
+
+    if (sectionDeleteValidator(lineId) && confirm('정말로 노선에서 삭제하시겠습니까?')) {
+      removeStationInSection(stationId, lineId);
+    }
+  };
+
+  const updateLineState = (stationId, stationIndex) => {
+    line.stationIds.splice(stationIndex, 0, stationId);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].id === line.id) {
+        lines[i] = line;
+      }
+    }
+    lineStorage().setLine(lines);
+    return line;
+  };
+
+  const updateStationState = (stationId) => {
+    getStationById(stationId).line.push(line.id);
+    stationStorage().setStation(stations);
+  };
+
+  const updateSection = (stationName, stationIndex) => {
+    const stationId = stationStorage().getStationIdByName(stationName);
+    updateStationState(stationId);
+    renderSection(updateLineState(stationId, stationIndex));
+  };
+
+  const onSectionSubmitHandler = () => {
+    const userSelectStationName = $userSelectStationBtn.value;
+    const userSectionIndex = parseInt($userSectionIndexInput.value);
+
+    if (
+      sectionStationNameValidator(line, stations, userSelectStationName) &&
+      sectionIndexValidator(line.stationIds.length, userSectionIndex)
+    ) {
+      updateSection(userSelectStationName, userSectionIndex);
+    }
+    $userSectionIndexInput.value = '';
+  };
+
+  $userSectionSubmitBtn.addEventListener('click', onSectionSubmitHandler);
+  $sectionTableBody.addEventListener('click', onRemoveSubmitHandler);
+}
diff --git a/src/components/views/lineManagerPage.js b/src/components/views/lineManagerPage.js
new file mode 100644
index 000000000..6eea2a0fb
--- /dev/null
+++ b/src/components/views/lineManagerPage.js
@@ -0,0 +1,109 @@
+import {
+  LINE_MANAGER_PAGE_TEMPLATE,
+  ALL_STATION_OPTION_LIST,
+  LINE_TABLE_TEMPLATE,
+} from '../template/lineManagerTemplate.js';
+import { lineNameValidator, lineStationsValidator } from '../../utils/validator/lineValidator.js';
+import stationStorage from '../../storage/stationStorage.js';
+import lineStorage from '../../storage/lineStorage.js';
+import Line from '../../utils/Line.js';
+
+export default function stationManagerPage($element) {
+  $element.innerHTML = LINE_MANAGER_PAGE_TEMPLATE;
+  const $userInputLine = $element.querySelector('#line-name-input');
+  const $startStation = $element.querySelector('#line-start-station-selector');
+  const $endStation = $element.querySelector('#line-end-station-selector');
+  const $userLineSubmitBtn = $element.querySelector('#line-add-button');
+  const $lineTableBody = $element.querySelector('.line-table-tbody');
+
+  const stations = stationStorage().getStations();
+  let lines = lineStorage().getLines();
+
+  $startStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
+  $endStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
+
+  const renderLines = () => {
+    $lineTableBody.innerHTML = lines.map(LINE_TABLE_TEMPLATE).join('');
+  };
+
+  const getNewId = () => {
+    if (!lines || lines.length === 0) {
+      return 0;
+    }
+    return lines[lines.length - 1].id + 1;
+  };
+
+  const getStationById = (stationIds) => {
+    return stations.filter((station) => station.id === stationIds)[0];
+  };
+
+  const removeLineInStation = (currentLineId) => {
+    const stationsInLine = lines
+      .filter((line) => line.id === parseInt(currentLineId))[0]
+      .stationIds.map(getStationById);
+
+    for (let i = 0; i < stationsInLine.length; i++) {
+      const deleteIndex = stationsInLine[i].line.indexOf(parseInt(currentLineId));
+      stationsInLine[i].line.splice(deleteIndex, 1);
+    }
+    stationStorage().setStation(stations);
+  };
+
+  const removeLine = (currentLineId) => {
+    removeLineInStation(currentLineId);
+    lines = lines.filter((line) => line.id !== parseInt(currentLineId));
+    lineStorage().setLine(lines);
+    renderLines();
+  };
+
+  const onLineDeleteHandler = (e) => {
+    if (!e.target.classList.contains('line-delete-button')) {
+      return;
+    }
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      removeLine(e.target.closest('tr').id);
+    }
+  };
+
+  const addLine = (newLine) => {
+    lines.push(newLine);
+    lineStorage().setLine(lines);
+    renderLines();
+  };
+
+  const getStation = (stationName) => {
+    return stations.filter((station) => station.name === stationName)[0];
+  };
+
+  const addLineInStation = (lineId, stationName) => {
+    getStation(stationName).line.push(lineId);
+    stationStorage().setStation(stations);
+  };
+
+  const createLine = (newLineName, startStationName, endStationName) => {
+    const newLine = new Line(getNewId(), newLineName);
+    newLine.setLine(stationStorage().getStationIdByName(startStationName), 0);
+    newLine.setLine(stationStorage().getStationIdByName(endStationName), 1);
+
+    addLineInStation(newLine.id, startStationName);
+    addLineInStation(newLine.id, endStationName);
+    addLine(newLine);
+  };
+
+  const onLineSubmitHandler = () => {
+    const newLineName = $userInputLine.value;
+
+    if (
+      lineNameValidator(lines, newLineName) &&
+      lineStationsValidator($startStation.value, $endStation.value)
+    ) {
+      createLine(newLineName, $startStation.value, $endStation.value);
+    }
+
+    $userInputLine.value = '';
+  };
+
+  $userLineSubmitBtn.addEventListener('click', onLineSubmitHandler);
+  $lineTableBody.addEventListener('click', onLineDeleteHandler);
+  renderLines();
+}
diff --git a/src/components/views/mapPrintManagerPage.js b/src/components/views/mapPrintManagerPage.js
new file mode 100644
index 000000000..71938c49e
--- /dev/null
+++ b/src/components/views/mapPrintManagerPage.js
@@ -0,0 +1,5 @@
+import MAP_MANAGER_PAGE_TEMPLATE from '../template/mapPrintManagerTemplate.js';
+
+export default function mapPrintManagerPage($element) {
+  $element.innerHTML = MAP_MANAGER_PAGE_TEMPLATE();
+}
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
new file mode 100644
index 000000000..17762faac
--- /dev/null
+++ b/src/components/views/stationManagerPage.js
@@ -0,0 +1,70 @@
+import {
+  STATION_MANAGER_PAGE_TEMPLATE,
+  STATION_TABLE_TEMPLATE,
+} from '../template/stationManagerTemplate.js';
+import {
+  stationNameValidator,
+  stationDeleteValidation,
+} from '../../utils/validator/stationValidator.js';
+import stationStorage from '../../storage/stationStorage.js';
+import Station from '../../utils/Station.js';
+
+export default function stationManagerPage($element) {
+  $element.innerHTML = STATION_MANAGER_PAGE_TEMPLATE;
+  const $userStationInput = $element.querySelector('#station-name-input');
+  const $userStationSubmit = $element.querySelector('#station-add-button');
+  const $stationTableBody = $element.querySelector('.station_manager_tbody');
+
+  let stations = stationStorage().getStations();
+
+  const renderStationTable = () => {
+    $stationTableBody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
+  };
+
+  const deleteStation = (stationTag) => {
+    if (!stationDeleteValidation(stationTag)) {
+      return;
+    }
+    stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
+    stationStorage().setStation(stations);
+    renderStationTable();
+  };
+
+  const onStationDeleteHandler = (e) => {
+    if (!e.target.classList.contains('station-delete-button')) {
+      return false;
+    }
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      deleteStation(e.target.closest('tr'));
+    }
+  };
+
+  const addStations = (newStations) => {
+    stations.push(newStations);
+    stationStorage().setStation(stations);
+    renderStationTable();
+  };
+
+  const getNewId = () => {
+    if (!stations || stations.length === 0) {
+      return 0;
+    }
+    return stations[stations.length - 1].id + 1;
+  };
+
+  const createStation = (newStationName) => {
+    addStations(new Station(getNewId(), newStationName));
+  };
+
+  const onStationSubmitHandler = () => {
+    const newStationName = $userStationInput.value;
+    if (stationNameValidator(stations, newStationName)) {
+      createStation(newStationName);
+    }
+    $userStationInput.value = '';
+  };
+
+  $userStationSubmit.addEventListener('click', onStationSubmitHandler);
+  $stationTableBody.addEventListener('click', onStationDeleteHandler);
+  renderStationTable();
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..646aeb386 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import subwayMapApp from './subwayMapApp.js';
+
+const $app = document.querySelector('#app');
+subwayMapApp($app);
diff --git a/src/storage/lineStorage.js b/src/storage/lineStorage.js
new file mode 100644
index 000000000..4d9fcdbec
--- /dev/null
+++ b/src/storage/lineStorage.js
@@ -0,0 +1,35 @@
+import { LINE_STORAGE_NAME } from '../utils/constant.js';
+
+export default function lineStorage() {
+  const getLines = () => {
+    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
+      return [];
+    }
+    const storedItems = localStorage.getItem(LINE_STORAGE_NAME);
+    return JSON.parse(storedItems);
+  };
+
+  const setLine = (line) => {
+    localStorage.setItem(LINE_STORAGE_NAME, JSON.stringify(line));
+  };
+
+  const getStartPointsId = () => {
+    return getLines().map((line) => line.stationIds[0]);
+  };
+
+  const getEndPointsId = () => {
+    return getLines().map((line) => line.stationIds[line.stationIds.length - 1]);
+  };
+
+  const getOneLine = (lineId) => {
+    return getLines().filter((line) => line.id === parseInt(lineId))[0];
+  };
+
+  return {
+    getLines,
+    setLine,
+    getStartPointsId,
+    getEndPointsId,
+    getOneLine,
+  };
+}
diff --git a/src/storage/stationStorage.js b/src/storage/stationStorage.js
new file mode 100644
index 000000000..e6b1b9891
--- /dev/null
+++ b/src/storage/stationStorage.js
@@ -0,0 +1,30 @@
+import { STATION_STORAGE_NAME } from '../utils/constant.js';
+
+export default function stationStorage() {
+  const getStations = () => {
+    if (!localStorage.getItem(STATION_STORAGE_NAME)) {
+      return [];
+    }
+    const storedItems = localStorage.getItem(STATION_STORAGE_NAME);
+    return JSON.parse(storedItems);
+  };
+
+  const setStation = (station) => {
+    localStorage.setItem(STATION_STORAGE_NAME, JSON.stringify(station));
+  };
+
+  const getStationIdByName = (stationName) => {
+    return getStations().filter((station) => station.name === stationName)[0].id;
+  };
+
+  const getStationById = (stationId) => {
+    return getStations().filter((station) => station.id === stationId)[0];
+  };
+
+  return {
+    getStations,
+    setStation,
+    getStationIdByName,
+    getStationById,
+  };
+}
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
new file mode 100644
index 000000000..31c00ff79
--- /dev/null
+++ b/src/subwayMapApp.js
@@ -0,0 +1,21 @@
+import stationManagerPage from './components/views/stationManagerPage.js';
+import lineManagerPage from './components/views/lineManagerPage.js';
+import sectionManagerPage from './components/views/SectionManagerPages/sectionManagerPage.js';
+import mapPrintManagerPage from './components/views/mapPrintManagerPage.js';
+
+export default function subwayMapApp($element) {
+  const init = () => {
+    const $stationManagerBtn = $element.querySelector('#station-manager-button');
+    const $lineManagerBtn = $element.querySelector('#line-manager-button');
+    const $sectionManagerBtn = $element.querySelector('#section-manager-button');
+    const $mapPrintManagerBtn = $element.querySelector('#map-print-manager-button');
+    const $contentSection = $element.querySelector('.content-container');
+
+    $stationManagerBtn.addEventListener('click', () => stationManagerPage($contentSection));
+    $lineManagerBtn.addEventListener('click', () => lineManagerPage($contentSection));
+    $sectionManagerBtn.addEventListener('click', () => sectionManagerPage($contentSection));
+    $mapPrintManagerBtn.addEventListener('click', () => mapPrintManagerPage($contentSection));
+  };
+
+  init();
+}
diff --git a/src/utils/Line.js b/src/utils/Line.js
new file mode 100644
index 000000000..c82eb4369
--- /dev/null
+++ b/src/utils/Line.js
@@ -0,0 +1,12 @@
+export default function Line(id, name) {
+  this.id = id;
+  this.name = name;
+  this.stationIds = [];
+
+  this.setLine = (stationId, index) => {
+    if (this.stationIds.includes(stationId)) {
+      alert('이미 등록되어 있습니다');
+    }
+    this.stationIds.splice(index, 0, stationId);
+  };
+}
diff --git a/src/utils/Station.js b/src/utils/Station.js
new file mode 100644
index 000000000..07c1baf13
--- /dev/null
+++ b/src/utils/Station.js
@@ -0,0 +1,5 @@
+export default function Station(id, name) {
+  this.id = id;
+  this.name = name;
+  this.line = [];
+}
diff --git a/src/utils/constant.js b/src/utils/constant.js
new file mode 100644
index 000000000..98c0788fe
--- /dev/null
+++ b/src/utils/constant.js
@@ -0,0 +1,6 @@
+const STATION_STORAGE_NAME = 'STATIONS';
+const LINE_STORAGE_NAME = 'LINES';
+const NAME_MIN_LENGTH = 2;
+const SECTION_MIN_LENGTH = 2;
+
+export { STATION_STORAGE_NAME, LINE_STORAGE_NAME, NAME_MIN_LENGTH, SECTION_MIN_LENGTH };
diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
new file mode 100644
index 000000000..bc338d0bd
--- /dev/null
+++ b/src/utils/validator/lineValidator.js
@@ -0,0 +1,64 @@
+import lineStorage from '../../storage/lineStorage.js';
+import stationStorage from '../../storage/stationStorage.js';
+
+const isEqualName = (lines, lineName) => {
+  return lines.some((line) => line.name === lineName) ? alert('중복된 노선 이름입니다.') : true;
+};
+
+const isNameNotNull = (lineName) => {
+  return !lineName ? alert('노선 이름을 입력해주세요') : true;
+};
+
+const isCorrectName = (lineName) => {
+  return lineName.split('')[lineName.length - 1] !== '선'
+    ? alert("노선의 이름은 '선'으로 끝나야 합니다")
+    : true;
+};
+
+const isEqualPoints = (startStationName, endStationName) => {
+  return startStationName === endStationName
+    ? alert('상행 종점과 하행 종점은 서로 달라야 합니다')
+    : true;
+};
+
+const getStartStationIds = (stationName) => {
+  return lineStorage()
+    .getStartPointsId()
+    .map((stationId) => stationId === parseInt(stationStorage().getStationIdByName(stationName)));
+};
+
+const getEndStationIds = (stationName) => {
+  return lineStorage()
+    .getEndPointsId()
+    .map((stationId) => stationId === parseInt(stationStorage().getStationIdByName(stationName)));
+};
+
+const isEqualLine = (startStationName, endStationName) => {
+  const startStationIds = getStartStationIds(startStationName);
+  const endStationIds = getEndStationIds(endStationName);
+
+  const equalLine = startStationIds.filter((station, index) => station && endStationIds[index]);
+  return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
+};
+
+const isEqualReverseLine = (startStationName, endStationName) => {
+  const startStationIds = getStartStationIds(endStationName);
+  const endStationIds = getEndStationIds(startStationName);
+
+  const equalLine = startStationIds.filter((station, index) => station && endStationIds[index]);
+  return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
+};
+
+function lineNameValidator(lines, lineName) {
+  return isEqualName(lines, lineName) && isNameNotNull(lineName) && isCorrectName(lineName);
+}
+
+function lineStationsValidator(startStationName, endStationName) {
+  return (
+    isEqualPoints(startStationName, endStationName) &&
+    isEqualLine(startStationName, endStationName) &&
+    isEqualReverseLine(startStationName, endStationName)
+  );
+}
+
+export { lineNameValidator, lineStationsValidator };
diff --git a/src/utils/validator/sectionValidator.js b/src/utils/validator/sectionValidator.js
new file mode 100644
index 000000000..d5438036d
--- /dev/null
+++ b/src/utils/validator/sectionValidator.js
@@ -0,0 +1,45 @@
+import lineStorage from '../../storage/lineStorage.js';
+import { SECTION_MIN_LENGTH } from '../constant.js';
+
+const isNumber = (sectionIndex) => {
+  return Number.isNaN(sectionIndex) ? alert('정확한 숫자를 입력해주세요') : true;
+};
+
+const isPositiveNumber = (sectionIndex) => {
+  return sectionIndex >= 0 ? true : alert('음수가 아닌 0 이상의 숫자를 입력해주세요');
+};
+
+const isCorrectIndex = (sectionLength, sectionIndex) => {
+  return sectionIndex <= sectionLength ? true : alert('입력한 순서를 확인해주세요');
+};
+
+const isLengthLongerThanTwo = (lineId) => {
+  const stationLength = lineStorage().getOneLine(lineId).stationIds.length;
+  return stationLength <= SECTION_MIN_LENGTH
+    ? alert('노선은 최소 2개의 역으로 이루어져 있습니다.')
+    : true;
+};
+
+const isNotRegistered = (id, stations, stationName) => {
+  return stations.filter((station) => station.name === stationName)[0].line.includes(id)
+    ? alert('이미 등록된 역입니다')
+    : true;
+};
+
+function sectionStationNameValidator({ id }, stations, stationName) {
+  return isNotRegistered(id, stations, stationName);
+}
+
+function sectionIndexValidator(sectionLength, sectionIndex) {
+  return (
+    isNumber(sectionIndex) &&
+    isPositiveNumber(sectionIndex) &&
+    isCorrectIndex(sectionLength, sectionIndex)
+  );
+}
+
+function sectionDeleteValidator(lineId) {
+  return isLengthLongerThanTwo(lineId);
+}
+
+export { sectionStationNameValidator, sectionIndexValidator, sectionDeleteValidator };
diff --git a/src/utils/validator/stationValidator.js b/src/utils/validator/stationValidator.js
new file mode 100644
index 000000000..12f8763b8
--- /dev/null
+++ b/src/utils/validator/stationValidator.js
@@ -0,0 +1,27 @@
+import { NAME_MIN_LENGTH } from '../constant.js';
+
+const isNameLengthLongerThanTwo = (stationName) => {
+  return stationName.length < NAME_MIN_LENGTH ? alert('이름은 두글자 이상입니다') : true;
+};
+
+const isEqualName = (stations, stationName) => {
+  return stations && stations.map((value) => value.name).includes(stationName)
+    ? alert('중복된 이름입니다.')
+    : true;
+};
+
+const isIncludedLine = (stationTag) => {
+  return stationTag.dataset.lines.length !== 0
+    ? alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다')
+    : true;
+};
+
+function stationNameValidator(stations, stationName) {
+  return isNameLengthLongerThanTwo(stationName) && isEqualName(stations, stationName);
+}
+
+function stationDeleteValidation(stationTag) {
+  return isIncludedLine(stationTag);
+}
+
+export { stationNameValidator, stationDeleteValidation };