diff --git a/build.gradle b/build.gradle
index 5d7484ceb..b9473b3bd 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,6 +1,6 @@
 plugins {
 	id 'java'
-	id 'org.springframework.boot' version '2.7.10-SNAPSHOT'
+	id 'org.springframework.boot' version '2.7.9'
 	id 'io.spring.dependency-management' version '1.0.15.RELEASE'
 }
 
@@ -8,12 +8,10 @@ sourceCompatibility = '11'
 
 repositories {
 	mavenCentral()
-	maven { url 'https://repo.spring.io/milestone' }
-	maven { url 'https://repo.spring.io/snapshot' }
 }
 
 dependencies {
-	implementation 'org.springframework.boot:spring-boot-starter'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 }
 
diff --git a/src/main/java/racingcar/RacingcarApplication.java b/src/main/java/racingcar/RacingCarApplication.java
similarity index 69%
rename from src/main/java/racingcar/RacingcarApplication.java
rename to src/main/java/racingcar/RacingCarApplication.java
index 64ee64494..3ebfe54c3 100644
--- a/src/main/java/racingcar/RacingcarApplication.java
+++ b/src/main/java/racingcar/RacingCarApplication.java
@@ -4,10 +4,10 @@
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
 @SpringBootApplication
-public class RacingcarApplication {
+public class RacingCarApplication {
 
 	public static void main(String[] args) {
-		SpringApplication.run(RacingcarApplication.class, args);
+		SpringApplication.run(RacingCarApplication.class, args);
 	}
 
 }
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 8b1378917..e69de29bb 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1 +0,0 @@
-
diff --git a/src/main/resources/data.sql b/src/main/resources/data.sql
new file mode 100644
index 000000000..56f06adfd
--- /dev/null
+++ b/src/main/resources/data.sql
@@ -0,0 +1,7 @@
+-- TODO: 기능 구현에 필요한 내용을 추가하거나 수정하세요.
+CREATE TABLE PLAY_RESULT (
+    id          INT         NOT NULL AUTO_INCREMENT,
+    winners     VARCHAR(50) NOT NULL,
+    created_at  DATETIME    NOT NULL default current_timestamp,
+    PRIMARY KEY (id)
+);
diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
new file mode 100644
index 000000000..6c9652ce0
--- /dev/null
+++ b/src/main/resources/static/css/styles.css
@@ -0,0 +1,120 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+}
+h1 {
+    margin: 20px 0;
+    font-size: 24px;
+    text-align: center;
+}
+/* 입력 영역 */
+.input-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 50px 0;
+}
+
+.input-area label {
+    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.input-area input[type="text"] {
+    padding: 10px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 30px;
+    font-size: 16px;
+    background-color: transparent;
+    transition: border-bottom-color 0.2s;
+}
+
+.input-area input[type="text"]:focus {
+    border-bottom-color: #444;
+    outline: none;
+}
+
+/* 출력 영역 */
+.output-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+}
+
+/* 폼 */
+form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+form button[type="submit"] {
+    background-color: #444;
+    color: #fff;
+    padding: 10px 15px;
+    margin: auto;
+    display: block;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.2s;
+}
+
+form button[type="submit"]:hover {
+    background-color: #333;
+}
+
+table {
+    border-collapse: collapse;
+    margin: 0 auto;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+    width: 100%;
+}
+th, td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: center;
+}
+th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+}
+
+/* GNB 스타일 */
+.gnb {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    background-color: #444;
+    color: #fff;
+    padding: 0 20px;
+}
+
+.gnb button {
+    background-color: #444;
+    color: #fff;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.gnb button:hover {
+    background-color: #444;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
new file mode 100644
index 000000000..c731a65ff
--- /dev/null
+++ b/src/main/resources/static/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>자동차 경주 게임</title>
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
+</head>
+<body>
+<div class="gnb">
+  <h1>Racing Car</h1>
+  <div>
+    <button onclick="handlePlayButtonClick()">게임하기</button>
+    <button onclick="handleListButtonClick()">이력조회</button>
+  </div>
+</div>
+<h1>자동차 경주 게임</h1>
+<form onsubmit="submitForm(); return false;">
+  <div class="input-area">
+    <label for="names">자동차 이름:</label>
+    <input type="text" id="names" name="names">
+
+    <label for="count">시도할 횟수:</label>
+    <input type="text" id="count" name="count">
+  </div>
+
+  <button type="submit">Submit</button>
+
+  <div class="output-area">
+    우승자: <span id="resultWinner"></span>
+    <br>
+    결과:
+    <div id="resultPosition"></div>
+  </div>
+</form>
+
+<script>
+  function submitForm() {
+    const names = document.getElementById("names").value;
+    const count = document.getElementById("count").value;
+    const data = {
+      names: names,
+      count: count
+    };
+    fetch("/plays", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json;charset=UTF-8"
+      },
+      body: JSON.stringify(data)
+    })
+        .then(response => {
+          if (response.ok) {
+            return response.json();
+          } else {
+            throw new Error("Network response was not ok.");
+          }
+        })
+        .then(data => {
+          const resultPosition = document.createElement("div");
+          for (let index in data.racingCars) {
+            const span = document.createElement("span");
+            span.innerHTML = `Name: ${data.racingCars[index].name}, Position: ${data.racingCars[index].position}<br>`;
+            resultPosition.appendChild(span);
+          }
+          document.getElementById("resultWinner").innerHTML = data.winners
+          document.getElementById("resultPosition").innerHTML = '';
+          document.getElementById("resultPosition").appendChild(resultPosition);
+        })
+        .catch(error => {
+          console.error("Error:", error);
+        });
+  }
+
+  function handlePlayButtonClick() {
+    window.location.href = "/";
+  }
+
+  function handleListButtonClick() {
+    window.location.href = "/list.html";
+  }
+</script>
+</body>
+</html>
+
diff --git a/src/main/resources/static/list.html b/src/main/resources/static/list.html
new file mode 100644
index 000000000..9912dd20f
--- /dev/null
+++ b/src/main/resources/static/list.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>자동차 경주 게임 이력 조회</title>
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
+</head>
+<body>
+<div class="gnb">
+  <h1>Racing Car</h1>
+  <div>
+    <button onclick="handlePlayButtonClick()">게임하기</button>
+    <button onclick="handleListButtonClick()">이력조회</button>
+  </div>
+</div>
+<h1>자동차 경주 게임 이력 조회</h1>
+<table>
+  <thead>
+  <tr>
+    <th>이동 횟수</th>
+    <th>우승자</th>
+  </tr>
+  </thead>
+  <tbody id="gameHistory"></tbody>
+</table>
+
+<script>
+  const tbody = document.getElementById("gameHistory");
+
+  fetch('/plays')
+      .then(response => response.json())
+      .then(results => {
+        results.forEach(result => {
+          const row = createTableRow(result);
+          tbody.appendChild(row);
+        });
+      });
+
+  function createTableRow(result) {
+    const row = document.createElement("tr");
+    row.appendChild(createMovesTableCell(result.racingCars));
+    row.appendChild(createTableCell(result.winners));
+    return row;
+  }
+
+  function createTableCell(content) {
+    const cell = document.createElement("td");
+    cell.textContent = content;
+    return cell;
+  }
+
+  function createMovesTableCell(racingCars) {
+    const cell = document.createElement("td");
+    let movesText = "";
+    for (let key in racingCars) {
+      movesText += `${racingCars[key].name}: ${racingCars[key].position}<br>`;
+    }
+    ;
+    cell.innerHTML = movesText;
+    return cell;
+  }
+
+  function handlePlayButtonClick() {
+    window.location.href = "/";
+  }
+
+  function handleListButtonClick() {
+    window.location.href = "/list.html";
+  }
+</script>
+</body>
+</html>
diff --git a/src/test/java/racingcar/RacingcarApplicationTests.java b/src/test/java/racingcar/RacingCarApplicationTests.java
similarity index 83%
rename from src/test/java/racingcar/RacingcarApplicationTests.java
rename to src/test/java/racingcar/RacingCarApplicationTests.java
index 53499a544..e3c70d8de 100644
--- a/src/test/java/racingcar/RacingcarApplicationTests.java
+++ b/src/test/java/racingcar/RacingCarApplicationTests.java
@@ -4,7 +4,7 @@
 import org.springframework.boot.test.context.SpringBootTest;
 
 @SpringBootTest
-class RacingcarApplicationTests {
+class RacingCarApplicationTests {
 
 	@Test
 	void contextLoads() {