diff --git a/Frontend/package.json b/Frontend/package.json
index e334ac9..ccdc0d3 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/Frontend/public/vite.png b/Frontend/public/vite.png
new file mode 100644
index 0000000..90b80dc
Binary files /dev/null and b/Frontend/public/vite.png differ
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 6bcee72..cdbbd51 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import Body from './components/Body'
-//  import Header from './components/Header'
+import Body from './components/Login'
+
 
 
 const App = () => {
diff --git a/Frontend/src/components/Body.jsx b/Frontend/src/components/Body.jsx
deleted file mode 100644
index 1f0f9c5..0000000
--- a/Frontend/src/components/Body.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react'
-import { SiValorant } from "react-icons/si";
-import { SiPubg } from "react-icons/si";
-import Header from './Header';
-const Body = () => {
-  return (
-    <div>
-      <div class='body'>
-        <div class="page">
-        <Header/>
-     <div class="sign-in-box">
-       <h2 class="sign-in-box-heading">Sign In</h2>
-       <input
-         class="input-text"
-         type="text"
-         placeholder="USERNAME"
-         name="username"
-       />
-       <input
-         class="input-text"
-         type="password"
-         placeholder="PASSWORD"
-         name="username"
-       />
-       <input type="checkbox" id="checkbox" name="scales" checked />
-       <label for="checkbox">Stay Signed In</label>
-       <button class="sign-in-button">Continue</button>
-       <div class="sign-in-div">
-         <p class="text">Can't Sign In</p>
-         <p class="text">Create new acccount</p>
-       </div>
-       <div>
-         <div class="line"></div>
-         <div class="line"></div>
-         <div class="line"></div>
-         <div class="line"></div>
-       </div>
-       <p class="end-text">Tournament Supported Games</p>
-       <div class = "logo flex  justify-between ml-5 mr-5">
-         <div><SiValorant size={25} /></div>
-         <div>< SiPubg size={25} /></div>
-         <div><SiValorant size={25} /></div>
-         <div><SiValorant size={25} /></div>
-       </div>
-     </div>
-
-     <footer class="page-footer">
-       <ul class="footer-list">
-         <li class="list-item">CONTACT US</li>
-         <li class="list-item">TERMS OF SERVICE</li>
-         <li class="list-item">PRIVACY POLICY</li>
-       </ul>
-     </footer>
-   </div>
-    </div>
-    </div>
-  )
-}
-
-export default Body
diff --git a/Frontend/src/components/Login.jsx b/Frontend/src/components/Login.jsx
new file mode 100644
index 0000000..00245ab
--- /dev/null
+++ b/Frontend/src/components/Login.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { SiValorant } from "react-icons/si";
+import { SiPubg } from "react-icons/si";
+import Header from './Header';
+const Body = () => {
+  
+  const [isLogin, setIslogin] = useState(false);
+  const LoginHandler = () =>{
+    setIslogin (!isLogin);
+  }
+  const [Fullname,setFullname]=useState("");
+  const [Email,setEmail]=useState("");
+  const [Password,setPassword]=useState("");
+  const getInputData=(e)=>{
+e.preventDefault();
+console.log(Email,Password,Fullname);
+  }
+  return (
+    <div>
+      <div className='body'>
+        <div className="page">
+        <Header/>
+       
+     <form className="sign-in-box " onSubmit={getInputData}>
+       <h2 className="sign-in-box-heading text-3xl font-bold">{isLogin ? "LOGIN" : "SIGN UP"}</h2>
+       {!isLogin&&
+         <input
+         onChange={(e)=>setFullname(e.target.value)}
+         className="input-text"
+         type="text"
+         placeholder="USERNAME"
+         name="username"
+         value={Fullname}
+       />
+       }
+      
+       <input
+         className="input-text"
+         type="email"
+         placeholder="Email"
+         name="username"
+         value={Email}
+         onChange={(e)=>setEmail(e.target.value)}
+       />
+         <input
+         className="input-text"
+         onChange={(e)=>setPassword(e.target.value)}
+         type="password"
+         placeholder="PASSWORD"
+         name="username"
+         value={Password}
+       />
+       <input type="checkbox" id="checkbox" name="scales" checked />
+       <label for="checkbox">Stay Signed In</label>
+       <button className="sign-in-button" >Continue</button>
+       <div className="sign-in-div">
+       <p className="text">{isLogin ? "Create a new account" : "Already Have a account "}</p>
+         <p className="text-yellow-800 mr-11 cursor-pointer " onClick={LoginHandler}>{isLogin ? "SIGN-IN" : "login"}</p>
+         
+       </div>
+       <div>
+         <div className="line"></div>
+         <div className="line"></div>
+         <div className="line"></div>
+         <div className="line"></div>
+       </div>
+       <p className="end-text">Tournament Supported Games</p>
+       <div className = "logo flex  justify-between ml-5 mr-5">
+         <div><SiValorant size={25} /></div>
+         <div>< SiPubg size={25} /></div>
+         <div><SiValorant size={25} /></div>
+         <div><SiValorant size={25} /></div>
+       </div>
+     </form>
+
+
+     <footer className="page-footer">
+       <ul className="footer-list">
+         <li className="list-item">CONTACT US</li>
+         <li className="list-item">TERMS OF SERVICE</li>
+         <li className="list-item">PRIVACY POLICY</li>
+       </ul>
+     </footer>
+   </div>
+    </div>
+    </div>
+  )
+}
+
+export default Body
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index 5902f21..f89317c 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -8,7 +8,7 @@
 }
 
 .body{
-    background-image: url("https://cdn.discordapp.com/attachments/1241785032725631079/1257564641433878568/vite.png?ex=6684ddd6&is=66838c56&hm=06cdcfad5d2e4f69e071e0856571babec173b898564b3d73533184c869400a65&");
+    background-image: url("../public/vite.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
@@ -17,20 +17,17 @@
     width: 100vw;
     margin-bottom: 0px;
 }
-img{
-    width : 100%;
-    height : 100%;
-}
+
        /* sign in box */
 
 .sign-in-box{
     background-color: white;
-    height : 60vh;
+    height : 65vh;
     width : 23vw;
     border-radius : 20px;
     padding : 20px;
     position : absolute;
-    top : 20%;
+    top : 15%;
     left : 65%;
     opacity : 90%;
 }
@@ -40,7 +37,7 @@ img{
 }
 .input-text{
     width : 90%;
-    margin: 15px 12px;
+    margin: 10px 10px;
     height : 35px;
     border-radius : 10px;
     text-align: center;