diff --git a/Frontend/login.css b/Frontend/login.css
index dd7d240..fbbacfc 100644
--- a/Frontend/login.css
+++ b/Frontend/login.css
@@ -1,75 +1,139 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Orbitron', sans-serif;
-    }
-    body {
-    background-image: url("https://images.unsplash.com/photo-1543092587-d8b8feaf362b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    animation: rotateBg 60s infinite linear;
-    }
+[10:51 pm, 17/06/2023] Deepanshi: <div>
+        <nav style="display: flex">
+          <div>
+            
+            <img class="logo" src="/Frontend/Chess Battles_logo (2)/1.png" alt="Logo" />
+          </div>
+
+
+             <h1>
+               
+                Chess Battles</h1>
+               
+
+
+        <a href="login.html">
+
+
+
+
+     
+        <div class="dropdown-content">
+          <a class="dropdown-link" href="/Frontend/login.html">Login</a>
+          <a class="dropdown-link" href="/registar.html">Registration</a>
+        </div>
+      </div>
+    </a>
+          
+        </nav>
+[11:05 pm, 17/06/2023] Deepanshi: *{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Orbitron', sans-serif;
+  }
+  body {
+  background-image: url("https://images.unsplash.com/photo-1543092587-d8b8feaf362b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  animation: rotateBg 60s infinite linear;
+  }
+  
+  @keyframes rotateBg {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(0deg); }
+  }
+  
+  header {
+  background: linear-gradient(to right,  #081325, #de5246);
+  border-radius: 10px;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
+  }
+  
+  .login {
+  border-radius: 10px;
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(to bottom right, #dfbdbd, #e6d7d7 49.9%, #ecdadc 50%, #ecd9d9);
+  width: 90%;
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 40px;
+  text-align: center;
+  }
+  
+  .inputlogin {
+  border: none;
+  border-radius: 20px;
+  background-color: whitesmoke;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 10px;
+  padding: 10px 20px;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  }
+  
+  .inputlogin:focus {
+  background-color: rgba(255, 255, 255, 0.5);
+  }
+  
+  ::placeholder {
+  color: #999;
+  }
+  
+  #signinbtn,
+  #registerbtn {
+  border: none;
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 20px 10px;
+  padding: 10px 30px;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+  }
+  nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
     
-    @keyframes rotateBg {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(0deg); }
-    }
-    
-    header {
-    background: linear-gradient(to right,  #081325, #de5246);
-    border-radius: 10px;
-    width: 100%;
-    margin: 0 auto;
-    text-align: center;
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
-    }
-    
-    .login {
-    border-radius: 10px;
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
-    background: linear-gradient(to bottom right, #dfbdbd, #e6d7d7 49.9%, #ecdadc 50%, #ecd9d9);
-    width: 90%;
-    max-width: 400px;
-    margin: 50px auto;
-    padding: 40px;
-    text-align: center;
-    }
-    
-    .inputlogin {
-    border: none;
-    border-radius: 20px;
-    background-color: whitesmoke;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    margin: 10px;
-    padding: 10px 20px;
-    width: 100%;
-    box-sizing: border-box;
-    text-align: center;
-    outline: none;
-    }
-    
-    .inputlogin:focus {
-    background-color: rgba(255, 255, 255, 0.5);
-    }
-    
-    ::placeholder {
-    color: #999;
-    }
-    
-    #signinbtn,
-    #registerbtn {
-    border: none;
-    border-radius: 20px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: 600;
-    margin: 20px 10px;
-    padding: 10px 30px;
-    outline: none;
-    transition: all 0.2s ease-in-out;
-    }
\ No newline at end of file
+       
+    color: #ffffff;
+    padding: 0 30px;
+    background-color: rgb(0, 140, 255);
+  }
+  
+  
+  
+  /* Style for the logo */
+  
+  .logo {
+    border-radius: 0%;
+    object-fit: cover;
+  width: 70px;
+    margin-right: 10px;
+    margin-bottom: -5px;
+  }
+  
+  /* Animation for the logo */
+  
+  .logo:hover {
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  nav div:last-child {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
\ No newline at end of file
diff --git a/Frontend/login.html b/Frontend/login.html
index 0b138a0..f0b5712 100644
--- a/Frontend/login.html
+++ b/Frontend/login.html
@@ -21,10 +21,50 @@
     "></script>
 </head>
 <body>
-    <header>
+
+
+    <div>
+        <nav style="display: flex">
+          <div>
+            
+            <img class="logo" src="/Frontend/Chess Battles_logo (2).png" alt="Logo" />
+          </div>
+
+
+             <h1>
+               
+                Chess Battles</h1>
+               
+
+
+        <a href="login.html">
+
+
+
+
+     
+        <div class="dropdown-content">
+          <a class="dropdown-link" href="/Frontend/login.html">Login</a>
+          <a class="dropdown-link" href="/registar.html">Registration</a>
+        </div>
+      </div>
+    </a>
+          
+        </nav>
+
+
+
+
+
+
+
+
+
+
+    <!-- <header>
         <img src="/Frontend/Chess Battles_logo (2)/" alt="" srcset="">
         
-    </header>
+    </header> -->
     <div class="login">
         <form action="" class="loginform">
             <i class="fa fa-user" style="color:white"></i><input type="email" placeholder="Email" class="inputlogin" required></i><br>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f317a52
--- /dev/null
+++ b/index.html
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0%;
+            padding: 0%;
+        }
+
+        /* Style for the logo */
+
+        .logo {
+            border-radius: 0%;
+            object-fit: cover;
+            width: 70px;
+            margin-right: 10px;
+            margin-bottom: 0px;
+
+        }
+
+
+
+        /* Animation for the logo */
+
+        .logo:hover {
+            transform: scale(1.1);
+            transition: transform 0.3s ease-in-out;
+        }
+
+        nav div:last-child {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        * {
+            margin: 0%;
+            padding: 0%;
+        }
+
+        body {
+            background-color: bisque;
+            /* background-image:url("") */
+        }
+
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+
+        nav {
+            justify-content: space-between;
+            height: 80px;
+            background-color: rgb(0, 140, 255);
+            width: 100%;
+            margin-top: 0%;
+        }
+
+        nav h1 {
+            padding-top: 20px;
+            text-align: center;
+        }
+
+        /* .boxes{
+            display: flex;
+            height: 400px;
+            box-shadow: blue;
+        
+        }
+        .box1{
+            height:390px ;
+            width: 50%;
+            background-color: aqua;
+        }
+        .box2{
+            height:390px ;
+            width: 50%;
+            background-color:pink;
+        } */
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            /* margin-top: 20px; */
+        }
+
+        .box {
+            width: 50%;
+            padding: 20px;
+            box-sizing: border-box;
+            height: 600px
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                flex-direction: column;
+            }
+
+            .box {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+        }
+
+        /* css for box1 */
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        body {
+            background-image: url("https://images.unsplash.com/photo-1543092587-d8b8feaf362b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            background-size: cover;
+            animation: rotateBg 60s infinite linear;
+        }
+
+        @keyframes rotateBg {
+            from {
+                transform: rotate(0deg);
+            }
+
+            to {
+                transform: rotate(0deg);
+            }
+        }
+
+        /* header {
+  background: whitesmoke;
+  border-radius: 10px;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
+  } */
+
+        .login {
+            border-radius: 10px;
+            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
+            background: linear-gradient(to bottom right, #dfbdbd, #e6d7d7 49.9%, #ecdadc 50%, #ecd9d9);
+            width: 90%;
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 40px;
+            text-align: center;
+        }
+
+        .inputlogin {
+            border: none;
+            border-radius: 20px;
+            background-color: whitesmoke;
+            color: #fff;
+            font-size: 16px;
+            font-weight: 600;
+            margin: 10px;
+            padding: 10px 20px;
+            width: 100%;
+            box-sizing: border-box;
+            text-align: center;
+            outline: none;
+        }
+
+        .inputlogin:focus {
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        ::placeholder {
+            color: #999;
+        }
+
+        #signinbtn,
+        #registerbtn {
+            border: none;
+            border-radius: 20px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            margin: 20px 10px;
+            padding: 10px 30px;
+            outline: none;
+            transition: all 0.2s ease-in-out;
+        }
+
+        
+  .box {
+text-align: center;
+/* 
+border: 1px solid red; */
+
+  }
+
+        #Imggg {
+            width: 100%;
+
+        }
+    </style>
+</head>
+
+<body>
+
+
+
+    <div>
+        <nav style="display: flex">
+            <div>
+
+                <img class="logo" src="/Frontend/Chess Battles_logo (2)/1.png" alt="Logo" />
+            </div>
+
+
+            <h1>
+
+                Chess Battles</h1>
+
+
+
+            <a href="login.html">
+
+
+
+
+
+                <div class="dropdown-content">
+                    <a class="dropdown-link" href="/Frontend/login.html">Login</a>
+                    <a class="dropdown-link" href="/registar.html">Registration</a>
+                </div>
+    </div>
+    </a>
+
+    </nav>
+
+    <!-- 
+            <div class="boxes">
+                <div id="box1">1</div>
+                <div id="box2">2</div>
+            </div> -->
+
+    <div class="container">
+        <div class="box">
+            <h2>LOGIN</h2>
+            <!-- <p>This is the content of Box 1.</p> -->
+            <div>
+                <header>
+                    <img src="/Frontend/Chess Battles_logo (2)/" alt="" srcset="">
+
+                </header>
+                <div class="login">
+                    <form action="" class="loginform">
+                        <i class="fa fa-user" style="color:white"></i><input type="email" placeholder="Email"
+                            class="inputlogin" required></i><br>
+                        <i class="fa fa-lock" style="color:white"></i><input type="password" placeholder="Password"
+                            class="inputlogin" required><br>
+                        <input type="submit" value="Sign in" id="signinbtn">
+                    </form>
+                    <hr>
+                    <button id="registerbtn" onclick="window.location.href='./register.html'">Register</button>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+
+
+
+            <!-- <h2>Box 2</h2> -->
+            <img id="Imggg" src="https://wallpapercave.com/wp/wp2883270.jpg">
+        </div>
+    </div>
+
+
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file