diff --git a/Frontend/git-test/src/App.js b/Frontend/git-test/src/App.js
deleted file mode 100644
index 04c1479..0000000
--- a/Frontend/git-test/src/App.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function App() {
-  return (
-    <div className="app">
-      <h1>App</h1>
-    </div>
-  );
-}
diff --git a/Frontend/git-test/src/Router.js b/Frontend/git-test/src/Router.js
index 8aa3490..25eb646 100644
--- a/Frontend/git-test/src/Router.js
+++ b/Frontend/git-test/src/Router.js
@@ -1,12 +1,14 @@
-import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import App from './App';
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Login from "./pages/Login/Login";
+import Main from "./pages/Main/Main";
 
 export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<App />} />
+        <Route path="/" element={<Login />} />
+        <Route path="/main" element={<Main />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/Frontend/git-test/src/pages/Login/Login.css b/Frontend/git-test/src/pages/Login/Login.css
new file mode 100644
index 0000000..de5d7c4
--- /dev/null
+++ b/Frontend/git-test/src/pages/Login/Login.css
@@ -0,0 +1,49 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loginContainer {
+  padding: 30px;
+  border: 1px solid gray;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.title {
+  font-size: 40px;
+}
+
+.loginForm {
+  display: flex;
+  flex-direction: column;
+  margin: 40px 0;
+}
+
+.userId,
+.userPassword {
+  width: 280px;
+  margin-bottom: 15px;
+  padding: 15px 0 15px 15px;
+  border: 1px solid gray;
+  border-radius: 5px;
+  background-color: #fafafa;
+  outline: none;
+}
+
+.loginButton {
+  padding: 15px 0;
+  background-color: #0095f6;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  font-weight: 700;
+  outline: none;
+  cursor: default;
+}
+
+.loginButton:disabled {
+  background-color: lightgray;
+}
diff --git a/Frontend/git-test/src/pages/Login/Login.js b/Frontend/git-test/src/pages/Login/Login.js
new file mode 100644
index 0000000..e36ca38
--- /dev/null
+++ b/Frontend/git-test/src/pages/Login/Login.js
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "./Login.css";
+
+export default function Login() {
+  const [userInfo, setUserInfo] = useState({ id: "", password: "" });
+  const navigate = useNavigate();
+
+  const getUserInfo = (e) => {
+    const { name, value } = e.target;
+    setUserInfo({ ...userInfo, [name]: value });
+  };
+
+  const isValid = userInfo.id.includes("@") && userInfo.password.length >= 5;
+
+  const goToMain = (e) => {
+    e.preventDefault();
+    navigate("/main");
+  };
+
+  return (
+    <div className="login">
+      <main className="loginContainer">
+        <h1 className="title">Git Test</h1>
+        <form className="loginForm" onSubmit={goToMain}>
+          <input
+            className="userId"
+            name="id"
+            type="text"
+            value={userInfo.id}
+            placeholder="이메일을 입력해 주세요."
+            onChange={getUserInfo}
+          />
+          <input
+            className="userPassword"
+            name="password"
+            type="password"
+            value={userInfo.password}
+            placeholder="비밀번호를 입력해 주세요."
+            onChange={getUserInfo}
+          />
+          <button className="loginButton" type="submit" disabled={!isValid}>
+            로그인
+          </button>
+        </form>
+      </main>
+    </div>
+  );
+}
diff --git a/Frontend/git-test/src/pages/Main/Main.css b/Frontend/git-test/src/pages/Main/Main.css
new file mode 100644
index 0000000..3423df3
--- /dev/null
+++ b/Frontend/git-test/src/pages/Main/Main.css
@@ -0,0 +1,29 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.image {
+  width: 400px;
+  border-radius: 15px;
+  margin-bottom: 25px;
+}
+
+.button {
+  width: 200px;
+  height: 40px;
+  background-color: #fafafa;
+  border: 1px solid gray;
+  border-radius: 5px;
+  outline: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  border: 1px solid #0095f6;
+  color: #fafafa;
+  background-color: #0095f6;
+}
diff --git a/Frontend/git-test/src/pages/Main/Main.js b/Frontend/git-test/src/pages/Main/Main.js
new file mode 100644
index 0000000..140d293
--- /dev/null
+++ b/Frontend/git-test/src/pages/Main/Main.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Main.css";
+
+export default function Main() {
+  return (
+    <main className="main">
+      <h1>Main</h1>
+      <img className="image" src="images/code.avif" alt="메인 이미지" />
+      <Link to="/">
+        <button className="button">이전으로</button>
+      </Link>
+    </main>
+  );
+}