diff --git a/pages/login/index.js b/pages/login/index.js
new file mode 100644
index 0000000..0a621b4
--- /dev/null
+++ b/pages/login/index.js
@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import styles from "../../styles/Login.module.css";
+
+
+export default function Login(){
+
+    const[codeNumber,setCodeNumber]=useState("");
+    const onChange = (event) => {
+        console.log(event.target.value);
+    }
+return(
+    <div className={styles.background}>
+        <div className={styles.logo_img}/>
+            <div><a className={styles.inputrequest}>Input your code number...</a>
+                <div>
+                    <input
+                        id="id"
+                        type="text"
+                        value={codeNumber}
+                        className={styles.inputBox}
+                        onChange={onChange}
+                        placeholder="code number"/>
+                    <div className={styles.prove}>
+                        <a><span style={{color:"#F9E219"}}>학번</span>으로 대숭실대 우주전사임을 증명해주세요!</a>
+                    </div>
+                </div>
+                
+            </div>
+            <div className={styles.loginBtn}><a href="/login">Login{">"}</a></div>
+            <div className={styles.ssumcBtn}><a>SSUMC</a></div>
+    </div>  
+)
+}
diff --git a/styles/Login.module.css b/styles/Login.module.css
new file mode 100644
index 0000000..b36e1e3
--- /dev/null
+++ b/styles/Login.module.css
@@ -0,0 +1,97 @@
+.background {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: url(../public/background_image.png);
+    min-height: 100vh;
+    background-repeat: repeat-y;
+    background-size: 100%;
+    overflow: scroll;
+    
+  }
+.container {
+    overflow: scroll;
+    /*overflow: scroll;*/
+    max-width: 500px;
+    padding: 20px 0;
+    text-align: center;
+  
+    color: aliceblue;
+    padding-top: 20px;
+    font-family: "NeoDunggeunmo";
+    text-align: center;
+    margin: 0 auto;
+  }
+.logo_img {
+    margin: 15px;
+    bottom: 100px;
+    width: 30vw;
+    min-width: 200px; 
+    max-width: 500px;
+    content: url(../public/startdust_logo.png);
+
+  }
+.inputrequest{
+    margin-top: 10px;
+    padding-top: 30px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    font-family: "NeoDunggeunmo";
+    font-size: 10px;
+    color: aliceblue;
+}
+
+.inputBox{
+    margin: 5px;
+    margin-left: 0;
+    color: aliceblue;
+    background-color:transparent; /*배경 투명*/
+    border:1px solid #F9E219; /* 라인선 none 인 경우 아예 안보임*/
+    padding:5px; /* 상하좌우 크기는 여백으로 설정 */ 
+    padding-left: 15px;
+    font-size:18px; 
+    font-family: "NeoDunggeunmo";
+    border-radius: 3px;
+}
+
+.prove{
+    font-size:3px; 
+    font-family: "NeoDunggeunmo";
+    color: aliceblue;
+}
+
+.loginBtn{
+    display:inline-block;
+    margin-top: 30px;
+    margin-bottom: 100px;
+    text-align: center;
+    width: 30vw;
+    font-family: "NeoDunggeunmo";
+    color: #F9E219;
+    font-size: 13px;
+}
+
+.ssumcBtn{
+    margin: 30px;
+    text-align: center;
+    font-family: "NeoDunggeunmo";
+    color: aliceblue;
+    font-size: 13px;
+}
+
+@keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+ @font-face {
+    font-family: "NeoDunggeunmo";
+    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff")
+      format("woff");
+    font-weight: normal;
+    font-style: normal;
+  }
\ No newline at end of file