diff --git a/.DS_Store b/.DS_Store
index 88eb7c3..315acef 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/crescendo-web/src/App.js b/crescendo-web/src/App.js
index cd215ff..984e6e6 100644
--- a/crescendo-web/src/App.js
+++ b/crescendo-web/src/App.js
@@ -17,6 +17,12 @@ import Counsel from "./pages/Counsel";
 import Board from "./pages/Board";
 
 const App = () => {
+  const [formData, setFormData] = useState({
+    id: "",
+    password: "",
+    confirmPassword: "",
+  });
+
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
   const location = useLocation();
 
@@ -37,7 +43,6 @@ const App = () => {
     return null;
   }
 
-  // 현재 경로에 따라 콘텐츠를 표시할지 결정. 빈 배열로 설정하면 모든 경로에서 콘텐츠가 표시되지 않음
   const showContent = ["/"].includes(location.pathname);
 
   return (
@@ -61,9 +66,9 @@ const App = () => {
       )}
 
       <Routes>
-        <Route path="/signup1" element={<SignUp1 />} />
-        <Route path="/signup2" element={<SignUp2 />} />
-        <Route path="/signup3" element={<SignUp3 />} />
+        <Route path="/signup1" element={<SignUp1 formData={formData} setFormData={setFormData} />} />
+        <Route path="/signup2" element={<SignUp2 formData={formData} setFormData={setFormData} />} />
+        <Route path="/signup3" element={<SignUp3 formData={formData} />} />
         <Route path="/login" element={<Login />} />
         <Route path="/Main" element={<Main/>}/>
         <Route path="/Guide" element={<Guide/>}/>
diff --git a/crescendo-web/src/Login.js b/crescendo-web/src/Login.js
index 28e51ae..db88dcb 100644
--- a/crescendo-web/src/Login.js
+++ b/crescendo-web/src/Login.js
@@ -1,47 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import "./SignUp1.css";
+import axios from "axios";
 
-function Header() {
-  return (
-    <header>
-      <div className="line"></div>
-      <div id="idBox">
-        <h1>
-          로그인을 위해
-          <br />
-          아이디와 비밀번호를
-          <br />
-          정확하게 입력해주세요!
-        </h1>
-      </div>
+function Login() {
+  const navigate = useNavigate();
+  const [loginData, setLoginData] = useState({
+    id: "",
+    password: "",
+  });
 
-      <input id="inputId" type="text" placeholder="아이디 입력" />
-      <br />
-      <input id="inputPwd" type="text" placeholder="비밀번호 확인 입력" />
-    </header>
-  );
-}
+  const handleInputChange = (e) => {
+    setLoginData({ ...loginData, [e.target.name]: e.target.value });
+  };
 
-function Button() {
-  const navigate = useNavigate();
+  const handleLogin = async () => {
+    try {
+      const response = await axios.post("20.41.66.225", loginData);
 
-  return (
-    <div className="btns">
-      <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
-      <input id="login" type="button" value="로그인" />
-      <input id="helpBtn" type="button" />
-    </div>
-  );
-}
+      if (response.status === 200) {
+        navigate("/Main");
+      } else {
+        console.error("Login failed");
+      }
+    } catch (error) {
+      console.error("There was an error during the login process:", error);
+    }
+  };
 
-function SignUp2() {
   return (
     <div>
-      <Header />
-      <Button />
+      <header>
+        <div className="line"></div>
+        <div id="idBox">
+          <h1>
+            로그인을 위해
+            <br />
+            아이디와 비밀번호를
+            <br />
+            정확하게 입력해주세요!
+          </h1>
+        </div>
+        <input
+          id="inputId"
+          type="text"
+          name="id"
+          placeholder="아이디 입력"
+          value={loginData.id}
+          onChange={handleInputChange}
+        />
+        <br />
+        <input
+          id="inputPwd"
+          type="password"
+          name="password"
+          placeholder="비밀번호 입력"
+          value={loginData.password}
+          onChange={handleInputChange}
+        />
+      </header>
+      <div className="btns">
+        <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
+        <button id="login" onClick={handleLogin} aria-label="Login">로그인</button>
+        <button id="helpBtn" aria-label="Help" />
+      </div>
     </div>
   );
 }
 
-export default SignUp2;
+export default Login;
diff --git a/crescendo-web/src/SignUp1.js b/crescendo-web/src/SignUp1.js
index 1b13486..67eeb70 100644
--- a/crescendo-web/src/SignUp1.js
+++ b/crescendo-web/src/SignUp1.js
@@ -2,45 +2,42 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import "./SignUp1.css";
 
-function Header() {
-  return (
-    <header>
-      <div className="line"></div>
-      <div id="idBox">
-        <h1>
-          환영합니다!
-          <br />
-          당신의 이름을 알려주세요
-        </h1>
-        <div>로그인시 사용할 아이디에요</div>
-      </div>
-
-      <input id="inputId" type="text" placeholder="아이디 입력" />
-    </header>
-  );
-}
-
-function Button() {
+function SignUp1({ formData, setFormData }) {
   const navigate = useNavigate();
 
-  return (
-    <div>
-      <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
-      <button
-        id="nextBtn"
-        onClick={() => navigate("/signup2")}
-        aria-label="Next"
-      />
-      <button id="helpBtn" aria-label="Help" />
-    </div>
-  );
-}
+  const handleInputChange = (e) => {
+    setFormData({ ...formData, id: e.target.value });
+  };
 
-function SignUp1() {
   return (
     <div>
-      <Header />
-      <Button />
+      <header>
+        <div className="line"></div>
+        <div id="idBox">
+          <h1>
+            환영합니다!
+            <br />
+            당신의 이름을 알려주세요
+          </h1>
+          <div>로그인 시 사용할 아이디에요</div>
+        </div>
+        <input
+          id="inputId"
+          type="text"
+          placeholder="아이디 입력"
+          value={formData.id}
+          onChange={handleInputChange}
+        />
+      </header>
+      <div>
+        <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
+        <button
+          id="nextBtn"
+          onClick={() => navigate("/signup2")}
+          aria-label="Next"
+        />
+        <button id="helpBtn" aria-label="Help" />
+      </div>
     </div>
   );
 }
diff --git a/crescendo-web/src/SignUp2.js b/crescendo-web/src/SignUp2.js
index fbb7154..537a1f0 100644
--- a/crescendo-web/src/SignUp2.js
+++ b/crescendo-web/src/SignUp2.js
@@ -2,43 +2,52 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import "./SignUp1.css";
 
-function Header() {
-  return (
-    <header>
-      <div className="line"></div>
-      <div id="idBox">
-        <h1>
-          회원가입을 위해
-          <br />
-          비밀번호를 작성해주세요
-        </h1>
-        <div>정확한 확인을 위해 인증도 진행해 주세요</div>
-      </div>
-
-      <input id="inputPwd" type="text" placeholder="비밀번호 입력" />
-      <br />
-      <input id="inputRePwd" type="text" placeholder="비밀번호 확인 입력" />
-    </header>
-  );
-}
-
-function Button() {
+function SignUp2({ formData, setFormData }) {
   const navigate = useNavigate();
 
-  return (
-    <div>
-      <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
-      <input id="nextBtn" type="button" onClick={() => navigate("/signup3")} />
-      <input id="helpBtn" type="button" />
-    </div>
-  );
-}
+  const handleInputChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
 
-function SignUp2() {
   return (
     <div>
-      <Header />
-      <Button />
+      <header>
+        <div className="line"></div>
+        <div id="idBox">
+          <h1>
+            회원가입을 위해
+            <br />
+            비밀번호를 작성해주세요
+          </h1>
+          <div>정확한 확인을 위해 인증도 진행해 주세요</div>
+        </div>
+        <input
+          id="inputPwd"
+          type="password"
+          name="password"
+          placeholder="비밀번호 입력"
+          value={formData.password}
+          onChange={handleInputChange}
+        />
+        <br />
+        <input
+          id="inputRePwd"
+          type="password"
+          name="confirmPassword"
+          placeholder="비밀번호 확인 입력"
+          value={formData.confirmPassword}
+          onChange={handleInputChange}
+        />
+      </header>
+      <div>
+        <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
+        <button
+          id="nextBtn"
+          onClick={() => navigate("/signup3")}
+          aria-label="Next"
+        />
+        <button id="helpBtn" aria-label="Help" />
+      </div>
     </div>
   );
 }
diff --git a/crescendo-web/src/SignUp3.js b/crescendo-web/src/SignUp3.js
index 9e6b9ee..8ff9b9d 100644
--- a/crescendo-web/src/SignUp3.js
+++ b/crescendo-web/src/SignUp3.js
@@ -1,42 +1,40 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import "./SignUp1.css";
+import axios from "axios";
 
-function Header() {
-  return (
-    <header>
-      <div className="line"></div>
-      <img src={require("./image/check.png")} className="check" alt="check" />
-      <div ie="inBox">
-        <h1>flower님, 반가워요!</h1>
-        <h2>해바라기를 시작해볼까요?</h2>
-      </div>
-    </header>
-  );
-}
-
-function Button() {
+function SignUp3({ formData }) {
   const navigate = useNavigate();
 
-  return (
-    <div>
-      <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
-      <input
-        id="startBtn"
-        type="button"
-        value="시작하기"
-        onClick={() => navigate("/app")}
-      />
-      <input id="helpBtn" type="button" />
-    </div>
-  );
-}
+  const handleSubmit = async () => {
+    try {
+      const response = await axios.post("20.41.66.225", formData);
+
+      if (response.status === 200) {
+        navigate("/login");
+      } else {
+        console.error("Signup failed");
+      }
+    } catch (error) {
+      console.error("There was an error during the signup process:", error);
+    }
+  };
 
-function SignUp3() {
   return (
     <div>
-      <Header />
-      <Button />
+      <header>
+        <div className="line"></div>
+        <img src={require("./image/check.png")} className="check" alt="check" />
+        <div id="inBox">
+          <h1>{formData.id}님, 반가워요!</h1>
+          <h2>해바라기를 시작해볼까요?</h2>
+        </div>
+      </header>
+      <div>
+        <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
+        <button id="startBtn" onClick={handleSubmit} aria-label="Start">시작하기</button>
+        <button id="helpBtn" aria-label="Help" />
+      </div>
     </div>
   );
 }
diff --git a/crescendo-web/src/image/.DS_Store b/crescendo-web/src/image/.DS_Store
index 830fe13..b2ca7f7 100644
Binary files a/crescendo-web/src/image/.DS_Store and b/crescendo-web/src/image/.DS_Store differ