diff --git a/src/App.js b/src/App.js
index 20a3459..88a92e5 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,17 @@
 import React from "react";
-import "./App.css";
+import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<LoginPage/>}/>
+        <Route path="/signup" element={<SignupPage/>} />
+      </Routes>
+    </Router>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..9b9ae19
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Button = ({ text, color, onClick, icon }) => {
+    return (
+        <button onClick = {onClick}
+        style = {{
+            backgroundColor : color,
+            color : "#fff",
+            border : "none",
+            padding : "12px 16px",
+            borderRadius : "8px",
+            fontSize: "16px",
+            width: "250px",
+            display : "flex",
+            alignItems: "center",
+            justifyContent : "center",
+            gap : "8px",
+            cursor: "pointer"
+        }}
+        >
+            {icon && <img src ={icon} alt="icon" width="20" />}
+            {text}
+        </button>
+    );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/Logo.js b/src/components/Logo.js
new file mode 100644
index 0000000..9b562aa
--- /dev/null
+++ b/src/components/Logo.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Logo = () => {
+    return (
+        <div style={{ textAlign: "center", marginBottom: "20px"}}>
+            <img src="/images/heart.png" alt="Heart Logo" width="100" />
+        </div>
+    );
+};
+
+export default Logo;
\ No newline at end of file
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
index 8eeee7c..b16bba8 100644
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@@ -1,10 +1,13 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import Button from "../components/Button";
 import Logo from "../components/Logo";
 
 const LoginPage = () => {
+    const navigate = useNavigate();
     const handleKakaoLogin = () => {
         //window.location.href = "나중에 카카오 로그인 키. "
+        navigate("/signup");
     };
 
     return (
diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js
index e69de29..bfd40f1 100644
--- a/src/pages/SignupPage.js
+++ b/src/pages/SignupPage.js
@@ -0,0 +1,48 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "../components/Button";
+import Logo from "../components/Logo";
+
+const SignupPage = () => {
+    return(
+        <div style={styles.container}>
+            <Logo />
+            <h2 style={styles.title}>회원 정보 입력</h2>
+
+            <input style={styles.input} placeholder="보호자 이름을 입력하세요."/>
+            <input style={styles.input} placeholder="보호자 생일을 6글자로 입력하세요.."/>
+            <input style={styles.input} placeholder="피보호자 이름을 입력하세요."/>
+            <input style={styles.input} placeholder="피보호자 생일을 6글자로 입력하세요."/>
+
+            <Button text="넘어가기" color="#DABEC9" />
+        </div>
+    );
+};
+
+const styles = {
+    container: {
+        display : "flex",
+        flexDirection : "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        backgroundColor: "#F8EAD2",
+    },
+    image: {
+        width: "100px",
+        marginBottom: "20px",
+    },
+    title: {
+        fontSize: "24px",
+        marginBottom: "20px",
+    },
+    input: {
+        width: "80%",
+        padding: "10px",
+        marginBottom: "10px",
+        borderRadius: "10px",
+        border: "1px solid #ccc",
+    },
+};
+
+export default SignupPage;
\ No newline at end of file