diff --git a/README.md b/README.md
index e97a1d649..46040b0eb 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,153 @@
 # 🚇 지하철 노선도 미션
 
+## 🚦 디렉토리 구조
+```
+├── LICENSE
+├── README.md
+├── images
+│   ├── line_manager.gif
+│   ├── map_print_manager.gif
+│   ├── section1.png
+│   ├── section2.png
+│   ├── section_manager.gif
+│   └── station_manager.gif
+├── index.html
+└── src
+    ├── config.js
+    ├── core
+    │   └── Component.js
+    ├── index.js
+    ├── pages
+    │   ├── LineManager.js
+    │   ├── PrintSubwayLine.js
+    │   ├── SectionManager.js
+    │   └── StationManager.js
+    └── utils
+        ├── errors.js
+        ├── events.js
+        └── reRenderPage.js
+```
+- config: 전체 페이지에 필요한 태그를 따로 관리하기 위해 설정 파일로 분리
+- core: 상태로 HTML을 렌더링하기 위해 사용되는 메서드들을 컴포넌트 클래스를 사용하여 정의
+- pages: 각각의 화면들을 한 폴더에서 관리하기 위해 pages 폴더에 분리
+- utils: 에러메시지, 이벤트, 페이지를 다시 그려주는 함수를 utils 폴더에 분리
+
+<br/>
+
 ## 🚀 기능 요구사항
 
-### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+### 1. 역 관리 페이지
 
-### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+#### 1) 역의 이름 유효성 검사
+
+- 중복된 역의 이름을 등록할 수 없다.
+- 역의 이름은 2글자 이상으로 한다.
+- 역의 이름에 공백이 들어갈 수 없다.
+- 역의 이름은 한글로만 작성 가능하다.
+- 역의 이름이 올바르지 않을 시, `alert` 메시지를 출력한다.
+
+#### 2) 지하철 역 목록 관리
+
+- 역 관리 버튼 클릭 시, 역 관리 페이지를 출력한다.
+- 역 추가 버튼 클릭 시, 역을 추가한다.
+- 역 삭제 버튼 클릭 시, 역을 삭제한다.
+- 역의 추가와 삭제 시, 역의 목록을 출력한다.
+- 역 관리가 끝난 역의 목록을 로컬스토리지에 저장한다.
+
+### 2. 노선 관리 페이지
+
+#### 1) 노선의 이름 유효성 검사
+
+- 중복된 노선의 이름을 등록할 수 없다.
+- 노선의 이름에 공백이 들어갈 수 없다.
+- 노선의 이름이 올바르지 않을 시, `alert` 메시지를 출력한다.
+
+#### 2) 지하철 노선 목록 관리
+
+- 노선 관리 버튼 클릭 시, 노선 관리 페이지를 출력한다.
+- 노선 추가 버튼 클릭 시, 노선을 추가한다.
+- 삭제 버튼 클릭 시, 노선을 삭제한다.
+- 노선 추가와 삭제 시, 노선 목록을 출력하고 로컬스토리지에 노선 목록을 저장한다.
+
+### 3. 구간 관리 페이지
+
+#### 1) 노선 선택
+
+- 로컬스토리지에서 노선을 받아와 노선 메뉴 버튼을 생성한다.
+- 각 노선의 버튼을 클릭 시, 해당 노선의 정보를 출력한다.
+
+#### 2) 지하철 구간 목록 관리
 
-### 지하철 구간 추가 기능
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+- 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
+- 추가될 역의 이름과 순서를 입력 받는다.
+- 등록 버튼 클릭 시, 노선에 역을 추가한다.
+- 노선에서 제거 버튼 클릭 시, 노선에 역을 제거한다.
+- 노선의 등록과 제거 시, 구간 목록을 출력하고 로컬스토리지에 노선 목록을 저장한다.
+- 종점 제거 시 다음 역이 종점이 된다.
+- 노선에 포함된 역이 2개 이하일 때, 역을 제거할 수 없다.
+- 추가할 역의 순서를 입력하지 않으면 `alert` 메시지를 출력한다.
 
-<img width="500" src="/images/section1.png">
+### 4. 지하철 노선도 출력
 
-### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+- 로컬스토리지에 저장된 노선도를 화면에 출력한다.
+
+<br/>
 
-<img width="500" src="/images/section2.png">
+## 🥊 미흡했던 점 & 고생했던 점
 
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+- [data]: 현재 구조에서 어떻게 [data]속성을 사용해야 할지 파악을 하지 못했습니다.
+- 새로운 구조로 코딩을 하다 보니 막히는 부분이 많았고, 그로 인해 시간에 쫓겨 더 많은 예외사항에 대한 고민이 부족했습니다.
+- 상태가 변할 때 마다 전체 화면을 렌더링하는 구조로 코딩을 하여, 변화하지 않는 부분도 다시 그려야 했습니다.
+- 각 페이지마다 하나의 클래스 안에 많은 메서드가 존재하여 읽기 불편하다고 생각이 들었습니다.
+- eslint와 prettier의 셋팅을 에디터에서만 설정하고, 파일로 볼 수 있도록 하지 못한 점이 아쉽습니다.
+- 더 효율적인 코드를 작성하지 못하고, 단순히 15라인을 넘지 않기 위해 억지로 분리한 듯한 부분이 있어 아쉽습니다.
+- 어떠한 이유로 에러메시지가 화면에 뜬 건지 상황마다 더 명확하게 설명을 하지 못했습니다. 다른 분의 pr을 보고 try catch문을 사용하면 더 명확하게 설명을 할 수 있다는 것을 배울 수 있었습니다.
+- map으로 화면을 그릴 때, 화면에 계속 의도치 않은 텍스트가 발생하여 원인을 찾는데 꽤 오래 걸렸습니다. 결과적으로 배열인데 `join` 을 사용하지 않아 발생한 문제였습니다.
+- 템플릿 리터럴을 사용해 일일히 화면을 그리다 보니 태그들을 작성하는데 헷갈리는 부분이 많아 고생했습니다. 확장도구를 이용하여 더 편하게 할 수 있다는 것을 나중에 알게 되었습니다.
+- 어떤 값을 상수로 관리해야 하는 지 판단하는 것이 어려웠습니다. 함수안에서만 사용하고 의미가 명확해 보이는 값들도 상수 처리 해야 하는 지 의문이 들었습니다. 
+- 상행종점과 하행종점의 값을 저장할 때 하나의 배열에 저장하지 않고 따로 저장했습니다. 그로 인해 구간에서 목록을 추가하고 삭제할 때, 데이터 변경하는 부분이 너무 어려웠습니다. 결국 다시 돌아가 두 값들을 하나의 배열로 관리하도록 수정하였고, 문제를 해결할 수 있었습니다.
 
 <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">
 
+<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값을 가진다.
@@ -71,6 +155,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +163,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,7 +187,8 @@
   - [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 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+
+- [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/>
diff --git a/index.html b/index.html
index fc99deac2..f2318dd3c 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,29 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <style>
+      table {
+        border-collapse: collapse;
+      }
+      td {
+        padding: 2px;
+        border: 3px double black;
+      }
+  
+      thead {
+        font-weight: bold;
+      }
+    </style>
   </head>
   <body>
+    <div>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <button id="station-manager-button">1. 역 관리</button>
+      <button id="line-manager-button">2. 노선 관리</button>
+      <button id="section-manager-button">3. 구간 관리</button>
+      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>
+    </div>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 000000000..aeb4b6135
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,23 @@
+import LineManager from "./pages/lineManager.js";
+import PrintSubwayLine from "./pages/PrintSubwayLine.js";
+import SectionManager from "./pages/SectionManager.js";
+import StationManager from "./pages/StationManager.js";
+
+export const elementMap = [
+  {
+    page: StationManager,
+    button: document.getElementById("station-manager-button"),
+  },
+  {
+    page: LineManager,
+    button: document.getElementById("line-manager-button"),
+  },
+  {
+    page: SectionManager,
+    button: document.getElementById("section-manager-button"),
+  },
+  {
+    page: PrintSubwayLine,
+    button: document.getElementById("map-print-manager-button"),
+  },
+];
diff --git a/src/core/Component.js b/src/core/Component.js
new file mode 100644
index 000000000..4fb87f321
--- /dev/null
+++ b/src/core/Component.js
@@ -0,0 +1,32 @@
+import { dispatchReRender } from "../utils/events.js";
+
+export default class Component {
+  constructor() {
+    this.state = {};
+    this.store = {};
+  }
+
+  setState(state) {
+    this.state = state;
+    dispatchReRender();
+  }
+
+  setStore(store) {
+    this.store = store;
+    localStorage.setItem("store", JSON.stringify(store));
+    dispatchReRender();
+  }
+
+  create() {
+    const store = localStorage.getItem("store");
+    if (store) {
+      this.store = JSON.parse(store);
+    }
+  }
+
+  afterCreate() {}
+
+  mount() {}
+
+  render() {}
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..dc01061c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,20 @@
+import { dispatchReRender, RE_RENDER_EVENT } from "./utils/events.js";
+import { elementMap } from "./config.js";
+import reRenderPage from "./utils/reRenderPage.js";
+
+function init() {
+  const app = document.querySelector("#app");
+  let page;
+
+  elementMap.forEach((element) => {
+    const managerPage = new element.page();
+    element.button.addEventListener("click", () => {
+      page = managerPage;
+      dispatchReRender();
+    });
+  });
+
+  window.addEventListener(RE_RENDER_EVENT, () => reRenderPage(app, page));
+}
+
+init();
diff --git a/src/pages/LineManager.js b/src/pages/LineManager.js
new file mode 100644
index 000000000..4425b6fa7
--- /dev/null
+++ b/src/pages/LineManager.js
@@ -0,0 +1,180 @@
+import Component from "../core/Component.js";
+import { ERROR } from "../utils/errors.js";
+
+const elementMap = {
+  lineNameInput: "line-name-input",
+  lineStartStationSelector: "line-start-station-seletor",
+  lineEndStationSelector: "line-end-station-seletor",
+  lineAddButton: "line-add-button",
+  lineDeleteButton: "line-delete-button",
+};
+
+export default class LineManager extends Component {
+  constructor() {
+    super();
+    this.state = {
+      lineName: "",
+      lineStartStation: "",
+      lineEndStation: "",
+    };
+
+    this.handleLineAddButton = () => {
+      const line = {
+        name: this.state.lineName,
+        stations: [this.state.lineStartStation, this.state.lineEndStation],
+      };
+      const lines = this.store.lines ? [...this.store.lines, line] : [line];
+
+      if (isDuplicateLine(this.store.lines, this.state.lineName)) {
+        alert(ERROR.RE_TYPING_LINE);
+      } else {
+        this.setStore({ ...this.store, lines });
+      }
+    };
+
+    this.handleLineDeleteButton = (index) => {
+      this.store.lines.splice(index, 1);
+      this.setStore({ ...this.store });
+    };
+  }
+
+  afterCreate() {
+    const { lineStartStation, lineEndStation } = this.state;
+    const { stations } = this.store;
+    if (lineStartStation.length === 0)
+      this.state.lineStartStation = stations[0];
+    if (lineEndStation.length === 0) this.state.lineEndStation = stations[0];
+  }
+
+  mount() {
+    this.mountNameInput();
+    this.mountStartSelector();
+    this.mountEndSelector();
+    this.mountAddButton();
+    this.mountDeleteButton();
+  }
+
+  mountNameInput() {
+    const lineNameInput = document.getElementById(elementMap.lineNameInput);
+    lineNameInput.addEventListener("blur", (event) => {
+      if (haveSpaceInLineName(event.target.value)) {
+        alert(ERROR.RE_TYPING_LINENAME);
+        return;
+      }
+      this.setState({ ...this.state, lineName: event.target.value });
+    });
+  }
+
+  mountStartSelector() {
+    const lineStartStationSelector = document.getElementById(
+      elementMap.lineStartStationSelector
+    );
+    lineStartStationSelector.addEventListener("change", (event) => {
+      this.setState({ ...this.state, lineStartStation: event.target.value });
+    });
+  }
+
+  mountEndSelector() {
+    const lineEndStationSelector = document.getElementById(
+      elementMap.lineEndStationSelector
+    );
+    lineEndStationSelector.addEventListener("change", (event) => {
+      this.setState({ ...this.state, lineEndStation: event.target.value });
+    });
+  }
+
+  mountAddButton() {
+    const lineAddButton = document.getElementById(elementMap.lineAddButton);
+    lineAddButton.addEventListener("click", this.handleLineAddButton);
+  }
+
+  mountDeleteButton() {
+    const lineDeleteButtons = document.getElementsByClassName(
+      elementMap.lineDeleteButton
+    );
+    [...lineDeleteButtons].forEach((lineDeleteButton, index) => {
+      lineDeleteButton.addEventListener("click", () => {
+        this.handleLineDeleteButton(index);
+      });
+    });
+  }
+
+  render() {
+    const { lines = [], stations = [] } = this.store;
+    const { lineName, lineStartStation, lineEndStation } = this.state;
+    return `
+        <div>
+          <h4 style="margin-bottom: 0;">노선 이름</h4>
+          <input
+            id=${elementMap.lineNameInput}
+            placeholder="노선 이름을 입력해 주세요"
+            style="margin-top: 0;"
+            value="${lineName}"
+          />
+        </div>
+        <div>
+          <h4 style="margin-bottom: 0;">
+            상행 종점
+            <select id=${elementMap.lineStartStationSelector}>
+              ${stations.map(
+                (station) =>
+                  `<option value="${station}" ${
+                    station === lineStartStation && "selected"
+                  }>${station}</option>`
+              )}
+            </select>
+          </h4>
+          <h4 style="margin-top: 0;">
+            하행 종점
+            <select id=${elementMap.lineEndStationSelector}>
+              ${stations.map(
+                (station) =>
+                  `<option value="${station}" ${
+                    station === lineEndStation && "selected"
+                  }>${station}</option>`
+              )}
+            </select>
+          </h4>
+        </div>
+        <div>
+          <button id=${elementMap.lineAddButton}>노선 추가</button>
+        </div>
+        <div>
+          <h2>🚉 지하철 노선 목록</h2>
+          <table>
+            <thead>
+              <tr>
+                <td>노선 이름</td>
+                <td>상행 종점역</td>
+                <td>하행 종점역</td>
+                <td>설정</td>
+              </tr>
+            </thead>
+            <tbody>
+              ${lines
+                .map(
+                  (line) =>
+                    `<tr>
+                       <td>${line.name}</td>
+                       <td>${line.stations[0]}</td>
+                       <td>${line.stations[1]}</td>
+                       <td>
+                        <button class=${elementMap.lineDeleteButton}>삭제</button>
+                       </td>
+                     </tr>`
+                )
+                .join("")}
+            </tbody>
+          </table>
+        </div>
+      `;
+  }
+}
+
+function isDuplicateLine(lines = [], lineName) {
+  return lines.find((line) => line.name === lineName);
+}
+
+function haveSpaceInLineName(lineName) {
+  return [...lineName].includes(" ");
+}
diff --git a/src/pages/PrintSubwayLine.js b/src/pages/PrintSubwayLine.js
new file mode 100644
index 000000000..8113cd70f
--- /dev/null
+++ b/src/pages/PrintSubwayLine.js
@@ -0,0 +1,33 @@
+import Component from "../core/Component.js";
+
+export default class PrintSubwayLine extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    const { lines } = this.store;
+    return `
+      <div class="map">
+        ${lines
+          .map(
+            (line) => `
+             <div>
+               <h4>${line.name}</h4>
+               <ul>
+                 ${line.stations
+                   .map(
+                     (station) => `
+                 <li style="margin-top: 5px;" >${station}</li>
+                 `
+                   )
+                   .join("")}
+               </ul>
+             </div>  
+            `
+          )
+          .join("")}
+      </div>
+      `;
+  }
+}
diff --git a/src/pages/SectionManager.js b/src/pages/SectionManager.js
new file mode 100644
index 000000000..fca148a9f
--- /dev/null
+++ b/src/pages/SectionManager.js
@@ -0,0 +1,164 @@
+import Component from "../core/Component.js";
+import { ERROR } from "../utils/errors.js";
+
+const elementMap = {
+  sectionLineMenuButton: "section-line-menu-button",
+  sectionStationSelector: "section-station-selector",
+  sectionOrderInput: "section-order-input",
+  sectionAddButton: "section-add-button",
+  sectionDeleteButton: "section-delete-button",
+};
+
+export default class SectionManager extends Component {
+  constructor() {
+    super();
+    this.state = {
+      selectedLine: null,
+    };
+
+    this.handleLineButtonClick = (index) => {
+      this.setState({ selectedLine: index });
+    };
+
+    this.handleAddButtonClick = (order, station) => {
+      if (order.length === 0) {
+        alert(ERROR.RE_TYPING_ORDER);
+        return;
+      }
+
+      const { selectedLine } = this.state;
+      this.store.lines[selectedLine].stations.splice(order, 0, station);
+      this.setStore(cloneDeep(this.store));
+    };
+
+    this.handleDeleteButtonClick = (index) => {
+      const isLessThanTwoStation = stations.length < 2;
+      if (isLessThanTwoStation) {
+        alert(ERROR.NOT_DELETE);
+        return;
+      }
+
+      const stations = this.store.lines[this.state.selectedLine].stations;
+      stations.splice(index, 1);
+      this.setStore(cloneDeep(this.store));
+    };
+  }
+
+  mount() {
+    const sectionStationSelector = document.getElementById(
+      elementMap.sectionStationSelector
+    );
+    const sectionOrderInput = document.getElementById(
+      elementMap.sectionOrderInput
+    );
+    this.mountLineMenuButton();
+    this.mountAddButton(sectionOrderInput, sectionStationSelector);
+    this.mountDeleteButton();
+  }
+
+  mountLineMenuButton() {
+    const sectionLineMenuButtons = document.getElementsByClassName(
+      elementMap.sectionLineMenuButton
+    );
+    [...sectionLineMenuButtons].forEach((button, index) => {
+      button.addEventListener("click", () => {
+        this.handleLineButtonClick(index);
+      });
+    });
+  }
+
+  mountAddButton(sectionOrderInput, sectionStationSelector) {
+    const sectionAddButton = document.getElementById(
+      elementMap.sectionAddButton
+    );
+    sectionAddButton?.addEventListener("click", () => {
+      this.handleAddButtonClick(
+        sectionOrderInput.value,
+        sectionStationSelector.value
+      );
+    });
+  }
+
+  mountDeleteButton() {
+    const sectionDeleteButtons = document.getElementsByClassName(
+      elementMap.sectionDeleteButton
+    );
+    sectionDeleteButtons &&
+      [...sectionDeleteButtons].forEach((button, index) => {
+        button.addEventListener("click", () => {
+          this.handleDeleteButtonClick(index);
+        });
+      });
+  }
+
+  render() {
+    const { stations = [], lines = [] } = this.store;
+    const { selectedLine } = this.state;
+    const Section = () => `
+    <div>
+      <h3>${lines[selectedLine]?.name} 관리</h3>
+      <h4>구간 등록</h4>
+      <select id=${elementMap.sectionStationSelector}>
+        ${stations
+          .map(
+            (station) =>
+              `<option value="${station}" 
+            }>${station}</option>`
+          )
+          .join("")}      
+      </select>
+      <input id=${
+        elementMap.sectionOrderInput
+      } type="number" placeholder="순서">
+      <button id=${elementMap.sectionAddButton}>등록</button>
+    </div>
+    <table style="margin-top: 25px;">
+      <thead>
+        <tr>
+          <td>순서</td>
+          <td>이름</td>
+          <td>설정</td>
+        </tr>
+      </thead>
+      <tbody>
+        ${
+          lines[selectedLine]?.stations
+            .map(
+              (station, index) =>
+                `<tr>
+                   <td>${index}</td>
+                   <td>${station}</td>
+                   <td>
+                     <button class=${elementMap.sectionDeleteButton}>노선에서 제거</button>
+                   </td>
+                 </tr>`
+            )
+            .join("") || ""
+        }
+      </tbody>
+    </table> 
+    `;
+
+    return `
+    <div>
+      <h3>구간을 수정할 노선을 선택해주세요.</h3>
+      ${lines
+        .map(
+          (line) =>
+            `<button class=${elementMap.sectionLineMenuButton} 
+               style="margin-right: 5px;">${line.name}</button>`
+        )
+        .join("")}
+    </div>
+   ${isNull(selectedLine) ? "" : Section()}
+  `;
+  }
+}
+
+function isNull(value) {
+  return String(value) === "null" || String(value) === "undefined";
+}
+
+function cloneDeep(value) {
+  return JSON.parse(JSON.stringify(value));
+}
diff --git a/src/pages/StationManager.js b/src/pages/StationManager.js
new file mode 100644
index 000000000..3c92f3adb
--- /dev/null
+++ b/src/pages/StationManager.js
@@ -0,0 +1,129 @@
+import Component from "../core/Component.js";
+import { ERROR } from "../utils/errors.js";
+
+const elementMap = {
+  stationNameInput: "station-name-input",
+  stationAddButton: "station-add-button",
+  stationDeleteButton: "station-delete-button",
+};
+
+export default class StationManager extends Component {
+  constructor() {
+    super();
+
+    this.handleAddButtonClick = (newStation) => {
+      if (
+        isMoreThanTwoWords(newStation) &&
+        isNotDuplicateSatationName(newStation, this.store.stations) &&
+        hasNotSpaceInStationName(newStation) &&
+        isOnlyWord(newStation)
+      ) {
+        const stations = this.store.stations
+          ? [...this.store.stations, newStation]
+          : [newStation];
+        this.setStore({ ...this.store, stations });
+      } else {
+        alert(ERROR.RE_TYPING_STATION);
+      }
+    };
+
+    this.handleDeleteButtonClick = (index) => {
+      this.store.stations.splice(index, 1);
+      this.setStore({ ...this.store });
+    };
+  }
+
+  mount() {
+    const stationNameInput = document.getElementById(
+      elementMap.stationNameInput
+    );
+    this.mountAddButton(stationNameInput);
+    this.mountDeleteButton();
+  }
+
+  mountAddButton(stationNameInput) {
+    const stationAddButton = document.getElementById(
+      elementMap.stationAddButton
+    );
+    stationAddButton.addEventListener("click", () => {
+      this.handleAddButtonClick(stationNameInput.value);
+    });
+  }
+
+  mountDeleteButton() {
+    const stationDeleteButtons = document.getElementsByClassName(
+      elementMap.stationDeleteButton
+    );
+    [...stationDeleteButtons].forEach((stationDeleteButton, index) => {
+      stationDeleteButton.addEventListener("click", () => {
+        this.handleDeleteButtonClick(index);
+      });
+    });
+  }
+
+  render() {
+    const { stations = [] } = this.store;
+    return `
+    <div>
+      <h4 style="margin-bottom: 0;">역 이름</h4>
+        <div>
+          <input id=${
+            elementMap.stationNameInput
+          } placeholder="역 이름을 입력해 주세요.">
+          <button id=${elementMap.stationAddButton}>역 추가</button>
+        </div>
+        <div>
+          <h2>🚉 지하철 역 목록</h2>
+          <table>
+            <thead>
+              <tr>
+                <td>역 이름</td>
+                <td>설정</td>
+              </tr>
+            </thead>
+            <tbody>
+              ${stations
+                .map(
+                  (station) =>
+                    `<tr>
+                       <td>${station}</td>
+                       <td>
+                         <button class=${elementMap.stationDeleteButton}>삭제</button>
+                       </td>
+                     </tr>
+                    `
+                )
+                .join("")}
+            </tbody>    
+          </table>
+        </div>
+    </div>
+    `;
+  }
+}
+
+function isMoreThanTwoWords(stationName) {
+  return stationName.length > 1;
+}
+
+function isNotDuplicateSatationName(stationName, stations = []) {
+  return !stations.includes(stationName);
+}
+
+function hasNotSpaceInStationName(stationName) {
+  return ![...stationName].includes(" ");
+}
+
+function isOnlyWord(stationName) {
+  const check_num = /[0-9]/;
+  const check_eng = /[a-zA-Z]/;
+  const check_spc = /[~!@#$%^&*()_+|<>?:{}]/;
+  const check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
+
+  return (
+    check_kor.test(stationName) &&
+    !check_eng.test(stationName) &&
+    !check_num.test(stationName) &&
+    !check_spc.test(stationName)
+  );
+}
diff --git a/src/utils/errors.js b/src/utils/errors.js
new file mode 100644
index 000000000..e1000f94b
--- /dev/null
+++ b/src/utils/errors.js
@@ -0,0 +1,7 @@
+export const ERROR = {
+  RE_TYPING_STATION: "역 이름을 다시 입력해 주세요",
+  RE_TYPING_LINE: "중복된 노선이 존재합니다",
+  RE_TYPING_LINENAME: "노선 이름에 공백이 존재합니다",
+  RE_TYPING_ORDER: "순서를 입력하세요",
+  NOT_DELETE: "2개 이하는 지울 수 없습니다",
+};
diff --git a/src/utils/events.js b/src/utils/events.js
new file mode 100644
index 000000000..94eb7023b
--- /dev/null
+++ b/src/utils/events.js
@@ -0,0 +1,5 @@
+export { dispatchReRender, RE_RENDER_EVENT, reRenderEvent };
+
+const RE_RENDER_EVENT = "customRender";
+const reRenderEvent = new CustomEvent(RE_RENDER_EVENT);
+const dispatchReRender = () => window.dispatchEvent(reRenderEvent);
diff --git a/src/utils/reRenderPage.js b/src/utils/reRenderPage.js
new file mode 100644
index 000000000..b7fead00d
--- /dev/null
+++ b/src/utils/reRenderPage.js
@@ -0,0 +1,6 @@
+export default function reRenderPage(app, page) {
+  page.create();
+  page.afterCreate();
+  app.innerHTML = page.render();
+  page.mount();
+}