diff --git a/Frontend/git-rebase-test/src/Router.js b/Frontend/git-rebase-test/src/Router.js
index 72c1945..49b8b5e 100644
--- a/Frontend/git-rebase-test/src/Router.js
+++ b/Frontend/git-rebase-test/src/Router.js
@@ -7,8 +7,8 @@ export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path='/' element={<Main />} />
-        <Route path='/login' element={<Login />} />
+        <Route path="/" element={<Main />} />
+        <Route path="/signin" element={<Login />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/Frontend/git-rebase-test/src/pages/Login/Login.css b/Frontend/git-rebase-test/src/pages/Login/Login.css
index e69de29..de5d7c4 100644
--- a/Frontend/git-rebase-test/src/pages/Login/Login.css
+++ b/Frontend/git-rebase-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-rebase-test/src/pages/Login/Login.js b/Frontend/git-rebase-test/src/pages/Login/Login.js
index a214888..f710022 100644
--- a/Frontend/git-rebase-test/src/pages/Login/Login.js
+++ b/Frontend/git-rebase-test/src/pages/Login/Login.js
@@ -1,9 +1,49 @@
-import React from 'react'
+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");
+  };
 
-function Login() {
   return (
-    <div>Login</div>
-  )
+    <div className="login">
+      <main className="loginContainer">
+        <h1 className="title">Git Rebase 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="button" disabled={!isValid}>
+            로그인
+          </button>
+        </form>
+      </main>
+    </div>
+  );
 }
-
-export default Login
\ No newline at end of file