diff --git a/src/pages/login.js b/src/pages/login.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f46ee94c9738f1308689b4bc3c253446988cc99
--- /dev/null
+++ b/src/pages/login.js
@@ -0,0 +1,77 @@
+import React, {useState} from 'react';
+import styles from "./login.module.css"
+
+//import axios from 'axios';
+
+const Login=()=>{
+  const [username, setUsername]=useState('');
+  const[password, setPassword]=useState('');
+  const[seePassword, setSeePassword]=useState(true);
+
+  const handleLogin =async()=>{
+    try{
+      const response=await fetch('http://localhost:5000/login',{
+        method:'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({username, password}),
+      });
+      const data = await response.json();
+      if (response.status===200){
+        console.log('Login successful');
+        localStorage.setItem('access-token', data['access-token']);
+      }else{
+        console.log('Login failed:', data.message);
+      }
+    }catch(error){
+      console.log('error during login', error);
+    }
+  };
+  const seePasswordHandler=()=>{
+    setSeePassword(!seePassword);
+  }
+
+  return(
+    <section className='login-container'>
+     <div class='logo_img'><img src='/planpuzzle_logo.png' height='80px'></img></div>
+      <div className='title'>로그인</div>
+      <div className='input-container'>
+        <div className='input-with-image'>
+        
+        <img src='/id.png' alt="ID"  height="17px" width='18px'></img>
+        <input 
+          type="text" 
+          value={username}
+          placeholder='아이디'
+          onChange={(e) => setUsername(e.target.value)} />
+        
+        </div>
+        <br />
+        <div className='input-with-image'>
+        <img src="/password.png" alt="Password" height="20px" width='14px'></img>
+        <input 
+        type={seePassword? 'password':'text'}
+        value={password} 
+        placeholder='비밀번호'
+        onChange={(e) => setPassword(e.target.value)} />
+        <span className='eye-img'><img src={seePassword ? './eye-off.png' : './eye-on.png'}
+          alt='비밀번호 가시성 전환'
+          height='18px'
+          width='17px'
+          onClick={seePasswordHandler}
+          ></img></span>
+
+      </div>
+      </div>
+      <br />
+
+      <button class='login' onClick={handleLogin}>로그인</button>
+    
+
+      <div className={styles.stick}>―――――――――<span className="or"> 또는 </span>―――――――――</div>
+      <div className={styles.gotoJoin}>아직 계정이 없으신가요? <a href="/users" className="loginText">회원가입</a></div>
+      </section> 
+  );
+}
+export default Login;
\ No newline at end of file