Login ver1.1.1(modify value)

 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
   </profile>
 </component>
\ No newline at end of file

@@ -3,18 +3,18 @@ import "../style/LoginPage.scss";
 import { Icon, Input } from "semantic-ui-react"
 
 function LoginPage() {
-    const [Id, setId] = useState("");
+    const [Email, setEmail] = useState("");
     const [Password, setPassword] = useState("");
 
     const onIdHandler = (event) => {
-        setId(event.currentTarget.value);
+        setEmail(event.currentTarget.value);
     };
     const onPasswordHandler = (event) => {
         setPassword(event.currentTarget.value);
     };
     const onSubmitHandler = (event) => {
         event.preventDefault();
-        console.log("Id", Id);
+        console.log("Email", Email);
         console.log("Password", Password);
     };
     return (
@@ -28,7 +28,7 @@ function LoginPage() {
                             iconPosition='left'
                             placeholder="Email"
                             type="text"
-                            value={Id}
+                            value={Email}
                             autoComplete="off"
                             onChange={onIdHandler}/>
                     </div>

-import React from "react";
+import React, { useState } from "react";
+import "../style/RegisterPage.scss";
+import { Icon, Input } from "semantic-ui-react"
 
 function RegisterPage() {
-    return <div>Register</div>;
+    const [Email, setEmail] = useState("");
+    const [Password, setPassword] = useState("");
+
+    const onIdHandler = (event) => {
+        setEmail(event.currentTarget.value);
+    };
+    const onPasswordHandler = (event) => {
+        setPassword(event.currentTarget.value);
+    };
+    const onSubmitHandler = (event) => {
+        event.preventDefault();
+        console.log("Email",Email);
+        console.log("Password", Password);
+    };
+    return (
+        <div id="body">
+            <div className="register-form">
+                <form onSubmit={onSubmitHandler}>
+                    <h1>Tunnel</h1>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='at'/>}
+                            iconPosition='left'
+                            placeholder="Email"
+                            type="text"
+                            value={Email}
+                            autoComplete="off"
+                            onChange={onIdHandler}/>
+                    </div>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='lock'/>}
+                            iconPosition='left'
+                            placeholder="Password"
+                            type="password"
+                            value={Password}
+                            autoComplete="off"
+                            onChange={onPasswordHandler}/>
+                    </div>
+                    <div className="btn-area">
+                        <button className="register-btn" >Register</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
 }
 
 export default RegisterPage;

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+#body{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url("../images/login_background.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  .register-form {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    width: 500px;
+    height: 620px;
+    box-shadow: 0px 0px 20px #000;
+  }
+  h1 {
+    font-size: 40px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 60px ;
+  }
+  .input-area {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 400px;
+    position: relative;
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: medium;
+
+    input {
+      width: 75%;
+      padding: 15px .8em .8em;
+      background-color: transparent;
+      border: 2px solid white;
+      border-radius: 30px;
+      font-size: 18px;
+      color: white;
+      outline: none;
+    }
+
+    label {
+      position: absolute;
+      left: 10px;
+      top: -2px;
+      font-size: 14px;
+      color: white;
+    }
+  }
+  .btn-area {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 30px;
+
+    .register-btn {
+      width: 150px;
+      height: 50px;
+      background-color: transparent;
+      font-size: 20px;
+      color: white;
+      border: 2px solid white;
+      font-weight: bold;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+  }
+}
+